shadow depends on light/dark, media query added

This commit is contained in:
sefaria
2026-05-14 15:29:04 +02:00
parent 4737b78b8a
commit cc6fa17247
+13 -3
View File
@@ -126,9 +126,8 @@
--radius-xl: 2rem;
--radius-xxl: 2.5rem;
--shadow-box: 0px 2px 8px rgba(0, 0, 0, 0.4), 0px 1px 4px rgba(0, 0, 0, 0.12);
--shadow-button: inset 0px 1px 2px rgba(0, 0, 0, 0.16), inset 0px -1px 4px rgba(0, 0, 0, 0.28), var(--shadow-box);
--shadow-button-active: inset 0px -1px 2px rgba(0, 0, 0, 0.16), inset 0px 1px 4px rgba(0, 0, 0, 0.28), var(--shadow-box);
--shadow-light: 0px 2px 8px rgba(0, 0, 0, 0.3), 0px 1px 4px rgba(0, 0, 0, 0.2);
--shadow-dark: 0px 2px 8px rgba(0, 0, 0, 0.5), 0px 1px 4px rgba(0, 0, 0, 0.2);
/* Semantic tokens: contextual usage */
--color-background: light-dark(var(--color-neutral-100), var(--color-neutral-900));
@@ -158,6 +157,11 @@
--color-text-button: var(--color-neutral-900);
--color-text-button-active: var(--color-neutral-100);
--shadow-box: var(--shadow-light);
--shadow-button: inset 0px 1px 2px rgba(0, 0, 0, 0.16), inset 0px -1px 4px rgba(0, 0, 0, 0.28), var(--shadow-box);
--shadow-button-active: inset 0px -1px 2px rgba(0, 0, 0, 0.16), inset 0px 1px 4px rgba(0, 0, 0, 0.28), var(--shadow-box);
--border: #d8d8d8;
--overlay: rgb(12 12 12 / 0.24);
--panel: rgb(255 255 255 / 0.76);
@@ -650,6 +654,12 @@ footer a:visited {
/* =======================
Media Queries for Responsive Design.
======================= */
@media (prefers-color-scheme: dark) {
:root {
--shadow-box: var(--shadow-dark);
}
}
@media screen and (max-width:768px) {
main {