settings
https://scrapbox.io/files/64846e905364c600212f28b0.png
code:style.css
@import '/api/code/cerd/_CSS_related-page-list_left/style.css';
@import '/api/code/cerd/_CSS_Title2/style.css';
@import '/api/code/cerd/_CSS_Grid/style.css';
@import url("https://fonts.googleapis.com/css?family=Kosugi+Maru|M+PLUS+Rounded+1c");
位置
code:style.css
@media screen and (min-width: 1261px) {
:root {--margin-side: calc(50vw - 592px);}
}
@media screen and (min-width: 992px) and (max-width: 1260px) {
:root {--margin-side: 38px;}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
:root {--margin-side: 23px;}
}
@media screen and (max-width: 767px) {
:root {--margin-side: 8px;}
}
フォント
code:style.css
.grid li ,.quick-launch .project-home .title {
font-family: "UD デジタル 教科書体 NK-B", "Roboto",Helvetica,Arial,"Hiragino Sans",sans-serif;
}
.editor, .stream {
font-family: "UD デジタル 教科書体 NK-B", "MotoyaLMaru W3 mono", "Kosugi Maru", "Roboto",Helvetica,Arial,"Hiragino Sans",sans-serif;
}
元のThemeはDefaultのLight
code:style.css
body{
background-color: #F4F4F0;
}
.new-button {
background-color: var(--new-button-bg, #CCC);
}
code:style.css
span.kamon.kamon-caret-down {
display: none;
}
.quick-launch .flex-box .flex-item .left-box {
position: fixed;
top: 0;
left: calc(var(--margin-side) + 28px); /* 変数は上記で設定したもの */
color: white;
z-index: 1000;
}
.quick-launch .project-home, .quick-launch .project-home .title {
color: #fff;
}
ナビゲーションバーのScrapboxアイコンサイズを小さくする
code:style.css
.brand-icon {
width: 25px;
height: 25px;
}
code:style.css
.quick-launch .project-home {
padding: 0 0 0 10px;
}
.quick-launch .project-home .title::after {
content: "";
margin-left: 10px;
padding: 5px 0px 5px 50px;
background-image: url("https://daiiz-apps.appspot.com/today/jp.svg");
background-size: contain;
background-repeat: no-repeat;
}
ページタイトル
code:style.css
.line.line-title .text {
border-bottom: solid 3px #ddd ;
padding-bottom: 0;
margin-bottom: 28px; /* 枠下 */
text-align: center; /* 中央寄せ */
}
、で終わるカードを半透明に
code:style.css
.grid li.page-list-item > ahref^="/cerd/"href$="%E3%80%81" {
opacity: .2;
}
表示しない
code:style.css
.page-list .grid li.page-list-itemdata-page-title="settings",
.page-list .grid li.page-list-itemdata-page-title^="_CSS"
{
display: none;
}
箇条書き
code:style.css
/* バレットを少し薄くする */
.line .indent-mark .dot {
top: 12px;
width: 6px;
height: 4px;
/* background-color: #c9c9c9; */
}
/* バレットの色をだんだん薄くする */
.line .indent-mark .c-0 + .dot {
background-color: rgba(0,0,0,.6)
}
.line .indent-mark .c-1 + .dot {
background-color: rgba(0,0,0,.5)
}
.line .indent-mark .c-2 + .dot {
background-color: rgba(0,0,0,.4)
}
.line .indent-mark .c-3 + .dot {
background-color: rgba(0,0,0,.3)
}
.line .indent-mark .c-4 + .dot {
background-color: rgba(0,0,0,.2)
}
.line .indent-mark .c-5 + .dot {
background-color: rgba(0,0,0,.1)
}
.line .indent-mark .c-6 + .dot {
background-color: rgba(0,0,0,.05)
}
.line .indent-mark .c-7 + .dot {
background-color: rgba(0,0,0,.05)
}
外部リンク
code:style.css
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after,
.line span > a.page-linktarget="_blank"::after {
font-family: 'Font Awesome 5 Free';
content: ' \f360';
font-weight: 900;
font-size: 0.9rem;
padding-right: 0.5rem;
display: inline-block;
}
追加
code:style.css
.container .page-list ul.grid {
grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
}
@media screen and (min-width: 768px) {
.links-container .grid li {
aspect-ratio: 1/.15;
}
}
.links-container .grid li {
aspect-ratio: 1 / .2;
}
/* メニュー部分 */
@media screen and (min-width: 768px) {
.related-page-list {
width: initial;
}
}
.related-page-list ul.grid {
gap: initial;
}
.related-page-list .links-container {
gap: 20px;
}
@media screen and (min-width: 768px) {
.related-page-list .grid li.relation-label:is(.links,.project-links,.empty-links) {
min-height: 33px;
}
}
.related-page-list .toolbar .page-sort-menu {
flex-direction: row-reverse;
}
@media (min-width: 768px) {
.navbar .row:has(.col-search):has(.user-name) {
grid-template-columns: 2fr 1.5fr minmax(0, 1fr);
}
}