箇条書きのバレットをFontAwesomeにするUserCSS
from Settings
1
2
3
4
5
6
7
1.
2.
3.
4.
5.
6.
7.
これはちょっと派手すぎないかな
色が明るすぎて見づらいのもあるから、せめてもう少し暗くした方がよくなりそう
✓マークはTODOリストみたいに見えるので避けてほしいです
後いくらなんでも原色は見づらい
彩度を落とす必要があります
変えてみました 2020-09-02 09:12:34
番号なしリストは
さんのprojectから丸パクリ
彩度を落としてみた
番号なしリストの階層の色分け表示が完全に潰されとる。いいのか、それで。
一画面に収まらないような箇条書きを読むのがつらいので、色分け表示をしようとしたんだけどさ。
直そうとしたけど直し方がわからなかったので保留にしていました
直った。色や大きさ、位置が変であれば直してください。
修正してみました。こんな感じかな。
バレットにはFont Awesomeのアイコンが使えます。
なるほどー「minus」で調べればよかったのかー
「hyphen」で探したら出てこなかったので諦めて
- を使っていました少し小さくしました
なんかColor Sugarを思い出した
2021-07-10 09:55:24 修正しました
2020-10-09 14:57:22 bulletの大きさを控えめにしました
CSS変数定義
カラーセット 1
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
style.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
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);
}Font Awesomeのアイコンを割り当てる
style.css:root {
/* 番号なしリストのキャラクター */
/* --ul-bullet: '\f00c'; /* チェックマーク */
--ul-bullet: '\f068'; /* マイナス記号 */
/* --ul-bullet: '\f10c'; /* xまる */
/* --ul-bullet: '\f111'; /* まる */
/* --ul-bullet: '\f0c8'; /* 四角 */
/* --ul-bullet: '\f096'; /*x 四角 */
/* --ul-bullet: '\f580'; /* */
/* --ul-bullet: '\f140'; /* 二重丸*/
/* --ul-bullet: '\f005'; /* スター:クリスマス用 */
/* --ul-bullet: '\f1b2'; /* box */
/* --ul-bullet: '\f599'; /* 顔 */
/* --ul-bullet: '\f1b0'; /* 肉球:猫の日用 */
/* --ul-bullet: '\f6be'; /* ネコ */
/* --ul-bullet: '\f6d3'; /* イヌ */
/* --ul-bullet: '\f1dd'; /* パラグラフ記号 */
/* --ul-bullet: '\f683'; /* 祈り */
/* --ul-bullet: '\f5d7'; /* 骨 */
/* --ul-bullet: '\f004'; /* ハートマーク */
/* 番号つきリストのキャラクター */
/* --ol-bullet: '\f111'; /* 丸 */
--ol-bullet: '\f292'; /* ハッシュ記号 '#' */
/* --ol-bullet: '\f2dc'; /* 雪:クリスマス用 */
}番号なしリスト
アイコン指定
style.css.line .indent-mark .dot::before {
display: block;
/* position: inherit; */
/* top: -12px;d */
position: absolute;
/* right: -5px; */
top: -10px;
スターはクリスマス仕様だったのか
マイナス記号よりスターのほうが見やすいと思う
style.css /* font-family: FontAwesome; /* old */
font-family: 'Font Awesome 5 Free';
font-size: 6px;
/* content: '\f068'; /* マイナス記号:通常 */
/* content: '\f005'; /* スター:クリスマス用 */
/* content: '\f1b0'; /* 肉球:猫の日用 */
/* content: '\f1fd'; /* バースデーケーキ */
/* content: '\f6be'; /* ネコ */
/* content: '\f6d3'; /* イヌ */
/* content: '\f683'; /* 祈り */
font-weight: 900;
/* color: #c9c9c9; */
content: var(--ul-bullet, '\f068');
color: var(--li-color-0);
}クリスマスに作った行だけ星にするテスト
style.cssdiv.line[id^="L5fe4ac"]
:not([id^="L5fe4ac00"])
:not([id^="L5fe4ac01"])
:not([id^="L5fe4ac02"])
:not([id^="L5fe4ac03"])
:not([id^="L5fe4ac04"]) .indent-mark .dot::before,
div.line[id^="L5fe4ad"] .indent-mark .dot::before,
div.line[id^="L5fe4ae"] .indent-mark .dot::before,
div.line[id^="L5fe4af"] .indent-mark .dot::before,
div.line[id^="L5fe4b"] .indent-mark .dot::before,
div.line[id^="L5fe4c"] .indent-mark .dot::before,
div.line[id^="L5fe4d"] .indent-mark .dot::before,
div.line[id^="L5fe4e"] .indent-mark .dot::before,
div.line[id^="L5fe4f"] .indent-mark .dot::before,
div.line[id^="L5fe5"]:not([id^="L5fe5f"]) .indent-mark .dot::before,
div.line[id^="L5fe5f"]
:not([id^="L5fe5fd"])
:not([id^="L5fe5fe"])
:not([id^="L5fe5ff"]) .indent-mark .dot::before,
div.line[id^="L5fe5fd"]
:not([id^="L5fe5fd8"])
:not([id^="L5fe5fd9"])
:not([id^="L5fe5fda"])
:not([id^="L5fe5fdb"])
:not([id^="L5fe5fdc"])
:not([id^="L5fe5fdd"])
:not([id^="L5fe5fde"])
:not([id^="L5fe5fdf"]) .indent-mark .dot::before,
div.line[id^="L5fe5fd80"] .indent-mark .dot::before,
div.line[id^="L5fe5fd81"] .indent-mark .dot::before,
div.line[id^="L5fe5fd82"] .indent-mark .dot::before,
div.line[id^="L5fe5fd83"] .indent-mark .dot::before,
div.line[id^="L5fe5fd84"] .indent-mark .dot::before {
content: '\f005';
}2021/7/5
なんかwindowsで見ると直ってるけどiphoneとmacで見ると直ってない…
自分の環境のwin、mac、iphoneで直りました
既定のbulletを消す
style.css.line .indent-mark .dot { background-color: transparent; } /* */
/* .line .indent-mark .dot { background-color: #EEE; } /* */フォントサイズ
width を指定しているselectorはStreamだとindent情報が消える対策style.css.indent-mark[style*="width: 1.5em"] .dot::before,
.line .indent-mark .c-0 + .dot::before {
font-size: 10px;
}
.indent-mark[style*="width: 3em"] .dot::before,
.line .indent-mark .c-1 + .dot::before {
font-size: 9px;
}
.indent-mark[style*="width: 4.5em"] .dot::before,
.line .indent-mark .c-2 + .dot::before {
font-size: 8px;
}
.indent-mark[style*="width: 6em"] .dot::before,
.line .indent-mark .c-3 + .dot::before {
font-size: 7px;
}色
:nth-child()を使って無限に繰り返すようにした
最初は
:nth-child(6n+1) ではなく :nth-child(6n+2) を指定する .c-0 のあとに .dot が来る
インデントレベル1のdotは
span.indent-mark の2番目の子要素なので 6n+2 にマッチよくわからない…順番関係あるんですか？
順番は関係ないけど、わかりやすいように出現する色順に書いているということか
確かにインデントレベル1のdotが
6n+2 で指定した色になっている::beforeは何で要るんでしょうか
Settings#5f4e065a5b98c20000821271が::beforeで生成されているからです
なるほど…
開発コンソールで
::before を削ってみると違いがわかりますイマイチやり方が分かっていないです
settingで一瞬削ってみてわかりました
コンソールじゃなくてスタイルエディターでした
style editorから探せませんか？
style.css.indent-mark[style*="width: 1.5em"] .dot::before,
.indent-mark .dot:nth-child(6n+2)::before {
/* color: #EDAD0B; */
color: var(--li-color-1);
}
.indent-mark[style*="width: 3em"] .dot::before,
.indent-mark .dot:nth-child(6n+3)::before {
/* color: #C7243A; */
color: var(--li-color-2);
}
.indent-mark[style*="width: 4.5em"] .dot::before,
.indent-mark .dot:nth-child(6n+4)::before {
/* color: #932674; */
color: var(--li-color-3);
}
.indent-mark[style*="width: 6em"] .dot::before,
.indent-mark .dot:nth-child(6n+5)::before {
/* color: #3261AB; */
color: var(--li-color-4);
}
.indent-mark[style*="width: 7.5em"] .dot::before,
.indent-mark .dot:nth-child(6n+6)::before {
/* color: #009F8C; */
color: var(--li-color-5);
}
.indent-mark[style*="width: 9em"] .dot::before,
.indent-mark .dot:nth-child(6n+7)::before {
/* color: #c9c9c9; */
color: var(--li-color-0);
} 番号つきリスト
style.css.line.number-list .dot { display: list-item; } /* 表示する */アイコン指定
style.css.line.number-list .dot::before {
position: inherit;
top: -11px;
/* content: '\f292'; /* #:通常 */
/* content: '\f2dc'; /* 雪:クリスマス用 */
content: var(--ol-bullet, '\f292');
font-size: 4px;
}フォントサイズ
style.css.line.number-list .c-0 + .dot::before { font-size: 8px; }
.line.number-list .c-1 + .dot::before { font-size: 7px; }
.line.number-list .c-2 + .dot::before { font-size: 6px; }
.line.number-list .c-3 + .dot::before { font-size: 5px; }
.line.number-list .c-4 + .dot::before { font-size: 4px; }