UserCSS:開発モード
このプロジェクトの標準的なUI（開発用）
開発用なのでたまに変なことになる
箇条書きの書式を変更
吹き出し記法
レインボー記法
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:プロジェクト名を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:補助画像
変数定義
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,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
code: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
code: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
code: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
暖色系
code: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);
}
code: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
グレースケール
code: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
寒色系
code: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);
}
変数設定
code: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'); /* */
}
背景画像の設定
code:stylexx.css
body {
/* */
background: url('/api/pages/suto3/background-image/icon');
background-repeat: repeat-y;
background-attachment: scroll;
background-position: center top ;
background-size: 100% auto; /* 横幅を100%にして算出 */
}
全体のフォントの設定
code: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:プロジェクトホーム
code: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); /* */
}
ページの設定
code:style.css
.page {
background-color: var(--assort-color); /* */
}
code:style.css
.page:not(:hover)
{
opacity: 0.9;
transition: opacity 2s;
}
.page:hover
{
opacity: 1;
}
ページタイトル
UserCSS:ページタイトル
code: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
そうなんです。もともと漢字の書体に、斜体という概念はないのです。
code:style.css
.line .quote {
font-style: normal;
}
箇条書き
番号なしリストの設定
UserCSS:箇条書き - UserCSS:箇条書きをウザくする
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: 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;
}
フォントサイズ
code: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;
}
色の指定
code: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. 層
code:style.css
.line.number-list .dot {
display: list-item; /* 表示する */
}
アイコン指定
code:style.css
.line.number-list .dot::before {
/* content: '\f292'; /* # */
content: '\f2dc'; /* 雪:クリスマス用 */
}
フォントサイズ
code: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 !!
code: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時に下線を引く
code:stylexx.css
.line a:hover {
color: var(--text-color);
text-decoration: underline;
}
ナビゲーションバー
code:style.css
.navbar {
opacity:0.8;
}
/customize/左上のScrapboxアイコンを好きな画像に変える
code: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;/*角丸はお好みで*/
}
code: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; /*角丸*/
}
code: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);
}
code: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; /*角丸*/
}
code: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);
}
code: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);
}
新規作成ボタン
code: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;
}
code: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
code: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:レインボー記法
code: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ボタン
code:style.css
.navbar .navbar-menu>li.stream-btn { display: block; }
/villagepump/Streamボタンを角ばらせるUserCSS
code: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を水平線で区切る
code: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に番号を表示する
code: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:関連ページリスト
code:style.css
.related-page-list {
opacity:0.8;
filter: grayscale(50%); /* */
}
.related-page-list:hover {
opacity:1;
filter: none;
}
ページリスト
UserCSS:関連ページリスト
code:style.css
.page-list {
opacity:0.8; /* */
filter: grayscale(50%); /* */
}
.page-list:hover {
opacity:1;
filter: none;
}
xxx
code:stylexx.css
.page-list-item.grid-style-item a:visited .title {
color: var(--card-bg,#fff);
}
code:stylexx.css
.page-list-item.grid-style-item a:visited .title::before {
/* .grid li.page-list-item > ahref^="/suto3/" > .content > .header > .title::before { */
/*.grid li.page-list-item > ahref^="/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の円グラフが表示されない
code:stylexx.css
divid^=dmermaid-preview {
visibility: inherit;
width: auto;
height: auto;
}
https://img.shields.io/badge/UserCSS-開発モード-1572B6.svg?logo=css3&style=for-the-badge
UserCSS.icon
settings.icon