FossilRepo

fossilrepo / assets / admin / css / dark_theme.23ccf3764a60.css
Source Blame History 768 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-quiet-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 text-transform: uppercase;
afe42d0… ragelink 375 letter-spacing: 0.06em;
afe42d0… ragelink 376 }
afe42d0… ragelink 377
afe42d0… ragelink 378 .module {
afe42d0… ragelink 379 background: var(--darkened-bg);
afe42d0… ragelink 380 border: 1px solid var(--border-color);
afe42d0… ragelink 381 }
afe42d0… ragelink 382
afe42d0… ragelink 383 /* ── Sidebar ────────────────────────────────────────────────────────────── */
afe42d0… ragelink 384
afe42d0… ragelink 385 #nav-sidebar {
afe42d0… ragelink 386 background: var(--darkened-bg);
afe42d0… ragelink 387 border-right: 1px solid var(--border-color);
afe42d0… ragelink 388 }
afe42d0… ragelink 389
afe42d0… ragelink 390 #nav-sidebar .current-app .section:link,
afe42d0… ragelink 391 #nav-sidebar .current-app .section:visited {
afe42d0… ragelink 392 color: var(--primary);
afe42d0… ragelink 393 }
afe42d0… ragelink 394
afe42d0… ragelink 395 /* ── Tables ─────────────────────────────────────────────────────────────── */
afe42d0… ragelink 396
afe42d0… ragelink 397 #result_list thead th {
afe42d0… ragelink 398 background: var(--input-bg);
afe42d0… ragelink 399 color: var(--body-fg);
afe42d0… ragelink 400 border-bottom: 1px solid var(--border-color);
afe42d0… ragelink 401 }
afe42d0… ragelink 402
afe42d0… ragelink 403 #result_list thead th a,
afe42d0… ragelink 404 #result_list thead th a:visited {
afe42d0… ragelink 405 color: var(--body-fg);
afe42d0… ragelink 406 }
afe42d0… ragelink 407
afe42d0… ragelink 408 #result_list tr.row1 {
afe42d0… ragelink 409 background: var(--body-bg);
afe42d0… ragelink 410 }
afe42d0… ragelink 411
afe42d0… ragelink 412 #result_list tr.row2 {
afe42d0… ragelink 413 background: var(--darkened-bg);
afe42d0… ragelink 414 }
afe42d0… ragelink 415
afe42d0… ragelink 416 #result_list tr:hover td,
afe42d0… ragelink 417 #result_list tr.selected td {
afe42d0… ragelink 418 background: var(--selected-bg);
afe42d0… ragelink 419 }
afe42d0… ragelink 420
afe42d0… ragelink 421 /* ── Forms ──────────────────────────────────────────────────────────────── */
afe42d0… ragelink 422
afe42d0… ragelink 423 input, textarea, select,
afe42d0… ragelink 424 .form-row input, .form-row textarea, .form-row select {
afe42d0… ragelink 425 background: var(--input-bg);
afe42d0… ragelink 426 color: var(--body-fg);
afe42d0… ragelink 427 border: 1px solid var(--border-color);
afe42d0… ragelink 428 }
afe42d0… ragelink 429
afe42d0… ragelink 430 input:focus, textarea:focus, select:focus {
afe42d0… ragelink 431 border-color: var(--primary);
afe42d0… ragelink 432 outline: none;
afe42d0… ragelink 433 box-shadow: 0 0 0 2px rgba(220, 57, 76, 0.25);
afe42d0… ragelink 434 }
afe42d0… ragelink 435
afe42d0… ragelink 436 .form-row {
afe42d0… ragelink 437 border-bottom: 1px solid var(--border-color);
afe42d0… ragelink 438 }
afe42d0… ragelink 439
afe42d0… ragelink 440 fieldset {
afe42d0… ragelink 441 background: var(--darkened-bg);
afe42d0… ragelink 442 border: 1px solid var(--border-color);
afe42d0… ragelink 443 }
afe42d0… ragelink 444
afe42d0… ragelink 445 fieldset.collapsed h2 {
afe42d0… ragelink 446 background: var(--input-bg);
afe42d0… ragelink 447 color: var(--body-quiet-color);
afe42d0… ragelink 448 }
afe42d0… ragelink 449
afe42d0… ragelink 450 /* ── Buttons ────────────────────────────────────────────────────────────── */
afe42d0… ragelink 451
afe42d0… ragelink 452 .button, input[type="submit"], input[type="button"], .submit-row input, a.button {
afe42d0… ragelink 453 background: var(--button-bg);
afe42d0… ragelink 454 color: var(--button-fg);
afe42d0… ragelink 455 border: none;
afe42d0… ragelink 456 }
afe42d0… ragelink 457
afe42d0… ragelink 458 .button:hover, input[type="submit"]:hover, input[type="button"]:hover,
afe42d0… ragelink 459 .submit-row input:hover, a.button:hover {
afe42d0… ragelink 460 background: var(--button-hover-bg);
afe42d0… ragelink 461 }
afe42d0… ragelink 462
afe42d0… ragelink 463 .button.default, input[type="submit"].default, .submit-row input.default {
afe42d0… ragelink 464 background: var(--default-button-bg);
afe42d0… ragelink 465 }
afe42d0… ragelink 466
afe42d0… ragelink 467 .button.default:hover, input[type="submit"].default:hover,
afe42d0… ragelink 468 .submit-row input.default:hover {
afe42d0… ragelink 469 background: var(--default-button-hover-bg);
afe42d0… ragelink 470 }
afe42d0… ragelink 471
afe42d0… ragelink 472 .deletelink-box a.deletelink,
afe42d0… ragelink 473 .object-tools a.deletelink {
afe42d0… ragelink 474 background: var(--delete-button-bg);
afe42d0… ragelink 475 }
afe42d0… ragelink 476
afe42d0… ragelink 477 .deletelink-box a.deletelink:hover,
afe42d0… ragelink 478 .object-tools a.deletelink:hover {
afe42d0… ragelink 479 background: var(--delete-button-hover-bg);
afe42d0… ragelink 480 }
afe42d0… ragelink 481
afe42d0… ragelink 482 /* ── Dashboard / change list ────────────────────────────────────────────── */
afe42d0… ragelink 483
afe42d0… ragelink 484 #changelist .actions {
afe42d0… ragelink 485 background: var(--darkened-bg);
afe42d0… ragelink 486 border: 1px solid var(--border-color);
afe42d0… ragelink 487 border-top: none;
afe42d0… ragelink 488 }
afe42d0… ragelink 489
afe42d0… ragelink 490 /* Search bar */
afe42d0… ragelink 491 #changelist-search input[type="text"] {
afe42d0… ragelink 492 background: var(--input-bg);
afe42d0… ragelink 493 color: var(--body-fg);
afe42d0… ragelink 494 border: 1px solid var(--border-color);
afe42d0… ragelink 495 }
afe42d0… ragelink 496
afe42d0… ragelink 497 #changelist-search input[type="submit"] {
afe42d0… ragelink 498 background: var(--hairline-color);
afe42d0… ragelink 499 color: var(--body-fg);
afe42d0… ragelink 500 border: none;
afe42d0… ragelink 501 }
afe42d0… ragelink 502
afe42d0… ragelink 503 #changelist-search input[type="submit"]:hover {
afe42d0… ragelink 504 background: var(--primary);
afe42d0… ragelink 505 color: var(--primary-fg);
afe42d0… ragelink 506 }
afe42d0… ragelink 507
afe42d0… ragelink 508 /* Action bar */
afe42d0… ragelink 509 #changelist .actions label,
afe42d0… ragelink 510 #changelist .actions span {
afe42d0… ragelink 511 color: var(--body-quiet-color);
afe42d0… ragelink 512 }
afe42d0… ragelink 513
afe42d0… ragelink 514 #changelist .actions select {
afe42d0… ragelink 515 background: var(--input-bg);
afe42d0… ragelink 516 color: var(--body-fg);
afe42d0… ragelink 517 border: 1px solid var(--border-color);
afe42d0… ragelink 518 }
afe42d0… ragelink 519
afe42d0… ragelink 520 /* Filter sidebar */
afe42d0… ragelink 521 #changelist-filter {
afe42d0… ragelink 522 background: var(--input-bg);
afe42d0… ragelink 523 border-left: 2px solid var(--border-color);
afe42d0… ragelink 524 }
afe42d0… ragelink 525
afe42d0… ragelink 526 #changelist-filter h2 {
afe42d0… ragelink 527 background: var(--input-bg);
afe42d0… ragelink 528 color: var(--body-quiet-color);
afe42d0… ragelink 529 font-size: 0.8em;
afe42d0… ragelink 530 text-transform: uppercase;
afe42d0… ragelink 531 letter-spacing: 0.05em;
afe42d0… ragelink 532 }
afe42d0… ragelink 533
afe42d0… ragelink 534 #changelist-filter h3 {
afe42d0… ragelink 535 color: var(--body-fg);
afe42d0… ragelink 536 border-bottom: 1px solid var(--border-color);
afe42d0… ragelink 537 }
afe42d0… ragelink 538
afe42d0… ragelink 539 #changelist-filter ul {
afe42d0… ragelink 540 border-top: none;
afe42d0… ragelink 541 }
afe42d0… ragelink 542
afe42d0… ragelink 543 #changelist-filter li a,
afe42d0… ragelink 544 #changelist-filter li a:link,
afe42d0… ragelink 545 #changelist-filter li a:visited {
afe42d0… ragelink 546 color: var(--link-fg);
afe42d0… ragelink 547 }
afe42d0… ragelink 548
afe42d0… ragelink 549 #changelist-filter li a:hover {
afe42d0… ragelink 550 color: var(--link-hover-color);
afe42d0… ragelink 551 }
afe42d0… ragelink 552
afe42d0… ragelink 553 #changelist-filter li.selected a,
afe42d0… ragelink 554 #changelist-filter li.selected {
afe42d0… ragelink 555 color: var(--body-fg);
afe42d0… ragelink 556 }
afe42d0… ragelink 557
afe42d0… ragelink 558 /* "Show counts" and other filter toolbar links */
afe42d0… ragelink 559 #changelist-filter details summary,
afe42d0… ragelink 560 #changelist-filter .xfull {
afe42d0… ragelink 561 color: var(--body-quiet-color);
afe42d0… ragelink 562 }
afe42d0… ragelink 563
afe42d0… ragelink 564
afe42d0… ragelink 565 /* ── Pagination ─────────────────────────────────────────────────────────── */
afe42d0… ragelink 566
afe42d0… ragelink 567 .paginator {
afe42d0… ragelink 568 color: var(--body-quiet-color);
afe42d0… ragelink 569 border-top: 1px solid var(--border-color);
afe42d0… ragelink 570 }
afe42d0… ragelink 571
afe42d0… ragelink 572 .paginator a:link,
afe42d0… ragelink 573 .paginator a:visited {
afe42d0… ragelink 574 background: var(--darkened-bg);
afe42d0… ragelink 575 color: var(--body-fg);
afe42d0… ragelink 576 border: 1px solid var(--border-color);
afe42d0… ragelink 577 }
afe42d0… ragelink 578
afe42d0… ragelink 579 .paginator a:hover {
afe42d0… ragelink 580 background: var(--hairline-color);
afe42d0… ragelink 581 color: var(--body-fg);
afe42d0… ragelink 582 border-color: var(--border-color);
afe42d0… ragelink 583 }
afe42d0… ragelink 584
afe42d0… ragelink 585 .paginator .this-page {
afe42d0… ragelink 586 background: var(--primary);
afe42d0… ragelink 587 color: var(--primary-fg);
afe42d0… ragelink 588 border: 1px solid var(--primary);
afe42d0… ragelink 589 }
afe42d0… ragelink 590
afe42d0… ragelink 591 /* ── Login page ─────────────────────────────────────────────────────────── */
afe42d0… ragelink 592
afe42d0… ragelink 593 body.login {
afe42d0… ragelink 594 background: var(--header-bg);
afe42d0… ragelink 595 }
afe42d0… ragelink 596
afe42d0… ragelink 597 body.login #container {
afe42d0… ragelink 598 background: var(--body-bg);
afe42d0… ragelink 599 }
afe42d0… ragelink 600
afe42d0… ragelink 601 /* ── Messages ───────────────────────────────────────────────────────────── */
afe42d0… ragelink 602
afe42d0… ragelink 603 .messagelist li.success {
afe42d0… ragelink 604 background: var(--message-success-bg);
afe42d0… ragelink 605 color: var(--message-success-color);
afe42d0… ragelink 606 border: 1px solid var(--message-success-border);
afe42d0… ragelink 607 }
afe42d0… ragelink 608
afe42d0… ragelink 609 .messagelist li.warning {
afe42d0… ragelink 610 background: var(--message-warning-bg);
afe42d0… ragelink 611 color: var(--message-warning-color);
afe42d0… ragelink 612 border: 1px solid var(--message-warning-border);
afe42d0… ragelink 613 }
afe42d0… ragelink 614
afe42d0… ragelink 615 .messagelist li.error {
afe42d0… ragelink 616 background: var(--message-error-bg);
afe42d0… ragelink 617 color: var(--message-error-color);
afe42d0… ragelink 618 border: 1px solid var(--message-error-border);
afe42d0… ragelink 619 }
afe42d0… ragelink 620
afe42d0… ragelink 621 /* ── Calendar / date widgets ────────────────────────────────────────────── */
afe42d0… ragelink 622
afe42d0… ragelink 623 .calendarbox, .clockbox {
afe42d0… ragelink 624 background: var(--darkened-bg);
afe42d0… ragelink 625 border: 1px solid var(--border-color);
afe42d0… ragelink 626 }
afe42d0… ragelink 627
afe42d0… ragelink 628 .calendar caption,
afe42d0… ragelink 629 .calendarbox h2 {
afe42d0… ragelink 630 background: var(--primary);
afe42d0… ragelink 631 color: var(--primary-fg);
afe42d0… ragelink 632 }
afe42d0… ragelink 633
afe42d0… ragelink 634 .calendar td a:hover {
afe42d0… ragelink 635 background: var(--primary);
afe42d0… ragelink 636 color: var(--primary-fg);
afe42d0… ragelink 637 }
afe42d0… ragelink 638
afe42d0… ragelink 639 /* ── Misc ───────────────────────────────────────────────────────────────── */
afe42d0… ragelink 640
afe42d0… ragelink 641 a:link, a:visited {
afe42d0… ragelink 642 color: var(--link-fg);
afe42d0… ragelink 643 }
afe42d0… ragelink 644
afe42d0… ragelink 645 a:hover {
afe42d0… ragelink 646 color: var(--link-hover-color);
afe42d0… ragelink 647 }
afe42d0… ragelink 648
afe42d0… ragelink 649 .help, .help-tooltip {
afe42d0… ragelink 650 color: var(--body-quiet-color);
afe42d0… ragelink 651 }
afe42d0… ragelink 652
afe42d0… ragelink 653 .errornote {
afe42d0… ragelink 654 background: var(--message-error-bg);
afe42d0… ragelink 655 border: 1px solid var(--secondary);
afe42d0… ragelink 656 color: var(--error-fg);
afe42d0… ragelink 657 }
afe42d0… ragelink 658
afe42d0… ragelink 659 ul.errorlist {
afe42d0… ragelink 660 color: var(--error-fg);
afe42d0… ragelink 661 }
afe42d0… ragelink 662
afe42d0… ragelink 663 .inline-related h3,
afe42d0… ragelink 664 .inline-related h4 {
afe42d0… ragelink 665 background: var(--input-bg);
afe42d0… ragelink 666 border-top: 2px solid var(--primary);
afe42d0… ragelink 667 color: var(--body-fg);
afe42d0… ragelink 668 }
afe42d0… ragelink 669
afe42d0… ragelink 670 /* ── Inline formsets (tabular) ──────────────────────────────────────────── */
afe42d0… ragelink 671
afe42d0… ragelink 672 .inline-related {
afe42d0… ragelink 673 background: var(--darkened-bg);
afe42d0… ragelink 674 border: 1px solid var(--border-color);
afe42d0… ragelink 675 max-width: 100%;
afe42d0… ragelink 676 overflow-x: auto;
afe42d0… ragelink 677 }
afe42d0… ragelink 678
afe42d0… ragelink 679 .inline-related .tabular {
afe42d0… ragelink 680 max-width: 100%;
afe42d0… ragelink 681 overflow-x: auto;
afe42d0… ragelink 682 display: block;
afe42d0… ragelink 683 }
afe42d0… ragelink 684
afe42d0… ragelink 685 .inline-related thead {
afe42d0… ragelink 686 background: var(--input-bg);
afe42d0… ragelink 687 }
afe42d0… ragelink 688
afe42d0… ragelink 689 .inline-related thead th,
afe42d0… ragelink 690 .inline-related thead td {
afe42d0… ragelink 691 background: var(--input-bg);
afe42d0… ragelink 692 color: var(--body-quiet-color);
afe42d0… ragelink 693 border-bottom: 1px solid var(--border-color);
afe42d0… ragelink 694 font-size: 0.75em;
afe42d0… ragelink 695 text-transform: uppercase;
afe42d0… ragelink 696 letter-spacing: 0.05em;
afe42d0… ragelink 697 }
afe42d0… ragelink 698
afe42d0… ragelink 699 .inline-related tbody tr {
afe42d0… ragelink 700 background: var(--darkened-bg);
afe42d0… ragelink 701 border-bottom: 1px solid var(--border-color);
afe42d0… ragelink 702 }
afe42d0… ragelink 703
afe42d0… ragelink 704 .inline-related tbody tr:hover {
afe42d0… ragelink 705 background: var(--selected-bg);
afe42d0… ragelink 706 }
afe42d0… ragelink 707
afe42d0… ragelink 708 .inline-related tbody tr.empty-form {
afe42d0… ragelink 709 display: none;
afe42d0… ragelink 710 }
afe42d0… ragelink 711
afe42d0… ragelink 712 .inline-related .add-row {
afe42d0… ragelink 713 background: var(--input-bg);
afe42d0… ragelink 714 border-top: 1px solid var(--border-color);
afe42d0… ragelink 715 }
afe42d0… ragelink 716
afe42d0… ragelink 717 .inline-related .add-row a {
afe42d0… ragelink 718 color: var(--primary);
afe42d0… ragelink 719 }
afe42d0… ragelink 720
afe42d0… ragelink 721 .inline-related .add-row a:hover {
afe42d0… ragelink 722 color: var(--link-hover-color);
afe42d0… ragelink 723 }
afe42d0… ragelink 724
afe42d0… ragelink 725 .inline-related td.delete {
afe42d0… ragelink 726 background: var(--darkened-bg);
afe42d0… ragelink 727 }
afe42d0… ragelink 728
afe42d0… ragelink 729 .inline-related td.original p {
afe42d0… ragelink 730 color: var(--body-quiet-color);
afe42d0… ragelink 731 font-size: 0.8em;
afe42d0… ragelink 732 }
afe42d0… ragelink 733
afe42d0… ragelink 734 /* ── Read-only field values ──────────────────────────────────────────────── */
afe42d0… ragelink 735
afe42d0… ragelink 736 .form-row .readonly {
afe42d0… ragelink 737 color: var(--body-fg);
afe42d0… ragelink 738 padding: 8px 0;
afe42d0… ragelink 739 }
afe42d0… ragelink 740
afe42d0… ragelink 741 .form-row label {
afe42d0… ragelink 742 color: var(--body-quiet-color);
afe42d0… ragelink 743 }
afe42d0… ragelink 744
afe42d0… ragelink 745 /* ── Module captions: brand color in light mode ──────────────────────────── */
afe42d0… ragelink 746 /* Needs higher specificity than Django's html[data-theme="light"] .module caption */
afe42d0… ragelink 747
afe42d0… ragelink 748 /* Nav sidebar section headers — dark gray in all light themes */
afe42d0… ragelink 749 /* Scoped to #nav-sidebar so it doesn't hit #changelist-filter h2 */
afe42d0… ragelink 750 :root[data-theme="dark"] #nav-sidebar .module caption,
afe42d0… ragelink 751 :root[data-theme="dark"] #nav-sidebar .module h2 {
afe42d0… ragelink 752 background: #3a3a3a !important;
afe42d0… ragelink 753 color: #FAFAFA !important;
afe42d0… ragelink 754 }
afe42d0… ragelink 755
afe42d0… ragelink 756 :root[data-theme="light"] #nav-sidebar .module caption,
afe42d0… ragelink 757 :root[data-theme="light"] #nav-sidebar .module h2 {
afe42d0… ragelink 758 background: #3a3a3a !important;
afe42d0… ragelink 759 color: #FAFAFA !important;
afe42d0… ragelink 760 }
afe42d0… ragelink 761
afe42d0… ragelink 762 @media (prefers-color-scheme: light) {
afe42d0… ragelink 763 :root:not([data-theme="dark"]) #nav-sidebar .module caption,
afe42d0… ragelink 764 :root:not([data-theme="dark"]) #nav-sidebar .module h2 {
afe42d0… ragelink 765 background: #3a3a3a !important;
afe42d0… ragelink 766 color: #FAFAFA !important;
afe42d0… ragelink 767 }
afe42d0… ragelink 768 }

Keyboard Shortcuts

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