feat(ui): dark-mode token sweep, mobile nav safe-area and a11y polish
- Convert hardcoded light surfaces/borders/text in index.css to theme tokens - Token-driven status cards, semantic colors, elevation shadows - Mobile bottom nav: 20px icons, aria-current, safe-area inset padding - Neutral dark pre-mount canvas fallback
This commit is contained in:
nh9961
@@ -10,9 +10,10 @@ export function MobileNav({ activeView, onChange }: { activeView: AppView; onCha
|
||||
type="button"
|
||||
className={`mobile-nav-item ${activeView === item.id ? "mobile-nav-item-active" : ""}`}
|
||||
onClick={() => onChange(item.id)}
|
||||
aria-current={activeView === item.id ? "page" : undefined}
|
||||
>
|
||||
<item.icon size={16} aria-hidden="true" />
|
||||
{item.label}
|
||||
<item.icon size={20} aria-hidden="true" />
|
||||
<span>{item.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
@@ -18,13 +18,13 @@ export function StatusRail({ busyAction, syncError, setupStatus }: StatusRailPro
|
||||
</div>
|
||||
)}
|
||||
{syncError && (
|
||||
<div className="status-card" style={{ borderColor: "#ffc9c2", background: "#fff3f1", color: "#9f1c16" }}>
|
||||
<div className="status-card status-card--error">
|
||||
<AlertTriangle size={17} aria-hidden="true" />
|
||||
{syncError}
|
||||
</div>
|
||||
)}
|
||||
{setupStatus.state === "error" && (
|
||||
<div className="status-card" style={{ borderColor: "#f9e3b0", background: "#fff8e8", color: "#7a4e00" }}>
|
||||
<div className="status-card status-card--warning">
|
||||
<AlertTriangle size={17} aria-hidden="true" />
|
||||
{setupStatus.message}
|
||||
</div>
|
||||
|
||||
+152
-132
@@ -10,6 +10,12 @@
|
||||
background: #eef3fb;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
background: #101418;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -24,8 +30,8 @@ body,
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
background: #eef3fb;
|
||||
color: #202124;
|
||||
background: transparent;
|
||||
color: var(--text, #202124);
|
||||
font-family: "Google Sans", "SF Pro Display", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-weight: 400;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@@ -67,12 +73,12 @@ textarea:focus-visible {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #eef3fb;
|
||||
background: var(--bg, #eef3fb);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #c5d0df;
|
||||
border: 3px solid #eef3fb;
|
||||
background: var(--outline-variant, #c5d0df);
|
||||
border: 3px solid var(--bg, #eef3fb);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
@@ -151,7 +157,7 @@ textarea:focus-visible {
|
||||
flex: 0 0 auto;
|
||||
place-items: center;
|
||||
color: var(--primary, #2563c7);
|
||||
background: color-mix(in srgb, var(--primary-container, #dbe9ff) 82%, #ffffff);
|
||||
background: color-mix(in srgb, var(--primary-container, #dbe9ff) 82%, var(--surface-container-lowest, #ffffff));
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
@@ -204,9 +210,9 @@ textarea:focus-visible {
|
||||
.icon-button,
|
||||
.suggestion-chip,
|
||||
.account-pill {
|
||||
color: #202124;
|
||||
background: #ffffff;
|
||||
border-color: #cfd8e6;
|
||||
color: var(--text, #202124);
|
||||
background: var(--surface-container-lowest, #ffffff);
|
||||
border-color: var(--outline-variant, #cfd8e6);
|
||||
box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
|
||||
}
|
||||
|
||||
@@ -216,14 +222,14 @@ textarea:focus-visible {
|
||||
.icon-button:hover,
|
||||
.suggestion-chip:hover,
|
||||
.account-pill:hover {
|
||||
background: #f7faff;
|
||||
background: var(--surface-container-low, #f7faff);
|
||||
box-shadow: 0 2px 6px rgba(60, 64, 67, 0.12);
|
||||
}
|
||||
|
||||
.danger-button {
|
||||
color: #9f1c16;
|
||||
background: #fff3f1;
|
||||
border-color: #ffc9c2;
|
||||
color: var(--on-error-container, #410002);
|
||||
background: var(--error-container, #fff3f1);
|
||||
border-color: color-mix(in srgb, var(--error, #ba1a1a) 32%, transparent);
|
||||
}
|
||||
|
||||
.drawer-nav,
|
||||
@@ -243,7 +249,7 @@ textarea:focus-visible {
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 6px 12px 6px 6px;
|
||||
color: #3c4043;
|
||||
color: var(--text, #3c4043);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
@@ -253,12 +259,12 @@ textarea:focus-visible {
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: rgba(32, 33, 36, 0.04);
|
||||
background: color-mix(in srgb, var(--text, #202124) 5%, transparent);
|
||||
}
|
||||
|
||||
.nav-item-active {
|
||||
color: #174ea6;
|
||||
background: color-mix(in srgb, var(--primary-container, #dbe9ff) 92%, #ffffff);
|
||||
color: var(--on-primary-container, #174ea6);
|
||||
background: color-mix(in srgb, var(--primary-container, #dbe9ff) 92%, var(--surface-container-lowest, #ffffff));
|
||||
}
|
||||
|
||||
.nav-icon-dot {
|
||||
@@ -267,13 +273,13 @@ textarea:focus-visible {
|
||||
height: 44px;
|
||||
flex: 0 0 auto;
|
||||
place-items: center;
|
||||
color: #174ea6;
|
||||
background: #d2e3fc;
|
||||
color: var(--on-primary-container, #174ea6);
|
||||
background: var(--primary-container, #d2e3fc);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.nav-icon-dot-1 {
|
||||
color: #0d652d;
|
||||
color: var(--success, #0d652d);
|
||||
background: #ceead6;
|
||||
}
|
||||
|
||||
@@ -288,7 +294,7 @@ textarea:focus-visible {
|
||||
}
|
||||
|
||||
.nav-item-active .nav-icon-dot {
|
||||
color: #ffffff;
|
||||
color: var(--on-primary, #ffffff);
|
||||
background: var(--primary, #2563c7);
|
||||
}
|
||||
|
||||
@@ -297,10 +303,10 @@ textarea:focus-visible {
|
||||
.auth-panel,
|
||||
.app-card,
|
||||
.modal-panel {
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border: 1px solid #d8e1ee;
|
||||
background: var(--surface-container-lowest, #ffffff);
|
||||
border: 1px solid var(--outline-variant, #d8e1ee);
|
||||
border-radius: 22px;
|
||||
box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08), 0 10px 30px rgba(60, 64, 67, 0.06);
|
||||
box-shadow: var(--elevation-1, 0 1px 2px rgba(60, 64, 67, 0.08), 0 10px 30px rgba(60, 64, 67, 0.06));
|
||||
}
|
||||
|
||||
.drawer-info-card {
|
||||
@@ -324,10 +330,11 @@ textarea:focus-visible {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 5px;
|
||||
padding: 6px;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border: 1px solid #d8e1ee;
|
||||
padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
|
||||
background: color-mix(in srgb, var(--surface-container-lowest, #ffffff) 92%, transparent);
|
||||
border: 1px solid var(--outline-variant, #d8e1ee);
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 12px 34px rgba(60, 64, 67, 0.16);
|
||||
box-shadow: var(--elevation-2, 0 12px 34px rgba(60, 64, 67, 0.16));
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
@@ -340,7 +347,7 @@ textarea:focus-visible {
|
||||
gap: 4px;
|
||||
border: 0;
|
||||
border-radius: 16px;
|
||||
color: #5f6670;
|
||||
color: var(--muted, #5f6670);
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
font-size: 11px;
|
||||
@@ -349,12 +356,13 @@ textarea:focus-visible {
|
||||
}
|
||||
|
||||
.mobile-nav-item:hover {
|
||||
background: #f1f5fb;
|
||||
background: var(--surface-container-low, #f1f5fb);
|
||||
}
|
||||
|
||||
.mobile-nav-item-active {
|
||||
color: var(--primary, #2563c7);
|
||||
background: var(--primary-container, #dbe9ff);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.top-app-bar {
|
||||
@@ -393,13 +401,13 @@ textarea:focus-visible {
|
||||
}
|
||||
|
||||
.top-kicker {
|
||||
color: #5f6670;
|
||||
color: var(--muted, #5f6670);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.top-title {
|
||||
margin-top: 2px;
|
||||
color: #202124;
|
||||
color: var(--text, #202124);
|
||||
font-size: clamp(22px, 3vw, 31px);
|
||||
font-weight: 500;
|
||||
line-height: 1.12;
|
||||
@@ -473,7 +481,7 @@ textarea:focus-visible {
|
||||
.hero-avatar {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border: 4px solid #ffffff;
|
||||
border: 4px solid var(--surface-container-lowest, #ffffff);
|
||||
font-size: 42px;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 12px 32px rgba(60, 64, 67, 0.16);
|
||||
@@ -494,7 +502,7 @@ textarea:focus-visible {
|
||||
}
|
||||
|
||||
.hero-name {
|
||||
color: #202124;
|
||||
color: var(--text, #202124);
|
||||
font-size: clamp(36px, 5vw, 56px);
|
||||
font-weight: 500;
|
||||
line-height: 1.04;
|
||||
@@ -503,7 +511,7 @@ textarea:focus-visible {
|
||||
|
||||
.hero-copy {
|
||||
max-width: 620px;
|
||||
color: #5f6670;
|
||||
color: var(--muted, #5f6670);
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
@@ -516,8 +524,8 @@ textarea:focus-visible {
|
||||
justify-content: flex-start;
|
||||
gap: 14px;
|
||||
padding: 0 24px;
|
||||
color: #3c4043;
|
||||
background: #ffffff;
|
||||
color: var(--text, #3c4043);
|
||||
background: var(--surface-container-lowest, #ffffff);
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
box-shadow: 0 3px 10px rgba(60, 64, 67, 0.12), 0 1px 2px rgba(60, 64, 67, 0.08);
|
||||
@@ -526,7 +534,7 @@ textarea:focus-visible {
|
||||
}
|
||||
|
||||
.hero-search-button svg {
|
||||
color: #202124;
|
||||
color: var(--text, #202124);
|
||||
}
|
||||
|
||||
.hero-stat-row {
|
||||
@@ -577,21 +585,33 @@ textarea:focus-visible {
|
||||
gap: 9px;
|
||||
min-height: 42px;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid #d8e1ee;
|
||||
border: 1px solid var(--outline-variant, #d8e1ee);
|
||||
border-radius: 18px;
|
||||
background: #ffffff;
|
||||
color: #202124;
|
||||
background: var(--surface-container-lowest, #ffffff);
|
||||
color: var(--text, #202124);
|
||||
}
|
||||
|
||||
.status-card--error {
|
||||
color: var(--on-error-container, #410002);
|
||||
background: var(--error-container, #ffdad6);
|
||||
border-color: color-mix(in srgb, var(--error, #ba1a1a) 32%, transparent);
|
||||
}
|
||||
|
||||
.status-card--warning {
|
||||
color: var(--on-warning-container, #291800);
|
||||
background: var(--warning-container, #ffddb0);
|
||||
border-color: color-mix(in srgb, var(--warning, #8d5700) 30%, transparent);
|
||||
}
|
||||
|
||||
.summary-panel,
|
||||
.can-panel {
|
||||
background: #ffffff;
|
||||
background: var(--surface-container-lowest, #ffffff);
|
||||
}
|
||||
|
||||
.today-panel {
|
||||
border: 1px solid #d8e1ee;
|
||||
border: 1px solid var(--outline-variant, #d8e1ee);
|
||||
border-radius: 26px;
|
||||
box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08), 0 12px 28px rgba(60, 64, 67, 0.07);
|
||||
box-shadow: var(--elevation-1, 0 1px 2px rgba(60, 64, 67, 0.08), 0 12px 28px rgba(60, 64, 67, 0.07));
|
||||
}
|
||||
|
||||
.section-kicker {
|
||||
@@ -604,12 +624,12 @@ textarea:focus-visible {
|
||||
|
||||
.section-meta,
|
||||
.today-limit-summary {
|
||||
color: #5f6670;
|
||||
color: var(--muted, #5f6670);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.today-stat-value {
|
||||
color: #202124;
|
||||
color: var(--text, #202124);
|
||||
font-size: clamp(3.5rem, 8vw, 5rem);
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
@@ -617,7 +637,7 @@ textarea:focus-visible {
|
||||
}
|
||||
|
||||
.today-stat-label {
|
||||
color: #5f6670;
|
||||
color: var(--muted, #5f6670);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@@ -628,7 +648,7 @@ textarea:focus-visible {
|
||||
.metric-tile-label,
|
||||
.app-card-subtitle,
|
||||
.insight-card-label {
|
||||
color: #5f6670;
|
||||
color: var(--muted, #5f6670);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -637,7 +657,7 @@ textarea:focus-visible {
|
||||
.app-card-title,
|
||||
.insight-card-value,
|
||||
.empty-state-title {
|
||||
color: #202124;
|
||||
color: var(--text, #202124);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -650,7 +670,7 @@ textarea:focus-visible {
|
||||
.metric-tile-detail,
|
||||
.insight-card-detail,
|
||||
.empty-state-copy {
|
||||
color: #5f6670;
|
||||
color: var(--muted, #5f6670);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@@ -662,8 +682,8 @@ textarea:focus-visible {
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: color-mix(in srgb, var(--primary-container, #dbe9ff) 82%, #ffffff);
|
||||
border: 1px solid #d8e1ee;
|
||||
background: color-mix(in srgb, var(--primary-container, #dbe9ff) 82%, var(--surface-container-lowest, #ffffff));
|
||||
border: 1px solid var(--outline-variant, #d8e1ee);
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
@@ -672,14 +692,14 @@ textarea:focus-visible {
|
||||
}
|
||||
|
||||
.mini-metric-label {
|
||||
color: #5f6670;
|
||||
color: var(--muted, #5f6670);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mini-metric-value {
|
||||
margin-top: 6px;
|
||||
color: #202124;
|
||||
color: var(--text, #202124);
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -691,17 +711,17 @@ textarea:focus-visible {
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
color: #202124;
|
||||
color: var(--text, #202124);
|
||||
text-align: left;
|
||||
background: #ffffff;
|
||||
border: 1px solid #d8e1ee;
|
||||
background: var(--surface-container-lowest, #ffffff);
|
||||
border: 1px solid var(--outline-variant, #d8e1ee);
|
||||
border-radius: 18px;
|
||||
transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
|
||||
}
|
||||
|
||||
.quick-add-button:hover {
|
||||
background: #f7faff;
|
||||
border-color: color-mix(in srgb, var(--primary, #2563c7) 24%, #d8e1ee);
|
||||
background: var(--surface-container-low, #f7faff);
|
||||
border-color: color-mix(in srgb, var(--primary, #2563c7) 24%, var(--outline-variant, #d8e1ee));
|
||||
box-shadow: 0 2px 8px rgba(60, 64, 67, 0.08);
|
||||
}
|
||||
|
||||
@@ -712,12 +732,12 @@ textarea:focus-visible {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--primary, #2563c7);
|
||||
background: color-mix(in srgb, var(--primary-container, #dbe9ff) 82%, #ffffff);
|
||||
background: color-mix(in srgb, var(--primary-container, #dbe9ff) 82%, var(--surface-container-lowest, #ffffff));
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.quick-add-meta {
|
||||
color: #5f6670;
|
||||
color: var(--muted, #5f6670);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@@ -729,8 +749,8 @@ textarea:focus-visible {
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
background: #ffffff;
|
||||
border: 1px dashed #cfd8e6;
|
||||
background: var(--surface-container-lowest, #ffffff);
|
||||
border: 1px dashed var(--outline-variant, #cfd8e6);
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
@@ -742,7 +762,7 @@ textarea:focus-visible {
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
color: var(--primary, #2563c7);
|
||||
background: color-mix(in srgb, var(--primary-container, #dbe9ff) 82%, #ffffff);
|
||||
background: color-mix(in srgb, var(--primary-container, #dbe9ff) 82%, var(--surface-container-lowest, #ffffff));
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
@@ -752,18 +772,18 @@ textarea:focus-visible {
|
||||
|
||||
.limit-alert {
|
||||
padding: 16px 20px;
|
||||
background: #fff8e8;
|
||||
border: 1px solid #f9e3b0;
|
||||
background: var(--warning-container, #fff8e8);
|
||||
border: 1px solid color-mix(in srgb, var(--warning, #8d5700) 30%, transparent);
|
||||
border-radius: 22px;
|
||||
}
|
||||
|
||||
.limit-alert-title {
|
||||
color: #7a4e00;
|
||||
color: var(--on-warning-container, #7a4e00);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.limit-alert-copy {
|
||||
color: #5f6670;
|
||||
color: var(--muted, #5f6670);
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
@@ -772,10 +792,10 @@ textarea:focus-visible {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 8px;
|
||||
color: #174ea6;
|
||||
color: var(--on-primary-container, #174ea6);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
background: color-mix(in srgb, var(--primary-container, #dbe9ff) 92%, #ffffff);
|
||||
background: color-mix(in srgb, var(--primary-container, #dbe9ff) 92%, var(--surface-container-lowest, #ffffff));
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
@@ -783,28 +803,28 @@ textarea:focus-visible {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 8px;
|
||||
color: #5f6670;
|
||||
color: var(--muted, #5f6670);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
background: #edf2fa;
|
||||
background: var(--surface-container-low, #edf2fa);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.entry-title,
|
||||
.mini-entry-title {
|
||||
color: #202124;
|
||||
color: var(--text, #202124);
|
||||
font-size: 1.125rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.entry-meta,
|
||||
.mini-entry-meta {
|
||||
color: #5f6670;
|
||||
color: var(--muted, #5f6670);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.entry-summary {
|
||||
color: #3c4043;
|
||||
color: var(--text, #3c4043);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@@ -814,13 +834,13 @@ textarea:focus-visible {
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 14px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #d8e1ee;
|
||||
background: var(--surface-container-lowest, #ffffff);
|
||||
border: 1px solid var(--outline-variant, #d8e1ee);
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.mini-entry-price {
|
||||
color: #202124;
|
||||
color: var(--text, #202124);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -832,10 +852,10 @@ textarea:focus-visible {
|
||||
|
||||
.auth-panel-card {
|
||||
padding: 24px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #d8e1ee;
|
||||
background: var(--surface-container-lowest, #ffffff);
|
||||
border: 1px solid var(--outline-variant, #d8e1ee);
|
||||
border-radius: 22px;
|
||||
box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08), 0 12px 28px rgba(60, 64, 67, 0.08);
|
||||
box-shadow: var(--elevation-1, 0 1px 2px rgba(60, 64, 67, 0.08), 0 12px 28px rgba(60, 64, 67, 0.08));
|
||||
}
|
||||
|
||||
.auth-mode-toggle {
|
||||
@@ -843,8 +863,8 @@ textarea:focus-visible {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
background: #edf2fa;
|
||||
border: 1px solid #d8e1ee;
|
||||
background: var(--surface-container-low, #edf2fa);
|
||||
border: 1px solid var(--outline-variant, #d8e1ee);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
@@ -852,28 +872,28 @@ textarea:focus-visible {
|
||||
min-height: 36px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
color: #5f6670;
|
||||
color: var(--muted, #5f6670);
|
||||
background: transparent;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.auth-mode-toggle button.auth-mode-active {
|
||||
color: #202124;
|
||||
background: #ffffff;
|
||||
color: var(--text, #202124);
|
||||
background: var(--surface-container-lowest, #ffffff);
|
||||
box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12);
|
||||
}
|
||||
|
||||
.forecast-stat {
|
||||
padding: 16px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #d8e1ee;
|
||||
background: var(--surface-container-lowest, #ffffff);
|
||||
border: 1px solid var(--outline-variant, #d8e1ee);
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.forecast-stat-label {
|
||||
display: block;
|
||||
color: #5f6670;
|
||||
color: var(--muted, #5f6670);
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.08em;
|
||||
@@ -882,7 +902,7 @@ textarea:focus-visible {
|
||||
|
||||
.forecast-stat-value {
|
||||
margin-top: 4px;
|
||||
color: #202124;
|
||||
color: var(--text, #202124);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -890,24 +910,24 @@ textarea:focus-visible {
|
||||
.forecast-stat-note {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
color: #5f6670;
|
||||
color: var(--muted, #5f6670);
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.forecast-stat--positive .forecast-stat-value {
|
||||
color: #0d652d;
|
||||
color: var(--success, #0d652d);
|
||||
}
|
||||
|
||||
.forecast-stat--positive .forecast-stat-label,
|
||||
.forecast-stat--positive .forecast-stat-note {
|
||||
color: #0d652d;
|
||||
color: var(--success, #0d652d);
|
||||
}
|
||||
|
||||
.forecast-chart-wrap {
|
||||
padding: 8px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #d8e1ee;
|
||||
background: var(--surface-container-lowest, #ffffff);
|
||||
border: 1px solid var(--outline-variant, #d8e1ee);
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
@@ -917,8 +937,8 @@ textarea:focus-visible {
|
||||
.entry-row,
|
||||
.metric-soft,
|
||||
.quick-add-item {
|
||||
background: #ffffff;
|
||||
border: 1px solid #d8e1ee;
|
||||
background: var(--surface-container-lowest, #ffffff);
|
||||
border: 1px solid var(--outline-variant, #d8e1ee);
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
@@ -929,7 +949,7 @@ textarea:focus-visible {
|
||||
|
||||
.wellness-pill span,
|
||||
.limit-row-head span {
|
||||
color: #5f6670;
|
||||
color: var(--muted, #5f6670);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -937,7 +957,7 @@ textarea:focus-visible {
|
||||
.limit-row-head strong {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
color: #202124;
|
||||
color: var(--text, #202124);
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -956,7 +976,7 @@ textarea:focus-visible {
|
||||
height: 9px;
|
||||
margin-top: 12px;
|
||||
overflow: hidden;
|
||||
background: #e8edf5;
|
||||
background: var(--surface-container-high, #e8edf5);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
@@ -966,23 +986,23 @@ textarea:focus-visible {
|
||||
}
|
||||
|
||||
.limit-row--warn .limit-progress-fill {
|
||||
background: #b06000;
|
||||
background: var(--warning, #b06000);
|
||||
}
|
||||
|
||||
.limit-row--over .limit-progress-fill {
|
||||
background: #b3261e;
|
||||
background: var(--error, #b3261e);
|
||||
}
|
||||
|
||||
.limit-row-value {
|
||||
margin-top: 8px;
|
||||
color: #5f6670;
|
||||
color: var(--muted, #5f6670);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
color: #5f6670;
|
||||
color: var(--muted, #5f6670);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -992,15 +1012,15 @@ textarea:focus-visible {
|
||||
width: 100%;
|
||||
min-height: 46px;
|
||||
padding: 10px 13px;
|
||||
color: #202124;
|
||||
background: #ffffff;
|
||||
border: 1px solid #cfd8e6;
|
||||
color: var(--text, #202124);
|
||||
background: var(--surface-container-lowest, #ffffff);
|
||||
border: 1px solid var(--outline-variant, #cfd8e6);
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.field-control::placeholder,
|
||||
.field-input::placeholder {
|
||||
color: #80868b;
|
||||
color: var(--subtle, #80868b);
|
||||
}
|
||||
|
||||
.field-help-text,
|
||||
@@ -1074,9 +1094,9 @@ textarea:focus-visible {
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
padding: 11px 13px;
|
||||
color: #202124;
|
||||
background: #ffffff;
|
||||
border: 1px solid #d8e1ee;
|
||||
color: var(--text, #202124);
|
||||
background: var(--surface-container-lowest, #ffffff);
|
||||
border: 1px solid var(--outline-variant, #d8e1ee);
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
@@ -1091,7 +1111,7 @@ textarea:focus-visible {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex: 0 0 auto;
|
||||
border: 1px solid rgba(60, 64, 67, 0.2);
|
||||
border: 1px solid var(--outline-variant, rgba(60, 64, 67, 0.2));
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@@ -1101,9 +1121,9 @@ textarea:focus-visible {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 12px;
|
||||
color: #202124;
|
||||
background: #ffffff;
|
||||
border: 1px solid #d8e1ee;
|
||||
color: var(--text, #202124);
|
||||
background: var(--surface-container-lowest, #ffffff);
|
||||
border: 1px solid var(--outline-variant, #d8e1ee);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
@@ -1151,8 +1171,8 @@ textarea:focus-visible {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
background: #edf2fa;
|
||||
border: 1px solid #d8e1ee;
|
||||
background: var(--surface-container-low, #edf2fa);
|
||||
border: 1px solid var(--outline-variant, #d8e1ee);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
@@ -1160,23 +1180,23 @@ textarea:focus-visible {
|
||||
min-height: 34px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
color: #5f6670;
|
||||
color: var(--muted, #5f6670);
|
||||
background: transparent;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.segmented-control .segmented-control-active {
|
||||
color: #ffffff;
|
||||
color: var(--on-primary, #ffffff);
|
||||
background: var(--primary, #2563c7);
|
||||
}
|
||||
|
||||
.chart-tooltip {
|
||||
padding: 10px 12px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #d8e1ee;
|
||||
background: var(--surface-container-lowest, #ffffff);
|
||||
border: 1px solid var(--outline-variant, #d8e1ee);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 12px 28px rgba(60, 64, 67, 0.14);
|
||||
box-shadow: var(--elevation-2, 0 12px 28px rgba(60, 64, 67, 0.14));
|
||||
}
|
||||
|
||||
.backdrop-wash,
|
||||
@@ -1190,7 +1210,7 @@ textarea:focus-visible {
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 20px;
|
||||
color: #5f6670;
|
||||
color: var(--muted, #5f6670);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@@ -1221,19 +1241,19 @@ textarea:focus-visible {
|
||||
.app-shell .text-teal-300,
|
||||
.app-shell [class*="text-cyan-"],
|
||||
.app-shell [class*="text-teal-"] {
|
||||
color: #202124 !important;
|
||||
color: var(--text, #202124) !important;
|
||||
}
|
||||
|
||||
.app-shell .text-slate-100,
|
||||
.app-shell .text-slate-200,
|
||||
.app-shell .text-slate-300 {
|
||||
color: #3c4043 !important;
|
||||
color: var(--text, #3c4043) !important;
|
||||
}
|
||||
|
||||
.app-shell .text-slate-400,
|
||||
.app-shell .text-slate-500,
|
||||
.app-shell .text-slate-600 {
|
||||
color: #5f6670 !important;
|
||||
color: var(--muted, #5f6670) !important;
|
||||
}
|
||||
|
||||
.app-shell .bg-white\/\[0\.01\],
|
||||
@@ -1245,7 +1265,7 @@ textarea:focus-visible {
|
||||
.app-shell .bg-black\/20,
|
||||
.app-shell .bg-emerald-500\/5,
|
||||
.app-shell .bg-gradient-to-tr {
|
||||
background: #ffffff !important;
|
||||
background: var(--surface-container-lowest, #ffffff) !important;
|
||||
}
|
||||
|
||||
.app-shell .border-white\/5,
|
||||
@@ -1255,7 +1275,7 @@ textarea:focus-visible {
|
||||
.app-shell .border-pink-200\/30,
|
||||
.app-shell .border-emerald-500\/10,
|
||||
.app-shell .border-emerald-500\/20 {
|
||||
border-color: #d8e1ee !important;
|
||||
border-color: var(--outline-variant, #d8e1ee) !important;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
@@ -1546,7 +1566,7 @@ textarea:focus-visible {
|
||||
|
||||
.legal-tooltip-trigger:hover,
|
||||
.legal-tooltip-trigger:focus-visible {
|
||||
color: var(--primary-strong, #174ea6);
|
||||
color: color-mix(in srgb, var(--primary, #2563c7) 82%, var(--text, #202124));
|
||||
}
|
||||
|
||||
.legal-tooltip {
|
||||
@@ -1558,13 +1578,13 @@ textarea:focus-visible {
|
||||
transform: translateX(-50%);
|
||||
padding: 0.65rem 0.75rem;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.35);
|
||||
background: rgba(15, 23, 42, 0.96);
|
||||
color: #e2e8f0;
|
||||
border: 1px solid var(--outline-variant, rgba(148, 163, 184, 0.35));
|
||||
background: color-mix(in srgb, var(--text, #0f172a) 94%, transparent);
|
||||
color: var(--bg, #e2e8f0);
|
||||
font-size: 11px;
|
||||
line-height: 1.45;
|
||||
text-align: left;
|
||||
box-shadow: 0 12px 28px rgba(2, 6, 23, 0.35);
|
||||
box-shadow: var(--elevation-2, 0 12px 28px rgba(2, 6, 23, 0.35));
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
|
||||
Reference in New Issue
Block a user