/villagepump/井戸端クリスマスモードUserCSS

generated at 11/17/2024, 5:09:07 AM
井戸端クリスマスモードUserCSS
井戸端クリスマスモードのCSS
説明は↑を参照

↓2020年に作ったときのコメント
年末限定
年末というかクリスマス仕様？
続けます?
外すか〜
正月バージョンもやってみっか！
2021-11-28 19:10:35 変更
css propertyを使ったテーマ変更に書き換えた
色コードを hsl() に書き換えた
2021年12月にのみ有効になるようにした
毎年書き換えるの微妙なのでsettingsの方で有効無効を切り替えてください
リンクの色合いが微妙に思うので、どなたか直してほしい
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%);
}
背景画像
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.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 ↑なぜか効いてないので無効化
08:37:13 scrapbox-bundlerのバグです
 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.csshtml 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%);
style.css }
プロジェクトの名前とstream buttonをオレンジに
通常
style.csshtml .quick-launch .project-home,
html .kamon-activity:before {
  color: hsl(39.7, 93.7%, 56.7%);
}
ここセレクタにhtmlを2回書いてしまっているけれど、:is()に擬似要素は使えないので仕方がない
https://developer.mozilla.org/ja/docs/Web/CSS/:is#is_は擬似要素を選択しない
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%);
}
Scrapbox Desktop PWAのHistory backボタンを白に
_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%);
}