` — JSON-список действий,
строится на Python-стороне (см. app/static/js/row_actions.js). Перевод
идёт постранично, полное удаление `.act-col` — только когда переведены
ВСЕ таблицы (см. main.css выше, «Единая система табличных списков»). */
tr.row-actions-trigger {
cursor: pointer;
}
/* `.dt-note`/`.exp-name-cell` были заведены ДО модалки действий строки —
тогда это были некликабельные текстовые ячейки с обрезкой+tooltip,
`cursor: default` был корректен. У них есть СВОЙ явный cursor на `| `,
он специфичнее и локально побеждает `tr.row-actions-trigger` — курсор
над этими ячейками оставался стрелкой, хотя клик там уже открывает
модалку (реальный баг, найден пользователем 2026-08-09). Правило ниже
специфичнее `.dt-table td.dt-note`/`.exp-name-cell` (та же пара
класс+класс, но плюс тип `tr.row-actions-trigger` — выше вес). */
tr.row-actions-trigger td.dt-note,
tr.row-actions-trigger td.exp-name-cell {
cursor: pointer;
}
.row-action-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: .4rem;
border: 0;
background: none;
padding: .6rem .5rem;
min-width: 76px;
border-radius: .5rem;
cursor: pointer;
}
.row-action-btn:hover,
.row-action-btn:active {
background: var(--bs-tertiary-bg, rgba(127,127,127,.12));
}
.row-action-btn i {
font-size: 1.65rem;
line-height: 1;
}
.row-action-btn span {
font-size: .72rem;
color: var(--bs-body-color);
text-align: center;
line-height: 1.15;
max-width: 84px;
}
.dt-resize-handle {
position: absolute;
top: 0;
right: -3px;
bottom: 0;
width: 6px;
cursor: col-resize;
z-index: 3;
}
.dt-resize-handle:hover,
.dt-resize-handle.resizing {
background: rgba(var(--accent-rgb), .35);
}
@media (max-width: 767.98px) {
.dt-resize-handle { display: none; }
}
/* ── Tooltip (иконка/заголовок колонки/обрезанная запись) и popover
(пояснение по "!") — СОЗНАТЕЛЬНО РАЗНЫЕ по цвету, не путать — 2026-08-11,
прямая правка пользователя после первой попытки. Popover уже штатно
следует переменным страницы (--bs-body-bg/--bs-body-color, см. bootstrap.
min.css) — тёмный фон/светлый текст в тёмной теме, светлый фон/тёмный
текст в светлой, трогать не нужно. Tooltip штатно ИНВЕРТИРУЕТ контраст
относительно страницы (--bs-tooltip-bg: var(--bs-emphasis-color) —
светлый фон/тёмный текст в тёмной теме, тёмный фон/светлый текст в
светлой) — это и есть привычный вид «как было», никакого переопределения
не требуется, здесь нарочно НЕТ кастомных `--bs-tooltip-*`. Источник
разнобоя был не в цвете, а в том, что ` | ` (и вообще любой
`title=`) без `data-bs-toggle="tooltip"` рядом заставляет браузер рисовать
СВОЙ нативный тултип (мелкая квадратная рамка, системный шрифт) вместо
штатного Bootstrap — при добавлении новой подсказки ОБЯЗАТЕЛЕН
`data-bs-toggle="tooltip"` рядом с `title`, см. «Соглашения по коду». ── */
/* ── Квадратные icon-only кнопки в шапке страницы (подсказка по наведению) ── */
.btn-icon-square {
width: 34px;
height: 34px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
font-size: 1rem;
}
/* ── Попап-фото водителя при наведении («Кто сегодня работает»), 2026-08-01 ── */
.roster-hover-photo {
display: block;
width: 90px;
height: 110px;
object-fit: cover;
border-radius: 6px;
margin: 0 auto;
}
.roster-hover-photo--empty {
display: flex;
align-items: center;
justify-content: center;
background: var(--bs-secondary-bg-subtle);
color: var(--bs-secondary-color);
font-size: 2.2rem;
}
/* ── Фильтры ── */
.filter-bar {
background: var(--bs-tertiary-bg);
border-radius: var(--border-radius);
padding: .75rem 1rem;
margin-bottom: 1.25rem;
}
/* ── Форма смены (полная страница) ── */
.shift-section {
border-left: 3px solid var(--bs-secondary-border-subtle);
padding-left: 1rem;
margin-bottom: 1.5rem;
}
.shift-section-title {
font-weight: 600;
font-size: .9rem;
text-transform: uppercase;
letter-spacing: .05em;
margin-bottom: .75rem;
color: var(--bs-secondary);
}
/* ── Ссылки на чеки ── */
.receipt-link {
font-size: .85rem;
word-break: break-all;
}
/* ── Прямая загрузка чека/фото (Фаза 5) ── */
.receipt-upload-manual.receipt-upload-dimmed {
opacity: .45;
pointer-events: none;
}
.receipt-upload-controls .receipt-preview-img {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 4px;
border: 1px solid var(--bs-border-color);
}
/* ── Карточка баланса ── */
.balance-positive { color: var(--income-color); font-weight: 600; }
.balance-negative { color: var(--expense-color); font-weight: 600; }
/* ── Отчёты ── */
.chart-container {
position: relative;
height: 320px;
}
/* ── Навигация «хлебные крошки» и заголовок страницы ── */
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.25rem;
flex-wrap: wrap;
gap: .5rem;
}
.page-header h1, .page-header h2 {
margin: 0;
font-size: 1.4rem;
font-weight: 700;
}
/* ── Выходной / праздник строки смены ── */
.shift-weekend { background-color: rgba(255, 193, 7, .08) !important; }
.shift-holiday { background-color: rgba(220, 53, 69, .08) !important; }
/* ── Панель «Настройки интерфейса» (a-la Tabler Theme Settings, 2026-07-24) ── */
.ui-accent-swatch {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
padding: 0;
}
.ui-accent-swatch.active {
border-color: var(--bs-body-color);
}
/* Широкая ширина страницы — просто увеличенный max-width тех же трёх
контейнеров, что уже центрируются на 1100px, ничего в разметке не
меняется. */
html[data-layout="wide"] .site-header,
html[data-layout="wide"] .icon-nav-inner,
html[data-layout="wide"] main.site-main {
max-width: 1400px;
}
/* Боковая навигация — ТОЛЬКО ПРЕДПРОСМОТР, чисто CSS-переключение без
переделки разметки: существующий .icon-nav становится фиксированной
левой панелью, .site-header/main.site-main сдвигаются под неё через
padding-left на body (сами они как центрировались max-width+auto margin,
так и продолжают — просто в уменьшенной с одной стороны области).
Только для экрана ≥768px — на мобильном верхняя иконочная строка не
трогается вообще, там боковая панель не имеет смысла. */
@media (min-width: 768px) {
html[data-nav="sidebar"] body {
padding-left: 76px;
}
html[data-nav="sidebar"] .icon-nav {
position: fixed;
top: 156px; /* высота .site-header (150px) + её верхний отступ (6px) —
иначе сайдбар наезжает на шапку/лого (реальный баг,
найден и исправлен 2026-07-24) */
left: 0;
bottom: 0;
width: 76px;
border-bottom: none;
border-right: 1px solid var(--bs-border-color);
overflow-y: auto;
z-index: 1030;
}
html[data-nav="sidebar"] .icon-nav-inner {
flex-direction: column;
flex-wrap: nowrap;
max-width: none;
margin: 0;
padding: 1rem .5rem;
}
}
/* ─────────────── МОБИЛЬНЫЕ ─────────────── */
@media (max-width: 767.98px) {
.site-header { height: 90px; border-radius: 0; }
.header-logo:not(.header-logo--full) img { height: 90px; }
.icon-nav-inner {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.icon-nav-inner::-webkit-scrollbar { display: none; }
main.site-main {
padding-left: .75rem;
padding-right: .75rem;
}
/* Шрифт таблиц */
.table { font-size: .82rem; }
/* KPI в 2 колонки */
.kpi-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .75rem;
}
.kpi-value { font-size: 1.4rem; }
/* Скрываем лишние колонки в таблице */
.d-mob-none { display: none !important; }
/* Фильтр — стэк */
.filter-bar .row > * { margin-bottom: .5rem; }
/* Полные кнопки на мобиле — долгое нажатие перетаскивает в любое место
экрана (fab_drag.js, 2026-08-05), позиция запоминается per-страница */
.btn-add-mobile {
position: fixed;
bottom: 1.25rem;
right: 1.25rem;
z-index: 1050;
border-radius: 50%;
width: 3.25rem;
height: 3.25rem;
font-size: 1.4rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,.25);
touch-action: none;
user-select: none;
-webkit-user-select: none;
}
.btn-add-mobile.fab-dragging {
box-shadow: 0 8px 24px rgba(0,0,0,.4);
transform: scale(1.12);
opacity: .92;
}
/* Вторая плавающая кнопка (QR-чек, my_expenses, 2026-08-12) — цвет НЕ
хардкодится, а вычисляется как комплементарный к текущему акценту
пользователя через hue-rotate(180deg) поверх var(--accent) (тот же
единственный источник, что и --bs-primary-rgb) — следует за любой
сменой темы автоматически, без JS. По умолчанию стоит стопкой НАД
обычной кнопкой (bottom смещён на высоту кнопки+зазор), обе
перетаскиваются независимо (data-fab-id, см. fab_drag.js). */
.btn-qr-mobile {
bottom: 5.5rem;
background: var(--accent);
filter: hue-rotate(180deg);
color: #fff;
border-color: transparent;
}
/* Форма — метки сверху */
.form-label { font-size: .88rem; }
/* Chart */
.chart-container { height: 240px; }
/* Page header стэк. Компаунд-селектор `.page-header.justify-content-
between` (не голый `.page-header`) — сознательно: часть шаблонов
вешает на ТОТ ЖЕ элемент бутстраповские `d-flex justify-content-
between align-items-center` (сами с !important), эти страницы и есть
цель фикса — без !important здесь Bootstrap выигрывал, заголовок
оставался по центру вместо левого края (2026-08-04, sick_leaves/
vacations/shift_swaps/route_assignments/work_schedule и другие).
Другой, более простой паттерн шапки — «стрелка назад + заголовок»
(`.page-header d-flex align-items-center gap-2`, БЕЗ justify-content-
between) — НЕ содержит класс `.justify-content-between` вообще,
поэтому этим правилом не затрагивается: там колонка сломала бы
верстку (стрелка над заголовком вместо рядом). */
.page-header.justify-content-between {
flex-direction: column !important;
align-items: flex-start !important;
}
/* Кнопочные ряды в шапке страницы (действия: добавить/экспорт/фильтры-
переключатели и т.п.) — на мобильном раньше при нехватке ширины
переносились НОВОЙ СТРОКОЙ (Bootstrap `.flex-wrap`) и, из-за
`align-items:flex-start` на самом `.page-header`, каждая обёртка-
строка кнопок сама по себе сжималась под контент и визуально
«пирамидой» съезжала — набор кнопок разной ширины на разных
перенесённых строках. Прямое требование пользователя: кнопки не
должны «вставать друг на друга и центроваться» — вместо переноса
строкой ряд остаётся в ОДНУ строку и скроллится пальцем по
горизонтали (тот же приём, что уже применяется к верхней навигации
`.icon-nav-inner`), кнопки не сжимаются (`flex-shrink:0`), поэтому
сохраняют комфортный размер под палец независимо от их числа.
Затрагивает дочерние `.d-flex`-обёртки `.page-header` — это
стандартный, повсеместный паттерн проекта (84 шаблона), нестандартные
собственные заголовки страниц (`places/index.html` и т.п.) размечены
тем же классом `.mob-btn-row` вручную. ПК (`min-width:768px`) не
затронут — правило целиком внутри мобильного `@media`. */
.page-header > .d-flex,
.mob-btn-row {
flex-wrap: nowrap !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
max-width: 100%;
/* align-self:stretch — тикеты №55/№56 (2026-09-05): без него, под
`align-items:flex-start` родителя-`.page-header`, ЭТОТ ряд как
flex-item сам сжимается до собственного fit-content-размера — а
тот, эмпирически проверено, у flex-контейнера с overflow-x:auto
получается МЕНЬШЕ суммы детей (select+button, сумма 262px, реальный
fit-content — 236px, разница ровно с последний видимый элемент
наполовину обрезан). Растягивание на всю ширину `.page-header`
устраняет это самостоятельно — если контент ряда короче доступной
ширины (обычный случай: 1-2 селекта + иконка), он теперь весь
помещается БЕЗ горизонтального скролла; если контент шире (много
вкладок Центра контроля и т.п.) — `overflow-x:auto` продолжает
работать штатно, поведение НЕ меняется (stretch задаёт МИНИМУМ
ширины, не потолок). Живой тест — оба тикета, iframe-эмуляция
390px, до/после. */
align-self: stretch;
}
.page-header > .d-flex::-webkit-scrollbar,
.mob-btn-row::-webkit-scrollbar {
display: none;
}
.page-header > .d-flex > *,
.mob-btn-row > * {
flex-shrink: 0;
}
/* Таблицы `.dt-table` на мобильном — CONTENT-BASED раскладка
(`table-layout:auto`), НЕ `fixed`, прямое требование пользователя
после ТРЁХ проваленных попыток той же сессии починить это через
`fixed`+вручную угаданное число:
1) `fixed`+`width:auto` — Chrome эмпирически КЛАМПИТ ширину таблицы к
ширине контейнера независимо от суммы объявленных ` | ` (тот же
баг, что уже был у Конструктора отчётов) — колонки без запаса
сжимались ниже содержимого («Штрафы», текст рвался по одной букве).
2) JS-фикс на это (сумма `measurePx()` по ВСЕМ ` | `) сам оказался
багом — считал в сумму и `.d-mob-none`-СКРЫТЫЕ колонки тоже
(Одометр — из ~26 колонок видно всего 4+3 иконки, остальные
скрыты) — `fixed` растягивал раздутую сумму ТОЛЬКО на видимые
колонки, отсюда «Дата — почти половина экрана».
3) Переход на `table-layout:auto` С `width:auto` (не `100%`) убрал
оба класса растяжения/сжатия, НО породил третий баг — `width:auto`
для таблицы означает shrink-to-fit (браузер даёт РОВНО столько
ширины, сколько нужно содержимому, не больше) — если сумма
реальных минимальных ширин видимых колонок МЕНЬШЕ ширины экрана
(типичный случай — 3-4 узкие колонки + 2 иконки), таблица
оставалась ýже экрана, справа висело пустое поле карточки (живой
скриншот пользователя, `payments`/«Приход» — таблица занимала
от силы 75% ширины).
Правильная комбинация — `table-layout:auto` (браузер меряет РЕАЛЬНЫЙ
контент только ВИДИМЫХ ячеек — `.d-mob-none` не участвует в расчёте
вообще, колонку нельзя сжать ниже содержимого) `+` `width:100%`
(наследуется от базового, НЕ media-scoped правила `.dt-table{width:
100%}` — здесь НЕ переопределяется). Под `auto`-раскладкой (в
отличие от `fixed`) это безопасно в ОБЕ стороны: если сумма
минимальных ширин колонок МЕНЬШЕ 100% контейнера — браузер
распределяет остаток МЕЖДУ колонками пропорционально их контенту
(не оставляет пустое поле сбоку); если БОЛЬШЕ — таблица растёт за
100% контейнера (никогда не сжимает колонку ниже содержимого),
`.table-responsive` даёт горизонтальный скролл ровно тогда, когда он
реально нужен. `dt_resize.js` на мобильном не трогает ширину
таблицы вообще (ни colgroup, ни inline style) — вся работа на
браузере, ни одного числа, угаданного в коде проекта. */
.dt-table[data-table-key] {
table-layout: auto;
max-width: none;
}
.dt-table[data-table-key] th,
.dt-table[data-table-key] td {
width: auto !important;
}
/* Ничего НЕ переносится на вторую строку внутри ячейки на мобильном
портрете (2026-08-13, прямая находка пользователя — «строки
расползаются на 2-4 непонятно для чего», конкретный симптом «0 Р»
ломалось на «0» и осиротевшую «Р» на новой строке). Причина —
базовое `.dt-table td{white-space:normal!important}` (задумано ТОЛЬКО
для десктопного `table-layout:fixed`, где перенос — единственный
способ удержать длинный текст в объявленной px-ширине колонки) не
отключается в мобильном auto-layout режиме — а под `auto` браузер
меряет MIN-content ширину колонки по САМОМУ длинному НЕРАЗРЫВНОМУ
слову; с `white-space:normal` пробел — легальная точка разрыва,
поэтому «0 Р» умеет ужаться до одной «Р» ценой переноса «0» на
отдельную строку при любом дефиците места — а на мобильном экране с
10+ колонками дефицит есть всегда. `nowrap` возвращает auto-layout
его честную семантику «min-content = ширина ЦЕЛОЙ ячейки одной
строкой»: если сумма таких ширин больше экрана — таблица просто
становится шире контейнера, законный горизонтальный скролл внутри
уже имеющегося `.table-responsive` (прямо то, что запросил
пользователь — скролл пальцем это ОК, разъезжание строки на
несколько линий — нет). `!important` + `[data-table-key]`-атрибут в
селекторе — та же техника перебивки специфичности, что уже
применяется для `.dt-table td.dt-note` выше (базовое правило тоже на
`!important`, побеждает более специфичный селектор). */
.dt-table[data-table-key] td {
white-space: nowrap !important;
}
/* Иконки действий (`.act-col`) — тесная колонка без лишнего воздуха:
обычный паддинг 10px/6px (см. `.dt-table th,td` выше) рассчитан на
текстовые колонки, для одной кнопки-иконки это чистый балласт. */
.dt-table[data-table-key] .act-col {
padding-left: 3px !important;
padding-right: 3px !important;
}
/* Truncate-колонки без table-layout:fixed теряют смысл overflow:
ellipsis (нечему обрезать, если ширина ничем не ограничена) — на
мобильном нужен явный потолок. Покрывает и текущую `.dt-note`, и
легаси-приём `style="max-width:0"` (percent-колонки до системы
.dt-note — payments/vehicle_expenses/maintenance/control/
my_expenses/service_places/shift_swaps). */
.dt-table[data-table-key] .dt-note,
.dt-table[data-table-key] td[style*="max-width:0"] {
max-width: 130px !important;
}
}
/* Телефон, повёрнутый БОКОМ (ландшафт) — попадает в диапазон ШИРИНЫ
десктопа/планшета (768-991px), поэтому предыдущий блок его не ловит:
получал `table-layout:fixed` + процентные ширины `dt_resize.js`,
рассчитанные на куда более широкий экран — колонки схлопывались,
ячейка «Дата» с 2-3 доп. иконками (история изменений/заморозка/
«изменено после проверки») переставала помещаться в одну строку
(2026-08-05, найдено пользователем на «Сменах»). `(max-height:500px)
and (orientation:landscape)` — стандартный эвристический трюк отличить
именно ТЕЛЕФОН боком (типичная высота 350-430px) от десктопного/
планшетного окна ТОЙ ЖЕ ширины (высота почти всегда заметно больше) —
без user-agent sniffing, тот же класс эвристики, что используется
везде в вебе для «мобильный ландшафт».
В отличие от портретного блока выше, здесь СОЗНАТЕЛЬНО НЕ скрываются
`.d-mob-none`-колонки — вширь есть место показать больше, чем в
портретном режиме (прямое требование пользователя: «теперь нет
колонок [действий], можно всё разместить как надо пропорционально»).
Общий класс `.dt-table` — правило действует на ЛЮБОЙ странице с этой
системой (тот же принцип, что и у портретного блока: один общий
компонент, не per-страничная копия), проверено и настроено пока
только на «Сменах» — остальные страницы унаследуют его автоматически
при переводе на систему `.dt-table` (все уже переведены), донастройка
по месту — по факту жалобы, как и здесь. */
@media (min-width: 768px) and (max-width: 991.98px) and (max-height: 500px) and (orientation: landscape) {
.dt-resize-handle { display: none; }
.dt-table[data-table-key] {
table-layout: auto;
max-width: none;
}
.dt-table[data-table-key] th,
.dt-table[data-table-key] td {
width: auto !important;
}
.dt-table[data-table-key] col {
width: auto !important;
}
/* Тот же баг и тот же фикс, что в портретном блоке выше (2026-08-13,
см. развёрнутый комментарий там) — auto-layout здесь ТОЖЕ активен,
базовое `.dt-table td{white-space:normal!important}` ТАК ЖЕ ломает
короткие значения по пробелу («0 Р» → «0» и осиротевшая «Р» на новой
строке) при нехватке места. */
.dt-table[data-table-key] td {
white-space: nowrap !important;
}
.dt-table[data-table-key] .act-col {
padding-left: 4px !important;
padding-right: 4px !important;
}
.dt-table[data-table-key] .dt-note,
.dt-table[data-table-key] td[style*="max-width:0"] {
max-width: 220px !important;
}
/* «Зеркальные» колонки (`data-mirror-index`, см. dt_resize.js::
syncMirrors) — на десктопе их ширина уравнивается JS-ом (общий pct).
На мобильном JS ширину таблицы вообще не трогает — `table-layout:
auto` сам считает ширину КАЖДОЙ колонки НЕЗАВИСИМО, по её собственным
ячейкам (th+td, все строки) — Топливо(факт) и Расход(норма) физически
РАЗНЫЕ колонки в разметке (никак не связаны для браузера, `data-
mirror-index` — атрибут, который знает только НАШ JS, самому браузеру
он ничего не говорит), поэтому при разной длине реального текста в
ячейках (напр. отрицательное значение нормы с минусом) их ширины
расходились НЕЗАВИСИМО друг от друга — и, так как `width:100%` на
таблице заставляет браузер распределять разницу между суммой
предпочтительных ширин колонок и шириной контейнера ПРОПОРЦИОНАЛЬНО
между ВСЕМИ колонками (не только изменившимися), сдвиг «прыгал» даже
на совершенно не связанные «Начало дня»/«Конец дня»/«Пробег»
(2026-08-06, найдено и подтверждено пользователем дважды подряд).
ДВЕ предыдущие попытки не сработали:
1) `min-width` — только нижняя граница, реальная (auto-вычисленная)
ширина по-прежнему могла расти выше нее по-разному у факта/нормы.
2) `width` (без `max-width`) ТОЛЬКО на ` | ` — задаёт лишь
ПРЕДПОЧТИТЕЛЬНУЮ ширину заголовка, а под auto-layout ширина
колонки — максимум preferred-width ВСЕХ её ячеек, включая ` | `;
` | ` этих колонок не имели `data-mirror-index` вообще (только
` | `) и продолжали жить на голом `width:auto` — их РЕАЛЬНЫЙ
текст по-прежнему раздувал колонку по-разному у факта/нормы.
Настоящий фикс — ДВА действия разом: (а) `data-mirror-index`
проставлен теперь и на соответствующих ` | ` тоже (`odometer/
index.html`, tbody, 2026-08-06), не только на ` | `; (б) ширина
фиксируется ЖЁСТКО — `width` + `max-width` ОДНИМ и тем же числом
(не только `min-width`/только `width`) — под auto-layout explicit
`width` без `max-width` всё ещё позволяет колонке ВЫРАСТИ шире, если
контент требует больше места; `max-width` этого не допускает, вместе
с `overflow:hidden`+`text-overflow:ellipsis` (контент этих ячеек —
короткие числа, обрезка практически никогда не сработает, но
гарантирует отсутствие визуального вылезания за границу, если
когда-нибудь текст окажется длиннее). Селектор — БЕЗ ограничения по
тегу (`[data-mirror-index=...]`, не `th[data-mirror-index=...]`) —
матчит и ` | `, и ` | ` одним правилом. */
.dt-table[data-table-key] [data-mirror-index="odo0"] {
width: 70px !important;
max-width: 70px !important;
overflow: hidden;
text-overflow: ellipsis;
}
.dt-table[data-table-key] [data-mirror-index="odo1"],
.dt-table[data-table-key] [data-mirror-index="odo2"],
.dt-table[data-table-key] [data-mirror-index="odo3"],
.dt-table[data-table-key] [data-mirror-index="odo4"] {
width: 52px !important;
max-width: 52px !important;
overflow: hidden;
text-overflow: ellipsis;
}
}
@media (min-width: 768px) {
.btn-add-mobile { display: none !important; }
}
/* Старые `-table`/`-notes-cell`/`.pay-driver-cell` классы (odo/shift/vexp/
exp/pay/dep/ev/myexp) удалены 2026-07-29 — заменены единой `.dt-table`/
`.dt-note`, см. блок выше «Единая система табличных списков». */
.exp-name-cell {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: default;
}
/* Та же специфичность-дыра, что и у `.dt-note` (см. блок выше, 2026-08-05) —
`.dt-table td{white-space:normal!important}` перебивает голый класс. */
.dt-table td.exp-name-cell {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis;
}
/* ── Бейджи карт (С = личная, А = работодателя) ── */
.badge-card-self,
.badge-card-employer {
display: inline-block;
padding: .2em .5em;
border-radius: .375rem;
font-size: .8rem;
font-weight: 600;
background: transparent;
line-height: 1;
}
.badge-card-self {
border: 2px solid var(--income-color);
color: var(--income-color);
}
.badge-card-employer {
border: 2px solid var(--expense-color);
color: var(--expense-color);
}
/* ── Гос. номер авто — рамка в стиле реального номерного знака РФ ── */
.ru-plate {
display: inline-flex;
align-items: stretch;
height: 1.7em;
border: 2px solid #000;
border-radius: .25rem;
background: #fff;
font-family: "Arial Narrow", Arial, sans-serif;
font-weight: 700;
line-height: 1;
overflow: hidden;
vertical-align: middle;
}
.ru-plate__body {
display: flex;
align-items: center;
padding: 0 .35em;
color: #000;
letter-spacing: .02em;
}
.ru-plate__main {
font-size: 1em;
}
.ru-plate__region {
font-size: .8em;
margin-left: .2em;
align-self: center;
}
.ru-plate__flag {
display: flex;
flex-direction: column;
width: 1.05em;
border-left: 2px solid #000;
}
.ru-plate__flag-stripes {
flex: 1 1 auto;
background: linear-gradient(
to bottom,
#fff 0%, #fff 33.33%,
#0039a6 33.33%, #0039a6 66.66%,
#d52b1e 66.66%, #d52b1e 100%
);
}
/* Тёмная тема — сама табличка всегда остаётся "белой", как настоящий
номерной знак (иначе теряется весь смысл стилизации); только внешняя
рамка чуть светлеет, чтобь не сливаться с тёмным фоном страницы. */
[data-bs-theme="dark"] .ru-plate {
border-color: #555;
}
[data-bs-theme="dark"] .ru-plate__flag {
border-left-color: #555;
}
/* Первая колонка "sticky" в широких таблицах-графиках (Учёт рабочего
времени/Отпуска) — остаётся на месте при горизонтальном скролле дней,
список водителей не теряется из виду. Общий класс, переиспользуется
несколькими страницами (work_schedule, vacations/timeline). */
.sticky-col {
position: sticky;
left: 0;
z-index: 5;
background-color: var(--bs-body-bg);
/* Собственный compositing-слой — известный класс багов sticky-элементов
на очень широких скроллящихся контейнерах (Отпуска/График работы,
трек может быть шире 15000px при макс. зуме) — без этого в некоторых
браузерах колонка визуально «уплывает»/перекрывается содержимым трека
на большом горизонтальном скролле (найдено пользователем 2026-07-28). */
transform: translateZ(0);
}
.sticky-col-head {
z-index: 3;
}
/* «Изменено после проверки» (2026-08-03, розовый — было жёлтым/bs-warning
до правки в тот же день) — подсветка строки self-report списка,
изменившейся ПОСЛЕ последней ЯВНОЙ проверки этим зрителем (кнопка
«Отметить проверенным», см. app/utils/list_view.py — просто открыть
страницу больше НЕ гасит подсветку, см. mark_reviewed()). Bootstrap не
имеет штатного pink bg-*-subtle/text-*-emphasis, поэтому свои
--row-changed-bg/--row-changed-text (theme-aware пара, см. :root/
[data-bs-theme=dark] выше), не .table-warning/.bg-warning-subtle. */
.row-changed > td,
.visit-card.row-changed {
background-color: var(--row-changed-bg) !important;
}
.row-changed-badge {
color: var(--row-changed-text);
}
/* Ссылка в раздел, отключённый категории Смотрящего — обезврежена
after_request'ом (app/utils/nav_access.py::guard_html_links): убран
href/hx-*, добавлен data-nav-blocked. Не прячем (сломало бы ряды
кнопок / ячейки таблиц), а гасим визуально и по кликам. */
a[data-nav-blocked] {
opacity: .4;
pointer-events: none;
cursor: default;
text-decoration: none;
}
/* Заморозка периода (control/driver_detail.html, settings/user_profile.html)
— история закрытых периодов не должна раздувать высоту карточки по мере
накопления записей (2026-08-04, прямой запрос пользователя) — фикс.
высота ~6 строк table-sm (строка ~31px + шапка ~33px), дальше свой
внутренний overflow-y:auto; шапка sticky-top внутри этого контейнера,
не всей страницы. */
.frz-history {
max-height: 219px;
overflow-y: auto;
}
/* Блок bulk-заморозки (control/index.html) — на мобильном Примечание на
своей строке, обе кнопки вместе строкой ниже (было 3-строчной пирамидой,
2026-08-04). */
@media (max-width: 767.98px) {
.frz-bulk-note { flex: 1 1 100%; }
.frz-bulk-note input { width: 100% !important; }
}
/* Вкладки-иконки Центра контроля — счётчики-бейджи (position-absolute
top-0 start-100 translate-middle) обрезались сверху overflow-x:auto
у .mob-btn-row (тот же non-visible-overflow клипает обе оси) и налезали
на соседнюю кнопку при узком gap-1 (2026-08-04). */
@media (max-width: 767.98px) {
.ctrl-tabs-row {
padding-top: 8px;
gap: .5rem !important;
}
}
/* Тот же клип-баг (см. выше .ctrl-tabs-row), общий класс для ЛЮБОГО ряда
кнопок в .page-header с position-absolute-бейджем (top-0 start-100
translate-middle) — сейчас: «Импорт из календаря» на /route_assignments/
(2026-08-15, тикет #22). Сознательно НЕ применяется ко ВСЕМ `.page-
header > .d-flex` рядам разом — узкий класс на конкретный ряд, как
.ctrl-tabs-row, не бланкет-фикс (не все ряды кнопок несут бейдж). */
@media (max-width: 767.98px) {
.header-badge-row {
padding-top: 8px;
}
}
/* ПК — иконки вкладок Центра контроля крупнее (х2) + больший промежуток
между кнопками, чтобы счётчики-бейджи соседних вкладок не сливались
(2026-08-11, прямое требование пользователя; мобильная раскладка выше
не трогается — там уже свой фикс от 2026-08-04). Кнопка экспорта
(#ctrlExportBtn) в этом же ряду — не «закладка», остаётся штатного
размера .btn-icon-square. */
@media (min-width: 768px) {
.ctrl-tabs-row {
gap: 1rem !important;
}
.ctrl-tabs-row .ctrl-tab-btn {
width: 68px;
height: 68px;
font-size: 1.8rem;
}
.ctrl-tabs-row .ctrl-tab-btn .badge {
font-size: .75rem;
padding: .4em .55em;
}
}
/* МГ (мобильный ЛАНДШАФТ, телефон боком) — ширина попадает в тот же
`min-width:768px`, что и настоящий ПК/планшет, поэтому наследовала
десктопные 68px-иконки выше — на реальной ширине телефона боком
(обычно 650-930px) 10 вкладок + кнопка экспорта в таком размере не
помещаются в одну строку (2026-08-13, прямая находка пользователя —
«огромные иконки как на ПК», нужен размер, при котором строка не
рвётся). `(max-height:500px) and (orientation:landscape)` — тот же
эвристический приём, что уже используется для `.dt-table` в этом же
файле (отличить именно ТЕЛЕФОН боком от десктопного/планшетного окна
той же ШИРИНЫ — у тех высота почти всегда заметно больше 500px).
Специфичность идентична блоку выше, побеждает порядком (идёт следом в
файле) — `!important` добавлен явно, чтобы не зависеть от порядка при
будущих правках. Размер — 40px (не откат к голым 34px `.btn-icon-square`
портрета: на 650+px ширины есть небольшой запас, чуть крупнее — удобнее
пальцем), считано так, чтобы 11 квадратных иконок с небольшим gap
гарантированно умещались даже на самых узких landscape-телефонах. */
@media (min-width: 768px) and (max-width: 991.98px) and (max-height: 500px) and (orientation: landscape) {
.ctrl-tabs-row {
gap: .4rem !important;
}
.ctrl-tabs-row .ctrl-tab-btn {
width: 40px !important;
height: 40px !important;
font-size: 1.05rem !important;
}
}
/* Центр контроля/Изменения — колонка «Что изменилось»: до 3 строк видимых,
остальное — внутренний вертикальный скролл ячейки, не раздувает строку
таблицы (тот же приём, что .frz-history, 2026-08-04). */
.diff-cell {
max-height: calc(3 * 1.5em);
overflow-y: auto;
}
/* Новости — лента карточек (news/index.html) + тело поста (news/detail.html).
.news-card — вся карточка кликабельна (обёрнута в ), лёгкий hover-
акцент вместо стандартного подчёркивания ссылки. .news-preview — обрезка
HTML-превью до 3 строк (WebKit line-clamp, поддержан во всех целевых
браузерах проекта). .news-body — контент из Quill: изображения не должны
вылезать за карточку, iframe-видео — 16:9 через aspect-ratio. */
.news-card {
transition: box-shadow .15s ease, border-color .15s ease;
}
.news-card:hover {
border-color: var(--accent);
box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .08);
}
.news-preview {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-card-thumb {
width: 100%;
height: 100%;
min-height: 110px;
object-fit: cover;
}
@media (max-width: 575.98px) {
.news-card-thumb { min-height: 90px; }
}
.news-body img {
max-width: 100%;
height: auto;
border-radius: .375rem;
}
.news-body iframe.ql-video {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
border: 0;
border-radius: .375rem;
}
.news-body blockquote {
border-left: 3px solid var(--accent);
padding-left: 1rem;
color: var(--bs-secondary-color);
}
.news-body video.ql-video-file {
max-width: 100%;
border-radius: .375rem;
}
.news-body hr {
border-top: 1px solid var(--bs-border-color);
margin: 1.25rem 0;
}
/* Ссылки в тексте новости — явный акцентный цвет+подчёркивание вместо
дефолтного (едва заметного, реальная жалоба пользователя 2026-08-11:
«на ПК даже намёка нет, что в тексте есть ссылка»), не полагаемся на
унаследованный --bs-link-color. */
.news-body a {
color: var(--accent);
text-decoration: underline;
}
/* Классы Quill-редактора (выравнивание/отступ/размер шрифта) — общие
правила ОБЯЗАНЫ применяться и на опубликованной странице (.news-body),
и в самом редакторе (.ql-editor, news/form.html) — реальная находка
пользователя 2026-08-11: страницы просмотра новостей понятия не имели
об этих классах (quill.snow.css с их CSS загружен ТОЛЬКО на странице
редактирования), поэтому выравнивание/размер текста/центрирование
картинки пропадали при публикации. Значения — 1:1 с quill.snow.css
(Quill 1.3.7), чтобы редактор реально совпадал с итоговым видом. */
.news-body .ql-align-center, .ql-editor .ql-align-center { text-align: center; }
.news-body .ql-align-right, .ql-editor .ql-align-right { text-align: right; }
.news-body .ql-align-justify, .ql-editor .ql-align-justify { text-align: justify; }
.news-body .ql-indent-1, .ql-editor li.ql-indent-1:not(.ql-direction-rtl) { padding-left: 3em; }
.news-body .ql-indent-2, .ql-editor li.ql-indent-2:not(.ql-direction-rtl) { padding-left: 6em; }
.news-body .ql-indent-3, .ql-editor li.ql-indent-3:not(.ql-direction-rtl) { padding-left: 9em; }
.news-body p.ql-indent-1, .news-body p.ql-indent-2, .news-body p.ql-indent-3 { padding-left: inherit; margin-left: 3em; }
.news-body .ql-size-small, .ql-editor .ql-size-small { font-size: .75em; }
.news-body .ql-size-large, .ql-editor .ql-size-large { font-size: 1.5em; }
.news-body .ql-size-huge, .ql-editor .ql-size-huge { font-size: 2.5em; }
/* Позиционирование/обтекание картинки-карты-видео (2026-08-11, свой
мини-модуль редактора — см. news/form.html) — общие правила для
`.ql-editor` и `.news-body`, та же логика WYSIWYG, что и выше. */
.news-body .ql-pos-left, .ql-editor .ql-pos-left { float: left; margin: 0 1rem .5rem 0; max-width: 50%; }
.news-body .ql-pos-right, .ql-editor .ql-pos-right { float: right; margin: 0 0 .5rem 1rem; max-width: 50%; }
.news-body .ql-pos-center, .ql-editor .ql-pos-center { display: block; margin: 0 auto .5rem; float: none; }
.news-body .ql-pos-full, .ql-editor .ql-pos-full { display: block; width: 100% !important; float: none; margin: 0 0 .5rem; }
.news-body .ql-wrap-left, .ql-editor .ql-wrap-left { float: left; margin: 0 1rem .5rem 0; }
.news-body .ql-wrap-right, .ql-editor .ql-wrap-right { float: right; margin: 0 0 .5rem 1rem; }
.news-body iframe.ql-pos-left, .news-body iframe.ql-pos-right, .news-body iframe.ql-pos-center,
.ql-editor iframe.ql-pos-left, .ql-editor iframe.ql-pos-right, .ql-editor iframe.ql-pos-center {
width: 60%; aspect-ratio: 16 / 9; height: auto;
}
.news-body iframe.ql-wrap-left, .news-body iframe.ql-wrap-right,
.ql-editor iframe.ql-wrap-left, .ql-editor iframe.ql-wrap-right {
width: 45%; aspect-ratio: 16 / 9; height: auto;
}
/* Мини-модуль редактора — плавающая панель выравнивания + ручка ресайза
(только в редакторе, на опубликованной странице не появляются). */
.news-float-toolbar {
position: absolute; z-index: 20; display: flex; gap: 2px;
background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
border-radius: .375rem; box-shadow: var(--shadow-sm); padding: 2px;
}
.news-float-toolbar button {
width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
border: 0; background: none; border-radius: .25rem; cursor: pointer; color: var(--bs-body-color);
}
.news-float-toolbar button:hover, .news-float-toolbar button.active {
background: var(--accent); color: #fff;
}
.news-resize-handle {
position: absolute; width: 14px; height: 14px; background: var(--accent);
border: 2px solid #fff; border-radius: 50%; cursor: nwse-resize; z-index: 20;
}
|