FossilRepo

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