settings
こうして他人のCSSを盗み見て弄ってきたので、自settingsも詳しくない人が読んだ時のためになるべく辿りやすくしています。
フォント
code:style.css
font-family: "Roboto", "Yu Gothic", sans-serif;
font-weight: 400;
font-style: normal;
}
/* ホームで特定ページのタイトルに適用 */
a .content .header .title {
font-family: "Space Mono", monospace;
font-weight: 400;
font-style: normal;
}
}
a .content .header .title {
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 400;
font-style: normal;
}
}
code:font-off
&family=IBM+Plex+Sans+JP
&family=Noto+Sans+JP:wght@400
&family=Noto+Serif+JP:wght@300
&family=Jost:wght@100..900
&family=BIZ+UDPMincho
&family=M+PLUS+1+Code:wght@300
&family=Roboto+Mono:ital,wght@0,250;1,250
font-family: "l-safe", "calibri", "Yu Gothic", "IBM Plex Sans JP", "Roboto", "Font Awesome 5 Free", "Font Awesome 5 Brands", sans-serif;
変数
code:style.css
:root {
--empty-page-link-color: #3cc2be !important; --empty-page-link-hover-color: #309b98 !important; 設定変数
code:style.css
--navbar-bgc: 11 17 36;
--bg-gradient: radial-gradient(ellipse at right bottom, rgb(11 17 108 / 0.8) 0%, rgb(11 17 108 / .3) 25%, rgb(11 17 108 / 0) 60%), linear-gradient(to top, rgb(11 17 36 / .2) 30%, rgb(11 17 36 / .4) 60%, rgb(11 17 36 / 1) 100%);
}
ライトモード
code:light.style.css
@media (prefers-color-scheme: light) {
:root {
--navbar-bgc: 238 238 238;
--bg-gradient: none;
}}
/* フォント調整 */
@media (prefers-color-scheme: light) {
font-family: "calibri", "Arial", "BIZ UDゴシック", "Yu Gothic", "Noto Sans JP", sans-serif;
font-weight: 400;
font-style: normal;
}
}
@media (prefers-color-scheme: light) {
}
@media (prefers-color-scheme: light) {
}
color: var(--text-clr);
}
画面
ホーム
code:style.css
.grid li.page-list-item a {
box-shadow: none;
background-color: var(--page-bgc);
}
.grid li.page-list-item a .pin {background: var(--body-bgc);}
/* ピン留めを段分け */
.page-list-item.pin + .page-list-item:not(.pin) {grid-column-start: 1;}
/* 非表示 */
/* ピン表示 */
.grid li.page-list-item a .pin {
position: absolute;
height: 12px;
width: 12px;
top: 0;
right: 0;
border-radius: 0 0 0 0px;
z-index: 2;
outline:solid 4px var(--pin-outline);
}
/* 空きスペースにバナー */
@media (min-resolution: 140dpi) { /* 13インチWUXGAで144dpi(OS拡大率150%) */
.page-list::before {
content: "こふ⧵ scrap"; /* バックスラッシュだと化けるのでU+29F5 */
position: absolute;
top: 5.9em;
right: 4.2%;
z-index: -1;
white-space: nowrap;
-webkit-text-stroke: 0.7px var(--text-clr);
text-stroke: 0.7px var(--text-clr);
color: transparent;
font-family: "calibri", "Yu Gothic", sans-serif;
font-size: 30px;
font-weight: bold;
font-style: italic;
}
}
code:home-off
body { max-width: 1920px; }
/* 一覧ズームアウト用 */
.container { max-width: none !important; }
/* lookdev風動く枠*/
.grid li.page-list-item a .hover {
border-image-slice: 1;
border-image-source: conic-gradient(from 0turn, var(--gradient-data));
animation: link-bg-conic-anim 4s linear 0s infinite reverse;
}
背景
code:style.css
body {
background-color: var(--body-bgc);
background-image: var(--bg-gradient);
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
本文
code:style.css
.page {
background-color: var(--page-bgc);
box-shadow: none;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
/* タイトル */
.line.line-title .text {
border-bottom: 1px solid var(--border);
padding-bottom: 1rem;
margin-bottom: 3rem;
}
/* テロメアをおとなしくする */
.line .telomere .telomere-border {
border-width: 0px 0px 0px 2.5px !important;
width: 0;
}
.unread {
}
メニューバー
code:style.css
/* 画面幅表示を消す */
.navbar .row {
max-width: 1400px;
margin-right: auto;
margin-left: auto;
}
/* 背景色 */
.navbar {
color: var(--text-clr);
background-color: rgb(var(--navbar-bgc) / .4);
}
/* 新規作成ボタン */
/* cosenseアイコン */
.brand-icon {
& path {
fill: var(--body-bgc);
stroke: var(--text-clr);
vector-effect: non-scaling-stroke;
transform: scale(.9);
transform-origin: 50% 50%;
}
}
code:menubar-off
.brand-icon {visibility:hidden;}
a.navbar-brand.dropdown-toggle::before {
content: "";
width: 30px;
height: 30px;
display: block;
position: absolute;
top: 4px;
left: 4px;
background-size: contain;
background-repeat: no-repeat;
}
検索メニュー
code:style.css
.search-form .form-group {
background-color: rgb(var(--navbar-bgc) / 0.97);
}
.search-form .form-group input:focus {
background-color: rgb(var(--navbar-bgc) / 0.97);
}
.search-form .form-group input:is(:focus, .for-mobile) {
background-color: rgb(var(--navbar-bgc) / 0.97);
}
.navbar-form .dropdown-menu a {
color: var(--text-clr);
}
.navbar-form .dropdown.open .dropdown-menu {
background-color: rgb(var(--navbar-bgc) / 0.97);
min-width: 100%;
max-height: calc(100vh - 100px);
overflow-y: auto;
}
code:searchmenu-off
ul.dropdown-menu>li.dropdown-item:has(a:focus) {
background-color: var(--page-bgc)
}
ul.dropdown-menu>li.dropdown-item>a:focus {
box-shadow: none;
color: var(--text-clr);
}
グローバルメニュー
code:style.css
.global-menu {
background-color: rgb(var(--navbar-bgc) / .97);
}
.global-menu li a {
color: var(--font-col);
}
.global-menu li a.updated, .global-menu li a.highlight {
border-left: 2px solid var(--global-menu-highlight);
}
.global-menu .project-list-tab a.active {
color: var(--text-color);
background-color: var(--page-bgc);
}
.global-menu li.project-list-filter a:hover {
background-color: var(--page-bgc);
}
.project-list-tab a {
color: var(--font-color);
}
関連ページ
code:style.css
.related-page-list .toolbar .related-page-list-search:focus-within {
background-color: var(--related-bg);
caret-color: var(--text-clr);
}
.related-page-list .toolbar .related-page-list-search:focus-within .fa-search {
color: var(--related-clr);
}
infobox
code:infobox.css
display: none
}
できてない
code:midashi.css
.midashi-pagemenu-item {
color: var(--font-color);
background-color: var(--page-bgc);
}
できてない
テキスト
引用
code:style.css
.line .quote {
display: block;
background-color: var(--quote-bg);
}
code:コードブロック
code:style.css
.line span.code-block .code-block-start {
padding: 2px 4px 2px 4px;
}
table:テーブル
A1 A2 A3
B1 B2 B3
C1 C2 C3
code:style.css
.line span.table-block .table-block-start {
font-size: 1.1em;
padding: 2px 4px 2px 4px;
background-color: var(--table-bg);
}
.line span.table-block .table-block-start a {
color: var(--text-clr);
}
/* セル間に枠線 */
.table-block .cell {
/* 全てのセルの右と下 */
}
.table-block .cell:first-child {
/* 1列目のセルの左 */
}
.section-title + .line .table-block .cell {
/* 1行目のセルの上 */
}
.section-title + .line .table-block .cell {
/* 1行目を太字、中央揃え */
font-size: smaller;
font-weight: bolder;
text-align: center;
font-family:游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', sans-serif;
}
カーソルハイライト
code:style.css
.cursor-line {
background-color: var(--cursor-bg);
}
1
2
3
code:style.css
/* 表示 */
.line .indent-mark .dot {
display: block;
position: absolute;
right: 10px;
top: 13px;
width: 2px;
height: 2px;
border-radius: 0;
}
.indent-mark {
height: 100% !important;
}
.indent-mark .pad {
height: 100% !important;
overflow: unset !important;
}
/* 列の右に縦線*/
.indent-mark span:nth-child(6n+1):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad,
.indent-mark span:nth-child(6n+2):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad,
.indent-mark span:nth-child(6n+3):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad,
.indent-mark span:nth-child(6n+4):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad,
.indent-mark span:nth-child(6n+5):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad,
.indent-mark span:nth-child(6n+6):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 1.5px solid var(--indent-border);
}
code:indent-off
/* 列を色分け*/
.indent-mark span:nth-child(2n+2) .pad {background: #262830;} code:style.css
display: inline-block;
padding: 0.8px 6px;
margin: 0 8px 10px 0;
background: var(--quote-bg);
font-size: 0.9em;
border: 1.5px solid var(--indent-border);
border-radius: 4px;
transition: .3s;
transform: scale(1);
-webkit-transform: scale(1);
}
color: var(--text-clr);
border: 1.5px solid var(--border);
transform: scale(1);
-webkit-transform: scale(1);
}
ポップアップメニュー
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 }
強調画像を最大幅表示
code:style.css
.strong-image {width: 100%;}
アイコンの左右に少し隙間を入れるkofu.icon
code:style.css
.line img.icon:not(.strong-icon):first-child { margin-left: 0.25em; }
.line img.icon:not(.strong-icon):last-child { margin-right: 0.25em; }
記法
二重括弧による強調をマーカーっぽくする
code:style.css
.line strong:not(class) { color: var(--text-color);
background: linear-gradient(transparent 75%, rgb(255 255 102 / .6) 25%);
}
文字色
code:style.css
.line:not(.cursor-line) .deco-\! {color: #dc322f;} .line:not(.cursor-line) .deco-\% {color: #2b2c2e;} 補集合
code:style.css
.line:not(.cursor-line) .deco-\# {text-decoration: overline;}
文中で引用
code:style.css
.line:not(.cursor-line) .deco-\" {
background-color: rgb(128 128 128 / .1);
border-radius: .2em;
padding: 0 .4em;
font-size:95%;
font-style: italic }
.line:not(.cursor-line) .deco-\"::before {
font-family: 'Font Awesome 5 Free';
font-size:85%;
font-weight: 900;
content: '\f10d';
vertical-align: super }
code:style.css
.line:not(.cursor-line) .deco-\) {
display: inline-flex;
flex-direction: column-reverse;
}
.line:not(.cursor-line) .deco-\) > span:nth-child(1) {
display: inline-flex;
justify-content: space-around;
width: 100%;
font-size: 50%;
}
.line:not(.cursor-line) .deco-\) > span:nth-child(2) {
line-height: 0;
}
.line:not(.cursor-line) .deco-\) > span:nth-child(2) > a {
display: inline-flex;
justify-content: space-around;
width: 100%;
font-size: 100%;
pointer-events: none;
color: var(--text-clr);
}
黒塗り
code:style.css
.line:not(.cursor-line) .deco-\(:not(:hover) {
color:transparent;
background-color: var(--LetterToTheBlackWorld);
a.page-link {color: transparent;};
a.icon {visibility: hidden;};
img {filter: contrast(0);}
}
---水平線
code:style.css
&{
display: flex;
align-items: center;
text-align: center;
}
&:after{
flex-grow: 1;
content: "";
border-top: 1px solid var(--border);
}
:not(.curosr-line) &{
height:28px;
}
}
.line:not(.cursor-line) span.char-index{
display:none;
}
}
下線水平線
code:style.css
.deco-\' {
display: block;
border-bottom: 1px solid var(--border);
}
小見出し
code:style.css
.line:not(.cursor-line) .deco-\| {
border-left: 4px solid var(--text-clr);
padding-left: 11px;
margin-bottom: 3px;
}
大見出し
code:style.css
.deco-\~ {
display: block;
border-bottom-style: solid;
border-bottom-width: 1.5px;
border-bottom-color: var(--level-3-border);
padding: 1px 0 1px 0.5em;
font-size: 1.35em;
margin-top: 0.1em;
margin-bottom: 0.1em;
}
右揃え
code:style.css
.deco-\> {
position: absolute;
right: 0;
}
中央揃え
code:style.css
.deco-\+ {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
}
.line:not(.cursor-line) .deco-\+ {
margin-top: -2em;
margin-bottom: -2em;
}
.line .deco-\+ img.image {
width: none;
max-width: 430px;
height: none;
max-height: none;
}
画像下キャプション
code:style.css
.deco-\& {
display: block;
text-align: center;
font-size: smaller;
line-height: 1;
opacity: 0.8;
}
code:style.css
.deco-\. :is(.page-link:not(.icon), .link)::before {
display: inline-block;
min-width: 1.3em;
padding: 0px 2px 1px;
font-family: "Font Awesome 5 Free","Font Awesome 5 Brands";
text-align: center;
vertical-align: middle;
font-weight: 900;
content: "\f02d";
}
display: inline-block;
min-width: 1.3em;
padding: 0 2px 0;
font-family:'Font Awesome 5 Free', 'Font Awesome 5 Brands';
text-align: center;
vertical-align: middle;
font-weight: 900;
content:'\f266';
}
.line:not(.cursor-line) .deco-\. a:is(.page-link:not(.icon), .link) span {
display: inline-block;
display: none;
width: 0;
}
特定リンクにアイコン
code:style.css
/* pdf */
:is(.line, .line .deco) a.link:is(
)::before {
font-family:"Font Awesome 5 Free", "Font Awesome 5 Brands";
content:"\f1c1";
font-weight:400;
margin-right:1px;
}
/* wikipedia */
font-family:'Font Awesome 5 Free', 'Font Awesome 5 Brands';
content:'\f266';
font-weight:400;
margin-right:0px;
}
/* favicon */
:is(.line, .line .deco) a.link:is(
):not(
)::before {
content: '';
border-bottom: 2px;
width: 16px;
height: 16px;
margin-right: 2px;
vertical-align: -3px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
}
content: '';
border-bottom: 2px;
width: 16px;
height: 16px;
margin-right: 2px;
vertical-align: -3px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
}
content: '';
border-bottom: 2px;
width: 16px;
height: 16px;
margin-right: 2px;
vertical-align: -3px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
)::before {
}
:is(.line, .line .deco) a.link:is(
)::before{
}
---
工事中
prefers-color-schemeでシステムライトモード対応
基本ダークモード想定
ライトモード時に@media (prefers-color-scheme: light)の適用
これみたいにscrapbox側のThemeを変更できればそれで解決なんだけどスクリプトは自分しか使えないので断念
一時的にhtmlタグを書き換えるだけでボロが出るので断念
---
;){kind=link}
;){kind=link}