mirror of
https://github.com/HexCardGames/HexDeck.git
synced 2025-09-05 03:08:39 +02:00
e5f8876464
- Upgraded all frontend dependencies to their latest versions - Updated Tailwind CSS to v4 and adjusted configuration Note: This is WIP. Some features are broken and there are known bugs that need to be addressed.
88 lines
3.2 KiB
SCSS
88 lines
3.2 KiB
SCSS
@theme inline {
|
|
--color-primary-50: color-mix(in srgb, var(--primary) 10%, white);
|
|
--color-primary-100: color-mix(in srgb, var(--primary) 20%, white);
|
|
--color-primary-200: color-mix(in srgb, var(--primary) 30%, white);
|
|
--color-primary-300: color-mix(in srgb, var(--primary) 40%, white);
|
|
--color-primary-400: color-mix(in srgb, var(--primary) 50%, white);
|
|
--color-primary-500: color-mix(in srgb, var(--primary) 60%, white);
|
|
--color-primary-600: color-mix(in srgb, var(--primary) 70%, white);
|
|
--color-primary-700: color-mix(in srgb, var(--primary) 80%, white);
|
|
--color-primary-800: color-mix(in srgb, var(--primary) 90%, white);
|
|
--color-primary-900: var(--primary);
|
|
--color-primary-950: color-mix(in srgb, var(--primary) 90%, black);
|
|
|
|
--color-secondary-50: color-mix(in srgb, var(--secondary) 10%, white);
|
|
--color-secondary-100: color-mix(in srgb, var(--secondary) 20%, white);
|
|
--color-secondary-200: color-mix(in srgb, var(--secondary) 30%, white);
|
|
--color-secondary-300: color-mix(in srgb, var(--secondary) 40%, white);
|
|
--color-secondary-400: color-mix(in srgb, var(--secondary) 50%, white);
|
|
--color-secondary-500: color-mix(in srgb, var(--secondary) 60%, white);
|
|
--color-secondary-600: color-mix(in srgb, var(--secondary) 70%, white);
|
|
--color-secondary-700: color-mix(in srgb, var(--secondary) 80%, white);
|
|
--color-secondary-800: color-mix(in srgb, var(--secondary) 90%, white);
|
|
--color-secondary-900: var(--secondary);
|
|
--color-secondary-950: color-mix(in srgb, var(--secondary) 90%, black);
|
|
|
|
--color-tertiary-50: color-mix(in srgb, var(--tertiary) 10%, white);
|
|
--color-tertiary-100: color-mix(in srgb, var(--tertiary) 20%, white);
|
|
--color-tertiary-200: color-mix(in srgb, var(--tertiary) 30%, white);
|
|
--color-tertiary-300: color-mix(in srgb, var(--tertiary) 40%, white);
|
|
--color-tertiary-400: color-mix(in srgb, var(--tertiary) 50%, white);
|
|
--color-tertiary-500: color-mix(in srgb, var(--tertiary) 60%, white);
|
|
--color-tertiary-600: color-mix(in srgb, var(--tertiary) 70%, white);
|
|
--color-tertiary-700: color-mix(in srgb, var(--tertiary) 80%, white);
|
|
--color-tertiary-800: color-mix(in srgb, var(--tertiary) 90%, white);
|
|
--color-tertiary-900: var(--tertiary);
|
|
--color-tertiary-950: color-mix(in srgb, var(--tertiary) 90%, black);
|
|
}
|
|
|
|
@layer base {
|
|
button,
|
|
[role='button'] {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
color: var(--default-element-color);
|
|
background-color: var(--default-background-color);
|
|
transition: color 0.4s ease, background-color 0.2s ease;
|
|
}
|
|
|
|
:root {
|
|
font-family: "Lexend Deca", serif;
|
|
font-optical-sizing: auto;
|
|
line-height: 1.5;
|
|
font-weight: 400;
|
|
|
|
font-synthesis: none;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
|
--primary: #d5b6ff;
|
|
--secondary: #ffb6f5;
|
|
--tertiary: #08aeea;
|
|
|
|
--default-element-color: #213547;
|
|
--default-background-color: #ffffff;
|
|
}
|
|
|
|
body.dark-theme {
|
|
--primary: #53346a;
|
|
--secondary: #710cff;
|
|
--tertiary: #0b465c;
|
|
|
|
--default-element-color: rgba(255, 255, 255, 0.87);
|
|
--default-background-color: oklch(0.279 0.041 260.031);
|
|
}
|
|
|
|
body.light-theme {
|
|
--primary: #d5b6ff;
|
|
--secondary: #ffb6f5;
|
|
--tertiary: #08aeea;
|
|
|
|
--default-element-color: #213547;
|
|
--default-background-color: #ffffff;
|
|
} |