84c4922bbc
FastAPI app that pulls interval usage from Sungrow iSolarCloud (OAuth2), caches AER Consumer Data Right electricity plan data, and compares actual metered usage against every available plan to estimate real annual cost (TOU, tiered feed-in, and flat tariffs). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
166 lines
2.9 KiB
CSS
166 lines
2.9 KiB
CSS
:root {
|
|
color-scheme: light dark;
|
|
--bg: #ffffff;
|
|
--fg: #1a1a1a;
|
|
--muted: #6b7280;
|
|
--border: #e5e7eb;
|
|
--accent: #2563eb;
|
|
--good: #16a34a;
|
|
--bad: #dc2626;
|
|
--card-bg: #f9fafb;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #12141a;
|
|
--fg: #e8eaed;
|
|
--muted: #9aa1ac;
|
|
--border: #2a2d35;
|
|
--accent: #6ea8fe;
|
|
--good: #4ade80;
|
|
--bad: #f87171;
|
|
--card-bg: #1a1d24;
|
|
}
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
}
|
|
|
|
.topnav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
padding: 1rem 1.5rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.topnav .brand {
|
|
font-weight: 700;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.topnav a {
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.topnav a:hover {
|
|
color: var(--fg);
|
|
}
|
|
|
|
.content {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.card {
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 1.25rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th, td {
|
|
text-align: left;
|
|
padding: 0.5rem 0.75rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
th {
|
|
color: var(--muted);
|
|
font-weight: 600;
|
|
font-size: 0.85rem;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.savings-positive { color: var(--good); font-weight: 600; }
|
|
.savings-negative { color: var(--bad); }
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 0.1rem 0.5rem;
|
|
border-radius: 4px;
|
|
font-size: 0.75rem;
|
|
background: var(--border);
|
|
color: var(--muted);
|
|
}
|
|
|
|
.badge.current { background: var(--accent); color: white; }
|
|
.badge.not-modelable { background: var(--bad); color: white; }
|
|
|
|
form.settings-form label {
|
|
display: block;
|
|
margin-top: 0.75rem;
|
|
font-size: 0.9rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
form.settings-form input, form.settings-form select {
|
|
width: 100%;
|
|
padding: 0.5rem;
|
|
margin-top: 0.25rem;
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
button {
|
|
margin-top: 1rem;
|
|
padding: 0.6rem 1.2rem;
|
|
background: var(--accent);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.tou-period {
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
padding: 0.75rem;
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.p-days-group {
|
|
margin-top: 0.75rem;
|
|
font-size: 0.9rem;
|
|
color: var(--muted);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
}
|
|
|
|
form.settings-form label.p-day-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
margin-top: 0;
|
|
width: auto;
|
|
color: var(--fg);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
form.settings-form label.p-day-label input {
|
|
width: auto;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.muted { color: var(--muted); font-size: 0.85rem; }
|
|
.chart-container { position: relative; height: 320px; margin-top: 0.75rem; }
|
|
.notes { font-size: 0.8rem; color: var(--muted); margin-top: 0.25rem; }
|