settings
https://gyazo.com/2b64335d2d5068a4c2b8db07b5604d68
スマホ向けのバーがかっこいい
code:style.css
@import '/api/code/motoso/吹き出し記法/style.css';
このstyle.cssはこのページのトップにないと有効にならない
@importがあるからだね
abc 太字にならない...
abcいやちょっと太いな?
abc
なぜ?
mac Chromeだと太字にならない
iOSでは太字になる
太字になるフォントとならないフォントがある
太字になる
太字にならない
太字ががたがたになる
code:style.css.disable
font-family: helvetica, arial, "Noto Sans JP", sans-serif ;
}
インライン引用記法
code:style.css
.deco-\" {
border-radius: .2em;
padding: 0 .4em;
background-color: rgba(128,128,128,0.1);
font-size: 95%;
/* font-style: italic; */
}
.line:not(.cursor-line) .deco-\"::before {
font-size: 85%;
/* font-family: 'FontAwesome'; */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f10d';
position: relative;
top: -0.5em;
left: -0.2em;
}
code:style.css
.deco-\% {
background-color: rgba(120, 172, 255, 0.15);
padding: 0.1em 0.2em 0.1em 0.2em;
}
.scrapcalc_result {
font-style:italic;
font-weight:bold;
background-color:yellow;
}
code:style.css
color: gray;
}
content: "(表記ゆれ)";
font-size: 10px;
vertical-align: bottom;
}
privateのScrapboxのリンクを張っておきたいときに使う
https://gyazo.com/6a2dfd0d7ed019ccb7e549f168beaa2a
code:style.css
[./ [/takker/リンクを出典アイコンにするUserCSS]]
code:style.css
.line .deco-\. {
font-size: .8em;
position: relative;
top: -0.5em;
}
.line:not(.cursor-line) .deco-\. a:is(.page-link:not(.icon), .link) span:not(.empty-char-index) + span + span ~ span {
display: inline-block;
width: 0;
text-indent: -9999px;
}
.line:not(.cursor-line) .deco-\. .page-link:not(.icon) span.empty-char-index ~ span.char-index {
display: inherit;
width: inherit;
text-indent: inherit;
}
.line:not(.cursor-line) .deco-\. a.page-link:not(.icon) span.empty-char-index + span::before {
content: "#";
}
.line .deco-\. :is(.page-link:not(.icon), .link)::before {
display: inline-block;
min-width: 1.15em;
padding-left: 1px;
/* padding: 0 1px; */
font-family: "Font Awesome 5 Free","Font Awesome 5 Brands";
text-align: center;
vertical-align: middle;
font-weight: 900;
content: "\f02d";
}
/* 斜体を取り消す */
.line .deco-\..deco-\/ {
font-style: initial;
}
.line .deco-\..deco-\/ :is(.page-link:not(.icon), .link)::before {
font-weight: 400;
content: "\f15c";
}
プロジェクトタイトル
2024-04-17にCSSが変更されて壊れた
code:style.css
/* Project description */
.project-home > .title:after {
content: " - Long-term greedy";
white-space: pre;
font-size: 0.7em;
}
背景の画像を変える
code:style.css
body {
}
/* 付箋の折返しを背景と同色に */
.grid li.page-list-item a .pin {
}
PC版ブランドアイコンの変更
code:style.css
/* Overwrite the brand icon */
.brand-icon {
width: 36px;
height: 36px;
background-color: white;
background-position: center;
background-size: cover;
border: 4px solid transparent;
border-radius: 50%;
}
.brand-icon {
background-image: var(--logo-url);
background-repeat: no-repeat;
}
.brand-icon svg {
display: none;
}
運用停止中
[* ]<-これに蛍光のラインを足す
ナビゲーションの色を変える
code:style.css
.navbar {
background: linear-gradient(90deg, rgba(120, 172, 255, 0.7), rgba(97, 114, 232, 0.7) 20% 40%, rgba(129, 107, 255, 0.7) 60%);
}
テロメアの色を変更
code:style.css
.line .telomere .telomere-border.unread {
}
#で始まるタグをラベル風にする
Scrapboxがラベル風になっていないのは、おそらく文脈の中の単語をハッシュタグにすることが価値がある使い方だと想定しているから
code:style.css
/* #で始まるタグをラベル風にする */
display: inline-block;
padding: 2px 8px;
margin: 4px;
background-color: rgba(12, 12, 13, 0.1);
font-size: 0.8em;
border-radius: 3px;
transition: .1s;
-webkit-transform: scale(1);
transform: scale(1);
}
background: rgba(97, 114, 232, 0.3);
}
background: rgba(97, 114, 232, 0.4);
}
行頭のドットを薄く
code:style.css
.line .indent-mark .dot {
top: 11px;
width: 6px;
height: 3px;
}