settings
brain-hackers プロジェクト共通のスタイル設定
script.js については puhitaku のページをどうぞ
code:style.css
/* https://scrapbox.io/scrasobox/%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%AB%E3%81%AA%E3%82%8B%E3%82%BF%E3%82%B0_2*/
/* _ = f096, x = f046 */
/* チェックボックスになるタグ v2 Font Awesome版 */
.line:not(.cursor-line) ahref$='/_':not(.icon) span,
.line:not(.cursor-line) ahref$='/x':not(.icon) span {
display: inline-block; width: 0; text-indent: -9999px }
.line:not(.cursor-line) ahref$='/_':not(.icon)::after,
.line:not(.cursor-line) ahref$='/x':not(.icon)::after {
display: inline-block; min-width: 1.15em; padding-left: 1px;
font-family: 'Font Awesome 5 Free'; font-size: 120%; text-align: center; vertical-align: middle }
.line:not(.cursor-line) ahref$='/_':not(.icon)::after { content: '\f111'; color: #5e8af7 }
.line:not(.cursor-line) ahref$='/x':not(.icon)::after { content: '\f058'; color: #5e8af7 }
/* タスクのタグを出すやつ */
.line:not(.cursor-line) ahref$='/comment':not(.icon) span,
.line:not(.cursor-line) ahref$='/problem':not(.icon) span,
.line:not(.cursor-line) ahref$='/resolved':not(.icon) span,
.line:not(.cursor-line) ahref$='/suggestion':not(.icon) span,
.line:not(.cursor-line) ahref$='/accepted':not(.icon) span,
.line:not(.cursor-line) ahref$='/rejected':not(.icon) span,
.line:not(.cursor-line) ahref$='/task':not(.icon) span,
.line:not(.cursor-line) ahref$='/working':not(.icon) span,
.line:not(.cursor-line) ahref$='/done':not(.icon) span,
.line:not(.cursor-line) ahref$='/important':not(.icon) span,
.line:not(.cursor-line) ahref$='/not-important':not(.icon) span {
display: inline-block;
width: 0;
color: transparent;
}
.line:not(.cursor-line) ahref$='/comment':not(.icon)::after,
.line:not(.cursor-line) ahref$='/problem':not(.icon)::after,
.line:not(.cursor-line) ahref$='/resolved':not(.icon)::after,
.line:not(.cursor-line) ahref$='/suggestion':not(.icon)::after,
.line:not(.cursor-line) ahref$='/accepted':not(.icon)::after,
.line:not(.cursor-line) ahref$='/rejected':not(.icon)::after,
.line:not(.cursor-line) ahref$='/task':not(.icon)::after,
.line:not(.cursor-line) ahref$='/working':not(.icon)::after,
.line:not(.cursor-line) ahref$='/done':not(.icon)::after,
.line:not(.cursor-line) ahref$='/important':not(.icon)::after,
.line:not(.cursor-line) ahref$='/not-important':not(.icon)::after {
display: inline-block;
min-width: 1.15em;
padding-left: 1px;
font-family: 'Font Awesome 5 Free';
font-size: 11px;
text-align: center;
vertical-align: text-bottom;
color: white;
border-radius: 5px;
margin: 0 0 0.5px;
padding: 0 4px 0 4px;
line-height: 150%;
}
.line:not(.cursor-line) ahref$='/comment':not(.icon)::after {
content: 'コメント';
background-color: #888;
}
.line:not(.cursor-line) ahref$='/problem':not(.icon)::after {
content: '問題';
background-color: #e91e63;
}
.line:not(.cursor-line) ahref$='/resolved':not(.icon)::after {
content: '解決済み';
background-color: #4caf50;
}
.line:not(.cursor-line) ahref$='/suggestion':not(.icon)::after {
content: '提案';
background-color: #2196f3;
}
.line:not(.cursor-line) ahref$='/accepted':not(.icon)::after {
content: '採用';
background-color: #ae44be;
}
.line:not(.cursor-line) ahref$='/rejected':not(.icon)::after {
content: '不採用';
background-color: #e91e63;
}
.line:not(.cursor-line) ahref$='/task':not(.icon)::after {
content: 'タスク';
background-color: #ff6e2c;
}
.line:not(.cursor-line) ahref$='/working':not(.icon)::after {
content: '作業中';
background-color: #33cc99;
}
.line:not(.cursor-line) ahref$='/done':not(.icon)::after {
content: '完了';
background-color: #ae44be;
}
.line:not(.cursor-line) ahref$='/important':not(.icon)::after {
content: '重要度 高';
background-color: #ff4422;
}
.line:not(.cursor-line) ahref$='/not-important':not(.icon)::after {
content: '重要度 低';
background-color: #bbc0ff;
}
/* https://qiita.com/progfay/items/5a81e130fc36291990d4 */
/* 中央寄せ */
.deco-\| {
position: absolute;
width: 100%;
text-align: center;
}
/* 右寄せ */
.deco-\> {
position: absolute;
width: 100%;
text-align: right;
}
/* 左寄せ */
.deco-\< {
position: absolute;
width: 100%;
text-align: left;
}
/* https://scrapbox.io/forum-jp/インラインのコード記法は色をつけないで欲しい */
code.code span {
color: inherit !important;
}
/* 共通: JetBrains Mono があれば使用、無ければ標準のフォールバックを行う */
/* macOS: 英文 Menlo, Monaco, 和文 ヒラギノ */
/* Windows: 英文 Cascadia Code -> Consolas -> Courier New, 和文 BIZ UDゴシック -> MSゴシック */
code, kbd, pre, samp {
font-family: "JetBrains Mono", Menlo, Monaco, "Cascadia Code", Consolas, "Courier New", "Hiragino Sans", "BIZ UDゴシック", monospace !important;
}
/* https://scrapbox.io/takker/コードブロック記法に行番号を表示するUserCSS_(Mijinko) */
body *::before {
--code-number-color: var(--code-color, #342d9c);
/* --accent-color: ; */
}
/* コード記法の行番号を表示 -- ウィンドウ幅768px以上で適用 */
/* ↑無効化した */
.section-title {
counter-reset: codeline;
}
.code-block span.indent code.code-body {
counter-increment: codeline;
margin-left: -1.5em;
padding-left: 2.3em;
}
.code-block span.indent code.code-body::before {
content: counter(codeline);
position: absolute;
display: inline-block;
z-index: 10;
margin-left: -3.2em;
width: 3em;
padding-right: 0.2em;
text-align: right;
vertical-align: bottom;
border-right: solid 1px #aaa;
/* ↓行番号の色の指定はここ */
color: var(--code-number-color);
}
/* カーソル行の行番号を濃く表示する */
.code-block span.indent code.code-body::before {
opacity: .5;
}
.cursor-line .code-block span.indent code.code-body::before {
opacity: 1;
font-weight: bolder;
/* ↓カーソル行の背景色の色はここ */
background-color: var(--accent-color);
}
サンプル兼動作テスト
_ = [_]
x = [x]
comment = [comment]
problem = [problem]
resolved = [resolved]
suggestion = [suggestion]
accepted = [accepted]
rejected = [rejected]
task = [task]
working = [working]
done = [done]
important = [important]
not-important = [not-important]
Line height調整
あああ important done あああ
左揃え (<)
中央揃え (|)
右揃え (>)