井戸端クリスマスモードUserCSS
説明は↑を参照
↓2020年に作ったときのコメント
年末限定
年末というかクリスマス仕様?
続けます?
外すか〜
正月バージョンもやってみっか!
2021-11-28 19:10:35 変更
css propertyを使ったテーマ変更に書き換えた
色コードを hsl()
に書き換えた
2021年12月にのみ有効になるようにした
リンクの色合いが微妙に思うので、どなたか直してほしい
2022/12/5 21:00:38
bulletとnavbarまわりだけにしてみる
ドロップダウンメニュー
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%);
}
背景画像
style.css.disabled(css)html body {
background-image: url('https://source.unsplash.com/featured/?christmas-background'); /* */
background-size:cover; /* */
}
雪を降らせる
静止ver
style.csshtml 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 ↑なぜか効いてないので無効化
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だけは許して
バレットを星にする
style.csshtml .line .indent-mark .dot::before {
content: '\f005'; /* スター:クリスマス用 */
}
html .line.number-list .dot::before {
content: '\f2dc'; /* 雪:クリスマス用 */
}
新規作成ボタンをクリスマス用の画像に入れ替える
2021/12/27 12:39:28 クリスマスを過ぎたので外す
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! --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.csshtml .quick-launch .project-home,
html .kamon-activity:before {
color: hsl(39.7, 93.7%, 56.7%);
}
25日当日用
_style.csshtml[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.csshtml[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%);
}