settings
自分がよく使うプロジェクトのsettingsはこのページを参照するようになってる
ここを変えると全部変わる
インポート: @import "https://scrapbox.io/api/code/tkgshn-extension/settings/style.css";
List
code:stylexx.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-size: contain;
background-repeat: no-repeat;
}
code:style.css
.quick-launch .project-home::after {
display: block;
flex-shrink: 0;
height: 36px;
aspect-ratio: 4 / 3;
/* margin-left: 6px; */
margin-left: 10px;
content: "";
background-repeat: no-repeat;
background-size: contain;
}
code:style.css
.scrollTable { overflow-x: scroll; }
.scrollTable:not(.scrollTableBottom)::-webkit-scrollbar { display: none; }
.scrollTable:not(.scrollTableBottom) {
-ms-overflow-style: none;
scrollbar-width: none;
}
ピン留めされたページを独立した段に表示する
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
薄く表示 [( 薄く表示] で出ます
code:style.css
.deco-\( {
opacity: 0.5;
}
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: 111%;
position: absolute;
left: -49px;
border-top: 1px lightgray solid;
}
吹き出し
code:style.css
/* フキダシ記法版 */
.line:not(.cursor-line) .deco-\{ {
display: inline-block; position: relative; max-width: calc(100% - 4em);
line-height: 1; color: #FFF !important; background-color: rgba(107, 177, 148, 0.85); padding: 3px 4px 2px 5px; margin-left: .6em;
border-radius: .4em; border-bottom-left-radius: 0 }
.line:not(.cursor-line) .deco-\{::after {
display: block; /* reduce the damage in FF3.0 */
position: absolute; bottom: 0; left: -0.45em;
width: 0; content: '';
border-width: 0 0 .5em .5em; border-style: solid; border-color: rgba(107, 177, 148, 0.85) transparent }
画像を均等に並べる
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image {
width: 150px;
height: 150px;
object-fit: cover; /* 🖐 */ }
/* 太字記法と組み合わせて列数を変える */
.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) }
width: 150px;
height: 150px;
object-fit: cover; /* 🖐 */ }
/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden } .line .deco-\| img.image, .line class^="level" .deco-\| img.image { margin: .2em } 辿ったページを明示的に
code:style.css
margin: 0 3px;
}
font-weight: bold;
pointer-events: none;
cursor: default;
}
画像のサイズを*で変更する
code:style.css
.level-1 img {
border: dashed 1px silver;
width: 150px;
height: 150px;
object-fit: cover; /* 🖐 */
}
.level-2 img { width: 33.3%; max-height: none; }
.level-3 img { width: 50%; max-height: none; }
.level-4 img { width: 66.7%; max-height: none; }
.level-5 img { width: 83.3%; max-height: none; }
.level-6 img { width: 100%; max-height: none; }
code:style.css
.navbar .navbar-menu>li.stream-btn,
.navbar .navbar-menu>li.stream-btn.hidden-xs
{ display: block !important; }
外部リンクを区別する
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;
}