settings
scrapboxを改造しております
Logseqの拡張機能みたいなインデント表示
code:style.css
.indent-mark {
height: 100% !important;
}
.indent-mark .pad {
height: 100% !important;
overflow: unset !important;
}
.indent-mark span:nth-child(2n+2) .pad {
background: #262626;
}
できた
発動条件を確認中
原因不明
折り返しに対応していない
code:style.css
.new-button{
display:none
}
/villagepump/Streamにアクセスするボタンを表示するCSS
code:style.css
.navbar .navbar-menu > li.stream-btn {
display: block !important;
a { color: var(--navbar-icon-color, #fff); }
}
drawingを消す
code:style.css
ularia-labelledby="page-edit-menu" li:nth-child(7) {
display: none;
}
鍵マークをプライベートとの移動に使う
code:style.css
.status-bar{
height: 30px;
}
.status-bar .kamon {
width: 30px;
height: 30px;
line-height: 40px;
font-size: 30px;
display: inline-block;
}
.status-bar>div.page-title{
display:none;
}
/wkpmm/YouTubeの埋め込みを小さくするUserCSS
リンクの先頭にアイコンをつける機能は標準だった
ブラケットする必要があった
タイトルにリンクを含める
code:style_.css
.lines:has( .section--1) .line:nth-child(2) {
font-size: 1.73em;
line-height: 42px;
padding-bottom: 21px;
}
上のコードにカーソルがないことを追加した
code:style_.css
.lines:has(.line:nth-child(2)) .section--1:not(.cursor-line){
display: none;
}
code:note.css
.lines:has( .section--1):has(.line:nth-child(2)) .section--1:not(.cursor-line){
display: none;
}
これでもいいのだが，:has( .section--1)を消している．section--1があることは，後ろで決定しているので，不要
scrapbox禅モード
code:style.css
.container:has(.page-list):not(:hover)
{
opacity: 0.2;
transition: opacity 0.1s;
}
.container:has(.page-list):hover
{
opacity: 1;
transition: opacity 0.1s;
}
関連ページはそんなに気にならないのでオフ
PCだと気になるかもしれない
code:style_.css
.related-page-list:not(:hover)
{
opacity: 0.4;
transition: opacity 0.2s;
}
.related-page-list:hover
{
opacity: 1;
transition: opacity 0.2s;
}
結論を目立たせる
code:style.css
.line:has(ahref="/untitled/DONE")
{
position: sticky;
bottom: 70px;
background-color: #838a84;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
sticky headingを採用
code:style_.css
.line-title
{
position: sticky;
top: 30px;
}
.line-title .text span
{
background-color: var(--page-bg, #fefefe);
}
検索バーにクリアボタンを追加
code:style.css
.search-form button.btn-cross-circle{
color: #4a4a4a;
}
.search-form:has(input:not(:focus)) button.btn-cross-circle{
display:none;
}
.search-form .form-group button.btn-search.focus{
display:none;
}
カーソル点滅CSS
code:style.css
.cursor-container .cursor {
animation: blink 1s infinite;
opacity: 1;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
51% { opacity: 0; }
100% { opacity: 0;}
}
/customize/打ち消し線で文字や icon を薄く見せる
code:style.css
.deco-- { color: #999999; }
.deco-- img { opacity: 0.4; }
/customize/ページの閲覧数を非表示にするUserCSS
code:style.css
#page-info-menu + ul > li:nth-child(6) {
display: none;
}
/scrapboxlab/コードブロックの直後にインデントされた本文を置くUserCSS
code:style_.css
.line:has(> .code-block) + .line:has(.empty-char-index):not(:has(.code-block)) {
/* background-color: red; */
height: 0px;
}
/customize/ピン留めされたページを独立した段に表示する
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
コードブロックの行に番号を振る
code:style.css
/* コード記法の行番号を表示 -- ウィンドウ幅768px以上で適用 */
@media screen and (min-width: 768px) {
.section-title {
counter-reset: codeline;
}
.code-block span.indent code.code-body {
counter-increment: codeline;
margin-left: -1.5em;
padding-left: 2.3em;
}
.code-block span.indent code.code-body::before {
content: counter(codeline);
position: absolute;
display: inline-block;
z-index: 10;
margin-left: -2.4em;
width: 2em;
padding-right: 0.2em;
text-align: right;
vertical-align: bottom;
border-right: solid 1px #fff;
/* ↓行番号の色の指定はここ */
color: var(--code-number-color);
}
/* カーソル行の行番号を濃く表示する */
.code-block span.indent code.code-body::before {
opacity: .5;
}
.cursor-line .code-block span.indent code.code-body::before {
opacity: 1;
font-weight: bolder;
/* ↓カーソル行の背景色の色はここ */
background-color: var(--code-accent-color);
}
}
code:style.css
.telomere-border .menu-item:nth-child(3){
display:none;
}
URL短縮
code:style_.css
a.link {
display: -webkit-box;
-webkit-line-clamp: 2; /* 表示する最大行数 */
-webkit-box-orient: vertical;
overflow: hidden;
}
scrapboxのカードのテロメアを左に
code:style.css
.grid li.page-list-item a .header {
border-top: none !important;
border-left: var(--card-title-bg, #f2f2f3) solid 4px;
padding: 10px 12px 10px 8px !important;
}
.grid li.page-list-item a .description {
border-left: var(--card-title-bg, #f2f2f3) solid 4px;
padding: 0 12px 0 8px !important;
margin-bottom: 5px;
}
.grid li.page-list-item a .icon {
border-left: var(--card-title-bg, #f2f2f3) solid 4px;
margin-inline: 0px !important;
border-radius: 0px;
margin-bottom: 5px;
}
.grid li.page-list-item a .content {
height: 100%;
}
.grid li.page-list-item.unread .content .header {
border-color: var(--telomere-unread, #89a3ff);
}
.grid li.page-list-item.unread .content .description {
border-color: var(--telomere-unread, #89a3ff);
}
.grid li.page-list-item.unread .content .icon {
border-color: var(--telomere-unread, #89a3ff);
}
見せるリンク#68a1dcd40000000000075002
code:style.css
span:has(> a.linkhref*="#:~:text="){
background-color: var(--quote-bg-color, rgba(0, 0, 0, 0.05));
display: block;
border-left: solid 1px #a0a0a0;
padding-left: 3px;
text-decoration: none;
}
a.link:not(:has(span.empty-char-index)) {
text-decoration: none;
}
a.linkhref*="#:~:text="{
color: var(--page-text-color, #4a4a4a);
}
a.linkhref*="#:~:text=">spandata-char="="+*::before{
content: ">";
visibility:hidden;
}
見せるリンク#68a1e795000000000093d9fd
textfragmentの特殊なエスケープのみ
他は，URLエンコードのエスケープをプレビューでエンコードする
code:style.css
/* %2D を-に見た目だけ変える */
a.linkhref*="#:~:text=" spandata-char="%":has(+ spandata-char="2" + spandata-char="D"),
a.linkhref*="#:~:text=" spandata-char="%" + spandata-char="2":has(+ spandata-char="D"){
display:none;
}
a.linkhref*="#:~:text=" spandata-char="%" + spandata-char="2" + spandata-char="D"{
font-size:0;
}
a.linkhref*="#:~:text=" spandata-char="%" + spandata-char="2" + spandata-char="D"::after{
content: "-";
font-size:15px;
}
code:style.css
/* %26 を&に見た目だけ変える */
a.linkhref*="#:~:text=" spandata-char="%":has(+ spandata-char="2" + spandata-char="6"),
a.linkhref*="#:~:text=" spandata-char="%" + spandata-char="2":has(+ spandata-char="6"){
display:none;
}
a.linkhref*="#:~:text=" spandata-char="%" + spandata-char="2" + spandata-char="6"{
font-size:0;
}
a.linkhref*="#:~:text=" spandata-char="%" + spandata-char="2" + spandata-char="6"::after{
content: "&";
font-size:15px;
}
code:style.css
/* %2C を,に見た目だけ変える */
a.linkhref*="#:~:text=" spandata-char="%":has(+ spandata-char="2" + spandata-char="C"),
a.linkhref*="#:~:text=" spandata-char="%" + spandata-char="2":has(+ spandata-char="C"){
display:none;
}
a.linkhref*="#:~:text=" spandata-char="%" + spandata-char="2" + spandata-char="C"{
font-size:0;
}
a.linkhref*="#:~:text=" spandata-char="%" + spandata-char="2" + spandata-char="C"::after {
content: ",";
font-size:15px;
}
URL短縮
textfragment
code:style.css
a.linkhref*="#:~:text=">span:first-of-type,
a.linkhref*="#:~:text=">span:first-of-type ~ *{
font-size:10px;
opacity:10;
display:none;
}
a.linkhref*="#:~:text=">spandata-char="#" + * + * + * + * + * + * + * + * ~ * {
font-size: 15px; /* もしくは元の色 */
opacity:1;
display:inline;
}
scrapboxにhttp以外のリンクを設置する
code:style.css
a.link[href*="http://localhost"]>span:first-of-type,
a.link[href*="http://localhost"]>span:first-of-type ~ *{
font-size:10px;
opacity:10;
display:none;
}
a.link[href*="http://localhost"]>span[data-char="/"] ~ spandata-char="/" ~ spandata-char="/"~ * {
font-size: 15px; /* もしくは元の色 */
opacity:1;
display:inline;
}
URLエンコードのエスケープをプレビューでエンコードする
code:style.css
a.link spandata-char="%":has(+ spandata-char="2" + spandata-char="0"),
a.link spandata-char="%" + spandata-char="2":has(+ spandata-char="0"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="0"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="0"::after{
content: " " !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="2" + spandata-char="1"),
a.link spandata-char="%" + spandata-char="2":has(+ spandata-char="1"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="1"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="1"::after{
content: "!" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="2" + spandata-char="2"),
a.link spandata-char="%" + spandata-char="2":has(+ spandata-char="2"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="2"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="2"::after{
content: "\"" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="2" + spandata-char="3"),
a.link spandata-char="%" + spandata-char="2":has(+ spandata-char="3"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="3"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="3"::after{
content: "#" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="2" + spandata-char="4"),
a.link spandata-char="%" + spandata-char="2":has(+ spandata-char="4"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="4"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="4"::after{
content: "$" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="2" + spandata-char="5"),
a.link spandata-char="%" + spandata-char="2":has(+ spandata-char="5"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="5"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="5"::after{
content: "%" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="2" + spandata-char="6"),
a.link spandata-char="%" + spandata-char="2":has(+ spandata-char="6"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="6"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="6"::after{
content: "&" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="2" + spandata-char="7"),
a.link spandata-char="%" + spandata-char="2":has(+ spandata-char="7"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="7"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="7"::after{
content: "\'" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="2" + spandata-char="8"),
a.link spandata-char="%" + spandata-char="2":has(+ spandata-char="8"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="8"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="8"::after{
content: "(" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="2" + spandata-char="9"),
a.link spandata-char="%" + spandata-char="2":has(+ spandata-char="9"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="9"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="9"::after{
content: ")" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="2" + spandata-char="A"),
a.link spandata-char="%" + spandata-char="2":has(+ spandata-char="A"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="A"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="A"::after{
content: "*" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="2" + spandata-char="B"),
a.link spandata-char="%" + spandata-char="2":has(+ spandata-char="B"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="B"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="B"::after{
content: "+" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="2" + spandata-char="C"),
a.link spandata-char="%" + spandata-char="2":has(+ spandata-char="C"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="C"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="C"::after{
content: "," !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="2" + spandata-char="F"),
a.link spandata-char="%" + spandata-char="2":has(+ spandata-char="F"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="F"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="2" + spandata-char="F"::after{
content: "/" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="3" + spandata-char="A"),
a.link spandata-char="%" + spandata-char="3":has(+ spandata-char="A"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="3" + spandata-char="A"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="3" + spandata-char="A"::after{
content: ":" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="3" + spandata-char="B"),
a.link spandata-char="%" + spandata-char="3":has(+ spandata-char="B"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="3" + spandata-char="B"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="3" + spandata-char="B"::after{
content: ";" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="3" + spandata-char="C"),
a.link spandata-char="%" + spandata-char="3":has(+ spandata-char="C"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="3" + spandata-char="C"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="3" + spandata-char="C"::after{
content: "<" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="3" + spandata-char="D"),
a.link spandata-char="%" + spandata-char="3":has(+ spandata-char="D"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="3" + spandata-char="D"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="3" + spandata-char="D"::after{
content: "=" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="3" + spandata-char="E"),
a.link spandata-char="%" + spandata-char="3":has(+ spandata-char="E"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="3" + spandata-char="E"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="3" + spandata-char="E"::after{
content: ">" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="3" + spandata-char="F"),
a.link spandata-char="%" + spandata-char="3":has(+ spandata-char="F"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="3" + spandata-char="F"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="3" + spandata-char="F"::after{
content: "?" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="4" + spandata-char="0"),
a.link spandata-char="%" + spandata-char="4":has(+ spandata-char="0"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="4" + spandata-char="0"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="4" + spandata-char="0"::after{
content: "@" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="5" + spandata-char="B"),
a.link spandata-char="%" + spandata-char="5":has(+ spandata-char="B"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="5" + spandata-char="B"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="5" + spandata-char="B"::after{
content: "[" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="5" + spandata-char="D"),
a.link spandata-char="%" + spandata-char="5":has(+ spandata-char="D"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="5" + spandata-char="D"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="5" + spandata-char="D"::after{
content: "]" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="5" + spandata-char="E"),
a.link spandata-char="%" + spandata-char="5":has(+ spandata-char="E"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="5" + spandata-char="E"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="5" + spandata-char="E"::after{
content: "^" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="6" + spandata-char="0"),
a.link spandata-char="%" + spandata-char="6":has(+ spandata-char="0"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="6" + spandata-char="0"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="6" + spandata-char="0"::after{
content: "`" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="7" + spandata-char="B"),
a.link spandata-char="%" + spandata-char="7":has(+ spandata-char="B"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="7" + spandata-char="B"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="7" + spandata-char="B"::after{
content: "{" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="7" + spandata-char="C"),
a.link spandata-char="%" + spandata-char="7":has(+ spandata-char="C"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="7" + spandata-char="C"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="7" + spandata-char="C"::after{
content: "|" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="7" + spandata-char="D"),
a.link spandata-char="%" + spandata-char="7":has(+ spandata-char="D"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="7" + spandata-char="D"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="7" + spandata-char="D"::after{
content: "}" !important;
font-size:15px !important;
}
a.link spandata-char="%":has(+ spandata-char="7" + spandata-char="E"),
a.link spandata-char="%" + spandata-char="7":has(+ spandata-char="E"){
display:none !important;
}
a.link spandata-char="%" + spandata-char="7" + spandata-char="E"{
font-size:0 !important;
}
a.link spandata-char="%" + spandata-char="7" + spandata-char="E"::after{
content: "~" !important;
font-size:15px !important;
}
/customize/外部リンクを区別するUserCSS#Cosenseからセレクタを，
/villagepumpの表現を拝借
code:style.css
/* 外部リンクにiconをつける */
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after {
font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands";
font-weight: 900;
font-size: .8rem;
content: "\f35d";
display: inline-block;
cursor: text;
}