scrapboxのusercss

style.css

@import "/api/code/nozma/見える文字数カウンター/style.css";

.page { /* pageにしないとテロメアが見えない */
	/* テーブルがはみ出てしまう場合に横スクロールするように */
	overflow-x: scroll;
}

/* テーブルの1行目を太字、中央揃え (要UserScript) */
 .table-start + .line .table-block .cell {
 	font-weight: bolder;
 	text-align: center;
 	border-bottom: solid 1px #cccccc;
 }

/* 箇条書きのドットを控えめにする */
 .line .indent-mark .dot{
 	border-radius: .1em;
 	height: .2em;
 	width: .3em;
 	background-color: #bbb;
 }
 .line .indent-mark .c-1 + .dot {
   	opacity: 0.8;
 }
 .line .indent-mark .c-2 + .dot {
   	opacity: 0.6;
 }
 .line .indent-mark .c-3 + .dot {
   	opacity: 0.4;
 }
 .line .indent-mark .c-4 + .dot {
   	opacity: 0.2;
 }
 /* コードの外観をどうにかしたい */
 code {
     /* ちゃんと等幅にする (ブラウザの設定で等幅フォントを指定する必要あり。Osakaはダメ) */
     font-family: monospace;
     /* 等幅フォントに変えるとちょい小さく見えるので気持ち大きめに */
     font-size: 95% !important; 
 }
 
 /* ピン留めページを目立たなくする */
 .grid li.page-list-item a .pin { /* ピンを消す */
     display: none;
 } 
 .grid li.page-list-item a .header.pinned { /* カードのヘッダの装飾を消す */
     border-top: 0px;
 } 
 .grid li.page-list-item.pin { /* カードの高さを縮める */
 	height: 35px;
 	aspect-ratio: auto;
 }
 .grid li.page-list-item.pin a { /* カードの存在感を消す */
     /* opacity: 0.3; */
     /* box-shadow: none; /* 影を消す */
 }
 .page-list-item.pin + .page-list-item:not(.pin) { /* カードを別の行に表示 */
     grid-column: 1;
 }
 
 /* インデントに沿って薄く線をつける */
 .indent-mark .char-index{
  --ir-opacity: 0.3;
  --ir-red:     rgba(255,   0,   0, var(--ir-opacity)); 
  --ir-orange:  rgba(255, 165,   0, var(--ir-opacity));
  --ir-yellow:  rgba(255, 255,   0, var(--ir-opacity));
  --ir-green:   rgba(  0, 128,   0, var(--ir-opacity));
  --ir-blue:    rgba(  0,   0, 255, var(--ir-opacity));
  --ir-violet:  rgba(238, 130, 238, var(--ir-opacity));
  --ir-purple:  rgba(128,   0, 128, var(--ir-opacity));
 }
 
 .indent-mark { 
 	height: 100% !important;
 }
 .indent-mark .pad {
 	height: 100% !important;
 	overflow: unset !important;
 }
 /* span:not(.table-block) .indent-mark .char-index:nth-child(n+2) .pad {border-left: 1px solid rgba(0,0,0,0.05);} */ 
 span:not(.table-block) .indent-mark .char-index:nth-child(n+2) .pad {border-left: 1px solid var(--ir-red);} 
 span:not(.table-block) .indent-mark .char-index:nth-child(n+3) .pad {border-left: 1px solid var(--ir-orange);} 
 span:not(.table-block) .indent-mark .char-index:nth-child(n+4) .pad {border-left: 1px solid var(--ir-yellow);} 
 span:not(.table-block) .indent-mark .char-index:nth-child(n+5) .pad {border-left: 1px solid var(--ir-green);} 
 span:not(.table-block) .indent-mark .char-index:nth-child(n+6) .pad {border-left: 1px solid var(--ir-blue);} 
 span:not(.table-block) .indent-mark .char-index:nth-child(n+7) .pad {border-left: 1px solid var(--ir-violet);} 
 span:not(.table-block) .indent-mark .char-index:nth-child(n+8) .pad {border-left: 1px solid var(--ir-purple);} 
 
   /* -- 白抜き文字は見づらい問題対策 -- */
  /* https://scrapbox.io/help-jp/文字装飾記法 で紹介されている事例がそのまま適用されると割と見づらいので対策した */
  /* 独自強調装飾を蛍光ペン風にする */
  .deco-\# {
  	color: inherit;
  	background: linear-gradient(transparent 60%, rgba(102, 170, 102, .3) 60%);
  }
  .deco-\! {
  	color: inherit;
  	font-size: inherit;
  	background: linear-gradient(transparent 60%, rgba(238, 102, 102, .3) 60%);
  }
  
  /* 吹き出しを枠線にする + 高さが変わらないよう調整 */
  .deco-\{, .deco-\} {
    position: relative;
    font-size: 0.95em;
    color: inherit;
    background-color: #ffffff;
    padding: 0 0.4em;
    border: 1px solid #b2bcba;
    border-radius: 0.4em;
    margin: 0.05em 0.6em;
    display: inline-block;
    max-width: calc(100% - 100px);
    vertical-align: text-bottom;
    line-height: 1.3em;
  }
  .deco-\{:before, .deco-\{:after, .deco-\}:before, .deco-\}:after {
    position: absolute;
    content: "";
    border-style: solid;
    transform: none;
  }
  
  .deco-\{:before {
    left: 0; top: 0.6em;
    margin-left: -0.6em;
    border-width: 0 0 0.6em 0.6em;
    border-color: #b2bcba transparent;
  }
  .deco-\{:after {
    left: 2px; top: 0.6em;
    margin-left: -0.6em;
    border-width: 0 0 0.54em 0.58em;
    border-color: #ffffff transparent;
  }
  
  .deco-\}:before {
    right: 0; top: 0.6em;
    margin-right: -0.6em;
    border-width: 0 0.6em 0.6em 0;
    border-color: #b2bcba transparent;
  }
  .deco-\}:after {
    right: 2px; top: 0.6em;
    margin-right: -0.6em;
    border-width: 0 0.58em 0.54em 0;
    border-color: #ffffff transparent;
  }