settings

こうして他人のCSSを盗み見て弄ってきたので、自settingsも詳しくない人が読んだ時のためになるべく辿りやすくしています

---

工事中

prefers-color-schemeでシステムライトモードに対応したい

基本ダークモード想定

これみたいにscrapbox側のThemeを変更できればそれで解決なんだけどスクリプトは自分しか使えないので断念

一時的にhtmlタグを書き換えるだけでボロが出るので断念

フォント

code:style.css

code:style.css

@font-face {

font-family: "YuGothic";

src: local("Yu Gothic Medium"), local("YuGothic-Medium");

}

@font-face {

font-family: "Yu Gothic";

src: local("Yu Gothic Medium"), local("YuGothic-Medium");

}

@font-face {

font-family: "Yu Gothic";

src: local("Yu Gothic Bold"), local("YuGothic-Bold");

font-weight: bold;

}

変数

システムダークモード

code:style.css

@media (prefers-color-scheme: dark) {

--2hop-search-bg: rgb(255 255 255 / 0.15);

--brand-icon-x-first-stop-opacity: 0.2;

--brand-icon-x-last-stop-opacity: 0.3;

--brand-icon-y-first-stop-opacity: 0.3;

--brand-icon-y-last-stop-opacity: 0.6;

--card-active-bg: rgb(229 229 229 / 0.1);

--card-box-shadow: 0 2px 0 var(--card-box-shadow-color);

--card-box-hover-shadow: 0 2px 0 rgb(0 0 0 / 0.23);

--card-hover-bg: rgb(0 0 0 / 0.1);

--line-permalink-color: rgb(234 218 74 / 0.35);

--line-title-color: rgb(255 255 255 / 0.87);

--navbar-bg: rgb(11 17 36 / 0.6);

--navbar-title-color: var(--page-text-color);

--page-text-color: rgb(255 255 255 / 0.87);

--quote-bg-color: rgb(0 0 0 / 0.2);

--search-form-bg: rgb(255 255 255 0.13);

--search-form-text-color: var(--card-backside);

--body-bg-rgb: 11 17 36;

--page-bg-rgb: 34 36 43;

--bg-gradient-1: 11 17 90;

--bg-gradient-2: 0 0 0;

--bg-gradient-3: 11 17 36;

--bg-lt-1: 0;

--bg-lt-2: 0;

--bg-lt-3: 0;

}}

システムライトモード

code:style.css

@media (prefers-color-scheme: light) {

--brand-icon-x-first-stop-opacity: 0.3;

--brand-icon-x-last-stop-opacity: 0.3;

--brand-icon-y-last-stop-opacity: 0.7;

--brand-icon-y-first-stop-opacity: 0.7;

--card-active-bg: rgb(243 243 243 / 0.1);

--card-border: 1px solid var(--card-border-color);

--card-border-radius-sm: 4px;

--card-border-radius-md: 6px;

--card-box-hover-shadow: 0 1px 2px 0 var(--card-box-shadow-color);

--card-box-shadow: 0 1px 2px 0 var(--card-box-shadow-color);

--card-box-shadow-color: rgb(0 0 0 / 0.05);

--card-box-shadow-reverse: 0 -1px 2px 0 var(--card-box-shadow-color);

--card-hover-bg: rgb(0 0 0 / 0.05);

--card-pin-overhang-color: var(--body-bg);

--expandable-menu-bg: rgb(53 59 72 / 0.6);

--navbar-bg: rgb(240 252 255 / 0.8);

--search-form-border: 1px solid var(--search-form-border-color);

--search-form-text-color: rgb(68 68 68 / 0.35);

--body-bg-rgb: 240 252 255;

--page-bg-rgb: 255 255 255;

--bg-gradient-1: 141 196 255;

--bg-gradient-2: 255 255 255;

--bg-gradient-3: 199 245 255;

--bg-lt-1: 0.2;

--bg-lt-2: 0.4;

--bg-lt-3: 0.6;

}}

共通

code:style.css

--caret-color: var(--page-text-color);

--bg-gradient:

radial-gradient(

ellipse at right bottom,

rgb(var(--bg-gradient-1) / 0.9) 0%,

rgb(var(--bg-gradient-1) / 0.3) 25%,

rgb(var(--bg-gradient-1) / 0) 60%

),

radial-gradient(

ellipse at left top,

rgb(var(--bg-gradient-2) / var(--bg-lt-1)) 0%,

rgb(var(--bg-gradient-2) / var(--bg-lt-2)) 25%,

rgb(var(--bg-gradient-2) / var(--bg-lt-3)) 50%

),

linear-gradient(

to top,

rgb(var(--bg-gradient-3) / 0.4) 30%,

rgb(var(--bg-gradient-3) / 0.6) 60%,

rgb(var(--bg-gradient-3) / 0.8) 100%

);

}

画面

ホーム

code:style.css

.grid li.page-list-item a {

& {

box-shadow: none;

background-color: var(--page-bg);

}

&.pin {background: var(--body-bg);}

& .content .header {border-top: none;}

& .content .header.pinned {border-top: var(--card-title-bg) solid 3px;}

}

@media (prefers-color-scheme: dark) {

.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 (prefers-color-scheme: light) {

.grid li.page-list-item.pin::after {display:none}

.grid li.page-list-item a .pin {display:none}

}

ピン留めを段分け

code:style.css

.page-list-item.pin + .page-list-item:not(.pin) {grid-column-start: 1}

非表示

code:style.css

.page-list .grid li.page-list-item {

}

@media (max-width: 1240px) {

display: none;

}

}

ホバー

code:style.css

ul.grid li.page-list-item a:hover {

filter: drop-shadow(16px 16px 20px var(--page-bg));

}

code:style.css.off

@media (prefers-color-scheme: dark) {

ul.grid li.page-list-item a .hover {

/* transition: 0.15s; */

border-radius: 0px;

mix-blend-mode: difference;

}

}

背景

code:style.css

body {

background-color: var(--body-bg);

background-image: var(--bg-gradient);

background-size: cover;

background-position: center center;

background-attachment: fixed;

}

本文

code:style.css

.page {

background-color: var(--page-bg);

box-shadow: none;

border-top-left-radius: 0px;

border-top-right-radius: 0px;

border-bottom-left-radius: 0px;

border-bottom-right-radius: 0px;

}

タイトル部

code:style.css

.line.line-title .text {

border-bottom: 1px solid var(--border);

padding-bottom: 1rem;

margin-bottom: 3rem;

}

テロメア

code:style.css

.line .telomere .telomere-border {

border-width: 0px 0px 0px 2.5px !important;

border-color: var(--quote-bg);

width: 0;

}

.navbar

code:style.css

.project-home .title a {

color: var(--page-text-color);

}

.navbar {

backdrop-filter: none;

background-color: transparent;

border-bottom: none;

&.dropdown-menu a {color: var(--page-text-color)}

&.dropdown .dropdown-menu {width: 100%}

&.row {

max-width: 1400px;

margin-right: auto;

margin-left: auto;

}

}

新規作成ボタン

code:style.css

Cosenseアイコン

code:style.css

.brand-icon path {

fill: transparent;

stroke: var(--page-text-color);

vector-effect: non-scaling-stroke;

transform: scale(0.9);

transform-origin: 50% 50%;

}

code:style.css.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;

}

.search-result-list

code:style.css

.search-result-list .list li.page-list-item a {

& {background: var(--page-bg);}

&:hover {background: var(--card-backside);}

.title-with-description {color: var(--page-text-color);}

.description {color: var(--search-description);}

}

.navbar-form

code:style.css

.search-form .form-group .dropdown {

background-color: rgb(var(--body-bg-rgb) / 0.4);

input.form-control {

backdrop-filter: blur(4px);

background-color: var(--navbar-bg);

&.for-mobile,

&:focus {

background-color: rgb(var(--body-bg-rgb) / 0.4);

color: var(--page-text-color);

}

}

ul.dropdown-menu {

min-width: 100%;

max-width: 100%;

backdrop-filter: blur(4px);

background-color: var(--navbar-bg);

li {

background-color: var(--navbar-bg);

}

.dropdown-item a {

color: var(--page-text-color);

}

.dropdown-item a:hover {

background-color: rgb(var(--page-bg-rgb) / 0.4);

}

}

}

.global-menu

code:style.css

.global-menu.dropdown-menu {

background-color: var(--navbar-bg);

backdrop-filter: blur(4px);

.dropdown-header {

color: var(--page-text-color);

}

li.project-list-filter > a:hover {

background-color: rgb(var(--page-bg-rgb) / 0.4);

}

li a {

color: var(--page-text-color);

}

li a:hover {

background-color: rgb(var(--page-bg-rgb) / 0.4);

color: var(--page-text-color);

}

li a.selected {

color: var(--highlight);

}

li a.updated,

li a.highlight {

border-left: 2px solid var(--highlight);

}

.project-list-tab a.active {

background-color: rgb(var(--page-bg-rgb) / 0.7);

color: var(--page-text-color);

}

.project-list-tab a:not(.active) {

color: var(--page-text-color);

&:hover {

background-color: rgb(var(--body-bg-rgb) / 0.4);

color: var(--page-text-color);

}

}

}

@media (prefers-color-scheme: dark) {

.global-menu.dropdown-menu li.project-list-filter a .kamon {

filter: invert(1);

}

}

code:style.css.off

.global-menu {background-color: rgb(var(--navbar-bg-rgb) / 0.95)}

.global-menu .project-list-filter a:hover {background-color: var(--body-bg)}

.global-menu li a, .global-menu .dropdown-header {color: var(--page-text-color)}

.global-menu li a.updated, .global-menu li a.highlight {border-left: 2px solid var(--highlight)}

.project-list-tab a {color: var(--page-text-color)}

.page-menu ul>li>div

code:style.css

.page-menu ul>li>div {

color: var(--page-text-color);

}

.dropdown-menu-right

code:style.css

.dropdown-menu-right {

color: var(--page-text-color);

background-color: var(--navbar-bg);

backdrop-filter: blur(4px);

li a {

color: var(--page-text-color);

}

li a:hover {

color: var(--page-text-color);

background-color: rgb(var(--body-bg-rgb) / var(--trans-rate));

}

}

.page-menu ul>li>div {

color: var(--page-text-color);

}

関連ページ

code:style.css

.related-page-list .toolbar .related-page-list-search:focus-within {

background-color: var(--related-bg);

caret-color: var(--page-text-color);

}

.related-page-list .toolbar .related-page-list-search:focus-within .fa-search {color: var(--related-clr)}

.modal-content

code:style.css

.embed-text-modal .modal-dialog .modal-content {

color: var(--page-text-color);

background-color: var(--page-bg);

.preview .embed-preview {

background-color: var(--page-bg);

}

}

infobox

code:style.css.off

display: none

}

できてない

code:style.css.off

.midashi-pagemenu-item {

color: var(--font-color);

background-color: var(--page-bg);

}

できてない

テキスト

引用

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(--page-text-color);

}

/* セル間に枠線 */

.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

@keyframes blink {

0% { opacity: 0; }

49% { opacity: 0; }

50% { opacity: 1; }

}

.cursor {

animation: blink 1s infinite

}

カーソル行ハイライト

code:style.css

.cursor-line {

background-color: var(--cursor-bg);

}

selection

code:style.css

::selection,

.selections .selection,

background-color: rgb(127 147 204 / 0.4);

opacity: 1;

}

1

2

3

█

█

█

code:style.css

/* 表示 */

.line .indent-mark .dot {

display: block;

position: absolute;

right: 10px;

top: 12px;

width: 2px;

height: 2px;

border-radius: 0;

}

.line.number-list .dot, .line.quote-line .dot {

top: 12.5px;

height: 1.5px;

width: 6px;

right: 9px;

border-radius: unset;

}

列の右に縦線

code:style.css

.lines .line {

.indent-mark {height: 100%;}

.table-block .indent-mark {height: auto;}

}

.line .indent-mark .pad {

height: 100%;

overflow: unset;

}

.indent-mark span:not(:nth-last-child(-n+2)) .pad {

border-right: 1px solid var(--indent-border);

}

code:indent-off

/* 列を色分け*/

code:style.css

background: var(--quote-bg);

border: 1px solid;

border-radius: 4px;

font-size: 0.9em;

margin: 0 0.2em;

padding: 4px 6px;

}

強調画像を最大幅表示

code:style.css

.strong-image {width: 100%;}

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

color: var(--text-color);

background: linear-gradient(transparent 75%, rgb(255 255 102 / 0.6) 25%);

}

赤文字

code:style.css

薄く

code:style.css

@media (prefers-color-scheme: light) {

.line:not(.cursor-line) .deco-\% {filter: brightness(5);}

.line:not(.cursor-line) .deco-\% a {filter: brightness(0.3);}

}

@media (prefers-color-scheme: dark) {

.line:not(.cursor-line) .deco-\% {filter: brightness(0.4);}

}

overline

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 / 0.1);

border-radius: 0.2em;

padding: 0.2em;

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;

position: relative;

}

.line:not(.cursor-line) .deco-\) > span:nth-child(1) {

position: absolute;

top: -1.7em;

width: 100%;

font-size: 50%;

text-align: center;

white-space: nowrap;

}

.line:not(.cursor-line) .deco-\) > span:nth-child(1) > a {

pointer-events: none;

color: var(--page-text-color);

}

.line:not(.cursor-line) .deco-\) > span:nth-child(2) > a {

justify-content: space-around;

}

黒塗り

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;

&:not(.cursor-line){

height:28px;

&:after{

flex-grow: 1;

content: "";

border-top: 1px solid var(--border);

}

}

}

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(--page-text-color);

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;

left: 0;

}

.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;

}

.deco-\> {

position: absolute;

right: 0;

}

画像下キャプション

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;

}

}

}

}

}

}

}

}

}

}

}

}

}

}

}

}

}

}

}

}

}

}

}

:is(.line, .line .deco) a.link:is(

)::before{

}

ホームで特定ページのタイトルに適用

code:style.css

a .content .header .title {

font-family: "Space Grotesk", monospace;

font-weight: 400;

font-size: 1em;

}

}

.grid li.page-list-item:is(

):not(

) {a .content .header .title {

font-family: "Zen Kaku Gothic New", sans-serif;

font-weight: 400;

font-style: normal;

}

}

@media (prefers-color-scheme: light) {

.grid li.page-list-item:is(

):not(

) {a .content .header .title {font-weight: 500}}}