settings
code:style.css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
.line {
font-family: 'JetBrains Mono', 'Noto Sans JP', sans-serif;
}
.title, .line-title {
font-family: 'JetBrains Mono', 'Noto Sans JP', sans-serif;
font-weight: 700;
}
/* 本文の文字サイズを大きくする */
.editor {
font-size: calc(1.5rem + .1vw);
}
.editor,
.stream,
.line .section-0 {
line-height: 1.7 !important;
}
.line span.code-block {
font-size: .9em;
line-height: 1.3;
}
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) {
background: linear-gradient(transparent 60%, rgba(171, 255, 79, .6) 60%, rgba(171, 255, 79, .6) 100%);
}
.line strong:not(class):hover {
background: linear-gradient( to right,
transparent,
rgba(171, 255, 79, .6),
transparent 50%
) 0% center / 400% auto ; /* グラデーション */
padding: 0.1em 0.2em 0.1em 0.2em;
animation: marker 10s linear infinite;
animation-direction: reverse;
}
@keyframes marker {
to { background-position-x: 400%; }
}
/* タイトルを虹色にする */
.line.section-0.line-title.section-title span.text {
display: inline-block;
background: linear-gradient(to right, #e60000, #f39800, #fff100, #009944, #0068b7, #1d2088, #920783);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
/* 外部リンクにiconをつける */
.line span:not(.modal-image):not(.pointing-device-map)>a.link:not(.icon):not([href^="https://scrapbox.io"])::after {
font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
font-weight: 900;
font-size: 0.8rem;
content: ' \f35d';
display: inline-block;
}
/* コードブロック行頭の空白の色を変えるCSS */
.code-block .indent-mark {
height: 100%;
}
.code-block .indent-mark .pad {
height: 100%;
overflow: unset;
}
.code-block .indent-mark span:last-child .pad {
background-color: rgba(0, 0, 0, 0.05);
}
/* コードブロックに行番号を追加する */
htmldata-project-theme="paper-dark-dark",
htmldata-project-theme="defaut-dark" {
--code-line-number-color: #D181FF;
}
.section-title,
.code-block-start {
counter-reset: codeline
}
.code-block .indent-mark>span.char-index:last-child {
counter-increment: codeline
}
body:not(.presentation) .code-block .indent-mark>span.char-index:last-child::before {
content: counter(codeline);
position: absolute;
}
.code-block .indent-mark>span.char-index:last-child::before {
color: var(--code-line-number-color, #3f3f3f);
}
/* カーソル選択時の行番号の色 */
.cursor-line .code-block .indent-mark>span.char-index:last-child::before {
color: var(--cursor-code-line-number-color, #FF00F0);
font-weight: bolder;
}
/* ピン留めされたページを独立した段に表示する */
.page-list-item.pin+.page-list-item:not(.pin) {
grid-column-start: 1;
}
/* 注意書き記法 */
.deco-\! {
padding: 0.5em 0.25em;
margin: 2em 0;
color: #232323;
background: #fff8e8;
border-left: solid 5px #ffc06e;
}
.deco-\!::before {
color: #ff6b00;
font-size: 85%;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f071';
margin-right: 0.5rem;
}
/* コメント記法 */
.deco-\# {
color: green;
font-size: smaller;
padding: 0 .2em
}
/* <ruby>相当 */
.line:not(.cursor-line) .deco-\' {
display: inline-flex;
flex-direction: column-reverse;
vertical-align: bottom; /* Chrome 108で表示が乱れる場合の対応 */
}
/* <rb>相当 */
.line:not(.cursor-line) .deco-\' > span:nth-child(1) {
display: inline-flex;
justify-content: space-around;
width: 100%;
}
/* <rt>相当 */
.line:not(.cursor-line) .deco-\' > span:nth-child(2) {
line-height: 0;
font-size: 50%;
}
/* <rt>相当 */
.line:not(.cursor-line) .deco-\' > span:nth-child(2) > a {
display: inline-flex;
justify-content: space-around;
width: 100%;
pointer-events: none;
color: var(--page-text-color, #4a4a4a);
}
/* 水平線の誤クリックを防ぐ */
a.iconhref$="/hr" { pointer-events: none; }
a.iconhref$="/hr1" { pointer-events: none; }
a.iconhref$="/hr2" { pointer-events: none; }
a.iconhref$="/hr3" { pointer-events: none; }
a.iconhref$="/hr4" { pointer-events: none; }
/* ＃で始まるタグをラベル風にする */
atype="hashTag"{
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: #fff;
color: #f27e48;
font-size: 0.8em;
border: 1px solid #f27e48;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
atype="hashTag":hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}