139 lines
7.0 KiB
CSS
139 lines
7.0 KiB
CSS
@media -moz-pref("userChrome.theme-material") {
|
|
:root {
|
|
--md-sys-color-primary: #0d6680;
|
|
--md-sys-color-surface-tint: #0d6680;
|
|
--md-sys-color-on-primary: #ffffff;
|
|
--md-sys-color-primary-container: #baeaff;
|
|
--md-sys-color-on-primary-container: #001f29;
|
|
--md-sys-color-secondary: #4c616b;
|
|
--md-sys-color-on-secondary: #ffffff;
|
|
--md-sys-color-secondary-container: #cfe6f1;
|
|
--md-sys-color-on-secondary-container: #071e26;
|
|
--md-sys-color-tertiary: #5c5b7e;
|
|
--md-sys-color-on-tertiary: #ffffff;
|
|
--md-sys-color-tertiary-container: #e2dfff;
|
|
--md-sys-color-on-tertiary-container: #181837;
|
|
--md-sys-color-error: #ba1a1a;
|
|
--md-sys-color-on-error: #ffffff;
|
|
--md-sys-color-error-container: #ffdad6;
|
|
--md-sys-color-on-error-container: #410002;
|
|
--md-sys-color-background: #f5fafd;
|
|
--md-sys-color-on-background: #171c1f;
|
|
--md-sys-color-surface: #f5fafd;
|
|
--md-sys-color-on-surface: #171c1f;
|
|
--md-sys-color-surface-variant: #dce4e8;
|
|
--md-sys-color-on-surface-variant: #40484c;
|
|
--md-sys-color-outline: #70787d;
|
|
--md-sys-color-outline-variant: #c0c8cc;
|
|
--md-sys-color-shadow: #000000;
|
|
--md-sys-color-scrim: #000000;
|
|
--md-sys-color-inverse-surface: #2c3134;
|
|
--md-sys-color-inverse-on-surface: #edf1f5;
|
|
--md-sys-color-inverse-primary: #89d0ee;
|
|
--md-sys-color-primary-fixed: #baeaff;
|
|
--md-sys-color-on-primary-fixed: #001f29;
|
|
--md-sys-color-primary-fixed-dim: #89d0ee;
|
|
--md-sys-color-on-primary-fixed-variant: #004d62;
|
|
--md-sys-color-secondary-fixed: #cfe6f1;
|
|
--md-sys-color-on-secondary-fixed: #071e26;
|
|
--md-sys-color-secondary-fixed-dim: #b4cad5;
|
|
--md-sys-color-on-secondary-fixed-variant: #354a53;
|
|
--md-sys-color-tertiary-fixed: #e2dfff;
|
|
--md-sys-color-on-tertiary-fixed: #181837;
|
|
--md-sys-color-tertiary-fixed-dim: #c4c3ea;
|
|
--md-sys-color-on-tertiary-fixed-variant: #444465;
|
|
--md-sys-color-surface-dim: #d6dbde;
|
|
--md-sys-color-surface-bright: #f5fafd;
|
|
--md-sys-color-surface-container-lowest: #ffffff;
|
|
--md-sys-color-surface-container-low: #f0f4f7;
|
|
--md-sys-color-surface-container: #f5fafd;
|
|
--md-sys-color-surface-container-high: #f5fafd;
|
|
--md-sys-color-surface-container-highest: #f5fafd;
|
|
|
|
--m3-radius: 12px;
|
|
--m3-radius-sm: 10px;
|
|
--m3-elev-0: none;
|
|
--m3-elev-1: 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 8%, transparent), 0 1px 3px color-mix(in srgb, var(--md-sys-color-shadow) 6%, transparent);
|
|
--m3-elev-2: 0 2px 6px color-mix(in srgb, var(--md-sys-color-shadow) 10%, transparent), 0 1px 3px color-mix(in srgb, var(--md-sys-color-shadow) 6%, transparent);
|
|
--m3-elev-3: 0 11px 7px color-mix(in srgb, var(--md-sys-color-shadow) 19%, transparent), 0 13px 25px color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent);
|
|
--m3-elev-4: 0 14px 12px color-mix(in srgb, var(--md-sys-color-shadow) 17%, transparent), 0 20px 40px color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent);
|
|
--m3-elev-5: 0 17px 17px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent), 0 27px 55px color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent);
|
|
|
|
--tab-height: 34px;
|
|
--urlbar-height: 38px;
|
|
|
|
--state-hover: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
|
|
--state-press: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
|
|
|
--focus-ring: 0 0 0 2px color-mix(in srgb, var(--md-sys-color-primary) 70%, transparent);
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--md-sys-color-primary: #89d0ee;
|
|
--md-sys-color-surface-tint: #89d0ee;
|
|
--md-sys-color-on-primary: #003545;
|
|
--md-sys-color-primary-container: #004d62;
|
|
--md-sys-color-on-primary-container: #baeaff;
|
|
--md-sys-color-secondary: #b4cad5;
|
|
--md-sys-color-on-secondary: #1e333c;
|
|
--md-sys-color-secondary-container: #354a53;
|
|
--md-sys-color-on-secondary-container: #cfe6f1;
|
|
--md-sys-color-tertiary: #c4c3ea;
|
|
--md-sys-color-on-tertiary: #2d2d4d;
|
|
--md-sys-color-tertiary-container: #444465;
|
|
--md-sys-color-on-tertiary-container: #e2dfff;
|
|
--md-sys-color-error: #ffb4ab;
|
|
--md-sys-color-on-error: #690005;
|
|
--md-sys-color-error-container: #93000a;
|
|
--md-sys-color-on-error-container: #ffdad6;
|
|
--md-sys-color-background: #0f1417;
|
|
--md-sys-color-on-background: #dee3e6;
|
|
--md-sys-color-surface: #0f1417;
|
|
--md-sys-color-on-surface: #dee3e6;
|
|
--md-sys-color-surface-variant: #40484c;
|
|
--md-sys-color-on-surface-variant: #c0c8cc;
|
|
--md-sys-color-outline: #8a9296;
|
|
--md-sys-color-outline-variant: #40484c;
|
|
--md-sys-color-shadow: #000000;
|
|
--md-sys-color-scrim: #000000;
|
|
--md-sys-color-inverse-surface: #dee3e6;
|
|
--md-sys-color-inverse-on-surface: #2c3134;
|
|
--md-sys-color-inverse-primary: #0d6680;
|
|
--md-sys-color-primary-fixed: #baeaff;
|
|
--md-sys-color-on-primary-fixed: #001f29;
|
|
--md-sys-color-primary-fixed-dim: #89d0ee;
|
|
--md-sys-color-on-primary-fixed-variant: #004d62;
|
|
--md-sys-color-secondary-fixed: #cfe6f1;
|
|
--md-sys-color-on-secondary-fixed: #071e26;
|
|
--md-sys-color-secondary-fixed-dim: #b4cad5;
|
|
--md-sys-color-on-secondary-fixed-variant: #354a53;
|
|
--md-sys-color-tertiary-fixed: #e2dfff;
|
|
--md-sys-color-on-tertiary-fixed: #181837;
|
|
--md-sys-color-tertiary-fixed-dim: #c4c3ea;
|
|
--md-sys-color-on-tertiary-fixed-variant: #444465;
|
|
--md-sys-color-surface-dim: #0f1417;
|
|
--md-sys-color-surface-bright: #353a3d;
|
|
--md-sys-color-surface-container-lowest: #0a0f11;
|
|
--md-sys-color-surface-container-low: #171c1f;
|
|
--md-sys-color-surface-container: #1b2023;
|
|
--md-sys-color-surface-container-high: #252b2d;
|
|
--md-sys-color-surface-container-highest: #303638;
|
|
|
|
--m3-elev-1: 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 50%, transparent), 0 1px 3px color-mix(in srgb, var(--md-sys-color-shadow) 35%, transparent);
|
|
--m3-elev-2: 0 4px 10px color-mix(in srgb, var(--md-sys-color-shadow) 55%, transparent), 0 1px 3px color-mix(in srgb, var(--md-sys-color-shadow) 35%, transparent);
|
|
--m3-elev-3: 0 11px 7px color-mix(in srgb, var(--md-sys-color-shadow) 45%, transparent), 0 13px 25px color-mix(in srgb, var(--md-sys-color-shadow) 55%, transparent);
|
|
--m3-elev-4: 0 14px 12px color-mix(in srgb, var(--md-sys-color-shadow) 42%, transparent), 0 20px 40px color-mix(in srgb, var(--md-sys-color-shadow) 55%, transparent);
|
|
--m3-elev-5: 0 17px 17px color-mix(in srgb, var(--md-sys-color-shadow) 40%, transparent), 0 27px 55px color-mix(in srgb, var(--md-sys-color-shadow) 55%, transparent);
|
|
|
|
--state-hover: color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent);
|
|
--state-press: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
|
|
}
|
|
}
|
|
|
|
/* idk if this even works, but the suggestion in the material updated readme bricks symbols no matter how many fallbacks I add */
|
|
:root {
|
|
font-family: system-ui, "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
|
|
}
|