/suto3/UserCSS:無モード

generated at 2/11/2025, 10:12:35 AM
UserCSS:無モード
禅モードをさらに過激にして、虚無にまで進めたモード。すべてが無になる。
実用性は低い。

使い方は、自分のページ の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"; /* */

変数定義
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, gray);   /* 強調色 */
   --text-color: var(--page-text-color, black); /* 文字色 */
   /* 1 ナビバーのアイコン（グローバルメニュー） */
   --navi-icon: url("https://daiiz-apps.appspot.com/today/jp.svg");

stylexxx.css   --li-color-1: hsla(0,100%,60%,0.4);
   --li-color-2: hsla(180,100%,60%,0.4);
   --li-color-3: hsla(270,100%,60%,0.4);

stylexxx.css   --li-color-0: #BBB;
   --li-color-1: #EFF;
   --li-color-2: #DFF;
   --li-color-3: #CFF;

style.css   --li-color-0: #BBB;
   --li-color-1: #FEC;
   --li-color-2: #FDF;
   --li-color-3: #DFF;

stylexx.css   --li-color-0: #BBB;
   --li-color-1: #FFE;
   --li-color-2: #FFD;
   --li-color-3: #FED;

style.css   
 }


style.css 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); /* */
 }

Version 1
stylexx.css/* 無モード CSS版 */
 .text {
   color: var(--text-color, Black);
 }  
.page {
  background-color: var(--assort-color, Red);
}

.page:not(:hover)
{
  /*opacity: 1;*/
  opacity: 0;
  transition: opacity 5s;
}

.navbar:not(:hover),
.line .telomere:not(:hover),
.page-menu:not(:hover),
.flex-box:not(:hover),
.related-page-list:not(:hover),
.page-list:not(:hover),
.status-bar:not(:hover)
{
  opacity: 0;
  transition: opacity 5s;
}

.navbar:hover,
.page:hover,
.flex-box:hover,
.page-list:hover,
.status-bar:hover
{
  opacity: 1;
}

.line .telomere:hover,
.page-menu:hover,
.related-page-list:hover
 {
  opacity: 0.4;
  /*opacity: 1;*/
  transition: opacity 3s;
}
/* eof */

Version 2
バックグラウンド
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 1s;
}
.navbar:hover
{
   opacity: 1;
 }
 

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

style.css .flex-box:not(:hover)
{
  opacity: 0;
  transition: opacity 10s;
}
.flex-box:hover
{
   opacity: 1;
 } 

ページメニュー
UserCSS:PageMenu
style.css .page-menu:not(:hover)
{
  opacity: 0;
  transition: opacity 10s;
}
.page-menu:hover
{
  /* opacity: 0.4; /* */
  opacity: 1; /* */
  transition: opacity 1s;
}

ページ
UserCSS:ページ
hoverが外れているときは、透明になるが、遷移には時間がかかる
style.css  .page:not(:hover)
 {
   opacity: 0;
   transition: opacity 30s;
 }
 .page:hover
 {
   opacity: 1;
 }

テロメア
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)
{   
  opacity: 0;
  transition: opacity 10s;
  /* background-color: var(--body-bg); /* */
  /* background-color: var(--assort-color); /* */
}
a[type="hashTag"]:hover 
{
  opacity: 1;
  transition: opacity 1s;
  /* background-color: var(--accent-color); /* */
  background-color: var(--assort-color); /* */
}

関連ページリスト
UserCSS:関連ページリスト
style.css .related-page-list:not(:hover)
{
  opacity: 0;
  transition: opacity 1s;
}
.related-page-list:hover
 {
  /* opacity: 0.4; /* */
  opacity: 1; /* */
  /*transition: opacity 1s; /* */
}

ページリスト
UserCSS:関連ページリスト

style.css .page-list:not(:hover)
{
  opacity: 0;
  transition: opacity 10s;
  /* transition: opacity 1s; */
}
.page-list:hover
{
  opacity: 1;
  /* opacity: 0.4; */
}

ステータスバー
UserCSS:ステータスバー
style.css .status-bar:not(:hover)
{
  opacity: 0;
  transition: opacity 10s;
}
.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;
}

箇条書き
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-weight: 900;
  font-size: 6px;
  /* content: '\f00c'; /* チェックマーク */
  /* content: '\f068'; /* マイナス記号 */
  content: '\f111'; /* まる */
  
  
  color: var(--li-color-0,#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: hsla(0,100%,80%,0.4); /* */
  color: var(--li-color-1); /* */
}
.indent-mark .dot:nth-child(3n+3)::before {
  /* color: hsla(120,100%,80%,0.4); */
  color: var(--li-color-2); /* */
}
.indent-mark .dot:nth-child(3n+4)::before {
  /* color: hsla(240,100%,80%,0.4); */
  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)
{
  opacity: 0;
  transition: opacity 15s;
}
img.image:hover
{
  opacity: 1;
  transition: opacity 1s;
}   


その他
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); 
 }

UserScript:無モード