add: 背景色をtransitionさせる

This commit is contained in:
moris 2024-12-16 00:18:57 +09:00
parent 310fd03d96
commit f311499ca2
2 changed files with 11 additions and 1 deletions

View File

@ -1,3 +1,12 @@
@property --theme-color {
syntax: "<color>";
inherits: true;
}
@property --back-color {
syntax: "<color>";
inherits: true;
}
/* theme color */ /* theme color */
body, body.light { body, body.light {
--color-scheme: light; --color-scheme: light;

View File

@ -51,6 +51,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: var(--back-color); background-color: var(--back-color);
transition: background-color 1s;
min-height: 100vh; min-height: 100vh;
} }
@ -76,7 +77,7 @@
& header { & header {
background-color: var(--theme-color); background-color: var(--theme-color);
height: 100%; height: 100%;
transition: height .4s, transform .4s; transition: height .4s, transform .4s background-color 1s;
&.hide { &.hide {
height: 40px; height: 40px;
@media(width<1000px) { @media(width<1000px) {