settings
/sno2wmanや/Bookbinding-Archiveなどを参考に
リンク
code:style.css
@import "../../road2noma/破線で下線なリンクデザイン/style.css";
lean-logic
ページ内タイル
code:css
@import "https://scrapbox.io/api/code/blu3mo-public/関連ページ一覧を横に移動させる/style.css";
フォント
code:style.css
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Xanh+Mono:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Antique+B1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rampart+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;600;700;800&display=swap');
code:style.css
:root{
--accent-color0: rgba(12, 12, 12, 1);
--accent-color1: white; /** rgba(0, 0, 0, .8); rgba(80, 73, 227, 1); rgba(226, 0, 46, 1); **/
--accent-color2: rgba(90, 83, 237, .6);
--accent-color3: rgba(93, 93, 93, 1);
--accent-color01: rgba(160, 160, 160, 1);
--bg-color: rgba(220, 220, 220, 1);
--text-color: rgba(0, 0, 0, .8);
--code-bg: rgba(255, 255, 255, .2);
--label_font_size: 16px;
--label_font_weight: 800;
--label_font_len: 12px;
--text-font: 'Shippori Mincho B1', serif !important;
--text-font2: 'Shippori Antique B1', sans-serif !important;
/*--text-font: 'Shippori Mincho B1', serif;*/
--label-font: 'Fira Code', monospace !important;
--code-font:'Fira Code', monospace !important;
}
.line, .page-list-item .title {
font-family: var(--text-font);
}
.line {
color: var(--text-color);
}
タイトル
code:style.css
.project-home .title {
padding: 8px 12px 8px 12px;
font-size: 14px;
font-family: 'Noto Sans JP', sans-serif;
color: var(--accent-color01);
background: var(--accent-color1);
}
ページタイトル
code:style.css
@media screen {
.app:not(.presentation) .line.line-title .text {
color: #000;
font-weight: 500;
font-family: var(--text-font2);
line-height: 1.2 !important;
padding-bottom: 1.2rem;
border-bottom: 10px double var(--accent-color1);
/*border-bottom: 1px solid rgba(0,0,0,.3);*/
}
}
背景
code:style.css
body, .page{
background-color: var(--bg-color);
box-shadow: unset
}
.code-body {
background-color: var(--code-bg);
font-family: var(--code-font);
}
navbar
code:style.css
.navbar-default {
/** background-image:url('https://upload.wikimedia.org/wikipedia/commons/d/d1/Mikhail_Vrubel_-_Flying_Demon_-_Google_Art_Project.jpg');**/
background-size: cover;
background-position: center;
}
テロメア
code:style.css
.line .telomere .telomere-border,
.line .telomere .telomere-border.unread {
border-color: rgba(255,255,255,.2);
width: 2px
}
.line .telomere .telomere-border.unread.updated-after-load {
border-color: rgba(255,255,255,1);
width: 2px
}
タイル
code:style.css
.grid li.page-list-item a {
background: var(--bg-color);
border-radius:0px;
box-shadow:none;
border-bottom: 10px double var(--accent-color1);
}
body {--card-title-bg:none}
インデント
/customize/インデントレベルをわかりやすくする
/nishio/インデント表示
/villagepump/borderでインデントに縦線を表示するUserCSS
code: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: 4px solid rgba(255,255,255,.8);
}
/*
.indent-mark {
height: 100% !important;
}
.indent-mark .pad {
height: 100% !important;
overflow: unset !important;
}
.indent-mark span:nth-child(2n+1):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
background: rgba(255,255,255,.2);
}
*/
あ
あ
あ
あ
あ
あ
あ
a
あ
あ
あ
あ
あ
ブレット
code:style.css
.line .indent-mark .dot {
top: 12px;
width: 6px;
height: 6px;
background-color: white;
}
付箋
/teamlab-frontend/付箋を追加するUserCSS
code:style.css
.deco-\&{
/** border-left: var(--accent-color1) solid .6em;**/
padding: 0px 8px 0px 22px;
color: var(--accent-color01);
background: var(--accent-color1);
font-weight: 500;
font-size: 402;
font-family: var(--text-font2);
/**background: linear-gradient(transparent 80%, rgba(226, 0, 46, .2) 20%);**/
}
.deco-\&::before{
content: "&";
color: var(--accent-color01);
position: relative;
right: var(--label_font_len);
font-size: var(--label_font_size);
font-family: var(--label-font);
font-weight: 500;
}
.deco-\%{
/** border-left: var(--accent-color0) solid .6em; **/
padding: 0px 12px 0px 12px;
color: var(--accent-color0);
font-weight: 500;
font-family: var(--text-font2);
/**background: linear-gradient(transparent 80%, rgba(0, 0, 0, .2) 20%);**/
}
.deco-\%::before{
content: "%";
color: var(--accent-color0);
position: relative;
right: var(--label_font_len);
font-size: var(--label_font_size);
font-family: var(--label-font);
font-weight: 800;
}
.deco-\!{
/** border-left: var(--accent-color3) solid .6em; **/
padding: 0px 12px 0px 12px;
color: var(--accent-color2);
font-weight: 500;
font-family: var(--text-font2);
/**background: linear-gradient(transparent 80%, rgba(2, 0, 106, .2) 20%);**/
}
.deco-\!::before{
content: "!";
/** color: rgba(44, 41, 255, 1); **/
color: var(--accent-color2);
position: relative;
right: var(--label_font_len);
font-size: var(--label_font_size);
font-family: var(--label-font);
font-weight: 500;
}
.deco-\#{
padding: 0px 12px 0px 12px;
color: var(--accent-color0);
font-weight: 500;
font-family: var(--text-font2);
background: linear-gradient(transparent 70%, rgba(255, 255, 255, .4) 70%);
}
.deco-\#::before{
content: "#";
color: var(--accent-color1);
position: relative;
right: var(--label_font_len);
font-size: var(--label_font_size);
font-family: var(--label-font);
font-weight: 500;
}
付箋
付箋
付箋
付箋
中央揃え
code:style.css
.line:not(.cursor-line) .deco-\' {
position: absolute;
width: 100%;
text-align: center;
}
$ \{g|\forall_{x \in G} \lbrack gxg^{-1} = x\rbrack\}
$ \LaTeX
code:style.css
.line.formula-line .dot {
display: inherit;
}
$ \Box \exists x. G(x)
ページ
code:style.css
.page{box-shadow:none;}
のびのびドロップダウン
/scrasobox/のびのびドロップダウン
code:style.css
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%;
max-height: calc(100vh - 130px) !important;
overflow-y: auto;
}