push

static/css/style.css

@@ -0,0 +1,76 @@
+:root {
+    --bg-dark: #0d1117;
+    --card-bg: #161b22;
+    --border-color: #30363d;
+    --text-main: #c9d1d9;
+    --blue-accent: #58a6ff;
+}
+body {
+    background-color: var(--bg-dark);
+    color: var(--text-main);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    margin: 0;
+    overflow-x: hidden;
+}
+.gauge-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+    margin-bottom: 15px;
+}
+.gauge-card {
+    background-color: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 10px 5px;
+    text-align: center;
+}
+.gauge-canvas-container {
+    max-width: 80px;
+    margin: 0 auto;
+}
+.gauge-label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--blue-accent);
+    margin-top: 2px;
+}
+.voltage-value {
+    font-size: 1.1rem;
+    font-weight: 800;
+    color: #ffffff;
+}
+.time-btn-container {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    gap: 6px;
+    padding-bottom: 10px;
+    justify-content: center;
+}
+.time-btn {
+    font-size: 0.75rem !important;
+    padding: 5px 12px !important;
+    white-space: nowrap;
+    border-color: var(--border-color) !important;
+    color: var(--blue-accent) !important;
+}
+.time-btn.active {
+    background-color: #1f6feb !important;
+    color: white !important;
+    border-color: #1f6feb !important;
+}
+.main-chart-card {
+    background-color: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 15px;
+    height: 55vh;
+    min-height: 350px;
+}
+footer { padding: 20px 0; opacity: 0.7; }
+@media (max-width: 576px) {
+    .voltage-value { font-size: 0.95rem; }
+    .main-chart-card { height: 50vh; padding: 10px; }
+}