Mercurial
annotate hg-web/src/base.css @ 201:6cdee35a7ba9
[MrJuneJune] notes
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Sun, 15 Feb 2026 07:07:50 -0800 |
| parents | 9f4429c49733 |
| children |
| rev | line source |
|---|---|
| 193 | 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) */ | |
|
104
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
28 :root { |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
29 --bg: #ffffff; |
| 193 | 30 --bg-subtle: #f6f8fa; |
| 31 --bg-code: #f6f8fa; | |
| 32 --border: #d0d7de; | |
| 33 --accent: #0969da; | |
| 34 --text-primary: #1f2328; | |
| 35 --text-secondary: #656d76; | |
| 36 --hover: #f3f4f6; | |
| 37 --success: #1a7f37; | |
| 38 --danger: #cf222e; | |
| 39 --danger-bg: #ffebe9; | |
| 40 --danger-border: #ffdce0; | |
| 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; | |
|
104
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
52 } |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
53 |
| 193 | 54 /* Dark mode - applied when html has .dark class */ |
| 55 :root.dark { | |
|
104
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
56 --bg: #0d1117; |
| 193 | 57 --bg-subtle: #161b22; |
| 58 --bg-code: #161b22; | |
|
104
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
59 --border: #30363d; |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
60 --accent: #58a6ff; |
| 193 | 61 --text-primary: #e6edf3; |
| 62 --text-secondary: #8b949e; | |
| 63 --hover: #1c2128; | |
| 64 --success: #238636; | |
|
104
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
65 --danger: #f85149; |
| 193 | 66 --danger-bg: #f8514926; |
| 67 --danger-border: #f8514966; | |
| 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; | |
|
104
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
79 } |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
80 |
| 193 | 81 /* System preference fallback (when no explicit class is set) */ |
|
104
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
82 @media (prefers-color-scheme: dark) { |
| 193 | 83 :root:not(.light) { |
|
104
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
84 --bg: #0d1117; |
| 193 | 85 --bg-subtle: #161b22; |
| 86 --bg-code: #161b22; | |
|
104
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
87 --border: #30363d; |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
88 --accent: #58a6ff; |
| 193 | 89 --text-primary: #e6edf3; |
| 90 --text-secondary: #8b949e; | |
| 91 --hover: #1c2128; | |
| 92 --success: #238636; | |
|
104
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
93 --danger: #f85149; |
| 193 | 94 --danger-bg: #f8514926; |
| 95 --danger-border: #f8514966; | |
| 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; | |
|
104
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
106 } |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
107 } |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
108 |
| 193 | 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 */ | |
|
104
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
132 * { |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
133 margin: 0; |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
134 padding: 0; |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
135 box-sizing: border-box; |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
136 } |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
137 |
| 193 | 138 html, body { |
|
104
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
139 background: var(--bg); |
| 193 | 140 color: var(--text-primary); |
| 141 font-family: "More Thin", sans-serif; | |
| 142 line-height: 1.6; | |
| 143 transition: background 0.2s, color 0.2s; | |
|
104
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
144 } |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
145 |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
146 a { |
| 193 | 147 color: var(--accent); |
|
104
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
148 text-decoration: none; |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
149 } |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
150 |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
151 a:hover { |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
152 text-decoration: underline; |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
153 } |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
154 |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
155 code { |
| 193 | 156 background: var(--bg-code); |
|
104
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
157 padding: 0.2em 0.4em; |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
158 border-radius: 3px; |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
159 font-size: 0.9em; |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
160 } |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
161 |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
162 pre { |
| 193 | 163 background: var(--bg-code); |
|
104
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
164 padding: 1rem; |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
165 border-radius: 6px; |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
166 overflow-x: auto; |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
167 } |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
168 |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
169 pre code { |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
170 background: none; |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
171 padding: 0; |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
172 } |
|
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
173 |
| 193 | 174 /* Icon invert for dark mode */ |
| 175 :root.dark .icon-invert { | |
| 176 filter: invert(0.8); | |
| 177 } | |
|
104
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
178 |
| 193 | 179 :root.light .icon-invert, |
| 180 :root:not(.dark):not(.light) .icon-invert { | |
| 181 filter: none; | |
| 182 } | |
|
104
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
183 |
| 193 | 184 @media (prefers-color-scheme: dark) { |
| 185 :root:not(.light) .icon-invert { | |
| 186 filter: invert(0.8); | |
| 187 } | |
|
104
2301aeb7503b
[Hg Web] Super simple mercurial server.
June Park <parkjune1995@gmail.com>
parents:
diff
changeset
|
188 } |