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

説明は↑を参照

↓2020年に作ったときのコメント

年末限定

年末というかクリスマス仕様？

続けます?

外すか〜

正月バージョンもやってみっか！

2021-11-28 19:10:35 変更

css propertyを使ったテーマ変更に書き換えた

2021年12月にのみ有効になるようにした

2022/12/5 21:00:38

ドロップダウンメニュー

code:style.css!

background-color: bisque;

}

ツールボタンの色

code:style.css!

color:firebrick;

}

ステータスバーの色

code:style.css!

color: hsl(50.1, 100%, 50%);

}

背景画像

code:style.css.disabled(css)

html body {

background-size:cover; /* */

}

雪を降らせる

静止ver

code:style.css

html body {

}

不便なんだけど、直すモチベがなくてずっと放置している

動くver

code:style.css.disabled(css)

html body {

}

バレットを星にする

code:style.css

html .line .indent-mark .dot::before {

content: '\f005'; /* スター:クリスマス用 */

}

html .line.number-list .dot::before {

content: '\f2dc'; /* 雪:クリスマス用 */

}

新規作成ボタンをクリスマス用の画像に入れ替える

code:style.css.disabled(css)

--new-icon: url('/api/pages/villagepump/クリスマス/icon'); /* */

--new-button-bg:transparent;

--new-button-horizontal-color:transparent;

--new-button-vertical-color:transparent;

}

content: ''; /* */

margin: -3px -20px; /* */

width: 40px;

height: 40px;

position: absolute;

background-image: var(--new-icon); /* */

background-size: 40px 40px;

}

そして、回す

code:style.css.disabled(css)

animation: spin 1.5s linear infinite;

}

@keyframes spin {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

}

CSS変数でカラースキームを色々変更

code:style.css

html body {

ページ

code: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%);

リンクの色

code:style.css!

--page-link-color: hsl(109.8, 51.4%, 49.2%);

--empty-page-link-color: hsl(0, 62%, 39.2%);

テロメアの色

code:style.css!

--telomere-border: hsl(185.1, 41.5%, 44.9%);

--telomere-unread: hsl(128.6, 97.2%, 72%);

navbar

通常（緑ベース）

code: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日当日用（赤ベース）

code: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%);

ツールボタン

code:style.css!

--tool-color: hsla(210.7, 45.3%, 37.3%, 0.1);

ページカードの色

code: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%);

code:style.css

}

プロジェクトの名前とstream buttonをオレンジに

通常

code:style.css

html .quick-launch .project-home,

html .kamon-activity:before {

color: hsl(39.7, 93.7%, 56.7%);

}

25日当日用

code:_style.css

color: hsl(42deg 94% 62%);

}

color: hsl(39.7, 93.7%, 56.7%);

}

code:_style.css

color: white;

}

スライダーの色改造

code:style.css!

background-color: hsl(165.9, 44.9%, 51.6%);

}

Settings.icon

UserCSS.icon