generated at
井戸端クリスマスモードUserCSS
説明は↑を参照

↓2020年に作ったときのコメント
年末限定
年末というかクリスマス仕様?
続けます?
外すか〜
正月バージョンもやってみっか!
2021-11-28 19:10:35 変更
css propertyを使ったテーマ変更に書き換えた
色コードを hsl() に書き換えた
2021年12月にのみ有効になるようにした
毎年書き換えるの微妙なのでsettingsの方で有効無効を切り替えてくださいwogikaze
リンクの色合いが微妙に思うので、どなたか直してほしいtakker
2022/12/5 21:00:38
bulletとnavbarまわりだけにしてみるyosider

ドロップダウンメニュー
style.css!
html[data-assets-version^="assets-202212"] .open>.dropdown-menu { background-color: bisque; }
ツールボタンの色
style.css!
html[data-assets-version^="assets-202212"] :is(.quick-launch .history-back-button, .kamon, .page-sort-menu .tool-btn, .status-bar>div, .stream h1) { color:firebrick; }
ステータスバーの色
style.css!
html[data-assets-version^="assets-202212"] .status-bar>div{ color: hsl(50.1, 100%, 50%); }
背景画像
Settings#5f4a2026eb9f61000041ea0bを参考にして、unsplash.com からクリスマスっぽい画像を引っ張ってくる
style.css.disabled(css)
html body { background-image: url('https://source.unsplash.com/featured/?christmas-background'); /* */ background-size:cover; /* */ }
background-size:coverはStreamでバグるらしい
雪を降らせる
静止ver
style.css
html body { background-image: url('https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/villagepump/井戸端クリスマスモード/snow.svg'); }
2022/12/5 21:15:39 ↑なぜか効いてないので無効化yosider
08:37:13 scrapbox-bundlerのバグですtakker
external=:url で指定するとき、 url 中のurl parametersが削れてしまう
不便なんだけど、直すモチベがなくてずっと放置している
動くver
style.css.disabled(css)
html body { background-image: url('https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/villagepump/井戸端クリスマスモード/s02.svg'); }
12/24,25だけは許してsuto3
バレットを星にする
style.css
html .line .indent-mark .dot::before { content: '\f005'; /* スター:クリスマス用 */ } html .line.number-list .dot::before { content: '\f2dc'; /* 雪:クリスマス用 */ }
新規作成ボタンをクリスマス用の画像に入れ替える
2021/12/27 12:39:28 クリスマスを過ぎたので外すsuto3
style.css.disabled(css)
html[data-assets-version^="assets-202212"] .new-button { --new-icon: url('/api/pages/villagepump/クリスマス/icon'); /* */ --new-button-bg:transparent; --new-button-horizontal-color:transparent; --new-button-vertical-color:transparent; } html[data-assets-version^="assets-202212"] .new-button::after { content: ''; /* */ margin: -3px -20px; /* */ width: 40px; height: 40px; position: absolute; background-image: var(--new-icon); /* */ background-size: 40px 40px; }
そして、回す
style.css.disabled(css)
html[data-assets-version^="assets-202212"] .new-button:hover { animation: spin 1.5s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

CSS変数でカラースキームを色々変更
style.css
html body {
ページ
style.css!
--body-bg: hsl(4, 55.6%, 84.1%); --page-bg: hsl(58.9, 100%, 89.2%); --code-bg: hsl(58.9, 100%, 89.2%); --page-text-color: hsl(163.8, 100%, 12.4%);
リンクの色
style.css!
--page-link-color: hsl(109.8, 51.4%, 49.2%); --empty-page-link-color: hsl(0, 62%, 39.2%);
テロメアの色
style.css!
--telomere-border: hsl(185.1, 41.5%, 44.9%); --telomere-unread: hsl(128.6, 97.2%, 72%);
navbar
通常(緑ベース)
style.css
--new-button-bg: firebrick; /* hsl(0deg 68% 42%) */ --new-button-hover-bg: hsl(0deg 68% 56%); --new-button-active-bg: hsl(17deg 86% 56%); --navbar-bg: hsl(145.2, 61.1%, 22.2%);
25日当日用(赤ベース)
style.css
--new-button-bg: hsl(145deg 77% 29%); --new-button-hover-bg: hsl(145deg 89% 34%); --new-button-active-bg: hsl(102deg 92% 37%); --navbar-bg: hsl(0deg 63% 34%);
ツールボタン
style.css!
--tool-color: hsla(210.7, 45.3%, 37.3%, 0.1);
ページカードの色
style.css!
--card-bg: hsl(30, 100%, 93.3%); --card-title-bg: hsl(66.7, 43.9%, 83.9%); --card-description-link-color: hsl(241.3, 66.2%, 59.4%); --relation-label-links-bg: hsl(41.3, 46.4%, 62%); --relation-label-bg: hsl(65.8, 64.3%, 43.9%);
プロジェクトの名前とstream buttonをオレンジに
通常
style.css
html .quick-launch .project-home, html .kamon-activity:before { color: hsl(39.7, 93.7%, 56.7%); }
ここセレクタにhtmlを2回書いてしまっているけれど、:is()に擬似要素は使えないので仕方がない
25日当日用
_style.css
html[data-assets-version^="assets-202212"] .quick-launch .project-home { color: hsl(42deg 94% 62%); } html[data-assets-version^="assets-202212"] .kamon-activity:before { color: hsl(39.7, 93.7%, 56.7%); }
_style.css
html[data-assets-version^="assets-202212"] .btn.history-back-button:is(:not(:hover), :hover) { color: white; }
スライダーの色改造
style.css!
html[data-assets-version^="assets-202212"] input[type="range"]::-webkit-slider-thumb { background-color: hsl(165.9, 44.9%, 51.6%); }

Settings
UserCSS