settings
code:style.css
/*appearance*/
@import url('./pin.css');
@import url('./centered thumbnail.css');
行頭に---を入れるだけでセパレーターになるUserCSS
code:style.css
.line:has(.c-0data-char="-"):has(.c-1data-char="-"):has(.c-2data-char="-"){
display: flex;
align-items: center;
&:not(.cursor-line){
height: 28px;
&:after{
flex-grow: 1;
content: "";
border-top: 1px solid #afafaf;
}
.c-0data-char="-",
.c-1data-char="-",
.c-2data-char="-"{
display:none;
}
}
}
ページのページタイトル画像をFitさせる
code:centered thumbnail.css
.grid .icon img {
height: 100%;
object-fit: contain;
}
スマホ用Scrapboxでスマホ表示3列にする設定
code:style.css
@media screen and (max-width: 767px) {
.related-page-list ul.grid,
.page-list ul.grid{
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.iframe-video-player iframe {
max-height: 47vw;
}
}
タグを目立たせるやつ
code:style.css
.line atype="hashTag".page-link {
border: 1px solid !important;
padding: 0.1em 0.6em !important;
margin: 0 !important;
text-decoration: none !important;
border-radius: 6px !important;
}
/* ホバー時のスタイル */
.line atype="hashTag".page-link:hover {
background-color: #f4f4f4 !important; */
}
ピン止めとピン止めしてない.page-list-itemの間に線を引く
code:pin.css
a .pin{
display: none;
}
.page-list .grid {
position: relative;
}
.page-list-item.pin + .page-list-item:not(.pin):not(.list-style-item){
grid-column-start: 1;
position: static;
&:before{
content: "";
position: absolute;
border-top: solid 1px #afafaf;
width: 100%;
margin-top: -23px;
@media screen and (max-width: 767px){
margin-top: -14px;
}
}
}
li.pin:not(:has(~ li.pin)) {
margin-bottom: 30px;
@media screen and (max-width: 767px){
margin-bottom: 20px;
}
}
クレジット用のキャプション記法
code:style.css
.line:has(.deco-\|) {
font-size: 12px !important;
line-height: 1.5em !important;
color: #1B1B1B;
background-color: #F2F2F2;
padding: 2px 8px 2px 8px;
position: relative;
}
.line:has(.deco-\|)::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: #BBB;
}
変数
code:style.css
:root {
--card-hover-bg: rgba(0, 0, 0, 0.02);
--new-button-vertical-color: rgba(0, 0, 0, 0.1);
--new-button-horizontal-color: rgba(0, 0, 0, 0.1);
--new-button-bg: transparent;
--new-button-hover-bg: var(--search-form-bg, rgba(255, 255, 255, 0.15));
--new-button-active-bg: var(--search-form-bg, rgba(255, 255, 255, 0.3));
--diary-color: #97e600;
--person-color: #00e6e6;
--indent-color: #e6e6e6;
}
日報っぽいタイトルのページカードだけ違うCSSを割り当てる
code:style.css
.page-list-itemdata-page-links~="'映像作品'" {
box-shadow: 0 0 0 1px var(--person-color);
}
.page-list-itemdata-page-links~="'Project'" {
box-shadow: 0 0 0 1px var(--project-color);
}
.page-list-itemdata-page-links~="'雑記'" {
box-shadow: 0 0 0 1px var(--diary-color);
}
.page-list-itemdata-page-links~="'人物'" {
box-shadow: 0 0 0 1px var(--person-color);
}
---
https://scrapbox.io/files/69b704b3b9e150750ae383fc.png