/* The back office on a phone: laid out like an app, not a small desktop. Loaded last (templates/admin/base_site.html, after Django's forms.css and responsive.css), and only the phone layout's media query: the one the tab bar uses (static/css/user-menu.css). - The page is a light grey and each part of a record (its fields, its lines, a side list) is a white card with a title, its rows divided by hairlines. - Every label sits above its value, so labels and values line up down the left edge; a read-only value is plain text, a field a box you can't miss: 44px tall, 16px text (iOS doesn't zoom into it), a border dark enough to see against the card (3:1). - Dates and times use the phone's own pickers (static/backoffice/phone.js). - A list is a card of rows: each row's name across the top, its status at the right, what it is under it, the rest under their column names; the whole row opens the record. Sort is a menu by the search (phone.js); the search box fills the row. Dark mode inverts the greys: the page darkest, cards a step lighter. */ @media (max-width: 720px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) { :root { --app-bg: color-mix(in srgb, var(--body-fg) 6%, var(--body-bg)); --card-bg: var(--body-bg); --field-bg: var(--body-bg); --field-border: color-mix(in srgb, var(--body-fg) 58%, var(--body-bg)); --row-line: color-mix(in srgb, var(--body-fg) 13%, var(--body-bg)); --focus-ring: color-mix(in srgb, var(--primary) 32%, transparent); --card-radius: 14px; --field-radius: 10px; --row-pad: 12px 16px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --app-bg: var(--body-bg); --card-bg: color-mix(in srgb, var(--body-fg) 7%, var(--body-bg)); --field-bg: color-mix(in srgb, var(--body-fg) 3%, var(--body-bg)); --row-line: color-mix(in srgb, var(--body-fg) 14%, var(--card-bg)); } } html[data-theme="dark"] { --app-bg: var(--body-bg); --card-bg: color-mix(in srgb, var(--body-fg) 7%, var(--body-bg)); --field-bg: color-mix(in srgb, var(--body-fg) 3%, var(--body-bg)); --row-line: color-mix(in srgb, var(--body-fg) 14%, var(--card-bg)); } body, #container { background: var(--app-bg); } /* ---- Cards: each fieldset, each line table, each side list ---- */ #content fieldset.module, #content .inline-group fieldset.module, #content .module:not(#changelist) { margin: 0 0 16px; padding: 0; background: var(--card-bg); border: 1px solid var(--row-line); border-radius: var(--card-radius); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); } #content .inline-group { margin: 0 0 16px; border: 0; background: none; } #content .inline-group fieldset.module { box-sizing: border-box; width: 100%; margin: 0; overflow: hidden; } #content .record-head fieldset.module { margin-bottom: 16px; } /* a card's title: inside it, at the top, no rule under it */ #content fieldset .fieldset-heading, #content fieldset .inline-heading, #content .module > h2, #content .module caption, #content .inline-group h2 { margin: 0; padding: 14px 16px 4px; border: 0; background: none; font-size: 16px; font-weight: 600; color: var(--body-fg); } #content .inline-group h2:has(.line-tools) { padding-bottom: 8px; } /* a card that's only its rows (the first, over a record's lines) has no empty title gap */ #content fieldset.module > .form-row:first-child { border-top: 0; } /* ---- Rows: label above value ---- */ #content .aligned .form-row, #content .form-row:not(tr) { padding: var(--row-pad); border: 0; border-top: 1px solid var(--row-line); overflow: visible; } #content :is(.fieldset-heading, .inline-heading) + .form-row { border-top: 0; } #content .aligned .form-row > div { width: auto; max-width: 100%; } #content .aligned .flex-container { display: block; } #content .aligned .flex-container > label:not(.vCheckboxLabel), #content .aligned .form-multiline .fieldBox > label:not(.vCheckboxLabel) { display: block; float: none; width: auto; min-width: 0; max-width: none; margin: 0 0 6px; padding: 0; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--body-quiet-color); overflow-wrap: anywhere; } #content .aligned .readonly, #content .aligned .flex-container > .readonly { display: block; width: auto; margin: 0 !important; padding: 0; font-size: 16px; line-height: 1.45; color: var(--body-fg); overflow-wrap: anywhere; } #content .aligned .readonly .line-state, #content .aligned .readonly .record-status { font-size: 13px; } form .aligned .form-row div.help, #content .aligned div.help, #content .aligned ul.errorlist, #content .aligned p.help { margin: 6px 0 0 !important; padding: 0; width: auto; } #content .aligned ul.errorlist { margin: 0 0 6px !important; } #content ul.errorlist li { font-size: 14px; } /* two fields Django puts on one line: one under the other, each with its label */ #content .aligned .form-multiline { display: flex; flex-direction: column; gap: 14px; } #content .aligned .form-multiline > div, #content .aligned .form-multiline .fieldBox { width: 100%; margin: 0; } /* a tick box and its words on one line, the box big enough to hit */ #content .aligned .checkbox-row, #content .aligned .flex-container:has(> input[type=checkbox]) { display: flex; align-items: center; gap: 12px; min-height: 32px; } #content .aligned .checkbox-row > input[type=checkbox], #content .aligned .flex-container > input[type=checkbox] { flex: none; width: 22px; height: 22px; margin: 0; } #content .aligned label.vCheckboxLabel, #content .aligned .checkbox-row label { margin: 0; padding: 0; font-size: 16px; color: var(--body-fg); } #content .aligned .checkbox-row + div.help { margin-left: 34px !important; } /* ---- Fields: boxes you can see and hit ---- */ #content :is(input[type=text], input[type=number], input[type=email], input[type=url], input[type=tel], input[type=password], input[type=search], input[type=date], input[type=time], input[type=datetime-local], input.vDateField, input.vTimeField, textarea, select:not([multiple])) { box-sizing: border-box; height: auto; min-height: 44px; margin: 0; padding: 10px 12px; font: inherit; font-size: 16px; line-height: 1.3; color: var(--body-fg); background-color: var(--field-bg); border: 1px solid var(--field-border); border-radius: var(--field-radius); box-shadow: none; } #content select[multiple] { font-size: 16px; border: 1px solid var(--field-border); border-radius: var(--field-radius); background: var(--field-bg); } #content :is(input, textarea, select):focus, #content :is(input, textarea, select):focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); } #content :is(input, textarea, select):disabled { opacity: .6; } #content .errors :is(input, select, textarea), #content .errors .select2-selection { border-color: var(--error-fg) !important; } /* on a record, a field fills its row */ #content .aligned :is(input[type=text], input[type=number], input[type=email], input[type=url], input[type=tel], input[type=password], input[type=date], input[type=time], input.vDateField, input.vTimeField, textarea, select), #content .aligned .select2-container { width: 100% !important; max-width: 100%; } #content textarea { min-height: 88px; } /* the dropdown Select2 hides behind its own box stays hidden (it would stick out past the screen) */ #content :is(.aligned, .inline-group) select.select2-hidden-accessible { width: 1px !important; min-height: 0; padding: 0; border: 0; } /* a line table's Sort menu, by its title: small, as it's a tool, not a field */ #content .inline-group h2 select { width: auto; min-height: 36px; padding: 6px 32px 6px 10px; font-size: 14px; background-position: right 10px center; } /* a dropdown's arrow, drawn the same on every phone */ #content select:not([multiple]) { -webkit-appearance: none; appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; } /* searched dropdowns (a product, a vendor) look like the rest */ #content .select2-container .select2-selection--single { display: flex; align-items: center; height: auto; min-height: 44px; box-sizing: border-box; background: var(--field-bg); border: 1px solid var(--field-border); border-radius: var(--field-radius); } #content .select2-container .select2-selection--single .select2-selection__rendered { padding: 10px 36px 10px 12px; line-height: 1.3; font-size: 16px; color: var(--body-fg); white-space: normal; } #content .select2-container .select2-selection--single .select2-selection__arrow { top: 0; bottom: 0; height: auto; right: 8px; } #content .select2-container .select2-selection--single .select2-selection__clear { position: absolute; right: 30px; top: 50%; margin: 0; padding: 4px 6px; transform: translateY(-50%); font-size: 20px; } #content .select2-container .select2-selection--single:has(.select2-selection__clear) .select2-selection__rendered { padding-right: 60px; } #content .select2-container--focus .select2-selection, #content .select2-container--open .select2-selection { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--focus-ring); } .select2-container--open .select2-search__field { min-height: 44px; font-size: 16px; border-radius: 8px; } .select2-results__option { padding: 12px; font-size: 16px; } /* a field with Add/Change icons beside it: the field takes the room */ #content .aligned .related-widget-wrapper { display: flex; align-items: center; gap: 4px; width: 100%; } #content .aligned .related-widget-wrapper > :is(select, .select2-container, input) { flex: 1 1 auto; min-width: 0; } #content .related-widget-wrapper-link { display: inline-grid; place-items: center; width: 40px; height: 44px; margin: 0; } /* ---- Dates and times: the phone's pickers side by side (phone.js), not Django's links ---- */ #content .datetimeshortcuts { display: none; } #content p.datetime { display: flex; gap: 8px; margin: 0; } #content p.datetime > input { flex: 1 1 130px; min-width: 0; width: auto !important; padding-right: 10px; } #content p.datetime > input[type=time] { flex-basis: 150px; } /* 08:49:34 AM is the longer */ #content input[type=date], #content input[type=time] { display: block; -webkit-appearance: none; appearance: none; text-align: left; } #content input[type=date]::-webkit-date-and-time-value, #content input[type=time]::-webkit-date-and-time-value { text-align: left; margin: 0; } /* ---- The record's bar: its title, its next step, Actions ---- */ .record-bar { gap: 8px; } .record-bar .button, .record-bar .closelink { min-height: 44px; padding: 0 16px; border-radius: var(--field-radius); font-size: 15px; } .record-bar .record-more-items > .button { border-radius: 8px; } .save-float .submit-row input, .submit-row input[type=submit], .submit-row a.button, .submit-row .deletelink { min-height: 44px; padding: 0 18px; border-radius: var(--field-radius); font-size: 15px; } #content .submit-row { gap: 8px; } /* ---- A record's lines: one card, each line a row of it ---- */ #content .inline-group .tabular tr.form-row:not(.empty-form) { padding: 12px 16px; background: none; border-bottom: 0; border-top: 1px solid var(--row-line); } #content .inline-group .tabular tr.form-row:nth-child(odd):not(.empty-form) { background: none; } #content .inline-group .tabular tr.form-row > td { font-size: 15px; } #content .inline-group .tabular tr.form-row > td.line-lead { font-size: 16px; } #content .inline-group .tabular tr.form-row > td[data-label]::before { font-size: 12.5px; margin-bottom: 4px; } #content .inline-group .tabular tr.form-row > :is(td.delete, td.dup-cell) { top: 12px; } #content .inline-group .tabular tr.form-row > td.delete { right: 16px; } #content .inline-group .tabular tr.form-row > td.dup-cell { right: 56px; } #content .inline-group .tabular tr.add-row > td { padding: 0; border-top: 1px solid var(--row-line); background: none; } #content .inline-group .tabular tr.add-row a { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px; font-size: 15px; font-weight: 500; background-position: 16px center; } #content .inline-group .tabular tr.add-row a.addlink { padding-left: 38px; } /* side lists (a product's stock, a vendor's orders) */ #content .side-panel .form-row { padding: 0 0 4px; border: 0; } /* a wide side table (an order's parts) scrolls inside its card, not the page */ #content .side-panel .readonly { overflow-x: auto; overflow-wrap: normal; } #content .aligned.side-panel .flex-container > label:not(.vCheckboxLabel) { display: none; } /* its title says it */ #content .side-table { width: auto; min-width: 100%; } #content .side-table td:first-child { min-width: 9.5em; } #content .side-table :is(th, td):not(:first-child) { white-space: nowrap; } #content .side-table { font-size: 14px; } #content .side-table :is(th, td) { padding: 10px 8px; overflow-wrap: normal; word-break: normal; } #content .side-table :is(th, td):first-child { padding-left: 16px; } #content .side-table :is(th, td):last-child { padding-right: 16px; } #content .side-table th { padding-top: 6px; padding-bottom: 6px; } #content :is(.side-more, .side-empty, .side-note) { margin: 10px 16px 12px; font-size: 14px; } /* Home's lists and Search's results: white cards on the grey page, like the rest */ .pmap-list ul, .site-search-results ul { background: var(--card-bg); border-color: var(--row-line) !important; border-radius: var(--card-radius) !important; } /* ---- Lists ---- */ #changelist { background: none; border: 0; } #changelist .changelist-form-container { background: none; } .list-toolbar { gap: 8px; margin-bottom: 4px; } #changelist #toolbar { padding: 0; background: none; border: 0; } #changelist-search > div { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-height: none; } #changelist-search label[for=searchbar] { position: absolute; left: 13px; top: 13px; z-index: 1; margin: 0; line-height: 0; } #changelist-search label[for=searchbar] img { width: 18px; height: 18px; opacity: .6; } #content #changelist-search #searchbar { flex: 1 1 0; width: auto; min-width: 0; height: auto; margin: 0; padding-left: 40px; padding-right: 48px; border-radius: 12px; } #changelist-search .scan-button { position: absolute; right: 2px; top: 2px; width: 40px; height: 40px; margin: 0; } #changelist-search input[type=submit] { display: none; } /* the keyboard's Search key searches */ #changelist-search .small.quiet { flex-basis: 100%; margin: 2px 2px 0; font-size: 13px; } .list-filters-toggle { border-radius: 12px; border-color: var(--field-border); } .list-sort { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; font-size: 13px; color: var(--body-quiet-color); } #content .list-sort select { flex: 1 1 auto; min-width: 0; min-height: 40px; padding-top: 8px; padding-bottom: 8px; font-size: 15px; } #changelist .actions { margin: 8px 0; padding: 0; background: none; border: 0; } #changelist .actions a.add:not(.fab) { min-height: 44px; padding: 0 16px; border-radius: var(--field-radius); font-size: 15px; } #changelist .actions select { min-height: 44px; } /* the rows: a card of them (phone.js marks each cell's part) */ #changelist .results { overflow: visible; margin: 8px 0 0; background: var(--card-bg); border: 1px solid var(--row-line); border-radius: var(--card-radius); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); } #changelist #result_list.phone-cards, #changelist #result_list.phone-cards tbody { display: block; width: 100%; border: 0; } #result_list.phone-cards thead { display: none; } #result_list.phone-cards tbody tr { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 104px), 1fr)); grid-auto-flow: row dense; gap: 6px 12px; align-items: start; padding: 12px 16px; background: none !important; border-top: 1px solid var(--row-line); } #result_list.phone-cards tbody tr:first-child { border-top: 0; } #result_list.phone-cards tbody tr:has(.cell-lead) { padding-left: 72px; min-height: 48px; } #result_list.phone-cards tbody tr:has(.cell-check) { padding-left: 50px; } #result_list.phone-cards tbody tr:has(.cell-check):has(.cell-lead) { padding-left: 104px; } #result_list.phone-cards tbody tr.selected { background: var(--selected-row) !important; } #result_list.phone-cards tbody :is(td, th) { display: block; min-width: 0; padding: 0; border: 0; background: none; font-size: 14px; line-height: 1.35; text-align: left; overflow-wrap: anywhere; } #result_list.phone-cards tbody :is(td, th)[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 12px; font-weight: 500; color: var(--body-quiet-color); } #result_list.phone-cards tbody :is(.cell-empty, .cell-more) { display: none; } #result_list.phone-cards tbody .cell-title { grid-column: 1 / -2; order: -3; font-size: 16px; font-weight: 600; } #result_list.phone-cards tbody tr:not(:has(.cell-tail)) .cell-title { grid-column: 1 / -1; } #result_list.phone-cards tbody .cell-tail { grid-column: -2 / -1; order: -2; justify-self: end; text-align: right; } #result_list.phone-cards tbody .cell-sub { grid-column: 1 / -1; order: -1; margin-top: -4px; font-size: 15px; color: var(--body-fg); } #result_list.phone-cards tbody :is(.cell-title, .cell-sub, .cell-tail)::before { content: none !important; } #result_list.phone-cards tbody .cell-title a { color: var(--link-fg); } /* the whole row opens the record; its other links and boxes stay on top */ #result_list.phone-cards tbody .cell-title a::after { content: ""; position: absolute; inset: 0; } #result_list.phone-cards tbody :is(a, input, button, select, label):not(.cell-title a) { position: relative; z-index: 1; } #result_list.phone-cards tbody .cell-check { position: absolute; left: 16px; top: 13px; } #result_list.phone-cards tbody .cell-check input { width: 22px; height: 22px; margin: 0; } #result_list.phone-cards tbody .cell-lead { position: absolute; left: 16px; top: 12px; } #result_list.phone-cards tbody tr:has(.cell-check) .cell-lead { left: 50px; } #result_list.phone-cards tbody .cell-lead img { width: 44px !important; height: 44px !important; border-radius: 8px; object-fit: cover; } #result_list.phone-cards tbody .cell-tail :is(.line-state, .record-status) { font-size: 12.5px; } #result_list.phone-cards tbody .cell-tail:not(:has(.line-state, .record-status, img)) { padding: 2px 10px; border-radius: 999px; background: var(--darkened-bg); font-size: 12.5px; font-weight: 500; color: var(--body-fg); white-space: nowrap; } #result_list.phone-cards tbody .figure { text-align: left; } #changelist p.paginator { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0; padding: 0; border: 0; background: none; font-size: 14px; } #changelist p.paginator a, #changelist p.paginator span.this-page { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; box-sizing: border-box; border: 1px solid var(--row-line); border-radius: 10px; background: var(--card-bg); } #changelist p.paginator span.this-page { border-color: var(--primary); font-weight: 600; } }