fix
This commit is contained in:
+357
-3
@@ -82,6 +82,33 @@
|
||||
--color-danger: #e82517;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
--color-bg: #130d08;
|
||||
--color-surface: #24170d;
|
||||
--color-surface-alt: #34210f;
|
||||
--color-fury-white: #18100a;
|
||||
--color-fury-ice: #24170d;
|
||||
--color-fury-blue: #34210f;
|
||||
--color-fury-glow: #a86224;
|
||||
--color-fury-cyan: #ff6a5f;
|
||||
--color-fury-aqua: #ff8d84;
|
||||
--color-fury-violet: #ffac4d;
|
||||
--color-text: #fdb068;
|
||||
--color-text-soft: #fff2e6;
|
||||
--color-text-muted: #fee5cd;
|
||||
--color-border: #68401f;
|
||||
--color-ring: #ff8d84;
|
||||
--color-shadow: rgba(255, 106, 95, 0.18);
|
||||
--color-success: #58f0f5;
|
||||
--color-warning: #f4ee3e;
|
||||
--color-danger: #ff6a5f;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
:root[data-theme="light"] {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: "SF Pro Text Local";
|
||||
@@ -164,6 +191,7 @@ body {
|
||||
margin: 0;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg);
|
||||
font-family:
|
||||
"SF Pro Rounded Local", "SF Pro Rounded", "SF Pro Text Local",
|
||||
"SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
|
||||
@@ -179,6 +207,15 @@ h3 {
|
||||
}
|
||||
|
||||
.pixel-mountains {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.pixel-mountains canvas {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
@@ -186,16 +223,205 @@ h3 {
|
||||
image-rendering: pixelated;
|
||||
object-fit: cover;
|
||||
object-position: center bottom;
|
||||
pointer-events: none;
|
||||
transition: opacity 420ms ease;
|
||||
}
|
||||
|
||||
.pixel-mountains-previous {
|
||||
animation: pixelMountainsFadeOut 420ms ease forwards;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.pixel-mountains-active {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.pixel-sky {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.pixel-sun,
|
||||
.pixel-moon {
|
||||
position: absolute;
|
||||
display: block;
|
||||
image-rendering: pixelated;
|
||||
transform: translate(-50%, -50%);
|
||||
will-change: left, opacity, top, transform;
|
||||
}
|
||||
|
||||
.pixel-sun {
|
||||
left: 78%;
|
||||
top: 18%;
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
background: #fdb068;
|
||||
clip-path: polygon(
|
||||
36% 0,
|
||||
64% 0,
|
||||
64% 12%,
|
||||
84% 12%,
|
||||
84% 36%,
|
||||
100% 36%,
|
||||
100% 64%,
|
||||
84% 64%,
|
||||
84% 84%,
|
||||
64% 84%,
|
||||
64% 100%,
|
||||
36% 100%,
|
||||
36% 84%,
|
||||
12% 84%,
|
||||
12% 64%,
|
||||
0 64%,
|
||||
0 36%,
|
||||
12% 36%,
|
||||
12% 12%,
|
||||
36% 12%
|
||||
);
|
||||
box-shadow:
|
||||
0 -36px 0 -28px #fdb068,
|
||||
0 36px 0 -28px #fdb068,
|
||||
-36px 0 0 -28px #fdb068,
|
||||
36px 0 0 -28px #fdb068,
|
||||
28px 28px 0 -30px #fdb068,
|
||||
-28px 28px 0 -30px #fdb068,
|
||||
28px -28px 0 -30px #fdb068,
|
||||
-28px -28px 0 -30px #fdb068;
|
||||
}
|
||||
|
||||
.pixel-sun::after {
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
top: 18px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #fff2e6;
|
||||
clip-path: polygon(25% 0, 75% 0, 75% 25%, 100% 25%, 100% 75%, 75% 75%, 75% 100%, 25% 100%, 25% 75%, 0 75%, 0 25%, 25% 25%);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.pixel-moon {
|
||||
left: 78%;
|
||||
top: 18%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #fff2e6;
|
||||
clip-path: polygon(
|
||||
35% 0,
|
||||
72% 0,
|
||||
72% 12%,
|
||||
88% 12%,
|
||||
88% 28%,
|
||||
100% 28%,
|
||||
100% 72%,
|
||||
88% 72%,
|
||||
88% 88%,
|
||||
72% 88%,
|
||||
72% 100%,
|
||||
35% 100%,
|
||||
35% 88%,
|
||||
18% 88%,
|
||||
18% 72%,
|
||||
0 72%,
|
||||
0 28%,
|
||||
18% 28%,
|
||||
18% 12%,
|
||||
35% 12%
|
||||
);
|
||||
}
|
||||
|
||||
.pixel-moon::after {
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
top: -8px;
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
background: var(--color-bg);
|
||||
clip-path: polygon(
|
||||
35% 0,
|
||||
72% 0,
|
||||
72% 12%,
|
||||
88% 12%,
|
||||
88% 28%,
|
||||
100% 28%,
|
||||
100% 72%,
|
||||
88% 72%,
|
||||
88% 88%,
|
||||
72% 88%,
|
||||
72% 100%,
|
||||
35% 100%,
|
||||
35% 88%,
|
||||
18% 88%,
|
||||
18% 72%,
|
||||
0 72%,
|
||||
0 28%,
|
||||
18% 28%,
|
||||
18% 12%,
|
||||
35% 12%
|
||||
);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.pixel-star {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #fee5cd;
|
||||
}
|
||||
|
||||
.pixel-star-a {
|
||||
right: -68px;
|
||||
top: -32px;
|
||||
}
|
||||
|
||||
.pixel-star-b {
|
||||
left: -92px;
|
||||
top: 22px;
|
||||
}
|
||||
|
||||
.pixel-star-c {
|
||||
right: -116px;
|
||||
top: 54px;
|
||||
}
|
||||
|
||||
.pixel-sky-light .pixel-sun,
|
||||
.pixel-sky-dark .pixel-moon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pixel-sky-light .pixel-moon,
|
||||
.pixel-sky-dark .pixel-sun {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.pixel-sky-light-to-dark .pixel-sun {
|
||||
animation: sunSetWest 980ms cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
|
||||
}
|
||||
|
||||
.pixel-sky-light-to-dark .pixel-moon {
|
||||
animation: moonRiseEast 980ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||
}
|
||||
|
||||
.pixel-sky-dark-to-light .pixel-moon {
|
||||
animation: moonSetWest 980ms cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
|
||||
}
|
||||
|
||||
.pixel-sky-dark-to-light .pixel-sun {
|
||||
animation: sunRiseEast 980ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .pixel-mountains {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tree {
|
||||
width: min(100%, 500px);
|
||||
height: auto;
|
||||
display: block;
|
||||
background: #fefde7;
|
||||
border: 3px solid #fdca9b;
|
||||
background: var(--color-fury-white);
|
||||
border: 3px solid var(--color-border);
|
||||
border-radius: 16px;
|
||||
padding: 12px;
|
||||
box-shadow:
|
||||
@@ -203,6 +429,30 @@ h3 {
|
||||
0 1px 3px rgba(50, 25, 1, 0.08);
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .apricot-button-text {
|
||||
color: #fff2e6;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .tree {
|
||||
filter: brightness(0.78) sepia(0.18) saturate(0.92);
|
||||
box-shadow:
|
||||
0 4px 24px rgba(255, 106, 95, 0.14),
|
||||
0 1px 3px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.theme-toggle-mover-arc {
|
||||
animation: themeToggleArc 560ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
||||
}
|
||||
|
||||
:root.theme-transition,
|
||||
:root.theme-transition *,
|
||||
:root.theme-transition *::before,
|
||||
:root.theme-transition *::after {
|
||||
transition-duration: 420ms;
|
||||
transition-property: background-color, border-color, box-shadow, color, fill, opacity, stroke, text-decoration-color;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
.falling-leaves {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
@@ -227,3 +477,107 @@ h3 {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pixelMountainsFadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes themeToggleArc {
|
||||
0% {
|
||||
transform: translate3d(var(--from-x), var(--from-y), 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate3d(var(--mid-x), var(--mid-y), 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(var(--to-x), var(--to-y), 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sunSetWest {
|
||||
0% {
|
||||
left: 78%;
|
||||
opacity: 1;
|
||||
top: 18%;
|
||||
}
|
||||
|
||||
42% {
|
||||
left: 48%;
|
||||
opacity: 0.85;
|
||||
top: 9%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 12%;
|
||||
opacity: 0;
|
||||
top: 68%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moonRiseEast {
|
||||
0% {
|
||||
left: 93%;
|
||||
opacity: 0;
|
||||
top: 68%;
|
||||
}
|
||||
|
||||
55% {
|
||||
left: 86%;
|
||||
opacity: 0.86;
|
||||
top: 8%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 78%;
|
||||
opacity: 1;
|
||||
top: 18%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moonSetWest {
|
||||
0% {
|
||||
left: 78%;
|
||||
opacity: 1;
|
||||
top: 18%;
|
||||
}
|
||||
|
||||
42% {
|
||||
left: 48%;
|
||||
opacity: 0.85;
|
||||
top: 9%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 12%;
|
||||
opacity: 0;
|
||||
top: 68%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sunRiseEast {
|
||||
0% {
|
||||
left: 93%;
|
||||
opacity: 0;
|
||||
top: 68%;
|
||||
}
|
||||
|
||||
55% {
|
||||
left: 86%;
|
||||
opacity: 0.86;
|
||||
top: 8%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 78%;
|
||||
opacity: 1;
|
||||
top: 18%;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user