GLOXINIA Theme
#Homeworks #Web #2022
https://gyazo.com/7a8f59b9ee7fd82f76940d12977a8949
Scrapbox の見た目を全体的に変更する UserCSS
Minimal Theme を override する
このプロジェクトの settings を見ると使い方が分かりやすい
テーマ全体を import して Theme Variables を必要に応じて書き換える
テーマ
Minimal Theme
code:style.css
@import '/api/code/gloxinia/Minimal_Theme/style.css';
Theme Variables (必要に応じてプロジェクトごとに書き換える)
code:style.css
:root {
--brand-bg-color: #6b7280; /* gray-500 */
--brand-text-color: #3b82f6; /* blue-500 */
--border-color: #d1d5db; /* gray-300 */
}
Override Variables (Minimal Theme を override する)
code:style.css
:root {
--body-bg: white;
--relation-label-links-text: black;
--empty-page-link-color: #ef4444; /* red-500 */
--empty-page-link-hover-color: #ef4444; /* red-500 */
/* --brand-bg-color */
--navbar-bg: var(--brand-bg-color);
--relation-label-links-bg: var(--brand-bg-color);
--telomere-unread: var(--brand-bg-color);
/* --brand-text-color */
--card-description-link-color: var(--brand-text-color);
--page-link-color: var(--brand-text-color);
--page-link-hover-color: var(--brand-text-color);
}
カード
カードいっぱいにサムネを詰める
code:style.css
.grid li.page-list-item a .hover {
z-index: 2;
}
.grid li.page-list-item a .header {
position: absolute;
z-index: 1;
padding: 0.5em;
background-color: rgba(255, 255, 255, 0.8); /* テーマに合わせて調整してください */
backdrop-filter: blur(4px);
}
.grid li.page-list-item a .icon {
position: absolute;
width: 100%;
height: 100%;
padding: 0;
}
.grid li.page-list-item a .icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* (optional) カード上部を非表示にする */
.grid li.page-list-item a .header {
border-top: none;
}
.grid li.page-list-item a .icon {
padding: 0;
}
カードの枠の見た目を変える
code:style.css
.grid li.page-list-item a {
border: 1px solid var(--border-color);
box-shadow: none;
}
.grid li.page-list-item a:hover {
box-shadow: none !important;
}
カードを真四角にする
code:style.css
.grid li.page-list-item a {
border-radius: 0;
}
ピン止めされたカード
ピン止めされたカードを段分けする
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
ピン止めされたカードの印を非表示にする
code:style.css
.grid li.page-list-item a .pin {
display: none;
}
ピン止めされたカードの枠の見た目を変える
code:style.css
.grid li.page-list-item.pin a {
border: 1px solid var(--brand-bg-color);
}
ページ
ページの枠の見た目を変える
code:style.css
.page {
border: 1px solid var(--border-color);
box-shadow: none;
}
ページを真四角にする
code:style.css
.page {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
タグに背景色をつける
code:style.css
atype="hashTag" {
color: black !important;
background-color: var(--brand-bg-color);
font-weight: bold;
padding: 4px 8px;
}
画像の枠に線をつける
code:style.css
.lines img:not(.icon) {
border: 1px solid var(--border-color);
}
テーブルの見た目を変える
code:style.css
/* border */
.table-block .cell {
border-right: solid 1px var(--border-color);
border-bottom: solid 1px var(--border-color);
}
.table-block .cell:first-child {
border-left: solid 1px var(--border-color);
}
.section-title + .line .table-block .cell {
border-top: solid 1px var(--border-color);
}
/* header */
.section-title + .line .table-block .cell {
font-weight: bolder;
text-align: center;
}
/* background color */
.table-block .cell:nth-child(odd),
.table-block .cell:nth-child(even) {
background-color: white;
}