/suto3/UserCSS:禅モード

generated at 2/17/2025, 1:02:14 PM
UserCSS:禅モード
禅モードの UserCSS版。
/customize/新書用UserCSS
やっぱり、先駆者がいたもよう。
UserScript:禅モード を作っているときに、「CSSだけ切り出して、@import で読んだほうが簡単じゃね？」と思いついて作ったやつ。
使い方は、自分のページ のstyle.cssに
css@import "/api/code/suto3/UserCSS:禅モード/style.css";
と書いて、リロードする。

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"; /* */
 

settings
UserCSS:バックグラウンド
UserCSS:ナビゲーションバー
UserCSS:プロジェクトホーム
UserCSS:ページ
UserCSS:ページタイトル
UserCSS:エディタ
UserCSS:テロメア
UserCSS:ハッシュタグ
UserCSS:ハッシュタグ不可視
UserCSS:ハッシュタググラデーション
UserCSS:箇条書き
UserCSS:文字装飾記法
UserCSS:強調記法
UserCSS:はんこ記法
UserCSS:関連ページリスト
UserCSS:ページリスト
UserCSS:ステータスバー
UserCSS:選択範囲の色の変更
UserCSS:カーソル
UserCSS:PageMenu
UserCSS:Unsplash
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, deepskyblue); /* 強調色 */
   --text-color: var(--page-text-color, black);      /* 文字色 */
   /* 1 ナビバーのアイコン（グローバルメニュー） */
   --navi-icon: url("https://daiiz-apps.appspot.com/today/jp.svg");

stylexx.css       /* --li-color-1: hsla(150,100%,40%,0.8); /* */
   /* --li-color-2: hsla(180,100%,40%,0.8); /* */
   /* --li-color-3: hsla(210,100%,40%,0.8); /* */
   --li-color-1: hsla(330,100%,40%,0.8); /* */
   --li-color-2: hsla(30,100%,40%,0.8); /* */
   --li-color-3: hsla(270,100%,40%,0.8); /* */

style.css   --li-color-0: #777;
   --li-color-1: #EEF;
   --li-color-2: #EEE;
   --li-color-3: #EED;
   

style.css   --page-link-color: rgba(95, 95, 169, 0.9);
   --page-link-hover-color: rgba(0, 0, 224, 0.9);
   --page-link-color-cursor-line: rgba(0, 0, 255, 0.9);
   --empty-page-link-color: rgba(169, 95, 95, 0.9);
   --empty-page-link-hover-color: rgba(224, 0, 0, 0.9);

style.css    
 }

ダークモード
style.css@media (prefers-color-scheme: dark){ /* */
/* @media (prefers-color-scheme: light){ /* */
   :root {
     --base-color: #080808;    /* 背景色 */
     --text-color: #CCC;    /* 文字色 */
     --main-color: #000000; /* 主調色 */
     --accent-color: orange; /* 強調色 */
     --assort-color: #0C0C0C;  /* 従属色 */
     --li-color-0: #D4D4D4;
     --li-color-1: hsla(45,100%,60%,0.9);
     --li-color-2: hsla(30,100%,60%,0.9);
     --li-color-3: hsla(15,100%,60%,0.9);
     
     --page-link-color: rgba(95, 95, 207, 0.9);
     --page-link-hover-color: rgba(95, 95, 255, 0.9);
     --page-link-color-cursor-line: rgba(63, 63, 255, 0.9);
     --empty-page-link-color: rgba(191, 0, 0, 0.9);
     --empty-page-link-hover-color: rgba(255, 0, 0, 0.9);
     
   }
}

style.css body{      
   --logo-url: var(--navi-icon);　/* */
   --new-button-bg: var(--base-color, White);
   /* --body-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);
   --code-bg: var(--assort-color, White); /* */
   --card-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-box-shadow-color: var(--main-color, DarkGray); /* */
   --body-bg: var(--main-color, DarkGray); /* */
   
   --line-title-color: var(--text-color, gray); /* */
   --card-title-color: var(--text-color, gray); /* */
   --relation-label-text: var(--text-color, gray); /* */
   --relation-label-links-text: var(--text-color, gray); /* */
   --relation-label-empty-text: var(--text-color, gray); /* */
   --tool-text-color: var(--text-color, gray); /* */
   --card-backside: var(--text-color, gray); /* */
   --card-description-color: var(--text-color, gray); /* */
   --page-text-color: var(--text-color, gray); /* */
 
   --page-link-color: rgba(95, 95, 207, 0.9);
   --page-link-hover-color: rgba(95, 95, 255, 0.9);
   --page-link-color-cursor-line: rgba(63, 63, 255, 0.9);
   --empty-page-link-color: rgba(191, 0, 0, 0.9);
   --empty-page-link-hover-color: rgba(255, 0, 0, 0.9);
 
 }

全体のフォントの設定
style.css .text {
   font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Arial, "メイリオ", Meiryo, sans-serif;
   font-size: 12px;
   line-height: 24px;
   font-feature-settings: "palt";
   letter-spacing: 1px; /* */
   -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;
 }  

stylexx.css body{        
     --page-link-color: rgba(95, 95, 169, 0.9);
     --page-link-hover-color: rgba(0, 0, 224, 0.9);
     --page-link-color-cursor-line: rgba(0, 0, 255, 0.9);
     --empty-page-link-color: rgba(169, 95, 95, 0.9);
     --empty-page-link-hover-color: rgba(224, 0, 0, 0.9);
   
 }

stylexx.css body{
     --page-link-color: rgba(95, 95, 207, 0.9);
     --page-link-hover-color: rgba(95, 95, 255, 0.9);
     --page-link-color-cursor-line: rgba(63, 63, 255, 0.9);
     --empty-page-link-color: rgba(191, 0, 0, 0.9);
     --empty-page-link-hover-color: rgba(255, 0, 0, 0.9);
   
 }

stylexx.css body{        
     --page-link-color: var(--text-color, gray); /* */
     --page-link-hover-color: var(--text-color, gray);
     --page-link-color-cursor-line: var(--text-color, gray);
     --empty-page-link-color: var(--text-color, gray);
     --empty-page-link-hover-color: var(--text-color, gray);
   
 }

バックグラウンド
UserCSS:バックグラウンド
なにもしない
stylexx.css body {
  /* filter: grayscale(100%); /* */
  /* filter: invert(100%); /* */
  /* filter: invert(100%)  grayscale(100%); /* */
}

Navbar
UserCSS:ナビゲーションバー

ナビゲーションバーを消す設定
style.css .navbar:not(:hover)
{
  opacity: 0;
  transition: opacity 10s;
}
.navbar:hover
{
   opacity: 1;
 }
 

プロジェクトホーム
UserCSS:プロジェクトホーム

プロジェクトホームを消す設定（未使用）
stylexx.css .flex-box:not(:hover)
{
  opacity: 0;
  transition: opacity 1s;
}
.flex-box:hover
{
   opacity: 1;
 } 

style.css.quick-launch .project-home .title {
  /*　color: var(--main-color); /* */
  color: var(--text-color); /**/
  /* background-color: var(--assort-color); /**/
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: none; /* */
  
  /*margin: 2px;*/

  /* padding: 24px 24px; /* */
}

.flex-box:hover
 {
   background-color: var(--assort-color); /**/
 } 

ページメニュー
UserCSS:PageMenu
ページメニューを消す設定（未使用）
style.css .page-menu:not(:hover)
{
  opacity: 0;
  transition: opacity 1s;
}
.page-menu:hover
{
  /* opacity: 0.4; /* */
  opacity: 1; /* */
  transition: opacity 1s;
}

ページ
UserCSS:ページ
ページを消す設定（未使用）
stylexx.css  .page:not(:hover)
 {
   opacity: 0;
   transition: opacity 5s;
 }
 .page:hover
 {
   opacity: 1;
 }

stylexx.css .page
 {
   background-color: var(--assort-color); /* */ 
 }
 .page:hover
 {
   background-image: none;
 }

テロメア
UserCSS:テロメア
テロメアを消す設定
style.css .line .telomere:not(:hover)
{
  opacity: 0;
  transition: opacity 1s;
}
.line .telomere:hover
 {
  /*opacity: 0.4;*/
  opacity: 1;
  transition: opacity 1s;
}

ハッシュタグ
UserCSS:ハッシュタグ
#hashtag
ハッシュタグを目立たなくする設定
style.css a[type="hashTag"]:not(:hover)
{   
  /* color: var(--base-color); /* */
  color: var(--li-color-0); /* */
  background-color: var(--base-color); /* */
}
a[type="hashTag"]:hover 
{
  color: var(--accent-color); /* */
  background-color: var(--main-color); /* */
}

ハッシュタグを消す設定（未使用）
stylexx.css a[type="hashTag"]:not(:hover)
{   
  opacity: 0;
  transition: opacity 1s;
  background-color: var(--body-bg); /* */
}
a[type="hashTag"]:hover 
{
  opacity: 1;
  transition: opacity 1s;
  color: var(--body-bg); /* */
  background-color: var(--accent-color);
}

関連ページリスト
UserCSS:関連ページリスト
関連ページリストを消す設定
style.css .related-page-list:not(:hover)
{
  opacity: 0;
  transition: opacity 6s;
}
.related-page-list:hover
 {
  /* opacity: 0.4; /* */
  opacity: 1; /* */
  transition: opacity 1s; /* */
}
ページリスト
UserCSS:関連ページリスト
style.css .page-list:not(:hover)
{
  opacity: 0; /* */
  /*opacity: 1; /* */
  transition: opacity 5s;
}
.page-list:hover
{
  opacity: 1; /* */
  /* opacity: 0; /* */
  /* opacity: 0.4; /* */
 transition: opacity 1s; /* */
}
ステータスバー
UserCSS:ステータスバー
ステータスバーを消す設定
style.css .status-bar:not(:hover)
{
  opacity: 0;
  transition: opacity 1s;
}
.status-bar:hover
{
  opacity: 1;
}

コードブロック
UserCSS:コードブロック
style.css.line span.code-block {
  line-height: 1.2em;
  font-size: 88%;
}
コードブロックの頭を静かな色にする
style.css.line span.code-block .code-block-start {
	background-color: #eee;
}
.line span.code-block .code-block-start a {
	color: #555;
}

テーブル
UserCSS:テーブル
style.css.table-block .cell:nth-child(odd),
.table-block .cell:nth-child(even) {
    background: unset;
}

.table-block .table-block-start {
    padding: unset;
    font-size: unset;
    background-color: unset;
}

.table-block .table-block-start a {
    color: unset;
}

箇条書き
番号なしリスト
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: 6px;
  /* content: '?'; /* ? */
  /* content: '\f00c'; /* チェックマーク */
  /* content: '\f068'; /* マイナス記号 */
  /* content: '\f10c'; /* まる */
  content: '\f111'; /* まる */
  /*　content: '\f0c8'; /* 四角 */
  /* content: '\f096'; /* 四角 */
  
  color: var(--li-color-0,#EEE);
  /* color: #EEE; */
  
}
.line .indent-mark .dot {
  background-color: transparent;
}

フォントサイズ
style.css.line .indent-mark .c-0 + .dot::before {
  font-size: 8px;
}
.line .indent-mark .c-1 + .dot::before {
  font-size: 8px;
}
.line .indent-mark .c-2 + .dot::before {
  font-size: 7px;
}
.line .indent-mark .c-3 + .dot::before {
  font-size: 7px;
}
.line .indent-mark .c-4 + .dot::before {
  font-size: 6px;
}

色の指定
色の指定
style.css.indent-mark .dot:nth-child(3n+2)::before {
  color: var(--li-color-1); /* */
}
.indent-mark .dot:nth-child(3n+3)::before {
  color: var(--li-color-2); /* */
}
.indent-mark .dot:nth-child(3n+4)::before {
  color: var(--li-color-3); /* */
}

番号つきリスト
1. A
2. B
3. C
4. D
5. E
6. F
7. G
style.css.line.number-list .dot {
  display: list-item; /* 表示する */
}

アイコン指定
style.css.line.number-list .dot::before {
  /* content: '\f292'; /* # */
  content: '\f0c8'; /* 四角 */
}

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

画像
画像をグレースケールにする設定
style.cssimg.image:not(:hover)
{
  filter: grayscale(100%);
}
img.image:hover
{
 　filter: none;
}

画像を消す設定
stylexx.cssimg.image:not(:hover)
{
  opacity: 0;　/* */
  transition: opacity 5s;　/* */
}
img.image:hover
{
  opacity: 1;　/* */
  transition: opacity 1s;　/* */
}

リンク

stylexx.css.line a { 
  /* color: var(--text-color) ; /* */
	 text-decoration: none;
}

style.css.line a:link {
  /* color: var(--accent-color) ; /* */
  color: var(--li-color-0) ;/* */
  /* color: rgba(0,0,63,0.5); /* */
  /* color: rgba(191,191,255,0.5); /* */
  /* color: var(--page-link-color-cursor-line) ;/
  text-decoration: none; 
}

style.css.line a:visited {
  /* color: var(--text-color) ; /* */
  /* color: var(--base--color) ; /* */
  color: var(--li-color-0) ;
  
}

hover時に背景色を変える
style.css.line a:hover {
  /* color: var(--text-color) ; /* */
  background-color: var(--main-color) ; /* */  
	 /* text-decoration: underline; /* */
} 

hover時に下線を引く
stylexx.css.line a:hover {
  /* color: var(--text-color) ; /* */
  /* background-color: var(--main-color) ; /* */  
	 text-decoration: underline; /* */
} 

stylexx.css.line a:active {
  color: var(--text-color) ;
	 text-decoration: none;
}


その他
style.css @keyframes blink {
    0% { opacity: 0; }
    9% { opacity: 0; }
   10% { opacity: 1; }
 }
 /*.cursor {
   animation: blink .5s infinite
 }*/

style.css .cursor svg rect {
   fill: var(--accent-color, red);
   width: 0.2em;/* */
   animation: blink .5s infinite;
 }

style.css .cursor-line {
   box-shadow: inset 0 -1px var(--accent-color); 
 }

UserCSS:痛モード



↓透明正方形の画像