feat: add minecraft light mode CSS

This commit is contained in:
2026-05-18 04:02:59 -06:00
parent 9d4cb74280
commit 629f461c33

104
style.css
View File

@@ -2006,3 +2006,107 @@ html[data-theme="dark"][data-design-theme="minecraft"] .beian a {
html[data-theme="dark"][data-design-theme="minecraft"] .beian a:hover {
color: #5aaa3a;
}
html[data-theme="light"][data-design-theme="minecraft"] {
color-scheme: light;
--accent: #5c9e40;
--accent-rgb: 92, 158, 64;
--accent-2: #4a8a30;
--accent-3: #8b6914;
--accent-secondary-rgb: 135, 206, 235;
--page-gradient: linear-gradient(180deg, #87ceeb 0%, #c9e8f7 50%, #f0f8ff 100%);
--page-texture: none;
--title-gradient: linear-gradient(135deg, #5c9e40 0%, #8b6914 100%);
--control-bg: rgba(198, 198, 198, 0.92);
--control-border: #555555;
--control-inset: rgba(255, 255, 255, 0.5);
--control-fg: #2a2a2a;
}
html[data-theme="light"][data-design-theme="minecraft"] body {
color: #2a2a2a;
}
html[data-theme="light"][data-design-theme="minecraft"] body::before {
background-image:
linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
background-size: 16px 16px;
}
html[data-theme="light"][data-design-theme="minecraft"] .design-theme-list {
background: rgba(210, 210, 210, 0.96);
border: 2px solid #555555;
box-shadow:
inset 2px 2px 0 rgba(255, 255, 255, 0.7),
inset -2px -2px 0 rgba(0, 0, 0, 0.2);
}
html[data-theme="light"][data-design-theme="minecraft"] .card {
background: rgba(198, 198, 198, 0.85);
border: 2px solid #555555;
border-radius: 0;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow:
inset 2px 2px 0 rgba(255, 255, 255, 0.6),
inset -2px -2px 0 rgba(0, 0, 0, 0.25);
transition: all 0.1s steps(2, end);
transform: none;
}
html[data-theme="light"][data-design-theme="minecraft"] .card::before {
display: none;
}
html[data-theme="light"][data-design-theme="minecraft"] .card.pin {
background: rgba(210, 210, 210, 0.88);
}
html[data-theme="light"][data-design-theme="minecraft"] .card h2 {
color: #2a2a2a;
}
html[data-theme="light"][data-design-theme="minecraft"] .card p {
color: #4a4a4a;
}
html[data-theme="light"][data-design-theme="minecraft"] .card:hover,
html[data-theme="light"][data-design-theme="minecraft"] .card:focus {
background: rgba(212, 224, 198, 0.92);
transform: none;
border-color: #5c9e40;
box-shadow:
inset 2px 2px 0 rgba(0, 0, 0, 0.15),
inset -2px -2px 0 rgba(255, 255, 255, 0.5);
}
html[data-theme="light"][data-design-theme="minecraft"] .card:hover h2,
html[data-theme="light"][data-design-theme="minecraft"] .card:focus h2 {
color: #5c9e40;
}
html[data-theme="light"][data-design-theme="minecraft"] .card:hover p,
html[data-theme="light"][data-design-theme="minecraft"] .card:focus p {
color: #2a2a2a;
}
html[data-theme="light"][data-design-theme="minecraft"] .beian a {
color: #4a4a4a;
}
html[data-theme="light"][data-design-theme="minecraft"] .beian a:hover {
color: #5c9e40;
}
@media (prefers-reduced-motion: reduce) {
html[data-design-theme="minecraft"] .card,
html[data-design-theme="minecraft"] .design-theme-button,
html[data-design-theme="minecraft"] .theme-toggle {
transition-duration: 0.01ms !important;
transform: none !important;
}
}