FossilRepo

fossilrepo / assets / admin / css / dark_theme.8634a9d53bdf.css
Source Blame History 769 lines
afe42d0… ragelink 1 /*
afe42d0… ragelink 2 * Fossilrepo Admin Theme — supports dark, light, and system-auto modes
afe42d0… ragelink 3 * Brand palette:
afe42d0… ragelink 4 * #2B2D2C charcoal (dark body background)
afe42d0… ragelink 5 * #DC394C red (primary brand accent)
afe42d0… ragelink 6 * #8B3138 crimson (secondary / hover states)
afe42d0… ragelink 7 * #FAFAFA near-white (foreground on dark)
afe42d0… ragelink 8 */
afe42d0… ragelink 9
afe42d0… ragelink 10 /* ── Shared brand accents + dark defaults ───────────────────────────────── */
afe42d0… ragelink 11
afe42d0… ragelink 12 :root {
afe42d0… ragelink 13 /* Brand accents — unchanged across all themes */
afe42d0… ragelink 14 --primary: #DC394C;
afe42d0… ragelink 15 --secondary: #8B3138;
afe42d0… ragelink 16 --accent: #DC394C;
afe42d0… ragelink 17 --primary-fg: #FAFAFA;
afe42d0… ragelink 18
afe42d0… ragelink 19 --button-fg: #FAFAFA;
afe42d0… ragelink 20 --button-bg: #DC394C;
afe42d0… ragelink 21 --button-hover-bg: #c42d3f;
afe42d0… ragelink 22 --default-button-bg: #8B3138;
afe42d0… ragelink 23 --default-button-hover-bg:#6a1921;
afe42d0… ragelink 24 --close-button-bg: #4a4c4b;
afe42d0… ragelink 25 --close-button-hover-bg: #5a5c5b;
afe42d0… ragelink 26 --delete-button-bg: #8B3138;
afe42d0… ragelink 27 --delete-button-hover-bg: #6a1921;
afe42d0… ragelink 28
afe42d0… ragelink 29 --object-tools-fg: #FAFAFA;
afe42d0… ragelink 30 --object-tools-bg: #8B3138;
afe42d0… ragelink 31 --object-tools-hover-bg: #6a1921;
afe42d0… ragelink 32
afe42d0… ragelink 33 --breadcrumbs-bg: #DC394C;
afe42d0… ragelink 34 --breadcrumbs-fg: #FAFAFA;
afe42d0… ragelink 35 --breadcrumbs-link-fg: #FAFAFA;
afe42d0… ragelink 36 --link-selected-fg: #DC394C;
afe42d0… ragelink 37
afe42d0… ragelink 38 /* Header stays dark in both themes for brand consistency */
afe42d0… ragelink 39 --header-color: #FAFAFA;
afe42d0… ragelink 40 --header-branding-color: #FAFAFA;
afe42d0… ragelink 41 --header-bg: #1f2120;
afe42d0… ragelink 42 --header-link-color: #FAFAFA;
afe42d0… ragelink 43
afe42d0… ragelink 44 /* Dark theme defaults (applied when no explicit data-theme is set) */
afe42d0… ragelink 45 --body-fg: #FAFAFA;
afe42d0… ragelink 46 --body-bg: #2B2D2C;
afe42d0… ragelink 47 --body-quiet-color: #a8aaa9;
afe42d0… ragelink 48 --body-loud-color: #ffffff;
afe42d0… ragelink 49
afe42d0… ragelink 50 --link-fg: #e8677a;
afe42d0… ragelink 51 --link-hover-color: #f0929f;
afe42d0… ragelink 52
afe42d0… ragelink 53 --hairline-color: #3d3f3e;
afe42d0… ragelink 54 --border-color: #3d3f3e;
afe42d0… ragelink 55
afe42d0… ragelink 56 --error-fg: #ff7a7a;
afe42d0… ragelink 57 --message-success-bg: #173317;
afe42d0… ragelink 58 --message-success-color: #7ddf7d;
afe42d0… ragelink 59 --message-success-border: #2d5a2d;
afe42d0… ragelink 60 --message-warning-bg: #332e17;
afe42d0… ragelink 61 --message-warning-color: #e6c87a;
afe42d0… ragelink 62 --message-warning-border: #5a4d2d;
afe42d0… ragelink 63 --message-error-bg: #331717;
afe42d0… ragelink 64 --message-error-color: #ff7a7a;
afe42d0… ragelink 65 --message-error-border: #5a2d2d;
afe42d0… ragelink 66
afe42d0… ragelink 67 --darkened-bg: #222423;
afe42d0… ragelink 68 --selected-bg: #3d1e24;
afe42d0… ragelink 69 --selected-row: #3d1e24;
afe42d0… ragelink 70 --input-bg: #1f2120;
afe42d0… ragelink 71 }
afe42d0… ragelink 72
afe42d0… ragelink 73 /* ── Explicit dark theme (beats Django's html[data-theme="dark"] specificity) */
afe42d0… ragelink 74
afe42d0… ragelink 75 :root[data-theme="dark"] {
afe42d0… ragelink 76 --primary: #DC394C;
afe42d0… ragelink 77 --secondary: #8B3138;
afe42d0… ragelink 78 --accent: #DC394C;
afe42d0… ragelink 79 --primary-fg: #FAFAFA;
afe42d0… ragelink 80
afe42d0… ragelink 81 --button-fg: #FAFAFA;
afe42d0… ragelink 82 --button-bg: #DC394C;
afe42d0… ragelink 83 --button-hover-bg: #c42d3f;
afe42d0… ragelink 84 --default-button-bg: #8B3138;
afe42d0… ragelink 85 --default-button-hover-bg:#6a1921;
afe42d0… ragelink 86 --close-button-bg: #4a4c4b;
afe42d0… ragelink 87 --close-button-hover-bg: #5a5c5b;
afe42d0… ragelink 88 --delete-button-bg: #8B3138;
afe42d0… ragelink 89 --delete-button-hover-bg: #6a1921;
afe42d0… ragelink 90
afe42d0… ragelink 91 --object-tools-fg: #FAFAFA;
afe42d0… ragelink 92 --object-tools-bg: #8B3138;
afe42d0… ragelink 93 --object-tools-hover-bg: #6a1921;
afe42d0… ragelink 94
afe42d0… ragelink 95 --breadcrumbs-bg: #DC394C;
afe42d0… ragelink 96 --breadcrumbs-fg: #FAFAFA;
afe42d0… ragelink 97 --breadcrumbs-link-fg: #FAFAFA;
afe42d0… ragelink 98 --link-selected-fg: #DC394C;
afe42d0… ragelink 99
afe42d0… ragelink 100 --header-bg: #1f2120;
afe42d0… ragelink 101 --header-color: #FAFAFA;
afe42d0… ragelink 102 --header-branding-color: #FAFAFA;
afe42d0… ragelink 103 --header-link-color: #FAFAFA;
afe42d0… ragelink 104
afe42d0… ragelink 105 --body-fg: #FAFAFA;
afe42d0… ragelink 106 --body-bg: #0d0d0d;
afe42d0… ragelink 107 --body-quiet-color: #a8aaa9;
afe42d0… ragelink 108 --body-loud-color: #ffffff;
afe42d0… ragelink 109
afe42d0… ragelink 110 --link-fg: #e8677a;
afe42d0… ragelink 111 --link-hover-color: #f0929f;
afe42d0… ragelink 112
afe42d0… ragelink 113 --hairline-color: #2a2c2b;
afe42d0… ragelink 114 --border-color: #2a2c2b;
afe42d0… ragelink 115
afe42d0… ragelink 116 --error-fg: #ff7a7a;
afe42d0… ragelink 117 --message-success-bg: #0f1f0f;
afe42d0… ragelink 118 --message-success-color: #7ddf7d;
afe42d0… ragelink 119 --message-success-border: #1e3d1e;
afe42d0… ragelink 120 --message-warning-bg: #1f1c0f;
afe42d0… ragelink 121 --message-warning-color: #e6c87a;
afe42d0… ragelink 122 --message-warning-border: #3d3519;
afe42d0… ragelink 123 --message-error-bg: #1f0f0f;
afe42d0… ragelink 124 --message-error-color: #ff7a7a;
afe42d0… ragelink 125 --message-error-border: #3d1a1a;
afe42d0… ragelink 126
afe42d0… ragelink 127 --darkened-bg: #141514;
afe42d0… ragelink 128 --selected-bg: #2d1219;
afe42d0… ragelink 129 --selected-row: #2d1219;
afe42d0… ragelink 130 --input-bg: #111211;
afe42d0… ragelink 131 }
afe42d0… ragelink 132
afe42d0… ragelink 133 /* ── Light theme ─────────────────────────────────────────────────────────── */
afe42d0… ragelink 134
afe42d0… ragelink 135 :root[data-theme="light"] {
afe42d0… ragelink 136 /* Header — dark gray in light mode */
afe42d0… ragelink 137 --header-bg: #3a3a3a;
afe42d0… ragelink 138 --header-color: #FAFAFA;
afe42d0… ragelink 139 --header-branding-color: #FAFAFA;
afe42d0… ragelink 140 --header-link-color: #FAFAFA;
afe42d0… ragelink 141
afe42d0… ragelink 142 /* Brand accents — must repeat here to beat base.css html[data-theme="light"] specificity */
afe42d0… ragelink 143 --primary: #DC394C;
afe42d0… ragelink 144 --secondary: #8B3138;
afe42d0… ragelink 145 --accent: #DC394C;
afe42d0… ragelink 146 --primary-fg: #FAFAFA;
afe42d0… ragelink 147
afe42d0… ragelink 148 --button-fg: #FAFAFA;
afe42d0… ragelink 149 --button-bg: #DC394C;
afe42d0… ragelink 150 --button-hover-bg: #c42d3f;
afe42d0… ragelink 151 --default-button-bg: #8B3138;
afe42d0… ragelink 152 --default-button-hover-bg:#6a1921;
afe42d0… ragelink 153 --delete-button-bg: #8B3138;
afe42d0… ragelink 154 --delete-button-hover-bg: #6a1921;
afe42d0… ragelink 155
afe42d0… ragelink 156 --object-tools-fg: #FAFAFA;
afe42d0… ragelink 157 --object-tools-bg: #8B3138;
afe42d0… ragelink 158 --object-tools-hover-bg: #6a1921;
afe42d0… ragelink 159
afe42d0… ragelink 160 --breadcrumbs-bg: #DC394C;
afe42d0… ragelink 161 --breadcrumbs-fg: #FAFAFA;
afe42d0… ragelink 162 --breadcrumbs-link-fg: #FAFAFA;
afe42d0… ragelink 163 --link-selected-fg: #DC394C;
afe42d0… ragelink 164
afe42d0… ragelink 165 --body-fg: #1a1a1a;
afe42d0… ragelink 166 --body-bg: #f8f8f8;
afe42d0… ragelink 167 --body-quiet-color: #666666;
afe42d0… ragelink 168 --body-loud-color: #000000;
afe42d0… ragelink 169
afe42d0… ragelink 170 --link-fg: #DC394C;
afe42d0… ragelink 171 --link-hover-color: #8B3138;
afe42d0… ragelink 172
afe42d0… ragelink 173 --hairline-color: #e0e0e0;
afe42d0… ragelink 174 --border-color: #e0e0e0;
afe42d0… ragelink 175
afe42d0… ragelink 176 --error-fg: #c0392b;
afe42d0… ragelink 177 --message-success-bg: #d4edda;
afe42d0… ragelink 178 --message-success-color: #155724;
afe42d0… ragelink 179 --message-success-border: #c3e6cb;
afe42d0… ragelink 180 --message-warning-bg: #fff3cd;
afe42d0… ragelink 181 --message-warning-color: #856404;
afe42d0… ragelink 182 --message-warning-border: #ffeeba;
afe42d0… ragelink 183 --message-error-bg: #f8d7da;
afe42d0… ragelink 184 --message-error-color: #721c24;
afe42d0… ragelink 185 --message-error-border: #f5c6cb;
afe42d0… ragelink 186
afe42d0… ragelink 187 --darkened-bg: #eeeeee;
afe42d0… ragelink 188 --selected-bg: #fde8ea;
afe42d0… ragelink 189 --selected-row: #fde8ea;
afe42d0… ragelink 190 --input-bg: #ffffff;
afe42d0… ragelink 191 }
afe42d0… ragelink 192
afe42d0… ragelink 193 /* ── System auto: respect prefers-color-scheme light ─────────────────────── */
afe42d0… ragelink 194
afe42d0… ragelink 195 @media (prefers-color-scheme: light) {
afe42d0… ragelink 196 :root:not([data-theme="dark"]) {
afe42d0… ragelink 197 /* Header — dark gray in light mode */
afe42d0… ragelink 198 --header-bg: #3a3a3a;
afe42d0… ragelink 199 --header-color: #FAFAFA;
afe42d0… ragelink 200 --header-branding-color: #FAFAFA;
afe42d0… ragelink 201 --header-link-color: #FAFAFA;
afe42d0… ragelink 202
afe42d0… ragelink 203 /* Brand accents */
afe42d0… ragelink 204 --primary: #DC394C;
afe42d0… ragelink 205 --secondary: #8B3138;
afe42d0… ragelink 206 --accent: #DC394C;
afe42d0… ragelink 207 --primary-fg: #FAFAFA;
afe42d0… ragelink 208
afe42d0… ragelink 209 --button-fg: #FAFAFA;
afe42d0… ragelink 210 --button-bg: #DC394C;
afe42d0… ragelink 211 --button-hover-bg: #c42d3f;
afe42d0… ragelink 212 --default-button-bg: #8B3138;
afe42d0… ragelink 213 --default-button-hover-bg:#6a1921;
afe42d0… ragelink 214 --delete-button-bg: #8B3138;
afe42d0… ragelink 215 --delete-button-hover-bg: #6a1921;
afe42d0… ragelink 216
afe42d0… ragelink 217 --object-tools-fg: #FAFAFA;
afe42d0… ragelink 218 --object-tools-bg: #8B3138;
afe42d0… ragelink 219 --object-tools-hover-bg: #6a1921;
afe42d0… ragelink 220
afe42d0… ragelink 221 --breadcrumbs-bg: #DC394C;
afe42d0… ragelink 222 --breadcrumbs-fg: #FAFAFA;
afe42d0… ragelink 223 --breadcrumbs-link-fg: #FAFAFA;
afe42d0… ragelink 224 --link-selected-fg: #DC394C;
afe42d0… ragelink 225
afe42d0… ragelink 226 --body-fg: #1a1a1a;
afe42d0… ragelink 227 --body-bg: #f8f8f8;
afe42d0… ragelink 228 --body-quiet-color: #666666;
afe42d0… ragelink 229 --body-loud-color: #000000;
afe42d0… ragelink 230
afe42d0… ragelink 231 --link-fg: #DC394C;
afe42d0… ragelink 232 --link-hover-color: #8B3138;
afe42d0… ragelink 233
afe42d0… ragelink 234 --hairline-color: #e0e0e0;
afe42d0… ragelink 235 --border-color: #e0e0e0;
afe42d0… ragelink 236
afe42d0… ragelink 237 --error-fg: #c0392b;
afe42d0… ragelink 238 --message-success-bg: #d4edda;
afe42d0… ragelink 239 --message-success-color: #155724;
afe42d0… ragelink 240 --message-success-border: #c3e6cb;
afe42d0… ragelink 241 --message-warning-bg: #fff3cd;
afe42d0… ragelink 242 --message-warning-color: #856404;
afe42d0… ragelink 243 --message-warning-border: #ffeeba;
afe42d0… ragelink 244 --message-error-bg: #f8d7da;
afe42d0… ragelink 245 --message-error-color: #721c24;
afe42d0… ragelink 246 --message-error-border: #f5c6cb;
afe42d0… ragelink 247
afe42d0… ragelink 248 --darkened-bg: #eeeeee;
afe42d0… ragelink 249 --selected-bg: #fde8ea;
afe42d0… ragelink 250 --selected-row: #fde8ea;
afe42d0… ragelink 251 --input-bg: #ffffff;
afe42d0… ragelink 252 }
afe42d0… ragelink 253 }
afe42d0… ragelink 254
afe42d0… ragelink 255
afe42d0… ragelink 256 /* ── Layout ─────────────────────────────────────────────────────────────── */
afe42d0… ragelink 257
afe42d0… ragelink 258 /*
afe42d0… ragelink 259 * Django's stock base.css gives `.module { background: var(--darkened-bg) }`.
afe42d0… ragelink 260 * #changelist has class "module", so the 30px margin gap between the table and
afe42d0… ragelink 261 * the filter also gets --darkened-bg — the same color as the filter itself.
afe42d0… ragelink 262 * Result: no visible gap.
afe42d0… ragelink 263 *
afe42d0… ragelink 264 * clientcove fixes this by shipping a modified base.css with
afe42d0… ragelink 265 * `.module { background: var(--body-bg) }`. We can't change Django's base.css,
afe42d0… ragelink 266 * so we target #changelist specifically to make the gap show the body background.
afe42d0… ragelink 267 */
afe42d0… ragelink 268 #changelist.module {
afe42d0… ragelink 269 background: transparent;
afe42d0… ragelink 270 border: none;
afe42d0… ragelink 271 }
afe42d0… ragelink 272
afe42d0… ragelink 273 /* Prevent table from overflowing into the filter gap — layout owned by changelists.css */
afe42d0… ragelink 274 #changelist .changelist-form-container > div {
afe42d0… ragelink 275 overflow-x: auto;
afe42d0… ragelink 276 }
afe42d0… ragelink 277
afe42d0… ragelink 278 /* ── Header — always dark, hardcoded values intentional ─────────────────── */
afe42d0… ragelink 279
afe42d0… ragelink 280 #header {
afe42d0… ragelink 281 background: var(--header-bg);
afe42d0… ragelink 282 border-bottom: 2px solid var(--primary);
afe42d0… ragelink 283 }
afe42d0… ragelink 284
afe42d0… ragelink 285 #header a:link,
afe42d0… ragelink 286 #header a:visited {
afe42d0… ragelink 287 color: var(--header-link-color);
afe42d0… ragelink 288 }
afe42d0… ragelink 289
afe42d0… ragelink 290 #header #branding h1 {
afe42d0… ragelink 291 line-height: 1;
afe42d0… ragelink 292 margin: 0;
afe42d0… ragelink 293 }
afe42d0… ragelink 294
afe42d0… ragelink 295 #header #branding .logo img {
afe42d0… ragelink 296 height: 40px;
afe42d0… ragelink 297 width: auto;
afe42d0… ragelink 298 display: block;
afe42d0… ragelink 299 }
afe42d0… ragelink 300
afe42d0… ragelink 301 #header #user-tools {
afe42d0… ragelink 302 color: #a8aaa9;
afe42d0… ragelink 303 }
afe42d0… ragelink 304
afe42d0… ragelink 305 #header #user-tools a {
afe42d0… ragelink 306 color: #a8aaa9;
afe42d0… ragelink 307 }
afe42d0… ragelink 308
afe42d0… ragelink 309 #header #user-tools a:hover {
afe42d0… ragelink 310 color: #FAFAFA;
afe42d0… ragelink 311 }
afe42d0… ragelink 312
afe42d0… ragelink 313 /* Quick-links group in header */
afe42d0… ragelink 314 .bw-links {
afe42d0… ragelink 315 display: inline-flex;
afe42d0… ragelink 316 gap: 2px;
afe42d0… ragelink 317 margin-right: 8px;
afe42d0… ragelink 318 border-right: 1px solid #3d3f3e;
afe42d0… ragelink 319 padding-right: 10px;
afe42d0… ragelink 320 }
afe42d0… ragelink 321
afe42d0… ragelink 322 .bw-links a {
afe42d0… ragelink 323 display: inline-block;
afe42d0… ragelink 324 padding: 2px 7px;
afe42d0… ragelink 325 border-radius: 3px;
afe42d0… ragelink 326 background: #2e3130;
afe42d0… ragelink 327 color: #a8aaa9 !important;
afe42d0… ragelink 328 font-size: 0.75em;
afe42d0… ragelink 329 text-transform: uppercase;
afe42d0… ragelink 330 letter-spacing: 0.04em;
afe42d0… ragelink 331 text-decoration: none !important;
afe42d0… ragelink 332 transition: background 0.15s, color 0.15s;
afe42d0… ragelink 333 }
afe42d0… ragelink 334
afe42d0… ragelink 335 .bw-links a:hover {
afe42d0… ragelink 336 background: var(--primary);
afe42d0… ragelink 337 color: #FAFAFA !important;
afe42d0… ragelink 338 }
afe42d0… ragelink 339
afe42d0… ragelink 340 /* ── Light mode header text overrides ───────────────────────────────────── */
afe42d0… ragelink 341
afe42d0… ragelink 342 /* ── Navigation ─────────────────────────────────────────────────────────── */
afe42d0… ragelink 343
afe42d0… ragelink 344 div.breadcrumbs {
afe42d0… ragelink 345 background: var(--breadcrumbs-bg);
afe42d0… ragelink 346 color: var(--breadcrumbs-fg);
afe42d0… ragelink 347 }
afe42d0… ragelink 348
afe42d0… ragelink 349 div.breadcrumbs a {
afe42d0… ragelink 350 color: var(--breadcrumbs-fg);
afe42d0… ragelink 351 opacity: 0.85;
afe42d0… ragelink 352 }
afe42d0… ragelink 353
afe42d0… ragelink 354 div.breadcrumbs a:hover {
afe42d0… ragelink 355 opacity: 1;
afe42d0… ragelink 356 text-decoration: underline;
afe42d0… ragelink 357 }
afe42d0… ragelink 358
afe42d0… ragelink 359 /* ── Content area ───────────────────────────────────────────────────────── */
afe42d0… ragelink 360
afe42d0… ragelink 361 body {
afe42d0… ragelink 362 background: var(--body-bg);
afe42d0… ragelink 363 color: var(--body-fg);
afe42d0… ragelink 364 }
afe42d0… ragelink 365
afe42d0… ragelink 366 .module h2,
afe42d0… ragelink 367 .module caption,
afe42d0… ragelink 368 .inline-group h2 {
afe42d0… ragelink 369 background: var(--darkened-bg);
afe42d0… ragelink 370 color: var(--body-loud-color);
afe42d0… ragelink 371 border-left: 3px solid var(--primary);
afe42d0… ragelink 372 padding-left: 12px;
afe42d0… ragelink 373 font-size: 0.75em;
afe42d0… ragelink 374 font-weight: 600;
afe42d0… ragelink 375 text-transform: uppercase;
afe42d0… ragelink 376 letter-spacing: 0.06em;
afe42d0… ragelink 377 }
afe42d0… ragelink 378
afe42d0… ragelink 379 .module {
afe42d0… ragelink 380 background: var(--darkened-bg);
afe42d0… ragelink 381 border: 1px solid var(--border-color);
afe42d0… ragelink 382 }
afe42d0… ragelink 383
afe42d0… ragelink 384 /* ── Sidebar ────────────────────────────────────────────────────────────── */
afe42d0… ragelink 385
afe42d0… ragelink 386 #nav-sidebar {
afe42d0… ragelink 387 background: var(--darkened-bg);
afe42d0… ragelink 388 border-right: 1px solid var(--border-color);
afe42d0… ragelink 389 }
afe42d0… ragelink 390
afe42d0… ragelink 391 #nav-sidebar .current-app .section:link,
afe42d0… ragelink 392 #nav-sidebar .current-app .section:visited {
afe42d0… ragelink 393 color: var(--primary);
afe42d0… ragelink 394 }
afe42d0… ragelink 395
afe42d0… ragelink 396 /* ── Tables ─────────────────────────────────────────────────────────────── */
afe42d0… ragelink 397
afe42d0… ragelink 398 #result_list thead th {
afe42d0… ragelink 399 background: var(--input-bg);
afe42d0… ragelink 400 color: var(--body-fg);
afe42d0… ragelink 401 border-bottom: 1px solid var(--border-color);
afe42d0… ragelink 402 }
afe42d0… ragelink 403
afe42d0… ragelink 404 #result_list thead th a,
afe42d0… ragelink 405 #result_list thead th a:visited {
afe42d0… ragelink 406 color: var(--body-fg);
afe42d0… ragelink 407 }
afe42d0… ragelink 408
afe42d0… ragelink 409 #result_list tr.row1 {
afe42d0… ragelink 410 background: var(--body-bg);
afe42d0… ragelink 411 }
afe42d0… ragelink 412
afe42d0… ragelink 413 #result_list tr.row2 {
afe42d0… ragelink 414 background: var(--darkened-bg);
afe42d0… ragelink 415 }
afe42d0… ragelink 416
afe42d0… ragelink 417 #result_list tr:hover td,
afe42d0… ragelink 418 #result_list tr.selected td {
afe42d0… ragelink 419 background: var(--selected-bg);
afe42d0… ragelink 420 }
afe42d0… ragelink 421
afe42d0… ragelink 422 /* ── Forms ──────────────────────────────────────────────────────────────── */
afe42d0… ragelink 423
afe42d0… ragelink 424 input, textarea, select,
afe42d0… ragelink 425 .form-row input, .form-row textarea, .form-row select {
afe42d0… ragelink 426 background: var(--input-bg);
afe42d0… ragelink 427 color: var(--body-fg);
afe42d0… ragelink 428 border: 1px solid var(--border-color);
afe42d0… ragelink 429 }
afe42d0… ragelink 430
afe42d0… ragelink 431 input:focus, textarea:focus, select:focus {
afe42d0… ragelink 432 border-color: var(--primary);
afe42d0… ragelink 433 outline: none;
afe42d0… ragelink 434 box-shadow: 0 0 0 2px rgba(220, 57, 76, 0.25);
afe42d0… ragelink 435 }
afe42d0… ragelink 436
afe42d0… ragelink 437 .form-row {
afe42d0… ragelink 438 border-bottom: 1px solid var(--border-color);
afe42d0… ragelink 439 }
afe42d0… ragelink 440
afe42d0… ragelink 441 fieldset {
afe42d0… ragelink 442 background: var(--darkened-bg);
afe42d0… ragelink 443 border: 1px solid var(--border-color);
afe42d0… ragelink 444 }
afe42d0… ragelink 445
afe42d0… ragelink 446 fieldset.collapsed h2 {
afe42d0… ragelink 447 background: var(--input-bg);
afe42d0… ragelink 448 color: var(--body-quiet-color);
afe42d0… ragelink 449 }
afe42d0… ragelink 450
afe42d0… ragelink 451 /* ── Buttons ────────────────────────────────────────────────────────────── */
afe42d0… ragelink 452
afe42d0… ragelink 453 .button, input[type="submit"], input[type="button"], .submit-row input, a.button {
afe42d0… ragelink 454 background: var(--button-bg);
afe42d0… ragelink 455 color: var(--button-fg);
afe42d0… ragelink 456 border: none;
afe42d0… ragelink 457 }
afe42d0… ragelink 458
afe42d0… ragelink 459 .button:hover, input[type="submit"]:hover, input[type="button"]:hover,
afe42d0… ragelink 460 .submit-row input:hover, a.button:hover {
afe42d0… ragelink 461 background: var(--button-hover-bg);
afe42d0… ragelink 462 }
afe42d0… ragelink 463
afe42d0… ragelink 464 .button.default, input[type="submit"].default, .submit-row input.default {
afe42d0… ragelink 465 background: var(--default-button-bg);
afe42d0… ragelink 466 }
afe42d0… ragelink 467
afe42d0… ragelink 468 .button.default:hover, input[type="submit"].default:hover,
afe42d0… ragelink 469 .submit-row input.default:hover {
afe42d0… ragelink 470 background: var(--default-button-hover-bg);
afe42d0… ragelink 471 }
afe42d0… ragelink 472
afe42d0… ragelink 473 .deletelink-box a.deletelink,
afe42d0… ragelink 474 .object-tools a.deletelink {
afe42d0… ragelink 475 background: var(--delete-button-bg);
afe42d0… ragelink 476 }
afe42d0… ragelink 477
afe42d0… ragelink 478 .deletelink-box a.deletelink:hover,
afe42d0… ragelink 479 .object-tools a.deletelink:hover {
afe42d0… ragelink 480 background: var(--delete-button-hover-bg);
afe42d0… ragelink 481 }
afe42d0… ragelink 482
afe42d0… ragelink 483 /* ── Dashboard / change list ────────────────────────────────────────────── */
afe42d0… ragelink 484
afe42d0… ragelink 485 #changelist .actions {
afe42d0… ragelink 486 background: var(--darkened-bg);
afe42d0… ragelink 487 border: 1px solid var(--border-color);
afe42d0… ragelink 488 border-top: none;
afe42d0… ragelink 489 }
afe42d0… ragelink 490
afe42d0… ragelink 491 /* Search bar */
afe42d0… ragelink 492 #changelist-search input[type="text"] {
afe42d0… ragelink 493 background: var(--input-bg);
afe42d0… ragelink 494 color: var(--body-fg);
afe42d0… ragelink 495 border: 1px solid var(--border-color);
afe42d0… ragelink 496 }
afe42d0… ragelink 497
afe42d0… ragelink 498 #changelist-search input[type="submit"] {
afe42d0… ragelink 499 background: var(--hairline-color);
afe42d0… ragelink 500 color: var(--body-fg);
afe42d0… ragelink 501 border: none;
afe42d0… ragelink 502 }
afe42d0… ragelink 503
afe42d0… ragelink 504 #changelist-search input[type="submit"]:hover {
afe42d0… ragelink 505 background: var(--primary);
afe42d0… ragelink 506 color: var(--primary-fg);
afe42d0… ragelink 507 }
afe42d0… ragelink 508
afe42d0… ragelink 509 /* Action bar */
afe42d0… ragelink 510 #changelist .actions label,
afe42d0… ragelink 511 #changelist .actions span {
afe42d0… ragelink 512 color: var(--body-quiet-color);
afe42d0… ragelink 513 }
afe42d0… ragelink 514
afe42d0… ragelink 515 #changelist .actions select {
afe42d0… ragelink 516 background: var(--input-bg);
afe42d0… ragelink 517 color: var(--body-fg);
afe42d0… ragelink 518 border: 1px solid var(--border-color);
afe42d0… ragelink 519 }
afe42d0… ragelink 520
afe42d0… ragelink 521 /* Filter sidebar */
afe42d0… ragelink 522 #changelist-filter {
afe42d0… ragelink 523 background: var(--input-bg);
afe42d0… ragelink 524 border-left: 2px solid var(--border-color);
afe42d0… ragelink 525 }
afe42d0… ragelink 526
afe42d0… ragelink 527 #changelist-filter h2 {
afe42d0… ragelink 528 background: var(--input-bg);
afe42d0… ragelink 529 color: var(--body-quiet-color);
afe42d0… ragelink 530 font-size: 0.8em;
afe42d0… ragelink 531 text-transform: uppercase;
afe42d0… ragelink 532 letter-spacing: 0.05em;
afe42d0… ragelink 533 }
afe42d0… ragelink 534
afe42d0… ragelink 535 #changelist-filter h3 {
afe42d0… ragelink 536 color: var(--body-fg);
afe42d0… ragelink 537 border-bottom: 1px solid var(--border-color);
afe42d0… ragelink 538 }
afe42d0… ragelink 539
afe42d0… ragelink 540 #changelist-filter ul {
afe42d0… ragelink 541 border-top: none;
afe42d0… ragelink 542 }
afe42d0… ragelink 543
afe42d0… ragelink 544 #changelist-filter li a,
afe42d0… ragelink 545 #changelist-filter li a:link,
afe42d0… ragelink 546 #changelist-filter li a:visited {
afe42d0… ragelink 547 color: var(--link-fg);
afe42d0… ragelink 548 }
afe42d0… ragelink 549
afe42d0… ragelink 550 #changelist-filter li a:hover {
afe42d0… ragelink 551 color: var(--link-hover-color);
afe42d0… ragelink 552 }
afe42d0… ragelink 553
afe42d0… ragelink 554 #changelist-filter li.selected a,
afe42d0… ragelink 555 #changelist-filter li.selected {
afe42d0… ragelink 556 color: var(--body-fg);
afe42d0… ragelink 557 }
afe42d0… ragelink 558
afe42d0… ragelink 559 /* "Show counts" and other filter toolbar links */
afe42d0… ragelink 560 #changelist-filter details summary,
afe42d0… ragelink 561 #changelist-filter .xfull {
afe42d0… ragelink 562 color: var(--body-quiet-color);
afe42d0… ragelink 563 }
afe42d0… ragelink 564
afe42d0… ragelink 565
afe42d0… ragelink 566 /* ── Pagination ─────────────────────────────────────────────────────────── */
afe42d0… ragelink 567
afe42d0… ragelink 568 .paginator {
afe42d0… ragelink 569 color: var(--body-quiet-color);
afe42d0… ragelink 570 border-top: 1px solid var(--border-color);
afe42d0… ragelink 571 }
afe42d0… ragelink 572
afe42d0… ragelink 573 .paginator a:link,
afe42d0… ragelink 574 .paginator a:visited {
afe42d0… ragelink 575 background: var(--darkened-bg);
afe42d0… ragelink 576 color: var(--body-fg);
afe42d0… ragelink 577 border: 1px solid var(--border-color);
afe42d0… ragelink 578 }
afe42d0… ragelink 579
afe42d0… ragelink 580 .paginator a:hover {
afe42d0… ragelink 581 background: var(--hairline-color);
afe42d0… ragelink 582 color: var(--body-fg);
afe42d0… ragelink 583 border-color: var(--border-color);
afe42d0… ragelink 584 }
afe42d0… ragelink 585
afe42d0… ragelink 586 .paginator .this-page {
afe42d0… ragelink 587 background: var(--primary);
afe42d0… ragelink 588 color: var(--primary-fg);
afe42d0… ragelink 589 border: 1px solid var(--primary);
afe42d0… ragelink 590 }
afe42d0… ragelink 591
afe42d0… ragelink 592 /* ── Login page ─────────────────────────────────────────────────────────── */
afe42d0… ragelink 593
afe42d0… ragelink 594 body.login {
afe42d0… ragelink 595 background: var(--header-bg);
afe42d0… ragelink 596 }
afe42d0… ragelink 597
afe42d0… ragelink 598 body.login #container {
afe42d0… ragelink 599 background: var(--body-bg);
afe42d0… ragelink 600 }
afe42d0… ragelink 601
afe42d0… ragelink 602 /* ── Messages ───────────────────────────────────────────────────────────── */
afe42d0… ragelink 603
afe42d0… ragelink 604 .messagelist li.success {
afe42d0… ragelink 605 background: var(--message-success-bg);
afe42d0… ragelink 606 color: var(--message-success-color);
afe42d0… ragelink 607 border: 1px solid var(--message-success-border);
afe42d0… ragelink 608 }
afe42d0… ragelink 609
afe42d0… ragelink 610 .messagelist li.warning {
afe42d0… ragelink 611 background: var(--message-warning-bg);
afe42d0… ragelink 612 color: var(--message-warning-color);
afe42d0… ragelink 613 border: 1px solid var(--message-warning-border);
afe42d0… ragelink 614 }
afe42d0… ragelink 615
afe42d0… ragelink 616 .messagelist li.error {
afe42d0… ragelink 617 background: var(--message-error-bg);
afe42d0… ragelink 618 color: var(--message-error-color);
afe42d0… ragelink 619 border: 1px solid var(--message-error-border);
afe42d0… ragelink 620 }
afe42d0… ragelink 621
afe42d0… ragelink 622 /* ── Calendar / date widgets ────────────────────────────────────────────── */
afe42d0… ragelink 623
afe42d0… ragelink 624 .calendarbox, .clockbox {
afe42d0… ragelink 625 background: var(--darkened-bg);
afe42d0… ragelink 626 border: 1px solid var(--border-color);
afe42d0… ragelink 627 }
afe42d0… ragelink 628
afe42d0… ragelink 629 .calendar caption,
afe42d0… ragelink 630 .calendarbox h2 {
afe42d0… ragelink 631 background: var(--primary);
afe42d0… ragelink 632 color: var(--primary-fg);
afe42d0… ragelink 633 }
afe42d0… ragelink 634
afe42d0… ragelink 635 .calendar td a:hover {
afe42d0… ragelink 636 background: var(--primary);
afe42d0… ragelink 637 color: var(--primary-fg);
afe42d0… ragelink 638 }
afe42d0… ragelink 639
afe42d0… ragelink 640 /* ── Misc ───────────────────────────────────────────────────────────────── */
afe42d0… ragelink 641
afe42d0… ragelink 642 a:link, a:visited {
afe42d0… ragelink 643 color: var(--link-fg);
afe42d0… ragelink 644 }
afe42d0… ragelink 645
afe42d0… ragelink 646 a:hover {
afe42d0… ragelink 647 color: var(--link-hover-color);
afe42d0… ragelink 648 }
afe42d0… ragelink 649
afe42d0… ragelink 650 .help, .help-tooltip {
afe42d0… ragelink 651 color: var(--body-quiet-color);
afe42d0… ragelink 652 }
afe42d0… ragelink 653
afe42d0… ragelink 654 .errornote {
afe42d0… ragelink 655 background: var(--message-error-bg);
afe42d0… ragelink 656 border: 1px solid var(--secondary);
afe42d0… ragelink 657 color: var(--error-fg);
afe42d0… ragelink 658 }
afe42d0… ragelink 659
afe42d0… ragelink 660 ul.errorlist {
afe42d0… ragelink 661 color: var(--error-fg);
afe42d0… ragelink 662 }
afe42d0… ragelink 663
afe42d0… ragelink 664 .inline-related h3,
afe42d0… ragelink 665 .inline-related h4 {
afe42d0… ragelink 666 background: var(--input-bg);
afe42d0… ragelink 667 border-top: 2px solid var(--primary);
afe42d0… ragelink 668 color: var(--body-fg);
afe42d0… ragelink 669 }
afe42d0… ragelink 670
afe42d0… ragelink 671 /* ── Inline formsets (tabular) ──────────────────────────────────────────── */
afe42d0… ragelink 672
afe42d0… ragelink 673 .inline-related {
afe42d0… ragelink 674 background: var(--darkened-bg);
afe42d0… ragelink 675 border: 1px solid var(--border-color);
afe42d0… ragelink 676 max-width: 100%;
afe42d0… ragelink 677 overflow-x: auto;
afe42d0… ragelink 678 }
afe42d0… ragelink 679
afe42d0… ragelink 680 .inline-related .tabular {
afe42d0… ragelink 681 max-width: 100%;
afe42d0… ragelink 682 overflow-x: auto;
afe42d0… ragelink 683 display: block;
afe42d0… ragelink 684 }
afe42d0… ragelink 685
afe42d0… ragelink 686 .inline-related thead {
afe42d0… ragelink 687 background: var(--input-bg);
afe42d0… ragelink 688 }
afe42d0… ragelink 689
afe42d0… ragelink 690 .inline-related thead th,
afe42d0… ragelink 691 .inline-related thead td {
afe42d0… ragelink 692 background: var(--input-bg);
afe42d0… ragelink 693 color: var(--body-quiet-color);
afe42d0… ragelink 694 border-bottom: 1px solid var(--border-color);
afe42d0… ragelink 695 font-size: 0.75em;
afe42d0… ragelink 696 text-transform: uppercase;
afe42d0… ragelink 697 letter-spacing: 0.05em;
afe42d0… ragelink 698 }
afe42d0… ragelink 699
afe42d0… ragelink 700 .inline-related tbody tr {
afe42d0… ragelink 701 background: var(--darkened-bg);
afe42d0… ragelink 702 border-bottom: 1px solid var(--border-color);
afe42d0… ragelink 703 }
afe42d0… ragelink 704
afe42d0… ragelink 705 .inline-related tbody tr:hover {
afe42d0… ragelink 706 background: var(--selected-bg);
afe42d0… ragelink 707 }
afe42d0… ragelink 708
afe42d0… ragelink 709 .inline-related tbody tr.empty-form {
afe42d0… ragelink 710 display: none;
afe42d0… ragelink 711 }
afe42d0… ragelink 712
afe42d0… ragelink 713 .inline-related .add-row {
afe42d0… ragelink 714 background: var(--input-bg);
afe42d0… ragelink 715 border-top: 1px solid var(--border-color);
afe42d0… ragelink 716 }
afe42d0… ragelink 717
afe42d0… ragelink 718 .inline-related .add-row a {
afe42d0… ragelink 719 color: var(--primary);
afe42d0… ragelink 720 }
afe42d0… ragelink 721
afe42d0… ragelink 722 .inline-related .add-row a:hover {
afe42d0… ragelink 723 color: var(--link-hover-color);
afe42d0… ragelink 724 }
afe42d0… ragelink 725
afe42d0… ragelink 726 .inline-related td.delete {
afe42d0… ragelink 727 background: var(--darkened-bg);
afe42d0… ragelink 728 }
afe42d0… ragelink 729
afe42d0… ragelink 730 .inline-related td.original p {
afe42d0… ragelink 731 color: var(--body-quiet-color);
afe42d0… ragelink 732 font-size: 0.8em;
afe42d0… ragelink 733 }
afe42d0… ragelink 734
afe42d0… ragelink 735 /* ── Read-only field values ──────────────────────────────────────────────── */
afe42d0… ragelink 736
afe42d0… ragelink 737 .form-row .readonly {
afe42d0… ragelink 738 color: var(--body-fg);
afe42d0… ragelink 739 padding: 8px 0;
afe42d0… ragelink 740 }
afe42d0… ragelink 741
afe42d0… ragelink 742 .form-row label {
afe42d0… ragelink 743 color: var(--body-quiet-color);
afe42d0… ragelink 744 }
afe42d0… ragelink 745
afe42d0… ragelink 746 /* ── Module captions: brand color in light mode ──────────────────────────── */
afe42d0… ragelink 747 /* Needs higher specificity than Django's html[data-theme="light"] .module caption */
afe42d0… ragelink 748
afe42d0… ragelink 749 /* Nav sidebar section headers — dark gray in all light themes */
afe42d0… ragelink 750 /* Scoped to #nav-sidebar so it doesn't hit #changelist-filter h2 */
afe42d0… ragelink 751 :root[data-theme="dark"] #nav-sidebar .module caption,
afe42d0… ragelink 752 :root[data-theme="dark"] #nav-sidebar .module h2 {
afe42d0… ragelink 753 background: #3a3a3a !important;
afe42d0… ragelink 754 color: #FAFAFA !important;
afe42d0… ragelink 755 }
afe42d0… ragelink 756
afe42d0… ragelink 757 :root[data-theme="light"] #nav-sidebar .module caption,
afe42d0… ragelink 758 :root[data-theme="light"] #nav-sidebar .module h2 {
afe42d0… ragelink 759 background: #3a3a3a !important;
afe42d0… ragelink 760 color: #FAFAFA !important;
afe42d0… ragelink 761 }
afe42d0… ragelink 762
afe42d0… ragelink 763 @media (prefers-color-scheme: light) {
afe42d0… ragelink 764 :root:not([data-theme="dark"]) #nav-sidebar .module caption,
afe42d0… ragelink 765 :root:not([data-theme="dark"]) #nav-sidebar .module h2 {
afe42d0… ragelink 766 background: #3a3a3a !important;
afe42d0… ragelink 767 color: #FAFAFA !important;
afe42d0… ragelink 768 }
afe42d0… ragelink 769 }

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button