汎用UserCSS
箇条書きを控えめに
箇条書きが控えめになる
…に機能を追加して、段階ごとに色を変えるようにして見た
Twitterの相互さんがこのようにやっているのを見かけたので、それへのあこがれ
まあこんな風に
結構
虹色っぽく
いい感じに
変わります。
レインボー
ロード
目がチカチカするだろうから、暗めの色にしておいた
それでもまだ少しチカチカするかも。
しばらく使ってみる。
今のところ問題はなさそう(2022/2/4地点)
色相環に沿って作ったのは、色の変わるルールに規則性を持たせたかったから。
めっちゃいいかも！
code:style.css
.app .line .indent-mark .dot {
height: .2em; width: .4em; border-radius: 25%;
}
.app .line .indent-mark .c-0 + .dot {
}
.app .line .indent-mark .c-1 + .dot {
}
.app .line .indent-mark .c-2 + .dot {
}
.app .line .indent-mark .c-3 + .dot {
}
.app .line .indent-mark .c-4 + .dot {
}
.app .line .indent-mark .c-5 + .dot {
}
.app .line .indent-mark .c-6 + .dot {
}
.app:not(.presentation) .line .indent-mark .dot { top: auto; bottom: 0 }
hr.icon
hr.icon
ページリンクの色
かなり前にここ作ったんだけどいまだにチョコミントのリンクないの？奇跡 未作成のページなので薄くなる
存在するページなので濃くなる。
code:style.css
a{
color:#2ba7ff;
}
a.empty-page-link{
color:#b8e1ff !important;
}
ちょっと薄い文字を書けるようにする
こんな感じ
code:style.css
color:#888;
}
color:#888;
}
font-size:0.9em;
}
color:#2ba7ffbb;
}
color:#b8e1ffbb !important;
}
hr.icon
ハッシュタグがラベルっぽくなる
code:style.css
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
font-size: 0.8em;
border: 1px solid;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
/* 未作成ページ */
font-size: 0.8em;
border: 1px solid;
}
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
hr.icon
インラインコード記法のハイライトを消す
thinks that SV
code:style.css
code.code span {
color: inherit;
}
hr.icon
栞記法
code:style.css
@media screen {
/*緑色マーカーが引かれるように変更*/
.app:not(.presentation) .line .deco-\. {
background:
linear-gradient(#00000000 60%, #43de6d66 60%); }
.app:not(.presentation) .line .deco-\.::after {
position: absolute;
top: 3px; left: -1.4em;
content: '\f02e';
font: 1.7rem/1 'Font Awesome 5 Free';
color: yellowgreen
}
}
@media screen and (max-width: 990px) {
.app:not(.presentation) .line .deco-\.::after {
position: static; padding-left: .3em
}
}
a#Bookmarks.tool-btn:hover { text-decoration: none }
a#Bookmarks.tool-btn::before {
position: absolute;
left: calc(46px/3);
content: '\f02e';
font: 20px/46px 'Font Awesome 5 Free'
}
a#Bookmarks.tool-btn img { opacity: 0 }