/* The account menu behind the avatar (templates/_user_menu.html), on the dashboard screens
(derp.css) and the admin screens (admin/base_site.html). Each sets the --um-* colours.
Sizes are in px: the two kinds of page have different root sizes, and the header must match. */
/* An icon from the sprite (templates/admin/_icons.svg) among words, both kinds of page: as tall
as the text and in its colour, e.g. . */
svg.i { width: 1.15em; height: 1.15em; vertical-align: -.22em; flex: none; }
:is(button, .button, summary, a, span, p, strong):has(> svg.i) { gap: .4em; } /* when it's a flex box */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; }
.user-menu { position: relative; margin-left: auto; font-size: 14.4px; line-height: 1.3;
text-transform: none; letter-spacing: 0; text-align: left; }
.user-menu > summary { display: flex; align-items: center; gap: .55rem; cursor: pointer;
list-style: none; border-radius: 999px; padding: 2px 2px 2px .7rem;
border: 1px solid var(--um-trigger-border); color: var(--um-trigger-fg);
-webkit-user-select: none; user-select: none; }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover, .user-menu[open] > summary { background: var(--um-trigger-hover); }
.user-menu > summary:focus-visible { outline: 2px solid var(--um-focus); outline-offset: 2px; }
.user-menu-company { font-size: 12.8px; font-weight: 600; white-space: nowrap; max-width: 16em;
overflow: hidden; text-overflow: ellipsis; }
.user-menu .avatar { display: inline-flex; align-items: center; justify-content: center;
flex: none; width: 32px; height: 32px; border-radius: 50%;
background: var(--um-avatar-bg); color: var(--um-avatar-fg);
font-size: 12.8px; font-weight: 600; letter-spacing: 0; }
.user-menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; }
.user-menu-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 1000;
width: calc(264px * var(--text-zoom, 1)); max-width: calc(100vw - 24px); padding: 6px;
background: var(--um-bg); color: var(--um-fg);
border: 1px solid var(--um-border); border-radius: 12px;
box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.user-menu-who { margin: 0; padding: 8px 10px 10px; }
.user-menu-who strong, .user-menu-who span { display: block; overflow: hidden;
text-overflow: ellipsis; }
.user-menu-who span { color: var(--um-muted); font-size: 12.8px; }
.user-menu-group { margin: 0; padding: 6px 0; border-top: 1px solid var(--um-border); }
.user-menu-group form { margin: 0; }
.user-menu-group h3 { margin: 2px 10px 4px; padding: 0; background: none; font-size: 12px;
font-weight: 500; letter-spacing: 0; text-transform: none;
color: var(--um-muted); }
.user-menu .user-menu-item { display: block; box-sizing: border-box; width: 100%; margin: 0;
min-height: 0; padding: 7px 10px; border: 0; border-radius: 8px;
background: none; color: var(--um-fg); font: inherit; font-weight: 400;
text-align: left; text-decoration: none; text-transform: none;
letter-spacing: 0; cursor: pointer; }
.user-menu a.user-menu-item:hover, .user-menu button.user-menu-item:hover,
.user-menu a.user-menu-item:focus-visible, .user-menu button.user-menu-item:focus-visible {
background: var(--um-hover); color: var(--um-fg); text-decoration: none; }
.user-menu .user-menu-item.current { cursor: default; font-weight: 600;
display: flex; justify-content: space-between; gap: 8px; }
.user-menu .user-menu-item.current::after { content: "✓"; color: var(--um-accent); }
/* Only on a phone, which has no Settings icon in its header (_user_menu.html). */
.user-menu .phone-only { display: none; }
@media (max-width: 720px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
.user-menu > summary { padding: 2px; border-color: transparent; }
.user-menu-company { display: none; } /* named inside the menu */
.user-menu .avatar { width: 36px; height: 36px; }
.user-menu .user-menu-item { padding: 11px 10px; }
.user-menu .phone-only { display: block; }
}
@media print { .user-menu { display: none; } }
/* The main menu (templates/_main_nav.html), each an icon and a name. On a desktop they sit beside
the logo (which opens Home's map): Sell, Support, Stock, Buy, Make, Books, Tasks; at the right a
search box, then Messages and Settings as icons beside the account menu. A phone has a Home tab
(the Home page, with Your work and Tools) in place of those menus. */
:is(#header, .topbar) .app-nav { display: contents; }
.derp-nav { flex: 1; align-items: center; }
.derp-nav > a, .topbar nav > a { display: inline-flex; align-items: center; gap: 6px; }
.nav-icon { width: 21px; height: 21px; flex: none; }
.nav-menu, .nav-search { position: relative; }
.nav-menu > summary, .nav-search > summary { display: flex; align-items: center; gap: 6px; cursor: pointer;
list-style: none; font-weight: inherit; }
.nav-menu > summary::-webkit-details-marker, .nav-search > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::after { content: "▾"; margin-left: -2px; font-size: .8em; }
:is(#header, .topbar) .app-nav .nav-home { display: none; } /* a phone's tab (a desktop has the logo) */
.nav-menu > summary, .nav-settings { white-space: nowrap; }
/* A desktop's menus (Sell, Stock…; _header_menu.html): their screens, with Home's figures. */
.nav-menu { --hm-warn-bg: #fdf0d8; --hm-warn-fg: #8a5300;
--hm-alert-bg: #fde6e4; --hm-alert-fg: #a3271d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav-menu {
--hm-warn-bg: #3d2e12; --hm-warn-fg: #f0b44c; --hm-alert-bg: #43201d; --hm-alert-fg: #ff8a80; } }
html[data-theme="dark"] .nav-menu {
--hm-warn-bg: #3d2e12; --hm-warn-fg: #f0b44c; --hm-alert-bg: #43201d; --hm-alert-fg: #ff8a80; }
.nav-menu .nav-menu-panel { left: 0; right: auto; padding: 8px 10px 10px; font-size: 14.4px; line-height: 1.3;
font-weight: 400; }
.nav-menu h3 { margin: 6px 8px 6px; padding: 0; background: none; font-size: 12px; font-weight: 500;
letter-spacing: 0; text-transform: none; color: var(--um-muted); }
.nav-section .nav-menu-panel { width: calc(340px * var(--text-zoom, 1)); padding: 6px; }
.nav-section ul.hm-lane { margin: 0; padding: 0; list-style: none; }
.hm-lane ul { list-style: none; margin: 0; padding: 0; }
.hm-lane li { margin: 0; padding: 0; list-style: none; }
:is(#header, .topbar) .app-nav a.hm-item { color: var(--um-fg); font-weight: 400; text-decoration: none; }
:is(#header, .topbar) .app-nav a.hm-item:is(:hover, :focus-visible) {
background: var(--um-hover); color: var(--um-fg); text-decoration: none; }
.hm-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; }
.nav-menu .hm-item svg { width: 18px; height: 18px; flex: none; color: var(--um-accent); }
.hm-label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.hm-item small { margin-left: auto; padding-left: 8px; color: var(--um-muted); font-size: 12.5px; font-weight: 600;
text-align: right; }
html[data-theme="dark"] .nav-menu .pill { display: inline-block; margin-left: 2px; padding: 0 7px; border-radius: 999px; font-weight: 600; }
.nav-menu .pill.warn { background: var(--hm-warn-bg); color: var(--hm-warn-fg); }
.nav-menu .pill.alert { background: var(--hm-alert-bg); color: var(--hm-alert-fg); }
/* Search on a desktop: a box after the menus to type into, Enter to search; while
it's in use, a note under it (what comes first, Advanced search). A phone has the Search tab,
which opens a sheet with the same box (.nav-search). */
.nav-search { display: none; }
.header-search { order: 9; position: relative; display: flex; align-items: center; gap: 8px; flex: 0 1 300px;
min-width: 150px; box-sizing: border-box; height: 34px; margin: 0; padding: 0 10px;
border: 1px solid rgba(255, 255, 255, .3); border-radius: 8px; background: rgba(255, 255, 255, .08);
font-size: 14.4px; font-weight: 400; transition: background-color .15s, border-color .15s; }
.header-search:hover { background: rgba(255, 255, 255, .13); }
.header-search:focus-within, .header-search.current { border-color: rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .16); }
.header-search > svg { width: 17px; height: 17px; flex: none; color: rgba(255, 255, 255, .8); }
:is(#header, .topbar) .header-search input[type=search] {
flex: 1; min-width: 0; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; outline: 0; box-shadow: none;
background: none; color: #fff; font: inherit; }
.header-search input[type=search]::placeholder { color: rgba(255, 255, 255, .78); opacity: 1; }
.header-search input[type=search]::-webkit-search-cancel-button { filter: grayscale(1) brightness(3); cursor: pointer; }
.header-search-note { display: none; position: absolute; z-index: 1000; top: calc(100% + 6px); left: 0; right: 0;
margin: 0; padding: 8px 10px; border: 1px solid var(--um-border); border-radius: 10px;
background: var(--um-bg); color: var(--um-muted); font-size: 12.8px; line-height: 1.3;
box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.header-search:is(:focus-within, :hover) .header-search-note { display: block; }
:is(#header, .topbar) .header-search-note a { color: var(--um-accent); font-weight: 400; text-decoration: underline; }
/* Messages and Settings: icons beside the account menu, their names kept for screen readers and
as tooltips; the icon in the middle of its square (not where a menu's link would put it). */
:is(#header, .topbar) .app-nav .header-icon {
position: relative; display: inline-grid; place-items: center; gap: 0; box-sizing: border-box; width: 38px;
height: 38px; padding: 0; border-radius: 9px; cursor: pointer; transition: background-color .15s; }
:is(#header, .topbar) .app-nav .header-icon:is(:hover, :focus-visible) { background: rgba(255, 255, 255, .13);
text-decoration: none; }
:is(#header, .topbar) .app-nav .header-icon.current { background: rgba(255, 255, 255, .18); color: #fff; }
.header-icon .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; }
/* At the right, beside the account menu, close together (--icon-pull takes most of the nav's
gap back). */
.app-nav { --icon-pull: -16px; }
:is(#header, .topbar) .app-nav .chat-link.header-icon { order: 10; margin-left: auto; }
:is(#header, .topbar) .app-nav .nav-settings.header-icon { order: 11; margin-left: var(--icon-pull); }
.header-icon .chat-badge { position: absolute; top: 1px; right: -1px; min-width: 14px; margin: 0; padding: 0 4px;
font-size: 10px; line-height: 15px; }
/* The account menu's text size: a slider of its four sizes. */
.user-menu .text-size-form { padding: 8px 10px 10px; }
.text-size-head { display: flex; justify-content: space-between; margin: 0 0 6px; color: var(--um-muted);
font-size: 12px; font-weight: 500; }
.text-size-head output { color: var(--um-fg); font-weight: 400; }
.text-size-row { display: flex; align-items: center; gap: 10px; }
.text-size-row span { color: var(--um-muted); line-height: 1; }
.text-size-row span:first-child { font-size: 12px; }
.text-size-row span:last-child { font-size: 20px; }
.text-size-row input[type=range] { flex: 1; min-width: 0; margin: 0; accent-color: var(--button-bg, var(--accent)); }
.nav-search .nav-search-panel { right: 0; left: auto; width: calc(440px * var(--text-zoom, 1)); padding: 10px; font-size: 14.4px; line-height: 1.3; }
.nav-search-form { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 4px 4px 10px;
border: 1px solid var(--um-border); border-radius: 10px; background: var(--um-bg); }
.nav-search-form:focus-within { border-color: var(--um-accent); }
.nav-search-form svg { width: 18px; height: 18px; flex: none; color: var(--um-muted); }
.nav-search .nav-search-form input[type=search] { flex: 1; min-width: 0; min-height: 0; margin: 0; padding: 8px 2px;
border: 0; outline: 0; background: none; color: var(--um-fg); font: inherit; font-size: 16px; }
.nav-search .nav-search-form button { flex: none; min-height: 0; margin: 0; padding: 8px 14px; border: 0;
border-radius: 8px; background: var(--button-bg, #2f5d50); color: #fff; font: inherit; font-weight: 600;
cursor: pointer; text-transform: none; letter-spacing: 0; }
.nav-search-note { margin: 8px 4px 0; padding: 0; color: var(--um-muted); font-size: 12.8px; }
:is(#header, .topbar) .app-nav .nav-search-note a { color: var(--um-accent); font-weight: 400; text-decoration: underline; }
/* A narrower window keeps the header on one line: the menus by name alone, and a shorter Search. */
@media (max-width: 1320px) {
.nav-section:not(.header-icon) .nav-icon { display: none; }
.header-search { flex-basis: 220px; }
}
/* Down to a small laptop's width, still one line: menus closer, a narrower box, and the account
menu as the avatar alone (the company is named inside it). */
@media (max-width: 1180px) {
:is(#header, .topbar) .app-nav > nav { column-gap: 14px; }
.app-nav { --icon-pull: -10px; }
.header-search { flex-basis: 170px; min-width: 110px; }
.user-menu-company { display: none; }
.user-menu > summary { padding-left: 2px; }
}
/* The section you're in (nav_section): brighter, its name underlined, thicker than the underline a
link gets on hover. */
:is(#header, .topbar) .app-nav :is(a.current, .nav-menu.current > summary) { color: #fff; }
:is(#header, .topbar) .app-nav :is(a.current, .nav-menu.current > summary) .nav-label {
text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
:is(#header, .topbar) .app-nav .nav-search.current > summary { border-color: rgba(255, 255, 255, .7); }
/* ---- Phones: a tab bar along the bottom, as phone apps have; Search in the middle. Home goes to
the Home page; the account menu opens as a sheet above the bar, Search at the top (clear of the
keyboard), each over a dimmed page until it's tapped again. The page keeps the top of the
screen. ---- */
@media (max-width: 720px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
:root { --tabbar-h: 58px; --tabbar-space: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
body:has(.app-nav) { padding-bottom: var(--tabbar-space); }
/* The back office's page is the window's height (Django's #container), so its content scrolls
on past the body's padding: the content keeps clear of the tab bar itself, and of the round
+ or a floating Save above it. */
#container #content { padding-bottom: calc(var(--tabbar-space) + 20px); }
body:has(.fab) #container #content, #container #content:has(.save-float.shown) {
padding-bottom: calc(var(--tabbar-space) + 96px); }
:is(#header, .topbar) .app-nav {
position: fixed; z-index: 900; left: 0; right: 0; bottom: 0; display: flex; box-sizing: border-box;
height: var(--tabbar-space); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
background: var(--header-bg); border-top: 1px solid rgba(255, 255, 255, .1);
box-shadow: 0 -2px 12px rgba(0, 0, 0, .14); }
:is(#header, .topbar) .app-nav > nav { display: flex; flex: 4 1 0; flex-wrap: nowrap; gap: 0; margin: 0;
min-width: 0; }
:is(#header, .topbar) .app-nav > .user-menu { display: flex; flex: 1 1 0; margin: 0; min-width: 0; }
.app-nav :is(.nav-menu, .nav-search) { display: flex; flex: 1 1 0; min-width: 0; position: static; order: 0;
margin: 0; }
.app-nav .nav-section { display: none !important; }
.app-nav .header-search { display: none; } /* the Search tab instead */
/* Messages is a tab again, its name under its icon. */
:is(#header, .topbar) .app-nav .chat-link.header-icon { width: auto; height: var(--tabbar-h); margin: 0; order: 0;
display: flex; border-radius: 0; background: none; }
.app-nav .header-icon .nav-label { position: static; width: auto; height: auto; clip: auto; }
/* Each tab: its icon over its name. */
:is(#header, .topbar) .app-nav :is(nav > a, .nav-menu > summary, .nav-search > summary, .user-menu > summary) {
position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 2px; height: var(--tabbar-h); padding: 0; border: 0; border-radius: 0;
background: none; color: rgba(255, 255, 255, .78); font-size: 11px; font-weight: 600; line-height: 14px;
text-decoration: none; -webkit-tap-highlight-color: transparent; }
:is(#header, .topbar) .app-nav .nav-search > summary:hover { background: none; } /* not the desktop box */
.app-nav .nav-icon { box-sizing: content-box; width: 22px; height: 22px; padding: 3px 16px; border-radius: 999px; }
.app-nav .nav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-menu > summary::after { content: none; }
/* The current tab, or the one open: white, its icon on a pill. */
:is(#header, .topbar) .app-nav :is(a.current, details.current > summary, details[open] > summary) { color: #fff; }
:is(#header, .topbar) .app-nav .nav-label { text-decoration: none !important; }
.app-nav :is(a.current, details.current > summary, details[open] > summary) .nav-icon {
background: rgba(255, 255, 255, .18); }
/* While one is open, it is the current tab. */
:is(#header, .topbar) .app-nav:has(details[open]) :is(a.current, details.current:not([open]) > summary) {
color: rgba(255, 255, 255, .78); }
.app-nav:has(details[open]) :is(a.current, details.current:not([open]) > summary) .nav-icon { background: none; }
/* Counts sit on the icon's corner. */
.app-nav :is(.tasks-badge, .chat-badge) { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; }
/* The account tab: the avatar, sized as an icon, over "Account". */
.app-nav .user-menu .avatar { width: 28px; height: 28px; font-size: 11px; }
.app-nav .user-menu[open] .avatar { box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
.app-nav .user-menu-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
/* The page dims behind an open sheet; a tap there closes it (user-menu.js). */
.app-nav:has(details[open])::before { content: ""; position: fixed; inset: 0 0 var(--tabbar-space);
background: rgba(0, 0, 0, .32); }
/* Sheets: the account menu above the bar, Search at the top. */
.app-nav .user-menu-panel { position: fixed; top: auto; left: 8px; right: 8px; bottom: calc(var(--tabbar-space) + 8px);
width: auto; max-width: none; max-height: calc(100dvh - var(--tabbar-space) - 24px);
overflow-y: auto; overscroll-behavior: contain; }
.app-nav .nav-search .nav-search-panel { top: calc(env(safe-area-inset-top) + 8px); bottom: auto; width: auto;
padding: 8px; }
.nav-search .nav-search-form button { padding: 10px 14px; }
}
/* Phones on their side: a slimmer bar, each name beside its icon. */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
:root { --tabbar-h: 44px; }
:is(#header, .topbar) .app-nav :is(nav > a, .nav-menu > summary, .nav-search > summary, .user-menu > summary) {
flex-direction: row; gap: 6px; font-size: 12px; }
.app-nav .nav-icon { padding: 3px 10px; }
.app-nav .user-menu .avatar { width: 26px; height: 26px; }
.app-nav :is(.tasks-badge, .chat-badge) { position: static; }
}
/* Text size (My settings; apps/web/context_processors.py sets --text-zoom and --text-unzoom in the
page's head): a page's content and breadcrumbs grow or shrink; the header and the tab bar don't.
What the content pins to the screen keeps its own size (the round + below, chat.css). */
#main, .breadcrumbs, body > main, .crumbs-bar { zoom: var(--text-zoom, 1); } /* the admin's own is in #main */
/* What a menu holds (Home's, Sell's…, the account menu, a phone's Search) is read like the page, so
it's the same size as the page: opening Home's sheet over Home mustn't look like the text size
changed. The menus' panels keep their place on the screen, and on a computer grow wider to fit
(their widths above); the bar they open from stays as it is. */
.user-menu-panel > * { zoom: var(--text-zoom, 1); }
/* A screen's "new" button (Add sales order, New task, New count, Upload…): on a phone the round +
at the bottom middle, just above the tab bar, the same on every screen. On a computer it stays
where the screen puts it; one only a phone needs is .phone-only. The text stays for screen
readers and as its tooltip. */
:root { --fab-bg: var(--button-bg, #2f5d50); --fab-fg: #fff; } /* the theme's button colour */
.fab.phone-only { display: none; }
@media (max-width: 720px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
body:has(.fab) { padding-bottom: calc(var(--tabbar-space, 0px) + 84px); } /* the last row clears it */
:is(a, label, button).fab.fab, #changelist .actions a.fab, #changelist .actions a.fab:is(:hover, :focus) {
position: fixed; z-index: 800; left: 50%; bottom: calc(var(--tabbar-space, 0px) + 14px); transform: translateX(-50%);
display: grid; place-items: center; box-sizing: border-box; width: 58px; height: 58px; min-height: 0; margin: 0;
padding: 0; border: 0; border-radius: 50%; background: var(--fab-bg); color: var(--fab-fg); font-size: 0;
line-height: 0; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .28); cursor: pointer;
-webkit-tap-highlight-color: transparent; }
:is(a, label, button).fab.fab:active { transform: translateX(-50%) scale(.96); }
:is(a, label, button).fab.fab, #changelist .actions a.fab { zoom: var(--text-unzoom, 1); } /* not the text size */
/* The plus is pinned to the middle: the button's words (kept for screen readers) are in the
circle too, and would push it off centre. */
.fab::before, #changelist .actions a.fab::before {
content: ""; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px;
background: currentColor;
-webkit-mask: var(--fab-plus) center / contain no-repeat; mask: var(--fab-plus) center / contain no-repeat; }
:root { --fab-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
}
@media print { .app-nav, .fab { display: none !important; } }