汎用UserCSS
箇条書きを控えめに
thanks /scrasobox/箇条書きを控えめにする
箇条書きが控えめになる
…に機能を追加して、段階ごとに色を変えるようにして見た
Twitterの相互さんがこのようにやっているのを見かけたので、それへのあこがれ
まあこんな風に
結構
虹色っぽく
いい感じに
変わります。
レインボー
ロード
目がチカチカするだろうから、暗めの色にしておいた
それでもまだ少しチカチカするかも。
しばらく使ってみる。
今のところ問題はなさそう(2022/2/4地点)
色相環に沿って作ったのは、色の変わるルールに規則性を持たせたかったから。
HSVで指定している。
めっちゃいいかも！
style.css.app .line .indent-mark .dot {
height: .2em; width: .4em; border-radius: 25%;
}
.app .line .indent-mark .c-0 + .dot {
background-color: #479e3e;
}
.app .line .indent-mark .c-1 + .dot {
background-color: #a19740;
}
.app .line .indent-mark .c-2 + .dot {
background-color: #9c503d;
}
.app .line .indent-mark .c-3 + .dot {
background-color: #9c3d6c;
}
.app .line .indent-mark .c-4 + .dot {
background-color: #863e9e;
}
.app .line .indent-mark .c-5 + .dot {
background-color: #5250cc;
}
.app .line .indent-mark .c-6 + .dot {
background-color: #40a197;
}
.app:not(.presentation) .line .indent-mark .dot { top: auto; bottom: 0 }ページリンクの色
かなり前にここ作ったんだけどいまだにチョコミントのリンクないの？奇跡
未作成のページなので薄くなる
存在するページなので濃くなる。
style.cssa{
color:#2ba7ff;
border-color: #2ba7ff;
}
a.empty-page-link{
color:#b8e1ff !important;
border-color: #b8e1ff;
}ちょっと薄い文字を書けるようにする
thanks /yuta0801/settings
こんな感じ
style.css.line [class="deco-\>"]{
color:#888;
}
.line.cursor-line [class="deco-\>"]{
color:#888;
}
.line:not(.cursor-line) [class="deco-\>"]{
font-size:0.9em;
}
.line:not(.cursor-line) [class="deco-\>"] a.page-link{
color:#2ba7ffbb;
}
.line:not(.cursor-line) [class="deco-\>"] a.empty-page-link{
color:#b8e1ffbb !important;
}ハッシュタグがラベルっぽくなる
style.cssa[type="hashTag"]{
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);
}
a[type="hashTag"].empty-page-link{
/* 未作成ページ */
font-size: 0.8em;
border: 1px solid;
}
a[type="hashTag"]:hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}インラインコード記法のハイライトを消す
thinks that SV style.csscode.code span {
color: inherit;
}栞記法
thanks /scrasobox/しおり記法
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 }