/suto3/UserCSS:開発モード

generated at 2/10/2025, 10:31:12 PM
UserCSS:開発モード 
このプロジェクトの標準的なUI（開発用）
開発用なのでたまに変なことになる
箇条書きの書式を変更
吹き出し記法
レインボー記法

style.css /*@import "/api/code/suto3/UserCSS:バックグラウンド/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:背景色のグラデーション/style.css"; /* */
/* @import "/api/code/suto3/UserCSS:ナビゲーションバー/style.css"; /* */
/* @import "/api/code/suto3/UserCSS:プロジェクトホーム/style.css"; /* */
/* @import "/api/code/suto3/UserCSS:プロジェクト名をnavbarに入れる/style.css"; /* */
@import "/api/code/suto3/UserCSS:プロジェクトホーム/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:リンク/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:リンクを地味にする/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:リンクを派手にする/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:ページ/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:ページタイトル/style.css"; /* */
@import "/api/code/suto3/UserCSS:エディタ/style.css"; /* */
@import "/api/code/suto3/UserCSS:テロメア/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:テロメア非表示/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:テロメアグラデーション/style.css"; /* */
@import "/api/code/suto3/UserCSS:ハッシュタグ/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:ハッシュタグ不可視/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:ハッシュタググラデーション/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:箇条書き/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:文字装飾記法/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:強調記法/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:マーカー記法/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:レインボー記法/style.css"; /* */
@import "/api/code/suto3/UserCSS:はんこ記法/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:朱書き記法/style.css"; /* */
@import "/api/code/suto3/UserCSS:吹き出し記法/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:赤くなる記法/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:アイコン/style.css"; /* */
/* @import "/api/code/suto3/UserCSS:画像/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:画像配置/style.css"; /* */
/* @import "/api/code/suto3/UserCSS:テーブル/style.css"; /* */
/* @import "/api/code/suto3/UserCSS:引用/style.css"; /* */
/* @import "/api/code/suto3/UserCSS:関連ページリスト/style.css"; /* */
@import "/api/code/suto3/UserCSS:ページリスト/style.css"; /* */
/* @import "/api/code/suto3/UserCSS:ステータスバー/style.css"; /* */
@import "/api/code/suto3/UserCSS:選択範囲の色の変更/style.css"; /* */
@import "/api/code/suto3/UserCSS:カーソル/style.css"; /* */
/* @import "/api/code/suto3/UserCSS:キーワード応じてページリストの背景色を変更する/style.css"; /* */
/* @import "/api/code/suto3/UserCSS:雪が降る/style.css"; /* */
/* @import "/api/code/suto3/UserCSS:桜吹雪/style.css"; /* */
/* @import "/api/code/suto3/UserCSS:Unsplash/style.css"; /* */
/* @import "/api/code/suto3/UserCSS:コードブロックを非表示にする/style.css"; /* */
/* @import "/api/code/suto3/UserCSS:コードブロックの行番号/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:曇りガラス記法/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:白黒記法/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:霧/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:アイコンに飾りをつける/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:ページリストの大きさを変える/style.css"; /* */
@import "/api/code/suto3/UserCSS:補助画像/style.css"; /* */
@import "/api/code/suto3/UserCSS:プレゼンテーションモード/style.css"; /* */

UserCSS:バックグラウンド
UserCSS:ナビゲーションバー
UserCSS:プロジェクト名をnavbarに入れる
UserCSS:プロジェクトホーム
UserCSS:リンク
UserCSS:リンクを地味にする
UserCSS:リンクを派手にする
UserCSS:ページ
UserCSS:ページタイトル
UserCSS:エディタ
UserCSS:テロメア
UserCSS:テロメアグラデーション
UserCSS:テロメア非表示
UserCSS:ハッシュタグ
UserCSS:ハッシュタグ不可視
UserCSS:ハッシュタググラデーション
UserCSS:箇条書き
UserCSS:文字装飾記法
UserCSS:強調記法
UserCSS:マーカー記法
UserCSS:レインボー記法
UserCSS:はんこ記法
UserCSS:朱書き記法
UserCSS:吹き出し記法
UserCSS:アイコン
UserCSS:画像
UserCSS:画像配置
UserCSS:テーブル
UserCSS:引用
UserCSS:関連ページリスト
UserCSS:ページリスト
UserCSS:ステータスバー
UserCSS:選択範囲の色の変更
UserCSS:カーソル
UserCSS:キーワード応じてページリストの背景色を変更する
UserCSS:雪が降る
UserCSS:桜吹雪
UserCSS:Unsplash
UserCSS:コードブロックを非表示にする
UserCSS:コードブロックの行番号
UserCSS:曇りガラス記法
UserCSS:白黒記法
UserCSS:霧
UserCSS:アイコンに飾りをつける
UserCSS:ページリストの大きさを変える
UserCSS:補助画像

変数定義
style.css :root {
    --main-color: var(--navbar-bg, DarkGray);       /* 主調色 */
    --assort-color: var(--card-bg, White);          /* 従属色 */
    --base-color: var(--body-bg, WhiteSmoke);       /* 背景色 */
    --accent-color: var(--cursor-color,BlueViolet); /* 強調色 */
    --text-color: var(--page-text-color, #AAA);    /* 文字色 */
    
   /* 1 ナビバーのアイコン（グローバルメニュー） */
   --navi-icon: url("https://daiiz-apps.appspot.com/today/jp.svg");
   /* --navi-icon-B: url('/api/pages/suto3/haku/icon'); /* */
   --navi-icon-B: url('/api/pages/suto3/ビーバー君/icon'); /* */
   --navi-icon-C: url('/api/pages/suto3/clipart/icon'); /* */
   
   /* 2 ブロジェクトホームのアイコン */
   --project-home-icon: url('/api/pages/suto3/suto3/icon'); /* */
   /* --project-home-icon-B: url('/api/pages/suto3/やった/icon');/* */
   /* --project-home-icon-B: url('/api/pages/villagepump/Scrapbox_Beaver/icon'); /* */
   --project-home-icon-B: url('/api/pages/suto3/ビーバー君/icon'); /* */
   /* --project-home-icon-B: url('/api/pages/suto3/suto3-status/icon'); /* */
}
/* @media (prefers-color-scheme: light){ /* */
@media (prefers-color-scheme: dark){ /* */
   body {
     /* --main-color: #333 ; /* 主調色 */
     /* --assort-color: #111;  /* 従属色 */
     /* --base-color: #000;    /* 背景色 */
     /* --accent-color: orange; 　　　　　　　　/* 強調色 */
     /* --text-color: #FFF;  /* 文字色 */
     /* --navbar-bg:var(--main-color); /* */
     /* --card-bg: var(--assort-color); /* */
     /* --body-bg: var(--base-color); /* */
     /* --cursor-color: var(--accent-color); /* */
     /* --page-text-color: var(--text-color);  /* */
     /* filter:invert(100%); /* */
   }
}

カラーセット 1
stylexx.css:root {
  --li-color-0: #EEE;
  --li-color-1: #FE0;
  --li-color-2: #F0F;
  --li-color-3: #0FF;
  --li-color-4: #F00;
  --li-color-5: #0F0;
}

カラーセット 2
stylexx.css:root {
  --li-color-0: #E0E0E0;
  --li-color-1: #EDAD0B;
  --li-color-2: #C7243A;
  --li-color-3: #932674;
  --li-color-4: #3261AB;
  --li-color-5: #009F8C;
}

カラーセット 3
stylexx.css:root {
  --li-color-0: #E0E0E0;
  --li-color-1: hsla(288,100%,40%,0.6);
  --li-color-2: hsla(216,100%,40%,0.6);
  --li-color-3: hsla(144,100%,40%,0.6);
  --li-color-4: hsla(72,100%,40%,0.6);
  --li-color-5: hsla(0,100%,40%,0.6);
}

カラーセット 4
暖色系
stylexx.css:root {
  --li-color-0: #E0E0E0;
  --li-color-1: hsla(0,100%,48%,0.6);
  --li-color-2: hsla(24,100%,48%,0.6);
  --li-color-3: hsla(36,100%,48%,0.6);
  --li-color-4: hsla(48,100%,48%,0.6);
  --li-color-5: hsla(60,100%,48%,0.6);
}

stylexx.css:root {
  --li-color-0: #E0E0E0;
  --li-color-1: hsla(0,100%,48%,0.8);
  --li-color-2: hsla(22,100%,48%,0.8);
  --li-color-3: hsla(45,100%,48%,0.8);
  --li-color-4: hsla(77,100%,48%,0.8);
  --li-color-5: hsla(90,100%,48%,0.8);
}

カラーセット 5
グレースケール
style.css:root {
  --li-color-0: #DDD;
  --li-color-1: #888;
  --li-color-2: #999;
  --li-color-3: #AAA;
  --li-color-4: #BBB;
  --li-color-5: #CCC;
}

カラーセット 6
寒色系
stylexx.css:root {
  --li-color-0: #E0E0E0;
  --li-color-1: hsla(300,100%,48%,0.8);
  --li-color-2: hsla(270,100%,48%,0.8);
  --li-color-3: hsla(240,100%,48%,0.8);
  --li-color-4: hsla(210,100%,48%,0.8);
  --li-color-5: hsla(180,100%,48%,0.8);
}

変数設定
style.css/*:root {*/
body {
   --logo-url: var(--navi-icon);　/* */
   --new-button-bg: var(--base-color, White);
   
   --navbar-link-color: var(--assort-color, White);
   --relation-label-bg: var(--assort-color, White);
   --page-bg: var(--assort-color, White);
   
   --body-headings-color: var(--main-color, DarkGray); /* */
   --card-title-bg: var(--main-color, DarkGray);
   --new-button-horizontal-color: var(--main-color, DarkGray);
   --new-button-vertical-color: var(--main-color, DarkGray);
   --card-title-bg-pinned: var(--main-color, DarkGray);
   /* --card-description-color: var(--main-color, DarkGray); /* */
   /* --card-box-shadow-color: var(--main-color, DarkGray); /* */
   
   --line-title-color: var(--text-color, black); /* */
   --card-title-color: var(--text-color, black); /* */
   --relation-label-text: var(--text-color, black); /* */
   --relation-label-links-text: var(--text-color, black); /* */
   --relation-label-empty-text: var(--text-color, black); /* */
   --tool-text-color: var(--text-color, black); /* */

   /* --card-backside: var(--text-color, black); /* */
   /* */
   /* background-size: contain; /* */
   /* background-size: cover; /* */
   /* background-size: 100% auto; /* 横幅を100%にして算出 */
   /* background: url('https://source.unsplash.com/featured/?christmas-background'); /* */
   /* background: url('https://source.unsplash.com/featured/?christmas'); /* */    
}

背景画像の設定
stylexx.cssbody {
   /* */
   background: url('/api/pages/suto3/background-image/icon');
   background-repeat: repeat-y;
   background-attachment: scroll;
   background-position: center top ;
   background-size: 100% auto; /* 横幅を100%にして算出 */
   
}



全体のフォントの設定
style.css .text {
   font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Arial, "メイリオ", Meiryo, sans-serif;
   /* color: #444444; */
   /* font-size: 16px; */
   /* line-height: 32px; */
   -webkit-font-feature-settings: 'palt' 1;
   font-feature-settings: 'palt' 1;
   word-wrap: break-word;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-kerning: normal;
   font-kerning: normal;
   color: var(--text-color); /* */
   /* color: var(--assort-color); /* */
   /* filter: invert(100%) grayscale(100%) contrast(100); /* */
 }
 
プロジェクトホーム
UserCSS:プロジェクトホーム
style.css .quick-launch .project-home .title {
   /* color: var(--card-title-color); /* */
   /* color: var(--text-color); /* */
   /* font-size: 24px; */
   /* line-height: 1.5; */
   /* letter-spacing: 0.04em; */
   font-weight: bold;
   
   text-shadow: -1px -1px 0px var(--assort-color, #EEE),
                -1px 1px 0px var(--assort-color, #EEE), 
                 1px -1px 0px var(--assort-color, #EEE), 
                 1px 1px 0px var(--assort-color, #EEE), 
                 2px 2px 0px var(--main-color, #333);
   /* padding: 24px 64px; */
 }
 .quick-launch .project-home .icon-home::before {
   color: var(--card-title-color); /* */
   /* color: var(--text-color); /* */
 }

ページの設定
style.css.page {
  background-color: var(--assort-color); /* */
}

style.css  .page:not(:hover)
 {
   opacity: 0.9;
   transition: opacity 2s;
 }
 .page:hover
 {
    opacity: 1;
 }

ページタイトル
UserCSS:ページタイトル
style.css  .editor .line-title .text {
 	/* font-size: 26px; */
 	/* font-size: 1em; /* */
    font-weight: bold;
    /*border-bottom: solid 2px var(--text-color); */
    /* padding-left: 52px; /* */
    /* text-shadow: 1px 1px 0px var(--assort-color), 2px 2px 0px var(--main-color); /* */
    text-shadow: -1px -1px 0px var(--assort-color, #EEE),
                 -1px 1px 0px var(--assort-color, #EEE), 
                  1px -1px 0px var(--assort-color, #EEE), 
                  1px 1px 0px var(--assort-color, #EEE),
                  2px 2px 0px var(--main-color);   
  }

引用
UserCSS:引用
引用を斜体にしない　/foldrr/settings
> そうなんです。もともと漢字の書体に、斜体という概念はないのです。
style.css    .line .quote {
        font-style: normal;
    }

箇条書き
番号なしリストの設定
UserCSS:箇条書き - UserCSS:箇条書きをウザくする
1
2
3
4
5
6
7

style.css.line .indent-mark .dot::before {
  display: block;
  position: absolute;
  right: -5px;
  top: -10px;
  font-family: 'Font Awesome 5 Free';
  /* font-family: FontAwesome; /* old */
  font-weight: 900;
  font-size: 0.8em;
  /* content: '\f00c'; /* チェックマーク */
  /* content: '\f068'; /* マイナス記号 */
  /* content: '\f10c'; /* xまる */
  /* content: '\f111'; /* まる */
  /* content: '\f0c8'; /* 四角 */
  /* content: '\f096'; /*x 四角 */
  /* content: '\f580'; /* */
  /* content: '\f140'; /* 二重丸*/
  /* content: '\f005'; /* スター:クリスマス用 */
  /* content: '\f1b2'; /* box */ 
  /* content: '\f599'; /* 顔 */ 
  content: '\f1b0'; /* 肉球:猫の日用 */
  /* content: '\f6be'; /* ネコ */ 
  /* content: '\f6d3'; /* イヌ */ 
  /* content: '\f1dd'; /* パラグラフ記号 */ 
  /* content: '\f683'; /* 祈り */ 
  /* content: '\f5d7'; /* 骨 */ 
  /* content: '\f004'; /* ハートマーク */
  
  color: var(--li-color-0,#EEE);
  
}
.line .indent-mark .dot {
  background-color: transparent;
}

フォントサイズ
stylexx.css.line .indent-mark .c-0 + .dot::before {
  font-size: 12px;
}
.line .indent-mark .c-1 + .dot::before {
  font-size: 11px;
}
.line .indent-mark .c-2 + .dot::before {
  font-size: 10px;
}
.line .indent-mark .c-3 + .dot::before {
  font-size: 9px;
}
.line .indent-mark .c-4 + .dot::before {
  font-size: 8px;
}

色の指定
style.css.line .indent-mark .c-0 + .dot::before {
  color: var(--li-color-1,#fe0);
}
.line .indent-mark .c-1 + .dot::before {
  color: var(--li-color-2,#F0F);
}
.line .indent-mark .c-2 + .dot::before {
  color: var(--li-color-3,#0FF);
}
.line .indent-mark .c-3 + .dot::before {
  color: var(--li-color-4,#F00);
}
.line .indent-mark .c-4 + .dot::before {
  color: var(--li-color-5,#0F0);
}

番号つきリストの設定
1. 層
2. 層
3. 層
4. 層
5. 層
6. 層
7. 層

style.css.line.number-list .dot {
  display: list-item; /* 表示する */
}

アイコン指定
style.css.line.number-list .dot::before {
  /* content: '\f292'; /* # */
  content: '\f2dc'; /* 雪:クリスマス用 */
}

フォントサイズ
stylexx.css.line.number-list .c-0 + .dot::before {
  font-size: 11px;
}
.line.number-list .c-1 + .dot::before {
  font-size: 10px;
}
.line.number-list .c-2 + .dot::before {
  font-size: 9px;
}
.line.number-list .c-3 + .dot::before {
  font-size: 8px;
}
.line.number-list .c-4 + .dot::before {
  font-size: 7px;
}


ふきだし記法
UserCSS:吹き出し記法
なんですかそれは
誰が言ったんだそんなこと
すごーい
Coooooool !!
stylexx.css      .deco-\{, .deco-\} {
        font-size: 1em;
        color: #fff;
        background-color: #b2bcba;
        padding: 0.1em 0.2em 0.1em 0.2em;
        border-radius: 0.4em;
        margin: auto 0.3em;
        display: inline-block;
        max-width: calc(100% - 100px);
        vertical-align: top;
      }
      .deco-\{:before {
        position: absolute;
        margin: 0;
        padding: 0;
        transform: translateX(-100%) translateY(calc(1em - 80%));
        width: 0;
        content: "";
        border-width: 0 0 0.6em 0.6em;
        border-style: solid;
        border-color: #b2bcba transparent;
      }
   .deco-\}:after {
     position: absolute;
     margin: 0;
     padding: 0;
     transform: translateY(calc(1em - 80%));
     width: 0;
     content: "";
     border-width: 0 0.6em 0.6em 0;
     border-style: solid;
     border-color: #b2bcba transparent;
   }
   .deco-\!:before, .deco-\!:after {
     /*border-color: #ee6666 transparent;*/
     border-color: #ff0000 transparent;
   }
   .deco-\{ a,
   .deco-\} a {
     /* color: #66F; /* */
     color: #F66;
   }

リンク
hover時に下線を引く
stylexx.css.line a:hover {
  color: var(--text-color);
  text-decoration: underline;
} 

ナビゲーションバー
style.css .navbar {
   opacity:0.8;
 }  

/customize/左上のScrapboxアイコンを好きな画像に変える
stylexx.css.brand-icon { display: none }
.navbar-brand::before {
	content: '';
	width: 40px;
	height: 40px;
	position: absolute;
	/*ここに画像へのリンクを貼る*/
	/* background-image: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg);*/
	/* background-image: url(https://daiiz-apps.appspot.com/today/jp.svg); /* */
	background-image: var(--navi-icon);
	background-size: cover;
	border-radius: 4px;/*角丸はお好みで*/
} 

stylexx.css.navbar-brand::before {
  content: ''; /* */
  margin: 0px 60px;
  width: 40px;
  height: 40px;
  /*padding: 24px;*/
  position: absolute;
  background-image: var(--navi-icon-B); /* */
  /* background-size: cover;*/
  background-size: 40px 40px;
  border-radius: 3px; /*角丸*/
}  

stylexx.css.navbar-brand::before {
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
}
.navbar-brand:hover::before {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}

stylexx.css.navbar-brand::after {
	  content: ''; /* */
 	  margin: 0px 120px;
	  width: 40px;
	  height: 40px;
	  /*padding: 24px;*/
	  position: absolute;
	  background-image: var(--navi-icon-C); /* */
   
	  background-size: cover;
	  border-radius: 3px; /*角丸*/
}  

stylexx.css.navbar-brand::after {
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
}
.navbar-brand:hover::after {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}

stylexx.css.brand-icon {
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
}
.brand-icon:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}

新規作成ボタン
stylexx.css.new-button {
   --new-icon: url('/api/pages/suto3/クリスマス/icon'); /* */
   --new-button-bg:transparent;
   --new-button-horizontal-color:transparent;
   --new-button-vertical-color:transparent;
}
.new-button::after {
	  content: ''; /* */
 	  margin: -3px -20px; /* */
 	  width: 40px;
	  height: 40px;
	  position: absolute;
	  background-image: var(--new-icon); /* */
      background-size: 40px 40px;
}

style.css .new-button:hover {
   animation: spin 2s linear infinite;
 }
 
 @keyframes spin {
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
 }

外部リンクをわかりやすくする → scrasobox /scrasobox/settings#59c9c7c996b9040000063c35
https://www.google.com
style.css .line a.link:not(.icon)::after {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  /* content: ' \f35d'; /* */
  content: ' \f360';
  display: inline-block;
}

レインボー記法
レインボー記法 → UserCSS:レインボー記法
style.css /*.deco-\! {*/
 .deco-\" {
   color: #fff; /* 白文字 */
   /*background: linear-gradient( to right,*/
   background: linear-gradient( to left,
                              red,
                              orange,
                              yellow,
                              green,
                              lime,
                              aqua,
                              blue,
                              /* violet,*/
                              purple,
                              magenta,
                              red                                      
                              ) 0% center / 500% auto ; /* グラデーション */
   padding: 0.1em 0.2em 0.1em 0.2em;
   animation: rainbow 10s linear infinite;
   animation-direction: reverse;
   /*animation-direction: alternate;*/
}

@keyframes rainbow {
  to { background-position-x: 500%; }
} 

Streamボタン
style.css.navbar .navbar-menu>li.stream-btn { display: block; }

/villagepump/Streamボタンを角ばらせるUserCSS
stylexx.css.app .navbar .navbar-menu>li.stream-btn .kamon {
	box-sizing: content-box;
	border-radius: 1px;
	background-color: white;
}

.app .navbar .navbar-menu li.stream-btn a:hover:not(:is(:active,:focus)) .kamon {
	background-color: #e6e6e6;
}

.app .navbar .navbar-menu>li.stream-btn .kamon:before {
	position: relative;
	z-index: 1;
	border-radius: 50%;
}

.app .navbar .navbar-menu>li.stream-btn .kamon:after {
	position: absolute;
	top: 7px;
	left: 4px;
	display: block;
	width: 23px;
	height: 23px;
	border-radius: 50%;
	content: "";
  	background-color: var(--navbar-bg, rgba(53, 59, 72, 0.6));
}


sectionを水平線で区切る
stylexx.css.app:not(.presentation) .line.section-title:not(.line-title) {
	position: relative;
}
.app:not(.presentation) .line.section-title:not(.line-title) .text {
	padding-top: 1em;
}
.app:not(.presentation) .line.section-title:not(.line-title):before {
	content: "";
	display: block;
	width: 111%;
	position: absolute;
	left: -49px;
	border: 1px var(--accent-color) solid; /* */
}

sectionに番号を表示する
stylexx.css.app {
	counter-reset: section;
}
.app:not(.presentation) .line.section-title:not(.line-title) {
	position: relative;
}
.app:not(.presentation) .line.section-title:not(.line-title):after {
	z-index: 1000;
	counter-increment: section;
	content: counter(section);
	display: inline-block;
	width: 1.6em;
	height: 1.6em;
	position: absolute;
	top: -10px;
	left: -55px;
	background-color: var(--accent-color);
	border-radius: 50%;
	color: var(--base-color);
	font: 600 normal 90%/1.6 'Century Gothic', Arial, sans-serif;
	text-align: center;
	white-space: nowrap
}

関連ページリスト
UserCSS:関連ページリスト
style.css  .related-page-list {
    opacity:0.8;
    filter: grayscale(50%); /* */
　 }
  .related-page-list:hover {
    opacity:1;
    filter: none;
  }
  

ページリスト
UserCSS:関連ページリスト
style.css .page-list {
  opacity:0.8; /* */
  filter: grayscale(50%); /* */
 }
 .page-list:hover {
  opacity:1;
  filter: none;
 }

xxx
stylexx.css.page-list-item.grid-style-item a:visited .title {
  color: var(--card-bg,#fff);
}

stylexx.css.page-list-item.grid-style-item a:visited .title::before {
/* .grid li.page-list-item > a[href^="/suto3/"] > .content > .header > .title::before { */
/*.grid li.page-list-item  > a[href^="/suto3/"]:visited > .content > .header > .title::before { */
  content: ''; /* */
  width: 1em;
  height: 1em;
  padding: 3px 12px; /* xxx*/
  position: right center; /* */
  background-image: url('/api/pages/suto3/haku/icon'); /* */
  background-size: contain; /* */
  background-repeat: no-repeat; /* */   
  /* border-radius: 4px; /* */
}

/villagepump/mermaid.jsの円グラフが表示されない
stylexx.css  div[id^=dmermaid-preview] {
     visibility: inherit; 
     width: auto;
     height: auto;
  }