_CSS_Deco
#_CSS_Import
記法に関するUserCSS。
https://gyazo.com/db02214230960bade0f2bb8b91615fd6
ブラケット記法
警告記法
サンプル
code:style.css
/* 警告表記を使えるようにする */
.deco-\! {
color: var(--warning-text-color);
background-color: var(--warning-bg);
font-weight: bold;
padding: 1px 2px;
/* border: 1.1px solid var(--warning-bg-border); */
border-radius: 1px;
background: repeating-linear-gradient(-45deg, var(--warning-bg), var(--warning-bg) 17px, var(--warning-bg-border) 3px, var(--warning-bg-border) 20px);
}
要加筆のハッシュタグを赤くする
https://gyazo.com/81827235884e499a539190601c5f0415
code:style.css
/* 「#要加筆」を赤くする */
a.page-linktype="hashTag"href="./%E8%A6%81%E5%8A%A0%E7%AD%86" {
color: #fff;
background-color: #e33;
padding: 1px 2px;
border-radius: 1px;
}
a.page-linktype="hashTag"href="./%E8%A6%81%E5%8A%A0%E7%AD%86":hover {
color: unset;
background-color: #e66;
}
見出し記法関連
共通
code:style.css
/* 大きい文字を見出し化する */
strong.level {
display: inline-block;
margin-top: 7px;
}
[**** レベル4]
code:style.css
/* 見出しのデザインを変える */
strong.level.level-4 {
display: block;
border-bottom: 3px solid var(--accent-level-4);
padding: 0;
padding-left: 0.5em;
/* 何故か縦幅が異様にでかくなってしまうので修正する↓ */
margin-top: -1em;
margin-bottom: -0.5em;
}
[*** レベル3]
code:style.css
strong.level-3 {
color: var(--common-accent-color);
border-left: solid 14px var(--common-accent-color);
padding-left: 11px;
margin-bottom: 6px;
}
その他記法
箇条書き
code:style.css
.line .indent-mark span.dot {
background-color: var(--common-accent-color);
/* border-radius: 0; */
}
code:style.css
.line.number-list .indent-mark span.dot {
display: list-item; /* 表示する */
background-color: transparent;
}
.line.number-list .indent-mark span.dot::before {
display: block;
position: absolute;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
top: -11px;
content: '\f068';
font-size: 4px;
color: var(--common-accent-color);
}
/villagepump/borderでインデントに縦線を表示するUserCSS
邪魔くさそうな気がしたので一旦無効化しておくMijinko_SD.icon
code:disabled-style.css
.indent-mark {
height: 100% !important;
}
.indent-mark .pad {
height: 100% !important;
overflow: unset !important;
}
.indent-mark span:not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 2px solid var(--common-accent-color-gray); /* 色の指定 */
}
表組み
from /customize/テーブルにボーダーを引く
code:style.css
.table-block .cell {
box-shadow:
2px 0 0 0 var(--table-border-color),
0 2px 0 0 var(--table-border-color),
2px 2px 0 0 var(--table-border-color),
2px 0 0 0 var(--table-border-color) inset,
0 2px 0 0 var(--table-border-color) inset
}
.cursor-line .table-block span.cell.cursor-row {
background-color: var(--common-bg-2);
}
古い表組みスタイル
code:_style.css
.line:has(.table-block-start) + .line .table-block span.cell {
border-top: 1px solid var(--table-border-color);
}
.table-block span.cell {
border-right: 1px solid var(--table-border-color);
/*border-top: 1px solid var(--table-border-color);*/
border-bottom: 1px solid var(--table-border-color);
}
.table-block span.cell:nth-child(odd){
background-color: rgb(0, 0, 0, 0.2);
}
.table-block span.cell:nth-child(even){
background-color: rgb(0, 0, 0, 0.3);
}
.table-block span.cell.col-1 {
border-left: 1px solid var(--table-border-color);
}
.table-block .cell.cursor-row:nth-child(odd){
background-color: rgb(0, 0, 0, 0.1);
}
.table-block .cell.cursor-row:nth-child(even){
background-color: rgb(0, 0, 0, 0.2);
}