settings
https://icongr.am/material/cog.svg?size=24&color=808080
全体
code:style.css
@import url('https://fonts.googleapis.com/css?family=Fira+Sans|Kosugi&display=swap');
.line, .grid li {
font-family: 'Fira Sans', 'Kosugi', sans-serif;
}
カード
code:style.css
.grid li.page-list-item a {
background-color: #fefefe;
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, .05);
border-radius: 2px;
}
data-hover-visible .grid li.page-list-item a:hover {
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, .02);
}
.grid li.page-list-item a .header {
border: 0px;
}
.grid li.page-list-item a .hover {
background-color: rgba(0, 0, 0, .025);
transition: .1s;
}
.grid li.page-list-item a .icon img {
display: block;
max-width: 100%;
max-height: 100px;
object-fit: contain;
margin: 0 auto;
}
.grid li.page-list-item.pin::after {
display: none;
}
アイコン記法でページのジャンル分類
code:style.css
.page-list-item .description img.inline-icon {
display: inline-block;
float: left;
height: 3em;
width: 3em;
overflow: hidden;
margin-right: .5em;
object-fit: cover;
}
ピン留め
code:style.css
.grid li.page-list-item a .pin {
position: absolute;
height: 10px;
width: 10px;
top: 7px;
right: 7px;
border-radius: 50%;
background: #aaa;
}
ページ
code:style.css
.page {
box-shadow: 0 2px 2px 1px rgba(0, 0, 0, .05);
border-radius: 4px;
}
.line.line-title {
font-size: 1.1em;
}
文字装飾
code:style.css
.deco-/ {
background-color: #fefefe;
}
.line .quote { /*引用*/
font-style: italic;
background-color: #eeeeef;
display: block;
border-left: solid 1px #a0a0a0;
padding-left: .5em;
margin-left: .5em;
}
.line .indent-mark .dot { /*番号なしリスト*/
right: 9px;
top: 13px;
width: 4px;
height: 1px;
border-radius: 0;
background-color: #555;
}
.line img.icon { /*アイコン*/
padding: 0 0.2em;
vertical-align: middle;
top: -0.1em;
height: 1.2em;
}
.line img.strong-icon {
vertical-align: baseline;
}
.line.permalink { /*行リンク*/
background-color: rgba(234,218,74,0.5);
}
画像 /scrasobox/画像を並べて表示 #scrasobox
code:style.css
.line .strong-image {
padding: .5em;
margin: 3px auto;
display: block;
background-color: #fff;
}
/* 画像を並べて表示 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden }
.line .deco-\| img.image, .line class^="level" .deco-\| img.image { margin: .2em }
ポップアップメニュー /scrasobox/ポップアップメニューをさっぱりさせてみる #scrasobox
code:style.css
/* ポップアップメニューの修飾ボタンをアイコン化 */
.popup-menu .button-container .button.strong-button > strong,
.popup-menu .button-container .button.italic-button > i,
.popup-menu .button-container .button.strike-button > strike {
display: inline-block; width: 0; text-indent: -9999px }
.popup-menu .button-container .button.link-button::after,
.popup-menu .button-container .button.strong-button::after,
.popup-menu .button-container .button.italic-button::after,
.popup-menu .button-container .button.strike-button::after {
font: 900 100%/normal 'Font Awesome 5 Free';
display: inline-block; min-width: 16px; text-align: center }
.popup-menu .button-container .button.strong-button::after { content: '\f032' }
.popup-menu .button-container .button.italic-button::after { content: '\f033' }
.popup-menu .button-container .button.strike-button::after { content: '\f0cc' }
/* ポップアップメニューのボタン周りの線を消す */
.selections .popup-menu .button-container .button:not(:first-of-type) { border: 0 }
Cosenseでネタバレに配慮したい
code:style.css
.deco-\#{
background-color: var(--page-text-color);
}
.line.cursor-line .deco-\#, .deco-\#:hover {
background-color: inherit;
}