UserCSS:無モード
code:css
@import "/api/code/suto3/UserCSS:禅モード/style.css";
と書いて、リロードする。
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"; /* */
変数定義
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, gray); /* 強調色 */
--text-color: var(--page-text-color, black); /* 文字色 */
/* 1 ナビバーのアイコン（グローバルメニュー） */
code: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);
code:stylexxx.css
code:style.css
code:stylexx.css
code:style.css
}
code: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
code: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
バックグラウンド
なにもしない
code:stylexx.css
body {
/* filter: grayscale(100%); /* */
/* filter: invert(100%); /* */
/* filter: invert(100%) grayscale(100%); /* */
}
Navbar
code:style.css
.navbar:not(:hover)
{
opacity: 0;
transition: opacity 1s;
}
.navbar:hover
{
opacity: 1;
}
プロジェクトホーム
code:style.css
.flex-box:not(:hover)
{
opacity: 0;
transition: opacity 10s;
}
.flex-box:hover
{
opacity: 1;
}
ページメニュー
code:style.css
.page-menu:not(:hover)
{
opacity: 0;
transition: opacity 10s;
}
.page-menu:hover
{
/* opacity: 0.4; /* */
opacity: 1; /* */
transition: opacity 1s;
}
ページ
hoverが外れているときは、透明になるが、遷移には時間がかかる code:style.css
.page:not(:hover)
{
opacity: 0;
transition: opacity 30s;
}
.page:hover
{
opacity: 1;
}
テロメア
code:style.css
.line .telomere:not(:hover)
{
opacity: 0;
transition: opacity 1s;
}
.line .telomere:hover
{
/*opacity: 0.4;*/
opacity: 1;
transition: opacity 1s;
}
ハッシュタグ
code:style.css
{
opacity: 0;
transition: opacity 10s;
/* background-color: var(--body-bg); /* */
/* background-color: var(--assort-color); /* */
}
{
opacity: 1;
transition: opacity 1s;
/* background-color: var(--accent-color); /* */
background-color: var(--assort-color); /* */
}
関連ページリスト
code:style.css
.related-page-list:not(:hover)
{
opacity: 0;
transition: opacity 1s;
}
.related-page-list:hover
{
/* opacity: 0.4; /* */
opacity: 1; /* */
/*transition: opacity 1s; /* */
}
ページリスト
code:style.css
.page-list:not(:hover)
{
opacity: 0;
transition: opacity 10s;
/* transition: opacity 1s; */
}
.page-list:hover
{
opacity: 1;
/* opacity: 0.4; */
}
ステータスバー
code:style.css
.status-bar:not(:hover)
{
opacity: 0;
transition: opacity 10s;
}
.status-bar:hover
{
opacity: 1;
}
コードブロック
code:style.css
.line span.code-block {
line-height: 1.2em;
font-size: 88%;
}
頭を静かな色にする
code:style.css
.line span.code-block .code-block-start {
}
.line span.code-block .code-block-start a {
}
テーブル
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-weight: 900;
font-size: 6px;
/* content: '\f00c'; /* チェックマーク */
/* content: '\f068'; /* マイナス記号 */
content: '\f111'; /* まる */
color: var(--li-color-0,#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: 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
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)
{
opacity: 0;
transition: opacity 15s;
}
img.image:hover
{
opacity: 1;
transition: opacity 1s;
}
その他
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);
}
https://img.shields.io/badge/UserCSS-無モード-1572B6.svg?logo=css3&style=for-the-badge
UserCSS.icon
settings.icon
![https://daiiz-apps.appspot.com/today/jp.svg");](https://daiiz-apps.appspot.com/today/jp.svg");){kind=link}