70 lines
1.7 KiB
CSS
70 lines
1.7 KiB
CSS
/* Catppuccin Latte (light) — default until JS sets data-theme */
|
|
:root,
|
|
[data-theme='latte'] {
|
|
--ctp-base: #eff1f5;
|
|
--ctp-mantle: #e6e9ef;
|
|
--ctp-crust: #dce0e8;
|
|
--ctp-surface0: #ccd0da;
|
|
--ctp-surface1: #bcc0cc;
|
|
--ctp-overlay0: #9ca0b0;
|
|
--ctp-overlay1: #8c8fa1;
|
|
--ctp-text: #4c4f69;
|
|
--ctp-subtext0: #6c6f85;
|
|
--ctp-subtext1: #5c5f77;
|
|
--ctp-mauve: #8839ef;
|
|
--ctp-mauve-muted: color-mix(in srgb, var(--ctp-mauve) 18%, var(--ctp-base));
|
|
--ctp-mauve-hover: color-mix(in srgb, var(--ctp-mauve) 12%, var(--ctp-base));
|
|
color-scheme: light;
|
|
}
|
|
|
|
/* Catppuccin Mocha (dark) */
|
|
[data-theme='mocha'] {
|
|
--ctp-base: #1e1e2e;
|
|
--ctp-mantle: #181825;
|
|
--ctp-crust: #11111b;
|
|
--ctp-surface0: #313244;
|
|
--ctp-surface1: #45475a;
|
|
--ctp-overlay0: #6c7086;
|
|
--ctp-overlay1: #7f849c;
|
|
--ctp-text: #cdd6f4;
|
|
--ctp-subtext0: #a6adc8;
|
|
--ctp-subtext1: #bac2de;
|
|
--ctp-mauve: #cba6f7;
|
|
--ctp-mauve-muted: color-mix(in srgb, var(--ctp-mauve) 22%, var(--ctp-base));
|
|
--ctp-mauve-hover: color-mix(in srgb, var(--ctp-mauve) 14%, var(--ctp-base));
|
|
color-scheme: dark;
|
|
}
|
|
|
|
:root {
|
|
color: var(--ctp-text);
|
|
background:
|
|
radial-gradient(
|
|
circle at top left,
|
|
color-mix(in srgb, var(--ctp-mauve) 22%, transparent) 0%,
|
|
transparent 45%
|
|
),
|
|
linear-gradient(180deg, var(--ctp-base) 0%, var(--ctp-mantle) 100%);
|
|
font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
|
|
font-synthesis: none;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
transition:
|
|
color 160ms ease,
|
|
background-color 160ms ease;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
background: transparent;
|
|
}
|
|
|
|
#root {
|
|
min-height: 100vh;
|
|
}
|