mirror of
https://github.com/domfelipe/clima-cuida-care-weather.git
synced 2026-08-07 13:16:41 +00:00
feat: modernizar tema visual
This commit is contained in:
Theo-Prado
parent
eeded6c20e
commit
01bca4059a
2 changed files with 100 additions and 20 deletions
106
src/styles.css
106
src/styles.css
|
|
@ -1,19 +1,22 @@
|
|||
:root {
|
||||
color-scheme: light;
|
||||
--bg: oklch(98% 0.007 175);
|
||||
--bg: oklch(97% 0.018 205);
|
||||
--surface: oklch(100% 0 0);
|
||||
--surface-soft: oklch(96% 0.012 170);
|
||||
--surface-soft: oklch(95% 0.02 205);
|
||||
--glass: oklch(100% 0 0 / 0.78);
|
||||
--fg: oklch(19% 0.025 190);
|
||||
--muted: oklch(47% 0.025 190);
|
||||
--muted-2: oklch(62% 0.02 190);
|
||||
--border: oklch(88% 0.014 180);
|
||||
--accent: oklch(55% 0.12 170);
|
||||
--accent-2: oklch(62% 0.15 35);
|
||||
--border: oklch(86% 0.028 205);
|
||||
--accent: oklch(58% 0.13 208);
|
||||
--accent-2: oklch(70% 0.15 82);
|
||||
--green: oklch(58% 0.14 155);
|
||||
--yellow: oklch(72% 0.13 88);
|
||||
--orange: oklch(66% 0.16 50);
|
||||
--red: oklch(58% 0.19 25);
|
||||
--shadow: 0 22px 70px -44px oklch(22% 0.05 190 / 0.55);
|
||||
--sky-glow: oklch(83% 0.105 215 / 0.42);
|
||||
--sun-glow: oklch(85% 0.16 82 / 0.28);
|
||||
--shadow: 0 24px 72px -44px oklch(22% 0.06 215 / 0.55);
|
||||
--radius: 22px;
|
||||
--radius-sm: 14px;
|
||||
--font-display: "Avenir Next", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
||||
|
|
@ -23,6 +26,27 @@
|
|||
color: var(--fg);
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
color-scheme: dark;
|
||||
--bg: oklch(18% 0.035 236);
|
||||
--surface: oklch(23% 0.04 236);
|
||||
--surface-soft: oklch(27% 0.045 236);
|
||||
--glass: oklch(23% 0.04 236 / 0.76);
|
||||
--fg: oklch(96% 0.012 220);
|
||||
--muted: oklch(76% 0.028 220);
|
||||
--muted-2: oklch(64% 0.03 220);
|
||||
--border: oklch(37% 0.045 236);
|
||||
--accent: oklch(73% 0.13 210);
|
||||
--accent-2: oklch(78% 0.15 78);
|
||||
--green: oklch(72% 0.13 155);
|
||||
--yellow: oklch(82% 0.13 88);
|
||||
--orange: oklch(75% 0.16 50);
|
||||
--red: oklch(70% 0.18 25);
|
||||
--sky-glow: oklch(42% 0.11 240 / 0.45);
|
||||
--sun-glow: oklch(73% 0.15 78 / 0.18);
|
||||
--shadow: 0 30px 82px -46px oklch(4% 0.02 236 / 0.82);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -37,7 +61,9 @@ body {
|
|||
margin: 0;
|
||||
overflow-x: clip;
|
||||
background:
|
||||
linear-gradient(180deg, oklch(96% 0.017 174) 0, var(--bg) 360px),
|
||||
radial-gradient(circle at 14% -12%, var(--sun-glow), transparent 34vw),
|
||||
radial-gradient(circle at 84% 0, var(--sky-glow), transparent 36vw),
|
||||
linear-gradient(180deg, color-mix(in oklch, var(--bg), var(--accent) 12%) 0, var(--bg) 420px),
|
||||
var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
|
|
@ -79,9 +105,10 @@ a {
|
|||
grid-template-columns: 1fr;
|
||||
gap: 14px;
|
||||
padding: 16px clamp(16px, 4vw, 34px);
|
||||
border-bottom: 1px solid color-mix(in oklch, var(--border), white 24%);
|
||||
background: oklch(98% 0.007 175 / 0.86);
|
||||
backdrop-filter: blur(18px);
|
||||
border-bottom: 1px solid color-mix(in oklch, var(--border), transparent 20%);
|
||||
background: var(--glass);
|
||||
box-shadow: 0 16px 44px -34px color-mix(in oklch, var(--fg), transparent 35%);
|
||||
backdrop-filter: blur(20px) saturate(1.18);
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
|
|
@ -106,6 +133,47 @@ a {
|
|||
background: color-mix(in oklch, var(--accent), white 89%);
|
||||
}
|
||||
|
||||
.topbar-actions {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
min-height: 40px;
|
||||
width: fit-content;
|
||||
padding: 0 14px;
|
||||
border: 1px solid color-mix(in oklch, var(--border), var(--accent) 18%);
|
||||
border-radius: 999px;
|
||||
color: var(--fg);
|
||||
background: color-mix(in oklch, var(--surface), var(--accent) 6%);
|
||||
box-shadow: 0 14px 34px -28px color-mix(in oklch, var(--accent), black 45%);
|
||||
font-size: 0.86rem;
|
||||
font-weight: 780;
|
||||
transition:
|
||||
transform 180ms cubic-bezier(0.23, 1, 0.32, 1),
|
||||
border-color 180ms cubic-bezier(0.23, 1, 0.32, 1),
|
||||
background 180ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: color-mix(in oklch, var(--accent), var(--fg) 8%);
|
||||
background: color-mix(in oklch, var(--surface), var(--accent) 12%);
|
||||
}
|
||||
|
||||
.theme-toggle:active {
|
||||
transform: translateY(1px) scale(0.99);
|
||||
}
|
||||
|
||||
.theme-toggle svg {
|
||||
color: var(--accent-2);
|
||||
}
|
||||
|
||||
.search-cluster {
|
||||
position: relative;
|
||||
display: grid;
|
||||
|
|
@ -842,8 +910,14 @@ a {
|
|||
align-items: end;
|
||||
}
|
||||
|
||||
.profile-selector {
|
||||
.topbar-actions {
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.profile-selector {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.search-cluster {
|
||||
|
|
@ -881,12 +955,14 @@ a {
|
|||
|
||||
@media (min-width: 1180px) {
|
||||
.topbar {
|
||||
grid-template-columns: auto minmax(440px, 1fr) minmax(480px, auto);
|
||||
grid-template-columns: auto minmax(440px, 1fr) minmax(560px, auto);
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.profile-selector {
|
||||
.topbar-actions {
|
||||
grid-column: auto;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.profile-options {
|
||||
|
|
@ -934,6 +1010,10 @@ a {
|
|||
padding: 12px 10px;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.semaforo-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue