Mercurial

comparison hg-web/src/base.css @ 193:9f4429c49733 hg-web

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[HgWeb] Making progress....
author MrJuneJune <me@mrjunejune.com>
date Sun, 25 Jan 2026 20:04:55 -0800
parents 2301aeb7503b
children
comparison
equal deleted inserted replaced
192:b818a4561a3c 193:9f4429c49733
1 /* --- Colors ---*/ 1 /* Reset CSS: https://meyerweb.com/eric/tools/css/reset/ */
2 html, body, div, span, applet, object, iframe,
3 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
4 a, abbr, acronym, address, big, cite, code,
5 del, dfn, em, img, ins, kbd, q, s, samp,
6 small, strike, strong, sub, sup, tt, var,
7 b, u, i, center,
8 dl, dt, dd, ol, ul, li,
9 fieldset, form, label, legend,
10 table, caption, tbody, tfoot, thead, tr, th, td,
11 article, aside, canvas, details, embed,
12 figure, figcaption, footer, header, hgroup,
13 menu, nav, output, ruby, section, summary,
14 time, mark, audio, video {
15 margin: 0;
16 padding: 0;
17 border: 0;
18 font-size: 100%;
19 font: inherit;
20 vertical-align: baseline;
21 }
22
23 /* ===========================================
24 Base CSS - Color Variables and Basic Setup
25 =========================================== */
26
27 /* Light mode (default) */
2 :root { 28 :root {
3 --bg: #ffffff; 29 --bg: #ffffff;
4 --fg: #1a1a1a; 30 --bg-subtle: #f6f8fa;
5 --border: #e0e0e0; 31 --bg-code: #f6f8fa;
6 --hover: #f5f5f5; 32 --border: #d0d7de;
7 --accent: #0066cc; 33 --accent: #0969da;
8 --accent-hover: #0052a3; 34 --text-primary: #1f2328;
9 --secondary: #6c757d; 35 --text-secondary: #656d76;
10 --success: #28a745; 36 --hover: #f3f4f6;
11 --warning: #ffc107; 37 --success: #1a7f37;
12 --danger: #dc3545; 38 --danger: #cf222e;
13 --code-bg: #f6f8fa; 39 --danger-bg: #ffebe9;
14 --link: #0066cc; 40 --danger-border: #ffdce0;
15 --link-hover: #0052a3; 41 --overlay: rgba(0, 0, 0, 0.5);
42
43 /* Graph colors - light mode */
44 --graph-1: #495057;
45 --graph-2: #1971c2;
46 --graph-3: #099268;
47 --graph-4: #e67700;
48 --graph-5: #7048e8;
49 --graph-6: #c92a2a;
50 --graph-7: #c2255c;
51 --graph-node-border: #ffffff;
16 } 52 }
17 53
18 .dark { 54 /* Dark mode - applied when html has .dark class */
55 :root.dark {
19 --bg: #0d1117; 56 --bg: #0d1117;
20 --fg: #c9d1d9; 57 --bg-subtle: #161b22;
58 --bg-code: #161b22;
21 --border: #30363d; 59 --border: #30363d;
22 --hover: #161b22;
23 --accent: #58a6ff; 60 --accent: #58a6ff;
24 --accent-hover: #79c0ff; 61 --text-primary: #e6edf3;
25 --secondary: #8b949e; 62 --text-secondary: #8b949e;
26 --success: #3fb950; 63 --hover: #1c2128;
27 --warning: #d29922; 64 --success: #238636;
28 --danger: #f85149; 65 --danger: #f85149;
29 --code-bg: #161b22; 66 --danger-bg: #f8514926;
30 --link: #58a6ff; 67 --danger-border: #f8514966;
31 --link-hover: #79c0ff; 68 --overlay: rgba(0, 0, 0, 0.7);
69
70 /* Graph colors - dark mode */
71 --graph-1: #868e96;
72 --graph-2: #4dabf7;
73 --graph-3: #63e6be;
74 --graph-4: #ffbc42;
75 --graph-5: #b197fc;
76 --graph-6: #ff8787;
77 --graph-7: #f06595;
78 --graph-node-border: #1a1a1a;
32 } 79 }
33 80
81 /* System preference fallback (when no explicit class is set) */
34 @media (prefers-color-scheme: dark) { 82 @media (prefers-color-scheme: dark) {
35 :root:not(.light-mode) { 83 :root:not(.light) {
36 --bg: #0d1117; 84 --bg: #0d1117;
37 --fg: #c9d1d9; 85 --bg-subtle: #161b22;
86 --bg-code: #161b22;
38 --border: #30363d; 87 --border: #30363d;
39 --hover: #161b22;
40 --accent: #58a6ff; 88 --accent: #58a6ff;
41 --accent-hover: #79c0ff; 89 --text-primary: #e6edf3;
42 --secondary: #8b949e; 90 --text-secondary: #8b949e;
43 --success: #3fb950; 91 --hover: #1c2128;
44 --warning: #d29922; 92 --success: #238636;
45 --danger: #f85149; 93 --danger: #f85149;
46 --code-bg: #161b22; 94 --danger-bg: #f8514926;
47 --link: #58a6ff; 95 --danger-border: #f8514966;
48 --link-hover: #79c0ff; 96 --overlay: rgba(0, 0, 0, 0.7);
97
98 --graph-1: #868e96;
99 --graph-2: #4dabf7;
100 --graph-3: #63e6be;
101 --graph-4: #ffbc42;
102 --graph-5: #b197fc;
103 --graph-6: #ff8787;
104 --graph-7: #f06595;
105 --graph-node-border: #1a1a1a;
49 } 106 }
50 } 107 }
51 108
52 /* --- Reset and Base Styles --- */ 109 /* Fonts */
110 @font-face {
111 font-family: "Roboto";
112 src: url("/public/fonts/Roboto-Regular.ttf");
113 }
114 @font-face {
115 font-family: "Roboto Light";
116 src: url("/public/fonts/Roboto-Thin.ttf");
117 }
118 @font-face {
119 font-family: "More Thin";
120 src: url("/public/fonts/more-sugar.thin.otf");
121 }
122 @font-face {
123 font-family: "More";
124 src: url("/public/fonts/more-sugar.regular.otf");
125 }
126
127 button {
128 font-family: "More Thin", sans-serif;
129 }
130
131 /* Reset and Base */
53 * { 132 * {
54 margin: 0; 133 margin: 0;
55 padding: 0; 134 padding: 0;
56 box-sizing: border-box; 135 box-sizing: border-box;
57 } 136 }
58 137
59 html { 138 html, body {
60 background: var(--bg); 139 background: var(--bg);
61 color: var(--fg); 140 color: var(--text-primary);
62 } 141 font-family: "More Thin", sans-serif;
63
64 body {
65 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
66 line-height: 1.6; 142 line-height: 1.6;
67 background: var(--bg); 143 transition: background 0.2s, color 0.2s;
68 color: var(--fg);
69 font-size: 16px;
70 -webkit-font-smoothing: antialiased;
71 -moz-osx-font-smoothing: grayscale;
72 }
73
74 main {
75 max-width: 1200px;
76 margin: 0 auto;
77 padding: 2rem;
78 } 144 }
79 145
80 a { 146 a {
81 color: var(--link); 147 color: var(--accent);
82 text-decoration: none; 148 text-decoration: none;
83 } 149 }
84 150
85 a:hover { 151 a:hover {
86 color: var(--link-hover);
87 text-decoration: underline; 152 text-decoration: underline;
88 } 153 }
89 154
90 h1, h2, h3, h4, h5, h6 {
91 margin-bottom: 1rem;
92 font-weight: 600;
93 line-height: 1.25;
94 }
95
96 h1 { font-size: 2rem; }
97 h2 { font-size: 1.75rem; }
98 h3 { font-size: 1.5rem; }
99 h4 { font-size: 1.25rem; }
100 h5 { font-size: 1.1rem; }
101 h6 { font-size: 1rem; }
102
103 p {
104 margin-bottom: 1rem;
105 }
106
107 code { 155 code {
108 background: var(--code-bg); 156 background: var(--bg-code);
109 padding: 0.2em 0.4em; 157 padding: 0.2em 0.4em;
110 border-radius: 3px; 158 border-radius: 3px;
111 font-family: 'Monaco', 'Courier New', monospace;
112 font-size: 0.9em; 159 font-size: 0.9em;
113 } 160 }
114 161
115 pre { 162 pre {
116 background: var(--code-bg); 163 background: var(--bg-code);
117 padding: 1rem; 164 padding: 1rem;
118 border-radius: 6px; 165 border-radius: 6px;
119 overflow-x: auto; 166 overflow-x: auto;
120 margin-bottom: 1rem;
121 } 167 }
122 168
123 pre code { 169 pre code {
124 background: none; 170 background: none;
125 padding: 0; 171 padding: 0;
126 } 172 }
127 173
128 /* Mobile responsive */ 174 /* Icon invert for dark mode */
129 @media (max-width: 768px) { 175 :root.dark .icon-invert {
130 body { 176 filter: invert(0.8);
131 font-size: 14px; 177 }
178
179 :root.light .icon-invert,
180 :root:not(.dark):not(.light) .icon-invert {
181 filter: none;
182 }
183
184 @media (prefers-color-scheme: dark) {
185 :root:not(.light) .icon-invert {
186 filter: invert(0.8);
132 } 187 }
133
134 main {
135 padding: 1rem;
136 }
137
138 h1 { font-size: 1.75rem; }
139 h2 { font-size: 1.5rem; }
140 h3 { font-size: 1.25rem; }
141 } 188 }