diff --git a/static/style.css b/static/style.css index 3ea70a4..7159040 100644 --- a/static/style.css +++ b/static/style.css @@ -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); } }