initial commit
This commit is contained in:
+782
@@ -0,0 +1,782 @@
|
||||
/* === Weather Consensus – Enhanced Theme with Day/Night + Rain + Snow === */
|
||||
/* ---------- Design tokens (Night default) ---------- */
|
||||
:root {
|
||||
--bg: #0b1220;
|
||||
--bg-2: #0d1526;
|
||||
--panel: #10192b;
|
||||
--panel-2: #0f1726;
|
||||
--card: #121c31;
|
||||
--card-2: #16223a;
|
||||
--muted: #98a2b3;
|
||||
--text: #e6eefc;
|
||||
--brand: #5ea0ff;
|
||||
--accent: #8ef2d0;
|
||||
--accent-2: #b388ff;
|
||||
--warning: #ffd166;
|
||||
--error: #ff6b6b;
|
||||
--border: #1e2a42;
|
||||
--glass: rgba(255, 255, 255, 0.05);
|
||||
--shadow-lg: 0 20px 45px rgba(0, 0, 0, .35);
|
||||
--shadow-md: 0 10px 25px rgba(0, 0, 0, .28);
|
||||
--radius-lg: 16px;
|
||||
--radius-md: 12px;
|
||||
--radius-sm: 10px;
|
||||
}
|
||||
|
||||
/* ---------- Day theme overrides (darker sky) ---------- */
|
||||
body[data-theme="day"] {
|
||||
--bg: #9ec7ff;
|
||||
/* zenith */
|
||||
--bg-2: #cfe4ff;
|
||||
/* near horizon */
|
||||
--panel: #ffffff;
|
||||
--panel-2: #f6fbff;
|
||||
--card: #ffffff;
|
||||
--card-2: #f4f9ff;
|
||||
--text: #0e1c33;
|
||||
--muted: #3c4b63;
|
||||
--border: #c0d6f7;
|
||||
--brand: #2e75ff;
|
||||
--accent: #00bba0;
|
||||
--accent-2: #8a75ff;
|
||||
}
|
||||
|
||||
/* ---------- Base ---------- */
|
||||
* {
|
||||
box-sizing: border-box
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background:
|
||||
radial-gradient(1200px 600px at 70% -10%, #1b2a4a33 0%, transparent 60%),
|
||||
linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 60%, var(--bg) 100%);
|
||||
color: var(--text);
|
||||
font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
|
||||
letter-spacing: .2px;
|
||||
}
|
||||
|
||||
/* subtle animated star dots (night only) */
|
||||
body:not([data-theme="day"])::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
background-image:
|
||||
radial-gradient(1px 1px at 10% 20%, #fff2 40%, transparent 41%),
|
||||
radial-gradient(1px 1px at 80% 30%, #fff3 40%, transparent 41%),
|
||||
radial-gradient(1px 1px at 50% 70%, #fff2 40%, transparent 41%),
|
||||
radial-gradient(1px 1px at 20% 80%, #fff1 40%, transparent 41%);
|
||||
animation: twinkle 8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: .4
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: .8
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
width: min(1100px, 92vw);
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
z-index: 2
|
||||
}
|
||||
|
||||
/* ---------- Top gradient bar ---------- */
|
||||
.topbar {
|
||||
height: 6px;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
background: linear-gradient(90deg,
|
||||
#4ea2ff 0%,
|
||||
#7b86ff 20%,
|
||||
#b07cff 40%,
|
||||
#ff7fd1 60%,
|
||||
#77e1c6 80%,
|
||||
#4ea2ff 100%);
|
||||
box-shadow: 0 2px 10px rgba(94, 160, 255, .6);
|
||||
}
|
||||
|
||||
/* ---------- Header / Hero with clouds ---------- */
|
||||
.site-header {
|
||||
padding-top: 24px
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid #12203b;
|
||||
background: radial-gradient(800px 240px at 50% 0%, #1d2b48aa 0%, transparent 70%);
|
||||
}
|
||||
|
||||
/* Day: softer atmospheric glow */
|
||||
body[data-theme="day"] .hero {
|
||||
background: radial-gradient(900px 260px at 70% -10%,
|
||||
rgba(255, 255, 255, 0.65) 0%,
|
||||
rgba(255, 255, 255, 0.15) 40%,
|
||||
transparent 75%);
|
||||
}
|
||||
|
||||
.hero-inner {
|
||||
padding: 2.6rem 1rem 1.1rem
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: .9rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-top: .6rem;
|
||||
}
|
||||
|
||||
.site-header h1 {
|
||||
margin: .25rem 0 .35rem;
|
||||
font-size: 2.1rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: .3px;
|
||||
text-shadow: 0 3px 16px rgba(0, 0, 0, .35);
|
||||
}
|
||||
|
||||
body[data-theme="day"] .site-header h1 {
|
||||
text-shadow: none
|
||||
}
|
||||
|
||||
.tagline {
|
||||
color: var(--muted);
|
||||
margin: 0 .5rem .9rem;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
/* ---------- Minimal modern sun (day only) ---------- */
|
||||
.sun {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 40px;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
display: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
body[data-theme="day"] .sun {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sun .disc {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at 35% 35%,
|
||||
#fff7c2 0%,
|
||||
#ffe169 45%,
|
||||
#ffc94d 75%,
|
||||
#ffb84b 100%);
|
||||
box-shadow:
|
||||
0 0 45px 12px rgba(255, 215, 91, 0.45),
|
||||
0 0 120px 40px rgba(255, 215, 91, 0.15);
|
||||
}
|
||||
|
||||
.sun .ray {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* if old markup exists */
|
||||
|
||||
/* ---------- Minimal modern moon (night only) ---------- */
|
||||
.moon {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
/* matches sun placement for symmetry */
|
||||
right: 40px;
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
display: none;
|
||||
z-index: 0;
|
||||
/* behind clouds/precip, same as sun */
|
||||
}
|
||||
|
||||
body[data-theme="night"] .moon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* show only at night */
|
||||
body[data-theme="day"] .moon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* hide in day */
|
||||
|
||||
.moon .disc {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
/* Soft, cool moon gradient */
|
||||
background: radial-gradient(circle at 40% 40%,
|
||||
#f7f9ff 0%,
|
||||
#e9efff 45%,
|
||||
#d6defe 72%,
|
||||
#c3ccff 100%);
|
||||
/* Subtle bluish glow */
|
||||
box-shadow:
|
||||
0 0 40px 12px rgba(150, 170, 255, 0.28),
|
||||
0 0 120px 40px rgba(140, 160, 255, 0.14);
|
||||
}
|
||||
|
||||
/* (Optional) very subtle craters — keep modern & minimal */
|
||||
.moon .disc {
|
||||
background:
|
||||
radial-gradient(10px 10px at 28% 36%, rgba(0, 0, 0, .12) 0 55%, transparent 56%),
|
||||
radial-gradient(7px 7px at 62% 30%, rgba(0, 0, 0, .10) 0 55%, transparent 56%),
|
||||
radial-gradient(6px 6px at 50% 64%, rgba(0, 0, 0, .10) 0 55%, transparent 56%),
|
||||
radial-gradient(circle at 40% 40%, #f7f9ff 0%, #e9efff 45%, #d6defe 72%, #c3ccff 100%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Clouds */
|
||||
.clouds {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 120px;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
opacity: .9;
|
||||
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .18));
|
||||
}
|
||||
|
||||
.layer-back {
|
||||
animation: driftBack 36s linear infinite;
|
||||
opacity: .45
|
||||
}
|
||||
|
||||
.layer-front {
|
||||
animation: driftFront 28s linear infinite;
|
||||
opacity: .65
|
||||
}
|
||||
|
||||
.clouds svg {
|
||||
width: 150%;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
@keyframes driftBack {
|
||||
0% {
|
||||
transform: translateX(0)
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-20%)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes driftFront {
|
||||
0% {
|
||||
transform: translateX(0)
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-35%)
|
||||
}
|
||||
}
|
||||
|
||||
/* Lightning flash (kept subtle; barely visible by day) */
|
||||
.lightning {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
background: radial-gradient(400px 220px at 70% 0%, #fff0 0%, #fff0 55%, #fff3 55.5%, #fff0 56%);
|
||||
mix-blend-mode: screen;
|
||||
opacity: 0;
|
||||
animation: flash 9s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes flash {
|
||||
|
||||
0%,
|
||||
86%,
|
||||
100% {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
89% {
|
||||
opacity: .22
|
||||
}
|
||||
|
||||
90% {
|
||||
opacity: .55
|
||||
}
|
||||
|
||||
92% {
|
||||
opacity: .12
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Rain overlay ---------- */
|
||||
.rain {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 3;
|
||||
opacity: 0;
|
||||
transition: opacity .3s ease
|
||||
}
|
||||
|
||||
body.rainy .rain {
|
||||
opacity: .65
|
||||
}
|
||||
|
||||
.rain span {
|
||||
position: absolute;
|
||||
top: -10vh;
|
||||
width: 2px;
|
||||
height: 8vh;
|
||||
background: linear-gradient(to bottom, #aee1ff 0%, #4f9bf2 80%, transparent 100%);
|
||||
opacity: .8;
|
||||
border-radius: 1px;
|
||||
filter: blur(.3px);
|
||||
animation: drop 1.2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes drop {
|
||||
0% {
|
||||
transform: translateY(-12vh)
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(110vh)
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Snow overlay ---------- */
|
||||
.snow {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 3;
|
||||
opacity: 0;
|
||||
transition: opacity .3s ease
|
||||
}
|
||||
|
||||
body.snowy .snow {
|
||||
opacity: .9
|
||||
}
|
||||
|
||||
.snow span {
|
||||
position: absolute;
|
||||
top: -10vh;
|
||||
width: var(--size, 6px);
|
||||
height: var(--size, 6px);
|
||||
background: #ffffff;
|
||||
border-radius: 50%;
|
||||
opacity: var(--alpha, .9);
|
||||
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .28));
|
||||
animation: snowFall var(--dur, 8s) linear infinite;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
body.snowy .snow span {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes snowFall {
|
||||
0% {
|
||||
transform: translateY(-12vh) translateX(0)
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(110vh) translateX(var(--drift, 40px))
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Search ---------- */
|
||||
.search {
|
||||
display: flex;
|
||||
gap: .6rem;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.search input {
|
||||
width: min(520px, 86vw);
|
||||
padding: .85rem 1rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #22314e;
|
||||
background: #0e1626;
|
||||
color: var(--text);
|
||||
outline: none;
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 8px 18px rgba(0, 0, 0, .35);
|
||||
}
|
||||
|
||||
body[data-theme="day"] .search input {
|
||||
background: #ffffff;
|
||||
border-color: #cfe3ff;
|
||||
color: #10233d;
|
||||
box-shadow: 0 8px 18px rgba(0, 0, 0, .10)
|
||||
}
|
||||
|
||||
.search input:focus {
|
||||
border-color: #2f4b7f;
|
||||
box-shadow: 0 0 0 4px #2f4b7f33
|
||||
}
|
||||
|
||||
.search button {
|
||||
padding: .85rem 1rem;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
background: linear-gradient(135deg, var(--brand), var(--accent-2));
|
||||
color: #061229;
|
||||
font-weight: 800;
|
||||
letter-spacing: .3px;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.search button:hover {
|
||||
filter: brightness(1.06)
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .45rem;
|
||||
color: var(--muted);
|
||||
font-weight: 600
|
||||
}
|
||||
|
||||
.theme-toggle select {
|
||||
appearance: none;
|
||||
padding: .62rem .7rem;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #22314e;
|
||||
background: #0e1626;
|
||||
color: var(--text)
|
||||
}
|
||||
|
||||
body[data-theme="day"] .theme-toggle select {
|
||||
background: #fff;
|
||||
border-color: #cfe3ff;
|
||||
color: #10233d
|
||||
}
|
||||
|
||||
/* ---------- Autocomplete (portal dropdown) ---------- */
|
||||
.sugg-box {
|
||||
position: fixed;
|
||||
/* NOTE: JS controls left/transform now */
|
||||
display: none;
|
||||
z-index: 10000;
|
||||
background: #0e1626;
|
||||
border: 1px solid #22314e;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 18px 38px rgba(0, 0, 0, .35);
|
||||
max-height: 55vh;
|
||||
overflow: auto;
|
||||
color: var(--text);
|
||||
/* No default left/transform here to avoid conflict with JS */
|
||||
}
|
||||
|
||||
.sugg-item {
|
||||
padding: .7rem .95rem;
|
||||
border-bottom: 1px solid #18253e;
|
||||
cursor: pointer;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.sugg-item:last-child {
|
||||
border-bottom: none
|
||||
}
|
||||
|
||||
.sugg-item:hover,
|
||||
.sugg-item:focus {
|
||||
background: #15223a;
|
||||
outline: none
|
||||
}
|
||||
|
||||
/* Day theme for autocomplete: light background + dark text */
|
||||
body[data-theme="day"] .sugg-box {
|
||||
background: #ffffff;
|
||||
border-color: #cfe3ff;
|
||||
color: #0e1c33;
|
||||
box-shadow: 0 18px 38px rgba(0, 0, 0, .14);
|
||||
}
|
||||
|
||||
body[data-theme="day"] .sugg-item {
|
||||
color: #0e1c33;
|
||||
border-bottom: 1px solid #e6efff;
|
||||
}
|
||||
|
||||
body[data-theme="day"] .sugg-item:hover,
|
||||
body[data-theme="day"] .sugg-item:focus {
|
||||
background: #f0f6ff;
|
||||
}
|
||||
|
||||
/* ---------- Panels & Grid ---------- */
|
||||
.panel {
|
||||
background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.1rem;
|
||||
margin: 1rem 0;
|
||||
color: var(--muted);
|
||||
box-shadow: var(--shadow-md);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
margin: 1rem 0
|
||||
}
|
||||
|
||||
@media(min-width:720px) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(2, 1fr)
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width:1024px) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(3, 1fr)
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Forecast cards ---------- */
|
||||
.card {
|
||||
position: relative;
|
||||
background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
|
||||
border: 1px solid #1f2c47;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1rem;
|
||||
box-shadow: var(--shadow-lg);
|
||||
overflow: hidden;
|
||||
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
|
||||
}
|
||||
|
||||
.card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background: radial-gradient(600px 300px at 120% -10%, rgba(94, 160, 255, 0.12), transparent 60%);
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 22px 50px rgba(0, 0, 0, .42);
|
||||
border-color: #28406c;
|
||||
}
|
||||
|
||||
.card-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: .5rem;
|
||||
gap: .6rem
|
||||
}
|
||||
|
||||
.card .day {
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
.card .hi .label {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
font-size: .8rem
|
||||
}
|
||||
|
||||
.card .hi .val {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 800
|
||||
}
|
||||
|
||||
/* ---------- Metrics rows ---------- */
|
||||
.metrics {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: .6rem;
|
||||
margin-top: .6rem
|
||||
}
|
||||
|
||||
.metric {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: .6rem;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.metric .i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: var(--accent);
|
||||
display: grid;
|
||||
place-items: center
|
||||
}
|
||||
|
||||
.metric .i svg {
|
||||
width: 22px;
|
||||
height: 22px
|
||||
}
|
||||
|
||||
.metric .name {
|
||||
color: var(--muted)
|
||||
}
|
||||
|
||||
.metric .value {
|
||||
font-weight: 800
|
||||
}
|
||||
|
||||
/* ---------- Provider breakdown ---------- */
|
||||
.providers {
|
||||
margin-top: .8rem
|
||||
}
|
||||
|
||||
.providers summary {
|
||||
cursor: pointer;
|
||||
color: var(--brand);
|
||||
font-weight: 700;
|
||||
letter-spacing: .2px
|
||||
}
|
||||
|
||||
.prov-pre {
|
||||
white-space: pre-wrap;
|
||||
overflow: auto;
|
||||
background: #0e1626;
|
||||
border: 1px dashed #27406b;
|
||||
border-radius: 10px;
|
||||
padding: .7rem;
|
||||
margin: .6rem 0;
|
||||
color: #bdd0ff;
|
||||
}
|
||||
|
||||
body[data-theme="day"] .prov-pre {
|
||||
background: #f6fbff;
|
||||
color: #213555;
|
||||
border-color: #cfe3ff
|
||||
}
|
||||
|
||||
/* ---------- Utility / Micro ---------- */
|
||||
.error {
|
||||
background: #240d12;
|
||||
border: 1px solid #4d1c2a;
|
||||
color: #ffb5b5;
|
||||
padding: .9rem;
|
||||
border-radius: 12px
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
padding: 1.2rem 0;
|
||||
text-align: center;
|
||||
color: var(--muted)
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 3px solid #6db0ff;
|
||||
outline-offset: 2px
|
||||
}
|
||||
|
||||
/* Reduced motion: keep precipitation (slower), disable heavy chrome */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
.layer-back,
|
||||
.layer-front,
|
||||
.lightning,
|
||||
body::before,
|
||||
.sun {
|
||||
animation: none !important
|
||||
}
|
||||
|
||||
.rain span {
|
||||
animation-duration: 2s !important;
|
||||
}
|
||||
|
||||
.snow span {
|
||||
animation-duration: calc(var(--dur, 8s) * 1.5) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#useMyLocation{
|
||||
padding:.85rem 1rem;
|
||||
border-radius:12px;
|
||||
border:1px solid var(--border);
|
||||
background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
|
||||
color:var(--text);
|
||||
font-weight:700;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
#useMyLocation:hover{ filter:brightness(1.03) }
|
||||
body[data-theme="day"] #useMyLocation{
|
||||
background:#ffffff;
|
||||
border-color:#cfe3ff;
|
||||
color:#10233d;
|
||||
box-shadow:0 8px 18px rgba(0,0,0,.10);
|
||||
}
|
||||
|
||||
#radarControls button {
|
||||
padding:.55rem .9rem;
|
||||
border-radius:10px;
|
||||
border:1px solid var(--border);
|
||||
background:linear-gradient(180deg,var(--panel) 0%, var(--panel-2) 100%);
|
||||
color:var(--text); font-weight:700;
|
||||
}
|
||||
/* --- Card header layout tweaks --- */
|
||||
.card .card-head {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto; /* date row on left, hi/low on right */
|
||||
gap: .25rem 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card .card-head .date-row {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
white-space: nowrap; /* keep "Wed, Jan 28" together */
|
||||
min-width: 0; /* prevent overflow issues in narrow cards */
|
||||
}
|
||||
|
||||
.card .card-head .date-text {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Small pill for “Today” */
|
||||
.today-badge {
|
||||
display: inline-block;
|
||||
font-size: .78rem;
|
||||
line-height: 1;
|
||||
padding: .18rem .45rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(80,145,255,.16); /* subtle blue pill on dark */
|
||||
color: #b9d4ff; /* lighter blue text */
|
||||
border: 1px solid rgba(80,145,255,.3);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Optional: keep the hi/low line from wrapping too early */
|
||||
.card .card-head .hi-lo {
|
||||
white-space: nowrap;
|
||||
justify-self: end;
|
||||
}
|
||||
Reference in New Issue
Block a user