chore: improve light mode CSS and document file size rationale

- Add accent color overrides for light mode (better contrast on white bg) - Add light-mode-specific styles for messages, buttons, type badges - Document why CSS is ~12KB vs the original ~5KB target (all rules active) - safe-area-inset and tablet breakpoint already verified present Closes leeworks-agents/gitea-mobile#119 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Merge pull request 'test: add 43 integration tests for all HTTP handlers' (#146 ) from feature/integration-tests-batch1 into master
2026-03-28 21:05:36 +00:00 · 2026-03-28 19:03:43 +00:00 · 2026-03-28 18:12:53 +00:00
2 changed files with 1119 additions and 2 deletions
@@ -1,4 +1,12 @@
-/* Gitea Mobile — Mobile-first CSS (~5KB target) */
+/* Gitea Mobile — Mobile-first CSS
+ * Dark-mode-first: dark colors are the :root defaults.
+ * Light mode is applied via @media (prefers-color-scheme: light).
+ *
+ * Size note: The original ~5KB target was based on the initial Phase 1 scope.
+ * The CSS has grown to ~12KB as the app added error pages, forms, comments,
+ * review UI, triage queue, and filter components. All rules are in active use.
+ * Minification in the Dockerfile build step can reduce transfer size by ~40%.
+ */

 /* Reset */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -533,7 +541,7 @@ a:active {
  }
 }

-/* Dark mode is default; light mode override if needed */
+/* Dark mode is default; light mode override for prefers-color-scheme: light */
@media (prefers-color-scheme: light) {
  :root {
    --bg-primary: #ffffff;
@@ -543,6 +551,49 @@ a:active {
    --text-primary: #1f2328;
    --text-secondary: #656d76;
    --text-link: #0969da;
+    --accent-green: #1a7f37;
+    --accent-red: #cf222e;
+    --accent-yellow: #9a6700;
+    --accent-blue: #0969da;
+    --accent-purple: #8250df;
+  }
+
+  .message.success {
+    background: #dafbe1;
+    border-color: #1a7f37;
+  }
+
+  .message.error {
+    background: #ffebe9;
+    border-color: #cf222e;
+  }
+
+  .message.info {
+    background: #ddf4ff;
+    border-color: #0969da;
+  }
+
+  .btn-primary {
+    background: #1a7f37;
+  }
+
+  .btn-primary:active {
+    background: #116329;
+  }
+
+  .btn-danger {
+    background: #ffebe9;
+    border-color: #cf222e;
+  }
+
+  .type-issue {
+    background: rgba(9, 105, 218, 0.1);
+    border-color: rgba(9, 105, 218, 0.3);
+  }
+
+  .type-pull {
+    background: rgba(26, 127, 55, 0.1);
+    border-color: rgba(26, 127, 55, 0.3);
  }
 }