91 lines
2.3 KiB
CSS
91 lines
2.3 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--color-base: 239 237 242;
|
|
--color-surface: 247 246 249;
|
|
--color-overlay: 242 240 245;
|
|
--color-muted: 146 142 175;
|
|
--color-subtle: 139 136 160;
|
|
--color-text: 14 13 17;
|
|
--highlight-low: 11 18 22;
|
|
--highlight-med: 32 37 38;
|
|
--highlight-high: 49 55 58;
|
|
--color-foam: 32 159 181;
|
|
--color-love: 220 100 130;
|
|
--color-pine: 40 105 131;
|
|
--color-accent: 136 57 239;
|
|
--color-accent-20: #dac9f1;
|
|
|
|
--nav-height: 48px;
|
|
}
|
|
}
|
|
|
|
.dark {
|
|
--color-base: 14 13 17;
|
|
--color-surface: 21 18 28;
|
|
--color-overlay: 30 26 40;
|
|
--color-muted: 99 92 117;
|
|
--color-subtle: 152 146 171;
|
|
--color-text: 247 246 249;
|
|
--highlight-low: 244 237 232;
|
|
--highlight-med: 223 218 217;
|
|
--highlight-high: 206 202 205;
|
|
--color-foam: 145 215 227;
|
|
--color-love: 235 111 146;
|
|
--color-pine: 49 116 143;
|
|
--color-accent: 154 87 237;
|
|
--color-accent-20: #2a1c3d;
|
|
|
|
color-scheme: dark;
|
|
}
|
|
|
|
*, ::before, ::after {
|
|
border-color: rgb(var(--color-muted) / 0.2);
|
|
@apply ease-[cubic-bezier(0.25,_1,_0.5,_1)];
|
|
}
|
|
|
|
html, body {
|
|
min-height: 100vh;
|
|
overflow-x: hidden !important;
|
|
background-color: rgb(var(--color-base));
|
|
overflow-wrap: break-word;
|
|
color: rgb(var(--color-text));
|
|
}
|
|
|
|
::selection {
|
|
background: rgb(var(--color-muted) / 0.2);
|
|
}
|
|
|
|
*:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
/* input */
|
|
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="submit"], [type="reset"], [type="button"]),
|
|
textarea {
|
|
padding: 0.5rem 1rem 0.5rem 1rem;
|
|
resize: none;
|
|
background-color: rgb(var(--color-overlay));
|
|
border-radius: 0.375rem;
|
|
border-width: 1px;
|
|
transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
max-width: 16rem;
|
|
}
|
|
|
|
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="submit"], [type="reset"], [type="button"]):hover,
|
|
textarea:hover {
|
|
border-color: rgb(var(--color-muted) / 0.4);
|
|
}
|
|
|
|
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="submit"], [type="reset"], [type="button"]):focus,
|
|
textarea:focus {
|
|
border-color: rgb(var(--color-muted) / 0.6);
|
|
}
|
|
|
|
::placeholder {
|
|
font-style: italic;
|
|
color: rgb(var(--color-subtle));
|
|
} |