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>
This commit is contained in:
+53
-2
@@ -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 */
|
/* Reset */
|
||||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
*, *::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) {
|
@media (prefers-color-scheme: light) {
|
||||||
:root {
|
:root {
|
||||||
--bg-primary: #ffffff;
|
--bg-primary: #ffffff;
|
||||||
@@ -543,6 +551,49 @@ a:active {
|
|||||||
--text-primary: #1f2328;
|
--text-primary: #1f2328;
|
||||||
--text-secondary: #656d76;
|
--text-secondary: #656d76;
|
||||||
--text-link: #0969da;
|
--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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user