android comp

colony/core/roles/webview/static/style.css

@@ -18,7 +18,8 @@
 }
 
 @media (prefers-color-scheme: dark) {
-  :root {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
     --bg: #12161c;
     --card: #1b2129;
     --text: #e6eaf0;
@@ -38,6 +39,26 @@
   }
 }
 
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --bg: #12161c;
+  --card: #1b2129;
+  --text: #e6eaf0;
+  --muted: #93a0b3;
+  --line: #313a47;
+  --down: #6b7686;
+  --track: #2a3340;
+  --panel: rgba(27, 33, 41, 0.92);
+  --warn: #ffb04a;
+  --crit: #ff6b6b;
+  --n0: #6c9cff;
+  --n1: #3cc7c7;
+  --n2: #ab8cff;
+  --n3: #ff7cc8;
+  --n4: #e0b04a;
+  --n5: #8fd06a;
+}
+
 * { box-sizing: border-box; }
 
 html, body { height: 100%; }
@@ -196,3 +217,13 @@ p { margin: 4px 0; }
 .swatch.none { background: transparent; border: 2px dashed var(--muted); }
 
 .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+
+/* Phones: the desktop sizes are small on a 400px screen, so the page text and touch targets grow. */
+@media (max-width: 600px) {
+  body { font-size: 16px; }
+  header { padding: 0 12px 6px; }
+  h1 { font-size: 24px; }
+  .alert, .route, .muted, .legend { font-size: 14px; }
+  .legend { max-width: calc(100% - 24px); }
+  .legend, .legend-open { bottom: 64px; }
+}