UserCSS:禅モード
禅モードの UserCSS版。
/customize/新書用UserCSS
やっぱり、先駆者がいたもよう。
UserScript:禅モード を作っているときに、「CSSだけ切り出して、@import で読んだほうが簡単じゃね？」と思いついて作ったやつ。
使い方は、自分のページ のstyle.cssに
code:css
@import "/api/code/suto3/UserCSS:禅モード/style.css";
と書いて、リロードする。
UserCSS:無モード
追加
code: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:ページリストの大きさを変える
変数定義
code: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");
code: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); /* */
code:style.css
--li-color-0: #777;
--li-color-1: #EEF;
--li-color-2: #EEE;
--li-color-3: #EED;
code: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);
code:style.css
}
ダークモード
code: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);
}
}
code: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);
}
全体のフォントの設定
code: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;
}
code: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);
}
code: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);
}
code: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:バックグラウンド
なにもしない
code:stylexx.css
body {
/* filter: grayscale(100%); /* */
/* filter: invert(100%); /* */
/* filter: invert(100%) grayscale(100%); /* */
}
Navbar
UserCSS:ナビゲーションバー
ナビゲーションバーを消す設定
code:style.css
.navbar:not(:hover)
{
opacity: 0;
transition: opacity 10s;
}
.navbar:hover
{
opacity: 1;
}
プロジェクトホーム
UserCSS:プロジェクトホーム
プロジェクトホームを消す設定（未使用）
code:stylexx.css
.flex-box:not(:hover)
{
opacity: 0;
transition: opacity 1s;
}
.flex-box:hover
{
opacity: 1;
}
code: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
ページメニューを消す設定（未使用）
code:style.css
.page-menu:not(:hover)
{
opacity: 0;
transition: opacity 1s;
}
.page-menu:hover
{
/* opacity: 0.4; /* */
opacity: 1; /* */
transition: opacity 1s;
}
ページ
UserCSS:ページ
ページを消す設定（未使用）
code:stylexx.css
.page:not(:hover)
{
opacity: 0;
transition: opacity 5s;
}
.page:hover
{
opacity: 1;
}
code:stylexx.css
.page
{
background-color: var(--assort-color); /* */
}
.page:hover
{
background-image: none;
}
テロメア
UserCSS:テロメア
テロメアを消す設定
code:style.css
.line .telomere:not(:hover)
{
opacity: 0;
transition: opacity 1s;
}
.line .telomere:hover
{
/*opacity: 0.4;*/
opacity: 1;
transition: opacity 1s;
}
ハッシュタグ
UserCSS:ハッシュタグ
#hashtag
ハッシュタグを目立たなくする設定
code:style.css
atype="hashTag":not(:hover)
{
/* color: var(--base-color); /* */
color: var(--li-color-0); /* */
background-color: var(--base-color); /* */
}
atype="hashTag":hover
{
color: var(--accent-color); /* */
background-color: var(--main-color); /* */
}
ハッシュタグを消す設定（未使用）
code:stylexx.css
atype="hashTag":not(:hover)
{
opacity: 0;
transition: opacity 1s;
background-color: var(--body-bg); /* */
}
atype="hashTag":hover
{
opacity: 1;
transition: opacity 1s;
color: var(--body-bg); /* */
background-color: var(--accent-color);
}
関連ページリスト
UserCSS:関連ページリスト
関連ページリストを消す設定
code: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:関連ページリスト
code: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:ステータスバー
ステータスバーを消す設定
code:style.css
.status-bar:not(:hover)
{
opacity: 0;
transition: opacity 1s;
}
.status-bar:hover
{
opacity: 1;
}
コードブロック
UserCSS:コードブロック
code:style.css
.line span.code-block {
line-height: 1.2em;
font-size: 88%;
}
コードブロックの頭を静かな色にする
code:style.css
.line span.code-block .code-block-start {
background-color: #eee;
}
.line span.code-block .code-block-start a {
color: #555;
}
テーブル
UserCSS:テーブル
code: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
code: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;
}
フォントサイズ
code: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;
}
色の指定
色の指定
code: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
code:style.css
.line.number-list .dot {
display: list-item; /* 表示する */
}
アイコン指定
code:style.css
.line.number-list .dot::before {
/* content: '\f292'; /* # */
content: '\f0c8'; /* 四角 */
}
フォントサイズ
code: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;
}
画像
画像をグレースケールにする設定
code:style.css
img.image:not(:hover)
{
filter: grayscale(100%);
}
img.image:hover
{
filter: none;
}
画像を消す設定
code:stylexx.css
img.image:not(:hover)
{
opacity: 0;　/* */
transition: opacity 5s;　/* */
}
img.image:hover
{
opacity: 1;　/* */
transition: opacity 1s;　/* */
}
リンク
code:stylexx.css
.line a {
/* color: var(--text-color) ; /* */
text-decoration: none;
}
code: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;
}
code:style.css
.line a:visited {
/* color: var(--text-color) ; /* */
/* color: var(--base--color) ; /* */
color: var(--li-color-0) ;
}
hover時に背景色を変える
code:style.css
.line a:hover {
/* color: var(--text-color) ; /* */
background-color: var(--main-color) ; /* */
/* text-decoration: underline; /* */
}
hover時に下線を引く
code:stylexx.css
.line a:hover {
/* color: var(--text-color) ; /* */
/* background-color: var(--main-color) ; /* */
text-decoration: underline; /* */
}
code:stylexx.css
.line a:active {
color: var(--text-color) ;
text-decoration: none;
}
その他
code:style.css
@keyframes blink {
0% { opacity: 0; }
9% { opacity: 0; }
10% { opacity: 1; }
}
/*.cursor {
animation: blink .5s infinite
}*/
code:style.css
.cursor svg rect {
fill: var(--accent-color, red);
width: 0.2em;/* */
animation: blink .5s infinite;
}
code:style.css
.cursor-line {
box-shadow: inset 0 -1px var(--accent-color);
}
UserCSS:痛モード
UserCSS.icon
https://img.shields.io/badge/UserCSS-禅モード-1572B6.svg?logo=css3&style=for-the-badge
settings.icon
↓透明正方形の画像
https://gyazo.com/357c3a441acc230a4e9f963af8ad517a