xuyue/home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add animal-crossing dark mode CSS

Browse Source
This commit is contained in:
yuetsh
2026-05-18 03:35:27 -06:00
parent fe6c9dbe5d
commit d015363430
1 changed files with 108 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
style.css
View File

@@ -1686,3 +1686,111 @@ html[data-design-theme="animal-crossing"] .beian a {
html[data-design-theme="animal-crossing"] .beian a:hover {
color: var(--accent);
}
html[data-theme="dark"][data-design-theme="animal-crossing"] {
color-scheme: dark;
--accent: #9ed98a;
--accent-rgb: 158, 217, 138;
--accent-2: #86cb72;
--accent-3: #6dbc5e;
--accent-secondary-rgb: 245, 210, 90;
--page-gradient: #1e2d1e;
--page-texture:
radial-gradient(
circle at 20% 50%,
rgba(158, 217, 138, 0.06) 0%,
transparent 50%
),
radial-gradient(
circle at 80% 80%,
rgba(245, 210, 90, 0.04) 0%,
transparent 50%
);
--title-gradient: linear-gradient(
135deg,
#9ed98a 0%,
#86cb72 40%,
#f5d25a 100%
);
--control-bg: rgba(25, 40, 25, 0.82);
--control-border: rgba(158, 217, 138, 0.25);
--control-inset: rgba(255, 255, 255, 0.04);
--control-fg: #e8f4d8;
}
html[data-theme="dark"][data-design-theme="animal-crossing"] body {
color: #e8f4d8;
}
html[data-theme="dark"][data-design-theme="animal-crossing"] .card {
background: rgba(30, 48, 30, 0.82);
border: 1px solid rgba(158, 217, 138, 0.18);
border-radius: 16px;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.3),
0 1px 2px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"][data-design-theme="animal-crossing"] .card::before {
display: none;
}
html[data-theme="dark"][data-design-theme="animal-crossing"] .card.pin {
background: rgba(38, 58, 38, 0.88);
}
html[data-theme="dark"][data-design-theme="animal-crossing"] .card h2 {
color: #e8f4d8;
}
html[data-theme="dark"][data-design-theme="animal-crossing"] .card p {
color: #b0c8a0;
}
html[data-theme="dark"][data-design-theme="animal-crossing"] .card:hover,
html[data-theme="dark"][data-design-theme="animal-crossing"] .card:focus {
border-color: rgba(158, 217, 138, 0.45);
box-shadow:
0 8px 24px rgba(158, 217, 138, 0.2),
0 4px 8px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
html[data-theme="dark"][data-design-theme="animal-crossing"] .card:hover h2,
html[data-theme="dark"][data-design-theme="animal-crossing"] .card:focus h2 {
color: var(--accent);
}
html[data-theme="dark"][data-design-theme="animal-crossing"] .card:hover p,
html[data-theme="dark"][data-design-theme="animal-crossing"] .card:focus p {
color: #c8deb8;
}
html[data-theme="dark"][data-design-theme="animal-crossing"] .design-theme-list {
background: rgba(22, 36, 22, 0.9);
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.55),
0 6px 12px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"][data-design-theme="animal-crossing"] .beian a {
color: #b0c8a0;
}
html[data-theme="dark"][data-design-theme="animal-crossing"] .beian a:hover {
color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
html[data-design-theme="animal-crossing"] .card,
html[data-design-theme="animal-crossing"] .design-theme-button,
html[data-design-theme="animal-crossing"] .theme-toggle {
transition-duration: 0.01ms !important;
transform: none !important;
}
}