/* ============================================================================ MOSS OPERATIONS — Brutalist / Yeezy skin for the Django 6 admin. Loaded via {% block extrastyle %} in admin/base_site.html, i.e. AFTER base.css + dark_mode.css (so var overrides win) but BEFORE responsive.css (so a few tablet-breakpoint rules are re-asserted at higher specificity). Strategy: (1) remap Django's admin CSS-variable contract onto the app's tokens, then (2) hard-style the components that need brutalist geometry (flat, 0-radius, 3px ink borders, Anton/Archivo/Space Mono, blaze accents). ========================================================================== */ /* ---- palette (mirrors static/css/app.css) ------------------------------- */ /* --link = link-text accent: a darkened blaze in light theme (raw blaze is only ~2.6:1 on the pale bg); raw blaze is fine on the dark bg. */ html[data-theme="light"], :root { --bg:#E6E2D6; --surface:#EFEBE0; --ink:#16140F; --ink-dim:#5C5749; --line:#16140F; --hair:#C9C4B5; --blaze:#FF4D1C; --on-blaze:#0B0B0A; --link:#A5340F; --up:#1E7A46; --up-bg:#C3E5CF; --down:#B5231A; --down-bg:#F2C4BF; --degraded:#8A5D00; --degraded-bg:#F0DCA8; --unknown:#6B665B; --unknown-bg:#D6D1C4; color-scheme: light; } @media (prefers-color-scheme: dark) { :root { --bg:#0B0B0A; --surface:#141312; --ink:#ECE8DD; --ink-dim:#8A857A; --line:#ECE8DD; --hair:#2C2C28; --blaze:#FF4D1C; --on-blaze:#0B0B0A; --link:#FF4D1C; --up:#6FBE8F; --up-bg:#15301F; --down:#E0584A; --down-bg:#3A1612; --degraded:#E0B050; --degraded-bg:#332600; --unknown:#8A857A; --unknown-bg:#23211E; color-scheme: dark; } } html[data-theme="dark"] { --bg:#0B0B0A; --surface:#141312; --ink:#ECE8DD; --ink-dim:#8A857A; --line:#ECE8DD; --hair:#2C2C28; --blaze:#FF4D1C; --on-blaze:#0B0B0A; --link:#FF4D1C; --up:#6FBE8F; --up-bg:#15301F; --down:#E0584A; --down-bg:#3A1612; --degraded:#E0B050; --degraded-bg:#332600; --unknown:#8A857A; --unknown-bg:#23211E; color-scheme: dark; } /* ---- remap Django admin variables onto the tokens ----------------------- */ /* html:root (0,1,1) + loaded-last beats every base.css/dark_mode.css var rule in any theme, while the values track the themed tokens above. */ html:root { --primary: var(--ink); --secondary: var(--ink); --accent: var(--blaze); --primary-fg: var(--bg); --danger: #B5231A; /* fixed accessible red for solid destructive buttons (white text = 6.5:1) */ --body-fg: var(--ink); --body-bg: var(--bg); --body-quiet-color: var(--ink-dim); --body-medium-color: var(--ink-dim); --body-loud-color: var(--ink); --header-color: var(--ink); --header-branding-color: var(--blaze); --header-bg: var(--bg); --header-link-color: var(--ink); --breadcrumbs-fg: var(--ink-dim); --breadcrumbs-link-fg: var(--ink); --breadcrumbs-bg: var(--surface); --link-fg: var(--link); --link-hover-color: var(--ink); --link-selected-fg: var(--link); --hairline-color: var(--hair); --border-color: var(--line); --error-fg: var(--down); --message-success-bg: var(--up-bg); --message-warning-bg: var(--degraded-bg); --message-error-bg: var(--down-bg); --message-info-bg: var(--surface); --darkened-bg: var(--surface); --selected-bg: var(--surface); --selected-row: var(--degraded-bg); --button-fg: var(--on-blaze); --button-bg: var(--blaze); --button-hover-bg: var(--on-blaze); --default-button-bg: var(--blaze); --default-button-hover-bg: var(--on-blaze); --close-button-bg: var(--ink-dim); --close-button-hover-bg: var(--ink); --delete-button-bg: var(--danger); --delete-button-hover-bg: var(--danger); --object-tools-fg: var(--on-blaze); --object-tools-bg: var(--blaze); --object-tools-hover-bg: var(--on-blaze); --font-family-primary: 'Archivo', system-ui, -apple-system, sans-serif; --font-family-monospace: 'Space Mono', ui-monospace, monospace; } /* kill all rounding inside the admin shell (Django ships 4px). The date/time picker popups are appended to , OUTSIDE #container, so list them too. */ #container, #container *, body.login, body.login *, .calendarbox, .calendarbox *, .clockbox, .clockbox * { border-radius: 0 !important; } body { font-family: 'Archivo', system-ui, sans-serif; } /* ---- links -------------------------------------------------------------- */ a:link, a:visited { color: var(--link); } a:hover, a:focus { color: var(--ink); } /* ---- header / branding -------------------------------------------------- */ #header { background: var(--bg); color: var(--ink); border-bottom: 3px solid var(--line); padding: 16px 28px; box-shadow: none; } #branding #site-name, #branding #site-name a:link, #branding #site-name a:visited { font-family: 'Anton', sans-serif; font-size: 24px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink); font-weight: 400; } #branding #site-name a:hover { color: var(--ink); } .wm-blaze { color: var(--blaze); } #user-tools { font-family: 'Space Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-dim); text-align: right; } #user-tools a:link, #user-tools a:visited { color: var(--ink); border-bottom: 1px solid transparent; } #user-tools a:hover { color: var(--blaze); border-bottom-color: var(--blaze); } #logout-form button { font-family: 'Space Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink); background: transparent; border: none; padding: 0; cursor: pointer; } #logout-form button:hover { color: var(--blaze); } .theme-toggle svg.theme-icon-when-auto, .theme-toggle svg.theme-icon-when-dark, .theme-toggle svg.theme-icon-when-light { fill: var(--ink); color: var(--bg); } /* ---- breadcrumbs -------------------------------------------------------- */ .breadcrumbs { background: var(--surface); color: var(--ink-dim); border-bottom: 3px solid var(--line); font-family: 'Space Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; padding: 10px 28px; } .breadcrumbs a { color: var(--link); } .breadcrumbs a:hover { color: var(--ink); } /* ---- nav sidebar -------------------------------------------------------- */ #nav-sidebar { border-right: 3px solid var(--line); background: var(--bg); } #nav-sidebar .module caption, .toggle-nav-sidebar { background: var(--surface); color: var(--ink); } #nav-sidebar a:link, #nav-sidebar a:visited { color: var(--ink); } #nav-sidebar li.selected a, #nav-sidebar a:hover { color: var(--link); } #toggle-nav-sidebar { border-right: 3px solid var(--line); color: var(--ink); } /* ---- headings + modules ------------------------------------------------- */ #content h1, .colMS #content h1 { font-family: 'Anton', sans-serif; font-size: 30px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink); } h2, h3 { color: var(--ink); } .module { background: var(--bg); border: 3px solid var(--line); margin-bottom: 22px; } .module h2, .module caption, .inline-group h2, .module table caption a.section:link, .module table caption a.section:visited { background: var(--surface); color: var(--ink); font-family: 'Space Mono', monospace; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; border-bottom: 3px solid var(--line); padding: 11px 14px; } .module h2 a.section:link, .module h2 a.section:visited { color: var(--ink); } .dashboard .module table th { width: auto; } .dashboard .module table td a { font-weight: 600; } /* ---- buttons ------------------------------------------------------------ */ .button, input[type=submit], input[type=button], .submit-row input, a.button, .object-tools a:link, .object-tools a:visited { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; background: var(--blaze); color: var(--on-blaze); border: 3px solid var(--blaze); padding: 11px 18px; cursor: pointer; text-shadow: none; } .button:hover, input[type=submit]:hover, input[type=button]:hover, .submit-row input:hover, a.button:hover, .object-tools a:hover, .object-tools a:focus { background: var(--on-blaze); color: var(--blaze); border-color: var(--on-blaze); } /* secondary (non-primary) buttons read as ghost */ .button.default, input[type=submit].default, .submit-row input[name="_save"] { background: var(--blaze); color: var(--on-blaze); border-color: var(--blaze); } .submit-row input:not(.default), .button:not(.default):not(a.button) { background: transparent; color: var(--ink); border: 2px solid var(--line); } .submit-row input:not(.default):hover, .button:not(.default):not(a.button):hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } .object-tools { margin-top: 0; } /* re-assert chunky padding above responsive.css (which sets 7px at <=1024px) */ #container .button, #container input[type=submit], #container input[type=button], #container .submit-row input, #container a.button, #container .object-tools a { padding: 11px 18px; } /* destructive: solid red + white text, contrast-safe in BOTH themes */ .submit-row a.deletelink, a.deletelink:link, a.deletelink:visited { background: transparent; color: var(--down); border: 2px solid var(--down); font-family: 'Space Mono', monospace; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; padding: 10px 16px; } .submit-row a.deletelink:hover, a.deletelink:hover, a.deletelink:focus { background: var(--danger); color: #fff; border-color: var(--danger); } .delete-confirmation form input[type=submit], .delete-confirmation form input[type=submit]:hover, .delete-confirmation form input[type=submit]:focus { background: var(--danger); color: #fff; border: 3px solid var(--danger); } .delete-confirmation form .cancel-link { background: transparent; color: var(--ink); border: 2px solid var(--line); font-family: 'Space Mono', monospace; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } .delete-confirmation form .cancel-link:hover { background: var(--ink); color: var(--bg); } /* popup Close button in line with the rest */ .submit-row a.closelink { background: transparent; color: var(--ink); border: 2px solid var(--line); font-family: 'Space Mono', monospace; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 10px 16px; } .submit-row a.closelink:hover { background: var(--ink); color: var(--bg); } /* ---- tables / changelist ------------------------------------------------ */ #changelist, .results, #result_list { border-color: var(--line); } table { border-collapse: collapse; } thead th, thead td { background: var(--surface); color: var(--ink-dim); font-family: 'Space Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; border-bottom: 3px solid var(--line); font-weight: 700; } thead th a:link, thead th a:visited { color: var(--ink-dim); } #result_list { border: 3px solid var(--line); } #result_list tbody td, #result_list tbody th { border-bottom: 1px solid var(--hair); border-left: none; border-right: none; } tbody tr:nth-child(odd) { background: var(--bg); } tbody tr:nth-child(even) { background: var(--surface); } #result_list tbody tr:hover td, #result_list tbody tr:hover th { background: var(--degraded-bg); } /* selected (bulk-action) rows get a blaze rail so they read distinct from hover */ #changelist tbody tr.selected td, #changelist tbody tr:has(.action-select:checked) td { box-shadow: inset 3px 0 0 var(--blaze); } #changelist-filter { background: var(--surface); border-left: 3px solid var(--line); } #changelist-filter h2 { background: var(--ink); color: var(--bg); font-family: 'Space Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; } #changelist-filter h3 { font-family: 'Space Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-dim); } #changelist-filter li.selected a { color: var(--link); } .paginator { border-top: 3px solid var(--line); font-family: 'Space Mono', monospace; font-size: 12px; } .paginator a:link, .paginator a:visited { background: var(--surface); color: var(--ink); border: 2px solid var(--line); padding: 2px 6px; } /* match Django's own (0,3,1) selector shape so the hover wins by source order */ .paginator a:not([aria-current="page"], .showall):hover, .paginator a:not([aria-current="page"], .showall):focus { background: var(--blaze); color: var(--on-blaze); border-color: var(--blaze); } /* Django 6 marks the current page with aria-current, NOT .this-page */ .paginator a[aria-current="page"], .paginator .this-page { background: var(--blaze); color: var(--on-blaze); border: 2px solid var(--blaze); padding: 2px 6px; font-weight: 700; } #toolbar, #changelist #toolbar { border: 3px solid var(--line); background: var(--surface); } #toolbar form input[type=text], #searchbar { border: 2px solid var(--line); background: var(--bg); color: var(--ink); } #toolbar #searchbar:focus { outline: none; border-color: var(--blaze); } .actions { background: var(--surface); border: 3px solid var(--line); color: var(--ink); font-family: 'Space Mono', monospace; font-size: 12px; } .actions select { border: 2px solid var(--line); } /* ---- forms -------------------------------------------------------------- */ fieldset.module { border: 3px solid var(--line); } .form-row { border-bottom: 1px solid var(--hair); } .aligned label, form .form-row label, label, #container label { font-family: 'Space Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--ink-dim); } input[type=text], input[type=password], input[type=email], input[type=url], input[type=number], input[type=tel], input[type=date], input[type=time], textarea, select, .vTextField { font-family: 'Archivo', sans-serif; font-size: 14px; background: var(--bg); color: var(--ink); border: 2px solid var(--line); padding: 8px 10px; } input:focus, textarea:focus, select:focus, .vTextField:focus { outline: none; border-color: var(--blaze); box-shadow: none; } .help, .helptext, p.help, div.help { color: var(--ink-dim); font-size: 11px; } .errorlist, ul.errorlist li { color: var(--down); font-family: 'Space Mono', monospace; font-size: 11px; background: transparent; } .errornote { background: var(--down-bg); color: var(--ink); border: 2px solid var(--down); font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700; padding: 12px 14px; } .form-row.errors { border-left: 3px solid var(--down); } /* stacked / tabular inline headers + add-row match the module chrome */ .inline-related h3, .inline-related h4 { background: var(--surface); color: var(--ink); border-color: var(--line); font-family: 'Space Mono', monospace; text-transform: uppercase; letter-spacing: 1px; } .inline-group .tabular tr.add-row td, .inline-group div.add-row { background: var(--surface); border-top: 3px solid var(--line); } /* ---- messages (null the Django SVG icons for a flat brutalist look) ------ */ ul.messagelist li { border: 2px solid var(--line); background-image: none !important; font-family: 'Space Mono', monospace; font-size: 13px; color: var(--ink); padding: 12px 14px; } ul.messagelist li.success { border-color: var(--up); background: var(--up-bg); } ul.messagelist li.warning { border-color: var(--degraded); background: var(--degraded-bg); } ul.messagelist li.error { border-color: var(--down); background: var(--down-bg); } /* ---- widgets: date/time, selector, autocomplete ------------------------- */ .calendarbox, .clockbox { border: 3px solid var(--line); background: var(--surface); } .calendar caption, .calendarbox h2, .clockbox h2 { background: var(--ink); color: var(--bg); font-family: 'Space Mono', monospace; text-transform: uppercase; } .calendar table { background: var(--surface); } /* was hard-coded white -> unreadable in dark */ .calendar th { background: var(--surface); color: var(--ink-dim); border-color: var(--line); } .calendar td { border-color: var(--hair); } .calendar td.nonday { background: var(--bg); } .calendar td a, .timelist a { color: var(--ink); } .calendar td.selected a { background: var(--blaze); color: var(--on-blaze); } .calendar td a:hover, .calendar td a:active, .timelist a:hover { background: var(--blaze); color: var(--on-blaze); } .calendarnav, .calendarnav a:link, .calendarnav a:visited { color: var(--ink-dim); } .datetimeshortcuts a:link, .datetimeshortcuts a:visited { color: var(--link); } .selector-available, .selector-chosen { border: 2px solid var(--line); } .selector h2, .selector-available-title, .selector-chosen-title { background: var(--surface); color: var(--ink); font-family: 'Space Mono', monospace; text-transform: uppercase; border-bottom: 2px solid var(--line); } .selector-chosen .list-footer-display { background: var(--surface); color: var(--ink); } .selector .selector-filter input { border: 2px solid var(--line); } .stacked ul.selector-chooser { background-color: var(--surface); } .select2-container--admin-autocomplete .select2-selection, .select2-dropdown { border: 2px solid var(--line) !important; } .select2-container--admin-autocomplete .select2-results__option--highlighted { background: var(--blaze) !important; color: var(--on-blaze) !important; } .related-widget-wrapper-link { filter: none; } /* Add/Change/View icons are fixed dark SVGs — invert them on the dark bg. (hue-rotate keeps the coloured +/x roughly on-hue while lightening the dark pencil/eye.) Covers both the changelist -background icons and the change- form related-widget icons. */ html[data-theme="dark"] .addlink, html[data-theme="dark"] .changelink, html[data-theme="dark"] .viewlink, html[data-theme="dark"] .inlinechangelink, html[data-theme="dark"] .inlineviewlink, html[data-theme="dark"] .related-widget-wrapper-link img { filter: invert(1) hue-rotate(180deg); } @media (prefers-color-scheme: dark) { html[data-theme="auto"] .addlink, html[data-theme="auto"] .changelink, html[data-theme="auto"] .viewlink, html[data-theme="auto"] .inlinechangelink, html[data-theme="auto"] .inlineviewlink, html[data-theme="auto"] .related-widget-wrapper-link img { filter: invert(1) hue-rotate(180deg); } } /* ---- footer ------------------------------------------------------------- */ #footer { color: var(--ink-dim); font-family: 'Space Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; } /* ======================================================================== LOGIN — Django's login.css is intentionally NOT loaded (see admin/login.html); this section provides the full brutalist login layout. ======================================================================== */ body.login { background: var(--bg); display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; } body.login #container { width: 100%; max-width: 430px; min-width: 0; height: auto; /* override Django base.css #container height:100% */ min-height: 0; border: 3px solid var(--line); background: var(--bg); display: block; margin: 0; box-shadow: 10px 10px 0 var(--line); } body.login #header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 3px solid var(--line); } body.login .main { padding: 0; display: block; } body.login #content { padding: 26px 22px 28px; } body.login #content-main { width: 100%; } body.login #content h1 { display: none; } body.login .errornote { margin: 0 0 18px; } #login-form { margin: 0; padding: 0; } #login-form .form-row { display: flex; flex-direction: column; gap: 6px; padding: 0 0 16px; border: none; float: none; width: 100%; } #login-form .form-row label { font-family: 'Space Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-dim); width: auto; } #login-form input[type=text], #login-form input[type=password] { width: 100%; box-sizing: border-box; font-family: 'Archivo', sans-serif; font-size: 15px; background: var(--surface); color: var(--ink); border: 2px solid var(--line); padding: 12px 12px; } #login-form input:focus { outline: none; border-color: var(--blaze); } #login-form .submit-row { padding: 8px 0 0; margin: 0; border: none; background: transparent; text-align: left; } #login-form .submit-row input { width: 100%; margin: 0; padding: 13px 18px; background: var(--blaze); color: var(--on-blaze); border: 3px solid var(--blaze); font-family: 'Space Mono', monospace; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; } #login-form .submit-row input:hover { background: var(--on-blaze); color: var(--blaze); border-color: var(--on-blaze); } .password-reset-link { text-align: center; margin-top: 14px; font-family: 'Space Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; } .password-reset-link a { color: var(--link); }