UserCSS:痛モード
UserScript:痛モードの UserCSS版です。
痛Scrapbox
https://gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8
初期設定
追加
code:style.css
/*@import "/api/code/suto3/UserCSS:ダークテーマ"; /* */
/*@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/日章旗/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"; /* */
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:カーソル
変数定義
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, black); /* 文字色 */
/* 1 ナビバーのアイコン（グローバルメニュー） */
--navi-icon: url("https://daiiz-apps.appspot.com/today/jp.svg");
/* --navi-icon-B: url("https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg"); /* */
/* --navi-icon-B: url("https://i.gyazo.com/5a9b6f8b965613bcc39d3b77afa59dc7.png"); /* */
--navi-icon-B: url('/api/pages/suto3/clipart/icon'); /* */
/* --navi-icon-C: url("https://i.gyazo.com/5a9b6f8b965613bcc39d3b77afa59dc7.png"); /* */
/* --navi-icon-C: url("https://i.gyazo.com/949ba4b1d982e7ff0d31dd866c8ac8f4.png"); /* */
--navi-icon-C: url('/api/pages/suto3/clipart/icon'); /* */
/* 2 ブロジェクトホームのアイコン */
/* url('/api/pages/$projectName/$pageTitle/icon') で特定のページのアイコンを呼び出せる */
--project-home-icon: url('/api/pages/suto3/suto3/icon'); /* */
/* --project-home-icon: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg);/* */
/* --project-home-icon: url(https://i.gyazo.com/949ba4b1d982e7ff0d31dd866c8ac8f4.png); /* */
/* --project-home-icon-B: url(https://i.gyazo.com/de07fbaab5c961dc7fd3720ba956bbd3.png);/* */
/*--project-home-icon-B: url('/api/pages/villagepump/Scrapbox_Beaver/icon'); /* */
/* --project-home-icon-B: url('/api/pages/suto3/suto3-status/icon'); /* */
/*--project-home-icon-B: url('/api/pages/suto3/ビーバー君/icon'); /* */
/* --project-home-icon-B: url('https://darui.ninja/mame#.svg'); /* xxx */
--project-home-icon-B: url('https://idy.herokuapp.com/mame#.svg'); /* */
/* 3 背景画像 */
--project-bg-image: url("https://season-freeillust.com/img/spring-haikei/04.jpg");
/* 4 ページの背景画像 */
/* --page-bg-image: url("https://i.gyazo.com/de07fbaab5c961dc7fd3720ba956bbd3.png"); /* haku */
--page-bg-image: url(https://i.gyazo.com/5a9b6f8b965613bcc39d3b77afa59dc7.png); /* */
/* --page-bg-image: url(https://scrapbox.io/files/5f2ccbcc7a2c67001ef77649.svg); /* */
/* 5 ページのヘッダー画像 */
--page-header-image: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg);
/* 6 ページのフッター画像 */
--page-footer-image: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg);
/* 7 ページタイトルのアイキャッチ */
/* --eye-chacher: url("https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg"); /* */
/* --eye-chacher: url(https://scrapbox.io/files/5f2e340a93343a001e5ec068.svg); */
--eye-chacher: url('/api/pages/suto3/haku/icon'); /* */
/*
--li-color-0: var(--text-color, #EEE);
--li-color-1: hsla(60,100%,60%,0.4);
--li-color-2: hsla(180,100%,60%,0.4);
--li-color-3: hsla(300,100%,60%,0.4);
*/
}
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); /* */
}
code:style.css
* {
margin: 0;
padding: 0;
}
全体のフォントの設定
UserCSS:フォント
UserCSS:テキスト
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: 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); /* */
}
リンク
UserCSS:リンク
砂文字
code:style.css
a.link, atype="link" {
color: var(--page-link-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),
0 0 9px var(--main-color); /* */
}
空ページへのリンク
code:stylexx.css
atype="link".empty-page-link {
color: var(--empty-page-link-color) ;
}
バックグラウンド
UserCSS:バックグラウンド
グラデーションモード（画像は表示しない）
code:stylexx.css
body {
background:
linear-gradient(to top,
var(--main-color, blue),
var(--base-color, cyan),
var(--assort-color, white),
var(--base-color, cyan),
var(--main-color, blue)
);
background-repeat: no-repeat; /* */
background-attachment: fixed; /* */
background-position: right bottom ; /* */
background-size: auto 100%, auto,auto;
/* filter: grayscale(100%); /* */
}
シンプル（予備）
code:stylexx.css
body {
/* background-color: var(--body-bg); /* */
/* background-color: var(--body-bg, var(--base-color, red)); /* */
background-color: var(--base-color);
}
code:style.css
body {
background-color: var(--base-color);
background-image: var(--project-bg-image); /* */
background-origin: border-box; /* */
background-repeat: no-repeat; /* */
background-attachment: fixed; /* */
}
Navbar
UserCSS:ナビゲーションバー
グラデーション
code:stylexx.css
.navbar {
background:
linear-gradient(to right,
var(--main-color, #333),
var(--assort-color, #EEE) 10%,
var(--main-color, #333) 30%
);
opacity:0.9;
}
シェパードチェック
code:stylexx.css
.navbar {
--A: var(--main-color, #AAA);
--B: var(--assort-color, #BBB);
background-color: var(--A);
background-image:
linear-gradient(45deg, var(--B) 25%, var(--B) 25%, transparent 25%, transparent 100%),
linear-gradient(-135deg, var(--B) 25%, var(--B) 25%, transparent 25%, transparent 100%),
linear-gradient(-135deg, var(--A) 25%, var(--A) 25%, transparent 25%, transparent 100%),
linear-gradient(45deg, var(--A) 25%, var(--A) 25%, transparent 25%, transparent 100%),
linear-gradient(45deg,
var(--B) 0%, var(--B) 6%, transparent 6%, transparent 11%,
var(--B) 11%, var(--B) 17%, transparent 17%, transparent 22%,
var(--B) 22%, var(--B) 28%, transparent 28%, transparent 33%,
var(--B) 33%, var(--B) 39%, transparent 39%, transparent 44%,
var(--B) 44%, var(--B) 50%, transparent 50%, transparent 55%,
var(--B) 55%, var(--B) 61%, transparent 61%, transparent 66%,
var(--B) 66%, var(--B) 72%, transparent 72%, transparent 77%,
var(--B) 77%, var(--B) 83%, transparent 83%, transparent 88%,
var(--B) 88%, var(--B) 94%, transparent 94%, transparent 100%);
background-size: 24px 24px;
background-position: 0 0, 12px 12px, 0 0, 12px 12px, 0 0;
opacity:0.95;
}
シンプル（予備）
code:style.css
.navbar {
background-color: var(--main-color, DarkGray);
opacity:0.9;
}
code:style.css
.navbar-brand::before {
content: ''; /* */
margin: 0px 60px;
width: 40px;
height: 40px;
/*padding: 24px;*/
position: absolute;
/*　background-image: url('/api/pages/suto3/haku/icon');　/* */
background-image: var(--navi-icon-B); /* */
/* background-size: cover; /* */
background-size: 40px 40px;
border-radius: 3px; /*角丸*/
}
.navbar-brand::after {
content: ''; /* */
margin: 0px 120px;
width: 40px;
height: 40px;
/*padding: 24px;*/
position: absolute;
background-image: var(--navi-icon-C); /* */
/* background-size: cover; /* */
background-size: 40px 40px;
border-radius: 3px; /*角丸*/
}
プロジェクトホーム
UserCSS:プロジェクトホーム
縁取り + 砂文字
code:stylexx.css
.quick-launch .project-home .title {
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),
0px 0px 27px var(--main-color, #333);
padding: 24px 64px;
}
.quick-launch .project-home .icon-home::before {
color: var(--card-title-color); /* */
}
プロジェクトホームに画像（プロジェクトアイコン）を追加
code:stylexx.css
.quick-launch .project-home .title::before {
content: ''; /* */
width: 1em; /* */
height: 1em; /* */
margin: 5px;
padding: 10px 50px 0px 0px; /* */
position: left bottom; /* */
background-image: var(--project-home-icon); /* */
background-size: contain; /* */
background-repeat: no-repeat; /* */
border-radius: 5px; /* */
}
code:stylexx.css
.quick-launch .project-home .title::after {
content: ''; /* */
width: 1em; /* */
height: 1em; /* */
margin: 10px;
padding: 12px 0px 0px 300px; /* */
position: center bottom;
background-image: var(--project-home-icon-B); /* */
background-size: contain; /* */
/*background-size: cover; /* */
background-repeat: no-repeat; /* */
border-radius: 5px; /* */
}
ページ
UserCSS:ページ
固定モード（theme 対応）
code:stylexx.css
.page {
background-image: linear-gradient(to right,var(--main-color,#CCC),var(--assort-color,#EEE), 10%,var(--assort-color,#EEE), 80%,var(--main-color,#CCC) ),var(--page-bg-image);
background-origin: border-box,border-box; /* */
background-repeat: repeat-y,no-repeat; /* */
background-attachment: scroll,fixed; /* */
background-position: 0% 0%, 75% 65% ; /* */
background-size: 100% 100%,30% auto; /* */
/* background-color: var(--assort-color, Red); /* */
}
code:style.css
.page {
background-image:
var(--page-bg-image),
linear-gradient(to right,var(--main-color,#CCC),var(--assort-color,#EEE), 10%,var(--assort-color,#EEE), 80%,var(--main-color,#CCC) );
background-origin: border-box,border-box; /* */
background-repeat: no-repeat,repeat-y; /* */
background-attachment: fixed,scroll; /* */
background-position: 75% 65%, 0% 0%; /* */
background-size: 30% auto, 100% 100%; /* */
/* background-color: var(--assort-color, Red); /* */
}
グラデーションテスト
code:stylexx.css
.page {
background-image:
linear-gradient(to right,
var(--main-color,#CCC),
var(--assort-color,#EEE), 10%,
var(--assort-color,#EEE), 80%,
var(--main-color,#CCC)
)
;
background-origin: border-box; /* */
background-repeat: repeat-y; /* */
background-attachment: scroll; /* */
background-position: 0% 0%; /* */
background-size: 100% 100%; /* */
}
画像表示テスト
code:stylexx.css
.page {
background-image: var(--page-bg-image); /* */
background-origin: border-box; /* */
background-repeat: no-repeat; /* */
background-attachment: fixed; /* */
background-position: 75% 65% ; /* */
background-size: 30% auto; /* */
background-color: var(--assort-color, Red); /* */
}
テスト用
code:stylexx.css
.page {
/* background-color: var(--assort-color, #AAA); /* */
/* background-color: var(--card-bg, #AAA); /* */
/* background-image: var(--page-bg-image); /* */
/* background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5hYm94e2ZpbGw6I2ZmZDNlMDt9IC5hbGluZXtmaWxsOm5vbmU7c3Ryb2tlOiNmZmZmZmY7c3Ryb2tlLXdpZHRoOjI7fTwvc3R5bGU+PHJlY3QgY2xhc3M9ImFib3giIHdpZHRoPSI3MCIgaGVpZ2h0PSI3MCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTApIHJvdGF0ZSg0NSkiLz48cG9seWxpbmUgY2xhc3M9ImFsaW5lIiBwb2ludHM9IjEwMCwxMDAgNTAsNTAgMTAwLDAiLz48cG9seWxpbmUgY2xhc3M9ImFsaW5lIiBwb2ludHM9IjAsMCA1MCw1MCAwLDEwMCIvPjwvc3ZnPg=="); /* base64 でエンコードした SVG */
}
固定モード（theme 対応）
code:stylexx.css
.page {
background-color: var(--assort-color, Red); /* */
}
code:stylexx.css
.page {
background-image: var(--project-bg-image),var(--page-bg-image);
background-origin: border-box,border-box; /* */
background-repeat: no-repeat,no-repeat; /* */
background-attachment: fixed;,fixed; /* */
background-position: 0% 0%, 75% 65% ; /* */
background-size: 100% 100%,30% auto; /* */
/* background-color: var(--assort-color, Red); /* */
}
code:style.css
.page:not(:hover)
{
/*background-color: WhiteSmoke;*/
opacity: 0.9;
transition: opacity 2s;
}
.page:hover
{
opacity: 1;
}
ページタイトル
UserCSS:ページタイトル
code:stylexx.css
.editor .line-title .text {
font-size: 24px;
font-weight: bold; /* */
/* border-bottom: solid 2px var(--text-color, #CCC); /* */
padding-left: 52px; /* */
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 2px var(--accent-color, #CCC);
}
縁取り + 影付き文字
code:stylexx.css
.editor .line-title .text {
font-size: 24px;
font-weight: bold;
border-bottom: solid 2px var(--text-color, #CCC);
padding-left: 52px; /* */
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, #CCC);
}
砂文字
code:stylexx.css
.editor .line-title .text {
font-size: 24px;
font-weight: bold; /* */
/* border-bottom: solid 2px var(--text-color, #CCC); /* */
padding-left: 52px; /* */
text-shadow: 0 0 27px var(--accent-color, red); /* */
}
縁取り + 砂文字
code:style.css
.editor .line-title .text {
font-size: 24px;
font-weight: bold;
border-bottom: solid 2px var(--text-color, #CCC);
padding-left: 52px; /* */
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),
0px 0px 27px var(--main-color, #CCC);
}
グラデーションテキストのテスト
code:stylexx.css
.editor .line-title .text {
font-size: 24px;
font-weight: bold;
/* background: -webkit-linear-gradient(left, #ff26fb, #00b3ff); */
/* background: -webkit-linear-gradient(left, #aaa, #333, #ff26fb); /* */
/*background: linear-gradient(45deg, #ffd800, #ff0000 45%, #ffd800);*/
background: linear-gradient(315deg,
red,
orange,
yellow,
green,
aqua,
blue,
purple,
red
);
-webkit-background-clip: text;
/* -webkit-text-fill-color: transparent; */
background-clip: text;
color: transparent;
display:inline-block;
}
ページタイトルに画像（アイキャッチ）を追加
code:style.css
.editor .line-title::before {
content: ''; /* */
display: block;
width: 1em;
height: 1em;
padding: 25px; /* */
position: absolute; /* */
background-image: var(--eye-chacher); /* */
background-size: contain;
background-repeat: no-repeat; /* */
border-radius: 4px;
}
ページヘッダー
UserCSS:ページヘッダー
ページヘッダー（画像表示する場合）
code:style.css
.page::before {
display: block;
content: ''; /* */
width: 1em; /* */
height: 1em; /* */
padding: 48px 52px; /* */
/* padding: 48px 48px; /* */
position: left top; /* */
margin: 10px;
/*ここに画像へのリンクを貼る*/
background-image: var(--page-header-image); /* */
/* background-size: /* contain; */
background-size: cover; /* */
/* background-size: auto; /* */
/* background-size: 48px 48px; /* */
/*　background-repeat: no-repeat; /* */
/*border-radius: 4px*/
}
ページフッター
UserCSS:ページフッター
ページフッター（画像表示する場合）
code:style.css
.page::after {
display: block;
content: ''; /* */
width: 1em; /* */
height: 1em; /* */
padding: 48px 52px; /* */
/* padding: 48px 48px; /* */
margin: 10px;
position: left top; /* */
/*ここに画像へのリンクを貼る*/
background-image: var(--page-footer-image); /* */
/* background-size: /* contain; */
background-size: cover; /* */
/* border-radius: 4px */
}
エディタ
UserCSS:エディタ
code:style.css
.editor, .stream {
font-family: 'ヒラギノ明朝 ProN','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝体','YuMincho','游明朝','Yu Mincho',serif;
}
テロメア
UserCSS:テロメア
code:stylexx.css
.line .telomere {
border-color: var(--assort-color);
}
code:style.css
/* 新着以外のテロメア */
.line .telomere .telomere-border {
/* border-color: var(--main-color); /* これ灰色のとこ */
border-color: var(--assort-color); /* これ灰色のとこ */
}
グラデーション（横方向）
code:style.css
/* 新着のテロメア */
.line .telomere .telomere-border.unread {
background: linear-gradient( to left,
red,
orange,
yellow,
green,
aqua,
blue,
purple,
red
) 0% center / 1400% auto ; /* グラデーション */
animation: telomere 112s linear infinite;
animation-direction: reverse;
/* width: 5px; */
/* background-color: var(--assort-color); /* これ灰色のとこ */
border-color: var(--assort-color); /* これ灰色のとこ */
}
@keyframes telomere {
to { background-position-x: 1400%; }
}
日付が表示される部分
code:style.css
/* 日付が表示される部分 */
.line .telomere .telomere-border .description {
background-color: var(--assort-color); /* 背景色 */
/* color: var(--main-color); /* 文字色 */
color: var(--text-color); /* 文字色 */
}
ハッシュタグ
UserCSS:ハッシュタグ
#hashtag
共通の設定
code:stylexx.css
atype="hashTag" {
/* --page-link-color: var(--main-color, #BBB); /**/
color: var(--main-color, #BBB);
background-color: var(--base-color, #EEE);
padding: 4px 6px;
border-radius: 4px;
/* フォント指定 */
font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;
font-size: 14px;
/* フォントを太字にする */
font-weight: bold;
/* ボックスシャドウ */
box-shadow: 2px 2px var(--accent-color, #CCC);
}
グラデーションでアニメーション（横）
code:stylexx.css
atype="hashTag":not(:hover) {
--page-link-color: var(--assort-color, #BBB); /* */
background: linear-gradient( to right,
var(--base-color, #EEE),
var(--main-color, #BBB),
var(--base-color, #EEE)
) 0% center / 300% auto ; /* グラデーション */
animation: emblue 4s linear infinite;
animation-direction: reverse;
/*animation-direction: alternate;*/
text-shadow: 1px 1px 0px var(--accent-color);
}
@keyframes emblue {
to { background-position-x: 300%; }
}
hover
code:stylexx.css
atype="hashTag":hover {
--page-link-color: var(--main-color, #BBB); /* */
/* color: var(--main-color, #BBB); /* */
background-color: var(--base-color, #EEE);
box-shadow: 0px 0px 8px var(--accent-color, #CCC);
}
箇条書き
1
2
3
4
5
6
code:stylexx.css
.line.number-list .dot {
display: list-item; /* 表示する */
}
code:stylexx.css
.line .dot {
display: none !important;
}
code:stylexx.css
.line .indent-mark .dot {
display: none !important;
}
code:stylexx.css
.line .indent-mark .dot {
color: transparent;
}
箇条書きのビュレットに画像を使う
code:stylexx.css
.line .indent-mark .dot::before {
content: ''; /* */
width: 1em;
height: 1em;
padding: 12px;
position: absolute; /* */
right: -5px;
top: -10px;
/*ここに画像へのリンクを貼る*/
background-image: var(--eye-chacher); /* */
background-size: cover; /* */
border-radius: 4px;/* */
/* border-radius: 50%; /* */
}
色の指定
code:stylexx.css
.indent-mark .dot:nth-child(3n+2)::before {
background-color: var(--li-color-1, hsla(0,100%,60%,0.4));
}
.indent-mark .dot:nth-child(3n+3)::before {
background-color: var(--li-color-2, hsla(120,100%,60%,0.4));
}
.indent-mark .dot:nth-child(3n+4)::before {
background-color: var(--li-color-3, hsla(240,100%,60%,0.4));
}
関連ページリスト
UserCSS:関連ページリスト
code:style.css
.related-page-list {
opacity:0.6;
/* filter: grayscale(50%); /* */
}
.related-page-list:hover {
opacity:1;
filter: none;
}
ページリスト
UserCSS:関連ページリスト
code:style.css
.page-list {
opacity:0.6; /* */
/* filter: grayscale(50%); /* */
}
.page-list:hover {
opacity:1;
filter: none;
}
code:style.css
/* カードの見出し */
.grid li.page-list-item a .header{
color: var(--main-color, #EEE);
text-shadow: -1px -1px 0px var(--assort-color, #CCC),
-1px 1px 0px var(--assort-color, #CCC),
1px -1px 0px var(--assort-color, #CCC),
1px 1px 0px var(--assort-color, #CCC);
background:
linear-gradient(to top,
var(--assort-color,#333),
var(--main-color, #EEE)
);
padding-left: 1em; /* */
padding-bottom: 0.2em
/* border-style: solid; border-color: red; /* */
}
code:stylexx.css
/* カードの本文 */
.grid li.page-list-item a .content{
/* background-color: white; */
background:
linear-gradient(to bottom,
var(--base-color, white) ,
var(--assort-color, #EEE) 33%,
var(--assort-color, #EEE) 95%,
var(--main-color, #CCC)
);
}
code:style.css
/* カードの本文 */
.grid li.page-list-item a .content{
background:
linear-gradient(to right,
var(--main-color,#CCC),
var(--assort-color,#EEE), 5%,
var(--assort-color,#EEE), 95%,
var(--main-color,#CCC)
);
}
code:style.css
/* 先頭 ブックマークを調整*/
.grid li.page-list-item > ahref^="/suto3/B:" > .content > .header > .title {
background-color: rgba(80%,80%,80%,0.7) ;
}
code:style.css
.grid li.page-list-item > ahref^="/suto3/" > .content > .header > .title::before {
content: ''; /* */
width: 1em;
height: 1em;
padding: 3px 12px; /* xxx*/
position: right center; /* */
background-image: var(--eye-chacher); /* */
background-size: contain; /* */
background-repeat: no-repeat; /* */
border-radius: 4px;
}
UserCSS:PageMenu
ステータスバー
UserCSS:ステータスバー
code:style.css
.status-bar {
background-color: var(--base-color, Red); /* */
/* background-color: red; /* */
}
細かいパーツ
UserCSS:選択範囲の色の変更
code:stylexx.css
.selection{
background-color: var(--accent-color, GreenYellow);
}
カーソル
UserCSS:カーソル
code:stylexx.css
.cursor {
/* background-color: var(--accent-color, red); /* */
color: var(--accent-color, red);
/* width: 4px; */
}
.shared-cursors .cursor {
background-color: var(--accent-color, red);
}
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);
}
痛Scrapbox痛Scrapbox.icon
UserCSS:禅モード
UserCSS.icon
settings.icon