/* ========================================================================== Ravon Express — design system -------------------------------------------------------------------------- A single hand-written stylesheet: no framework, no build step, no CDN. Organised as: tokens → reset → primitives → layout → components → utilities. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Brand — dark blue. `--brand` is the resting colour, 600 the hover and 700 the pressed state; they are the same hue walked down in lightness, so a button darkens rather than shifting colour under the cursor. `--brand-soft` / `--brand-border` are the pale pair behind a selected row or an active nav item. Deliberately darker than `--info` (#175cd3): the two blues sit next to each other on an info banner inside a branded panel, and "ours" has to read as the heavier of the pair. Semantic red is untouched — `--danger` still means something went wrong. */ --brand: #14418a; --brand-600: #0f3470; --brand-700: #0b2856; --brand-soft: #eff4fb; --brand-border: #c2d5ef; /* Neutrals */ --bg: #f6f7f9; --surface: #ffffff; --surface-2: #fbfcfd; /* Table headings. Their own token rather than --surface-2, which at #fbfcfd is all but white and left a heading row indistinguishable from the data under it. Dark enough to read as a rule across the top of the table, light enough that the uppercase grey label on it stays comfortable. */ --thead-bg: #eceff4; /* The disclosed filter panel. Deliberately a step darker than the table heading above it: it is a block that appears and disappears, and it has to read as a distinct surface rather than as another header row. Its labels are forced to full-strength ink — on this ground the muted grey they carry elsewhere goes soft, and a label nobody can read is a filter nobody uses. */ --filters-bg: #e4e9f0; --filters-ink: #0b111f; --surface-3: #f2f4f7; --overlay: rgba(16, 20, 28, .45); /* The text ramp, darkened one step across the board. Body copy was already near-black; what made the interface read pale was the three greys under it, which carry most of what is actually on screen — field labels, hints, table meta, card subtitles, the nav. Every one of them now clears 7:1 on --surface (WCAG AAA for body text) rather than the 4.5-ish the lighter two used to sit at, which is a real difference on a branch's monitor in daylight. --text-4 is the lightest of the four and is no longer near-invisible. Two things that used to share these greys now have steps of their own below them, because neither is content: `--text-hint` for prose that explains something, and `--placeholder` for a prompt in an empty field. */ --text: #0b111f; --text-2: #2f3b4d; --text-3: #495567; --text-4: #6b7688; /* The placeholder has its own step, one lighter than the ramp's last. `--text-4` used to do both jobs, and darkening the ramp for legibility — the note above — took the placeholder with it: `+998 90 123 45 67` sitting in an empty box came out the same weight as a number somebody had actually typed, so a form of empty fields read as a form already filled in. A placeholder is a prompt, not a value, and has to look like one. It is only ever a repeat of the label or an example, so nothing is lost by its being faint — everything it says is said again by something that is not. */ --placeholder: #aab2bf; /* Explanatory prose — a card's subtitle, the line under a heading that says what the panel is for, «Коробки и пакеты, проданные клиенту отдельно от мест». It is read once and then becomes furniture, which is the argument for it being lighter than the content it explains and heavier than a placeholder, which is not text at all. Its own step rather than reusing `--text-3`: that grey also carries field labels and the nav, which have to stay readable at a glance on a branch monitor. */ --text-hint: #767f8d; /* One colour per operational area, on the top bar — see `.topbar--*`. Not one shared tint: an operator moves between four of these all day and the bar has to say *which* of them they are in, not merely that they are in one of them. Each is its own hue mixed ~13% into the surface — a real step off white, because a marker nobody notices marks nothing, and no stronger, because the title, the search box and the avatar sit on it. */ --topbar-shipments: #e0e6f0; /* blue — накладные */ --topbar-pickups: #e0eee7; /* green — вызовы курьера */ --topbar-returns: #f5e7df; /* amber — возвраты */ --topbar-scan: #ece6f3; /* violet — сканирование */ --text-invert: #ffffff; --border: #e4e7ec; --border-2: #d0d5dd; --border-strong: #98a2b3; /* Sender / consignee. Every screen that shows the two parties tints them the same way, so a waybill reads the same on the booking form, in a list and on the detail page: who it came from on the left, who it goes to on the right. Kept pale enough that ordinary body text stays readable on it. */ /* The requester panel, tinted by customer type. Pale enough that black labels and grey hints stay legible on it — this marks a panel, it does not highlight it. «Частное лицо» is deliberately untinted: it is the ordinary case and colouring the majority would leave nothing standing out. */ --ctype-eshop: #fdf3c6; --ctype-eshop-border: #e8d182; --ctype-contract: #eadbc8; --ctype-contract-border:#c4a582; /* Sender blue and consignee green, taken 5% darker: at their old values they were a hair off white, and on a printed or projected screen the two ends of a waybill were telling apart by nothing at all. Darkened in HSL so the hue and saturation are untouched and only the light comes out. */ --party-from: #d7edff; --party-from-border: #b6d9fa; --party-to: #dafae9; --party-to-border: #b3e7ca; /* Semantic */ --success: #067647; --success-soft: #ecfdf3; --success-border: #abefc6; --warning: #b54708; --warning-soft: #fffaeb; --warning-border: #fedf89; --danger: #b42318; --danger-soft: #fef3f2; --danger-border: #fecdca; --info: #175cd3; --info-soft: #eff8ff; --info-border: #b2ddff; --neutral-soft: #f2f4f7; /* Charts. The first series is the house colour, so a single-series chart is branded without being told to be. --c2 moves to teal: it used to be the blue that now sits at --c1, and two adjacent blues in one legend are two series nobody can tell apart. */ --c1: #14418a; --c2: #0e9384; --c3: #067647; --c4: #b54708; --c5: #6941c6; --c6: #175cd3; --c7: #c11574; --c8: #3538cd; /* Elevation */ --shadow-xs: 0 1px 2px rgba(16,24,40,.05); --shadow-sm: 0 1px 3px rgba(16,24,40,.10), 0 1px 2px rgba(16,24,40,.06); --shadow-md: 0 4px 8px -2px rgba(16,24,40,.10), 0 2px 4px -2px rgba(16,24,40,.06); --shadow-lg: 0 12px 16px -4px rgba(16,24,40,.08), 0 4px 6px -2px rgba(16,24,40,.03); --shadow-xl: 0 20px 24px -4px rgba(16,24,40,.08), 0 8px 8px -4px rgba(16,24,40,.03); --ring: 0 0 0 3px rgba(20, 65, 138, .16); /* A tooltip is drawn *over* the page, so it inverts rather than tinting: dark on light here, light on dark below. Not `--surface` in either theme — a bubble the same colour as the panel under it has to be separated by a shadow alone, and at 12px that is not enough. */ --tooltip-bg: #1f2937; --tooltip-ink: #f3f4f6; /* Shape */ --r-xs: 4px; --r-sm: 6px; --r: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-full: 999px; /* Type */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Layout */ --sidebar-w: 252px; --sidebar-w-collapsed: 68px; --topbar-h: 60px; --t-fast: 120ms cubic-bezier(.4,0,.2,1); --t: 200ms cubic-bezier(.4,0,.2,1); } [data-theme="dark"] { --bg: #0d1117; --surface: #161b22; --surface-2: #1c222b; /* Deeper than the light theme's move is *lighter* here: the rows are #161b22, so a heading that went darker would disappear into them. What the eye is after in both themes is the separation, not the direction. */ --thead-bg: #212934; /* Dark has the same job to do in the other direction: a panel that separates itself from the page. The ink stays light here — black on this would be unreadable, which is the point of tokenising it rather than hard-coding. */ --filters-bg: #232b36; --filters-ink: #f0f6fc; --surface-3: #232a35; --overlay: rgba(0, 0, 0, .65); /* The same move, mirrored: "darker" on a light background means "further from the page", so here the ramp goes lighter by the same one step. Both themes end up at the same contrast against their own surface, which is the point — the interface should not read weaker in one than the other. */ --text: #f0f6fc; --text-2: #c9d1d9; --text-3: #a6b0bb; --text-4: #838d99; /* Mirrored: away from the page here means darker, not lighter. */ --placeholder: #5b6572; --text-hint: #7e8894; /* The same four, mixed into the dark surface instead — each keeps its hue so the mapping an operator learns in one theme holds in the other. */ --topbar-shipments: #1b2d46; --topbar-pickups: #204235; --topbar-returns: #443c22; --topbar-scan: #33314d; --border: #2a313c; --border-2: #3a424e; --border-strong: #4d5866; /* The same two tints, dialled down until they only just lift off the dark surface — anything stronger fights the text. */ /* Dark theme: the same two hues taken down to a wash, because at full strength a yellow panel in a dark interface is a warning light. */ --ctype-eshop: #33290f; --ctype-contract: #2c211a; --ctype-eshop-border: #5c4a1a; --ctype-contract-border:#54402c; /* Dark has no room to go darker — another 10% down and the tint is the page. The same 10% is spent on making it *read* instead: a stronger, slightly lighter wash. Same intent as the light theme, opposite direction, which is the rule this stylesheet follows wherever a tint has to separate itself from its ground. */ --party-from: #121f32; --party-from-border: #1a3c6d; --party-to: #10271c; --party-to-border: #1d5337; /* The brand has to be lifted here, not just its tints. `--brand` does two jobs — the fill behind a primary button's white label, and the text colour of an active nav item sitting on `--brand-soft` — and #14418a is legible in neither against a dark surface. #2f74d8 clears AA against white for the first job and reads clearly on the navy tint for the second. The hover and pressed steps go *lighter* rather than darker: on a dark surface, darkening a control makes it recede when it should be coming forward. */ --brand: #2f74d8; --brand-600: #4a89e4; --brand-700: #6099ec; --brand-soft: #101c30; --brand-border: #24406e; --success-soft: #0e2a1c; --success-border: #1e4c34; --success: #4ade80; --warning-soft: #2b1f0d; --warning-border: #55401a; --warning: #fbbf24; --danger-soft: #2c1416; --danger-border: #572026; --danger: #f87171; --info-soft: #0f1f38; --info-border: #1d3a63; --info: #60a5fa; --neutral-soft: #232a35; --shadow-xs: 0 1px 2px rgba(0,0,0,.4); --shadow-sm: 0 1px 3px rgba(0,0,0,.5); --shadow-md: 0 4px 10px rgba(0,0,0,.5); --shadow-lg: 0 12px 24px rgba(0,0,0,.55); --shadow-xl: 0 24px 48px rgba(0,0,0,.6); --ring: 0 0 0 3px rgba(56, 116, 205, .32); --tooltip-bg: #e8edf5; --tooltip-ink: #0d1117; } /* -------------------------------------------------------------------------- 2. Reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100dvh; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } h1,h2,h3,h4,h5,h6 { font-weight: 600; line-height: 1.3; letter-spacing: -.011em; } h1 { font-size: 22px; } h2 { font-size: 18px; } h3 { font-size: 15px; } table { border-collapse: collapse; width: 100%; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } ::placeholder { color: var(--placeholder); opacity: 1; } /* A select showing its empty option is showing a placeholder. The options themselves stay full-strength: the closed control is the prompt, the open list is a list of real choices. */ .select.is-placeholder { color: var(--placeholder); } .select.is-placeholder option { color: var(--text); } .select.is-placeholder option[value=""] { color: var(--placeholder); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: var(--r-full); border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* -------------------------------------------------------------------------- 3. Boot screen -------------------------------------------------------------------------- */ .boot { min-height: 100dvh; display: grid; place-content: center; gap: 16px; justify-items: center; } .boot__mark { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--brand); animation: pulse 1.2s ease-in-out infinite; } .boot__text { color: var(--text-3); font-size: 13px; } @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.9); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes slideIn { from { transform: translateX(100%); } to { transform: none; } } @keyframes shimmer { 100% { transform: translateX(100%); } } /* -------------------------------------------------------------------------- 4. App shell -------------------------------------------------------------------------- */ .shell { display: flex; min-height: 100dvh; } .sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh; transition: width var(--t), flex-basis var(--t); z-index: 40; } .sidebar--collapsed { width: var(--sidebar-w-collapsed); flex-basis: var(--sidebar-w-collapsed); } .sidebar--collapsed .nav__label, .sidebar--collapsed .nav__group-title, .sidebar--collapsed .brand__text, .sidebar--collapsed .nav__badge { display: none; } .sidebar--collapsed .nav__link { justify-content: center; padding-inline: 0; } .brand { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: var(--topbar-h); flex: 0 0 var(--topbar-h); border-bottom: 1px solid var(--border); } .brand__mark { width: 30px; height: 30px; flex: 0 0 30px; border-radius: var(--r-sm); background: var(--brand); color: #fff; display: grid; place-content: center; font-weight: 700; font-size: 13px; letter-spacing: -.02em; } .brand__text { font-weight: 650; font-size: 15px; letter-spacing: -.015em; white-space: nowrap; } .brand__sub { display: block; font-size: 10.5px; font-weight: 500; color: var(--text-4); letter-spacing: .02em; text-transform: uppercase; } .nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 10px 16px; } .nav__group + .nav__group { margin-top: 14px; } .nav__group-title { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-4); padding: 6px 10px 4px; } .nav__link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); color: var(--text-2); font-weight: 500; font-size: 13.5px; transition: background var(--t-fast), color var(--t-fast); white-space: nowrap; position: relative; } .nav__link:hover { background: var(--surface-3); color: var(--text); text-decoration: none; } .nav__link.is-active { background: var(--brand-soft); color: var(--brand); font-weight: 600; } [data-theme="dark"] .nav__link.is-active { color: #ff6b6b; } .nav__link.is-active::before { content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; background: var(--brand); border-radius: 0 3px 3px 0; } /* The two create buttons above the first destination. Tinted so they read as actions rather than places, and never `is-active` — you are not "on" them, you press them. Separated by a rule so the list below still starts cleanly. */ .nav__group--actions { padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border); } .nav__link--action { color: var(--brand); font-weight: 600; background: color-mix(in srgb, var(--brand) 7%, transparent); } .nav__link--action + .nav__link--action { margin-top: 4px; } .nav__link--action:hover { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); } [data-theme="dark"] .nav__link--action { color: #ff6b6b; } /* A destination that is also a section — «Отчёты» and its ten reports. The row is the link and the chevron is a separate button beside it, so opening the list and going to the page stay two different gestures. */ .nav__row { display: flex; align-items: center; gap: 2px; } .nav__row > .nav__link { flex: 1; min-width: 0; } .nav__toggle { flex: 0 0 24px; height: 28px; display: grid; place-content: center; border-radius: var(--r-xs); color: var(--text-4); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); } .nav__toggle:hover { background: var(--surface-3); color: var(--text-2); } /* Indented under the parent and hung off a rule, so a long list still reads as belonging to the heading above it rather than as ten more destinations. */ .nav__sub { margin: 2px 0 4px 19px; padding-left: 9px; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 1px; } .nav__link--sub { padding: 6px 9px; font-size: 12.5px; } .nav__link--sub.is-active::before { display: none; } /* Collapsed to icons there is no room for a tree, and the parent link still reaches the list page. */ .sidebar--collapsed .nav__sub, .sidebar--collapsed .nav__toggle { display: none; } .nav__icon { flex: 0 0 18px; width: 18px; height: 18px; stroke-width: 1.8; } .nav__label { flex: 1; overflow: hidden; text-overflow: ellipsis; } .nav__badge { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: var(--r-full); background: var(--brand); color: #fff; min-width: 18px; text-align: center; } .sidebar__footer { border-top: 1px solid var(--border); padding: 8px; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { height: var(--topbar-h); flex: 0 0 var(--topbar-h); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; padding: 0 20px; position: sticky; top: 0; z-index: 30; } /* The title and, for a page that carries no heading of its own, its one-line description. Stacked tight: two lines have to sit inside the bar's fixed height, and `min-width: 0` lets a long description ellipsize rather than shove the quick search off the end. */ .topbar__heading { min-width: 0; display: flex; flex-direction: column; justify-content: center; } .topbar__title { font-size: 15px; font-weight: 620; letter-spacing: -.01em; line-height: 1.25; } /* The way out of a sub-page. It is the one control people reach for without looking, so the arrow is bigger than the bar's other ghost buttons, which are for things you go looking for deliberately. The explicit svg size is needed because the icon would otherwise take its width from the attribute and `flex: none` because the title beside it truncates — without it the arrow would give up its own width as the title grew. */ .topbar__back { flex: none; width: 34px; margin-right: -2px; } .topbar__back svg { width: 20px; height: 20px; flex-basis: 20px; } /* Which record — an anchor a page teleports its number into. It holds no space when empty, so an ordinary screen's title sits exactly where it did. */ .topbar__context { display: flex; align-items: center; gap: 7px; flex: none; } .topbar__context:empty { display: none; } .topbar__spacer { flex: 1; } .page { padding: 20px; flex: 1; animation: fadeUp .22s ease both; } .page--wide { max-width: none; } .page__header { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .page__heading { flex: 1; min-width: 200px; } .page__title { font-size: 20px; font-weight: 650; letter-spacing: -.018em; } .page__subtitle { color: var(--text-3); font-size: 13px; margin-top: 3px; } .page__actions { display: flex; gap: 8px; flex-wrap: wrap; } @media (max-width: 900px) { .sidebar { position: fixed; inset: 0 auto 0 0; transform: translateX(-100%); box-shadow: var(--shadow-xl); } .sidebar--open { transform: none; } .page { padding: 14px; } .topbar { padding: 0 12px; } } /* The operational areas, each marked on the bar in its own colour. `/shipments`, `/pickups`, `/returns` and the scan station are where a branch spends the day, and an operator moves between them constantly — so the bar says *which one* they are on, before any word is read. Everything else keeps the plain bar: a report or a masterdata screen is somewhere they visit, and colouring those too would leave the colour meaning nothing. Kept translucent like the plain bar, so what scrolls underneath still shows through the blur. The border goes a step firmer than `--border`, because a tinted band that ends in the same hairline as a white one reads as a shadow rather than an edge. */ .topbar--shipments, .topbar--pickups, .topbar--returns, .topbar--scan { border-bottom-color: var(--border-2); } .topbar--shipments { background: color-mix(in srgb, var(--topbar-shipments) 88%, transparent); } .topbar--pickups { background: color-mix(in srgb, var(--topbar-pickups) 88%, transparent); } .topbar--returns { background: color-mix(in srgb, var(--topbar-returns) 88%, transparent); } .topbar--scan { background: color-mix(in srgb, var(--topbar-scan) 88%, transparent); } .scrim { position: fixed; inset: 0; background: var(--overlay); z-index: 35; animation: fadeUp .15s ease; } /* -------------------------------------------------------------------------- 5. Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 550; white-space: nowrap; border: 1px solid transparent; background: var(--surface-3); color: var(--text); transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast); text-decoration: none; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(.5px); } .btn:disabled, .btn.is-disabled { opacity: .5; pointer-events: none; } .btn svg { width: 16px; height: 16px; flex: 0 0 16px; stroke-width: 1.9; } .btn--primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-xs); } .btn--primary:hover { background: var(--brand-600); } .btn--primary:focus-visible { box-shadow: var(--ring); } .btn--secondary { background: var(--surface); border-color: var(--border-2); color: var(--text); box-shadow: var(--shadow-xs); } .btn--secondary:hover { background: var(--surface-3); border-color: var(--border-strong); } .btn--ghost { background: transparent; color: var(--text-2); } .btn--ghost:hover { background: var(--surface-3); color: var(--text); } .btn--danger { background: var(--danger); color: #fff; } .btn--danger:hover { filter: brightness(.93); } .btn--success { background: var(--success); color: #fff; } .btn--success:hover { filter: brightness(.93); } .btn--sm { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: var(--r-xs); } .btn--sm svg { width: 14px; height: 14px; flex-basis: 14px; } .btn--lg { height: 42px; padding: 0 20px; font-size: 15px; } .btn--icon { width: 36px; padding: 0; } .btn--icon.btn--sm { width: 30px; } .btn--block { width: 100%; } .btn-group { display: inline-flex; } .btn-group .btn { border-radius: 0; margin-left: -1px; } .btn-group .btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); margin-left: 0; } .btn-group .btn:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; } .btn-group .btn.is-active { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-border); z-index: 1; } /* -------------------------------------------------------------------------- 6. Cards & panels -------------------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-xs); } .card__header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--border); /* One height whether or not the header carries a button. 14px of padding either side of a title is 49px and either side of a `--sm` button is 58, so «Детали» and «Возврат отправителю» sat side by side with their tinted bars visibly different depths — which reads as one of them being wrong rather than as one of them having a button. 59 is the taller of the two — 14 + a 30px `--sm` button + 14 + the 1px bottom border, which counts because everything here is `border-box` — and it is the taller that wins, since a button cannot be made shorter. */ min-height: 59px; } /* Except where the header *is* a strip of tabs: they bring their own 38px and their own bottom border, and a minimum meant for a title and a button would hang 20px of empty space under them. Was an inline `padding: 0 16px` on two pages; it is a class now so the exception is visible and named. */ .card__header--tabs { min-height: 0; padding: 0 16px; } .card__title { font-size: 14.5px; font-weight: 620; letter-spacing: -.008em; } /* A header that is an instruction rather than a label — «Смена пароля» on the profile page somebody has just been sent to because their password must be changed before they can work. A solid bar, not the usual tinted alert: the card *is* the message on that screen, and a whole page of pale headers with one pale-tinted one among them is not a stop sign. The red is written out rather than taken from `--danger`, which flips to a pale #f87171 in dark mode — right for text on a dark ground, unreadable under white. Both values here are chosen to carry white at AA. */ .card__header--urgent { background: #b42318; border-bottom-color: #912018; border-radius: var(--r-md) var(--r-md) 0 0; } .card__header--urgent .card__title, .card__header--urgent .card__subtitle { color: #fff; } [data-theme="dark"] .card__header--urgent { background: #a11f14; border-bottom-color: #7a1710; } /* A pale header, for a page that is a column of panels rather than one card. On the waybill's detail page five panels of the same white as their own bodies ran together into one long sheet: the eye had a rule and a slightly bolder line to find each section by. A tinted bar gives every panel a visible top edge, which is what makes «где кончается один блок и начинается другой» answerable at a glance rather than by reading. `--brand-soft` and not a colour of its own: it is the same pale blue the active nav item and the selected day in a date picker sit on, and it is defined in both themes, so a header does not have to be re-picked for dark mode. Unlike `--urgent` this is not a signal — the text keeps its ordinary colour and contrast, because a header that shouts on five panels at once says nothing. */ .card__header--tint { background: var(--brand-soft); border-bottom-color: var(--brand-border); border-radius: var(--r-md) var(--r-md) 0 0; } .card__subtitle { font-size: 12.5px; color: var(--text-hint); margin-top: 1px; } .card__body { padding: 16px; } .card__body--flush { padding: 0; } .card__footer { padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--r-md) var(--r-md); } /* A card that follows the page as it scrolls — the live price beside the booking form, which is one long page. Only sticks where there is a column to stick within; below the sidebar breakpoint the grid stacks and a sticky card would cover the fields underneath it. */ @media (min-width: 1100px) { /* Below the top bar, for the reason spelled out on `.form-rail`: the bar is sticky at `top: 0` and 60px tall, so anything parked at 16 slides under it. */ .card--sticky { position: sticky; top: calc(var(--topbar-h) + 16px); align-self: start; } } /* Legend under a catalogue table: what each enum value in the table means. Sits inside the card below the pagination, on the secondary surface so it reads as a footnote to the table rather than another section. Two columns where there is room, one on a narrow screen. */ /* A manual entry read once: the «?» on a masterdata row. Wider line spacing than body text and a capped measure, because it is a paragraph of prose in a dialog sized for forms, and prose at 100 characters a line is not read. */ .help-text { font-size: 14px; line-height: 1.65; color: var(--text); max-width: 62ch; white-space: pre-line; } .legend { padding: 14px 16px 16px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--r-md) var(--r-md); } .legend__title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin: 0 0 10px; } .legend__list { display: grid; gap: 7px 28px; margin: 0; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); } /* Term and description on one line, the term fixed-width so the sentences line up into a readable column. */ .legend__item { display: flex; gap: 8px; align-items: baseline; } .legend__term { flex: 0 0 148px; font-size: 12.5px; font-weight: 600; color: var(--text); } /* The sentence explaining an enum value under a catalogue table — the same kind of prose as a card subtitle, so the same step. */ .legend__desc { margin: 0; font-size: 12.5px; color: var(--text-hint); line-height: 1.5; } @media (max-width: 640px) { .legend__item { flex-direction: column; gap: 1px; } .legend__term { flex: none; } } /* ── Sender / consignee ───────────────────────────────────────────────────── The two parties are the one thing every operator looks for first, so they carry a tint instead of the plain white surface: `--from` for the sender, `--to` for the consignee. Three shapes, one palette: .party a whole card (the booking form's two panels) .party-block a block inside a card (the detail page's two addresses) td.party-cell a table cell (the consignee column in every list) The tint replaces the card's own background, so put it on the `.card` element itself rather than on `.card__body`. */ .party--from { background: var(--party-from); border-color: var(--party-from-border); } .party--to { background: var(--party-to); border-color: var(--party-to-border); } .party--from .card__header, .party--to .card__header { border-bottom-color: inherit; } .party-block { padding: 12px 14px; border-radius: var(--r); border: 1px solid transparent; } .party-block--from { background: var(--party-from); border-color: var(--party-from-border); } .party-block--to { background: var(--party-to); border-color: var(--party-to-border); } /* The handling branch, given the same weight as the contact name: those two are what an operator looks for — who to ring, and where the parcel is. */ .party-block__branch { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 650; margin-top: 2px; } .party-block__branch svg { flex: none; opacity: .65; } /* Table cells keep the tint edge-to-edge. A cell background paints over the row's, so the hover highlight has to be restated here or the tinted column would be the one column that stops responding to the pointer. */ .table td.party-cell--from { background: var(--party-from); } .table td.party-cell--to { background: var(--party-to); } .table tbody tr:hover td.party-cell--from { background: color-mix(in srgb, var(--text) 5%, var(--party-from)); } .table tbody tr:hover td.party-cell--to { background: color-mix(in srgb, var(--text) 5%, var(--party-to)); } /* Inputs sitting on a tinted panel keep the plain surface so the writable areas still read as writable. */ .party--from .input, .party--to .input, .party--from .select, .party--to .select { background: var(--surface); } .grid { display: grid; gap: 16px; } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } /* Exactly two columns, so a pair of panels stays a pair. `--2` above is auto-fit: on a wide monitor 1200px of room becomes four columns of 300, which is right for cards that are a list and wrong where the pairing is the point — «Детали» beside «Возврат отправителю», «Фотоотчёт» beside «Документы». Those two rows are how the page is meant to be read, and a fourth panel sliding up into one of them breaks it. One column below 900, where two of anything is too narrow to read. */ .grid--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 900px) { .grid--pairs { grid-template-columns: 1fr; } } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } /* Five KPI cards rather than four — an account that earns cashback (093) has one more figure than one that does not. A narrower track, because five of `--4`'s 190px need 1014px and the content area beside the 252px sidebar is about 990 on a 1280 monitor: the fifth card dropped to a row of its own, which reads as a card that does not belong with the others. Five of these need 914 and fit. Not `--4` with a wider viewport assumed — the row has to survive the laptop the counter actually runs. */ .grid--5 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .grid--sidebar { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } /* For a rail carrying more than key/value pairs — an address block, a list of status transitions. Only 60px more, but it is the difference between those wrapping to three lines and fitting on two. */ .grid--sidebar-wide { grid-template-columns: minmax(0, 1fr) 400px; } @media (max-width: 1100px) { .grid--sidebar, .grid--sidebar-wide { grid-template-columns: 1fr; } } /* KPI tile */ .kpi { padding: 16px; display: flex; flex-direction: column; gap: 6px; } .kpi__label { font-size: 12px; font-weight: 550; color: var(--text-3); display: flex; align-items: center; gap: 6px; } .kpi__value { font-size: 26px; font-weight: 650; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; } .kpi__meta { font-size: 12px; color: var(--text-3); display: flex; align-items: center; gap: 5px; } .kpi__delta { font-weight: 600; } .kpi__delta--up { color: var(--success); } .kpi__delta--down { color: var(--danger); } /* -------------------------------------------------------------------------- 7. Forms -------------------------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } /* A field whose value is short and fixed-length — a табельный номер, a code. It keeps its cell in the grid (so the field beside it still starts where the column does) and only the control is capped, rather than being given a narrower grid column, which would drag every row below it out of line. */ .field--narrow .input, .field--narrow .select { max-width: 190px; } @media (max-width: 760px) { .field--narrow .input, .field--narrow .select { max-width: none; } } .field__label { font-size: 12.5px; font-weight: 550; color: var(--text-2); display: flex; align-items: center; gap: 4px; } .field__label .req { color: var(--brand); } .field__hint { font-size: 11.5px; color: var(--text-4); } .field__error { font-size: 11.5px; color: var(--danger); font-weight: 500; } /* ── A field's hint, behind an icon ───────────────────────────────────────── Hints used to be a line of grey prose under the field. Read once, then furniture — and a row of vertical space on every form for ever, on forms that are already long. Behind an icon it is there for whoever wonders. Hover *and* focus, because the icon is in the tab order: a hint only a mouse can reach is a hint half the operators never see. `cursor: help` is what tells a mouse it is worth stopping on. The bubble is positioned from the icon rather than the field so it points at what it explains, and it is `left: 50%` translated back by half its own width only when there is room — a hint on the first column of a grid would otherwise hang off the left edge of the dialog. That is why it anchors left instead: predictable beats centred. */ .field__info { position: relative; display: inline-flex; align-items: center; color: var(--text-4); cursor: help; } .field__info > svg { width: 13px; height: 13px; flex: 0 0 13px; } .field__info:hover, .field__info:focus-visible { color: var(--brand); } .field__info:focus { outline: none; } .field__info:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 50%; } /* The bubble itself lives on , teleported and positioned from the icon (see `useAnchoredTip`): as a child of the field it was painted under a dialog's header and clipped by the dialog's scrolling body, and neither is a z-index question. Above the modal layer (100) and the full-screen map (120), because a hint is asked for from inside both. */ .tip { position: fixed; z-index: 140; padding: 7px 9px; border-radius: var(--r-sm); background: var(--tooltip-bg); color: var(--tooltip-ink); font-size: 12px; font-weight: 450; line-height: 1.4; letter-spacing: 0; text-transform: none; white-space: normal; text-align: left; box-shadow: var(--shadow-lg); pointer-events: none; } .input, .select, .textarea { width: 100%; min-width: 0; height: 36px; padding: 0 11px; background: var(--surface); color: var(--text); border: 1px solid var(--border-2); border-radius: var(--r-sm); font-size: 13.5px; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .textarea { height: auto; min-height: 76px; padding: 9px 11px; resize: vertical; line-height: 1.55; } .input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); } .input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-3); color: var(--text-4); cursor: not-allowed; } .input.is-invalid, .select.is-invalid { border-color: var(--danger); } .input--mono { font-family: var(--mono); letter-spacing: .01em; } /* No spinner on a number field, anywhere. Defensive rather than corrective: `TextInput` renders a grouped numeric field as `type="text"` (see `grouped` there), so today nothing in the application draws a spinner at all — only a field passing `raw`, and nothing does. The rule is here so the escape hatch is safe by default, and because nobody sets a price, a weight or a box's height by clicking a 9px arrow. Both spellings are needed — `appearance` for Firefox, the two pseudo-elements for Chrome and Safari, which ignore it on this control. */ input[type="number"] { -moz-appearance: textfield; appearance: textfield; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .select { appearance: none; padding-right: 30px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; } /* ── Date range ───────────────────────────────────────────────────────────── One field for a period, with the month on a popover. The field is a button wearing `.input` so it lines up with the real inputs beside it in a filter row without inheriting their text-entry behaviour. */ .daterange { position: relative; } .daterange__field { display: flex; align-items: center; gap: 7px; cursor: pointer; text-align: left; color: var(--text-4); } .daterange__field.is-set { color: var(--text); } .daterange__field > svg { flex: 0 0 auto; color: var(--text-4); } .daterange__clear { flex: 0 0 auto; padding: 0 2px; color: var(--text-4); font-size: 15px; line-height: 1; } .daterange__clear:hover { color: var(--danger); } .daterange__pop { position: absolute; z-index: 60; top: calc(100% + 5px); left: 0; min-width: 258px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 8px; animation: fadeUp .12s ease both; } .daterange__head { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; } .daterange__month { flex: 1; text-align: center; font-size: 13px; font-weight: 600; text-transform: capitalize; } .daterange__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; } .daterange__grid--head span { text-align: center; font-size: 10.5px; font-weight: 600; text-transform: uppercase; color: var(--text-4); padding-bottom: 3px; } .daterange__day { height: 30px; border: 0; background: none; color: var(--text); cursor: pointer; font-size: 12.5px; border-radius: var(--r-xs); font-variant-numeric: tabular-nums; } .daterange__day:hover { background: var(--surface-3); } .daterange__day.is-outside { color: var(--text-4); } /* The span between the two ends is tinted, the ends themselves are solid — so half a selection still reads as "from here to wherever you go next". */ .daterange__day.is-in { background: var(--brand-soft); border-radius: 0; } .daterange__day.is-edge { background: var(--brand); color: #fff; font-weight: 600; } .daterange__day.is-today:not(.is-edge) { box-shadow: inset 0 0 0 1px var(--border-strong); } .daterange__foot { display: flex; align-items: center; gap: 4px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); } .input-group { display: flex; align-items: stretch; } .input-group .input { border-radius: var(--r-sm) 0 0 var(--r-sm); } .input-group__addon { display: inline-flex; align-items: center; padding: 0 11px; background: var(--surface-3); border: 1px solid var(--border-2); border-left: none; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 12.5px; color: var(--text-3); white-space: nowrap; } .checkbox, .radio { display: inline-flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: 13.5px; } .checkbox input, .radio input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--brand); flex: 0 0 16px; cursor: pointer; } .checkbox span, .radio span { user-select: none; } .switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch__track { width: 36px; height: 20px; border-radius: var(--r-full); background: var(--border-2); position: relative; transition: background var(--t-fast); flex: 0 0 36px; } .switch__track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--t-fast); } .switch input:checked + .switch__track { background: var(--brand); } .switch input:checked + .switch__track::after { transform: translateX(16px); } .switch input:focus-visible + .switch__track { box-shadow: var(--ring); } .form-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .form-grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* A fixed column count, for fields that belong together and have to stay on one line. `auto-fit` decides for itself and will break the row the moment the panel narrows — which is right for a long form and wrong for a set of three fields that are read as one sentence. Collapses to a single column on a phone, where one line is not achievable and not desirable. */ /* One column, explicitly — for a `.form-grid` that would otherwise auto-fit a lone field across the full width and leave it stretched. */ .cols-1 { grid-template-columns: minmax(0, 1fr); } .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } /* Weighted variants, where one field genuinely needs more room than its neighbours — a street address beside a flat number. */ .cols-2--wide-first { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } /* The mirror, for a fixed-width thing beside a variable one — a four-digit branch code and the street it is on. */ .cols-2--wide-last { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .cols-3--wide-mid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); } /* The pickup window row — date, the two ends of the window, the two counts. Five equal columns starve the first: a native date control needs ~140px to show dd.mm.yyyy beside its calendar button and a time ~95px, so an even split cuts the year off on a laptop. Weighted with floors instead. Those five want ~507px including gaps, and the booking column is narrower than that until roughly 1260px of viewport — so below that the row is let go rather than forced, auto-fit packing as many as genuinely fit at the date's own width. Forcing it there does not shrink the row, it overflows the card. */ .form-grid--window { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } @media (min-width: 1260px) { /* Six on one line: date, the window's two ends, the two counts and the channel the call came in on. The channel sits beside the weight rather than wrapping to a row of its own under the date, where it lined up with nothing. It gets the widest minimum of the six because it holds words («Мобильное приложение») where the others hold numbers. */ /* The date is a fixed-width control — the browser draws `type="date"` at the size of `дд.мм.гггг` and a calendar button, and it does not grow to fill a wider cell. It used to take the widest share of the row, which bought a gap to the right of the picker and squeezed the two counts beside it. It is now the narrowest of the six that holds a real value, and the room went to the fields whose contents actually vary in length. */ .form-grid--window { grid-template-columns: minmax(126px, .95fr) repeat(2, minmax(88px, .9fr)) repeat(2, minmax(0, .62fr)) minmax(120px, 1.35fr); } /* Seven, when the dispatcher may also name the courier. The courier is last and takes the largest share by a distance: it is the only cell on the row holding a person's name, and a name elided to «Абдулла…» defeats the point of choosing from a list. What it takes, the two estimates give up — «Мест» and «Вес (кг)» hold three characters each and had a full share apiece, so a number sat in the left third of a cell with two thirds of white space beside it. They are the narrowest of the seven now, which is the shape of what they contain. */ .form-grid--window--courier { grid-template-columns: minmax(122px, .85fr) repeat(2, minmax(84px, .78fr)) repeat(2, minmax(0, .52fr)) minmax(112px, 1.1fr) minmax(190px, 2fr); } } /* Between the tablet break and the one-line width the row wraps and the columns go back to being equal. Deliberately left alone: `max-width` on a grid item narrows the control and not the track, so capping the two estimates there would buy the gap this block's opening comment exists to warn about. Below 1260px the row is not one line and the widths are not what is being read. */ @media (max-width: 760px) { .cols-2, .cols-3, .cols-4, .cols-5, .cols-6, .cols-2--wide-first, .cols-2--wide-last, .cols-3--wide-mid, .form-grid--window { grid-template-columns: 1fr; } } /* `.pay-row__top` is deliberately **not** in the list above. Its second column is a fixed 124px rather than a share, so it does not starve on a narrow screen the way a fraction does — and the pair is «касса and how much», which is one thought and worth keeping on one line where it fits at all. */ .form-row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; } @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } } .span-2 { grid-column: span 2; } /* Wider spans, for a grid whose columns are a unit rather than a field each — `.cols-4` with a 3+1 row over two 2+2 rows, which is how a form gets a 75/25 split on one line and an even one on the next without a second grid. */ .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } /* Where the grid itself collapses to one column, a span has nothing to span. */ @media (max-width: 760px) { .span-3, .span-4 { grid-column: auto; } } @media (max-width: 640px) { .span-2 { grid-column: auto; } } /* The whole row, however many columns `auto-fit` decided on. `span 2` only guesses at that, and a wrong guess leaves the next field stranded at the end of the row instead of at the start of the next one. */ .span-full { grid-column: 1 / -1; } /* Break the row before this field without knowing how many columns `auto-fit` settled on: pinning it to column 1 makes auto-placement drop to the next row whenever column 1 of the current one is taken. Use it to keep two groups of fields apart in one grid — the account block and the person at the door — where a wide screen already separates them and a narrow one runs them together. A no-op when the field would have started the row anyway. */ .row-start { grid-column: 1; } .fieldset { border: 1px solid var(--border); border-radius: var(--r); padding: 14px; } .fieldset__legend { font-size: 12px; font-weight: 620; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); padding: 0 6px; } /* A tinted fieldset — the two ends of a route on the quote screen. Written with both classes because `.fieldset` sets the `border` shorthand further down the file and would otherwise reset the tinted border-color. Same `--party-*` tokens the register and the detail cards use, so blue is always where it came from and green always where it is going, in both themes. */ .fieldset.party-block--from { background: var(--party-from); border-color: var(--party-from-border); } .fieldset.party-block--to { background: var(--party-to); border-color: var(--party-to-border); } .fieldset.party-block--from .fieldset__legend, .fieldset.party-block--to .fieldset__legend { color: var(--text-2); } /* -------------------------------------------------------------------------- 8. Tables -------------------------------------------------------------------------- */ /* The strip above a table that carries the column picker. Right-aligned and sitting on the table's own border, so it reads as part of the table rather than as another row of page actions. */ .table-tools { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); } /* When the strip also carries the page's own controls it stops being a utility strip and becomes the page's single toolbar row, so it takes `.toolbar`'s metrics and its plain background — the filters are the row's main content now, not an accessory to the table. */ .table-tools--bar { justify-content: flex-start; flex-wrap: wrap; gap: 9px; padding: 12px 16px; background: transparent; } /* An auto margin, not a flex-grow: `.search` is `flex: 1` with a 380px cap, and a growing spacer would split the free space with it and leave the search box short of its own maximum. This lets the search fill first and swallows only what is left over. */ .table-tools__spacer { flex: 0 0 0; margin-inline-start: auto; } /* Wider than an ordinary dropdown: these are column names, and truncating them defeats the point of choosing between them. Capped in height because a register has thirty-five, and scrolled inside itself so the page does not move under the menu. */ .col-picker { width: 260px; } .col-picker__list { max-height: 320px; overflow-y: auto; padding: 4px; } .col-picker__item { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer; font-size: 13px; } .col-picker__item:hover { background: var(--surface-3); } .col-picker__item input { width: 15px; height: 15px; accent-color: var(--brand); flex: 0 0 15px; cursor: pointer; } .col-picker__foot { display: flex; gap: 4px; padding: 5px; border-top: 1px solid var(--border); } .col-picker__foot .btn { flex: 1; } /* A boxed explanation inside a form — what is about to happen, stated before the button is pressed. Tinted by tone, but the icon and the wording carry the meaning; the colour only reinforces it. */ .callout { display: flex; gap: 11px; align-items: flex-start; padding: 11px 13px; border-radius: var(--r); font-size: 13px; border: 1px solid var(--border); background: var(--surface-2); } .callout > svg { flex: 0 0 auto; margin-top: 1px; } .callout--info { background: var(--info-soft); border-color: var(--info-border); color: var(--text); } .callout--info > svg { color: var(--info); } .callout--warning { background: var(--warning-soft); border-color: var(--warning-border); color: var(--text); } .callout--warning > svg { color: var(--warning); } /* The band linking a waybill to the return leg carrying it back, shown at the top of either one. Brand-tinted rather than semantic: a return is a normal part of the business, not a warning. */ .rto-link { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--r); background: var(--brand-soft); border: 1px solid var(--brand-border); color: var(--text); font-size: 13.5px; } .rto-link > svg { color: var(--brand); flex: 0 0 auto; } /* One suggestion from the phone-number lookup: a whole row is the target, not a link inside it, because the operator is choosing a person rather than following a reference. */ .party-suggest { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); } .party-suggest:hover { background: var(--brand-soft); border-color: var(--brand-border); } .party-suggest > svg { color: var(--text-4); flex: 0 0 auto; } /* The report index: what «Отчёты» itself opens. Cards rather than a list, because choosing a report is mostly reading the descriptions — the name alone does not tell anyone whether «Уровень сервиса» answers their question. */ .section-title { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin: 0 0 10px; } .report-card { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; padding: 14px; cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .report-card:hover { border-color: var(--brand-border); box-shadow: var(--shadow-sm); } .report-card__icon { flex: 0 0 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-content: center; background: var(--brand-soft); color: var(--brand); } .report-card__name { display: block; font-weight: 600; font-size: 13.5px; color: var(--text); } .report-card__desc { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; line-height: 1.4; } .report-card > svg:last-child { color: var(--text-4); flex: 0 0 auto; } /* Document change log. One collapsed row per change; opening it shows the fields that moved with the old value beside the new one. The before/after columns are tinted rather than labelled by colour alone — the heading row says which is which, and the tint only reinforces it. */ .chg { border-bottom: 1px solid var(--border); } .chg:last-child { border-bottom: 0; } .chg__head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 4px; background: none; border: 0; cursor: pointer; font: inherit; font-size: 13px; color: var(--text); text-align: left; } .chg__head:hover { background: var(--surface-2); } /* A comment's header is not a button — nothing opens — so it must not light up under the cursor the way a change entry does. */ .chg__head--static { cursor: default; } .chg__head--static:hover { background: none; } /* The comment itself (migration 057). `pre-wrap` because a note is typed with its own line breaks and a courier's three-line instruction collapsed into one paragraph is materially harder to read at a door. */ .chg__body { margin: 0 0 10px; padding: 0 4px; font-size: 13px; line-height: 1.5; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; } .chg__when { color: var(--text-3); font-size: 12.5px; white-space: nowrap; } .chg__who { color: var(--text-2); font-weight: 550; } .chg__move { font-size: 12px; color: var(--text-2); } .chg__diff { width: 100%; font-size: 12.5px; margin: 0 0 10px; border-collapse: collapse; } .chg__diff th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-3); font-weight: 600; padding: 5px 8px; border-bottom: 1px solid var(--border); } .chg__diff td { padding: 5px 8px; border-bottom: 1px solid var(--border); vertical-align: top; word-break: break-word; max-width: 260px; } .chg__old { background: var(--danger-soft); color: var(--text-2); text-decoration: line-through; } .chg__new { background: var(--success-soft); color: var(--text); font-weight: 550; } .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table { font-size: 13px; min-width: 100%; } .table th { text-align: left; font-weight: 600; font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; color: var(--text-3); padding: 5px 14px; background: var(--thead-bg); border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; z-index: 2; } .table th.is-sortable { cursor: pointer; user-select: none; } .table th.is-sortable:hover { color: var(--text); } .table th .sort-ind { opacity: .45; margin-left: 3px; } .table th.is-sorted .sort-ind { opacity: 1; color: var(--brand); } /* ── Row density ─────────────────────────────────────────────────────────── Vertical padding only; the horizontal stays, because columns need their gutters however tight the rows are. 4px rather than the old 10px. A document row is two lines of content (a name over a phone, 19.5px each), so the padding was carrying a quarter of the row height for nothing — an operator scanning a hundred waybills wants more of them on screen, not more air between them. The three tiers move together so the ladder stays ordered: a table marked `--compact` must not end up taller than a plain one. Below the default they are separated by line-height and font-size as much as by padding, which is why 3px and 2px still read as different densities. ------------------------------------------------------------------------ */ .table td { padding: 4px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; } .table tbody tr { transition: background var(--t-fast); } /* One row height across the ordinary lists, whatever a particular cell holds. Padding alone does not give you that: a cell with two lines in it — a name over a phone, a total over its COD — is 46px tall, and a list of single-line cells came out at 28. Moving between /shipments and /returns, /manifests or /runs, the rows visibly changed size for no reason a reader could name. A minimum on the row settles it in the direction of the taller table, since a two-line cell cannot be made shorter and a one-line row can be given room. It is a *minimum*: a taller cell still sets its own row's height. Compact and dense opt out by construction — they exist to be denser than this, and a minimum applied to them would erase the distinction. */ .table:not(.table--compact):not(.table--dense) tbody tr { height: 46px; } .table tbody tr:hover { background: var(--surface-2); } .table tbody tr.is-clickable { cursor: pointer; } /* A row that opens on a *double* click. A pointer would promise that one click does something and it does not — `cell` is the cursor a spreadsheet uses for exactly this, and it is the one people already read as "click to select". */ .table tbody tr.is-selectable { cursor: cell; } .table tbody tr:last-child td { border-bottom: none; } .table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .table .mono { font-family: var(--mono); font-size: 12.5px; } .table .nowrap { white-space: nowrap; } .table__actions { display: flex; gap: 4px; justify-content: flex-end; } /* One payment on the booking form's rail (085). A rule between the rows rather than a box around each: they are a list of one kind of thing, and a card per payment in a 340px rail is three borders to say what one line does. */ .pay-row + .pay-row { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px; } /* Касса and сумма on one line, with the sum given a fixed column rather than a share of one. A share of a 340px rail is ~90px, and a grouped sum is wider than its digits — «100 000» carries a separator — so it came out as «100 00», the one kind of truncation this form cannot have, because the figure is read back to a customer. 124px holds seven digits and their groups. The касса takes what is left and truncates instead: a select keeps its full value one click away, a number does not. */ .pay-row__top { grid-template-columns: minmax(0, 1fr) 124px; } /* The row's own mark (094), above its controls rather than beside them: the rail is 340px and the line below is already a select and a sum that need every pixel they have. It reads as a heading for the row, which is what it is — «эта строка Payme» — and it is the one place a mark sits over a control that repeats its name, because the select is what sets the till and this is what an operator checks three rows by without reading three dropdowns. */ .pay-row__mark { margin-bottom: 6px; } /* An icon button beside a field never gives up its 36px — the field next to it is what absorbs a narrow rail. Without this the browser shrinks both in proportion and the glyph ends up off-centre in a squashed box. */ .row > .btn--icon { flex: 0 0 auto; } /* A totals row under a table's own column, where the eye already is — the pieces table sums its «Факт., кг» there rather than in a sentence below the table. `:last-child td { border-bottom: none }` above has already taken the rule off the last body row, so the footer supplies its own top border; it is the strong one, because the line is what separates a total from the rows it totals rather than one row from the next. */ .table tfoot td { border-top: 1px solid var(--border-strong); border-bottom: none; } .table--compact td { padding: 3px 12px; } .table--compact th { padding: 3px 12px; } /* A step below compact, for a register read as a block of data. The line-height comes down with the padding — leaving it at the body's 1.5 keeps the row tall however little padding it has. */ .table--dense td { padding: 2px 9px; font-size: 12.5px; line-height: 1.35; } .table--dense th { padding: 2px 9px; } /* A tenth taller than the padding and line-height alone produce (22px → 24px). The register is read for minutes at a time down a column of thirty-odd, and at 22 the rows ran together; the point of `dense` is to fit more on screen, not to make a line hard to keep your place in. Set on the row rather than as more padding so the numbers stay vertically centred in the taller cell. */ .table--dense tbody tr { height: 24px; } .table--dense .badge { padding: 0 5px; font-size: 10.5px; } /* ── A table whose cells are fields ───────────────────────────────────────── The pieces on the booking form: six short values a row, every one of them typed. With the ordinary `.input` chrome each cell became a box inside a box — a ten-piece booking drew sixty borders, and the table's own grid disappeared underneath them. So the field is flat until it is pointed at. The column headings and the row rules carry the structure, which is what a table is for; the border comes back on hover and on focus, where it is not decoration but the answer to "which cell am I in?". Transparent rather than `border: 0`, so nothing moves by a pixel when it appears. The horizontal padding is split between the cell and the input — 8 + 4 — so the text starts at the same 12px as the heading above it. Change one and change the other, or the columns stop lining up with their names. */ .table--fields td { padding: 2px 8px; } .table--fields td .input, .table--fields td .select { height: 30px; padding: 0 4px; background-color: transparent; border-color: transparent; } .table--fields td .select { padding-right: 22px; background-position: right 3px center; } .table--fields td .input:hover, .table--fields td .select:hover { background-color: var(--surface); border-color: var(--border-2); } .table--fields td .input:focus, .table--fields td .select:focus { background-color: var(--surface); border-color: var(--brand); } /* The row highlight would otherwise show through the fields and make a hovered row look like six half-lit boxes. */ .table--fields tbody tr:hover { background: none; } /* Line number: a gutter, not data. Narrow, dim, and never the thing the eye lands on first. */ .table th.table__num, .table td.table__num { width: 1%; white-space: nowrap; text-align: right; color: var(--text-4); font-variant-numeric: tabular-nums; border-right: 1px solid var(--border); } /* Keyboard cursor. The row tints and the cell outlines: the row says where you are down the register, the cell says which column you are reading across it, which is the pair you lose when a table is wider than the screen. `inset` so the outline cannot be clipped by the scroll container. */ .table tbody tr.is-cursor-row { background: var(--surface-2); } .table td.is-cursor { box-shadow: inset 0 0 0 2px var(--brand); border-radius: 2px; } .table-wrap:focus { outline: none; } .table-wrap:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } /* ── Filter row ───────────────────────────────────────────────────────────── A second row of inputs, one under each heading. Both rows stick, so the heading row's height has to be a known quantity rather than whatever the text wrapped to — hence the fixed height on the headings and the matching offset on the filters. Change one, change the other. */ /* `fixed` so the stated column widths are honoured rather than negotiated: a register is read by scanning down a column, and a column that changes width with its contents cannot be scanned. It also makes the ellipsis below work — a cell only clips when its width was decided before its text. */ .table--filtered { --thead-h: 34px; table-layout: fixed; } .table--filtered thead th { height: var(--thead-h); padding-block: 0; z-index: 3; } .table--filtered tbody td, .table--filtered thead th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* A heading longer than its column clips rather than wraps — the two header rows are both sticky, so their height has to stay the fixed quantity the filter row's `top` is measured against. The full text is in the tooltip. */ .table--filtered thead th .sort-ind { float: right; } .table__filters td { position: sticky; top: var(--thead-h); z-index: 2; padding: 5px 8px; background: var(--thead-bg); border-bottom: 1px solid var(--border-2); vertical-align: middle; } /* The controls inside are deliberately small — thirty of them across one row, and every pixel of height is a row of data pushed off the screen. */ .table__filters .input, .table__filters .select { height: 28px; padding: 0 8px; font-size: 12px; min-width: 0; width: 100%; background: var(--surface); } .table__filters .select { padding-right: 22px; background-position: right 5px center; } /* Two boxes side by side (a from/to pair) still have to fit the column. */ .table__filters .filter-pair { display: flex; gap: 4px; } /* A tinted column keeps its tint in the filter row too, or the stripe breaks exactly where the eye is following it down the table. */ .table__filters td.party-cell--from { background: var(--party-from); } .table__filters td.party-cell--to { background: var(--party-to); } .pagination { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 16px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-3); } .pagination__spacer { flex: 1; } /* -------------------------------------------------------------------------- 9. Badges, chips, pills -------------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--r-full); font-size: 11.5px; font-weight: 550; line-height: 1.5; background: var(--neutral-soft); color: var(--text-2); border: 1px solid transparent; white-space: nowrap; } .badge--success { background: var(--success-soft); color: var(--success); border-color: var(--success-border); } .badge--warning { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); } .badge--danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); } .badge--info { background: var(--info-soft); color: var(--info); border-color: var(--info-border); } .badge--brand { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-border); } .badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 6px; } /* Yes/no cells in a table. A column of "Да"/"Нет" in one weight reads as a wall of text — you have to go word by word to find the rows that are on. Weight and colour carry "yes" so the eye can scan the column; "no" recedes to the muted text colour rather than turning red, because it is the ordinary case, not a fault. Both tokens flip with the dark theme, so the contrast holds either way. */ .bool--yes { font-weight: 700; color: var(--success); } .bool--no { color: var(--text-3); } /* For a flag where "yes" is the bad news — a refusal, a breach. The eye should land on the exception, not on the forty rows that are fine. */ .bool--alert { font-weight: 700; color: var(--danger); } .chips { display: flex; gap: 7px; flex-wrap: wrap; } .chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border-2); font-size: 12.5px; font-weight: 500; color: var(--text-2); transition: all var(--t-fast); cursor: pointer; } .chip:hover { border-color: var(--border-strong); color: var(--text); } .chip.is-active { background: var(--brand-soft); border-color: var(--brand-border); color: var(--brand); font-weight: 600; } .chip__count { font-size: 11px; font-weight: 650; opacity: .7; font-variant-numeric: tabular-nums; } /* Prominent pill tabs — larger, clearer than chips; used to switch catalogues. */ .tab-pills { display: flex; gap: 8px; flex-wrap: wrap; } .tab-pill { display: inline-flex; align-items: center; height: 38px; padding: 0 17px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border-2); font-size: 14px; font-weight: 550; color: var(--text-2); transition: all var(--t-fast); cursor: pointer; } .tab-pill:hover { border-color: var(--border-strong); color: var(--text); } .tab-pill.is-active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 640; } /* ── Returns panel, document attachments, signature capture ─────────────────── */ .retrow { padding: 11px 0; border-top: 1px solid var(--border); } .retrow:first-child { border-top: 0; padding-top: 2px; } .rr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .rr-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } /* Also used on a