/* ===========================================================================
Theme.
Two deliberately different jobs:
LIGHT is Django admin's own palette, with one exception: the top bar,
which is a navy-to-teal sweep ending on django's own header colour, so
the breadcrumb strip under it still matches. Everything from the
breadcrumb down - page, sidebar, cards, buttons, tables - is left on
django's own shades, so nothing further down the page has to be
re-matched to a new palette. The rest of what this file does in light
mode is shape: cards, pill buttons, rounded inputs, spacing, the
changelist/filter split. Clean and plain, which is what a clinical tool
should be in daylight.
DARK is a proper dark theme rather than Django's grey-on-charcoal,
modelled on csfloat.com: a near-black page (#15171c), a slightly
lifted bar (#1a1c23), cards a shade above that (#1b1d24), hairline
borders, muted blue-grey text, and one bright blue accent (#237bff)
used sparingly.
Only a handful of --md-* tokens are shared by both; every component rule
below reads those or Django's own variables, so neither theme has a
colour hardcoded into a component.
Loaded from admin/base_site.html so it reaches every page including the
login screen, and after django's base.css/dark_mode.css so it wins.
=========================================================================== */
:root {
--md-radius: 10px;
--md-radius-lg: 14px;
--md-pill: 999px;
/* How wide the navigation down the left is. Django ships a flat 275px,
which is a sensible number on a big monitor and a quarter of the page
on a laptop: a 1366x768 screen at the 125% scaling windows recommends
reports 1093px, so the navigation was taking 25% of it and the work
was being done in the rest.
clamp, not a breakpoint: this is a question about how much room there
is, and the answer should move with the room rather than jumping at
one width. 19vw lands at 210px on that laptop and 243px at 1280,
reaching django's own 275px at about 1450px and stopping there - so
nothing changes on a large screen. The floor is what "Dati studio
dentistico" and an "Aggiungi" link still fit in without the label
turning into one word per line.
Everything that has to agree with this number reads it from here:
the panel itself, the offset it slides in and out by, and the width
the content beside it is allowed. Django hardcodes 275, 276 and 299
in three different rules, and changing one without the others is how
the sidebar ends up half on the page. See the sidebar section below. */
--bm-sidebar-width: clamp(210px, 19vw, 275px);
/* The three theme-switch icons, as mask shapes. Kept here rather than
inline in the rules that use them because a data URI is unreadable
in the middle of a declaration block, and because all three have to
be drawn on the same 24px grid to sit at the same weight beside each
other. Colour is never set in them: they are masks, so the shape is
all that is used and the colour comes from the element. See "The
theme switch's three icons" below. */
--icon-theme-auto: url("data:image/svg+xml,");
--icon-theme-light: url("data:image/svg+xml,");
--icon-theme-dark: url("data:image/svg+xml,");
}
/* --- Light: Django's own colours, plus the few tokens components need --- */
:root,
html[data-theme="light"] {
/* Light mode takes django's own breadcrumb and page colours as they
ship. The top bar is the one exception (below); everything else here
is the --md-* tokens components of ours need and django has no
equivalent for. */
--md-surface: #ffffff;
--md-surface-sunken: #f8f8f8;
/* --- The top bar -----------------------------------------------------
A sweep from a deep navy at the left to django's own header teal,
rather than one flat band of it. The bar is the full width of the
screen and the only large field of colour on the page, and flat at
that size reads as unfinished; a sweep gives the name at the left
something to sit on and settles into the ordinary colour by the time
it reaches the account links at the right.
Same hue throughout (about 205 degrees) - only lightness moves - so
it reads as one colour lit from the side rather than as two colours
meeting. The end of the sweep is django's own --header-bg, untouched,
which is why the right-hand side and the breadcrumb below it still
agree with each other.
It is an IMAGE over --header-bg rather than a replacement for it, so
anything that cannot paint it still gets the flat colour, and dark
mode turns it off by setting this to none. */
--header-image: linear-gradient(to right, #12344f 0%, #2a5871 38%, #417690 72%);
/* The breadcrumb strip repeats the sweep, every stop darkened by the
same amount django's own --breadcrumbs-bg (#264b5d) is darker than
its --header-bg (#417690). Without it the bar above went darkest
exactly where the strip below stayed put, so the top-left corner of
the page got darker going up and lighter going down and the two bars
stopped looking like one piece of chrome. Right-hand end unchanged,
which is why everything below still matches. */
--breadcrumbs-image: linear-gradient(to right, #0b2133 0%, #193849 38%, #264b5d 72%);
/* White, not django's gold. On the navy end of the sweep the gold read
as a warning colour, and the practice's own name is not a warning.
White is also what dark mode already uses, so the name looks the same
in both. */
--header-color: #ffffff;
--header-branding-color: #ffffff;
/* Django's own link blue, reused wherever a component needs an accent. */
--md-accent: #417893;
--md-accent-strong: #205067;
--md-accent-soft: rgba(65, 120, 147, 0.12);
--md-focus-ring: rgba(65, 120, 147, 0.28);
/* The "Aggiungi ..." button at the top right of every list. Django's
light theme paints it #747474 - a grey button for the one action on
the page that creates something, sitting next to a Salva in the
practice's own colour. Dark mode already had this pair; light mode
was still on the default. */
--object-tools-fg: #ffffff;
--object-tools-bg: #417893;
--object-tools-hover-bg: #205067;
/* Pale tints and solid shades of the same hue that a few components
need and django has no variable for. Named here rather than written
into the components so that a business type with a palette of its
own (Vertical.theme_stylesheet - solar's is solar/theme.css) can
restate them alongside django's variables; every value is the one
that component was written with, so this changes nothing on its own.
Light mode only: the components' dark-mode rules set their own. */
--bm-tint-bg: #E4EDF3; /* a collapsed section's heading bar */
--bm-tint-border: #C7DCE6;
--bm-tint-fg: #1F4A60;
--bm-tint-hover: #DCEAF4; /* the sidebar's show/hide strip, hovered */
--bm-toggle-bg: #EEF4F9; /* ... and at rest: a shade off the page */
--bm-today-bg: #F6F9FC; /* the Dashboard's "Oggi" panel */
--bm-recent-bg: #FFFDF7; /* the Dashboard's recent clients */
--bm-today-column: rgba(65, 120, 147, 0.055); /* today in the calendar */
--bm-pick-bg: #2b6cb0; /* the highlighted comune suggestion */
--bm-history-bg: #2C5282; /* Storia, at the foot of a form */
--bm-history-hover-bg: #1F3F63;
--bm-chart-incasso: #3b82c4; /* "Incassato" in the Dati studio chart */
/* Since 2.6.0, so a business type can restate them (solar does). Each is
what the component looked like before, written as a token. */
--bm-sidebar-link-fg: var(--link-fg); /* the model names in the menu */
--bm-panel-head-bg: var(--secondary); /* a client-page panel's title bar */
--bm-panel-head-fg: var(--header-link-color, #ffffff);
--bm-panel-head-border: transparent; /* drawn inside the bar, no size */
--bm-panel-bg: var(--darkened-bg); /* ... and the panel under it */
--bm-followups-bg: #ffffff; /* the CRM's "Da fare oggi" panel */
--bm-pipeline-bg: #ffffff; /* the CRM's Pipeline panel */
--bm-stat-bg: #f8f8f8; /* the four figures inside it */
--bm-addlink-fg: var(--link-fg); /* "Aggiungi" in the menu and home */
--bm-foot-link-fg: var(--link-fg); /* "Apri l'agenda" etc. on the Dashboard */
--bm-dash-btn-fg: #2F855A; /* "Appuntamento" on the Dashboard */
--bm-dash-btn-border: #2F855A;
--bm-dash-btn-hover-bg: #2F855A;
--bm-dash-btn-hover-fg: #ffffff;
/* "+ Nuovo" in a Dashboard panel's heading: a plain link unless a
business type makes it a pill ("initial": the link's own colours). */
--bm-head-add-fg: initial;
--bm-head-add-bg: initial;
--bm-head-add-border: initial;
--bm-head-add-hover-bg: initial;
--bm-head-add-hover-fg: initial;
--bm-head-add-hover-line: initial;
/* How far the pill reaches past the heading's end. Unset: by its own
padding, so a plain link's words stay exactly where they were; a
business type that draws the pill sets 0px, so the pill itself
stops where the panel's content does instead of at its border. */
--bm-head-add-pull: initial;
/* The filled action pills - "Aggiungi ... +" at the top right of a
list, and the same pill elsewhere (Nuova trattativa on the board,
Nuovo appuntamento on the agenda, Modifica dati and the round + on a
client). They are not all the same colour in the core - django gives
them three different variables - so here each token is "initial",
which makes var(--bm-action-bg, ) fall back to the
colour that pill always had. A business type that restates them
(solar: grey outlined pills that fill amber under the pointer) moves
them all together. */
--bm-action-bg: initial;
--bm-action-fg: initial;
--bm-action-border: initial;
--bm-action-hover-bg: initial;
--bm-action-hover-fg: initial;
--bm-action-hover-border: initial; /* default: the hover fill's colour */
--bm-action-active-bg: initial; /* pressed - default: as hovered */
--bm-action-active-fg: initial;
/* The agenda's arrows and "Oggi": the action pills' colours unless a
business type gives them their own (solar: green). */
--bm-nav-bg: initial;
--bm-nav-fg: initial;
--bm-nav-hover-bg: initial;
--bm-nav-active-bg: initial;
/* The menu: the page being viewed (default: django's --selected-row)
and a wash while an entry or the show/hide strip is pressed (default:
none). */
--bm-sidebar-current-bg: initial;
--bm-sidebar-press: initial;
--md-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
--md-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.16);
}
/* --- Light, on a phone --------------------------------------------------
No sweep - one flat colour, and it is the navy the desktop sweep
starts from rather than the teal it ends on.
A gradient needs room to be a gradient. Across a desktop bar it is a
slow change nobody has to notice; squeezed into 390px it becomes a
visible diagonal behind the menu button and the name, and the bar
stops reading as one colour. So the phone takes a single colour, and
the one worth taking is the deep end: it is the half of the sweep that
reads as the app's own, the teal is django's default showing through,
and a phone bar sitting on the same navy as the left of the desktop
one makes the two obviously the same product.
The name is white here too, for the same reason it is white on the
desktop: against navy the old gold read as a warning colour. White on
this navy is 12.4:1, which is comfortable at any size - the yellow it
replaces was 4.0:1 against the teal.
Only the flat colours change; --header-image stays off. The breadcrumb
strip is not drawn on a phone at all (mobile-nav.css replaces the
trail with the drawer), but its colour is set alongside so the pair
cannot drift if it is ever brought back.
767px, not 600: that is where mobile-nav.css replaces the whole header
with the phone one - menu button, name, theme switch - so the two
always change together.
Placed between the light and dark blocks on purpose. After light, so it
wins on a phone; before dark, so dark still wins over it at every
width. Moving it below them turns a dark phone's bar navy. */
@media (max-width: 767px) {
:root,
html[data-theme="light"] {
--header-image: none;
--breadcrumbs-image: none;
/* The first stop of --header-image and of --breadcrumbs-image. */
--header-bg: #12344f;
--breadcrumbs-bg: #0b2133;
--header-branding-color: #ffffff;
}
}
/* --- Dark ---------------------------------------------------------------
Repeated verbatim under the media query and under [data-theme="dark"],
mirroring how django ships dark_mode.css, so the in-app toggle and the
OS setting both land here. */
@media (prefers-color-scheme: dark) {
:root {
--primary: #237bff;
/* Lifted off the page colour so the sidebar's section bar reads. */
--secondary: #23252e;
/* Stays light: django paints #333 text on --accent in the date picker. */
--accent: #f5dd5d;
--primary-fg: #ffffff;
--body-fg: #e4e7ec;
--body-bg: #15171c;
--body-quiet-color: #9ea7b1;
--body-medium-color: #c3c9d1;
--body-loud-color: #ffffff;
--header-color: #ffffff;
--header-branding-color: #ffffff;
--header-bg: #1a1c23;
--header-link-color: #ffffff;
/* No sweep in dark mode: the bar is already a lift off a near-black
page, and a gradient across it would read as a smudge. */
--header-image: none;
--breadcrumbs-image: none;
--breadcrumbs-fg: #9ea7b1;
--breadcrumbs-link-fg: #6ba5ff;
--breadcrumbs-bg: #101216;
--link-fg: #4f93ff;
--link-hover-color: #85b6ff;
--link-selected-fg: #85b6ff;
--hairline-color: #23252e;
--border-color: #2c2f39;
/* The outline round a fieldset on a change form. --hairline-color is
the page colour here, so the rules that frame each section in light
mode disappeared completely in dark.
A plain grey, not green. Green is what the app's controls are -
Oggi, Storia, the add links - and a green rule round a section
title said the title bar was one of them. Grey says "this is where
the section starts" and nothing else.
Mid-grey rather than near-white: the line only has to be findable,
and a white one drew more attention than the title it was framing.
It still clears --hairline-color (#23252e), which is the page
colour here and is why these lines vanished in dark mode at all. */
--fieldset-rule: #6b7280;
--error-fg: #ff7a8a;
--message-success-bg: #12291f;
--message-warning-bg: #2b2415;
--message-error-bg: #2e1720;
--darkened-bg: #1b1d24;
--selected-bg: #23252e;
--selected-row: #1d212b;
--button-fg: #ffffff;
--button-bg: #2b2f3a;
--button-hover-bg: #363b48;
--default-button-bg: #237bff;
--default-button-hover-bg: #3d8cff;
--close-button-bg: #2b2f3a;
--close-button-hover-bg: #363b48;
--delete-button-bg: #c0392f;
--delete-button-hover-bg: #d9483c;
--object-tools-fg: #ffffff;
--object-tools-bg: #237bff;
--object-tools-hover-bg: #3d8cff;
--md-surface: #1b1d24;
--md-surface-sunken: #16181e;
--md-accent: #237bff;
--md-accent-strong: #3d8cff;
--md-accent-soft: rgba(35, 123, 255, 0.16);
--md-focus-ring: rgba(35, 123, 255, 0.4);
--md-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--md-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
}
}
html[data-theme="dark"] {
--primary: #237bff;
/* Lifted off the page colour so the sidebar's section bar reads. */
--secondary: #23252e;
/* Stays light: django paints #333 text on --accent in the date picker. */
--accent: #f5dd5d;
--primary-fg: #ffffff;
--body-fg: #e4e7ec;
--body-bg: #15171c;
--body-quiet-color: #9ea7b1;
--body-medium-color: #c3c9d1;
--body-loud-color: #ffffff;
--header-color: #ffffff;
--header-branding-color: #ffffff;
--header-bg: #1a1c23;
--header-link-color: #ffffff;
--header-image: none;
--breadcrumbs-image: none;
--breadcrumbs-fg: #9ea7b1;
--breadcrumbs-link-fg: #6ba5ff;
--breadcrumbs-bg: #101216;
--link-fg: #4f93ff;
--link-hover-color: #85b6ff;
--link-selected-fg: #85b6ff;
--hairline-color: #23252e;
--border-color: #2c2f39;
/* See the note on the same token under the media query above. */
--fieldset-rule: #6b7280;
--error-fg: #ff7a8a;
--message-success-bg: #12291f;
--message-warning-bg: #2b2415;
--message-error-bg: #2e1720;
--darkened-bg: #1b1d24;
--selected-bg: #23252e;
--selected-row: #1d212b;
--button-fg: #ffffff;
--button-bg: #2b2f3a;
--button-hover-bg: #363b48;
--default-button-bg: #237bff;
--default-button-hover-bg: #3d8cff;
--close-button-bg: #2b2f3a;
--close-button-hover-bg: #363b48;
--delete-button-bg: #c0392f;
--delete-button-hover-bg: #d9483c;
--object-tools-fg: #ffffff;
--object-tools-bg: #237bff;
--object-tools-hover-bg: #3d8cff;
--md-surface: #1b1d24;
--md-surface-sunken: #16181e;
--md-accent: #237bff;
--md-accent-strong: #3d8cff;
--md-accent-soft: rgba(35, 123, 255, 0.16);
--md-focus-ring: rgba(35, 123, 255, 0.4);
--md-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--md-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
}
/* ===========================================================================
Components - shape and spacing only; every colour comes from a variable
=========================================================================== */
/* --- Header ------------------------------------------------------------- */
#header {
padding: 14px 40px;
border-bottom: none;
/* The sweep, in light mode; "none" in dark, which leaves django's own
--header-bg showing through underneath. Set as the image rather than
the whole background so the flat colour stays as the floor. */
background-image: var(--header-image, none);
}
#site-name a:link,
#site-name a:visited {
color: var(--header-branding-color);
}
#user-tools {
font-size: 0.72rem;
letter-spacing: 0.02em;
}
/* --- Breadcrumbs -------------------------------------------------------- */
div.breadcrumbs {
font-size: 0.78rem;
padding: 10px 40px;
/* The darkened half of the header's sweep; "none" in dark mode. See the
token in the light block at the top of this file. */
background-image: var(--breadcrumbs-image, none);
}
/* --- Collapsible sections ("Numerazione manuale") ------------------------
The bar you click to open a section that is folded away by default.
Django paints it in --header-bg, the same solid teal as the top bar:
a full-width band of the app's strongest colour, given to the one
section on the page that nobody opens. It read as the most important
thing on a fattura and it is the least. A pale tint of the same hue
instead, with the words in the deep end of it - still obviously a bar
you can press, no longer the loudest thing in the room.
The colour is written out rather than taken from --header-bg, which
is what it used to read: that token is the top bar's, it is a
different colour on a phone, and a section heading has no business
changing colour with the screen size.
Body class in the selector so this outranks django's own, which is
in forms.css and loads in a block that can land either side of this
file depending on the page. Dark mode keeps django's: --header-bg
there is a near-black lift off a near-black page, which is already
the quiet version of this. */
.change-form :not(.inline-related) .collapse summary {
background: var(--bm-tint-bg);
border-color: var(--bm-tint-border);
color: var(--bm-tint-fg);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .change-form :not(.inline-related) .collapse summary {
background: var(--header-bg);
border-color: var(--header-bg);
color: var(--header-link-color);
}
}
html[data-theme="dark"] .change-form :not(.inline-related) .collapse summary {
background: var(--header-bg);
border-color: var(--header-bg);
color: var(--header-link-color);
}
/* --- Cards / modules ---------------------------------------------------- */
.module,
.dashboard-col,
.inline-related fieldset.module {
background: var(--md-surface);
border: 1px solid var(--hairline-color);
border-radius: var(--md-radius);
box-shadow: var(--md-shadow-sm);
}
.module,
.inline-related fieldset.module {
overflow: hidden;
}
/* ...except sideways, for a table of lines. overflow:hidden is there to
keep the contents inside the rounded corners, but on a table wider than
its card it simply cut the last columns off: at 1280px a fattura's
Prestazioni lost Denti and Cancella altogether, with nothing to say they
were there. Now the card scrolls sideways instead. On a screen with
room for the whole row nothing scrolls and nothing changes; on a phone
the rows are cards (inline-sheet.css) and the table is parked out of
sight, so there is nothing here to scroll. */
.inline-group .tabular fieldset.module {
overflow-x: auto;
overflow-y: hidden;
}
/* Three lines round each section title on a change form - over the top of
the heading bar and down its two ends - and nothing else. Nine lines on
a fattura: Prestazioni, Pagamenti, Note e marca da bollo.
Dark mode only. In light mode --hairline-color already draws these and
they read well, so there is deliberately no rule here that light mode
can reach: the selectors below are all under a dark-mode root, and the
previous attempt - one shared rule with a var() fallback - is gone. In
dark mode --hairline-color is the page colour itself, so the same lines
were simply invisible.
The colour is a near-white, not the green these started as: see the
note on --fieldset-rule.
Not the heading's bottom edge and not the rest of the card: outlining
the whole card put green round everything, which is a different thing
from making the titles stand out.
The card's overflow:hidden and border-radius clip the ends of the top
line, which is what keeps it from meeting the corners. */
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .change-form #content-main .module > h2,
html:not([data-theme="light"]) .change-form .inline-related h3 {
border-top: 1px solid var(--fieldset-rule);
border-left: 1px solid var(--fieldset-rule);
border-right: 1px solid var(--fieldset-rule);
}
}
html[data-theme="dark"] .change-form #content-main .module > h2,
html[data-theme="dark"] .change-form .inline-related h3 {
border-top: 1px solid var(--fieldset-rule);
border-left: 1px solid var(--fieldset-rule);
border-right: 1px solid var(--fieldset-rule);
}
/* Only the three tables at the foot of a patient's page scroll. Scoped
deliberately: "overflow-x: auto" alone also turns overflow-y into auto
(the spec won't let one axis be visible while the other is not), which
on the odontogramma panel meant the hover card counted as overflow and
the panel grew a scrollbar of its own. */
.dashboard-grid .dashboard-col {
overflow-x: auto;
}
/* The odontogramma's hover card has to be free to spill out of its panel
and over whatever is next to it. */
.chart-agenda-grid .dashboard-col {
overflow: visible;
}
/* Five columns in a third-width panel: tightening the cells lets the last
one ("Modifica") fit outright at normal window widths, so the scrollbar
above stays a fallback for narrow screens rather than the usual case. */
.dashboard-col table.dash-table th,
.dashboard-col table.dash-table td {
padding: 6px 5px;
font-size: 0.82em;
}
.dashboard-col table.dash-table th:first-child,
.dashboard-col table.dash-table td:first-child {
padding-left: 2px;
}
/* The app-list caption is a link, and django colours caption links white
with a more specific selector than the caption itself - which would
leave white text on the quiet caption bar below. */
#content-main .module caption a,
#content-main .module caption a:link,
#content-main .module caption a:visited,
.module caption a {
color: var(--body-loud-color);
}
.module > h2,
#content-main .module caption,
.inline-related h3 {
background: var(--md-surface-sunken);
color: var(--body-loud-color);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
border-bottom: 1px solid var(--hairline-color);
}
/* --- Right-hand column (Azioni recenti) ---------------------------------
#content-related is only a column wrapper, but django fills it with
--darkened-bg. That was invisible when the module inside it was a flat
panel of the same colour; now the module is a white card, the wrapper's
own fill showed as a stray grey band hanging below it. */
#content-related {
background: none;
}
/* --- Changelist: results card and filter panel --------------------------
Django wraps both the results and the filter sidebar in one element,
#changelist, which also carries .module - so the card styling above put
a single rounded box around the pair. Because the two are flex siblings,
the box grew to whichever was taller: on a short list with a long filter
(or the reverse) it left a large empty stretch of card with nothing in
it, and the filter's own panel inherited a stray rounded corner where it
met the card's edge.
So #changelist is not a card. The results column is, and the filter is
its own square-edged panel beside it - each ending where its own content
ends. */
#changelist.module {
background: none;
border: none;
border-radius: 0;
box-shadow: none;
overflow: visible;
}
#changelist .changelist-form-container {
background: var(--md-surface);
border: 1px solid var(--hairline-color);
border-radius: var(--md-radius);
box-shadow: var(--md-shadow-sm);
overflow: hidden;
min-width: 0;
}
/* Narrower than django's 240px, and closer in: the width it takes comes
straight out of the results table, which on a list with several columns
was enough to push the last one out of sight. */
#changelist #changelist-filter {
flex: 0 0 200px;
margin-left: 18px;
background: var(--md-surface);
border: 1px solid var(--hairline-color);
border-radius: 0;
box-shadow: var(--md-shadow-sm);
overflow: hidden;
align-self: flex-start;
}
#changelist #changelist-filter h2,
#changelist #changelist-filter h3 {
border-radius: 0;
}
/* --- Tables ------------------------------------------------------------- */
#changelist table thead th,
.results thead th {
background: var(--md-surface-sunken);
border-bottom: 1px solid var(--border-color);
}
/* Uppercase with generous tracking is what makes a header read as a
header - but it also makes the header the widest thing in its column,
so the tracking is kept modest and the size small. */
#changelist table thead th a,
.results thead th a {
color: var(--body-quiet-color);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
}
/* Django holds thead th to one line, so a two-word heading like
"Prestazione prevista" props its whole column open - and an uppercased
heading is wider still. Letting it wrap drops the column's minimum to
its longest single word. (Django also sets padding: 0 on thead th and
puts the padding on the link inside; don't override that or every
column gets wider.) */
#changelist table thead th {
white-space: normal;
}
#changelist tbody tr:hover > * {
background: var(--selected-row);
}
/* Sort controls.
Django floats them beside a block heading with 9px of top padding, so a
sorted column's header grew taller than its neighbours and the heading
itself could drop below the float. Sorting a column should not move the
header row at all - so the controls come out of flow entirely, pinned to
the right of the cell and vertically centred. Out of flow means they
cost no height, and the small gutter reserved below is the only width
they take from the column. */
#changelist table thead th {
position: relative;
vertical-align: middle;
}
#changelist table thead th .text {
display: block;
}
#changelist table thead th.sortable .text,
#changelist table thead th.sorted .text {
padding-right: 20px;
}
#changelist table thead th .sortoptions {
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);
float: none;
display: flex;
align-items: center;
gap: 4px;
padding: 0;
margin: 0;
}
/* The column the list is sorted by shows both of its controls all the
time (2.6.1): the arrow saying which way it is sorted, and before it
the barred arrows that take the sort off. Django showed the second
only under the pointer, so nobody knew it was there, and drew it over
the end of the heading's own highlighted box. Here the heading leaves
room for both (6px from the cell's edge, 14px each, 4px between, 6px
before the heading's box ends), and the icons are django's own -
same shapes, same colours. */
#changelist table thead th.sorted .text {
padding-right: 44px;
}
#changelist table thead th.sorted a.sortremove {
visibility: visible;
}
/* The float's clearing div has nothing left to clear, and it added a stray
line box to every header. */
#changelist table thead th .clear {
display: none;
}
/* --- Date hierarchy ("‹ Tutte le date | Luglio 2026 | ...") ------------- */
/* Django gives #toolbar a 15px bottom margin, which made sense when the
search box was its own free-standing block. Inside the results card it
is just a gap between the search row and the date links, on top of this
nav's own padding. */
#changelist #toolbar {
margin-bottom: 0;
}
/* The magnifier before the search box (2.6.0). Django sets it inline on
the text's baseline, which left it a pixel or two low of the box beside
it, and with 10px of toolbar before it and the label's own margin and a
space after it, off-centre in the strip between the card's edge and the
box. One flex line instead: everything on the box's middle, and the
same 6px either side of the glyph, so it sits in the middle of its gap
and the box starts a little further left. Below 1024px responsive.css
already lays this row out the same way (with its own gaps). */
#changelist #toolbar {
padding-left: 10px;
}
#changelist #toolbar #changelist-search > div {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 10px;
}
#changelist #toolbar #changelist-search label[for="searchbar"] {
display: flex;
flex: 0 0 auto;
}
#changelist #toolbar #changelist-search label[for="searchbar"] img {
display: block;
margin: 0;
}
#changelist .toplinks {
padding: 11px 16px;
gap: 6px 18px;
align-items: center;
}
/* The guillemet is part of the link text, so without this it sits flush
against the card edge with a single thin space after it. */
#changelist .toplinks .date-back {
display: inline-flex;
align-items: baseline;
gap: 6px;
font-weight: 600;
}
/* --- Filter panel ------------------------------------------------------- */
/* Django pins the eye icon 1px from the top of a block-level link, so it
floats above the text. Laying the link out as a flex row centres the
text, and centring the background on the same box puts the icon on the
same line. Both classes: the link becomes .hidelink once counts are on. */
#changelist-filter .viewlink,
#changelist-filter .hidelink {
display: inline-flex;
align-items: center;
min-height: 20px;
padding-left: 21px;
background-position: 0 50%;
background-size: 15px 15px;
}
/* --- The drawn "+" ------------------------------------------------------
See templates/admin/clinic/_plus.html for why it is drawn rather than
typed. Here, in brand.css, because every page in the app loads this one
file and add controls are on most of them.
1em square by default and sized down where it sits inside a round
button - the rules for those are with the buttons themselves, in
admin_overrides.css and on the client page. */
.icon-plus {
display: inline-block;
width: 1em;
height: 1em;
/* Never squashed by a flex parent, whatever else is in the button. */
flex: 0 0 auto;
vertical-align: -0.125em;
}
/* --- The theme switch's three icons --------------------------------------
Auto, light and dark, drawn here instead of django's.
Django's are a half-filled disc, a sun whose rays are eight separate
rectangles pinned round a ring, and a moon cut from a square - all
drawn at 24px and all reading as slightly wrong at the 1.5rem they are
shown at: the sun's rays touch its body, the moon's crescent is
thicker on one horn than the other.
Replaced through the mask property rather than by overriding django's
definitions: those live at the foot of base.html, referenced
by id, and the first element with an id wins - so a second copy cannot
take their place without copying the whole template. Masking the