settings
CSS参考プロジェクト
こうして他人のCSSを盗み見て弄ってきたので、自settingsも詳しくない人が読んだ時のためになるべく辿りやすくしています
フォント
code:style.css
@import url('https://fonts.googleapis.com/css2?family=Space+Mono&family=Zen+Kaku+Gothic+New&display=swap');
html, body, #editor, .grid li {
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", sans-serif;
font-weight: 500;
}
/* ホームで特定ページのタイトルに適用 */
.grid li.page-list-item:is(data-page-title="settings") {
a .content .header .title {
font-family: "Space Mono", monospace;
font-weight: 400;
font-style: normal;
}
}
.grid li.page-list-item:is(data-page-links*="tanka",data-page-links*="haiku",data-page-links*="短歌",data-page-links*="俳句"):not(data-page-title$="メモ",data-page-title$="オマージュ",data-page-links*="スクラップブック",data-page-links*="歌人",data-page-links*="memo",data-page-links*="羅列",data-page-links*="現代") {
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;
変数
app.css上書き
code:style.css
:root {
--empty-page-link-color: #3cc2be !important;
--empty-page-link-hover-color: #309b98 !important;
設定変数
code:style.css
--body-bgc: #0b1124;
--border: #c0c0c0;
--cursor-bg: #202229;
--global-menu-highlight: #547efc;
--indent-border: #282b33;
--LetterToTheBlackWorld: #28292b;
--navbar-bgc: 11 17 36;
--page-bgc: #22242b;
--pin-outline: #2b2e38;
--quote-bg: #1c1d24;
--related-clr: #363b43;
--related-bg: #272d35;
--table-bg: #272d35;
--text-clr: #e2e3e3;
--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 {
--page-text-color: #212121;
--tool-text-color: #212121;
--body-bgc: #ddd;
--border: #c0c0c0;
--cursor-bg: #eee;
--indent-border: #f5f5f5;
--navbar-bgc: 238 238 238;
--page-bgc: #fff;
--pin-outline: #b3b3b3;
--quote-bg: #f2f2f2;
--table-bg: #eee;
--text-clr: #212121;
--bg-gradient: none;
}}
/* フォント調整 */
@media (prefers-color-scheme: light) {
html, body, #editor, .grid li {
font-family: "calibri", "Arial", "BIZ UDゴシック", "Yu Gothic", "Noto Sans JP", sans-serif;
font-weight: 400;
font-style: normal;
}
}
@media (prefers-color-scheme: light) {
.grid li.page-list-item:is(data-page-title="settings") {a .content .header .title {font-weight: 400;}}
}
@media (prefers-color-scheme: light) {
.grid li.page-list-item:is(data-page-links*="tanka",data-page-links*="haiku",data-page-links~="短歌",data-page-links~="俳句"):not(data-page-title$="メモ",data-page-title$="オマージュ",data-page-links*="スクラップブック",data-page-links*="歌人",data-page-links*="雑考",data-page-links*="羅列") {a .content .header .title {font-weight: 400;}}
}
html, body, #editor, .grid li {
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;}
/* 非表示 */
.page-list .grid li.page-list-itemdata-page-links*="alpha" {visibility: hidden;}
.page-list .grid li.page-list-itemdata-page-links*="ambigram" {display: none;}
.page-list .grid li.page-list-itemdata-page-links*="cover" {display: none;}
.page-list .grid li.page-list-itemdata-page-links*="emoji" {display: none;}
.page-list .grid li.page-list-itemdata-page-links*="haiku" {display: none;}
.page-list .grid li.page-list-itemdata-page-links*="nsfw" {display: none;}
.page-list .grid li.page-list-itemdata-page-links*="rint" {display: none;}
.page-list .grid li.page-list-itemdata-page-links*="tanka" {display: none;}
.grid li.page-list-itemdata-page-links*="hid" {display: none;}
/* ピン表示 */
.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: dark) {
ul.grid li.page-list-item a .hover {
background: #fff;
/* transition: 0.15s; */
border-radius: 0px;
mix-blend-mode: difference;
}
}
/* 空きスペースにバナー */
@media (min-resolution: 140dpi) { /* 13インチWUXGAで144dpi(OS拡大率150%) */
.page-list::before {
content: "こふ⧵ scrap"; /* バックスラッシュだと化けるのでU+29F5 */
position: absolute;
top: 25%;
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;
}}
@media (max-resolution: 139dpi) {
.page-list::before {
content: "こふ⧵ scrap";
position: absolute;
top: 16%;
right: 19.5%;
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: 3px solid #1b1d24;
border-image-slice: 1;
border-image-source: conic-gradient(from 0turn, var(--gradient-data));
/* :root{--gradient-data: #1b1d24 0%, #1B5E82 25%, #000040 50%, #0D0F82 75%, #1b1d24 100%;} */
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;
border-color: #52555D;
width: 0;
}
.unread {
border-color: #e7a270;
}
/nota-private-sample/テロメアの開発を無碍にしている…
メニューバー
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);
}
/* 新規作成ボタン */
.new-button {background-color: #363b43;}
/* 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-image: url('https://i.gyazo.com/7c2ffe2202762428dd4451e9971654ca.png');
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
.page-sidebardata-page-links*="noinfobox" {
display: none
}
できてない
見出しPageMenu
code:midashi.css
.midashi-pagemenu-item {
color: var(--font-color);
background-color: var(--page-bgc);
}
できてない
kofu#662bbf0369d64a0000436f82
テキスト
引用
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 {
/* 全てのセルの右と下 */
border-right: solid 1px #cccccc;
border-bottom: solid 1px #cccccc;
}
.table-block .cell:first-child {
/* 1列目のセルの左 */
border-left: solid 1px #cccccc;
}
.section-title + .line .table-block .cell {
/* 1行目のセルの上 */
border-top: solid 1px #cccccc;
}
.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: 12px;
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;}
タグのラベル化 #test
code:style.css
atype="hashTag" {
background: var(--quote-bg);
border: 1px solid;
border-radius: 4px;
font-size: 0.9em;
margin: 0 0.2em;
padding: 4px 6px;
}
atype="hashTag":hover {border: 1.4px solid;}
ポップアップメニュー
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';
color: #a0a0a0;
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
.line:has(span.char-index.c-0data-char="-"):has(span.char-index.c-1data-char="-"):has(span.char-index.c-2data-char="-"){
&{
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{
&.c-0data-char="-",
&.c-1data-char="-",
&.c-2data-char="-"{
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;
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;
}
出典リンクにアイコン/villagepump/リンクを出典アイコンにするUserCSS
Wikipedia版https://ja.wikipedia.org/wiki/Cascading_Style_Sheets
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";
}
.deco-\. a.link:is(href*=".wikipedia.org"), .link)::before {
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(
href$=".pdf",
)::before {
font-family:"Font Awesome 5 Free", "Font Awesome 5 Brands";
content:"\f1c1";
font-weight:400;
margin-right:1px;
}
/* wikipedia */
:is(.line, .line .deco) a.link:is(href*=".wikipedia.org")::before{
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(
href*="archive.org",
[href^="https://web.archive.org/"],
href*="bandcamp.com",
[href^="https://bsky.app"],
[href^="https://main.bsky.dev"],
[href^="https://discord.com"],
[href^="https://discord.gg"],
[href^="https://github.com"],
[href^="https://gist.github.com"],
[href^="https://raw.githubusercontent.com"],
href*="hatenablog.com",
[href^="https://www.instagram.com"],
[href^="https://kiite.jp"],
[href^="https://music.apple.com"],
[href^="https://www.netflix.com"],
href*="nicovideo.jp",
[href^="https://nico.ms"],
[href^="https://dic.nicovideo.jp"],
[href^="https://note.com"],
[href^="https://note.mu"],
href*="p5js.org",
[href^="https://www.pixiv.net"],
[href^="https://dic.pixiv.net"],
[href^="https://dic.pixiv.net"],
[href^="https://soundcloud.com"],
href*="tumblr.com",
[href^="https://www.youtube.com"],
[href^="https://youtube.com"],
[href^="https://youtu.be"],
[href^="https://music.youtube.com"]
):not(
href*="&noicon"
)::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;
}
:is(.line, .line .deco) a.link:is([href^="https://twitter.com"]):not([href*="status"])::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;
}
:is(.line, .line .deco) a.link:is([href^="https://x.com"]):not([href*="status"])::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;
}
:is(.line, .line .deco) a.link:is(href*="archive.org")::before {
background-image: url('https://gyazo.com/753ad792a8ff97474359b5ae5dc8ff53/max_size/32');
}
:is(.line, .line .deco) a.link:is(href*="bandcamp.com")::before {
background-image: url('https://gyazo.com/d72edb0d01b6eb4036488635fa6cbe49/max_size/32');
}
:is(.line, .line .deco) a.link:is([href^="https://bsky.app"], [href^="https://main.bsky.dev"])::before {
background-image: url('https://gyazo.com/bf5c607634fb92724af4179c76eff5a6/max_size/32');
}
:is(.line, .line .deco) a.link:is([href^="https://discord.com"], [href^="https://discord.gg"])::before {
background-image: url('https://gyazo.com/e301e743a3fa5db966e68a465b7b1bd5/max_size/32');
}
:is(.line, .line .deco) a.link:is([href^="https://www.instagram.com"])::before {
background-image: url('https://gyazo.com/80f9c62c853ce8ee97e88fded2f79566/max_size/32');
}
:is(.line, .line .deco) a.link:is(href*="hatenablog.com")::before {
background-image: url('https://gyazo.com/55ace14afe3e56bca35a74cff98264b6/max_size/32');
}
:is(.line, .line .deco) a.link:is([href^="https://kiite.jp"])::before {
background-image: url('https://gyazo.com/b8f6d7cc4e36f9032709e55fc1b5e225/max_size/32');
}
:is(.line, .line .deco) a.link:is([href^="https://music.apple.com"])::before {
background-image: url('https://gyazo.com/36d70a77f77b95ba47ca4a92401bc3ce/max_size/32');
}
:is(.line, .line .deco) a.link:is([href^="https://www.netflix.com"])::before {
background-image: url('https://gyazo.com/9e0513c6182cee40b2d4e22f2942a967/max_size/32');
}
:is(.line, .line .deco) a.link:is(href*="nicovideo.jp", [href^="https://nico.ms"])::before {
background-image: url('https://gyazo.com/0a4c9a9ac6f600709d034c9667757b6e/max_size/32');
}
:is(.line, .line .deco) a.link:is([href^="https://dic.nicovideo.jp"])::before {
background-image: url('https://gyazo.com/8c9d10e418921822ce77b6760a4b2d29/max_size/32');
}
:is(.line, .line .deco) a.link:is([href^="https://note.com"])::before {
background-image: url('https://gyazo.com/88ad65eb751176a53d2c13ad155e90c8/max_size/32');
}
:is(.line, .line .deco) a.link:is([href^="https://note.mu"])::before {
background-image: url('https://gyazo.com/8fbe641ebbcccb9fe7c77123e91b4724/max_size/32');
}
:is(.line, .line .deco) a.link:is(href*="p5js.org")::before {
background-image: url('https://gyazo.com/514918e6acea2c588ce023d5b709ce78/max_size/32');
}
:is(.line, .line .deco) a.link:is([href^="https://www.pixiv.net"])::before {
background-image: url('https://gyazo.com/0bde5a9b6eb57e4f8dc759568e1f34a7/max_size/32');
}
:is(.line, .line .deco) a.link:is([href^="https://dic.pixiv.net"])::before {
background-image: url('https://gyazo.com/325cdab24d1656475bc05945bbde8be2/max_size/32');
}
:is(.line, .line .deco) a.link:is([href^="https://soundcloud.com"])::before {
background-image: url('https://gyazo.com/a62dfc8fe7512b5785b352f66fcb1eb6/max_size/32');
}
:is(.line, .line .deco) a.link:is(href*="tumblr.com")::before {
background-image: url('https://gyazo.com/332023c28a119b50638a8ac6f723ca2f/max_size/32');
}
:is(.line, .line .deco) a.link:is([href^="https://twitter.com"]):not([href*="status"])::before {
background-image: url('https://gyazo.com/c2125a70ba8ec33a2757e045a6f1d70c/max_size/32');
}
:is(.line, .line .deco) a.link:is([href^="https://x.com"]):not([href*="status"])::before {
background-image: url('https://gyazo.com/c2125a70ba8ec33a2757e045a6f1d70c/max_size/32');
}
:is(.line, .line .deco) a.link:is([href^="https://www.youtube.com"], [href^="https://youtube.com"], [href^="https://youtu.be"]):not([href*="&noicon"])::before {
background-image: url('https://gyazo.com/ca6d67e60f758d352745329b283e8f32/max_size/32');
}
:is(.line, .line .deco) a.link:is([href^="https://music.youtube.com"])::before {
background-image: url('https://gyazo.com/76b42d72a52852ef696583d82db522dd/max_size/32');
}
:is(.line, .line .deco) a.link:is(
[href^="https://github.com"],
[href^="https://gist.github.com"],
[href^="https://raw.githubusercontent.com"],
)::before{
background-image: url('https://gyazo.com/58f957ae3a6a01539b4a61059eb83b03/max_size/32');
}
---
工事中
prefers-color-schemeでシステムライトモード対応
基本ダークモード想定
ライトモード時に@media (prefers-color-scheme: light)の適用
settings#6727238e0208b10000de2425
/villagepump/Scrapboxのライトテーマとダークテーマをワンタッチで切り替え
これみたいにscrapbox側のThemeを変更できればそれで解決なんだけどスクリプトは自分しか使えないので断念
一応自分がアクセスさえすれば書き変わるようにはできたので試す (UserScript#67284bc00208b100009bd4c8)
一時的にhtmlタグを書き換えるだけでボロが出るので断念
---
オフにしたProjectCSS