Settings
外部リンク区別
code:style.css
/* 外部リンクにiconをつける */
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after {
font-family: 'Font Awesome 5 Free';
content: ' \f35d';
font-weight: 900;
display: inline-block;
}
画像の外周に影をつける
code:style.css
.line .image{
box-shadow: 4px 4px 12px -4px #000; }
インデントへ交互に色を付ける
code:style.css
.indent-mark {
height: 100% !important;
}
.indent-mark .pad {
height: 100% !important;
overflow: unset !important;
}
.indent-mark span:nth-child(2n+2) .pad {
}
行頭のドットを薄くする
code:style.css
.line .indent-mark .dot {
top: 11px;
width: 6px;
height: 3px;
}
のびのびドロップダウン
code:style.css
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%;
max-height: calc(100vh - 130px) !important;
overflow-y: auto;
}
ピン留めされたページを独立した段に表示する
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
カード表示のサムネイル画像を枠内におさめる
code:style.css
.grid li.page-list-item a .icon {
position: relative;
padding: 0;
margin: auto;
}
.grid li.page-list-item a .icon img {
display: table-cell;
width: auto;
max-height: 100px;
max-width: 90%;
vertical-align: middle;
border-radius: 3px;
}
二重括弧による強調をマーカーっぽくする
code:style.css
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) { background: linear-gradient(transparent 10%, #ABFF4F 25%, #ABFF4F 70%, transparent 90%) }
表示切替用
ホバーでグラデーション消失
code:style.css
.line strong:not(class):hover { background: linear-gradient( to right,
transparent,
transparent 50%
) 0% center / 400% auto ; /* グラデーション */
padding: 0.1em 0.2em 0.1em 0.2em;
animation: marker 10s linear infinite;
animation-direction: reverse;
}
@keyframes marker {
to { background-position-x: 400%; }
}
表示テスト
画像を並べて表示する記法
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.line .level-1 .deco-\| > span { width: calc(100%/1) }
.line .level-2 .deco-\| > span { width: calc(100%/2) }
.line .level-3 .deco-\| > span { width: calc(100%/3) }
.line .level-4 .deco-\| > span { width: calc(100%/4) }
.line .level-5 .deco-\| > span { width: calc(100%/5) }
.line .level-6 .deco-\| > span { width: calc(100%/6) }
.line .level-7 .deco-\| > span { width: calc(100%/7) }
.line .level-8 .deco-\| > span { width: calc(100%/8) }
.line .level-9 .deco-\| > span { width: calc(100%/9) }
.line .level-10 .deco-\| > span { width: calc(100%/10) }
.line class^="level" .deco-\| img.image { object-fit: cover; width: 100%; height: 100% } /* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden } .line .deco-\| img.image, .line class^="level" .deco-\| img.image { margin: .2em } ページカードのタイトルを2行に納める
code:style.css
li.page-list-item.grid-style-item div.title {
-webkit-line-clamp: 2;
}
4色マーカー
code:style.css
.deco-\! {
}
.deco-\% {
}
.deco-\# {
}
.deco-\~ {
}
テスト1
テスト2
テスト3
テスト4
反転色から薄い色の黒文字に変更
PrivateのScrapboxリンクを張る時
code:style.css
sectionを水平線で区切る
code:style.css
.app:not(.presentation) .line.section-title:not(.line-title) {
position: relative;
}
.app:not(.presentation) .line.section-title:not(.line-title) .text {
padding-top: 1em;
}
.app:not(.presentation) .line.section-title:not(.line-title):before {
content: "";
display: block;
width: relative;
position: relative;
border-top: 1px lightgray solid;
}