/* Админка «Пимс» — тема поверх Bootstrap 5.3.
Bootstrap лежит в public/assets/vendor/ и даёт сетку, формы, таблицы и утилиты;
этот файл переопределяет палитру и добавляет то, чего в нём нет:
сайдбар, плитки обзора, превью карточки товара, зону загрузки фото.
Тема переключается атрибутом data-bs-theme на : тёмная — дефолт,
светлая — переопределение ниже. Свои переменные (--bg-*, --text-*)
держим рядом с бутстраповскими --bs-*, потому что часть компонентов
красится через --bs-*, а часть — своими правилами. */
/* --- Палитра ------------------------------------------------------------- */
:root {
--bg-primary: #0f1115;
--bg-secondary: #161920;
--bg-tertiary: #1c2028;
--bg-card: #1a1d25;
--bg-hover: #232834;
--border-color: #2a2f3a;
--border-light: #333845;
--text-primary: #e5e7eb;
--text-secondary: #9ca3af;
--text-muted: #6b7280;
--accent: #6366f1;
--accent-hover: #7c7ff3;
--accent-soft: rgba(99, 102, 241, .15);
--sidebar-width: 260px;
/* Bootstrap красит корпус, границы и ссылки этими переменными. */
--bs-body-bg: var(--bg-primary);
--bs-body-color: var(--text-primary);
--bs-emphasis-color: #fff;
--bs-heading-color: var(--text-primary);
--bs-secondary-color: var(--text-muted);
--bs-secondary-bg: var(--bg-tertiary);
--bs-tertiary-bg: var(--bg-tertiary);
--bs-border-color: var(--border-color);
--bs-primary: var(--accent);
--bs-primary-rgb: 99, 102, 241;
--bs-link-color: var(--accent-hover);
--bs-link-color-rgb: 124, 127, 243;
--bs-link-hover-color: #a5a8f7;
--bs-code-color: #d6b4fe;
--bs-highlight-bg: rgba(245, 158, 11, .25);
/* Мягкие подложки бейджей. Готовые бутстраповские слишком тёмные — на
фоне карточки читаются провалом, а не подсветкой. */
--bs-primary-bg-subtle: rgba(99, 102, 241, .16);
--bs-primary-border-subtle: rgba(99, 102, 241, .35);
--bs-primary-text-emphasis: var(--accent-hover);
--bs-success-bg-subtle: rgba(25, 135, 84, .16);
--bs-danger-bg-subtle: rgba(220, 53, 69, .16);
--bs-warning-bg-subtle: rgba(255, 193, 7, .16);
--bs-info-bg-subtle: rgba(13, 202, 240, .16);
--bs-secondary-bg-subtle: var(--bg-hover);
}
[data-bs-theme="light"] {
--bg-primary: #f4f6fa;
--bg-secondary: #1e2130; /* сайдбар остаётся тёмным и на светлой теме */
--bg-tertiary: #eef1f6;
--bg-card: #ffffff;
--bg-hover: #f4f6fa;
--border-color: #e2e6ee;
--border-light: #d3d9e4;
--text-primary: #1f2430;
--text-secondary: #5b6478;
--text-muted: #8b93a5;
--bs-emphasis-color: #000;
--bs-link-color: #4f46e5;
--bs-link-color-rgb: 79, 70, 229;
--bs-link-hover-color: #4338ca;
--bs-code-color: #7c3aed;
--bs-primary-bg-subtle: rgba(99, 102, 241, .12);
--bs-primary-text-emphasis: #4338ca;
--bs-success-bg-subtle: rgba(25, 135, 84, .12);
--bs-danger-bg-subtle: rgba(220, 53, 69, .12);
--bs-warning-bg-subtle: rgba(255, 193, 7, .18);
--bs-info-bg-subtle: rgba(13, 202, 240, .16);
}
/* Сайдбар на светлой теме тёмный, поэтому его текст задаём отдельно
и не завязываем на --text-*. */
[data-bs-theme="light"] .admin-sidebar {
--text-primary: #e5e7eb;
--text-secondary: #9ca3af;
--text-muted: #6b7280;
--border-color: #2a2f3a;
--bg-hover: #262b38;
}
html, body {
min-height: 100vh;
background: var(--bg-primary);
color: var(--text-primary);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* --- Каркас: сайдбар ----------------------------------------------------- */
.admin-sidebar {
position: fixed;
inset: 0 auto 0 0;
width: var(--sidebar-width);
background: var(--bg-secondary);
border-right: 1px solid var(--border-color);
display: flex;
flex-direction: column;
z-index: 1030;
}
.sidebar-brand {
display: flex;
align-items: center;
gap: 10px;
padding: 20px 22px;
border-bottom: 1px solid var(--border-color);
font-size: 1.15rem;
font-weight: 700;
color: var(--text-primary);
text-decoration: none;
}
.sidebar-brand:hover { color: var(--text-primary); }
.sidebar-brand i { color: var(--accent); font-size: 1.5rem; }
/* Логотип отдан заказчиком в 197×87; в шапке показываем по высоте. */
.sidebar-brand img { height: 34px; width: auto; }
.sidebar-brand small {
margin-left: auto;
font-size: .7rem;
font-weight: 500;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: .1em;
}
.sidebar-nav {
flex: 1;
overflow-y: auto;
padding: 12px;
display: flex;
flex-direction: column;
gap: 2px;
}
.sidebar-group {
padding: 14px 14px 6px;
font-size: .68rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--text-muted);
}
.sidebar-group:first-child { padding-top: 4px; }
.sidebar-nav .nav-link {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 14px;
border-radius: 8px;
color: var(--text-secondary);
font-size: .9rem;
font-weight: 500;
transition: background-color .15s ease, color .15s ease;
}
.sidebar-nav .nav-link i { font-size: 1.05rem; width: 20px; text-align: center; }
.sidebar-nav .nav-link:hover { background: var(--bg-hover); color: var(--text-primary); }
.sidebar-nav .nav-link.active { background: var(--accent-soft); color: var(--accent-hover); }
.sidebar-nav .nav-link.active i { color: var(--accent); }
.sidebar-footer {
padding: 14px 16px;
border-top: 1px solid var(--border-color);
display: flex;
align-items: center;
gap: 10px;
}
.sidebar-footer .avatar { font-size: 1.75rem; color: var(--accent); line-height: 1; }
.sidebar-footer .name {
flex: 1;
min-width: 0;
font-size: .85rem;
font-weight: 600;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* --- Каркас: содержимое -------------------------------------------------- */
.admin-content {
margin-left: var(--sidebar-width);
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Шапка липкая: переключатель окружения нужен на любой прокрутке — по нему
видно, правишь ты прод или дев. */
.admin-topbar {
position: sticky;
top: 0;
z-index: 1020;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 36px;
background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--border-color);
}
.admin-topbar h1 { font-size: 1.1rem; font-weight: 600; margin: 0; }
.admin-main { padding: 26px 36px 48px; }
.sidebar-toggle { display: none; }
/* Бейдж окружения. Прод красный намеренно: случайная правка боевых данных
стоит дороже лишней тревожности. */
.env-badge {
font-size: .7rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 6px;
background: var(--bg-hover);
color: var(--text-secondary);
}
.env-badge.is-prod { background: var(--bs-danger); color: #fff; }
/* --- Карточки ------------------------------------------------------------ */
.card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 12px;
color: var(--text-primary);
}
.card-header {
background: transparent;
border-bottom: 1px solid var(--border-color);
padding: .85rem 1.25rem;
}
.card-title { color: var(--text-primary); font-weight: 600; }
.card-body { padding: 1.25rem; }
/* --- Плитки обзора ------------------------------------------------------- */
.stat-card {
position: relative;
overflow: hidden;
padding: 20px;
height: 100%;
transition: transform .15s ease, border-color .15s ease;
}
.stat-card:hover { transform: translateY(-2px); border-color: var(--border-light); }
.stat-card .stat-icon {
position: absolute;
top: 16px;
right: 16px;
font-size: 1.5rem;
opacity: .3;
}
.stat-card .stat-value { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.stat-card .stat-label {
margin-top: 6px;
font-size: .78rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: .05em;
}
.stat-card .stat-hint { margin-top: 4px; font-size: .8rem; color: var(--text-muted); }
.stat-card.stat-warning .stat-value { color: var(--bs-warning); }
.stat-card.stat-danger .stat-value { color: var(--bs-danger); }
.stat-card.stat-success .stat-value { color: var(--bs-success); }
/* --- Формы --------------------------------------------------------------- */
.form-control, .form-select {
background: var(--bg-tertiary);
border-color: var(--border-color);
color: var(--text-primary);
}
.form-control:focus, .form-select:focus {
background: var(--bg-tertiary);
border-color: var(--accent);
color: var(--text-primary);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-control::placeholder { color: var(--text-muted); }
.form-control:disabled { background: var(--bg-hover); color: var(--text-muted); }
.input-group-text {
background: var(--bg-hover);
border-color: var(--border-color);
color: var(--text-muted);
}
.form-label {
margin-bottom: 5px;
font-size: .82rem;
font-weight: 500;
color: var(--text-secondary);
}
.form-text { color: var(--text-muted); font-size: .78rem; }
.form-control-color { width: 100%; min-height: 38px; padding: 4px; }
/* --- Кнопки -------------------------------------------------------------- */
.btn-primary {
--bs-btn-bg: var(--accent);
--bs-btn-border-color: var(--accent);
--bs-btn-hover-bg: var(--accent-hover);
--bs-btn-hover-border-color: var(--accent-hover);
--bs-btn-active-bg: var(--accent-hover);
--bs-btn-active-border-color: var(--accent-hover);
--bs-btn-color: #fff;
--bs-btn-hover-color: #fff;
--bs-btn-active-color: #fff;
}
.btn-outline-secondary {
--bs-btn-color: var(--text-secondary);
--bs-btn-border-color: var(--border-light);
--bs-btn-hover-bg: var(--bg-hover);
--bs-btn-hover-border-color: var(--border-light);
--bs-btn-hover-color: var(--text-primary);
--bs-btn-active-bg: var(--bg-hover);
--bs-btn-active-border-color: var(--border-light);
--bs-btn-active-color: var(--text-primary);
}
.btn-outline-primary {
--bs-btn-color: var(--accent-hover);
--bs-btn-border-color: var(--accent);
--bs-btn-hover-bg: var(--accent);
--bs-btn-hover-border-color: var(--accent);
--bs-btn-active-bg: var(--accent);
--bs-btn-active-border-color: var(--accent);
}
/* --- Таблицы ------------------------------------------------------------- */
.table {
--bs-table-bg: transparent;
--bs-table-color: var(--text-primary);
--bs-table-hover-bg: var(--bg-hover);
--bs-table-hover-color: var(--text-primary);
--bs-table-border-color: var(--border-color);
margin-bottom: 0;
}
.table > thead > tr > th {
background: var(--bg-tertiary);
color: var(--text-secondary);
border-bottom: 1px solid var(--border-color);
font-size: .74rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
white-space: nowrap;
padding: 11px 14px;
}
.table > tbody > tr > td { padding: 11px 14px; border-bottom-color: var(--border-color); }
.table > tbody > tr:last-child > td { border-bottom-width: 0; }
/* Числовая колонка: правый край и без переносов — так столбцы сумм читаются
глазом сверху вниз. */
.table .num { text-align: right; white-space: nowrap; }
/* Карточка с таблицей во всю ширину: скругления не должны резать строки. */
.card > .table-responsive { border-radius: 0 0 12px 12px; }
.card > .table-responsive:first-child { border-radius: 12px 12px 0 0; }
/* --- Бейджи и алерты ----------------------------------------------------- */
.badge { font-weight: 500; padding: 5px 8px; border-radius: 6px; }
.alert { border: 1px solid transparent; border-radius: 10px; }
.alert-success { background: rgba(25, 135, 84, .12); border-color: rgba(25, 135, 84, .3); color: #6ee7b7; }
.alert-danger { background: rgba(220, 53, 69, .12); border-color: rgba(220, 53, 69, .3); color: #fca5a5; }
.alert-warning { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .3); color: #fcd34d; }
.alert-info { background: var(--accent-soft); border-color: rgba(99, 102, 241, .3); color: #a5b4fc; }
[data-bs-theme="light"] .alert-success { color: #0f5132; }
[data-bs-theme="light"] .alert-danger { color: #842029; }
[data-bs-theme="light"] .alert-warning { color: #664d03; }
[data-bs-theme="light"] .alert-info { color: #3730a3; }
/* --- Пагинация ----------------------------------------------------------- */
.pagination {
--bs-pagination-bg: transparent;
--bs-pagination-color: var(--text-secondary);
--bs-pagination-border-color: var(--border-color);
--bs-pagination-hover-bg: var(--bg-hover);
--bs-pagination-hover-color: var(--text-primary);
--bs-pagination-hover-border-color: var(--border-light);
--bs-pagination-focus-bg: var(--bg-hover);
--bs-pagination-focus-color: var(--text-primary);
--bs-pagination-active-bg: var(--accent);
--bs-pagination-active-border-color: var(--accent);
--bs-pagination-disabled-bg: transparent;
--bs-pagination-disabled-color: var(--text-muted);
--bs-pagination-disabled-border-color: var(--border-color);
margin-bottom: 0;
}
/* --- Мелочи, общие для страниц ------------------------------------------- */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; }
/* Пара «подпись → значение»: ей описаны все карточки только для чтения. */
.props { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 22px; }
.prop-label {
font-size: .7rem;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--text-muted);
}
.prop-value { margin-top: 3px; word-break: break-word; }
.section-title {
margin: 0 0 12px;
font-size: .78rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--text-muted);
}
/* Подпись «поле из ERP, здесь не меняется». */
.readonly-note {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: .8rem;
color: var(--text-muted);
}
/* Чувствительное значение: маска раскрывается по клику. */
.secret { cursor: pointer; border-bottom: 1px dashed var(--text-muted); }
.secret:hover { color: var(--accent-hover); border-color: var(--accent-hover); }
/* Раскрывающийся JSON в логах и событиях платежа. */
details.json > summary {
cursor: pointer;
color: var(--accent-hover);
font-size: .8rem;
font-weight: 500;
list-style: none;
}
details.json > summary::-webkit-details-marker { display: none; }
details.json > summary::before { content: "▸ "; }
details.json[open] > summary::before { content: "▾ "; }
details.json pre {
margin: 8px 0 0;
padding: 10px 12px;
max-height: 320px;
overflow: auto;
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: .78rem;
line-height: 1.45;
white-space: pre-wrap;
word-break: break-word;
}
/* Состояние точки: открыта / закрыта. */
.state { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.state-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); flex: none; }
.state-dot.is-open { background: var(--bs-success); }
.state-dot.is-closed { background: var(--bs-danger); }
/* Недельное расписание: строка на день. */
.week-row {
display: grid;
grid-template-columns: 130px 120px 1fr 1fr;
gap: 10px;
align-items: center;
}
.week-row.is-off input[type="time"] { opacity: .45; }
/* Таймлайн событий платежа. */
.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--border-color); }
.timeline li { position: relative; padding: 0 0 16px 16px; }
.timeline li::before {
content: "";
position: absolute;
left: -25px;
top: 6px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 3px var(--bg-card);
}
/* --- Товары: превью карточки и загрузка фото ----------------------------- */
/* Миниатюра из зеркала картинок. */
.thumb {
width: 48px;
height: 48px;
border-radius: 8px;
object-fit: contain;
border: 1px solid var(--border-color);
background: var(--bg-tertiary);
}
.swatch {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 4px;
border: 1px solid var(--border-color);
vertical-align: -2px;
margin-right: 6px;
}
/* Уменьшенная копия плитки каталога. Нужна затем же, зачем герой: фото списка
и фото карточки — разные кадры, и увидеть, как каждый смотрится на своём
месте, можно только рядом. */
.tile-preview {
width: 100%;
max-width: 200px;
padding: 12px;
border-radius: 14px;
border: 1px solid var(--border-color);
background: var(--bg-tertiary);
}
.tile-preview-photo {
display: block;
width: 100%;
height: 140px;
object-fit: contain;
border-radius: 10px;
}
.tile-preview-photo.is-empty {
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-hover);
color: var(--text-muted);
font-size: .8rem;
}
.tile-preview-name {
margin-top: 10px;
font-size: .82rem;
font-weight: 600;
line-height: 1.25;
}
/* Уменьшенная копия героя со страницы товара: фон, подсветка, фото и край
кремового листа. Пропорции и радиусы — как в ProductPage.tsx, только мельче.
Нужна затем, что фон и фото подбираются друг под друга, и оценить их
по отдельности нельзя. */
.hero {
position: relative;
overflow: hidden;
height: 320px;
display: flex;
flex-direction: column;
border-radius: 18px;
border: 1px solid var(--border-color);
}
.hero-glow {
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(90% 58% at 50% 40%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 68%);
}
.hero-title {
position: relative;
z-index: 1;
padding: 14px 12px 0;
text-align: center;
color: #fff;
font-weight: 700;
font-size: .95rem;
text-shadow: 0 1px 8px rgba(0,0,0,.25);
}
.hero-photo {
position: relative;
z-index: 1;
flex: 1;
min-height: 0;
width: auto;
max-width: 82%;
margin: 8px auto 0;
object-fit: contain;
filter: drop-shadow(0 14px 22px rgba(0,0,0,.32));
}
.hero-photo.is-empty {
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.72);
font-size: .82rem;
}
/* Режим «во всю ширину»: фото перестаёт быть предметом на фоне и само
становится фоном героя, а заголовок и лист ложатся поверх него. Показываем
это в превью, потому что на глаз режимы не сравнить: один и тот же кадр
в `cover` обрезается по краям, и подходит для этого не всякое фото. */
.hero.is-cover .hero-photo {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
max-width: none;
height: 100%;
margin: 0;
object-fit: cover;
filter: none;
}
.hero.is-cover .hero-glow { z-index: 1; }
.hero.is-cover .hero-title { z-index: 2; text-shadow: 0 2px 12px rgba(0,0,0,.55); }
.hero.is-cover .hero-sheet { z-index: 3; }
/* Лист наезжает на фон с закруглением — тот самый переход, ради которого
фон и фото подбирают вместе. */
.hero-sheet {
position: relative;
z-index: 2;
margin-top: -14px;
padding: 14px 16px 20px;
background: #FAF8F5;
color: #8a8178;
font-size: .78rem;
border-radius: 20px 20px 0 0;
box-shadow: 0 -8px 24px 0 rgba(36,27,22,.10);
}
/* Зона загрузки: файл кладут перетаскиванием, вставкой из буфера или
обычным выбором. Сам спрятан, но остаётся рабочим —
без скриптов зона превращается в кликабельный label и всё грузится. */
.dropzone {
display: block;
width: 100%;
padding: 22px 18px;
text-align: center;
cursor: pointer;
background: var(--bg-tertiary);
border: 2px dashed var(--border-light);
border-radius: 12px;
color: var(--text-secondary);
transition: border-color .15s ease, background-color .15s ease;
}
.dropzone:hover { border-color: var(--accent); background: var(--bg-hover); }
.dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone input[type="file"] {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.dropzone-icon { font-size: 1.8rem; color: var(--accent); line-height: 1; }
.dropzone-hint { font-size: .8rem; color: var(--text-muted); margin-top: 6px; }
.dropzone-hint kbd {
padding: 1px 5px;
font-size: .72rem;
background: var(--bg-hover);
border: 1px solid var(--border-light);
border-radius: 4px;
color: var(--text-secondary);
}
.dropzone-file { display: none; align-items: center; gap: 12px; text-align: left; }
/* Без min-width флекс-элемент не даёт себя ужать, и длинное имя файла
растягивает зону вместо того, чтобы обрезаться многоточием. */
.dropzone-file-info { min-width: 0; }
.dropzone.has-file .dropzone-empty { display: none; }
.dropzone.has-file .dropzone-file { display: flex; }
.dropzone-preview {
width: 56px;
height: 56px;
flex: none;
object-fit: contain;
border-radius: 8px;
background: var(--bg-hover);
border: 1px solid var(--border-color);
}
/* --- Страница входа ------------------------------------------------------ */
.login-wrapper {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background:
radial-gradient(circle at 20% 20%, rgba(99, 102, 241, .15) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(139, 92, 246, .10) 0%, transparent 50%),
var(--bg-primary);
}
.login-box { width: 100%; max-width: 400px; }
/* На светлой теме подложка светлая, а логотип белый — выворачиваем в чёрный.
Логотип одноцветный, поэтому invert честно даёт исходное начертание. */
.login-logo { height: 44px; width: auto; }
[data-bs-theme="light"] .login-logo { filter: invert(1); }
.login-box .card { border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); }
/* --- Скроллбар ----------------------------------------------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
/* --- Адаптив ------------------------------------------------------------- */
@media (max-width: 991.98px) {
.admin-sidebar { transform: translateX(-100%); transition: transform .2s ease; }
.admin-sidebar.is-open { transform: translateX(0); }
.admin-content { margin-left: 0; }
.admin-topbar { padding: 10px 16px; }
.admin-main { padding: 18px 16px 40px; }
.sidebar-toggle { display: inline-flex; }
}
@media (max-width: 767.98px) {
.week-row { grid-template-columns: 1fr 1fr; }
.week-row > :first-child { grid-column: 1 / -1; }
}
/* Зона, в которую уйдёт Ctrl+V. Отметка нужна только когда зон несколько:
промах положил бы кадр не в тот слот, а заметили бы это уже на витрине. */
.dropzone.is-active { border-color: var(--accent); border-style: solid; }
/* Узкая зона для строки таблицы: в разделе добавок их на странице до полусотни,
и полноразмерная растянула бы список на несколько экранов. */
.dropzone--compact { padding: 10px 12px; border-radius: 10px; }
.dropzone--compact .dropzone-icon { font-size: 1.1rem; }
.dropzone--compact .dropzone-empty > span { font-size: .8rem; }
.dropzone--compact .dropzone-preview { width: 40px; height: 40px; }
/* --- Баннеры -------------------------------------------------------------- */
/* Миниатюра в списке. Баннер широкий, поэтому пропорции держим 16:6 —
так в списке сразу видно, что кадр обрежется, если он вертикальный. */
.banner-thumb {
display: block;
width: 120px;
aspect-ratio: 16 / 6;
object-fit: cover;
border-radius: 8px;
border: 1px solid var(--border-color);
background: var(--bg-tertiary);
}
.banner-thumb.is-empty {
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-size: .7rem;
text-align: center;
}
/* Превью в карточке — то же соотношение, крупнее. */
.banner-preview {
width: 100%;
aspect-ratio: 16 / 6;
border-radius: 12px;
border: 1px solid var(--border-color);
background: var(--bg-tertiary);
overflow: hidden;
}
.banner-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner-preview .is-empty {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: var(--text-muted);
font-size: .85rem;
}
/* Выбор точек: список может вырасти, поэтому он прокручивается, а не
растягивает форму на несколько экранов. */
.point-picker {
max-height: 220px;
overflow-y: auto;
padding: 10px 12px;
border: 1px solid var(--border-color);
border-radius: 10px;
background: var(--bg-tertiary);
}
/* --- Диалоги разделов ----------------------------------------------------- */
/* Бутстраповского JS в админке нет и заводить его ради одной модалки незачем:
берём нативный