@charset "utf-8";
/* CSS Document */
:root,
html[data-theme="light"] {
color-scheme: light;
--ui-scale: 1; /* per-breakpoint UI scale; stepped down per breakpoint (see below) */
--ui-zoom: 0.9; /* global default zoom knob: whole UI 10% smaller at EVERY breakpoint
(incl. 1920+), multiplying the rem base together with --ui-scale.
Rollback = 1. Single consumer (the html font-size calc) — see
AGENTS.md §12 and tests/test_editor_scaling_contract.py. */
--font-family-base: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* --ui-scale (set per breakpoint below) scales the rem base on , so every
rem-based token below shrinks together on smaller viewports. Values are px/16. */
--space-0: 0;
--space-1: 0.125rem; /* 2px */
--space-2: 0.25rem; /* 4px */
--space-3: 0.375rem; /* 6px */
--space-4: 0.5rem; /* 8px */
--space-5: 0.625rem; /* 10px */
--space-6: 0.75rem; /* 12px */
--space-7: 1rem; /* 16px */
--space-8: 1.25rem; /* 20px */
--space-9: 1.5rem; /* 24px */
--space-10: 2rem; /* 32px */
--space-11: 2.5rem; /* 40px */
--radius-xs: 0.125rem; /* 2px */
--radius-sm: 0.25rem; /* 4px */
--radius-control: 0.375rem; /* 6px */
--radius-md: 0.5rem; /* 8px */
--radius-lg: 0.75rem; /* 12px */
--radius-pill: 999px; /* pill cap — stays px */
--font-size-2xs: 0.625rem; /* 10px */
--font-size-xs: 0.6875rem; /* 11px */
--font-size-sm: 0.75rem; /* 12px */
--font-size-md: 0.8125rem; /* 13px */
--font-size-lg: 0.875rem; /* 14px */
--font-size-xl: 1rem; /* 16px */
--font-size-2xl: 1.125rem; /* 18px */
--font-size-title: 1.75rem; /* 28px */
--line-height-tight: 1;
--line-height-snug: 1.2;
--line-height-normal: 1.35;
--line-height-relaxed: 1.5;
--control-height-xs: 1.4375rem; /* 23px */
--control-height-sm: 1.6875rem; /* 27px */
--control-height-md: 2.25rem; /* 36px */
--control-height-lg: 2.75rem; /* 44px */
/* Shared bottom-dock height: .export-actions-bar AND the variants panel default —
one token so their top dividers sit on the same line at every zoom.
142px = export bar's natural content (20 pad + 36 btn + 10 gap + 36 btn + 40 pad). */
--bottom-dock-h: 8.875rem; /* 142px */
--variants-header-h: 3.125rem; /* 50px — same as the color-picker controls row */
--icon-size-sm: 0.875rem; /* 14px */
--icon-size-md: 1rem; /* 16px */
--icon-size-lg: 1.25rem; /* 20px */
--color-page: #F9F9F9;
--color-surface: #FFFFFF;
--color-surface-subtle: #FAFAFA;
--color-surface-muted: #F3F3F3;
--color-surface-hover: #E8E8E8;
--color-surface-active: #D8D8D8;
--color-border: #D8D8D8;
--color-border-strong: #CCCCCC;
--color-text: #454545;
--color-text-muted: #7F7F7F;
--color-text-subtle: #9CA3AF;
--color-ink: #3B3B3B;
--color-ink-hover: #5C5C5C;
--color-on-ink: #FFFFFF;
--color-brand: #2BBB75;
--color-brand-hover: #27A868;
--color-brand-active: #1B7A41;
--color-brand-soft: #D1F5E4;
--color-brand-soft-text: #1A3D2B;
--color-on-brand: #092114;
--color-success: #16A34A;
--color-success-soft: #DCFCE7;
--color-success-text: #166534;
--color-warning: #D97706;
--color-warning-soft: #FEF3C7;
--color-warning-text: #92400E;
--color-danger: #DC2626;
--color-error: var(--color-danger);
--color-danger-soft: #FEF2F2;
--color-danger-text: #991B1B;
--color-info: #2563EB;
--color-info-soft: #EFF6FF;
--color-info-text: #1D4ED8;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
--shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.2);
--shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.35);
--focus-ring: 0 0 0 2px rgba(43, 187, 117, 0.28);
--export-zone-width: 24.375rem; /* 390px logical: JS WIDTH_DEFAULT=390 = 380 collapse + 10px buffer; export_resize.js overrides with (logical/16)rem */
--min-tile-size: 15.625rem; /* 250px */
--progress-percent: 0%;
--thumb-color: #808080;
--primary-sidebar-width: 4.0625rem; /* 65px */
--primary-sidebar-expanded-width: 11rem; /* 176px */
--secondary-sidebar-width: 6.25rem; /* 100px */
--sidebar-width: calc(var(--primary-sidebar-width) + var(--secondary-sidebar-width));
/* Editor layout floors — single source of truth, read by both the grid and
export_resize.js (via a probe). Do NOT hardcode these rem numbers elsewhere. */
--import-zone-min: 20rem; /* 320px */
--import-zone-max: 32.5rem; /* 520px */
--import-zone-target: clamp(var(--import-zone-min), 27vw, var(--import-zone-max));
--templates-zone-min: 36.25rem; /* 580px */
--export-zone-min: 7.5rem; /* 120px */
/* Import sub-row (All files + dynamic spread buttons). PERMANENT - the track is
always the row height; selection only changes the left-side buttons, not the row. */
--spread-action-row-height: 2.75rem; /* 44px, matches templates-filter-bar/export-actions-row */
--spread-action-row-track: var(--spread-action-row-height);
/* Compatibility aliases for the existing portal CSS. */
--radius: var(--radius-md);
--border-color: var(--color-border);
--border: 0.5px solid var(--color-border);
--spread-border: 0.5px solid var(--color-border-strong);
--text-main: var(--color-text);
--text-secondary: var(--color-text-muted);
--bg-main: var(--color-surface);
--bg-hover-icon: var(--color-surface-hover);
--bg-grey: var(--color-surface-muted);
--bg-project: var(--color-surface-subtle);
--bg-grey-light: var(--color-page);
--bg-grey-project: var(--color-surface-subtle);
--bg-dark: var(--color-ink);
--bg-active: var(--color-ink-hover);
--bg-activer: var(--color-ink-hover);
--bg-secondary: var(--color-page);
--bg-tertiary: var(--color-surface-muted);
--bg-card: var(--color-surface);
--accent: var(--color-text);
--accent-color: var(--color-info);
--accent-blue: var(--color-info);
--green: var(--color-brand);
--red: var(--color-danger-soft);
--text-primary: var(--color-text);
--text-muted: var(--color-text-muted);
--muted-text: var(--color-text-muted);
--color-border-muted: var(--color-border);
--color-surface-overlay: var(--color-surface);
--sidebar-green: var(--color-brand);
--sidebar-green-dark: var(--color-brand-hover);
--sidebar-green-soft: var(--color-brand-soft);
}
html[data-theme="dark"] {
color-scheme: dark;
--color-page: #101210;
--color-surface: #171A18;
--color-surface-subtle: #1F2420;
--color-surface-muted: #252B26;
--color-surface-hover: #2F3731;
--color-surface-active: #3A443D;
--color-border: #343B35;
--color-border-strong: #465047;
--color-text: #E9EEE9;
--color-text-muted: #A8B2AA;
--color-text-subtle: #7E8B82;
--color-ink: #E9EEE9;
--color-ink-hover: #CBD6CD;
--color-on-ink: #101210;
--color-brand: #2BBB75;
--color-brand-hover: #35C983;
--color-brand-active: #6BDDA3;
--color-brand-soft: #173B2A;
--color-brand-soft-text: #B9F3D3;
--color-on-brand: #081A10;
--color-success: #4ADE80;
--color-success-soft: #123521;
--color-success-text: #BBF7D0;
--color-warning: #FBBF24;
--color-warning-soft: #3A2A0D;
--color-warning-text: #FDE68A;
--color-danger: #F87171;
--color-error: var(--color-danger);
--color-danger-soft: #3B1717;
--color-danger-text: #FECACA;
--color-info: #60A5FA;
--color-info-soft: #172B4D;
--color-info-text: #BFDBFE;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.42);
--shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.55);
--shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.72);
--focus-ring: 0 0 0 2px rgba(43, 187, 117, 0.36);
}
* {
font-family: var(--font-family-base);
}
body {
font-family: var(--font-family-base);
}
/* Root rem base — drives all rem tokens. base = 16px * --ui-scale * --ui-zoom.
--ui-scale steps per breakpoint (media blocks below); --ui-zoom is the global
default-size knob (1 = identity; 0.9 = whole UI 10% smaller everywhere).
font-size lives on ONLY; the body text size is set separately on
so it does not fight the rem base. */
html {
font-size: calc(16px * var(--ui-scale) * var(--ui-zoom));
}
body {
font-size: var(--font-size-sm);
}
/* Stepped global scale: 1920px+ untouched, shrink progressively below.
1700/1500 unchanged; stronger steps start <1400 (import also narrows there, see §2). */
@media (max-width: 1700px) { :root, html[data-theme="light"] { --ui-scale: 0.94; } }
@media (max-width: 1500px) { :root, html[data-theme="light"] { --ui-scale: 0.88; } }
@media (max-width: 1400px) {
:root, html[data-theme="light"] {
--ui-scale: 0.72;
/* 350px logical = 340px (21.25rem) collapse threshold + 10px buffer. Both the
threshold and this width are rem now, so they stay in the same logical frame
at every --ui-scale/--ui-zoom. */
--import-zone-target: 21.875rem;
}
}
@media (max-width: 1280px) {
:root, html[data-theme="light"] {
--ui-scale: 0.67;
--import-zone-target: 21.875rem; /* 350px logical */
}
}
html,
body {
margin: 0;
font-family: var(--font-family-base);
background: var(--color-page);
color: var(--text-main);
overflow: hidden;
/* ОКОНЧАТЕЛЬНОЕ БЛОКРР РћР’РђРќРР• РџР РћРљР РЈРўРљР РЎРўР РђРќРЦЫ */
}
/* --- 1. БАЗА (Каркас) --- */
/* Только поведение и сброс стилей. Без цветов и размеров. */
.btn {
border-radius: var(--radius);
display: inline-flex; /* inline-flex лучше для кнопок, чтобы они стояли в ряд */
align-items: center;
justify-content: center;
font-family: var(--font-family-base);
cursor: pointer;
transition: all 0.2s ease-in-out;
text-decoration: none; /* На случай, если кнопка будет ссылкой */
border: 1px solid transparent; /* Резервируем место под рамку, чтобы размеры не прыгали */
box-sizing: border-box; /* Важно для точных размеров */
}
/* Базовые настройки иконки внутри кнопки */
.btn svg {
flex-shrink: 0;
fill: currentColor;
/* Размеры иконки будут задаваться в классах размеров ниже */
}
/* --- 2. РАЗМЕРЫ (Геометрия) --- */
/* S (Small) — Ваша текущая маленькая кнопка (27px) */
.btn-sm {
height: var(--control-height-sm);
padding-inline: var(--space-4);
font-size: var(--font-size-md);
gap: var(--space-3);
}
.btn-sm svg {
width: var(--icon-size-sm);
height: var(--icon-size-sm);
}
/* M (Medium) — Стандартная кнопка (повыше) */
.btn-md {
height: var(--control-height-md);
padding-inline: var(--space-6);
font-size: var(--font-size-lg);
gap: var(--space-4);
}
.btn-md svg {
width: var(--icon-size-md);
height: var(--icon-size-md);
}
/* L (Large) — Большая заметная кнопка */
.btn-lg {
height: var(--control-height-lg);
padding-inline: var(--space-7);
font-size: var(--font-size-xl);
gap: var(--space-5);
}
.btn-lg svg {
width: var(--icon-size-lg);
height: var(--icon-size-lg);
}
/* --- 3. РЎРљРРќР« (Цвета) --- */
/* Темная (Solid) */
.btn-dark {
background-color: var(--bg-dark);
color: var(--color-on-ink);
}
.btn-dark:hover {
background-color: var(--bg-active);
}
/* Светлая с обводкой (Outline) */
.btn-outline {
background-color: transparent;
color: var(--bg-dark);
border-color: var(--bg-dark); /* Красим рамку */
}
.btn-outline:hover {
background-color: var(--bg-grey);
}
/* Можно добавить сколько угодно вариантов, например, Акцентная */
.btn-primary {
background-color: var(--green); /* Ваш зеленый из переменных */
color: var(--color-on-brand);
}
/* --- ГРУППА КНОПОК (Split Button) --- */
.btn-group {
display: inline-flex; /* Выстраиваем кнопки в ряд */
vertical-align: middle;
}
/* 1. Убираем скругления на стыке */
/* У первой кнопки убираем правые углы */
.btn-group > .btn:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
/* У последней кнопки убираем левые углы */
.btn-group > .btn:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
/* Разделитель!
Добавляем тонкую линию слева от стрелки.
Рспользуем полупрозрачный белый, чтобы было РІРёРґРЅРѕ РЅР° темном фоне.
Если фон светлый - линию почти не будет видно (можно настроить отдельно).
*/
border-left: 1px solid rgba(255, 255, 255, 0.15);
}
/* Для Outline (контурных) кнопок логика чуть другая:
Чтобы двойная рамка не была жирной (1px + 1px),
сдвигаем вторую кнопку влево на 1px */
.btn-group > .btn-outline + .btn-outline {
margin-left: -1px;
border-left: 1px solid var(--bg-dark); /* Возвращаем цвет рамки */
}
/* --- РЈРўРР›РРўРђ: РљРЅРѕРїРєР° только СЃ РёРєРѕРЅРєРѕР№ --- */
/* Чтобы квадратик со стрелкой не был широким, как обычная кнопка */
.btn.btn-icon-only {
padding-inline: 0; /* Убираем боковые отступы текста */
width: 1.25rem; /* Фиксированная ширина */
justify-content: center; /* Центрируем иконку строго */
padding: 0;
}
/* Если кнопка Medium - ширина больше */
.btn-md.btn-icon-only {
width: 2.25rem; /* 36px */
}
/* --- НОВЫЙ РАЗМЕР: XS (Extra Small) --- */
/* Для тех самых кнопок 23px */
.btn-xs {
height: var(--control-height-xs);
font-size: var(--font-size-sm);
padding-inline: var(--space-2);
gap: var(--space-2);
}
/* Настройка иконки для XS */
.btn-xs svg {
width: 0.9375rem; /* Рли 12px, зависит РѕС‚ детальности РёРєРѕРЅРєРё */
height: 0.9375rem; /* 15px */
}
/* Если кнопка XS должна быть квадратной (только иконка) */
.btn-xs.btn-icon-only {
width: 1.4375rem; /* 23px */
min-width: 1.4375rem; /* Гарантируем минимальную ширину */
max-width: 1.4375rem; /* Предотвращаем растяжение */
padding: 0;
flex-shrink: 0; /* Не сжимаем в flexbox */
}
/* --- НОВЫЙ РЎРљРРќ: Ghost (Призрачная) --- */
/* Прозрачная, без рамок. Появляется фон только при наведении. */
.btn-ghost {
background-color: transparent;
color: var(--text-main); /* Цвет иконки/текста по умолчанию */
border-color: transparent; /* Рамка прозрачная, но место занимает (чтобы не прыгало) */
padding: 0;
}
.btn-ghost:hover {
background-color: var(--border-color); /* Цвет фона при наведении */
color: var(--text-main); /* Цвет иконки при наведении (можно поменять, если нужно) */
}
/* В вашем оригинале было stroke-width.
Если ваши иконки линейные (outline), добавляем это: */
.btn-ghost svg {
stroke-width: 1px;
}
/* Active state for filter buttons */
.btn-ghost.filter-active {
background-color: var(--bg-dark); /* Black background */
color: var(--color-on-ink); /* White icon */
}
.btn-ghost.filter-active:hover {
background-color: var(--bg-active); /* Slightly lighter on hover */
color: var(--color-on-ink);
}
/* Active state for view mode buttons (export-view-rows, export-view-compact, export-view-large) */
.btn-ghost.is-active {
background-color: var(--bg-dark); /* Black background */
color: var(--color-on-ink); /* White icon */
}
.btn-ghost.is-active:hover {
background-color: var(--bg-active); /* Slightly lighter on hover */
color: var(--color-on-ink);
}
/* Disabled state for ghost buttons (gray icon, no hover effect) */
.btn-ghost.is-disabled,
.btn-ghost:disabled {
color: var(--color-text-subtle); /* Gray icon */
cursor: not-allowed;
pointer-events: none;
}
.btn-ghost.is-disabled:hover,
.btn-ghost:disabled:hover {
background-color: transparent; /* No hover effect */
color: var(--color-text-subtle);
}
.sidebar-avatar {
width: 3.125rem; /* 50px */
height: 3.125rem; /* 50px */
border-radius: 999px;
background: var(--color-surface-active);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8125rem; /* 13px */
cursor: pointer;
border-bottom: var(--border);
}
.sidebar {
grid-area: sidebar;
position: static;
height: 100%;
display: flex;
align-items: stretch;
justify-content: flex-start;
z-index: 100;
overflow: hidden;
}
.sidebar.has-open-language-switcher {
z-index: 10000;
overflow: visible;
}
.primary-sidebar {
width: var(--primary-sidebar-width);
min-width: var(--primary-sidebar-width);
height: 100%;
background: var(--sidebar-green);
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
padding: 0;
border-left: var(--border);
box-sizing: border-box;
overflow: hidden;
transition: width 0.3s ease-in-out, min-width 0.3s ease-in-out;
}
.primary-sidebar.has-open-language-switcher {
overflow: visible;
}
.sidebar-brand {
height: 4.0625rem; /* 65px */
min-height: 4.0625rem; /* 65px */
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.48);
box-sizing: border-box;
}
.sidebar-brand-toggle {
width: 100%;
height: 100%;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: #FFFFFF;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
transition: none;
}
.sidebar-brand-toggle:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.58);
}
.sidebar-brand-logo-wrap {
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
}
.sidebar-brand-logo {
flex: 0 0 auto;
width: 1.875rem; /* 30px */
height: 1.875rem; /* 30px */
display: block;
}
.sidebar-brand-logo--compact {
width: 1.5625rem; /* 25px */
height: 1.5625rem; /* 25px */
}
.sidebar-brand-logo--expanded {
display: none;
width: 5.3125rem; /* 85px */
height: auto;
}
.sidebar-brand-sidebar-icon {
width: 1.1875rem; /* 19px */
height: 1.1875rem; /* 19px */
padding: 0.25rem; /* 4px */
display: none;
flex: 0 0 auto;
color: rgba(255, 255, 255, 0.72);
border-radius: var(--radius-control);
box-sizing: content-box;
transition: background-color 0.16s ease-in-out, color 0.16s ease-in-out;
}
.sidebar-brand-sidebar-icon:hover,
.sidebar-brand-toggle:focus-visible .sidebar-brand-sidebar-icon {
color: #FFFFFF;
background: rgba(0, 0, 0, 0.16);
}
.sidebar-brand-sidebar-icon:active {
color: #FFFFFF;
background: rgba(0, 0, 0, 0.26);
transition-duration: 0.08s;
}
.sidebar[data-sidebar-expanded="false"] .primary-sidebar:hover .sidebar-brand-logo--compact,
.sidebar[data-sidebar-expanded="false"] .sidebar-brand-toggle:focus-visible .sidebar-brand-logo--compact {
display: none;
}
.sidebar[data-sidebar-expanded="false"] .primary-sidebar:hover .sidebar-brand-sidebar-icon,
.sidebar[data-sidebar-expanded="false"] .sidebar-brand-toggle:focus-visible .sidebar-brand-sidebar-icon {
display: block;
}
.sidebar[data-sidebar-expanded="true"] .sidebar-brand-logo--compact {
display: none;
}
.sidebar[data-sidebar-expanded="true"] .sidebar-brand-toggle {
justify-content: space-between;
padding-inline: 1.375rem 1.125rem; /* 22px 18px */
}
.sidebar[data-sidebar-expanded="true"] .sidebar-brand-logo--expanded {
display: block;
}
.sidebar[data-sidebar-expanded="true"] .sidebar-brand-sidebar-icon {
display: block;
}
/* NOTE: primary-sidebar width is driven SOLELY by --primary-sidebar-width (flipped to the
expanded value by the .global-container:has(...) rule below). The old inner width override
here was a second force that, combined with the :has var change and .sidebar{overflow:hidden},
let primary cover the light sidebar and not restore on collapse — removed. */
/* When the sidebar is expanded, widen both the primary element AND the grid track.
IMPORTANT: --sidebar-width is declared on :root with calc(var(--primary-sidebar-width) + …);
a custom-property calc() is resolved AT ITS DECLARATION SITE, so redefining
--primary-sidebar-width only on .global-container does NOT recompute :root's --sidebar-width
(.global-container just inherits the already-computed collapsed value). We MUST redefine
--sidebar-width here too — otherwise the grid track stays narrow and the expanding primary
overlaps/clips the secondary sidebar (with .sidebar{overflow:hidden}). Declaring it here means
its calc resolves with the expanded value, and the grid (same element) reads the wider track,
pushing the secondary sidebar right. Replaces the old JS px write on documentElement. */
.global-container:has(.sidebar[data-sidebar-expanded="true"]) {
--primary-sidebar-width: var(--primary-sidebar-expanded-width);
--sidebar-width: calc(var(--primary-sidebar-expanded-width) + var(--secondary-sidebar-width));
}
.secondary-sidebar {
position: relative;
width: var(--secondary-sidebar-width);
min-width: var(--secondary-sidebar-width);
height: 100%;
margin-top: 0;
background: var(--sidebar-green-soft);
border-right: var(--border);
border-left: var(--border);
box-sizing: border-box;
overflow: hidden;
}
.secondary-sidebar::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4.0625rem; /* 65px */
background: var(--sidebar-green-soft);
border-bottom: 1px solid rgba(255, 255, 255, 0.48);
box-sizing: border-box;
pointer-events: none;
}
.global-container.creator-mode-active,
.global-container.presentation-mode-active {
--sidebar-width: var(--primary-sidebar-width);
}
/* Creator/presentation hide the secondary sidebar, so the track is primary-only.
When MANUALLY pinned expanded in those modes, use expanded-primary only (no
secondary term). Hover does not widen the track (overlay only), so no :hover
variant here. */
.global-container.creator-mode-active:has(.sidebar[data-sidebar-expanded="true"]),
.global-container.presentation-mode-active:has(.sidebar[data-sidebar-expanded="true"]) {
--sidebar-width: var(--primary-sidebar-expanded-width);
}
.global-container.creator-mode-active .secondary-sidebar,
.global-container.presentation-mode-active .secondary-sidebar {
display: none;
}
.sidebar-nav {
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
}
.sidebar-nav--primary {
padding: 0;
}
.sidebar-nav-btn {
position: relative;
width: 100%;
height: 3.4375rem; /* 55px */
min-height: 3.4375rem; /* 55px */
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: rgba(255, 255, 255, 0.86);
cursor: pointer;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0.75rem; /* 12px */
box-sizing: border-box;
transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.sidebar[data-sidebar-expanded="true"] .sidebar-nav-btn {
justify-content: flex-start;
padding-inline: 1.375rem 0.75rem; /* 22px 12px */
}
.sidebar-nav-btn::before {
content: "";
position: absolute;
left: 0;
top: 0.625rem; /* 10px */
bottom: 0.625rem; /* 10px */
width: 0.3125rem; /* 5px */
border-radius: 0;
background: transparent;
}
.icon-wrapper {
width: 2.125rem; /* 34px */
height: 2.125rem; /* 34px */
min-width: 2.125rem; /* 34px */
display: flex;
align-items: center;
justify-content: center;
border-radius: 0;
background: transparent;
}
.nav-icon {
width: 1.125rem; /* 18px */
height: 1.125rem; /* 18px */
color: currentColor;
transition: color 0.2s ease-in-out;
}
.nav-icon-img {
width: 1.75rem; /* 28px */
height: 1.75rem; /* 28px */
display: block;
object-fit: contain;
flex: 0 0 auto;
opacity: 0.86;
transition: opacity 0.16s ease-in-out, filter 0.16s ease-in-out;
}
.btn-text {
font-size: 0.75rem; /* 12px */
font-weight: 600;
color: #3B3B3B;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.sidebar .btn-text {
color: rgba(255, 255, 255, 0.82);
}
.primary-sidebar .btn-text {
display: none;
}
.sidebar[data-sidebar-expanded="true"] .primary-sidebar .btn-text {
display: inline;
opacity: 1;
visibility: visible;
}
.sidebar-nav-btn--active {
color: #FFFFFF;
}
.sidebar-nav-btn--active .btn-text {
color: #FFFFFF;
}
.sidebar-nav-btn--active .nav-icon-img {
opacity: 1;
filter: brightness(1.12);
}
.sidebar-nav-btn--active::before {
background: var(--color-surface);
}
.sidebar-nav-btn:hover {
color: #FFFFFF;
}
.sidebar-nav-btn:hover .btn-text {
color: #FFFFFF;
}
.sidebar-nav-btn:hover .nav-icon-img {
opacity: 1;
filter: brightness(1.16);
}
.sidebar-nav-btn:hover .icon-wrapper,
.sidebar-nav-btn--active .icon-wrapper {
background: transparent;
}
.sidebar-nav-btn.is-disabled,
.sidebar-nav-btn:disabled {
cursor: default;
opacity: 0.46;
}
.sidebar-nav-btn.is-disabled:hover,
.sidebar-nav-btn:disabled:hover {
color: rgba(255, 255, 255, 0.86);
}
.sidebar-nav-btn.is-disabled:hover .btn-text,
.sidebar-nav-btn:disabled:hover .btn-text {
color: rgba(255, 255, 255, 0.82);
}
.sidebar-nav-btn.is-disabled:hover .nav-icon-img,
.sidebar-nav-btn:disabled:hover .nav-icon-img {
opacity: 0.86;
filter: none;
}
#sidebar-btn-creator {
border-bottom: 1px solid rgba(255, 255, 255, 0.38);
}
.sidebar-nav-divider {
width: 100%;
height: 1px;
margin: 0;
background: rgba(255, 255, 255, 0.38);
}
.sidebar-spacer {
flex: 1 1 auto;
}
.sidebar-toggle-btn {
color: #FFFFFF;
background: transparent;
border: 0;
}
/* --- РЎРўРЛРДЛЯ ВЕРХНЕЙ ПАНЕЛР--- */
/* --- РЎРўРЛРДЛЯ ОБЛАСТРСПРАВА РћРў САЙДБАРА --- */
.sidebar-subnav {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
padding: 4.0625rem 0 0; /* 65px */
}
.sidebar-subnav[data-category-panel] {
display: none;
}
.sidebar[data-active-category="magazines"] .sidebar-subnav[data-category-panel="magazines"] {
display: flex;
}
/* Pattern Builder shares the secondary sidebar; reveal its subnav when active. */
.sidebar[data-active-category="presentation-pattern"] .sidebar-subnav[data-category-panel="presentation-pattern"] {
display: flex;
}
.sidebar-subcategory-btn {
width: 100%;
height: var(--secondary-sidebar-width);
min-height: var(--secondary-sidebar-width);
padding: 0.625rem; /* 10px */
border: 0;
border-radius: 0;
background: transparent;
color: var(--text-main);
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem; /* 8px */
box-sizing: border-box;
transition: background 0.16s ease-in-out, color 0.16s ease-in-out, opacity 0.16s ease-in-out;
}
.sidebar-subcategory-btn--active {
background: var(--sidebar-green-soft);
}
.sidebar-subcategory-btn:hover:not(:disabled) {
background: rgba(32, 184, 117, 0.08);
}
.sidebar-subcategory-btn.is-disabled,
.sidebar-subcategory-btn:disabled {
cursor: default;
opacity: 0.52;
}
.sidebar-subcategory-thumb {
width: 5.3125rem; /* 85px */
height: 5.3125rem; /* 85px */
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.sidebar-subcategory-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sidebar-subcategory-thumb--icon {
position: relative;
}
.sidebar-subcategory-thumb--icon img {
object-fit: contain;
}
.sidebar-subcategory-thumb--icon .subcategory-icon-base {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.sidebar-subcategory-thumb--icon .subcategory-icon-overlay {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.18s ease;
}
.sidebar-subcategory-btn:hover:not(:disabled) .subcategory-icon-overlay {
opacity: 1;
}
.sidebar-subcategory-btn.is-disabled .sidebar-subcategory-thumb img,
.sidebar-subcategory-btn:disabled .sidebar-subcategory-thumb img {
filter: grayscale(0.35);
}
.sidebar-subcategory-label {
font-size: 0.8125rem; /* 13px */
font-weight: 500;
line-height: 1.2;
color: var(--text-main);
text-align: center;
}
.global-container.presentation-mode-active .preferences-dropdown[data-finish-control] {
display: none;
}
.main-layout {
margin-left: 6.25rem; /* 100px */
/* вместо padding-left */
height: 100vh;
width: calc(100% - 6.25rem); /* 100px */
/* чтобы учесть ширину сайдбара */
display: flex;
flex-direction: column;
overflow: hidden;
/* блокируем общий скролл страницы */
background-color: var(--bg-main);
}
/* --- ОБНОВЛЕННЫЙ TOP-BAR --- */
.top-bar {
grid-area: top-bar;
flex-shrink: 0;
background-color: var(--bg-main);
border-bottom: var(--border);
display: flex;
align-items: center;
padding: 0 1.75rem 0 0.5rem; /* 28px 8px */
gap: 0;
height: 4.0625rem; /* 65px */
z-index: 200; /* Above sidebar (100) */
}
.topbar-hidden-control {
display: none !important;
}
/* Hamburger menu button */
.hamburger-menu-btn {
/* Inherits from .icons-square-button */
border: none !important; /* Override border from parent class */
padding-left: 0.5rem; /* 8px */
}
/* Top-bar logo */
.top-bar-logo {
height: 1.25rem; /* 20px */
width: auto;
display: block;
margin-left: 0.625rem; /* 10px */
}
/* Spacer to push items to the right */
.top-bar-spacer {
flex-grow: 1;
}
.topbar-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1.125rem; /* 18px */
height: 100%;
flex: 0 0 auto;
margin-left: auto;
}
.topbar-uv-scale {
align-items: center;
gap: var(--space-2);
}
.topbar-uv-scale-label {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
white-space: nowrap;
}
.topbar-uv-scale-input {
width: 3.875rem; /* 62px */
font-size: var(--font-size-sm);
padding: var(--space-1) var(--space-2);
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
border-radius: var(--radius-sm);
text-align: right;
}
.inline-control-label {
margin-left: var(--space-3);
font-size: var(--font-size-md);
font-weight: 500;
}
.link-button {
background: none;
border: 0;
color: var(--color-info);
font-weight: 500;
padding: 0 var(--space-4);
cursor: pointer;
font-size: var(--font-size-md);
}
.overflow-ellipsis-label {
font-size: var(--font-size-lg);
font-weight: 700;
}
.topbar-separator {
width: 1px;
height: 1.625rem; /* 26px */
background: var(--border-color);
}
.topbar-icon-btn,
.topbar-text-btn {
height: 2.125rem; /* 34px */
min-width: 2.125rem; /* 34px */
border: 0;
border-radius: var(--radius);
background: var(--color-surface);
color: var(--text-main);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.16s ease-in-out, color 0.16s ease-in-out;
}
.topbar-icon-btn {
padding: 0;
color: var(--color-text-muted);
}
.topbar-icon-btn:hover,
.topbar-text-btn:hover {
background: var(--bg-grey);
}
/* User profile wrapper */
.user-profile-wrapper {
position: relative;
display: flex;
align-items: center;
}
/* User profile button */
.user-profile-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
padding: 0 0.75rem; /* 12px */
border: none;
background: var(--color-surface);
cursor: pointer;
border-radius: var(--radius);
transition: background-color 0.2s;
}
.user-profile-btn:hover {
background: var(--bg-grey);
}
/* User avatar */
.user-avatar {
width: 2rem; /* 32px */
height: 2rem; /* 32px */
border-radius: 50%;
background: var(--color-surface-active);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
}
.user-avatar-initials {
font-size: 0.8125rem; /* 13px */
font-weight: 600;
color: #666;
text-transform: uppercase;
}
/* Username */
.username {
font-size: 0.875rem; /* 14px */
font-weight: 500;
color: var(--text-main);
white-space: nowrap;
}
/* Credit balance badge (shown next to username) */
.credit-badge {
display: inline-flex;
align-items: center;
justify-content: center;
height: 2.125rem; /* 34px */
min-width: 4.125rem; /* 66px */
padding: 0 0.625rem; /* 10px */
border: 0;
border-radius: var(--radius);
background: var(--color-surface);
font-size: 0.875rem; /* 14px */
font-weight: 500;
color: var(--text-main);
margin-left: 0;
text-decoration: none;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
cursor: pointer;
}
.credit-badge:hover {
background: var(--bg-grey);
color: var(--text-main);
}
.credit-badge.credit-badge--low {
background: var(--color-surface);
color: var(--text-main);
}
.credit-badge.credit-badge--empty {
background: var(--color-surface);
color: var(--text-main);
}
.credit-menu-wrapper {
position: relative;
display: flex;
align-items: center;
}
.credit-dropdown {
position: absolute;
top: calc(100% + 0.5rem); /* 8px */
right: 0;
width: 13.75rem; /* 220px */
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
display: none;
flex-direction: column;
gap: 0.625rem; /* 10px */
padding: 0.875rem 1rem; /* 14px 16px */
z-index: 9999;
box-sizing: border-box;
}
.credit-dropdown.is-open {
display: flex;
}
.credit-dropdown-label {
font-size: 0.75rem; /* 12px */
line-height: 1.35;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 0.25rem; /* 4px */
}
.credit-dropdown-value {
font-size: 0.75rem; /* 12px */
line-height: 1.35;
font-weight: 400;
color: var(--text-secondary);
}
.credit-dropdown-add {
width: max-content;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 1.75rem; /* 28px */
padding: 0 0.625rem; /* 10px */
border: 1px solid var(--text-secondary);
border-radius: var(--radius);
color: var(--text-main);
background: var(--color-surface);
text-decoration: none;
font-size: 0.75rem; /* 12px */
font-weight: 600;
}
.credit-dropdown-add:hover {
background: var(--bg-grey);
}
/* в”Ђв”Ђ Paywall Modal в”Ђв”Ђ */
.paywall-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
z-index: 10002;
display: none;
align-items: center;
justify-content: center;
}
.paywall-backdrop.is-visible {
display: flex;
animation: fadeIn 0.2s ease-out;
}
.paywall-window {
background: var(--bg-main, #fff);
border-radius: 0.75rem; /* 12px */
padding: 1.75rem 1.5rem 1.25rem; /* 28px 24px 20px */
width: 26.25rem; /* 420px */
max-width: 90vw;
box-shadow: var(--shadow-lg);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.875rem; /* 14px */
position: relative;
animation: scaleIn 0.2s ease-out;
}
.paywall-close {
position: absolute;
top: 0.625rem; /* 10px */
right: 0.625rem; /* 10px */
width: 1.75rem; /* 28px */
height: 1.75rem; /* 28px */
border: none;
background: transparent;
border-radius: var(--radius, 0.5rem); /* 8px */
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.125rem; /* 18px */
color: var(--text-secondary, #7F7F7F);
transition: background-color 0.15s, color 0.15s;
}
.paywall-close:hover {
background-color: var(--bg-grey, #F3F3F3);
color: var(--text-main, #454545);
}
.paywall-title {
font-size: 1.0625rem; /* 17px */
font-weight: 600;
color: var(--text-main, #454545);
margin: 0;
}
.paywall-sub {
font-size: 0.8125rem; /* 13px */
color: var(--text-secondary, #7F7F7F);
margin: 0;
}
.paywall-plans {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem; /* 8px */
width: 100%;
}
.paywall-plan-mini {
border: var(--border, 0.5px solid #D8D8D8);
border-radius: var(--radius, 0.5rem); /* 8px */
padding: 0.75rem 0.5rem; /* 12px 8px */
text-align: center;
display: flex;
flex-direction: column;
gap: 0.25rem; /* 4px */
}
.paywall-plan-name {
font-size: 0.75rem; /* 12px */
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary, #7F7F7F);
}
.paywall-plan-price {
font-size: 1.25rem; /* 20px */
font-weight: 700;
color: var(--text-main, #454545);
}
.paywall-plan-price span {
font-size: 0.75rem; /* 12px */
font-weight: 500;
color: var(--text-secondary, #7F7F7F);
}
.paywall-plan-credits {
font-size: 0.75rem; /* 12px */
color: var(--text-secondary, #7F7F7F);
}
.paywall-cta {
width: 100%;
justify-content: center;
text-decoration: none;
}
.paywall-cancel {
width: 100%;
justify-content: center;
}
/* в”Ђв”Ђ Export Lock в”Ђв”Ђ */
.is-export-locked {
opacity: 0.6;
}
.is-export-locked .lock-icon {
margin-right: 0.25rem; /* 4px */
flex-shrink: 0;
}
/* User profile dropdown */
.user-profile-dropdown {
position: absolute;
top: calc(100% + 0.5rem); /* 8px */
right: 0;
width: 13.75rem; /* 220px */
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
display: none;
flex-direction: column;
padding: 0.375rem 0; /* 6px */
z-index: 9999;
}
.user-profile-dropdown.is-open {
display: flex;
}
/* User profile menu item */
.user-profile-menu-item {
display: flex;
align-items: center;
gap: 0;
padding: 0.375rem 0.625rem; /* 6px 10px */
border: none;
background: transparent;
cursor: pointer;
font-size: 0.75rem; /* 12px */
line-height: 1.35;
font-weight: 400;
color: var(--bg-dark);
text-align: left;
transition: background-color 0.2s;
width: 100%;
}
.user-profile-menu-item:hover {
background-color: var(--bg-grey-light);
}
.user-profile-menu-item--danger {
color: var(--color-danger);
margin-top: 0.375rem; /* 6px */
}
.user-profile-menu-item--danger:hover {
background-color: rgba(239, 68, 68, 0.1);
}
/* Menu divider */
.user-profile-menu-divider {
height: 1px;
background: var(--border-color);
margin: 0.25rem 0; /* 4px */
}
.project-menu-bar {
flex: 1 1 auto;
min-width: 0;
height: 2.875rem; /* 46px */
align-self: flex-end;
background-color: transparent;
border-bottom: 0;
display: flex;
align-items: center;
padding: 0 0 0 0.75rem; /* 12px */
gap: 1.5625rem; /* 25px */
overflow: hidden;
}
.topbar-projects .btn-group {
display: flex;
align-items: center;
gap: 0.75rem; /* 12px */
margin-left: -0.75rem; /* -12px */
flex: 0 0 auto;
}
.content-wrapper {
flex-grow: 1;
/* <--- Занимает всю оставшуюся высоту */
/* Добавляем внутренние стили для трех колонок */
display: flex;
height: 100%;
/* Занимает 100% высоты родителя (оставшееся место) */
/* ОТМЕНА СКРОЛЛА: основной контент сам по себе не прокручивается */
overflow: hidden;
}
/* --- СТРУКТУРА КОЛОНОК (ВНУТРРcontent-wrapper) --- */
.block-a,
.block-b {
width: 15.625rem; /* 250px */
/* Фиксированная ширина */
flex-shrink: 0;
/* Не сжимаются */
border-right: var(--border);
height: 100%;
}
.scrollable-block {
flex-grow: 1;
/* Занимает все оставшееся место */
height: 100%;
/* <-- ГДЕ РџР РћРРЎРҐРћР”РРў РџР РћРљР РЈРўРљРђ --> */
overflow-y: auto;
/* Только этот блок прокручивается вертикально */
padding: 0 1.25rem; /* 20px */
/* Внутренние отступы для прокручиваемого контента */
}
.variant-menu-bar {
grid-area: variant-menu-bar;
flex-shrink: 0;
height: 3.4375rem; /* 55px */
flex-shrink: 0;
background-color: var(--bg-main);
border-bottom: var(--border);
display: flex;
align-items: center;
padding: 0 1.25rem; /* 20px */
gap: 1.5625rem; /* 25px */
}
/* ОБЛАСТЬ, РљРћРўРћР РђРЇ Р—РђРќРМАЕТ РћРЎРўРђРўРћРљ ВЫСОТЫ */
/* project-main-content теперь только для верхнего горизонтального ряда */
.project-main-content {
display: flex;
flex-direction: column;
flex: 0 1 auto;
width: 100%;
box-sizing: border-box;
min-height: 0;
}
.project-current-view {
flex-grow: 1;
display: flex;
flex-direction: column;
height: 100%;
}
/* --- 3. ВЕРХНРР™ Р РЇР” РЎ КОЛОНКАМР(Horizontal Row) --- */
.project-top-columns {
flex-grow: 1;
display: flex;
gap: 0.625rem; /* 10px */
}
.templates-gallery-header,
.template-settings-zone {
flex-shrink: 0;
/* Фиксированная высота */
height: 1.875rem; /* 30px */
/* Пример высоты */
/* ... стили ... */
}
.templates-gallery-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
/* скролл именно внутри */
padding-right: 1.25rem; /* 20px */
padding-top: 1.25rem; /* 20px */
padding-left: 1.25rem; /* 20px */
}
/* --- СТРУКТУРА КОЛОНОК (Template Zone Top Row) --- */
.template-zone-top-row {
display: flex;
}
/* --- БЛОКРВНУТРРГОРРЗОНТАЛЬНОГО РЯДА --- */
.file-picker-zone {
grid-area: file-picker-zone;
width: 25.9375rem; /* 415px */
/* как и было */
flex-shrink: 0;
background-color: var(--bg-project);
border-bottom: var(--border);
display: flex;
flex-direction: column;
height: 100%;
box-sizing: border-box;
}
/* Статус бар внизу зоны выбора файлов */
.status-bar-container {
height: 2.5rem; /* 40px */
border-bottom: var(--border);
background-color: var(--bg-grey-light);
display: flex;
align-items: center;
gap: 1.25rem; /* 20px */
font-size: 0.75rem; /* 12px */
flex-direction: row;
}
.active-spreads-number {
padding-left: 3.75rem; /* 60px */
width: auto;
}
.previous-next {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.5rem; /* 8px */
padding-right: 1.25rem; /* 20px */
}
.previous-next-label {
min-width: 3rem; /* 48px */
text-align: center;
font-variant-numeric: tabular-nums;
font-size: 0.75rem; /* 12px */
color: var(--color-text-muted);
}
.previous-next .icons-square-button {
width: 1.5rem; /* 24px */
height: 1.5rem; /* 24px */
padding-inline: 0;
}
.template-preview-zone {
grid-area: template-preview-zone;
flex-shrink: 0;
background-color: var(--bg-project);
display: flex;
flex-direction: column;
align-items: flex-start;
border-left: var(--border);
border-bottom: var(--border);
height: 100%;
box-sizing: border-box;
}
.preview-box {
background-color: #fbff08;
border-radius: var(--radius);
border: var(--border);
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
/* ПЛАВНАЯ РЁРР РРќРђ */
transition: width 0.25s ease;
}
/* большое превью по умолчанию */
.preview-box--large {
width: 21.875rem; /* 350px */
aspect-ratio: 1 / 1;
}
/* компактное превью */
.preview-box--small {
width: 14.5rem; /* 232px */
/* подбери под себя */
aspect-ratio: 1 / 1;
}
.preview-image-content {
width: 100%;
height: 100%;
/* Заполняет весь квадратный родитель */
object-fit: contain;
/* Вписывается, сохраняя пропорции (квадратная область) */
display: block;
aspect-ratio: 1 / 1;
/* Убеждаемся, что область изображения квадратная */
}
/* --- РЎРўРЛРДЛЯ РљРќРћРџРљР (Остаются такими же) --- */
.top-right-button {
position: absolute;
top: 0.625rem; /* 10px */
right: 0.625rem; /* 10px */
/* ... остальные стили кнопки ... */
}
.project-zone-wrapper {
flex: 0 0 auto;
display: flex;
flex-direction: column;
}
.content-area-wrapper {
flex: 1 1 auto;
display: flex;
flex-direction: column;
/* сверху мокап, ниже галерея */
overflow: hidden;
min-height: 0;
/* чтобы дети могли сжиматься */
}
/* 1. РЎРўРЛЬ ТЕКСТА (H2 GREY) */
.zone-label-text {
/* Заданные вами стили */
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-size: 0.875rem; /* 14px */
line-height: 0.875rem; /* 14px */
letter-spacing: -0.01em;
color: var(--bg-dark);
}
/* 2. РЎРўРЛЬ РџРћР—РР¦РРћРќРР РћР’РђРќРРЇ */
.zone-label {
position: absolute;
top: 1.0625rem; /* 17px */
left: 1.25rem; /* 20px */
z-index: 10;
}
.label-secondary-text {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 0.9375rem; /* 15px */
line-height: 0.9375rem; /* 15px */
letter-spacing: -0.01em;
color: var(--bg-active);
}
/* Проекты */
.project-tab {
position: relative;
/* обязательно! */
height: 1.875rem; /* 30px */
padding: 0 0.875rem; /* 14px */
background: none;
border: none;
font-weight: 600;
font-size: 1rem; /* 16px */
color: var(--color-text-muted);
cursor: pointer;
display: flex;
align-items: center;
border-radius: 0.375rem; /* 6px */
/* на всякий случай сбрасываем */
position: relative;
}
.project-tab:hover {
color: var(--bg-dark);
background-color: var(--bg-grey-light);
}
.project-tab--selected {
color: var(--bg-dark);
font-weight: 700;
}
.project-tab--selected::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -0.5rem; /* -8px */
height: 0.25rem; /* 4px */
background: var(--bg-dark);
border-radius: 0;/
}
.project-add-btn {
display: inline-flex;
align-items: center;
gap: 0.375rem; /* 6px */
padding: 0.5rem 0.625rem; /* 8px 10px */
border-radius: var(--radius);
border: var(--border);
background: var(--color-surface);
font-size: 0.8125rem; /* 13px */
cursor: pointer;
user-select: none;
}
.project-add-plus {
font-size: 1rem; /* 16px */
font-weight: 700;
}
.project-add-label {
font-weight: 500;
}
.project-tab+.project-tab::before,
.project-tab+.project-tab--selected::before,
.project-tab--selected+.project-tab::before {
content: "";
position: absolute;
left: -0.625rem; /* -10px */
/* смещаем линию внутрь между кнопками */
top: 25%;
height: 50%;
width: 1px;
background-color: var(--color-border);
}
/* Project tab inline input for renaming */
.project-tab-input {
width: 7.5rem; /* 120px */
padding: 0.125rem 0.5rem; /* 2px 8px */
font-size: 0.875rem; /* 14px */
font-weight: 600;
border: 1px solid var(--border-color, #DADADA);
border-radius: 0.25rem; /* 4px */
outline: none;
background: var(--color-surface);
}
.project-tab-input:focus {
border-color: var(--bg-dark, #333333);
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}
/* Project context menu (right-click) */
.project-context-menu {
position: fixed;
background: var(--color-surface);
border: 1px solid var(--border-color, #DADADA);
border-radius: 0.5rem; /* 8px */
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
z-index: 10000;
min-width: 10rem; /* 160px */
padding: 0.375rem 0; /* 6px */
overflow: hidden;
}
.project-context-menu-item {
display: block;
width: 100%;
padding: 0.625rem 1rem; /* 10px 16px */
text-align: left;
border: none;
background: none;
cursor: pointer;
font-size: 0.875rem; /* 14px */
font-weight: 500;
color: var(--color-text);
transition: background-color 0.15s ease;
}
.project-context-menu-item:hover {
background-color: var(--bg-grey-light, #F5F5F5);
}
.project-context-menu-item--danger {
color: #E53935;
}
.project-context-menu-item--danger:hover {
background-color: #FFEBEE;
}
/* Варианты */
.variant-tab {
position: relative;
height: 1.875rem; /* 30px */
padding: 0 0.875rem; /* 14px */
background: none;
border: none;
font-weight: 600;
font-size: 0.875rem; /* 14px */
color: var(--color-text-muted);
cursor: pointer;
display: flex;
align-items: center;
border-radius: 0.375rem; /* 6px */
position: relative;
}
.variant-tab--selected {
color: var(--bg-dark);
font-weight: 700;
}
.variant-tab--selected::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -0.625rem; /* -10px */
height: 0.1875rem; /* 3px */
background: var(--bg-dark);
border-radius: 0;/
}
.variant-tab:hover {
color: var(--bg-dark);
background-color: var(--bg-grey-light);
}
.variants-actions {
display: flex;
gap: 0.25rem; /* 4px */
}
.variant-tab+.variant-tab::before,
.variant-tab+.variant-tab--selected::before,
.variant-tab--selected+.variant-tab::before {
content: "";
position: absolute;
left: -0.25rem; /* -4px */
/* смещаем линию внутрь между кнопками */
top: 25%;
height: 50%;
width: 1px;
background-color: var(--color-border);
}
/* Цветовые контролы внутри color-picker-menu - УДАЛЕНО, используется определение ниже (строка ~1877) */
.button-small {
/* 1. Включаем Flexbox, чтобы заработало выравнивание */
display: flex;
width: 1.4375rem; /* 23px */
height: 1.4375rem; /* 23px */
padding: 0;
background-color: transparent;
border: none;
border-radius: var(--radius);
align-items: center;
justify-content: center;
cursor: pointer;
stroke-width: 1.3px;
transition: background-color 0.2s ease-in-out, stroke 0.2s ease-in-out;
}
.button-small:hover {
background-color: var(--border-color);
transition: color 0.2s ease-in-out, stroke 0.2s ease-in-out;
}
/* активный свотч - УДАЛЕНО, используем определение ниже в строке ~1944 */
/* опционально: лёгкий обвод при ховере */
.color-swatch-btn:hover {
outline: 1px solid #b0b0b0;
}
.templates-gallery-container {
grid-area: templates-gallery-container;
display: flex;
flex-direction: column;
flex: 1 1 0;
min-width: 0;
min-height: 0;
background-color: var(--color-surface);
padding-left: 0px;
padding-right: 0px;
border-left: var(--border);
border-bottom: var(--border);
height: 100%;
border-right: var(--border);
}
#templates-empty-state {
padding: 2.5rem 1.25rem; /* 40px 20px */
text-align: center;
color: var(--text-secondary, #888);
font-size: 0.875rem; /* 14px */
}
.templates-gallery-zone {
grid-area: templates-gallery-zone;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--min-tile-size, 15.625rem), 1fr)); /* 250px */
/* fixed tile width */
justify-content: flex-start;
gap: 1.25rem; /* 20px */
/* 40px bottom gap so the last row never touches the page bottom */
padding: 0 0 2.5rem 0; /* 40px */
}
.template-image {
aspect-ratio: 1 / 1;
/* всегда квадрат */
background-color: var(--color-surface-active);
border-radius: var(--radius);
border: var(--border);
display: flex;
align-items: center;
justify-content: center;
}
/* Clean (broom) dropdown — Delete selected / Delete all */
.clean-menu {
position: relative;
display: inline-block;
}
.clean-menu-dropdown {
position: fixed;
min-width: 10rem; /* 160px */
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius, 0.375rem); /* 6px */
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
padding: 0.25rem; /* 4px */
z-index: 99999;
display: none;
}
.clean-menu.open .clean-menu-dropdown {
display: block;
}
.clean-menu-item {
display: block;
width: 100%;
text-align: left;
background: transparent;
border: 0;
color: var(--text-primary);
padding: 0.4375rem 0.625rem; /* 7px 10px */
border-radius: 0.25rem; /* 4px */
cursor: pointer;
font-size: 0.8125rem; /* 13px */
white-space: nowrap;
}
.clean-menu-item:hover {
background: var(--bg-active);
}
.clean-menu-item:disabled,
.clean-menu-item.is-disabled {
opacity: 0.4;
cursor: not-allowed;
}
.gallery-zone {
grid-area: gallery-zone;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--gallery-tile-size, 12.5rem), var(--gallery-tile-size, 12.5rem))); /* 200px 200px */
justify-content: start;
/* No horizontal inset: group heads span edge-to-edge to the divider; tiles keep their
insets via .gallery-collection-body padding (and the flat fallback below). */
padding: 0.875rem 0; /* 14px */
align-content: start;
overflow-y: auto;
background: var(--bg-project);
}
.empty-gallery-message {
/* Центрируем блок */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Оформление */
color: var(--text-secondary);
/* Рли любой РґСЂСѓРіРѕР№ цвет */
font-size: 1.2em;
text-align: center;
/* Важно: чтобы не перехватывал клики под собой */
pointer-events: none;
}
.gallery-image {
width: 7.5rem; /* 120px */
aspect-ratio: 1 / 1;
background-color: transparent;
/* фон задаём из JS */
border-radius: var(--radius);
border: var(--border);
display: flex;
align-items: center;
justify-content: center;
}
.preferences-tab {
position: relative;
height: 1.875rem; /* 30px */
padding: 0 0.875rem; /* 14px */
background-color: transparent;
border: none;
font-weight: 400;
font-size: 0.75rem; /* 12px */
color: var(--bg-dark);
cursor: pointer;
display: flex;
align-items: center;
border-radius: 0.375rem; /* 6px */
gap: 0.375rem; /* 6px */
}
.preferences-tab__icon {
flex-shrink: 0;
}
.preferences-tab:hover,
.preferences-tab--selected {
background-color: var(--bg-grey);
/* #F3F3F3 – будет заметнее */
}
.preferences-tab--selected::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: -0.8125rem; /* -13px */
height: 0.25rem; /* 4px */
border-radius: 0;
}
.preferences-actions {
display: flex;
gap: 0.25rem; /* 4px */
}
.preferences-actions .preferences-dropdown+.preferences-dropdown::before {
content: "";
position: absolute;
left: -0.125rem; /* -2px */
top: 25%;
height: 50%;
width: 1px;
background-color: var(--color-border);
}
.dropdown {
position: absolute;
display: inline-block;
}
/* Выпадающее меню предпочтений */
/* Обёртка для кнопки с меню */
.preferences-dropdown {
position: relative; /* Сохраняем для позиционирования полосок и меню */
display: flex; /* Включаем флекс-контейнер */
align-items: center; /* Выравниваем содержимое (кнопку) по центру по вертикали */
height: 100%; /* Гарантируем, что блок занимает всю высоту бара */
}
/* Кнопка-дропдаун: чуть больше паддинг справа под стрелку */
/* Выпадающее меню */
.preferences-menu {
position: absolute;
right: auto;
top: 100%;
margin-top: 0.25rem; /* 4px */
min-width: 10rem; /* 160px */
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: 0.375rem; /* 6px */
box-shadow: var(--shadow-md);
padding: 0.25rem 0; /* 4px */
display: none;
z-index: 9999; /* High z-index to overlay all other content */
}
/* Пункты меню */
.preferences-menu-item {
width: 100%;
padding: 0.375rem 0.625rem; /* 6px 10px */
border: none;
background: transparent;
text-align: left;
font-size: 0.75rem; /* 12px */
cursor: pointer;
color: var(--bg-dark);
}
.preferences-menu-item.is-selected {
position: relative;
padding-left: 1.625rem; /* 26px */
}
.preferences-menu-item.is-selected::before {
content: "\2713";
position: absolute;
left: 0.625rem; /* 10px */
top: 50%;
transform: translateY(-50%);
font-size: 0.6875rem; /* 11px */
line-height: 1;
}
.preferences-menu-item--separated {
margin-top: 0.25rem; /* 4px */
border-top: 1px solid var(--border-color);
padding-top: 0.5rem; /* 8px */
}
.preferences-menu-item:hover {
background: var(--bg-grey-light);
}
/* Когда дропдаун открыт */
.preferences-dropdown.open {
z-index: 9999; /* Boost parent when open to create proper stacking context */
}
.preferences-dropdown.open .preferences-menu {
display: block;
}
.language-switcher.preferences-dropdown {
height: auto;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
z-index: 50;
}
.language-switcher__trigger.preferences-tab {
width: 2.125rem; /* 34px */
height: 2.125rem; /* 34px */
min-width: 2.125rem; /* 34px */
padding: 0;
justify-content: center;
border: 0;
background: transparent;
color: var(--bg-dark);
}
.language-switcher__trigger.preferences-tab:hover,
.language-switcher.open .language-switcher__trigger.preferences-tab {
background: var(--bg-grey);
}
.language-switcher__icon {
width: 1.375rem; /* 22px */
height: 1.375rem; /* 22px */
display: block;
flex: 0 0 auto;
object-fit: cover;
border-radius: 50%;
}
.language-switcher__menu.preferences-menu {
min-width: 10.625rem; /* 170px */
}
.language-switcher__item.preferences-menu-item {
display: flex;
align-items: center;
gap: 0.5rem; /* 8px */
min-height: 2rem; /* 32px */
}
.language-switcher__item.is-active {
font-weight: 600;
}
.language-switcher__label {
white-space: nowrap;
}
.theme-switcher {
width: 2.125rem; /* 34px */
height: 2.125rem; /* 34px */
min-width: 2.125rem; /* 34px */
padding: 0;
border: 0;
border-radius: var(--radius-control);
background: transparent;
color: var(--bg-dark);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
position: relative;
box-sizing: border-box;
transition: background-color 0.16s ease-in-out;
}
.theme-switcher__icon {
width: 1.375rem; /* 22px */
height: 1.375rem; /* 22px */
display: block;
flex: 0 0 auto;
}
.theme-switcher__icon--dark {
display: none;
}
html[data-theme="dark"] .theme-switcher__icon--light {
display: none;
}
html[data-theme="dark"] .theme-switcher__icon--dark {
display: block;
}
html[data-theme="light"] .theme-switcher:hover .theme-switcher__icon--light,
html[data-theme="light"] .theme-switcher:focus-visible .theme-switcher__icon--light {
display: none;
}
html[data-theme="light"] .theme-switcher:hover .theme-switcher__icon--dark,
html[data-theme="light"] .theme-switcher:focus-visible .theme-switcher__icon--dark {
display: block;
}
html[data-theme="dark"] .theme-switcher:hover .theme-switcher__icon--dark,
html[data-theme="dark"] .theme-switcher:focus-visible .theme-switcher__icon--dark {
display: none;
}
html[data-theme="dark"] .theme-switcher:hover .theme-switcher__icon--light,
html[data-theme="dark"] .theme-switcher:focus-visible .theme-switcher__icon--light {
display: block;
}
.theme-switcher__label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.theme-switcher--sidebar {
align-self: center;
margin: 0 0 0.6875rem; /* 11px */
background: rgba(255, 255, 255, 0.16);
}
.sidebar[data-sidebar-expanded="true"] .theme-switcher--sidebar {
align-self: flex-start;
margin-left: 1.375rem; /* 22px */
/* Reshape the fixed-width icon button so the label lives inside it
(bg/hover/focus then cover icon + text). */
width: auto;
min-width: 2.125rem; /* 34px */
max-width: calc(var(--primary-sidebar-expanded-width) - 2.75rem);
padding-inline: 0.5rem; /* 8px */
justify-content: flex-start;
gap: 0.5rem; /* 8px */
}
/* Reveal the sr-only label only in the expanded sidebar. */
.sidebar[data-sidebar-expanded="true"] .theme-switcher--sidebar .theme-switcher__label {
position: static;
width: auto;
height: auto;
margin: 0;
padding: 0;
clip: auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border: 0;
font-size: 0.75rem; /* 12px */
font-weight: 600;
color: rgba(255, 255, 255, 0.82);
}
.theme-switcher--sidebar:hover,
.theme-switcher--sidebar:focus-visible {
background: rgba(255, 255, 255, 0.24);
}
.theme-switcher--sidebar:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.58);
}
.language-switcher--sidebar {
align-self: center;
margin: 0 0 0.75rem; /* 12px */
}
.sidebar[data-sidebar-expanded="true"] .language-switcher--sidebar {
align-self: flex-start;
margin-left: 1.375rem; /* 22px */
}
/* Current-language name: hidden by default (collapsed sidebar + auth variant
stay icon-only), revealed only in the expanded sidebar. */
.language-switcher__trigger-label {
display: none;
}
.sidebar[data-sidebar-expanded="true"] .language-switcher--sidebar .language-switcher__trigger.preferences-tab {
width: auto;
min-width: 2.125rem; /* 34px */
max-width: calc(var(--primary-sidebar-expanded-width) - 2.75rem);
padding-inline: 0.5rem; /* 8px */
justify-content: flex-start;
gap: 0.5rem; /* 8px */
}
.sidebar[data-sidebar-expanded="true"] .language-switcher--sidebar .language-switcher__trigger-label {
display: inline;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 0.75rem; /* 12px */
font-weight: 600;
color: rgba(255, 255, 255, 0.82);
}
.language-switcher--sidebar .language-switcher__trigger.preferences-tab {
background: rgba(255, 255, 255, 0.16);
}
.language-switcher--sidebar .language-switcher__trigger.preferences-tab:hover,
.language-switcher--sidebar.open .language-switcher__trigger.preferences-tab {
background: rgba(255, 255, 255, 0.24);
}
.language-switcher--sidebar .language-switcher__menu.preferences-menu {
left: calc(100% + 0.5rem); /* 8px */
right: auto;
top: auto;
bottom: 0;
}
.language-switcher--auth .language-switcher__menu.preferences-menu {
left: auto;
right: 0;
}
/* ---- Shadow toggle (Тень раздельно) ---- */
.shadow-toggle {
display: flex;
align-items: center;
gap: 0.4375rem; /* 7px */
cursor: pointer;
height: 1.875rem; /* 30px */
padding: 0 0.5rem; /* 8px */
border-radius: 0.375rem; /* 6px */
user-select: none;
}
.shadow-toggle:hover {
background-color: var(--bg-grey);
}
.shadow-toggle__input {
display: none;
}
.shadow-toggle__track {
position: relative;
width: 2.125rem; /* 34px */
height: 1.25rem; /* 20px */
background: var(--color-border-strong);
border-radius: 0.625rem; /* 10px */
transition: background 0.18s;
flex-shrink: 0;
}
.shadow-toggle__input:checked ~ .shadow-toggle__track {
background: var(--green);
}
.shadow-toggle__thumb {
position: absolute;
top: 0.125rem; /* 2px */
left: 0.125rem; /* 2px */
width: 1rem; /* 16px */
height: 1rem; /* 16px */
background: var(--color-surface);
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
transition: transform 0.18s;
}
.shadow-toggle__input:checked ~ .shadow-toggle__track .shadow-toggle__thumb {
transform: translateX(0.875rem); /* 14px */
}
.shadow-toggle__label {
font-size: 0.75rem; /* 12px */
color: var(--bg-dark);
white-space: nowrap;
}
.preferences-tab--editable {
display: flex;
align-items: center;
padding: 0 1.625rem 0 0.625rem; /* 26px 10px */
/* слева текст, справа стрелка */
cursor: pointer;
}
.preferences-input {
border: none;
background: transparent;
font: inherit;
color: inherit;
padding: 0;
margin: 0;
width: 4.375rem; /* 70px */
/* или больше/меньше по вкусу */
outline: none;
cursor: text;
}
/* Чтобы без фокусов не было видно, что это input */
.preferences-tab--editable:not(:hover) .preferences-input {
caret-color: transparent;
/* курсор ввода не виден, пока не навели */
}
/* При фокусе всё-таки хоть как-то подсветить */
.preferences-input:focus {
caret-color: auto;
/* нормальный карет */
}
.upload-container {
display: flex;
/* Активируем Flexbox */
gap: 0px;
/* Добавляем небольшой отступ между колонками */
width: 100%;
/* Занимаем всю доступную ширину */
height: 14.375rem; /* 230px */
/* Пример высоты */
padding-top: 1.25rem; /* 20px */
}
.upload-controls {
width: 3.75rem; /* 60px */
/* Узкая фиксированная ширина */
height: 100%;
flex-shrink: 0;
/* Важно: предотвращает сжатие колонки */
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 0px 0;
}
.upload-files {
flex-grow: 1;
/* КЛЮЧЕВОЕ СВОЙСТВО: Занимает всю доступную оставшуюся ширину */
display: flex;
justify-content: center;
align-items: center;
gap: 0.1875rem; /* 3px */
padding-right: 1.25rem; /* 20px */
}
.icons-dropzone {
width: 1.6875rem; /* 27px */
height: 1.6875rem; /* 27px */
border: 0;
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: var(--color-surface-subtle);
padding-inline: 0.25rem; /* 4px */
stroke-width: 0.5;
}
.icons-dropzone:hover {
background-color: var(--color-surface-hover);
}
.icons-dropzone:active {
background-color: var(--bg-active);
color: var(--bg-grey);
}
.icons-dropzone--selected {
background-color: var(--bg-active);
color: var(--bg-project);
border-radius: var(--radius);
width: 1.6875rem; /* 27px */
height: 1.6875rem; /* 27px */
border: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding-inline: 0.25rem; /* 4px */
stroke-width: 1;
}
.icons-dropzone--selected:hover {
background-color: var(--bg-dark);
color: var(--bg-project);
}
.icons-dropzone--selected:active {
background-color: var(--bg-active);
color: var(--bg-project);
}
.icons-square-button {
width: 1.6875rem; /* 27px */
height: 1.6875rem; /* 27px */
border: 1px solid var(--color-border-strong);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: var(--bg-main);
padding-inline: 0.25rem; /* 4px */
stroke-width: 0.5;
}
.icons-square-button:hover {
background-color: var(--bg-hover-icon);
}
.icon-tooltip {
position: fixed;
padding: 0.25rem 0.5rem; /* 4px 8px */
font-size: 0.6875rem; /* 11px */
line-height: 1.2;
border-radius: 0.25rem; /* 4px */
background-color: #222;
color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
white-space: nowrap;
pointer-events: none;
/* РљР РРўРЧНО: тултип РЅРµ участвует РІ hover */
opacity: 0;
transform: translateY(-50%);
transition: opacity 0.1s ease;
z-index: 2000;
}
.icons-square-button:active {
background-color: var(--bg-active);
color: var(--bg-grey);
}
.icon-group,
.icon-group-bottom {
display: flex;
flex-direction: column;
/* Размещаем иконки вертикально внутри группы */
gap: 0.1875rem; /* 3px */
align-items: center;
}
.dropzone {
position: relative;
border: 0.5px solid #888888;
border-radius: 0.125rem; /* 2px */
display: grid;
height: 100%;
width: 100%;
place-items: center;
color: var(--color-text-subtle);
font-size: 0.8125rem; /* 13px */
text-align: center;
background: var(--color-surface-active);
cursor: pointer;
}
.dropzone.has-image {
color: transparent;
/* прячет текст "Нажмите..." когда есть картинка */
}
.dropzone-clear-btn {
position: absolute;
right: 0.375rem; /* 6px */
bottom: 0.375rem; /* 6px */
}
.red-bg {}
.red-bg:hover {
background-color: rgb(247, 157, 157);
}
.red-bg:active {
background-color: rgb(248, 68, 68);
}
.icon-size {
width: 1.125rem; /* 18px */
height: 1.125rem; /* 18px */
display: block;
flex-shrink: 0;
}
.template-item {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
/* квадратная плитка */
border-radius: var(--radius);
border: var(--border);
background-color: var(--color-surface-active);
/* потом перекроется JS'ом */
overflow: hidden;
container-type: inline-size;
container-name: template-tile;
}
/* Module-switch skeleton: instant shimmer over tiles while templates reload.
Class is toggled on .templates-gallery-zone (added in switchModule, removed in showTemplatesZone). */
.templates-zone--loading .template-image,
.templates-zone--loading .shadow-layer {
opacity: 0;
}
.templates-zone--loading .template-item::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
z-index: 2;
background: linear-gradient(90deg, #ececec 25%, #f5f5f5 50%, #ececec 75%);
background-size: 200% 100%;
animation: tmpl-shimmer 1.1s ease-in-out infinite;
pointer-events: none;
}
@keyframes tmpl-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.icons-square-button {
width: 1.6875rem; /* 27px */
height: 1.6875rem; /* 27px */
border: 1px solid var(--color-border-strong);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: var(--bg-main);
padding-inline: 0.25rem; /* 4px */
stroke-width: 0.5;
transition: background-color 0.2s ease-in-out;
}
.template-item:hover {
box-shadow: 3px 5px 5px rgb(236, 236, 236);
border: 0.5px solid #aaaaaa;
cursor: default;
}
/* Drag handles: hand cursor on draggable tiles */
.template-item--draggable:hover {
cursor: grab;
}
.template-item--draggable:active {
cursor: grabbing;
}
.template-item:hover .color-lock-button {
opacity: 1;
}
/* Кнопка замка в правом верхнем углу плитки */
.color-lock-button {
position: absolute;
top: 0.375rem; /* 6px */
right: 0.375rem; /* 6px */
width: 1.6875rem; /* 27px */
height: 1.6875rem; /* 27px */
opacity: 0;
transition: opacity 0.15s ease;
z-index: 2;
}
.color-pick-button {
position: absolute;
top: 0.375rem; /* 6px */
right: 2.25rem; /* 36px */
width: 1.6875rem; /* 27px */
height: 1.6875rem; /* 27px */
opacity: 0;
transition: opacity 0.15s ease;
z-index: 2;
}
.color-lock-button--locked {
opacity: 1 !important;
background-color: var(--bg-dark);
color: #FFFFFF;
}
/* Big lock on hover over a LOCKED tile (a tile carrying a custom saved version) —
makes it obvious the mockup won't follow global colour/shadow changes. Overlay is
pointer-events:none so the corner buttons still work. */
.template-item[data-locked="true"]:hover::after {
content: '';
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background: rgba(255,255,255,0.30) center / 2.875rem 2.875rem no-repeat /* 46px */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='9' rx='2' fill='%23454545'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3' stroke='%23454545' stroke-width='2' fill='none'/%3E%3C/svg%3E");
border-radius: inherit;
}
/* Favorite star button - mirrors lock button positioning but on left side */
.color-favorite-button {
position: absolute;
top: 0.375rem; /* 6px */
left: 0.375rem; /* Left side instead of right */
width: 1.6875rem; /* 27px */
height: 1.6875rem; /* 27px */
opacity: 0;
transition: opacity 0.15s ease;
z-index: 2;
}
/* Show on hover (same pattern as lock button) */
.template-item:hover .color-favorite-button {
opacity: 1;
}
/* Active state: always visible with yellow background */
.color-favorite-button--favorited {
opacity: 1 !important;
background-color: #FFD700; /* Yellow for favorited state */
color: #454545; /* Dark icon on yellow background */
transition: none !important; /* Disable transition for favorited state - instant visibility */
}
/* Force override - highest specificity for favorited state */
.template-item .color-favorite-button.color-favorite-button--favorited {
opacity: 1 !important;
transition: none !important; /* Disable transition - instant visibility */
}
/* все IMG внутри template-item — слои мокапа */
.template-item img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* сам template-image превращаем в объектный слой: без своего фона/бордера */
.template-item .template-image {
background-color: transparent !important;
border: none;
transition: transform 0.3s ease;
display: block;
width: 100%;
height: auto;
}
/* Чекбокс внизу слева */
.template-checkbox {
position: absolute;
left: 0.375rem; /* 6px */
bottom: 0.375rem; /* 6px */
}
/* Hidden template during filtering */
.template-item.filtered-hidden {
display: none;
}
.button-text-light {
color: var(--color-ink-hover);
width: fit-content;
height: 1.6875rem; /* 27px */
border: 1px solid var(--color-border-strong);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: var(--bg-main);
padding-inline: 0.25rem; /* 4px */
}
.button-text-dark {
color: var(--bg-grey);
width: fit-content;
height: 1.6875rem; /* 27px */
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: var(--bg-dark);
padding-inline: 0.5rem; /* 8px */
border: 0;
gap: 0.375rem; /* 6px */
transition: background-color 0.2s ease-in-out ;
}
.button-text-dark svg {
width: 0.875rem; /* Кнопка невысокая (27px), иконку берем небольшую */
height: 0.875rem; /* 14px */
fill: currentColor; /* РРєРѕРЅРєР° возьмет цвет текста (var(--bg-grey)) */
flex-shrink: 0; /* Чтобы иконку не сплющило, если текст длинный */
}
.button-text-dark:hover {
background-color: var(--bg-active);
transition: background-color 0.2s ease-in-out;
}
.button-text-green {
color: var(--color-on-brand);
width: fit-content;
height: 1.6875rem; /* 27px */
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: var(--green);
padding-inline: 0.5rem; /* 8px */
border: 0;
gap: 0.375rem; /* 6px */
transition: background-color 0.2s ease-in-out;
}
.button-text-green svg {
width: 0.875rem; /* 14px */
height: 0.875rem; /* 14px */
fill: currentColor;
flex-shrink: 0;
}
.button-text-green:hover {
background-color: var(--color-brand-hover); /* Darker green on hover */
transition: background-color 0.2s ease-in-out;
}
.button-xl-text-dark {
color: var(--bg-grey);
width: fit-content;
height: 2.25rem; /* 36px */
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: var(--bg-dark);
padding-inline: 0.5rem; /* 8px */
border: 0;
transition: background-color 0.2s ease-in-out ;
}
.button-xl-text-dark:hover {
background-color: var(--bg-active);
transition: background-color 0.2s ease-in-out;
}
/* "Export and download all" / "Download all" — green primary action. The cancel-export
state (.is-export-cancel) still wins via its !important rule below. */
#download-all {
background-color: var(--green);
color: #FFFFFF;
}
#download-all:hover {
background-color: var(--color-brand-hover);
}
/* Cancel-export button state */
.is-export-cancel {
background-color: #c0392b !important;
color: #fff !important;
border-color: #c0392b !important;
opacity: 1 !important;
cursor: pointer !important;
}
.is-export-cancel:hover {
background-color: #e74c3c !important;
}
.button-xl-text-light {
color: var(--bg-dark);
width: fit-content;
height: 2.25rem; /* 36px */
border-radius: var(--radius);
border-color: var(--border-color);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: var(--bg-main);
padding-inline: 0.5rem; /* 8px */
transition: background-color 0.2s ease-in-out ;
}
.button-xl-text-light:hover {
background-color: var(--bg-project);
transition: background-color 0.2s ease-in-out;
}
/* Wrapper for both buttons */
.template-actions-wrapper {
position: absolute;
right: 0.5rem; /* 8px */
bottom: 0.5rem; /* 8px */
display: flex;
gap: 0.375rem; /* 6px */
z-index: 500;
opacity: 0;
transition: opacity 0.15s ease;
}
.template-item:hover .template-actions-wrapper {
opacity: 1;
}
/* Export button (green) — was the per-tile Queue button; restyled to the brand green that
the removed per-tile Download button used. */
.template-add-btn {
color: #FFFFFF;
width: fit-content;
height: 1.6875rem; /* 27px */
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: var(--green);
padding-inline: 0.5rem; /* 8px */
border: 0;
gap: 0.375rem; /* 6px */
transition: background-color 0.2s ease-in-out;
}
.template-add-btn svg {
width: 0.875rem; /* 14px */
height: 0.875rem; /* 14px */
fill: currentColor;
flex-shrink: 0;
}
.template-add-btn:hover {
background-color: var(--color-brand-hover);
}
.btn-credit-cost {
font-size: 0.6875rem; /* 11px */
opacity: 0.7;
margin-left: 0.125rem; /* 2px */
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
/* Download button (green) */
.template-download-btn {
color: #FFFFFF;
width: fit-content;
height: 1.6875rem; /* 27px */
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: var(--green);
padding-inline: 0.5rem; /* 8px */
border: 0;
gap: 0.375rem; /* 6px */
transition: background-color 0.2s ease-in-out;
}
.template-download-btn svg {
width: 0.875rem; /* 14px */
height: 0.875rem; /* 14px */
fill: currentColor;
flex-shrink: 0;
}
.template-download-btn:hover {
background-color: var(--color-brand-hover);
}
/* Button text span - override sidebar .btn-text styles */
.template-add-btn .btn-text,
.template-download-btn .btn-text {
display: inline;
white-space: nowrap;
font-size: 0.75rem; /* 12px */
font-weight: 500;
flex-shrink: 0;
color: inherit;
line-height: 1;
opacity: 1 !important;
visibility: visible !important;
}
/* ============================================
Compact Mode for Template Buttons
When tile width < 220px, hide button text
============================================ */
@container template-tile (max-width: 13.75rem) { /* 220px; rem so the threshold scales with the rem base */
/* Make buttons square (icon-only mode) */
.template-add-btn,
.template-download-btn {
width: 1.6875rem; /* 27px */
padding-inline: 0;
justify-content: center;
}
/* Hide text labels in compact mode */
.template-add-btn .btn-text,
.template-download-btn .btn-text {
display: none;
}
}
.dropzone-placeholder {
pointer-events: none;
padding: 0 0.5rem; /* 8px */
}
.dropzone.has-image .dropzone-placeholder {
display: none;
}
.template-progress-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.6875rem; /* 11px */
text-align: center;
padding: 0 0.5rem; /* 8px */
opacity: 0;
pointer-events: none;
backdrop-filter: blur(2px);
transition: opacity 0.15s ease;
}
.template-item.is-rendering .template-progress-overlay {
opacity: 1;
}
.preview-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.65);
display: none;
align-items: center;
justify-content: center;
z-index: 3000;
cursor: zoom-out;
}
.preview-modal-backdrop.is-visible {
display: flex;
}
.preview-modal {
position: relative;
background: #111111;
border-radius: 0.75rem; /* 12px */
padding: 1rem; /* 16px */
max-width: 1000px;
max-height: 1000px;
box-shadow: var(--shadow-modal);
cursor: default;
}
.preview-modal-img {
display: block;
max-width: 1000px;
max-height: 1000px;
width: 100%;
height: auto;
border-radius: 0.5rem; /* 8px */
}
.preview-modal-close {
position: absolute;
top: 0.5rem; /* 8px */
right: 0.5rem; /* 8px */
width: 1.625rem; /* 26px */
height: 1.625rem; /* 26px */
border-radius: 999px;
border: none;
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
font-size: 1rem; /* 16px */
line-height: 1;
cursor: pointer;
}
.preview-modal-close:hover {
background: rgba(0, 0, 0, 0.8);
}
.mockup-wrapper {
position: relative;
width: 100%;
height: 7.5rem; /* 120px */
overflow: hidden;
}
.mockup-wrapper img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.shadow-layer {
/* Делает изображение полностью черным, сохраняя прозрачность */
filter: brightness(0);
/* Управляем интенсивностью тени через прозрачность */
opacity: 1;
/* Для теней лучше всего подходит multiply (умножение) */
/* Оно заставляет темные участки затемнять фон под ними */
mix-blend-mode: multiply;
/* Убедитесь, что слой не перекрывает клики, если это нужно */
pointer-events: none;
}
.shadow-layer,
.object-layer {
background-color: transparent !important;
}
.preview-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.65);
display: none;
align-items: center;
justify-content: center;
z-index: 3000;
cursor: zoom-out;
}
.preview-modal-backdrop.is-visible {
display: flex;
}
.preview-modal {
position: relative;
background: #111111;
border-radius: 0.75rem; /* 12px */
padding: 1rem; /* 16px */
max-width: 1000px;
max-height: 1000px;
box-shadow: var(--shadow-modal);
cursor: default;
}
/* новый ключевой блок – задаём РАЗМЕРсодержимому */
.preview-modal-content {
width: min(60vw, 60vh);
height: min(60vw, 60vh);
}
/* сам клон мокапа */
.preview-modal .preview-modal-mockup {
width: 100%;
height: 100%;
}
/* внутри модалки мокап/шаблон растягиваем на весь контент */
.preview-modal .mockup-wrapper,
.preview-modal .template-item {
position: relative;
width: 100%;
height: 100%;
}
/* кнопки листания */
.preview-modal-prev,
.preview-modal-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 2rem; /* 32px */
height: 2rem; /* 32px */
border-radius: 999px;
border: none;
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
font-size: 1.125rem; /* 18px */
line-height: 1;
cursor: pointer;
}
.preview-modal-prev:hover,
.preview-modal-next:hover {
background: rgba(0, 0, 0, 0.85);
}
.preview-modal-prev {
left: -2.5rem; /* -40px */
}
.preview-modal-next {
right: -2.5rem; /* -40px */
}
/* кнопка закрытия как была */
.preview-modal-close {
position: absolute;
top: 0.5rem; /* 8px */
right: 0.5rem; /* 8px */
width: 1.625rem; /* 26px */
height: 1.625rem; /* 26px */
border-radius: 999px;
border: none;
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
font-size: 1rem; /* 16px */
line-height: 1;
cursor: pointer;
}
.preview-modal-close:hover {
background: rgba(0, 0, 0, 0.8);
}
/* Стили для лоадера */
.dropzone-loader {
display: none;
/* По умолчанию скрыт */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
pointer-events: none;
/* Чтобы клики проходили сквозь него */
}
/* Сам крутящийся бублик */
.dropzone-loader::after {
content: " ";
display: block;
width: 2rem; /* 32px */
height: 2rem; /* 32px */
margin: 1px;
border-radius: 50%;
border: 3px solid #fff;
/* Цвет кольца */
border-color: #fff transparent #fff transparent;
/* Делаем пробелы для вращения */
animation: dropzone-spin 1.2s linear infinite;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
/* Немного тени для контраста на сером */
}
@keyframes dropzone-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Класс, который JS будет вешать на дропзону во время загрузки */
.dropzone.is-loading .dropzone-loader {
display: block;
}
/* Опционально: затемнять фон при загрузке */
.dropzone.is-loading {
opacity: 0.8;
cursor: wait;
}
/* --- ПЛАВНОЕ ПЕРЕМЕЩЕНРР• (View Transitions) --- */
::view-transition-group(*) {
animation-duration: 0.4s;
/* Длительность перелета плиток */
animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
/* Приятная инерция */
}
/* --- Updated Controls Layout --- */
.color-picker-controls {
display: flex;
align-items: center;
gap: 0.5rem; /* 8px */
padding: 0px 0px;
flex-wrap: nowrap; /* Don't allow wrapping - force overflow */
flex: 1 1 auto; /* Allow the controls container to shrink */
min-width: 0; /* Allow shrinking below content size */
overflow: visible; /* Позволяем полоске выходить за пределы */
position: relative; /* Для корректного позиционирования полоски */
}
.palette-separator {
width: 1px;
height: 1.5rem; /* 24px */
background-color: var(--border-color);
margin: 0 0.25rem; /* 4px */
}
/* --- Swatch Styles --- */
.color-swatch-btn {
/* 1. Сбрасываем стандартные стили браузера */
appearance: none;
-webkit-appearance: none;
padding: 0;
margin: 0;
background: none; /* Если цвет задается через inline style, это не помешает */
/* 2. Задаем четкие размеры */
width: 1.5rem; /* 24px */
height: 1.5rem; /* 24px */
box-sizing: border-box; /* Чтобы рамка не увеличивала размер */
/* 3. Делаем одну аккуратную обводку */
border: 1px solid rgba(0, 0, 0, 0.1); /* Легкая серая рамка */
border-radius: 0.25rem; /* Скругление (по вкусу) */
cursor: pointer;
/* 4. Важно для линии снизу */
position: relative;
overflow: visible; /* РАЗРЕШАЕМ элементам торчать наружу (иначе линию обрежет) */
transition: border-color 0.2s;
}
/* Рффект РїСЂРё наведении - рамка становится чуть темнее */
.color-swatch-btn:hover {
border-color: rgba(0, 0, 0, 0.4);
}
/* Убираем странные рамки фокуса в некоторых браузерах */
.color-swatch-btn:focus {
outline: none;
border-color: var(--text-main);
}
/* --- Р›РРќРРЇ ВЫБОРА ДЛЯ ЦВЕТОВ --- */
.color-swatch-btn--selected::after {
content: "";
position: absolute;
display: block;
/* Расположение - на нижнем краю панели в освобождённом пространстве */
left: 0;
right: 0;
top: 100%;
margin-top: 0.625rem; /* Опускаем в пространство padding-top следующего элемента */
/* Внешний вид */
width: 100%;
height: 0.25rem; /* 4px */
background: var(--bg-dark); /* Чёрная полоска */
border-radius: 0;
z-index: 1;
pointer-events: none;
}
/* --- PALETTE OVERFLOW MENU --- */
.palette-overflow-wrapper {
position: relative;
display: inline-flex;
align-items: center;
}
.palette-overflow-wrapper.is-open {
z-index: 10020;
}
.color-swatch-overflow {
background-color: var(--color-surface-muted);
cursor: pointer;
user-select: none;
}
.color-swatch-overflow:hover {
background-color: #e0e0e0;
}
.palette-overflow-menu {
position: absolute;
top: calc(100% + 0.5rem); /* 8px */
right: 0;
min-width: 7.5rem; /* 120px */
max-width: 12.5rem; /* 200px */
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: 0.375rem; /* 6px */
box-shadow: var(--shadow-md);
padding: 0.5rem; /* 8px */
display: none;
flex-wrap: wrap;
gap: 0.5rem; /* 8px */
z-index: 10020;
}
.palette-overflow-wrapper.is-open .palette-overflow-menu {
display: flex;
}
/* Overflow menu swatches - hide the underline in dropdown */
.palette-overflow-menu .color-swatch-btn--selected::after {
display: none;
}
/* Векторный оверлей корешка (CSS mask-image + multiply blend) */
.spine-vector-overlay {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
mix-blend-mode: multiply;
}
/* Spine swatches overflow menu */
.spine-overflow-wrapper {
position: relative;
display: inline-flex;
align-items: center;
}
.spine-overflow-wrapper.is-open {
z-index: 10020;
}
.spine-overflow-menu {
position: absolute;
top: calc(100% + 0.5rem); /* 8px */
right: 0;
min-width: 7.5rem; /* 120px */
max-width: 12.5rem; /* 200px */
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: 0.375rem; /* 6px */
box-shadow: var(--shadow-md);
padding: 0.5rem; /* 8px */
display: none;
flex-wrap: wrap;
gap: 0.5rem; /* 8px */
z-index: 10020;
}
.spine-overflow-wrapper.is-open .spine-overflow-menu {
display: flex;
}
.spine-overflow-menu .color-swatch-btn--selected::after {
display: none;
}
@keyframes fadeIn {
from { opacity: 0; transform: scaleX(0.5); }
to { opacity: 1; transform: scaleX(1); }
}
/* Checkerboard for Transparent */
.checkerboard-bg {
width: 100%;
height: 100%;
background-color: var(--color-surface);
/* Создаем 4 сектора по 90 градусов */
background-image: conic-gradient(
#ccc 90deg,
transparent 90deg 180deg,
#ccc 180deg 270deg,
transparent 270deg
);
/* ВАЖНО: Размер паттерна должен быть в 2 раза больше размера одной клетки.
Если вы хотите клетку 8px, здесь пишем 16px */
background-size: 0.5rem 0.5rem; /* 8px 8px */
}
.color-swatch-special {
background-color: var(--color-surface);
display: flex;
align-items: center;
justify-content: center;
color: var(--bg-dark);
}
.custom-color-wrapper {
position: relative;
width: 1.75rem; /* 28px */
height: 1.75rem; /* 28px */
display: flex;
align-items: center;
justify-content: center;
}
#native-picker-input {
position: absolute;
inset: 0;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
z-index: 2;
}
/* --- COLOR MODAL STYLES (NEW) --- */
.color-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 5000;
display: none;
align-items: center;
justify-content: center;
backdrop-filter: blur(2px);
}
.color-modal-backdrop.is-visible {
display: flex;
animation: fadeInModal 0.2s ease-out;
}
@keyframes fadeInModal {
from { opacity: 0; }
to { opacity: 1; }
}
.color-modal-window {
background: var(--bg-main);
border-radius: 0.75rem; /* 12px */
width: 42.5rem; /* 680px */
max-width: 95vw;
max-height: 90vh;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
overflow: visible;
}
/* Header */
.color-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1.25rem; /* 20px */
min-height: 3.625rem; /* 58px */
border-bottom: var(--border);
}
.color-modal-title {
margin: 0;
font-size: 1rem; /* 16px */
font-weight: 600;
color: var(--text-main);
}
.color-modal-tabs {
display: flex;
align-self: stretch;
align-items: stretch;
gap: 1.5rem; /* 24px */
}
.color-modal-tab {
position: relative;
display: flex;
align-items: center;
appearance: none;
border: 0;
background: transparent;
padding: 0;
color: var(--text-secondary);
font: 600 0.875rem/1 var(--font-family-base); /* 14px */
cursor: pointer;
}
.color-modal-tab:hover {
color: var(--text-main);
}
.color-modal-tab.is-active {
color: var(--text-main);
}
.color-modal-tab.is-active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 0.1875rem; /* 3px */
background: var(--bg-dark);
}
.color-modal-close {
width: 1.75rem; /* 28px */
height: 1.75rem; /* 28px */
border: none;
background: transparent;
border-radius: var(--radius);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
transition: background-color 0.15s, color 0.15s;
}
.color-modal-close:hover {
background-color: var(--bg-grey);
color: var(--text-main);
}
/* Main content: two columns */
.color-modal-content {
display: grid;
grid-template-columns: 20rem 1fr; /* 320px */
gap: 0;
padding: 1.25rem 0 1.25rem 1.25rem; /* 20px 20px 20px */
overflow: visible;
}
/* ===== All files (project gallery library) modal ===== */
.uh-window {
width: 53.75rem; /* 860px */
max-width: 94vw;
max-height: 88vh;
display: flex;
flex-direction: column;
}
.uh-header-title {
font-weight: 600;
font-size: 0.9375rem; /* 15px */
}
.uh-quota {
display: flex;
align-items: center;
gap: 0.75rem; /* 12px */
padding: 0.625rem 1.25rem; /* 10px 20px */
border-bottom: var(--border);
}
.uh-quota-bar {
flex: 1;
height: 0.5rem; /* 8px */
border-radius: 999px;
background: var(--bg-subtle, rgba(0, 0, 0, 0.08));
overflow: hidden;
}
.uh-quota-fill {
height: 100%;
width: 0%;
border-radius: 999px;
background: var(--accent, #4c6fff);
transition: width 0.25s ease;
}
.uh-quota-fill.is-full {
background: #e05656;
}
.uh-quota-text {
font-size: 0.75rem; /* 12px */
color: var(--text-muted, #888);
white-space: nowrap;
}
/* override the color-modal 2-column grid for this modal */
.uh-content {
display: block;
padding: 1rem 1.25rem; /* 16px 20px */
overflow-y: auto;
}
.uh-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(6.875rem, 1fr)); /* 110px */
gap: 0.75rem; /* 12px */
}
.uh-group {
grid-column: 1 / -1;
display: grid;
gap: 0.75rem; /* 12px */
border-top: var(--border);
padding-top: 0;
}
.uh-group + .uh-group {
margin-top: 0.625rem; /* 10px */
}
.uh-group-head {
height: var(--control-height-lg);
width: 100%;
display: flex;
align-items: center;
gap: 0.5rem; /* 8px */
padding: 0 0.75rem; /* 12px */
border: 0;
border-bottom: var(--border);
background: var(--color-brand-soft, #e5f5ed);
color: var(--color-brand, #2bbb75);
cursor: pointer;
text-align: left;
}
.uh-group-actions {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 0.25rem; /* 4px */
}
.uh-group-view-btn,
.uh-group-delete-btn {
width: 1.5rem; /* 24px */
height: 1.5rem; /* 24px */
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
}
.uh-group-view-btn:hover,
.uh-group-delete-btn:hover {
background: rgba(0, 0, 0, 0.08);
color: var(--color-text);
}
.uh-group-view-btn.is-active {
background: rgba(46, 187, 119, 0.14);
color: var(--color-brand, #2bbb75);
}
.uh-group-delete-btn:hover {
color: #d83b3b;
}
.uh-group-caret {
display: inline-block;
font-size: 0.8125rem; /* 13px */
line-height: 1;
transform: rotate(90deg);
transition: transform 0.15s ease;
}
.uh-group.is-collapsed .uh-group-caret {
transform: rotate(0deg);
}
.uh-group-name {
font-size: var(--font-size-2xs);
line-height: 1;
font-weight: 700;
letter-spacing: 0.2em;
}
.uh-group-auto {
margin-left: auto;
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
letter-spacing: 0;
}
.uh-group-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(6.875rem, 6.875rem)); /* 110px 110px */
grid-auto-flow: dense;
gap: 0.75rem; /* 12px */
padding: 0.625rem 0 0.25rem; /* 10px 4px */
}
.uh-group.is-collapsed .uh-group-grid {
display: none;
}
.uh-group.is-collapsed .uh-group-table-wrap {
display: none;
}
.uh-group-select {
max-width: 5.75rem; /* 92px */
height: 1.375rem; /* 22px */
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
font-size: var(--font-size-2xs);
}
.uh-tile .uh-group-select,
.uh-spread-tile .uh-group-select {
position: absolute;
left: 0.25rem; /* 4px */
right: 0.25rem; /* 4px */
bottom: 0.25rem; /* 4px */
max-width: none;
opacity: 0;
transition: opacity 0.12s ease;
}
.uh-tile:hover .uh-group-select,
.uh-spread-tile:hover .uh-group-select,
.uh-group-select:focus {
opacity: 1;
}
.uh-group-table-wrap {
padding: 0.5rem 0 0.25rem; /* 8px 4px */
}
.uh-group-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: var(--font-size-xs);
}
.uh-group-row {
border-bottom: 1px solid var(--color-border);
}
.uh-group-row:last-child {
border-bottom: 0;
}
.uh-group-row td {
padding: 0.375rem 0.5rem; /* 6px 8px */
vertical-align: middle;
}
.uh-group-row.is-child .uh-group-row-name {
padding-left: 1.5rem; /* 24px */
}
.uh-group-row-thumb,
.uh-group-row-pdf,
.uh-group-row-spread {
width: 2.125rem; /* 34px */
height: 2.125rem; /* 34px */
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface) center / contain no-repeat;
color: var(--color-text);
font-size: 0.5rem; /* 8px */
font-weight: 700;
cursor: pointer;
}
.uh-group-row-pdf {
border-color: #e35a5a;
color: #d83b3b;
}
.uh-group-row-spread {
width: 3.25rem; /* 52px */
color: var(--color-brand, #2bbb75);
}
.uh-group-row-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.uh-group-row-meta {
width: 4.625rem; /* 74px */
color: var(--color-text-muted);
white-space: nowrap;
}
.uh-tile {
position: relative;
aspect-ratio: 1;
border-radius: var(--radius);
border: var(--border);
background: var(--bg-subtle, #f4f4f4) center / contain no-repeat;
cursor: pointer;
overflow: hidden;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.uh-tile:hover {
border-color: var(--accent, #4c6fff);
}
.uh-tile.is-in-strip {
border-color: var(--accent, #4c6fff);
box-shadow: 0 0 0 2px var(--accent, #4c6fff) inset;
}
.uh-tile-badge {
position: absolute;
bottom: 0.25rem; /* 4px */
left: 0.25rem; /* 4px */
padding: 0.125rem 0.375rem; /* 2px 6px */
font-size: 0.625rem; /* 10px */
font-weight: 600;
color: #fff;
background: var(--accent, #4c6fff);
border-radius: 0.25rem; /* 4px */
display: none;
}
.uh-tile.is-in-strip .uh-tile-badge {
display: block;
}
.uh-tile-del {
position: absolute;
top: 0.25rem; /* 4px */
right: 0.25rem; /* 4px */
width: 1.375rem; /* 22px */
height: 1.375rem; /* 22px */
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 0.375rem; /* 6px */
background: rgba(0, 0, 0, 0.55);
color: #fff;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s ease, background 0.15s ease;
}
.uh-tile:hover .uh-tile-del {
opacity: 1;
}
.uh-tile-del:hover {
background: #e05656;
}
.uh-empty {
padding: 2rem 0.75rem; /* 32px 12px */
text-align: center;
color: var(--text-muted, #888);
font-size: 0.8125rem; /* 13px */
}
/* ---- Storage modal: toolbar ---- */
.uh-toolbar {
display: flex;
align-items: center;
gap: 0.5rem; /* 8px */
padding: 0.5rem 1.25rem; /* 8px 20px */
border-bottom: var(--border);
flex-wrap: wrap;
}
.uh-view-toggle {
display: none;
border: var(--border);
border-radius: var(--radius, 0.5rem); /* 8px */
overflow: hidden;
}
.uh-view-btn {
display: flex;
align-items: center;
justify-content: center;
width: 1.875rem; /* 30px */
height: 1.75rem; /* 28px */
border: none;
background: transparent;
color: var(--text-muted, #888);
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease;
}
.uh-view-btn + .uh-view-btn {
border-left: var(--border);
}
.uh-view-btn.is-active {
background: var(--accent, #4c6fff);
color: #fff;
}
.uh-filter {
flex: 0 1 12.5rem; /* 200px */
height: 1.75rem; /* 28px */
padding: 0 0.625rem; /* 10px */
font-size: 0.75rem; /* 12px */
border: var(--border);
border-radius: var(--radius, 0.5rem); /* 8px */
background: var(--bg, #fff);
color: inherit;
}
.uh-toolbar-spacer {
flex: 1 1 auto;
}
.uh-selectall {
display: inline-flex;
align-items: center;
gap: 0.3125rem; /* 5px */
font-size: 0.75rem; /* 12px */
color: var(--text-muted, #888);
cursor: pointer;
user-select: none;
}
.uh-act.btn {
height: 1.75rem; /* 28px */
padding: 0 0.625rem; /* 10px */
font-size: 0.75rem; /* 12px */
}
.uh-act.uh-danger {
color: #e05656;
border-color: rgba(224, 86, 86, 0.4);
}
.uh-act.uh-danger:hover:not(:disabled) {
background: #e05656;
border-color: #e05656;
color: #fff;
}
/* ---- view switching: only one container visible ---- */
#upload-history-modal .uh-table-wrap { display: none !important; }
#upload-history-modal .uh-grid { display: grid !important; }
/* ---- grid tile: checkbox + pin ---- */
.uh-tile-check {
position: absolute;
top: 0.25rem; /* 4px */
left: 0.25rem; /* 4px */
z-index: 2;
width: 1.125rem; /* 18px */
height: 1.125rem; /* 18px */
border-radius: 0.25rem; /* 4px */
background: rgba(255, 255, 255, 0.85);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transition: opacity 0.12s ease;
}
.uh-tile:hover .uh-tile-check,
.uh-tile-check input:checked {
opacity: 1;
}
.uh-tile-check input { margin: 0; cursor: pointer; }
.uh-tile-pin {
position: absolute;
bottom: 0.25rem; /* 4px */
right: 0.25rem; /* 4px */
font-size: 0.75rem; /* 12px */
line-height: 1;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
.uh-tile.is-pinned {
border-color: #d8a23a;
}
/* ---- PDF module (collapsible) ---- */
.uh-pdf-module {
grid-column: 1 / -1;
border: var(--border);
border-radius: var(--radius, 0.5rem); /* 8px */
overflow: hidden;
}
.uh-pdf-head {
display: flex;
align-items: center;
gap: 0.5rem; /* 8px */
padding: 0.5rem 0.625rem; /* 8px 10px */
cursor: pointer;
background: var(--bg-subtle, #f4f4f4);
user-select: none;
}
.uh-pdf-head:hover { background: rgba(0, 0, 0, 0.05); }
.uh-pdf-caret {
display: inline-block;
font-size: 0.6875rem; /* 11px */
color: var(--text-muted, #888);
transition: transform 0.15s ease;
}
.uh-pdf-module.is-open .uh-pdf-caret { transform: rotate(90deg); }
.uh-pdf-check { display: inline-flex; align-items: center; cursor: pointer; }
.uh-pdf-check input { margin: 0; cursor: pointer; }
.uh-pdf-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem; /* 28px */
height: 1.25rem; /* 20px */
border-radius: 0.25rem; /* 4px */
background: #e53935;
color: #fff;
font-size: 0.5625rem; /* 9px */
font-weight: 800;
letter-spacing: 0.04em;
}
.uh-pdf-name {
font-size: 0.8125rem; /* 13px */
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1 1 auto;
}
.uh-pdf-count {
font-size: 0.6875rem; /* 11px */
color: var(--text-muted, #888);
white-space: nowrap;
}
.uh-pdf-pin { font-size: 12px; }
.uh-pdf-pages {
display: none;
grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); /* 96px */
gap: 0.625rem; /* 10px */
padding: 0.625rem; /* 10px */
}
.uh-pdf-module.is-open .uh-pdf-pages { display: grid; }
.uh-spread-tile {
position: relative;
grid-column: span 2;
min-height: 6.875rem; /* 110px */
border: var(--border);
background: var(--bg-subtle, #f4f4f4);
overflow: hidden;
cursor: pointer;
}
.uh-spread-check {
position: absolute;
top: 0.25rem; /* 4px */
left: 0.25rem; /* 4px */
z-index: 2;
width: 1.125rem; /* 18px */
height: 1.125rem; /* 18px */
border-radius: 0.25rem; /* 4px */
background: rgba(255, 255, 255, 0.85);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.12s ease;
}
.uh-spread-tile:hover .uh-spread-check,
.uh-spread-check input:checked {
opacity: 1;
}
.uh-spread-thumbs {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
height: 100%;
min-height: 6.875rem; /* 110px */
background: var(--color-surface);
}
.uh-spread-thumb {
width: 100%;
height: 100%;
object-fit: contain;
background: var(--color-surface);
}
/* ---- table view ---- */
.uh-table-wrap { width: 100%; }
.uh-table {
width: 100%;
border-collapse: collapse;
font-size: 0.8125rem; /* 13px */
}
.uh-table thead th {
text-align: left;
padding: 0.375rem 0.5rem; /* 6px 8px */
font-size: 0.6875rem; /* 11px */
font-weight: 600;
color: var(--text-muted, #888);
border-bottom: var(--border);
white-space: nowrap;
}
.uh-table th.uh-sortable { cursor: pointer; user-select: none; }
.uh-table th.uh-sortable:hover { color: var(--accent, #4c6fff); }
.uh-table th.uh-sortable.is-sorted::after { content: " ▲"; font-size: 9px; }
.uh-table th.uh-sortable.is-sorted.is-desc::after { content: " ▼"; }
.uh-table tbody td {
padding: 0.375rem 0.5rem; /* 6px 8px */
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
vertical-align: middle;
}
.uh-table tbody tr.is-in-strip { background: rgba(76, 111, 255, 0.06); }
.uh-row-thumb {
width: 2.5rem; /* 40px */
height: 2.5rem; /* 40px */
border-radius: 0.375rem; /* 6px */
border: var(--border);
background: var(--bg-subtle, #f4f4f4) center / contain no-repeat;
cursor: pointer;
}
.uh-row-name {
max-width: 20rem; /* 320px */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.uh-th-prev, .uh-th-check { width: 1%; }
.uh-th-act { width: 1%; white-space: nowrap; }
.uh-row-act { white-space: nowrap; text-align: right; }
.uh-row-add {
height: 1.5rem; /* 24px */
padding: 0 0.625rem; /* 10px */
font-size: 0.75rem; /* 12px */
border: var(--border);
border-radius: 0.375rem; /* 6px */
background: var(--bg, #fff);
color: inherit;
cursor: pointer;
margin-right: 0.375rem; /* 6px */
}
.uh-row-add:hover {
background: var(--accent, #4c6fff);
border-color: var(--accent, #4c6fff);
color: #fff;
}
.uh-row-del {
width: 1.5rem; /* 24px */
height: 1.5rem; /* 24px */
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 0.375rem; /* 6px */
background: transparent;
color: var(--text-muted, #888);
cursor: pointer;
}
.uh-row-del:hover { background: #e05656; color: #fff; }
.uh-row-pin { font-size: 12px; }
/* ---- table: PDF parent row + child page rows ---- */
.uh-trow-pdf {
cursor: pointer;
background: var(--bg-subtle, #f7f7f7);
}
.uh-trow-pdf:hover { background: rgba(0, 0, 0, 0.05); }
.uh-trow-pdf-name { font-weight: 600; }
.uh-trow-pdf .uh-pdf-caret {
display: inline-block;
margin-right: 0.375rem; /* 6px */
font-size: 0.6875rem; /* 11px */
color: var(--text-muted, #888);
transition: transform 0.15s ease;
}
.uh-trow-pdf.is-open .uh-pdf-caret { transform: rotate(90deg); }
.uh-trow-pdf .uh-pdf-count { font-weight: 400; color: var(--text-muted, #888); }
.uh-row-pdf-icon {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.125rem; /* 18px */
background: var(--bg-subtle, #f4f4f4);
}
/* child page rows read as "inside" the PDF: indent + left rule */
.uh-trow-page > td:first-child { box-shadow: inset 3px 0 0 var(--accent, #4c6fff); }
.uh-trow-page .uh-row-name { padding-left: 18px; color: var(--text-muted, #777); }
/* grid module head action buttons */
.uh-pdf-acts {
display: inline-flex;
align-items: center;
gap: 0.375rem; /* 6px */
margin-left: 0.25rem; /* 4px */
}
/* Left column: Color Picker */
.color-picker-column {
display: flex;
flex-direction: column;
gap: 0.75rem; /* 12px */
padding-right: 1.25rem; /* отступ до вертикальной линии */
overflow: visible;
}
/* SV Canvas wrapper */
.sv-canvas-wrap {
position: relative;
width: 100%;
aspect-ratio: 1; /* квадрат */
border-radius: var(--radius);
overflow: hidden;
border: var(--border);
cursor: crosshair;
}
#sv-canvas {
display: block;
width: 100%;
height: 100%;
}
.sv-marker {
position: absolute;
width: 1rem; /* 16px */
height: 1rem; /* 16px */
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(0,0,0,0.3);
transform: translate(-50%, -50%);
pointer-events: none;
top: 0;
left: 100%;
}
/* Hue slider row */
.hue-slider-row {
display: flex;
align-items: center;
gap: 0.5rem; /* 8px */
justify-content: space-between;
}
.hue-slider-wrap {
position: relative;
width: 15.875rem; /* 254px */
flex-shrink: 0;
height: 0.875rem; /* 14px */
border-radius: 0.4375rem; /* 7px */
cursor: pointer;
}
.hue-slider-track {
width: 100%;
height: 100%;
background: linear-gradient(to right,
hsl(0, 100%, 50%),
hsl(60, 100%, 50%),
hsl(120, 100%, 50%),
hsl(180, 100%, 50%),
hsl(240, 100%, 50%),
hsl(300, 100%, 50%),
hsl(360, 100%, 50%)
);
border-radius: 0.4375rem; /* 7px */
}
.hue-slider-thumb {
position: absolute;
top: 50%;
left: 0;
width: 1.125rem; /* 18px */
height: 1.125rem; /* 18px */
background: var(--color-surface);
border: 1px solid rgba(0,0,0,0.15);
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}
.hue-slider-thumb::after {
content: '';
width: 0.625rem; /* 10px */
height: 0.625rem; /* 10px */
border-radius: 50%;
background: var(--thumb-color, hsl(0, 100%, 50%));
}
/* Saturation slider row */
.saturation-slider-row {
display: flex;
align-items: center;
gap: 0.5rem; /* 8px */
justify-content: flex-end;
}
.saturation-slider-wrap {
position: relative;
width: 15.875rem; /* 254px */
flex-shrink: 0;
height: 0.875rem; /* 14px */
border-radius: 0.4375rem; /* 7px */
cursor: pointer;
}
.saturation-slider-track {
width: 100%;
height: 100%;
background: linear-gradient(to right, #ffffff, #000000);
border-radius: 0.4375rem; /* 7px */
}
.saturation-slider-thumb {
position: absolute;
top: 50%;
left: 100%;
width: 1.125rem; /* 18px */
height: 1.125rem; /* 18px */
background: var(--color-surface);
border: 1px solid rgba(0,0,0,0.15);
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}
.saturation-slider-thumb::after {
content: '';
width: 0.625rem; /* 10px */
height: 0.625rem; /* 10px */
border-radius: 50%;
background: var(--thumb-color, #808080);
}
/* Color mode row */
.color-mode-row {
display: flex;
align-items: center;
gap: 0.5rem; /* 8px */
flex-wrap: nowrap;
overflow: visible;
position: relative;
z-index: 10;
}
.color-mode-dropdown {
position: relative;
}
.color-mode-btn {
display: flex;
align-items: center;
gap: 0.25rem; /* 4px */
padding: 0.375rem 0.625rem; /* 6px 10px */
background: var(--bg-grey);
border: var(--border);
border-radius: var(--radius);
font-size: 0.75rem; /* 12px */
font-weight: 500;
cursor: pointer;
color: var(--text-main);
}
.color-mode-btn:hover {
background: var(--bg-grey-light);
}
.color-mode-menu {
position: absolute;
top: 100%;
left: 0;
margin-top: 0.25rem; /* 4px */
min-width: 5rem; /* 80px */
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: 0.375rem; /* 6px */
box-shadow: var(--shadow-md);
padding: 0.25rem 0; /* 4px */
display: none;
z-index: 6000;
}
.color-mode-dropdown.is-open .color-mode-menu,
.color-mode-menu.is-visible {
display: block;
}
.color-mode-menu-item {
display: block;
width: 100%;
padding: 0.375rem 0.75rem; /* 6px 12px */
border: none;
background: transparent;
text-align: left;
font-size: 0.8125rem; /* 13px */
cursor: pointer;
color: var(--text-main);
}
.color-mode-menu-item:hover {
background: var(--bg-grey-light);
}
/* Color inputs */
.color-inputs {
display: flex;
align-items: center;
gap: 0; /* убираем gap для unified стиля */
background: var(--bg-grey);
border-radius: var(--radius);
overflow: hidden;
flex: 1; /* занимает всё оставшееся пространство */
}
.color-input-group {
display: flex;
align-items: center;
gap: 0;
}
/* Скрываем лейблы C, M, Y, K */
.color-input-label {
display: none;
}
.color-num-input {
flex: 1;
min-width: 0;
padding: 0.375rem 0.125rem; /* 6px 2px */
border: none;
border-right: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 0;
font-size: 0.75rem; /* 12px */
font-weight: 400; /* обычный, не полужирный */
text-align: center;
background: transparent;
}
/* Убираем правую границу у последнего инпута */
.color-input-group:last-child .color-num-input,
.color-num-input:last-child {
border-right: none;
}
.color-num-input:focus {
outline: none;
background: rgba(255, 255, 255, 0.3);
}
/* Убираем спиннеры (кнопки вверх/вниз) из number inputs */
.color-num-input::-webkit-outer-spin-button,
.color-num-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.color-num-input[type="number"] {
-moz-appearance: textfield;
}
.color-hex-input {
flex: 1;
min-width: 0;
padding: 0.375rem 0.125rem; /* 6px 2px */
border: none;
border-radius: 0;
font-size: 0.75rem; /* 12px */
font-weight: 400;
text-align: center;
background: transparent;
font-family: monospace;
text-transform: uppercase;
}
.color-hex-input:focus {
outline: none;
background: rgba(255, 255, 255, 0.3);
}
/* Preview and Add button */
.color-preview-row {
display: flex;
align-items: center;
gap: 0.75rem; /* 12px */
margin-top: 0.5rem; /* 8px */
}
.color-preview-swatch {
width: 6.25rem; /* 100px */
height: 1.6875rem; /* 27px */
border-radius: var(--radius);
border: var(--border);
background-color: var(--color-surface);
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}
.color-preview-row .btn {
margin-left: auto; /* прижимаем кнопку к правому краю */
}
/* Right column: Palette */
.color-palette-column {
display: flex;
flex-direction: column;
gap: 0.75rem; /* 12px */
min-width: 0;
padding-left: 1.25rem; /* 20px */
padding-right: 1.25rem; /* 20px */
border-left: var(--border);
margin-top: -1.25rem; /* линия до header */
margin-bottom: -1.25rem; /* линия до низа */
padding-top: 1.25rem; /* 20px */
padding-bottom: 1.25rem; /* 20px */
}
/* Palette header */
.palette-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem; /* 8px */
}
.palette-dropdown-wrap {
position: relative;
}
.palette-dropdown-btn {
display: flex;
align-items: center;
gap: 0.375rem; /* 6px */
padding: 0.375rem 0.625rem; /* 6px 10px */
background: transparent;
border: none;
font-size: 0.875rem; /* 14px */
font-weight: 500;
cursor: pointer;
color: var(--text-main);
border-radius: var(--radius);
}
.palette-dropdown-btn:hover {
background: var(--bg-grey-light);
}
.palette-dropdown-menu {
position: absolute;
top: 100%;
left: 0;
margin-top: 0.25rem; /* 4px */
min-width: 11.25rem; /* 180px */
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: 0.375rem; /* 6px */
box-shadow: var(--shadow-md);
padding: 0.25rem 0; /* 4px */
display: none;
z-index: 100;
}
.palette-dropdown-wrap.is-open .palette-dropdown-menu {
display: block;
}
.palette-dropdown-menu.is-visible {
display: block;
}
.palette-menu-item {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.5rem 0.75rem; /* 8px 12px */
border: none;
background: transparent;
text-align: left;
font-size: 0.8125rem; /* 13px */
cursor: pointer;
color: var(--text-main);
}
.palette-menu-item:hover {
background: var(--bg-grey-light);
}
.palette-menu-item--danger {
color: var(--color-danger);
}
.palette-menu-item--danger:hover {
background: var(--color-danger-soft);
}
.palette-menu-separator {
height: 1px;
background: var(--border-color);
margin: 0.25rem 0; /* 4px */
}
/* Submenu */
.palette-menu-item--submenu {
position: relative;
}
.palette-submenu {
position: absolute;
left: 100%;
top: 0;
min-width: 8.75rem; /* 140px */
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: 0.375rem; /* 6px */
box-shadow: var(--shadow-md);
padding: 0.25rem 0; /* 4px */
display: none;
z-index: 101;
}
.palette-menu-item--submenu:hover .palette-submenu {
display: block;
}
.palette-submenu.is-visible {
display: block;
}
.palette-submenu--presets {
min-width: 18.75rem; /* 300px */
}
.palette-preset-item {
gap: 0.875rem; /* 14px */
}
.palette-preset-label {
flex: 0 0 4.75rem; /* 76px */
}
.palette-preset-preview {
display: flex;
align-items: center;
gap: 0.3125rem; /* 5px */
flex: 1;
min-width: 0;
}
.palette-preset-chip {
width: 1rem; /* 16px */
height: 1rem; /* 16px */
border-radius: 0.3125rem; /* 5px */
border: 0.5px solid rgba(0, 0, 0, 0.12);
flex-shrink: 0;
}
/* View toggle */
.palette-view-toggle {
display: flex;
gap: 0.25rem; /* 4px */
}
/* Palette list */
.palette-list {
flex: 1;
min-height: 12.5rem; /* 200px */
max-height: 20rem; /* 320px */
overflow-y: auto;
padding: 0;
border: none;
border-radius: 0;
background: var(--bg-main); /* белый фон */
}
/* Grid view */
.palette-list.view-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.5rem; /* 8px */
align-content: start;
}
.palette-list.view-grid .palette-swatch {
position: relative;
aspect-ratio: 1;
border-radius: 0.375rem; /* 6px */
border: 1px solid rgba(0,0,0,0.1);
cursor: pointer;
transition: transform 0.1s;
}
.palette-list.view-grid .palette-swatch:hover {
/* transform removed - no scaling on hover */
}
.palette-list.view-grid .palette-swatch-delete {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
border-radius: inherit;
border: none;
background: rgba(0,0,0,0.5);
color: #fff;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
padding: 0;
}
.palette-list.view-grid .palette-swatch:hover .palette-swatch-delete {
display: flex;
}
.palette-list.view-grid .palette-swatch-delete svg {
width: 1rem; /* 16px */
height: 1rem; /* 16px */
}
/* Rows view */
.palette-list.view-rows {
display: flex;
flex-direction: column;
gap: 0.375rem; /* 6px */
}
.palette-list.view-rows .palette-swatch {
display: flex;
align-items: center;
gap: 0.625rem; /* 10px */
padding: 0.375rem 0.5rem; /* 6px 8px */
background: var(--color-surface);
border-radius: 0.25rem; /* 4px */
border: 1px solid transparent;
cursor: pointer;
}
.palette-list.view-rows .palette-swatch:hover {
border-color: var(--border-color);
}
.palette-list.view-rows .palette-swatch-color {
width: 1.5rem; /* 24px */
height: 1.5rem; /* 24px */
border-radius: 0.25rem; /* 4px */
border: 1px solid rgba(0,0,0,0.1);
flex-shrink: 0;
}
.palette-list.view-rows .palette-swatch-hex {
flex: 1;
font-size: 0.8125rem; /* 13px */
font-family: monospace;
color: var(--text-main);
}
.palette-list.view-rows .palette-swatch-delete {
width: 1.5rem; /* 24px */
height: 1.5rem; /* 24px */
border-radius: 0.25rem; /* 4px */
border: none;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
opacity: 0;
transition: opacity 0.15s;
}
.palette-list.view-rows .palette-swatch:hover .palette-swatch-delete {
opacity: 1;
}
.palette-list.view-rows .palette-swatch-delete:hover {
color: var(--color-danger);
background: var(--color-danger-soft);
}
.palette-list.view-rows .palette-swatch-delete svg {
width: 0.75rem; /* 12px */
height: 0.75rem; /* 12px */
}
/* Edit button in rows view */
.palette-list.view-rows .palette-swatch-edit {
width: 1.5rem; /* 24px */
height: 1.5rem; /* 24px */
border-radius: 0.25rem; /* 4px */
background: transparent;
border: none;
cursor: pointer;
color: #999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
padding: 0;
transition: opacity 0.15s;
}
.palette-list.view-rows .palette-swatch:hover .palette-swatch-edit {
opacity: 1;
}
.palette-list.view-rows .palette-swatch-edit:hover {
color: var(--color-info);
background: var(--color-info-soft);
}
.palette-list.view-rows .palette-swatch-edit svg {
width: 0.75rem; /* 12px */
height: 0.75rem; /* 12px */
}
/* Highlight row being edited */
.palette-list.view-rows .palette-swatch--editing {
border-color: var(--color-info);
background: var(--color-info-soft);
}
.palette-list.view-rows .palette-swatch--editing .palette-swatch-edit {
opacity: 1;
color: var(--color-info);
}
/* Footer (старый, скрыт) */
.color-modal-footer {
display: none;
}
/* Footer внутри правой колонки (палитры) */
.color-palette-footer {
display: flex;
justify-content: flex-end;
gap: 0.625rem; /* 10px */
padding-top: 1rem; /* 16px */
margin-top: auto;
border-top: var(--border);
margin-left: -1.25rem; /* -20px */
margin-right: -1.25rem; /* -20px */
padding-left: 1.25rem; /* 20px */
padding-right: 1.25rem; /* 20px */
}
/* Legacy support - keep old classes working */
.color-large-preview {
width: 3.125rem; /* 50px */
height: 3.125rem; /* 50px */
border-radius: var(--radius);
border: var(--border);
background-color: var(--color-surface);
}
.full-width {
width: 100%;
}
/* Apply checkerboard to templates when transparent */
.template-item.is-transparent {
background-image:
conic-gradient(
#ebebeb 90deg,
transparent 90deg 180deg,
#ebebeb 180deg 270deg,
transparent 270deg
) !important;
/* Размер полного паттерна 16px, значит одна клетка будет 8px */
background-size: 3.125rem 3.125rem !important; /* 50px 50px */
background-color: #fff !important;
/* На всякий случай сбрасываем позицию */
background-position: 0 0 !important;
}
.custom-color-group {
display: flex;
align-items: center;
gap: 0.25rem; /* 4px */
/* Отступ между пипеткой и плюсиком */
}
/* Сделаем кнопку плюса зеленой при наведении, чтобы было понятно действие */
#btn-add-current-color:hover {
color: var(--green);
/* Рли любой РґСЂСѓРіРѕР№ активный цвет */
background-color: #e6f7ed;
border-radius: 0.25rem; /* 4px */
}
/* Прячем кнопку, которую создает сам Pickr, чтобы использовать нашу */
.pickr {
display: none !important;
}
/* Настраиваем z-index, чтобы окно пикера было поверх всего */
.pcr-app {
z-index: 9999 !important;
}
/* --- НАСТРОЙКРРАЗМЕРА PICKR --- */
/* 1. Увеличиваем масштаб всего окна */
.pcr-app {
/* По умолчанию там около 13-14px.
Поставьте 18px или 20px, чтобы сделать его крупным. */
font-size: 1.125rem !important; /* 18px */
/* Можно добавить ширину, если кажется узким */
width: 22em !important;
}
/* 2. Увеличиваем высоту полосок выбора цвета (Hue и Opacity) */
.pcr-app .pcr-selection .pcr-color-chooser,
.pcr-app .pcr-selection .pcr-color-opacity {
height: 0.8em !important;
/* Делаем полоски потолще, чтобы удобнее попадать */
}
/* Уменьшаем конкретно кнопку "Добавить" */
.pcr-app .pcr-interaction .pcr-save {
font-size: 0.8125rem !important; /* 13px */
/* Ставим фиксированный небольшой размер шрифта */
padding: 0.375rem 0.75rem !important; /* 6px 12px */
/* Делаем кнопку компактнее по высоте */
height: auto !important;
/* Сбрасываем лишнюю высоту */
font-weight: 600 !important;
/* Оставляем жирность */
margin-top: .75em !important;
/* Выравнивание по вертикали с HEXA input */
}
/* Также можно чуть уменьшить поля ввода HEX/RGB, если они тоже кажутся гигантскими */
.pcr-app .pcr-interaction input {
font-size: 0.8125rem !important; /* 13px */
padding: 0.375rem 0.5rem !important; /* 6px 8px */
border-radius: 0.25rem !important; /* 4px */
}
/* === NEW: gallery-zone tiles (files/spreads) === */
/* one spread tile (200px) */
.gallery-spread-tile {
width: 12.5rem; /* 200px */
border: var(--spread-border);
border-radius: 0.375rem; /* 6px */
background: var(--bg-main);
position: relative;
cursor: default;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.gallery-spread-tile:active {
cursor: default;
}
.gallery-spread-tile.is-selected {
background: var(--bg-dark) !important;
}
.gallery-spread-tile.is-selected .gallery-spread-inner {
background: var(--bg-dark) !important;
}
.gallery-spread-tile.is-selected .gallery-page-thumb {
background: transparent;
}
.gallery-spread-tile:hover {
box-shadow: 3px 5px 5px rgb(236, 236, 236);
border-color: #aaaaaa;
}
.gallery-spread-tile.is-drop-target {
outline: 2px dashed var(--bg-dark);
outline-offset: -4px;
}
/* two thumbs side-by-side */
.gallery-spread-inner {
display: grid;
grid-template-columns: 6.25rem 6.25rem; /* 100px 100px */
}
.gallery-page-thumb {
width: 6.25rem; /* 100px */
height: auto;
object-fit: cover;
display: block;
background: #eee;
border-radius: 1px;
}
/* Covers module: one thumbnail per tile */
.gallery-zone > .gallery-spread-tile.is-cover .gallery-spread-inner {
grid-template-columns: 12.5rem; /* 200px */
}
.gallery-zone > .gallery-spread-tile.is-cover .gallery-page-thumb {
width: 12.5rem; /* 200px */
object-fit: contain;
}
/* Single-page spread: render as ONE thumbnail (like a cover), not a half-empty
2-slot spread. Mirrors the .is-cover one-column sizing. Complete spreads keep
the default 2-column layout above. */
.gallery-spread-tile.is-single-page .gallery-spread-inner {
grid-template-columns: 6.25rem; /* 100px */
}
.gallery-spread-tile.is-single-page .gallery-page-thumb {
width: 6.25rem; /* 100px */
object-fit: contain;
}
.gallery-zone.is-dragover {
outline: 2px dashed var(--bg-dark);
outline-offset: -6px;
}
/* === Gallery Expanded View Layout === */
/* Simple view: default grid with gaps */
.gallery-zone {
gap: 1.25rem; /* 20px */
}
/* Flat fallback (no collection sections): tiles keep their horizontal inset, since the
zone itself no longer pads sides (that inset moved to .gallery-collection-body for grouped view). */
.gallery-zone:not(:has(.gallery-collection)) {
padding-left: 0.875rem; /* 14px */
padding-right: 0.625rem; /* 10px */
}
.gallery-collection:first-child .gallery-collection-head { border-top: 1px solid #cfe9db; }
/* ── Collection sections (Stage F1) ──────────────────────────────────────────
When server-defined groups are present the gallery becomes a vertical stack of
collapsible sections; each section body is itself the fixed-cell tile grid.
Falls back to the flat tile grid when no .gallery-collection is rendered. */
.gallery-zone:has(.gallery-collection) {
display: flex;
flex-direction: column;
gap: 0.5rem; /* 8px */
}
.gallery-collection {
display: flex;
flex-direction: column;
}
.gallery-collection-head {
display: flex;
align-items: center;
gap: 0.5rem; /* 8px */
/* Edge-to-edge band: no horizontal inset (the zone no longer pads sides; tiles inset
via .gallery-collection-body). ~40px tall, scales with rem/--ui-scale. */
height: 2.5rem;
padding: 0 0.625rem; /* 10px */
cursor: pointer;
user-select: none;
font-size: 0.6875rem; /* 11px */
font-weight: 600;
letter-spacing: 0.04em;
color: #2f6b4f;
background: #E5F5ED;
border-bottom: 1px solid #cfe9db;
box-sizing: border-box;
}
.gallery-collection-caret {
display: inline-block;
transition: transform 0.15s ease;
transform: rotate(90deg);
font-size: 0.8125rem; /* 13px */
}
.gallery-collection.is-collapsed .gallery-collection-caret { transform: rotate(0deg); }
.gallery-collection-name { white-space: nowrap; }
.gallery-collection-auto {
margin-left: 0.375rem; /* 6px */
font-weight: 500;
color: var(--color-accent, #2BBB75);
text-transform: none;
letter-spacing: 0;
}
.gallery-collection-actions {
margin-left: auto;
display: inline-flex;
gap: 0.25rem; /* 4px */
}
.gallery-collection-btn {
border: none;
background: transparent;
cursor: pointer;
font-size: 0.75rem; /* 12px */
line-height: 1;
padding: 0.125rem 0.25rem; /* 2px 4px */
border-radius: 0.25rem; /* 4px */
color: #2f6b4f;
opacity: 0.65;
}
.gallery-collection-btn:hover { opacity: 1; background: rgba(0,0,0,0.06); }
/* Icon variant (delete): borderless, standard icon size like the other gallery icons. */
.gallery-collection-btn--icon {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.25rem; /* 4px */
}
.gallery-collection-btn--icon .icon-size {
width: 1rem; /* 16px */
height: 1rem; /* 16px */
color: #2f6b4f;
}
.gallery-collection-btn--icon:hover { background: transparent; }
.gallery-collection-btn--icon:hover .icon-size { color: #E5484D; }
.gallery-collection-add {
align-self: flex-start;
margin: 0.25rem 0.125rem 0.75rem 0.125rem; /* 4px 2px 12px 2px */
border: 1px dashed #cfe9db;
background: transparent;
color: #2f6b4f;
font-size: 0.6875rem; /* 11px */
font-weight: 600;
letter-spacing: 0.04em;
padding: 0.375rem 0.75rem; /* 6px 12px */
border-radius: 0.375rem; /* 6px */
cursor: pointer;
}
.gallery-collection-add:hover { background: #E5F5ED; }
/* Tile move-to-group context menu */
.gallery-ctx-menu {
position: fixed;
z-index: 9999;
min-width: 10rem; /* 160px */
background: #fff;
border: 1px solid var(--color-border, #ddd);
border-radius: 0.5rem; /* 8px */
box-shadow: 0 6px 24px rgba(0,0,0,0.18);
padding: 0.25rem; /* 4px */
font-size: 0.8125rem; /* 13px */
}
.gallery-ctx-title {
font-size: 0.6875rem; /* 11px */
font-weight: 600;
color: #888;
padding: 0.375rem 0.625rem 0.25rem; /* 6px 10px 4px */
text-transform: uppercase;
letter-spacing: 0.04em;
}
.gallery-ctx-item {
padding: 0.4375rem 0.625rem; /* 7px 10px */
border-radius: 0.375rem; /* 6px */
cursor: pointer;
white-space: nowrap;
}
.gallery-ctx-item:hover { background: #E5F5ED; }
.gallery-ctx-item.is-disabled { color: #aaa; cursor: default; }
.gallery-ctx-item.is-disabled:hover { background: transparent; }
.gallery-ctx-sep { height: 1px; margin: 4px 6px; background: var(--color-border, #eee); }
/* Manual Group context menu: "Move group to ▸" submenu (flyout on hover). */
.gallery-ctx-item.has-submenu { position: relative; padding-right: 22px; }
.gallery-ctx-submenu {
position: absolute;
left: 100%;
top: -0.25rem; /* -4px */
margin-left: 0.125rem; /* 2px */
min-width: 10rem; /* 160px */
background: #fff;
border: 1px solid var(--color-border, #ddd);
border-radius: 0.5rem; /* 8px */
box-shadow: 0 6px 24px rgba(0,0,0,0.18);
padding: 0.25rem; /* 4px */
display: none;
}
.gallery-ctx-item.has-submenu:hover > .gallery-ctx-submenu { display: block; }
/* Destructive menu item (Remove group). */
.gallery-ctx-item.is-danger { color: var(--color-danger); }
.gallery-ctx-item.is-danger:hover { background: var(--color-danger-soft); }
/* Manual Group: ⋮ menu button in the module header + empty-state hint. */
.pdf-btn.pdf-module-menu { display: inline-flex; align-items: center; justify-content: center; }
.pdf-module-empty-hint {
grid-column: 1 / -1;
padding: 1.125rem 0.75rem; /* 18px 12px */
text-align: center;
color: #999;
font-size: 0.8125rem; /* 13px */
border: 1px dashed var(--color-border, #ddd);
border-radius: 0.5rem; /* 8px */
}
/* All files: project switcher + read-only (viewing another project) state */
.uh-project-select {
height: 1.75rem; /* 28px */
border: 1px solid var(--color-border, #ddd);
border-radius: 0.375rem; /* 6px */
padding: 0 0.5rem; /* 8px */
font-size: 0.75rem; /* 12px */
background: #fff;
max-width: 11.25rem; /* 180px */
}
/* When viewing another project, only copying into the current one is allowed:
hide destructive/move controls. "Add" stays (it copies). */
.uh-readonly-view #uh-clear-selected,
.uh-readonly-view #uh-clear-all,
.uh-readonly-view .uh-tile-delete,
.uh-readonly-view .uh-row-delete,
.uh-readonly-view .uh-pdf-delete { display: none !important; }
/* All files no longer hosts collection groups — hide any legacy add-group control there. */
#upload-history-modal .uh-add-group { display: none !important; }
/* Collapse-all-groups button (in the spread action row's right-aligned group). */
.spread-action-row__collapse svg { display: block; }
.gallery-collection-body {
display: grid;
/* Grouped standalone tiles fill their tracks; allow a small shrink before leaving a wide gap. */
--gallery-collection-tile-min: min(calc(var(--gallery-tile-size, 12.5rem) * 0.85), 100%);
grid-template-columns: repeat(auto-fill, minmax(var(--gallery-collection-tile-min), 1fr));
justify-content: start;
gap: 0.625rem; /* 10px */
/* right padding trimmed 20→12px to offset the constant 8px scrollbar gutter, keeping the
visual gap to the divider a steady ~20px. */
padding: 1.25rem 0.75rem 1.25rem 1.25rem; /* 20px 12px 20px 20px */
}
.gallery-collection.is-collapsed .gallery-collection-body { display: none; }
/* Tiles inside a section body get the same card treatment as direct-child tiles. */
.gallery-collection-body > .gallery-spread-tile {
width: 100%;
min-width: 0;
height: auto;
box-sizing: border-box;
border: 1px solid var(--color-border);
border-radius: 0.625rem; /* 10px */
background: var(--color-surface);
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
overflow: hidden;
}
.gallery-collection-body > .gallery-spread-tile:not(.is-cover):not(.is-single-page) {
grid-column: span 2;
width: 100%;
}
/* Expanded view: fixed-cell grid with card containers.
Tile sizes are relative to --gallery-tile-size (default 200px, set by download_logic.js)
so zoom changes the frame and image together instead of stretching cards to fit. */
.gallery-zone.view-expanded {
grid-template-columns: repeat(auto-fill, var(--gallery-tile-size, 12.5rem)) !important; /* 200px */
justify-content: start;
gap: 1.25rem !important; /* 20px */
/* No horizontal inset and no top inset: group heads span edge-to-edge to the divider and
the first collection (e.g. PDF) butts against the top of the gallery. Tiles keep their
insets via .gallery-collection-body padding (flat fallback pads itself below). */
padding: 0 !important;
}
/* Flat (no-collection) expanded view keeps a comfortable inset around the bare tile grid. */
.gallery-zone.view-expanded:not(:has(.gallery-collection)) {
padding: 0.875rem 0.625rem 0.875rem 0.875rem !important; /* 14px 10px 14px 14px */
}
.gallery-zone.view-expanded.is-module-covers {
grid-template-columns: repeat(auto-fill, var(--gallery-tile-size, 12.5rem)) !important; /* 200px */
justify-content: start;
gap: 1.25rem !important; /* 20px */
}
/* Expanded view: white card containers (outer white background) */
.gallery-zone.view-expanded > .gallery-spread-tile {
width: var(--gallery-tile-size, 12.5rem); /* 200px */
min-width: var(--gallery-tile-size, 12.5rem); /* 200px */
height: calc(var(--gallery-tile-size, 12.5rem) + 2.8125rem); /* 200px 45px */
box-sizing: border-box;
border: 1px solid var(--color-border);
border-radius: 0.625rem; /* 10px */
background: var(--color-surface);
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
overflow: hidden;
}
.gallery-zone.view-expanded > .gallery-spread-tile:not(.is-cover):not(.is-single-page) {
grid-column: span 2;
width: calc((var(--gallery-tile-size, 12.5rem) * 2) + 1.25rem); /* 200px 20px */
}
.gallery-zone.view-expanded.is-module-covers > .gallery-spread-tile.is-cover {
width: var(--gallery-tile-size, 12.5rem); /* 200px */
min-width: var(--gallery-tile-size, 12.5rem); /* 200px */
height: calc(var(--gallery-tile-size, 12.5rem) + 2.8125rem); /* 200px 45px */
box-sizing: border-box;
}
.gallery-zone.view-expanded .gallery-spread-tile:hover {
box-shadow: var(--shadow-md);
border-color: var(--color-border-strong);
background-color: var(--bg-dark);
}
/* Expanded view: image container (fixed-size cell, white background).
The cell size tracks ONLY the zoom var; the page floats inside with a gap (padding). */
.gallery-zone.view-expanded > .gallery-spread-tile > .gallery-spread-inner {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: var(--space-4);
box-sizing: border-box;
background: var(--color-surface);
border-radius: 0;
padding: var(--space-4);
height: var(--gallery-tile-size, 12.5rem); /* 200px */
min-height: var(--gallery-tile-size, 12.5rem); /* 200px */
flex: 0 0 var(--gallery-tile-size, 12.5rem); /* 200px */
grid-template-columns: unset; /* Override default grid for spreads */
}
/* Expanded view: the page hugs its own image (object-fit:contain), so the frame wraps the
page itself — not the flex slot. Two-page spreads split the cell, each capped to a half. */
.gallery-zone.view-expanded > .gallery-spread-tile > .gallery-spread-inner > .gallery-page-thumb {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
min-width: 0;
min-height: 0;
object-fit: contain;
background: transparent;
border: 0.5px solid var(--color-border);
border-radius: 1px;
}
.gallery-zone.view-expanded > .gallery-spread-tile:not(.is-single-page):not(.is-cover) > .gallery-spread-inner > .gallery-page-thumb {
max-width: calc(50% - var(--space-4));
}
/* Expanded view: covers module adjustment */
.gallery-zone.view-expanded > .gallery-spread-tile.is-cover .gallery-spread-inner {
display: flex; /* Override grid for single covers */
}
.gallery-zone.view-expanded.is-module-covers > .gallery-spread-tile.is-cover .gallery-spread-inner {
display: flex;
justify-content: center;
align-items: center;
width: var(--gallery-tile-size, 12.5rem); /* 200px */
height: var(--gallery-tile-size, 12.5rem); /* 200px */
min-height: var(--gallery-tile-size, 12.5rem); /* 200px */
background: var(--color-surface);
}
.gallery-zone.view-expanded > .gallery-spread-tile.is-cover .gallery-page-thumb {
width: auto;
max-width: 100%;
border: 0.5px solid #d0d0d0;
}
.gallery-zone.view-expanded.is-module-covers > .gallery-spread-tile.is-cover .gallery-page-thumb {
max-width: calc(var(--gallery-tile-size, 12.5rem) * 0.9); /* was 180px @200 */
max-height: calc(var(--gallery-tile-size, 12.5rem) * 0.9); /* 200px */
width: auto;
height: auto;
object-fit: contain;
object-position: center;
}
/* Stage F1: mirror the expanded-view inner-content rules for tiles nested inside a
collection section body (the direct-child > selectors above don't reach them). */
.gallery-zone.view-expanded .gallery-collection-body > .gallery-spread-tile > .gallery-spread-inner {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: var(--space-4);
box-sizing: border-box;
background: var(--color-surface);
border-radius: 0;
padding: var(--space-4);
width: 100%;
aspect-ratio: 1 / 1;
height: auto;
min-height: 0;
flex: 0 0 auto;
grid-template-columns: unset;
}
.gallery-zone.view-expanded .gallery-collection-body > .gallery-spread-tile > .gallery-spread-inner > .gallery-page-thumb {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
min-width: 0;
min-height: 0;
object-fit: contain;
background: transparent;
border: 0.5px solid var(--color-border);
border-radius: 1px;
}
.gallery-zone.view-expanded .gallery-collection-body > .gallery-spread-tile:not(.is-single-page):not(.is-cover) > .gallery-spread-inner > .gallery-page-thumb {
max-width: calc(50% - var(--space-4));
}
.gallery-zone.view-expanded .gallery-collection-body > .gallery-spread-tile:not(.is-single-page):not(.is-cover) > .gallery-spread-inner {
aspect-ratio: 2 / 1;
}
.gallery-zone.view-expanded .gallery-collection-body > .gallery-spread-tile.is-cover .gallery-spread-inner {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
aspect-ratio: 1 / 1;
height: auto;
min-height: 0;
background: var(--color-surface);
}
.gallery-zone.view-expanded .gallery-collection-body > .gallery-spread-tile.is-cover .gallery-page-thumb {
max-width: 90%;
max-height: 90%;
width: auto;
height: auto;
object-fit: contain;
object-position: center;
border: 0.5px solid #d0d0d0;
}
/* Expanded view: adjust spine texture menu position */
.gallery-zone.view-expanded .spine-texture-menu {
bottom: 3.3125rem; /* Move up to account for 45px metadata row + 8px gap */
}
/* === Gallery Metadata Row (Expanded View Only) === */
/* Hidden by default (simple view) */
.gallery-spread-tile-meta {
display: none;
}
/* Visible in expanded view */
.gallery-zone.view-expanded .gallery-spread-tile-meta {
display: flex;
align-items: center;
gap: 0.5rem; /* 8px */
font-size: 0.75rem; /* 12px */
color: var(--text-secondary);
height: 2.1875rem; /* 35px */
min-height: 1.875rem; /* 30px */
padding: 0 0.625rem; /* 10px */
border-top: 1px solid #e6e6e6;
margin-top: 0;
flex-shrink: 0;
}
/* Color mode tag (RGB/CMYK) */
.gallery-color-mode-tag {
font-size: 0.625rem; /* 10px */
font-weight: 600;
line-height: 1;
padding: 0.1875rem 0.375rem; /* 3px 6px */
border: 1px solid var(--color-border-strong);
border-radius: 0.375rem; /* 6px */
background: var(--color-surface);
color: #444;
flex-shrink: 0;
letter-spacing: 0.02em;
}
.gallery-spread-tile.is-selected .gallery-color-mode-tag {
border-color: rgba(255,255,255,0.35);
background: rgba(255,255,255,0.1);
color: rgba(255,255,255,0.9);
}
.gallery-spread-tile.is-selected .gallery-filename {
color: rgba(255,255,255,0.65);
}
/* Filename with ellipsis truncation */
.gallery-filename {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.6875rem; /* 11px */
color: #666;
}
/* === Gallery Loading Placeholder === */
/* Loading placeholder for images */
.gallery-page-thumb.is-loading {
display: block !important;
width: 100% !important;
min-width: 9.375rem !important; /* 150px */
min-height: 12.5rem !important; /* 200px */
background: #e0e0e0 !important;
position: relative;
overflow: hidden;
}
/* Three dots animation */
.gallery-page-thumb.is-loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 3.125rem; /* 50px */
height: 0.625rem; /* 10px */
background:
radial-gradient(circle 4px, #999 100%, transparent 0) 0 center,
radial-gradient(circle 4px, #999 100%, transparent 0) 20px center,
radial-gradient(circle 4px, #999 100%, transparent 0) 40px center;
background-size: 0.625rem 0.625rem; /* 10px 10px */
background-repeat: no-repeat;
animation: gallery-loading-dots 1.4s infinite ease-in-out;
}
@keyframes gallery-loading-dots {
0%, 100% {
opacity: 0.3;
}
20% {
opacity: 1;
}
40% {
opacity: 0.3;
}
}
/* Expanded view loading adjustments */
.gallery-zone.view-expanded .gallery-page-thumb.is-loading {
min-width: 11.25rem !important; /* 180px */
min-height: 15rem !important; /* 240px */
background: #e0e0e0 !important;
}
/* === TILE-SIZED PLACEHOLDER (shown while file uploads) === */
.gallery-loading-placeholder {
width: 100%;
min-height: 15.625rem; /* 250px */
background: #e0e0e0;
border-radius: 0.375rem; /* 6px */
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* Spinner animation for tile placeholder (same as template spinner) */
.gallery-loading-placeholder::after {
content: '';
width: 1.75rem; /* 28px */
height: 1.75rem; /* 28px */
border-radius: 50%;
border: 3px solid #666;
border-color: #666 transparent #666 transparent;
animation: dropzone-spin 1.0s linear infinite;
display: inline-block;
}
/* Expanded view: placeholder fills the tile inner */
.gallery-zone.view-expanded .gallery-loading-placeholder {
min-height: 18.75rem; /* 300px */
background: #f5f5f5;
border-radius: 0.375rem; /* 6px */
}
.gallery-zone.view-expanded.is-module-covers > .gallery-spread-tile.is-cover .gallery-loading-placeholder {
width: 100%;
height: 100%;
min-height: 0;
}
/* Use lighter spinner color in expanded view */
.gallery-zone.view-expanded .gallery-loading-placeholder::after {
border-color: #999 transparent #999 transparent;
}
.export-queue-sheet.is-hidden {
display: none;
}
.export-queue-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem; /* 12px */
padding: 0.625rem 0.75rem; /* 10px 12px */
border-bottom: var(--border);
}
.export-queue-title {
font-weight: 600;
font-size: 0.95rem;
display: flex;
align-items: center;
gap: 0.5rem; /* 8px */
}
.export-queue-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.5rem; /* 24px */
height: 1.25rem; /* 20px */
padding: 0 0.5rem; /* 8px */
border-radius: 999px;
border: var(--border);
font-size: 0.8rem;
background: #f7f7f7;
}
.export-queue-actions {
display: flex;
gap: 0.5rem; /* 8px */
}
/* --- СЕРЕДРРќРђ: Сетка СЃ картинками (Р РђРЎРўРЇР“РВАЕТСЯ) --- */
.export-queue-grid {
/* Рто ключевое свойство: занимай РІСЃС‘ СЃРІРѕР±РѕРґРЅРѕРµ место! */
flex: 1 1 auto;
height: auto; /* Сбросьте фиксированную высоту, если была */
min-height: 0; /* Важно для прокрутки внутри флекс-элемента */
/* Включаем скролл, если картинок много */
overflow-y: auto;
overflow-x: hidden;
padding: 0.625rem; /* 10px */
display: grid;
grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); /* Пример сетки */
gap: 0.625rem; /* 10px */
align-content: start; /* Чтобы ряды не "размазывались" по высоте при малом кол-ве */
}
.export-queue-grid .mockup-wrapper.export-queue-item {
flex: 0 0 auto;
width: 5rem; /* 80px */
height: 5rem; /* 80px */
border: var(--border);
border-radius: 0.625rem; /* 10px */
background: var(--color-surface);
}
/* Визуальный ховер при приёме дропа на шаблон */
.template-item.is-drop-receiver {
outline: 2px solid #3B3B3B;
outline-offset: 2px;
}
/* Split drop zones for multi-cover tiles */
.mc-drop-overlay {
position: absolute;
inset: 0;
z-index: 10;
display: flex;
flex-direction: column;
pointer-events: none;
opacity: 0;
transition: opacity 0.12s;
}
.template-item.is-mc-drop-receiver .mc-drop-overlay {
opacity: 1;
}
.mc-drop-zone {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.3125rem; /* 5px */
font-size: 0.625rem; /* 10px */
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: rgba(255, 255, 255, 0.75);
background: rgba(0, 0, 0, 0.58);
transition: background 0.1s, color 0.1s;
}
.mc-drop-zone--split {
border-bottom: 2px dashed rgba(255, 255, 255, 0.45);
}
.mc-drop-zone__icon {
height: 22cqi;
width: auto;
flex-shrink: 0;
}
/* Solo zone (no split) — icon takes up more space */
.mc-drop-zone--top:not(.mc-drop-zone--split) .mc-drop-zone__icon {
height: 38cqi;
}
.mc-drop-zone.is-active {
background: rgba(0, 176, 88, 0.72);
color: #fff;
}
/* === Live preview toggle in gallery-top-menu === */
.live-preview-toggle {
display: inline-flex;
align-items: center;
gap: 0.5rem; /* 8px */
font-size: 0.75rem; /* 12px */
color: var(--text-secondary);
user-select: none;
}
.live-preview-toggle input {
transform: translateY(1px);
}
/* === Gallery multi-select marquee + insert marker === */
.gallery-marquee {
position: absolute;
border: 1px dashed rgba(0,0,0,0.35);
background: rgba(0,0,0,0.06);
pointer-events: none;
z-index: 5;
}
.gallery-insert-marker {
position: absolute;
width: 0.125rem; /* 2px */
background: var(--color-brand);
border-radius: 0.125rem; /* 2px */
pointer-events: none;
z-index: 6;
}
/* Neighbor tiles part ~6px around the insert marker (transform → no reflow). */
.gallery-spread-tile.is-shift-left { transform: translateX(-6px); transition: transform 120ms ease; }
.gallery-spread-tile.is-shift-right { transform: translateX(6px); transition: transform 120ms ease; }
/* Active drop target during a drag: green ring (box-shadow → no size change / reflow). */
.gallery-collection.is-drop-active,
.pdf-module.is-drop-active {
border-color: var(--color-brand);
box-shadow: 0 0 0 1px var(--color-brand);
}
/* remove confusing tile "drop target" highlight (we use marker between tiles instead) */
.gallery-spread-tile.is-drop-target {
outline: none;
}
/* === Export queue: background render overlay === */
.export-queue-item.is-rendering .gallery-image {
opacity: 0.35;
}
.export-queue-render-overlay {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: 0.6875rem; /* 11px */
color: var(--text-secondary);
background: rgba(255,255,255,0.6);
pointer-events: none;
}
/* --- Gallery improvements (selection + spacing) --- */
.gallery-zone {
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
}
/* Constant 8px scrollbar gutter — reserved at ALL times so nothing ever shifts (Chromium no
longer honours overflow:overlay → a hover-toggled bar reflowed/shrank content). The TRACK is
painted with the gallery background so the reserved gutter reads as part of the gallery (no
visible "hole"); the THUMB is transparent at rest and fades in on hover. The 8px gutter is
compensated by trimming 8px off the group-body RIGHT padding (12px instead of 20px) so the
visual gap to the divider stays a constant ~20px. */
.gallery-zone {
scrollbar-width: thin; /* Firefox: constant thin gutter */
scrollbar-color: transparent var(--bg-project, #f7f8fa);
transition: scrollbar-color 0.15s ease;
}
.gallery-zone:hover {
scrollbar-color: rgba(0,0,0,0.32) var(--bg-project, #f7f8fa);
}
.gallery-zone::-webkit-scrollbar {
width: 0.5rem; /* constant gutter — identical at rest and hover */
background: var(--bg-project, #f7f8fa);
}
.gallery-zone::-webkit-scrollbar-track { background: var(--bg-project, #f7f8fa); }
.gallery-zone::-webkit-scrollbar-thumb {
background: transparent; /* hidden at rest, no visible bar */
border-radius: 0.25rem; /* 4px */
transition: background 0.15s ease;
}
.gallery-zone:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.32); }
.gallery-spread-tile{
border-radius: 0.375rem; /* 6px */
}
.gallery-spread-inner{
border-radius: 0.375rem; /* 6px */
}
.gallery-selection-status{
font-size: 0.75rem; /* 12px */
opacity: 0.85;
margin-right: 0.625rem; /* 10px */
user-select: none;
}
.templates-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
flex-shrink: 0;
padding: 0 1.25rem; /* 20px */
height: 3.125rem; /* 50px */
box-sizing: border-box;
border-bottom: var(--border);
}
.templates-filter-bar {
display: flex;
flex-direction: row;
align-items: center;
/* NO flex-wrap: btn_collapse.js collapses unlockAll/reset buttons here on overflow; wrapping breaks it. */
gap: var(--space-3);
padding: 0.5rem 1.25rem; /* 8px 20px */
width: 100%;
min-width: 0;
flex-shrink: 0;
box-sizing: border-box;
border-bottom: var(--border);
}
.templates-actions {
display: flex;
gap: 0.625rem; /* Расстояние между самими кнопками */
align-items: center;
margin-left: auto;
flex-shrink: 0;
}
/* small count badge on template drop */
.template-drop-count{
position: absolute;
top: 0.625rem; /* 10px */
left: 0.625rem; /* 10px */
min-width: 1.375rem; /* 22px */
height: 1.375rem; /* 22px */
padding: 0 0.375rem; /* 6px */
border-radius: 0.6875rem; /* 11px */
background: rgba(0,0,0,0.75);
color: #fff;
font-size: 0.75rem; /* 12px */
display: inline-flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.preferences-bar {
grid-area: preferences-bar;
display: flex;
padding-left: 1.25rem; /* 20px */
border-bottom: var(--border);
background: var(--bg-project);
}
.color-picker-controls-panel {
grid-area: color-picker-controls;
border-bottom: var(--border);
border-left: var(--border);
border-right: var(--border);
background: var(--bg-main);
overflow: visible; /* Позволяем полоске быть видимой */
}
.template-preview-zone { display: none !important; }
.upload-files-hidden { display: none !important; }
.export-tabs-zone {
grid-area: export-tabs-zone;
/* 1. Занимаем всю высоту Grid-ячейки (300px или сколько задано) */
height: 100%;
min-height: 0;
/* 2. Делаем его флекс-колонкой */
display: flex;
flex-direction: column;
/* 3. Разрешаем выпадающим меню торчать наружу (для вашего прошлого вопроса) */
overflow: visible;
background: var(--bg-main);
position: relative;
z-index: 10;
/* 4. Адаптивная ширина */
width: var(--export-zone-width, 30rem); /* 480px */
min-width: 7.5rem; /* 120px */
max-width: 30rem; /* 480px */
transition: width 0.15s ease;
container-type: inline-size;
container-name: export-zone;
/* 5. Прижать к правому краю grid-ячейки */
justify-self: end;
margin-left: auto;
/* 6. Левая граница */
border-left: var(--border);
}
.export-tabs-zone.is-resizing {
transition: none; /* отключить анимацию при ручном перетаскивании */
}
.tabs-header {
display: flex;
gap: 0.5rem; /* 8px */
padding: 0.75rem; /* 12px */
border-bottom: var(--border);
height: 3.125rem; /* 50px */
box-sizing: border-box;
}
/* Кнопка внутри хедера */
.tabs-header .header-action-btn {
margin-left: auto; /* Рто волшебное свойство прижимает элемент Рє правому краю */
}
#export-queue-clear { margin-left: auto; }
/* Компактный бар экспорта (альтернатива основному при узкой панели) */
/* По умолчанию скрыт - используем более высокую специфичность */
.export-controls-bar.export-controls-bar-compact {
display: none !important;
position: relative; /* Для позиционирования hamburger-menu */
}
/* Hamburger button позиционирование и видимость в компактном баре */
.export-controls-bar-compact .export-hamburger-btn {
display: flex !important; /* Показываем внутри компактного бара */
margin-left: auto;
}
.export-tabs-zone .tabs-body {
/* Занимает всё оставшееся пространство по вертикали */
flex: 1 1 auto;
/* Важно: создаем контекст для вложенных панелей */
display: flex;
flex-direction: column;
/* Предотвращаем переполнение родителя */
min-height: 0;
overflow: visible; /* Чтобы меню из export-controls-bar могло торчать вверх */
}
.export-tabs-zone .tab-panel {
/* Растягиваемся на всю высоту tabs-body */
flex: 1 1 auto;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
/* Здесь скрываем лишнее, чтобы скролл был только внутри сетки */
overflow: hidden;
}
/* Скрываем неактивные вкладки */
.export-tabs-zone .tab-panel.is-hidden {
display: none;
}
/* Убираем старые фиксы для шторки, делаем её частью потока */
.export-queue-sheet {
position: static;
width: 100%;
height: 100%;
transform: none;
border: none;
box-shadow: none;
border-radius: 0;
/* Рто тоже флекс-колонка */
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.export-queue-actions #export-queue-hide { display: none; }
/* Download list: allow absolute-centering of the empty message */
.download-list{
position: relative;
}
/* Download list placeholder — same style/centering as gallery empty message */
.download-list .download-empty{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--text-secondary);
font-size: 1.2em;
text-align: center;
pointer-events: none;
padding: 0;
width: calc(100% - 2.5rem); /* небольшой воздух по краям */
}
/* --- Layout v2 fixes --- */
.color-picker-controls-panel{
display:flex;
align-items:center;
justify-content:flex-start; /* Start from left, allow shrinking */
gap:0px;
flex-wrap:nowrap;
}
.color-picker-menu{
display:flex;
align-items:center;
gap:0.3125rem; /* 5px */
flex:0 0 auto;
width: auto;
padding-left: 1.25rem; /* 20px */
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.1875rem; /* 3px */
}
/* .color-picker-controls - УДАЛЕНО, используется определение выше (строка ~1877) */
.color-picker-controls::-webkit-scrollbar{ height:6px; }
.varnish-controls {
display: inline-flex;
align-items: center;
gap: 0.5rem; /* 8px */
min-width: max-content;
}
.varnish-controls.is-disabled {
opacity: 0.55;
}
.varnish-controls__file {
display: none;
}
.varnish-controls__upload {
min-width: 5.75rem; /* 92px */
}
.varnish-controls__invert.is-active {
background: rgba(30, 64, 175, 0.14);
color: #1d4ed8;
}
.varnish-controls__range {
width: 4.5rem; /* 72px */
accent-color: #111827;
}
.varnish-controls__range--angle {
width: 4rem; /* 64px */
}
.varnish-controls__value,
.varnish-controls__status {
font-size: 0.6875rem; /* 11px */
line-height: 1;
white-space: nowrap;
color: var(--muted-text, #6b7280);
}
.gallery-top-row{
display:flex;
align-items:center;
gap: var(--space-5);
width:100%;
min-width: 0; /* allow flex children to shrink instead of overflowing the import panel */
}
/* Add asset: static, always pinned to the right of the top row. */
.gallery-top-row__spacer {
margin-left: auto;
flex: 0 0 auto;
}
/* Icon must match the button's own text color (white on btn-dark), not the
generic muted .icon-size color set elsewhere in the stylesheet. */
.gallery-top-row__spacer .icon-size {
color: inherit;
}
/* Import toolbar narrow-state degradation (container query on .gallery-top-menu).
Truncate the All files label and drop the "Add image" text to icon-only so
the toolbar never clips on a narrow import column. */
#uploadHistoryBtn {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@container import-toolbar (max-width: 21.25rem) { /* 340px logical */
#galleryAddBtn > span { display: none; }
#galleryAddBtn { padding-inline: var(--space-3); }
}
@container import-toolbar (max-width: 17.5rem) { /* 280px logical */
#uploadHistoryBtn { max-width: 5.5rem; }
}
.gallery-numbers-toggle {
color: #828282;
}
.gallery-numbers-toggle.is-active,
.gallery-numbers-toggle[aria-pressed="true"] {
background: #454545;
border-color: #454545;
color: #eaeaea;
}
.gallery-numbers-icon {
display: block;
width: 0.9375rem; /* 15px */
height: 0.5625rem; /* 9px */
background: currentColor;
-webkit-mask: url("static/icons/icon-123.svg") center / contain no-repeat;
mask: url("static/icons/icon-123.svg") center / contain no-repeat;
}
/* Make sure export tabs panel height obeys the grid row */
.export-tabs-zone {
grid-area: export-tabs-zone;
height: 100%;
min-height: 0;
min-height: 0;
display: flex;
flex-direction: column;
}
.export-tabs-zone .tabs-body {
flex:1 1 auto;
overflow:hidden;
}
.export-tabs-zone .tab-panel{
height:100%;
display:flex;
flex-direction:column;
}
.export-controls-bar {
display: flex;
align-items: center;
gap: var(--space-3); /* tighter spacing between resolution/format/shadow */
z-index: 2500;
padding: 0 1.25rem; /* 20px */
border-bottom: var(--border);
height: 3.125rem; /* 50px */
box-sizing: border-box;
flex-shrink: 0;
position: relative; /* for positioning nested elements */
}
/* Second permanent export row: History (left), clean + undo (right). */
.export-actions-row {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 0 1.25rem; /* 20px */
height: 2.75rem; /* 44px, scales with --ui-scale */
border-bottom: var(--border);
box-sizing: border-box;
flex-shrink: 0;
}
.export-actions-row #exportCleanMenu {
margin-left: auto; /* push clean + undo to the right */
}
.export-queue-header,
.tabs-header {
position: relative;
z-index: 1; /* Хедер должен быть ниже бара с кнопками */
}
.export-controls-sep{
width:1px;
height:1.25rem; /* 20px */
background: #ddd;
flex:0 0 auto;
}
.export-queue-sheet{
position:static;
transform:none;
box-shadow:none;
border:none;
border-radius:0;
max-height:none;
height:100%;
overflow:hidden;
display:flex;
flex-direction:column;
}
.export-queue-grid{
flex:1 1 auto;
overflow:auto;
padding:0.625rem; /* 10px */
display:grid;
grid-template-columns: repeat(4, 1fr);
gap:0.625rem; /* 10px */
}
/* --- РќРР—: РљРЅРѕРїРєРё действий (РџР РР–РђРўР«) --- */
.export-actions-bar {
/* Explicit height on the shared token (was content-driven: 142px at scale 1) so
the variants panel's default top divider aligns with this bar's border-top. */
height: var(--bottom-dock-h);
box-sizing: border-box;
/* 1. Настройка расположения внутри бара */
display: flex;
flex-direction: column; /* Выстраиваем кнопки в колонку (вертикально) */
gap: 0.625rem; /* Расстояние между кнопками */
/* 2. Настройка самого бара (чтобы он был прижат к низу) */
flex-shrink: 0;
padding: 1.25rem 1.25rem; /* 20px 20px */
padding-bottom: 2.5rem; /* 40px */
border-top: var(--border);
background: var(--bg-main);
z-index: 5;
}
/* Опционально: Если хотите, чтобы кнопки растягивались на всю ширину */
.export-actions-bar button {
width: 100%;
}
.download-list {
/* Растягиваем список */
flex: 1 1 auto;
overflow-y: auto;
padding: 1.25rem; /* 20px */
display: grid;
/* Минимум колонки = размер превью + 120px контента; карточки заполняют ряд */
grid-template-columns: repeat(auto-fill, minmax(min(100%, max(15rem, calc(var(--dq-preview-size, 5.625rem) + 7.5rem))), 1fr)); /* 240px 90px 120px */
gap: 0.75rem; /* 12px */
align-content: start;
min-width: 0;
}
.download-row {
display: grid;
grid-template-columns: var(--dq-preview-size, 5.625rem) 1fr; /* 90px */
gap: 0.75rem; /* 12px */
padding: 0.75rem 0.875rem; /* 12px 14px */
margin: 0;
border-radius: 0.625rem; /* 10px */
border: 1px solid var(--color-border);
background: var(--color-surface);
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
align-items: stretch;
transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.3s ease;
container-type: inline-size;
min-width: 0;
/* Progress bar support */
position: relative;
overflow: visible; /* Allow dropdowns to overflow */
z-index: 1; /* Create base stacking context for rows */
}
/* Progress background (rows & large views) - FULL HEIGHT */
.download-row::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0; /* Fills 100% height of the row */
height: 100%; /* Explicitly set full height */
width: var(--progress-percent, 0%);
border-radius: 0.625rem; /* Соответствует карточке */
background: linear-gradient(90deg,
rgba(0, 176, 88, 0.08) 0%,
rgba(0, 176, 88, 0.12) 100%
);
transition: width 0.3s ease, background 0.3s ease; /* Smooth color change for error state */
z-index: 0;
pointer-events: none;
}
/* Error state: light red background */
.download-row.has-error::before {
background: linear-gradient(90deg,
rgba(255, 68, 68, 0.08) 0%,
rgba(255, 68, 68, 0.12) 100%
);
}
.download-row.is-delivered::before {
background: transparent;
}
/* Ensure content is above progress background */
.download-row > * {
position: relative;
z-index: 1;
}
/* Ready state: mint green background */
.download-row.is-ready-to-deliver {
background: #E9FFF4;
border-color: #c8eed8;
}
.download-row.is-delivered {
background: #f2f2f2;
border-color: #d8d8d8;
}
/* Hover effect for export rows */
.download-row:hover {
box-shadow: 3px 5px 5px rgb(236, 236, 236);
border-color: #aaaaaa;
}
.download-row.is-ready-to-deliver:hover {
border-color: #9ad9bc;
}
.download-row.is-delivered:hover {
border-color: #bdbdbd;
}
/* When dropdown is open inside a row, elevate the entire row above others */
.download-row:has(.preferences-dropdown.open),
.download-row.has-open-dropdown {
z-index: 10000; /* Much higher than other rows (z-index: 1) */
}
.download-preview {
width: var(--dq-preview-size, 5.625rem); /* 90px */
height: var(--dq-preview-size, 5.625rem); /* 90px */
max-width: 100%;
flex-shrink: 0;
border-radius: 0.5rem; /* 8px */
border: var(--border);
background: #f2f2f2;
position: relative;
overflow: hidden; /* ключевое: режем всё, что вылезает */
}
/* Transparent checkerboard pattern for download-preview */
.download-preview.is-transparent {
background-image:
conic-gradient(
#ebebeb 90deg,
transparent 90deg 180deg,
#ebebeb 180deg 270deg,
transparent 270deg
);
background-size: 1rem 1rem; /* 16px 16px */
background-position: 0 0, 0.5rem 0.5rem; /* 8px 8px */
background-color: var(--color-surface);
}
.download-preview-img {
width: 100%;
height: 100%;
object-fit: cover; /* или contain, если хочешь “вписывать” как в очереди */
display: block;
}
/* Контент справа от превью */
.download-content {
display: flex;
flex-direction: column;
min-width: 0;
gap: 0.375rem; /* 6px */
}
/* Верхняя строка: статус + полоска снизу */
.download-top-row {
display: flex;
align-items: center;
padding-bottom: 0.375rem; /* 6px */
border-bottom: 1px solid rgba(0,0,0,0.1);
}
/* Нижняя часть: мета + кнопки */
.download-bottom-row {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.375rem; /* 6px */
}
.download-meta {
font-size: 0.8125rem; /* 13px */
line-height: 1.45;
position: relative;
z-index: 10;
}
.download-label{ color:#777; display:inline-block; width:95px; }
.download-status{ color:#888; font-weight:600; }
.download-status.is-done{ color:#1aa36a; }
.download-status.is-delivered{ color:#6b7280; }
.download-status.is-error{ color:#e53e3e; }
.download-actions {
margin-top: auto;
align-self: flex-end;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.375rem; /* 6px */
min-width: 0;
}
.download-meta-row{
display:flex;
align-items:center;
gap:0.5rem; /* 8px */
min-width: 0;
}
.download-meta{
display: flex;
align-items: center;
gap: 0.5rem; /* 8px */
flex-wrap: wrap;
min-width: 0;
}
/* РРєРѕРЅРєР° перед лейблом РІ дропдауне */
.meta-icon {
flex-shrink: 0;
display: inline-block;
width: 0.8125rem; /* 13px */
height: 0.8125rem; /* 13px */
color: #888;
background: currentColor;
}
.meta-icon--size {
-webkit-mask: url("static/icons/icon-size.svg") center / contain no-repeat;
mask: url("static/icons/icon-size.svg") center / contain no-repeat;
}
.meta-icon--file {
-webkit-mask: url("static/icons/icon-file.svg") center / contain no-repeat;
mask: url("static/icons/icon-file.svg") center / contain no-repeat;
}
/* Стрелки в дропдаунах download-meta - без заливки */
.download-meta .btn svg {
fill: none;
}
/* В download-строке .preferences-dropdown не должен пытаться "занять высоту 100%" */
.download-meta .preferences-dropdown{
height:auto;
position: relative; /* Create stacking context for the menu */
z-index: 20; /* Higher than .download-meta (z-index: 10) to allow menu overflow */
}
/* When dropdown is open, boost its z-index above other dropdowns */
.download-meta .preferences-dropdown.open{
z-index: 9999; /* CRITICAL: Must be higher than next .download-row to prevent overlap */
}
/* Меню можно сделать компактнее именно в download */
.download-meta .preferences-menu{
min-width: 7.5rem; /* 120px */
z-index: 10000; /* Very high to ensure it's always on top */
}
/* =========================================================
Download Row Status & Ready Actions
========================================================= */
/* Action buttons are driven by row delivery state */
.download-action-btn {
display: none;
align-items: center;
justify-content: center;
gap: 0.25rem; /* 4px */
min-height: 1.375rem; /* 22px */
padding: 0.25rem 0.625rem; /* 4px 10px */
border: 0.5px solid #454545;
border-radius: 0.375rem; /* 6px */
background: transparent;
color: #454545;
cursor: pointer;
font: 600 0.6875rem/0.8125rem 'Inter', sans-serif; /* 11px/13px */
letter-spacing: -0.02em;
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.download-action-btn svg {
width: 0.875rem; /* 14px */
height: 0.875rem; /* 14px */
}
.download-action-btn--export {
background: var(--color-surface);
color: #454545;
border-color: #454545;
}
.download-action-btn--export:hover {
background: #f5f5f5;
}
.download-action-btn--ready {
background: var(--color-surface);
color: #454545;
border-color: #454545;
}
.download-action-btn--ready:hover {
background: #f5f5f5;
}
.download-row:not(.is-ready-to-deliver) .download-action-btn[data-action="export"] {
display: inline-flex;
}
.download-row.is-ready-to-deliver .download-action-btn--ready:not(.download-action-btn--icon) {
display: inline-flex;
}
.download-action-btn--icon {
width: 2rem; /* 32px */
min-width: 2rem; /* 32px */
padding: 0;
}
.download-action-btn.is-busy {
pointer-events: none;
opacity: 0.7;
}
.download-action-btn.is-busy:not(.download-action-btn--icon)::before,
.download-action-btn--icon.is-busy::after {
content: '';
display: inline-block;
width: 0.75rem; /* 12px */
height: 0.75rem; /* 12px */
border: 1.5px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: drompl-ready-spin 0.75s linear infinite;
}
.download-action-btn--icon.is-busy svg {
display: none;
}
@keyframes drompl-ready-spin {
to {
transform: rotate(360deg);
}
}
/* =========================================================
Format Badge on preview thumbnail
========================================================= */
.download-format-badge {
position: absolute;
top: 0.625rem; /* 10px */
right: 0.625rem; /* 10px */
padding: 0.1875rem 0.3125rem; /* 3px 5px */
border-radius: 0.375rem; /* 6px */
font: 500 0.6875rem/0.8125rem 'Inter', sans-serif; /* 11px/13px */
letter-spacing: -0.02em;
color: #F9F9F9;
pointer-events: none;
z-index: 3;
}
.download-format-badge.badge-png { background: #2B2B2B; }
.download-format-badge.badge-jpg { background: #D01876; }
.download-format-badge.badge-webp { background: #2B54BB; }
.download-format-badge.badge-avif { background: #7B3BB2; }
.download-format-badge.badge-tiff { background: #28C865; }
.download-format-badge.badge-psd { background: #28C865; }
/* =========================================================
Shadow separate buttons — hidden by default, shown only in separate mode
========================================================= */
/* Hide separate buttons in non-separate mode (higher specificity overrides --ready rule) */
.download-row:not([data-export-shadow="separate"]) .download-action-btn--download-object,
.download-row:not([data-export-shadow="separate"]) .download-action-btn--download-shadow,
.download-row:not([data-export-shadow="separate"]) .download-action-btn--copy-object,
.download-row:not([data-export-shadow="separate"]) .download-action-btn--copy-shadow { display: none !important; }
/* In separate mode: hide generic download/copy, show object/shadow ones */
.download-row[data-export-shadow="separate"] .download-action-btn--download,
.download-row[data-export-shadow="separate"] .download-action-btn--copy { display: none !important; }
.download-row[data-export-shadow="separate"].is-ready-to-deliver .download-action-btn--download-object,
.download-row[data-export-shadow="separate"].is-ready-to-deliver .download-action-btn--download-shadow,
.download-row[data-export-shadow="separate"].is-ready-to-deliver .download-action-btn--copy-object,
.download-row[data-export-shadow="separate"].is-ready-to-deliver .download-action-btn--copy-shadow {
display: inline-flex;
}
.download-row[data-export-format="tiff"].is-ready-to-deliver .download-action-btn--download,
.download-row[data-export-format="psd"].is-ready-to-deliver .download-action-btn--download {
display: inline-flex !important;
}
.download-row[data-export-format="tiff"] .download-action-btn[data-action="copy"],
.download-row[data-export-format="tiff"] .download-action-btn--copy,
.download-row[data-export-format="tiff"] .download-action-btn--copy-object,
.download-row[data-export-format="tiff"] .download-action-btn--copy-shadow,
.download-row[data-export-format="tiff"] .download-action-btn--download-object,
.download-row[data-export-format="tiff"] .download-action-btn--download-shadow,
.download-row[data-export-format="psd"] .download-action-btn[data-action="copy"],
.download-row[data-export-format="psd"] .download-action-btn--copy,
.download-row[data-export-format="psd"] .download-action-btn--copy-object,
.download-row[data-export-format="psd"] .download-action-btn--copy-shadow,
.download-row[data-export-format="psd"] .download-action-btn--download-object,
.download-row[data-export-format="psd"] .download-action-btn--download-shadow,
.download-row[data-export-format="psd"].is-ready-to-deliver .download-action-btn--copy-object,
.download-row[data-export-format="psd"].is-ready-to-deliver .download-action-btn--copy-shadow,
.download-row[data-export-format="psd"].is-ready-to-deliver .download-action-btn--download-object,
.download-row[data-export-format="psd"].is-ready-to-deliver .download-action-btn--download-shadow {
display: none !important;
}
/* =========================================================
Cached download button (download at old resolution)
========================================================= */
.download-action-btn--download-cached { display: none; }
/* Resolution changed: show Export + cached download, hide normal ready buttons */
.download-row.is-resolution-changed .download-action-btn--download,
.download-row.is-resolution-changed .download-action-btn--icon,
.download-row.is-resolution-changed .download-action-btn--copy { display: none !important; }
.download-row.is-resolution-changed .download-action-btn[data-action="export"] { display: inline-flex !important; }
.download-row.is-resolution-changed .download-action-btn--download-cached { display: inline-flex; }
/* =========================================================
Адаптивный лейаут карточки: при узкой карточке — вертикально
========================================================= */
@container (max-width: 20rem) { /* 320px logical */
/* Вертикальный режим: одна колонка */
.download-row {
grid-template-columns: 1fr;
}
.download-previews {
width: 100%;
min-width: 0;
}
.download-preview {
width: min(100%, var(--dq-preview-size, 5.625rem)) !important; /* 90px */
max-width: 100%;
height: auto !important;
aspect-ratio: 1 / 1;
}
}
/* =========================================================
Layout v3: base grid for >=1300px + palette row fix
(v2 grid lived only inside @media, causing stacking)
========================================================= */
/* Base grid (normal desktop) */
.global-container {
display: grid;
height: 100dvh;
grid-template-columns:
var(--sidebar-width)
minmax(var(--import-zone-min), var(--import-zone-width, var(--import-zone-target)))
minmax(var(--templates-zone-min), 1fr)
minmax(var(--export-zone-min), var(--export-zone-width, 24.375rem)); /* 390px logical */
grid-template-rows: 4.0625rem 3.125rem 3.125rem var(--spread-action-row-track) minmax(0, 1fr) clamp(13.75rem, 32vh, 25rem);
grid-template-areas:
"sidebar top-bar top-bar top-bar "
"sidebar gallery-top-menu color-picker-controls export-tabs-zone"
"sidebar preferences-bar templates-gallery-container export-tabs-zone"
"sidebar spread-action-row templates-gallery-container export-tabs-zone"
"sidebar gallery-zone templates-gallery-container export-tabs-zone"
"sidebar gallery-zone templates-gallery-container export-tabs-zone";
gap: 0px;
overflow: hidden;
transition: grid-template-columns 0.3s ease-in-out;
}
/* The spread-action-row track is permanent (always the row height — see :root).
.has-spread-selection no longer governs the row's existence, only the left buttons. */
/* Spread assembly action row — dense second row under the gallery controls.
All sizing via rem tokens so it scales with --ui-scale. min-width:0 + nowrap
scroll keeps it from ever widening the import column. */
.spread-action-row {
grid-area: spread-action-row;
min-width: 0;
display: flex; /* PERMANENT — always visible; left span fills dynamically, History stays right */
align-items: center;
gap: var(--space-6);
height: var(--spread-action-row-height);
padding: 0 var(--space-8);
box-sizing: border-box;
background-color: var(--bg-project);
border-bottom: var(--border);
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
/* Left side: dynamic spread buttons (rebuilt by syncSpreadActionRow). Must NOT
shrink below its content — flex-shrink:0 forces the row to genuinely overflow
(so overflow-x:auto scrolls and scrollWidth>clientWidth is detectable) instead
of silently compressing this span until its buttons overlap the right group. */
.spread-action-row__left {
display: inline-flex;
align-items: center;
gap: var(--space-4);
flex: 0 0 auto;
}
/* Right side: select-all, PDF numbers, collapse-all, create group, zoom - static, always on the right. */
.spread-action-row__right {
display: inline-flex;
align-items: center;
gap: var(--space-4);
margin-left: auto;
flex: 0 0 auto;
}
.spread-action-row__count {
font-size: var(--font-size-sm);
color: var(--color-text-muted, var(--text-primary));
flex: 0 0 auto;
}
.spread-action-row__actions {
display: inline-flex;
align-items: center;
gap: var(--space-4);
flex: 0 0 auto;
}
.spread-action-btn {
flex: 0 0 auto;
font-size: var(--font-size-sm);
line-height: 1;
padding: var(--space-3) var(--space-6);
border: var(--border);
border-radius: var(--radius-control);
background: var(--color-surface, #fff);
color: var(--text-primary);
cursor: pointer;
white-space: nowrap;
}
.spread-action-btn:hover { background: var(--color-surface-subtle, #f3f4f6); }
.spread-action-btn--primary {
background: var(--color-success);
border-color: var(--color-success);
color: #fff;
}
.spread-action-btn--primary:hover { filter: brightness(0.95); background: var(--color-success); }
/* Convert-to-spread: icon before text; collapses to a square icon-only button
(ResizeObserver-driven, see checkSpreadActionRowCollapse in dropzone.js) when the row overflows. */
.spread-action-btn--combine {
display: inline-flex;
align-items: center;
gap: var(--space-3);
}
.spread-action-btn--combine .icon-size {
width: 1.25rem; /* 20px */
height: 1.25rem; /* 20px */
color: inherit;
}
.spread-action-btn--combine.btn-icon-only-auto {
padding: 0;
width: 1.625rem; /* 26px */
height: 1.625rem; /* 26px */
min-width: 1.625rem; /* 26px */
max-width: 1.625rem; /* 26px */
justify-content: center;
flex-shrink: 0;
}
.spread-action-btn--combine.btn-icon-only-auto .icon-size {
width: 1.375rem; /* 22px */
height: 1.375rem; /* 22px */
}
/* Ensure the left column blocks don’t create phantom whitespace */
.gallery-top-menu,
.gallery-zone,
.export-tabs-zone,
.preferences-bar {
margin: 0;
}
.gallery-top-menu {
grid-area: gallery-top-menu;
flex-shrink: 0;
background-color: var(--bg-project);
border-bottom: var(--border);
display: flex;
align-items: center;
padding: 0 var(--space-8);
gap: var(--space-5);
height: 3.125rem; /* 50px, scales with --ui-scale */
box-sizing: border-box;
container-type: inline-size;
container-name: import-toolbar;
}
.gallery-zone {
grid-area: gallery-zone;
overflow-y: auto; /* constant scrollbar gutter — see scrollbar block above */
min-height: 0;
position: relative;
}
.templates-gallery-container {
grid-area: templates-gallery-container;
min-width: var(--templates-zone-min); /* scales with --ui-scale; matches grid floor */
min-height: 0;
overflow: hidden;
background-color: var(--color-surface);
container-type: inline-size;
container-name: templates-zone;
}
.color-picker-controls-panel {
grid-area: color-picker-controls;
min-width: 0;
}
/* --- Palette must be one horizontal row and never fly out of the screen --- */
.color-picker-controls-panel{
display:flex;
align-items:center;
gap:0px;
justify-content:flex-start; /* Start from left, don't force space-between */
}
.color-settings-unified {
margin-left: auto;
margin-right: 1.25rem; /* 20px */
color: var(--text-secondary);
flex-shrink: 0;
}
.color-settings-unified:hover {
color: var(--text-main);
}
.color-settings-unified__icon {
display: block;
width: 1rem; /* 16px */
height: 1rem; /* 16px */
background: currentColor;
-webkit-mask: url("static/icons/icon-settings.svg") center / contain no-repeat;
mask: url("static/icons/icon-settings.svg") center / contain no-repeat;
}
/* .color-picker-controls - УДАЛЕНО, используется определение выше (строка ~1877) */
.palette-row{
display: flex;
gap: 0.5rem; /* 8px */
flex-wrap: nowrap;
flex-shrink: 1; /* Allow shrinking */
min-width: 2rem; /* Space for at least 1 swatch */
max-width: fit-content; /* Don't grow beyond content */
}
.spine-swatches {
display: flex;
gap: 0.5rem; /* 8px */
flex-wrap: nowrap;
flex-shrink: 1; /* Allow shrinking */
min-width: 2rem; /* Space for at least 1 swatch */
max-width: fit-content; /* Don't grow beyond content */
}
/* Avoid the right panel pushing outside the viewport - SCROLLBAR RULE MOVED TO LINE ~2654 */
/* Группируем заголовок и кнопку превью, чтобы они стояли слева вместе */
.templates-title-group {
display: flex;
align-items: center;
/* NO flex-wrap: btn_collapse.js collapses these buttons to icon-only only when this row
OVERFLOWS (scrollWidth > clientWidth). Wrapping would hide that overflow and break the collapse. */
gap: var(--space-3); /* tighter so toggles fit on a narrow templates header */
}
/* Стиль разделителя */
.palette-separator {
width: 1px;
height: 1.25rem; /* 20px */
background-color: var(--border-color); /* Рли #D8D8D8 */
display: block;
}
/* Стиль кнопки-тоггла */
.icon-toggle-btn {
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
color: var(--text-secondary); /* Серый по умолчанию */
padding: 0.3125rem 0.5rem 0.3125rem 0.5rem; /* 5px 8px 5px 8px */
border-radius: var(--radius);
height: 1.6875rem; /* 27px */
box-sizing: border-box;
transition: all 0.2s ease-in-out;
font-size: 0.8125rem; /* Явно задаем размер шрифта, чтобы избежать вычисленных 13.3333px */
font-family: 'Inter', sans-serif;
flex-shrink: 0;
white-space: nowrap;
}
.icon-toggle-btn:hover {
color: var(--text-main);
background-color: var(--bg-grey);
}
.icon-toggle-btn:active {
color: var(--text-main);
background-color: var(--color-surface-active);
transition-duration: 0.08s;
}
/* РЎРћРЎРўРћРЇРќРР• ВКЛЮЧЕНО (ACTIVE) */
.icon-toggle-btn.is-active {
color: var(--green); /* Зеленый цвет при включении */
background-color: rgba(0, 176, 88, 0.1); /* Легкий зеленый фон */
}
/* Auto-process toggle active state */
.icon-toggle-btn.is-active:hover,
#auto-process-toggle.is-active:hover {
color: var(--color-brand-hover);
background-color: rgba(0, 176, 88, 0.16);
}
.icon-toggle-btn.is-active:active,
#auto-process-toggle.is-active:active {
color: var(--color-brand-active);
background-color: rgba(0, 176, 88, 0.24);
transition-duration: 0.08s;
}
#auto-process-toggle.is-active {
color: var(--green);
background-color: rgba(0, 176, 88, 0.1);
}
/* --- СЕГМЕНТРРОВАННЫЙ ТОГГЛ (Точный размер icon-toggle-btn) --- */
.segmented-toggle {
display: inline-flex;
vertical-align: middle;
border-radius: var(--radius);
overflow: hidden; /* Чтобы крайние кнопки скруглялись по родителю */
gap: 0;
}
.segmented-toggle .toggle-item {
/* Полное копирование параметров .icon-toggle-btn */
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
font-family: 'Inter', sans-serif;
font-size: 0.8125rem; /* Подберите под ваш проект */
padding: 0.3125rem 0.5rem; /* Те же отступы, что и у оригинала */
transition: all 0.2s ease-in-out;
gap: 0.375rem; /* 6px */
flex-shrink: 0;
white-space: nowrap;
/* Стиль "выключенной" половины */
color: var(--text-secondary);
background-color: var(--bg-grey); /* Серый фон как у hover оригинала */
}
/* РЎРћРЎРўРћРЇРќРР• ВКЛЮЧЕНО (ACTIVE) */
.segmented-toggle .toggle-item.is-active {
color: var(--green);
/* Чистый зеленый фон без подложки */
background-color: rgba(0, 176, 88, 0.1);
}
/* Ховер для неактивной части — только на устройствах с реальным наведением */
@media (hover: hover) {
.segmented-toggle .toggle-item.is-active:hover {
color: var(--color-brand-hover);
background-color: rgba(0, 176, 88, 0.16);
}
.segmented-toggle .toggle-item:not(.is-active):hover {
color: var(--text-main);
background-color: var(--border-color); /* Чуть темнее при наведении */
}
}
/* Настройка иконок внутри */
.segmented-toggle .toggle-item:active {
color: var(--text-main);
background-color: var(--color-surface-active);
transition-duration: 0.08s;
}
.segmented-toggle .toggle-item.is-active:active {
color: var(--color-brand-active);
background-color: rgba(0, 176, 88, 0.24);
}
.segmented-toggle .toggle-item svg {
width: 1rem; /* 16px */
height: 1rem; /* 16px */
flex-shrink: 0;
fill: currentColor;
}
/* Bigger touch targets on phones / touch devices (desktop unchanged) */
@media (max-width: 640px), (pointer: coarse) {
.segmented-toggle .toggle-item {
min-height: 2.75rem; /* 44px */
padding: 0.5rem 0.75rem; /* 8px 12px */
}
.shadow-dir-picker.segmented-toggle .toggle-item,
.shadow-intensity-toggle.segmented-toggle .toggle-item {
min-height: 2.75rem; /* 44px */
padding: 0.5rem 0.625rem; /* 8px 10px */
}
}
/* Shadow direction picker — icon-only buttons */
.shadow-dir-picker.segmented-toggle .toggle-item {
padding: 0.3125rem 0.375rem; /* 5px 6px */
}
.shadow-dir-picker.segmented-toggle .toggle-item svg {
width: 1.125rem; /* 18px */
height: 1.125rem; /* 18px */
}
/* === Adaptive Button Text Hiding (ResizeObserver-driven) === */
/* Скрываем текст кнопки, когда JS определил перенос строки */
.btn-icon-only-auto span,
.btn-icon-only-auto [data-i18n] {
display: none;
}
/* ============================================
Tile Size Control (Slider)
============================================ */
.tile-size-control {
display: flex;
align-items: center;
gap: 0.4375rem; /* 7px */
color: var(--color-ink, #3B3B3B);
}
.tile-size-control::before,
.tile-size-control::after {
width: 0.5625rem; /* 9px */
color: var(--color-ink, #3B3B3B);
font-size: 0.8125rem; /* 13px */
font-weight: 600;
line-height: 1;
text-align: center;
}
.tile-size-control::before {
content: "-";
}
.tile-size-control::after {
content: "+";
}
.icon-size {
width: 1rem; /* 16px */
height: 1rem; /* 16px */
color: var(--text-secondary, #888);
flex-shrink: 0;
}
.tile-size-slider {
-webkit-appearance: none;
appearance: none;
width: 6.25rem; /* 100px */
height: 1px;
background: var(--color-ink, #3B3B3B);
border-radius: 0.125rem; /* 2px */
outline: none;
cursor: pointer;
}
.tile-size-slider::-moz-range-track {
height: 0.125rem; /* 2px */
background: var(--color-ink, #3B3B3B);
border: 0;
border-radius: 0.125rem; /* 2px */
}
/* Slider thumb (the draggable circle) */
.tile-size-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 0.875rem; /* 14px */
height: 0.875rem; /* 14px */
border-radius: 50%;
background: var(--green);
cursor: grab;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tile-size-slider::-webkit-slider-thumb:hover {
transform: scale(1.15);
box-shadow: 0 0 0 4px rgba(74, 158, 255, 0.2);
}
.tile-size-slider::-webkit-slider-thumb:active {
cursor: grabbing;
transform: scale(1.0);
}
/* Firefox */
.tile-size-slider::-moz-range-thumb {
width: 0.875rem; /* 14px */
height: 0.875rem; /* 14px */
border: none;
border-radius: 50%;
background: var(--accent-color, #4a9eff);
cursor: grab;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tile-size-slider::-moz-range-thumb:hover {
transform: scale(1.15);
box-shadow: 0 0 0 4px rgba(74, 158, 255, 0.2);
}
.tile-size-slider::-moz-range-thumb:active {
cursor: grabbing;
transform: scale(1.0);
}
/* Container query responsiveness: hide slider on small screens */
@container templates-zone (max-width: 35rem) { /* 560px logical */
.tile-size-control {
display: none;
}
}
/* True color toggle (switch) */
.truecolor-toggle{
display: inline-flex;
align-items: center;
gap: 0.5rem; /* 8px */
cursor: pointer;
user-select: none;
padding: 0.125rem 0.375rem; /* 2px 6px */
border-radius: 999px;
}
.truecolor-toggle:focus{
outline: 2px solid rgba(0, 176, 88, 0.25);
outline-offset: 2px;
}
.truecolor-switch{
width: 2.25rem; /* 36px */
height: 1.25rem; /* 20px */
border-radius: 999px;
background: #d6d6d6;
position: relative;
transition: background-color 0.15s ease;
flex: 0 0 auto;
}
.truecolor-knob{
width: 1rem; /* 16px */
height: 1rem; /* 16px */
border-radius: 999px;
background: var(--color-surface);
position: absolute;
left: 0.125rem; /* 2px */
top: 0.125rem; /* 2px */
transition: transform 0.15s ease;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.truecolor-label{
font-size: 1rem;
font-weight: 500;
color: var(--text-secondary);
white-space: nowrap;
}
.truecolor-toggle.is-active .truecolor-switch{
background: var(--green);
}
.truecolor-toggle.is-active .truecolor-knob{
transform: translateX(1rem); /* 16px */
}
.truecolor-toggle.is-active .truecolor-label{
color: var(--green);
}
/* Export queue now uses download rows */
.export-queue-list-wrap{
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 0;
}
.export-queue-list-wrap.is-drop-receiver{
outline: 2px solid #3B3B3B;
outline-offset: 2px;
}
.template-item--draggable{
cursor: grab;
}
.template-item--draggable:active{
cursor: grabbing;
}
/* Download row selection */
.download-row.is-selected {
outline: 1px solid var(--color-brand-active);
outline-offset: -1px;
}
/* Download list marquee selection */
.download-marquee {
position: absolute;
border: 1px dashed rgba(0,0,0,0.35);
background: rgba(0,0,0,0.06);
pointer-events: none;
z-index: 5;
}
.download-select-check{
position: absolute;
z-index: 3;
right: 0.375rem; /* 6px */
bottom: 0.375rem; /* 6px */
width: 1rem; /* 16px */
height: 1rem; /* 16px */
border-radius: 0.25rem; /* 4px */
border: 1px solid rgba(0,0,0,0.25);
background: rgba(255,255,255,0.85);
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.download-row.is-selected .download-select-check{
background: #3B3B3B;
}
.download-row.is-selected .download-select-check::after{
content: '';
width: 0.5rem; /* 8px */
height: 0.25rem; /* 4px */
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg);
margin-top: -1px;
}
/* Hide selection checkboxes in download list (not needed in export queue) */
#download-list .download-select-check {
display: none;
}
/* Quick download button for compact view mode */
.download-preview-quick-btn {
position: absolute;
z-index: 4;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 2rem; /* 32px */
height: 2rem; /* 32px */
border-radius: var(--radius);
background-color: var(--green);
border: 0;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
transition: background-color 0.2s ease-in-out;
pointer-events: auto;
}
.download-preview-quick-btn svg {
width: 1rem; /* 16px */
height: 1rem; /* 16px */
stroke: var(--color-on-brand);
flex-shrink: 0;
}
.download-preview-quick-btn:hover {
background-color: var(--color-brand-hover);
}
/* Show download button on hover in compact view mode */
#download-list.view-compact .download-preview:hover .download-preview-quick-btn {
display: flex;
}
/* Internal drag cursor: keep a "grabbing" hand everywhere while dragging tiles */
body.is-internal-dragging,
body.is-internal-dragging * {
cursor: grabbing !important;
}
/* Internal drag: show no-drop only when JS marks an explicit forbidden zone */
.gallery-zone.is-no-drop-hover,
.gallery-zone.is-no-drop-hover * {
cursor: no-drop !important;
}
body.is-internal-dragging {
user-select: none;
}
/* Visual drag proxy (mouse-based dragging) */
.mokup-drag-proxy {
opacity: 0.70;
filter: saturate(0.95);
box-shadow: 0 12px 35px rgba(0,0,0,0.25);
border-radius: var(--radius);
overflow: hidden;
}
/* Ghost placeholder row while dragging a template.
- Appears immediately on dragstart (inactive)
- Turns green (active) when hovering the export queue */
.download-row.download-row--ghost{
pointer-events: none;
opacity: 0.95;
background: rgba(0, 0, 0, 0.02);
border-bottom: 1px solid transparent;
outline: 2px dashed rgba(0, 0, 0, 0.22);
outline-offset: -6px;
}
.download-row.download-row--ghost.is-active{
background: rgba(0, 176, 88, 0.06);
outline-color: var(--green);
}
.download-preview.download-preview--ghost{
background: transparent;
border: 1px dashed rgba(0, 0, 0, 0.22);
}
.download-row.download-row--ghost.is-active .download-preview.download-preview--ghost{
border-color: rgba(0, 176, 88, 0.55);
}
.download-meta.download-meta--ghost{
color: #2b2b2b;
font-size: 0.8125rem; /* 13px */
}
.download-ghost-title{
color: rgba(0, 0, 0, 0.6);
font-weight: 600;
}
.download-row.download-row--ghost.is-active .download-ghost-title{
color: var(--green);
}
/* ========== SPINE TEXTURE MENU ========== */
/* Контейнер меню (появляется при hover) */
.spine-texture-menu {
position: absolute;
bottom: 0.5rem; /* 8px */
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.25rem; /* 4px */
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease, visibility 0.15s ease;
z-index: 10;
}
/* Показываем меню при hover на tile */
.gallery-spread-tile.is-cover:hover .spine-texture-menu {
opacity: 1;
visibility: visible;
}
/* Кнопки меню */
.spine-texture-add-btn,
.spine-texture-remove-btn {
display: inline-flex;
align-items: center;
gap: 0.25rem; /* 4px */
padding: 0.375rem 0.625rem; /* 6px 10px */
border: none;
border-radius: 0.375rem; /* 6px */
background: rgba(0, 0, 0, 0.75);
color: #fff;
font-size: 0.6875rem; /* 11px */
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease;
white-space: nowrap;
}
.spine-texture-add-btn:hover {
background: rgba(0, 0, 0, 0.9);
}
.spine-texture-remove-btn {
background: rgba(220, 38, 38, 0.85);
}
.spine-texture-remove-btn:hover {
background: rgba(220, 38, 38, 1);
}
.spine-texture-add-btn svg,
.spine-texture-remove-btn svg {
width: 0.75rem; /* 12px */
height: 0.75rem; /* 12px */
}
/* ========== SPINE TEXTURE INDICATOR ========== */
/* Рндикатор наличия текстуры корешка (27x27, как РєРЅРѕРїРєР° замка РЅР° шаблоне) */
.gallery-spine-indicator {
position: absolute;
top: 0.375rem; /* 6px */
right: 0.375rem; /* 6px */
width: 1.6875rem; /* 27px */
height: 1.6875rem; /* 27px */
border-radius: var(--radius);
border: 1px solid #7C3AED;
background: linear-gradient(135deg, #7C3AED 0%, #2F6BFF 100%);
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
pointer-events: none;
}
.gallery-spine-indicator::before {
content: "";
width: 1rem; /* 16px */
height: 1rem; /* 16px */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5'%3E%3Crect x='3' y='2' width='18' height='20' rx='2'/%3E%3Cpath d='M7 2v20'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
.template-spinner {
width: 1.75rem; /* 28px */
height: 1.75rem; /* 28px */
border-radius: 50%;
border: 3px solid #fff;
border-color: #fff transparent #fff transparent;
animation: dropzone-spin 1.0s linear infinite;
display: inline-block;
}
/* --- Export queue view modes (tabs header) --- */
.tabs-header { align-items: center; }
.tabs-header .btn-group { margin-left: auto; }
.tabs-header .zone-label-text { margin-left: 4px; }
.tabs-view-modes {
display: inline-flex;
gap: 0.375rem; /* 6px */
align-items: center;
margin-left: 0.375rem; /* 6px */
}
.icons-square-button.is-active {
outline: 2px solid rgba(0,0,0,0.15);
outline-offset: 1px;
}
/* --- Download list view modes --- */
.download-previews { display: block; min-width: 0; }
/* secondary (shadow) preview exists in DOM but hidden by default */
.download-preview-secondary {
display: none;
width: 5rem; /* 80px */
height: 5rem; /* 80px */
border-radius: 0.375rem; /* 6px */
border: var(--border);
background: #f2f2f2;
position: relative;
overflow: hidden;
}
/* Transparent checkerboard pattern for download-preview-secondary */
.download-preview-secondary.is-transparent {
background-image:
conic-gradient(
#ebebeb 90deg,
transparent 90deg 180deg,
#ebebeb 180deg 270deg,
transparent 270deg
);
background-size: 1rem 1rem; /* 16px 16px */
background-position: 0 0, 0.5rem 0.5rem; /* 8px 8px */
background-color: var(--color-surface);
}
.download-preview-secondary img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
/* === COMPACT: grid of 80x80 tiles === */
#download-list.view-compact{
display: grid;
grid-template-columns: repeat(auto-fill, 5rem); /* 80px */
gap: 1.25rem; /* Increased from 10px to accommodate progress bar */
padding: 1.25rem; /* 20px */
align-content: start;
}
#download-list.view-compact .download-row{
--dq-preview-size: 5rem; /* 80px */
width: 5rem; /* 80px */
padding: 0;
border: 0;
background: transparent;
grid-template-columns: 5rem; /* keep existing row grid, but 1 column */
position: relative; /* needed for ::after progress bar positioning */
}
#download-list.view-compact .download-meta,
#download-list.view-compact .download-actions,
#download-list.view-compact .download-content{
display: none;
}
#download-list.view-compact .download-row--ghost,
#download-list.view-compact .download-empty{
grid-column: 1 / -1;
}
/* Hide background progress in compact view (use thin bar instead) */
#download-list.view-compact .download-row::before {
display: none;
}
/* Add thin progress bar below preview */
#download-list.view-compact .download-row::after {
content: '';
position: absolute;
bottom: -0.375rem; /* Position below the 80px preview */
left: 0;
height: 0.25rem; /* 4px */
width: var(--progress-percent, 0%);
background: var(--green);
border-radius: 0.125rem; /* 2px */
transition: width 0.3s ease, background 0.3s ease;
z-index: 1;
}
/* Compact view error state */
#download-list.view-compact .download-row.has-error::after {
background: rgba(255, 68, 68, 0.8); /* More visible red for thin bar */
}
/* Selection in compact mode: apply outline to preview instead of row */
#download-list.view-compact .download-row.is-selected {
outline: none;
}
#download-list.view-compact .download-row.is-selected .download-preview {
outline: 1px solid var(--color-brand-active);
outline-offset: -1px;
z-index: 2;
}
/* view-large removed — preview size now controlled by +/- buttons via --dq-preview-size */
/* ===================================================================
EXPORT ZONE RESIZE & RESPONSIVE BEHAVIOR
=================================================================== */
/* === Resize Handle === */
.export-resize-handle {
position: absolute;
left: 1px; /* Сдвиг вправо, чтобы не перекрывать border-left */
top: 0;
bottom: 0;
width: 0.5rem; /* 8px */
cursor: col-resize;
z-index: 20;
opacity: 0;
transition: opacity 0.2s ease;
background: linear-gradient(to right,
transparent 0%, transparent 3px,
rgba(0, 0, 0, 0.08) 3px, rgba(0, 0, 0, 0.08) 5px,
transparent 5px);
}
.export-resize-handle:hover,
.export-resize-handle.is-active {
opacity: 1;
background: linear-gradient(to right,
transparent 0%, transparent 2px,
rgba(0, 176, 88, 0.25) 2px, rgba(0, 176, 88, 0.25) 6px,
transparent 6px);
}
.export-tabs-zone:hover .export-resize-handle {
opacity: 0.6;
}
body.is-resizing-export {
cursor: col-resize !important;
user-select: none !important;
}
/* === Import column resize handle (mirrors export, but on the RIGHT edge of import) ===
Child of .global-container, positioned over the import column's full height. */
.import-resize-handle {
grid-column: 2;
grid-row: 2 / -1;
justify-self: end;
align-self: stretch;
width: 0.5rem; /* 8px */
margin-right: -0.25rem; /* straddle the column boundary so it's easy to grab */
cursor: col-resize;
z-index: 30;
opacity: 0;
transition: opacity 0.2s ease;
background: linear-gradient(to left,
transparent 0%, transparent 3px,
rgba(0, 0, 0, 0.08) 3px, rgba(0, 0, 0, 0.08) 5px,
transparent 5px);
}
.import-resize-handle:hover,
.import-resize-handle.is-active {
opacity: 1;
background: linear-gradient(to left,
transparent 0%, transparent 2px,
rgba(0, 176, 88, 0.25) 2px, rgba(0, 176, 88, 0.25) 6px,
transparent 6px);
}
body.is-resizing-import {
cursor: col-resize !important;
user-select: none !important;
}
/* === Hamburger Menu === */
.export-hamburger-btn {
display: none;
width: 2rem; /* 32px */
height: 2rem; /* 32px */
padding: 0;
border: 1px solid var(--border-color);
border-radius: 0.375rem; /* 6px */
background: var(--bg-main);
cursor: pointer;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-left: auto;
transition: background 0.2s ease;
}
.export-hamburger-btn:hover {
background: var(--bg-grey-light);
}
.export-hamburger-btn.is-active {
background: var(--bg-grey);
border-color: var(--green);
}
.export-hamburger-icon {
display: flex;
flex-direction: column;
gap: 0.1875rem; /* 3px */
width: 0.875rem; /* 14px */
}
.export-hamburger-icon span {
display: block;
width: 100%;
height: 0.125rem; /* 2px */
background: currentColor;
border-radius: 1px;
}
.export-hamburger-menu {
position: absolute;
right: 0.75rem; /* 12px */
top: calc(100% + 0.25rem); /* 4px */
min-width: 12.5rem; /* 200px */
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: 0.5rem; /* 8px */
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
padding: 0.5rem 0; /* 8px */
display: none;
z-index: 99999;
}
.export-hamburger-btn.is-active ~ .export-hamburger-menu {
display: block;
}
.export-hamburger-header {
padding: 0.75rem 0.75rem 0.5rem 0.75rem; /* 12px 12px 8px 12px */
font-size: 0.9375rem; /* 15px */
font-weight: 700;
color: var(--text-main);
border-bottom: 2px solid var(--border-color);
margin-bottom: 0.25rem; /* 4px */
}
.export-hamburger-section {
padding: 0.5rem 0; /* 8px */
border-bottom: 1px solid var(--border-color);
}
.export-hamburger-section:last-child {
border-bottom: none;
}
.export-hamburger-section-label {
padding: 0.25rem 0.75rem; /* 4px 12px */
font-size: 0.6875rem; /* 11px */
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.export-hamburger-item {
width: 100%;
padding: 0.5rem 0.75rem; /* 8px 12px */
border: none;
background: transparent;
text-align: left;
font-size: 0.875rem; /* 14px */
cursor: pointer;
color: var(--text-main);
display: flex;
align-items: center;
justify-content: space-between;
transition: background 0.15s ease;
}
.export-hamburger-item:hover {
background: var(--bg-grey-light);
}
.export-hamburger-item.is-active {
color: var(--green);
font-weight: 600;
}
.export-hamburger-item.is-active::after {
content: 'вњ“';
font-size: 1rem; /* 16px */
color: var(--green);
}
.export-hamburger-action {
color: #e74c3c;
font-weight: 600;
}
.export-hamburger-action:hover {
background: rgba(231, 76, 60, 0.1);
color: #c0392b;
}
/* === Adaptive Layout (Container Queries) === */
/* Переключить на компактный бар и скрыть переключатели видов при <380px */
@container export-zone (max-width: 23.6875rem) { /* 379px logical */
/* Скрыть основной бар (без класса compact) */
.export-controls-bar:not(.export-controls-bar-compact) {
display: none !important;
}
/* Показать компактный бар (заменяет основной) */
.export-controls-bar.export-controls-bar-compact {
display: flex !important;
}
/* Скрыть переключатели видов в tabs-header */
.tabs-view-modes {
display: none !important;
}
}
/* Скрыть кнопку "Скачать выделенные" при <280px */
@container export-zone (max-width: 17.4375rem) { /* 279px logical */
#downloadSelectedBtn {
display: none !important;
}
}
/* Уменьшить preview в compact режиме при узкой панели */
@container export-zone (max-width: 22.4375rem) { /* 359px logical */
#download-list.view-compact {
grid-template-columns: repeat(auto-fill, 4rem); /* 64px */
}
#download-list.view-compact .download-row {
width: 4rem; /* 64px */
}
#download-list.view-compact .download-preview {
width: 4rem; /* 64px */
height: 4rem; /* 64px */
}
}
/* Уменьшить large preview при средней ширине */
@container export-zone (min-width: 26.25rem) and (max-width: 30rem) { /* 420-480px logical */
#download-list.view-large .download-preview {
width: 10rem; /* 160px */
height: 10rem; /* 160px */
}
}
/* === Fallback (ResizeObserver + data-attributes) === */
.export-tabs-zone[data-width="narrow"] .export-controls-bar:not(.export-controls-bar-compact) {
display: none !important;
}
.export-tabs-zone[data-width="narrow"] .export-controls-bar.export-controls-bar-compact {
display: flex !important;
}
.export-tabs-zone[data-width="narrow"] .tabs-view-modes {
display: none !important;
}
.export-tabs-zone[data-width="extra-narrow"] #downloadSelectedBtn {
display: none !important;
}
.export-tabs-zone[data-width="narrow"] #download-list.view-compact {
grid-template-columns: repeat(auto-fill, 4rem); /* 64px */
}
.export-tabs-zone[data-width="narrow"] #download-list.view-compact .download-row {
width: 4rem; /* 64px */
}
.export-tabs-zone[data-width="narrow"] #download-list.view-compact .download-preview {
width: 4rem; /* 64px */
height: 4rem; /* 64px */
}
/* view-large removed — preview size controlled by --dq-preview-size */
/* Size filter dropdown - скрыт для non-covers модулей */
.preferences-dropdown[data-filter="size"] {
display: none;
}
/* ZIP Progress Overlay */
#zip-progress-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 10000;
}
.zip-progress-modal {
background: var(--bg-main);
padding: 1.875rem; /* 30px */
border-radius: var(--radius);
min-width: 25rem; /* 400px */
text-align: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.zip-progress-modal h3 {
margin: 0 0 1.25rem 0; /* 20px */
color: var(--text-main);
font-size: 1.125rem; /* 18px */
font-weight: 600;
}
.zip-progress-bar {
width: 100%;
height: 1.25rem; /* 20px */
background: var(--bg-grey);
border-radius: 0.625rem; /* 10px */
overflow: hidden;
margin: 1.25rem 0; /* 20px */
}
.zip-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--green), #8BC34A);
transition: width 0.3s ease;
width: 0%;
}
.zip-progress-text {
color: var(--text-secondary);
font-size: 0.875rem; /* 14px */
margin: 0.625rem 0; /* 10px */
}
/* ============================================
NOTIFICATION SYSTEM
============================================ */
/* ===== NOTIFICATION TOAST SYSTEM ===== */
/* Bell icon wrapper - positioned at far right of top bar */
.notification-bell-wrapper {
position: relative;
margin-left: 0;
}
.notification-toast-container {
position: fixed;
top: 1.25rem; /* 20px */
right: 1.25rem; /* 20px */
z-index: 10000;
display: flex;
flex-direction: column;
gap: 0.75rem; /* 12px */
pointer-events: none;
max-width: 25rem; /* 400px */
}
.notification-toast {
pointer-events: auto;
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
padding: 0.75rem 1rem; /* 12px 16px */
display: flex;
align-items: flex-start;
gap: 0.75rem; /* 12px */
min-width: 18.75rem; /* 300px */
max-width: 25rem; /* 400px */
animation: slideInRight 0.3s ease-out;
position: relative;
}
.notification-toast.is-removing {
animation: slideOutRight 0.3s ease-in;
opacity: 0;
transform: translateX(100%);
}
@keyframes slideInRight {
from { opacity: 0; transform: translateX(100%); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideOutRight {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(100%); }
}
.notification-toast-icon {
flex-shrink: 0;
width: 1.25rem; /* 20px */
height: 1.25rem; /* 20px */
}
.notification-toast-icon svg {
width: 1.25rem; /* 20px */
height: 1.25rem; /* 20px */
}
.notification-toast-content {
flex-grow: 1;
min-width: 0;
}
.notification-toast-message {
font-size: 0.875rem; /* 14px */
line-height: 1.4;
color: var(--bg-dark);
margin: 0;
word-wrap: break-word;
}
.notification-toast-close {
flex-shrink: 0;
width: 1.25rem; /* 20px */
height: 1.25rem; /* 20px */
background: none;
border: none;
cursor: pointer;
color: var(--text-secondary);
padding: 0;
border-radius: 0.25rem; /* 4px */
transition: all 0.2s ease-in-out;
}
.notification-toast-close:hover {
background: var(--bg-grey-light);
color: var(--bg-dark);
}
.notification-toast-close svg {
width: 0.875rem; /* 14px */
height: 0.875rem; /* 14px */
}
/* Toast Type Variants */
.notification-toast.toast-success { border-left: 3px solid var(--color-success); }
.notification-toast.toast-success .notification-toast-icon { color: var(--color-success); }
.notification-toast.toast-error { border-left: 3px solid var(--color-danger); }
.notification-toast.toast-error .notification-toast-icon { color: var(--color-danger); }
.notification-toast.toast-warning { border-left: 3px solid var(--color-warning); }
.notification-toast.toast-warning .notification-toast-icon { color: var(--color-warning); }
.notification-toast.toast-info { border-left: 3px solid var(--color-info); }
.notification-toast.toast-info .notification-toast-icon { color: var(--color-info); }
/* Progress bar for auto-dismiss */
.notification-toast-progress {
position: absolute;
bottom: 0;
left: 0;
height: 0.1875rem; /* 3px */
border-radius: 0 0 0.5rem 0.5rem; /* 8px 8px */
transition: width linear;
opacity: 0.5;
}
.toast-success .notification-toast-progress { background: var(--color-success); }
.toast-error .notification-toast-progress { background: var(--color-danger); }
.toast-warning .notification-toast-progress { background: var(--color-warning); }
.toast-info .notification-toast-progress { background: var(--color-info); }
/* ===== BELL ICON & HISTORY ===== */
#notification-bell-btn {
position: relative;
border: 0 !important;
box-shadow: none !important;
}
.notification-badge {
position: absolute;
top: -0.25rem; /* -4px */
right: -0.25rem; /* -4px */
background: #ef4444;
color: white;
font-size: 0.625rem; /* 10px */
font-weight: 600;
min-width: 1rem; /* 16px */
height: 1rem; /* 16px */
border-radius: 0.5rem; /* 8px */
display: flex;
align-items: center;
justify-content: center;
padding: 0 0.25rem; /* 4px */
pointer-events: none;
}
.notification-dropdown {
position: absolute;
top: calc(100% + 0.5rem); /* 8px */
right: 0;
width: 22.5rem; /* 360px */
max-height: 30rem; /* 480px */
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
display: none;
flex-direction: column;
z-index: 9999;
overflow: hidden;
}
.notification-dropdown.is-open {
display: flex;
}
.notification-dropdown-header {
padding: 0.75rem 1rem; /* 12px 16px */
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.notification-history-list {
flex-grow: 1;
overflow-y: auto;
padding: 0.5rem; /* 8px */
}
.notification-empty-state {
padding: 2.5rem 1.25rem; /* 40px 20px */
text-align: center;
color: var(--text-secondary);
font-size: 0.875rem; /* 14px */
}
.notification-history-item {
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: 0.375rem; /* 6px */
padding: 0.75rem; /* 12px */
margin-bottom: 0.5rem; /* 8px */
display: flex;
gap: 0.625rem; /* 10px */
transition: all 0.2s ease-in-out;
cursor: default;
}
.notification-history-item:last-child {
margin-bottom: 0;
}
.notification-history-item:hover {
background: var(--bg-grey-light);
}
.notification-history-item.unread {
background: #f0f9ff;
border-color: var(--color-info);
}
.notification-history-icon {
flex-shrink: 0;
width: 1.125rem; /* 18px */
height: 1.125rem; /* 18px */
}
.notification-history-icon svg {
width: 1.125rem; /* 18px */
height: 1.125rem; /* 18px */
}
.notification-history-content {
flex-grow: 1;
min-width: 0;
}
.notification-history-message {
font-size: 0.8125rem; /* 13px */
line-height: 1.4;
color: var(--bg-dark);
margin: 0 0 0.25rem 0; /* 4px */
word-wrap: break-word;
}
.notification-history-timestamp {
font-size: 0.6875rem; /* 11px */
color: var(--text-secondary);
}
/* Color coding for history items */
.notification-history-item.item-success .notification-history-icon { color: var(--color-success); }
.notification-history-item.item-error .notification-history-icon { color: var(--color-danger); }
.notification-history-item.item-warning .notification-history-icon { color: #f59e0b; }
.notification-history-item.item-info .notification-history-icon { color: var(--color-info); }
/* ===== CONFIRM DIALOG ===== */
.notification-confirm-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
z-index: 10001;
display: none;
align-items: center;
justify-content: center;
}
.notification-confirm-backdrop.is-visible {
display: flex;
animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.notification-confirm-window {
background: var(--bg-main);
border-radius: 0.75rem; /* 12px */
padding: 1.5rem; /* 24px */
width: 26.25rem; /* 420px */
max-width: 90vw;
box-shadow: var(--shadow-lg);
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem; /* 16px */
animation: scaleIn 0.2s ease-out;
}
@keyframes scaleIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
.notification-confirm-icon {
width: 3rem; /* 48px */
height: 3rem; /* 48px */
border-radius: 50%;
background: #fef3c7;
color: #f59e0b;
display: flex;
align-items: center;
justify-content: center;
}
.icon-size-lg {
width: 1.75rem; /* 28px */
height: 1.75rem; /* 28px */
}
.notification-confirm-title {
margin: 0;
font-size: 1.125rem; /* 18px */
font-weight: 600;
color: var(--bg-dark);
text-align: center;
}
.notification-confirm-message {
margin: 0;
font-size: 0.875rem; /* 14px */
line-height: 1.5;
color: var(--text-secondary);
text-align: center;
white-space: pre-line;
}
.notification-confirm-actions {
display: flex;
gap: 0.75rem; /* 12px */
width: 100%;
padding-top: 0.5rem; /* 8px */
}
.notification-confirm-actions .btn {
flex: 1;
}
/* ============================
Analytics Consent Banner
============================ */
.analytics-consent-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 10000;
background: #d1f5e4;
color: #1a3d2b;
padding: 0.875rem 1.5rem; /* 14px 24px */
box-shadow: 0 -2px 12px rgba(46, 187, 119, 0.15);
}
.analytics-consent-inner {
max-width: 60rem; /* 960px */
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem; /* 16px */
}
.analytics-consent-text {
font-size: 0.875rem; /* 14px */
margin: 0;
line-height: 1.5;
}
.analytics-consent-text a {
color: #1a7a4a;
text-decoration: underline;
}
.analytics-consent-actions {
display: flex;
gap: 0.5rem; /* 8px */
flex-shrink: 0;
}
.analytics-consent-actions .btn {
background: var(--color-surface);
color: #111827;
border: 1px solid #111827;
border-radius: 0.375rem; /* 6px */
height: 2.125rem; /* 34px */
padding: 0 1rem; /* 16px */
font-size: 0.8125rem; /* 13px */
font-weight: 500;
cursor: pointer;
font-family: inherit;
}
.analytics-consent-actions .btn:hover {
background: #f3f4f6;
}
@media (max-width: 640px) {
.analytics-consent-inner {
flex-direction: column;
text-align: center;
}
.analytics-consent-actions {
width: 100%;
justify-content: center;
}
}
/* ===== Multi-cover: badge on template tiles ===== */
/* (.template-variant-label removed: the mockup gallery shows no variant names —
names live on the Variants-panel tiles and in the editor modal header.) */
.mc-badge {
position: absolute;
bottom: 0.5rem; /* 8px */
left: 0.5rem; /* 8px */
width: var(--control-height-sm);
height: var(--control-height-sm);
display: flex;
align-items: center;
justify-content: center;
background: #454545;
color: #fff;
border: 0.5px solid rgba(255, 255, 255, 0.65);
border-radius: var(--radius);
box-sizing: border-box;
font-size: 0;
line-height: 0;
pointer-events: auto;
cursor: pointer;
z-index: 4;
backdrop-filter: blur(4px);
transition: background 0.15s, border-color 0.15s, opacity 0.15s ease;
opacity: 0;
}
.mc-badge::before {
content: "";
width: 0.875rem; /* 14px */
height: 0.875rem; /* 14px */
background: #fff;
-webkit-mask: url("static/icons/icon-layers.svg") center / contain no-repeat;
mask: url("static/icons/icon-layers.svg") center / contain no-repeat;
}
.template-item:hover .mc-badge {
opacity: 1;
}
.mc-badge:hover {
background: #5C5C5C;
border-color: rgba(255, 255, 255, 0.82);
}
.mc-badge.is-active {
opacity: 1;
background: #454545;
}
.mc-badge.is-active:hover {
background: #5C5C5C;
}
/* ===== Multi-cover: floating debug panel ===== */
.mc-panel {
position: fixed;
z-index: 9000;
width: 16rem; /* 256px */
background: #1e1e1e;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 0.625rem; /* 10px */
box-shadow: 0 8px 32px rgba(0,0,0,0.55);
color: #e8e8e8;
font-size: 0.8125rem; /* 13px */
display: flex;
flex-direction: column;
gap: 0;
overflow: hidden;
}
/* When embedded inside the settings modal's Layers area: lay out in-flow,
full width, no floating/positioning, no own shadow/border. */
.mc-panel--embedded {
position: static;
z-index: auto;
width: 100%;
box-shadow: none;
border: none;
border-radius: 0.5rem; /* 8px */
max-height: 17.5rem; /* 280px */
}
.mc-panel--embedded .mc-panel__close { display: none; }
/* Embedded: drops render live; the modal's own Save/Cancel apply. Hide the
panel's Apply/Reset footer (it would close/detach the embedded panel). */
.mc-panel--embedded .mc-panel__footer { display: none; }
.mc-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.625rem 0.75rem 0.5rem; /* 10px 12px 8px */
background: rgba(255,255,255,0.05);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mc-panel__title {
font-weight: 600;
font-size: 0.8125rem; /* 13px */
letter-spacing: 0.02em;
}
.mc-panel__close {
background: none;
border: none;
color: #aaa;
cursor: pointer;
font-size: 1.125rem; /* 18px */
line-height: 1;
padding: 0.125rem 0.25rem; /* 2px 4px */
border-radius: 0.25rem; /* 4px */
transition: color 0.15s;
display: flex;
align-items: center;
}
.mc-panel__close:hover { color: #fff; }
.mc-panel__title { flex: 1; }
.mc-panel__hint {
margin: 0.5rem 0.75rem 0.25rem; /* 8px 12px 4px */
font-size: 0.75rem; /* 12px */
color: #888;
}
.mc-panel__slots {
display: flex;
flex-direction: column;
gap: 0.375rem; /* 6px */
padding: 0.5rem 0.75rem; /* 8px 12px */
max-height: 20rem; /* 320px */
overflow-y: auto;
position: relative;
}
/* ===== Multi-cover: footer buttons ===== */
.mc-panel__footer {
display: flex;
flex-wrap: wrap;
gap: 0.5rem; /* 8px */
padding: 0.5rem 0.75rem 0.75rem; /* 8px 12px 12px */
}
.mc-panel__apply {
flex: 1 1 100%;
width: 100%;
padding: 0.625rem 0; /* 10px */
background: var(--color-brand);
color: var(--color-on-brand);
border: none;
border-radius: 0.4375rem; /* 7px */
font-size: 0.8125rem; /* 13px */
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
}
.mc-panel__apply:hover { background: var(--color-brand-hover); }
.mc-panel__apply-all {
flex: 1 1 calc(50% - 0.25rem); /* 4px */
min-width: 0;
padding: 0.5rem 0; /* 8px */
background: var(--color-brand-soft);
color: var(--color-brand-active);
border: 1px solid var(--color-brand);
border-radius: 0.4375rem; /* 7px */
font-size: 0.8125rem; /* 13px */
font-weight: 600;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.mc-panel__apply-all:hover {
background: var(--color-brand);
color: var(--color-on-brand);
}
.mc-panel__clear {
flex: 1 1 calc(50% - 0.25rem); /* 4px */
min-width: 0;
padding: 0.5rem 0; /* 8px */
background: rgba(224, 70, 70, 0.18);
color: #e05a5a;
border: 1px solid rgba(224, 70, 70, 0.35);
border-radius: 0.4375rem; /* 7px */
font-size: 0.8125rem; /* 13px */
font-weight: 600;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.mc-panel__clear:hover {
background: rgba(224, 70, 70, 0.8);
color: #fff;
}
/* ===== Multi-cover: individual slot ===== */
.mc-slot {
display: flex;
align-items: center;
gap: 0.5rem; /* 8px */
background: rgba(255,255,255,0.05);
border: 1.5px dashed rgba(255,255,255,0.15);
border-radius: 0.4375rem; /* 7px */
padding: 0.375rem 0.5rem; /* 6px 8px */
transition: border-color 0.15s, background 0.15s;
cursor: grab;
}
.mc-slot:active { cursor: grabbing; }
.mc-slot.is-drag-over {
border-color: var(--color-brand);
background: var(--color-brand-soft);
}
.mc-slot--dragging {
opacity: 0.45;
border-style: solid;
}
.mc-slot__label {
font-size: 0.6875rem; /* 11px */
color: #888;
white-space: nowrap;
min-width: 2.75rem; /* 44px */
}
.mc-slot__thumb {
width: 2.5rem; /* 40px */
height: 2.5rem; /* 40px */
border-radius: 0.25rem; /* 4px */
overflow: hidden;
background: rgba(255,255,255,0.08);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.mc-slot__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.mc-slot__empty {
font-size: 0.625rem; /* 10px */
color: #555;
text-align: center;
}
.mc-slot__del {
margin-left: auto;
background: none;
border: none;
color: #555;
cursor: pointer;
padding: 0.125rem; /* 2px */
border-radius: 0.1875rem; /* 3px */
display: flex;
align-items: center;
transition: color 0.12s;
flex-shrink: 0;
}
.mc-slot__del:hover { color: #e05a5a; }
.mc-slot--stack .mc-slot__label::before {
content: 'рџ“љ ';
font-size: 0.625rem; /* 10px */
}
.mc-slot--stack .mc-slot__label::before {
content: none;
}
.mc-slot-insert-marker {
position: absolute;
left: 0.75rem; /* 12px */
right: 0.75rem; /* 12px */
height: 0.125rem; /* 2px */
border-radius: 999px;
background: var(--color-brand);
box-shadow: 0 0 0 1px rgba(43, 187, 117, 0.24), 0 0 10px rgba(43, 187, 117, 0.42);
pointer-events: none;
z-index: 2;
}
/* ===== Multi-cover: PATTERN visual assignment overlay ===== */
.mc-visual-overlay {
position: absolute;
inset: 0;
z-index: 12;
background: rgba(0, 0, 0, 0.08);
cursor: crosshair;
pointer-events: auto;
}
.mc-visual-overlay.is-drag-over {
background: rgba(0, 176, 88, 0.10);
}
.mc-visual-highlight {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.mc-visual-region {
position: absolute;
width: 0;
height: 0;
border: 0;
background: transparent;
pointer-events: none;
box-sizing: border-box;
}
.mc-visual-region span {
position: absolute;
left: 50%;
top: 50%;
min-width: 1.125rem; /* 18px */
height: 1.125rem; /* 18px */
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: 0 0.3125rem; /* 5px */
background: rgba(20, 20, 20, 0.78);
color: #fff;
font-size: 0.625rem; /* 10px */
font-weight: 700;
line-height: 1;
}
.mc-visual-region.is-active {
z-index: 1;
}
.mc-visual-region.is-active span {
background: var(--color-brand);
box-shadow: var(--focus-ring);
}
.mc-visual-region.is-assigned span {
background: var(--color-brand);
}
.mc-panel--visual {
width: 17.5rem; /* 280px */
}
/* ============================================================
CREATOR MODE
============================================================ */
/* Grid override: creator-canvas-wrap spans columns 2+3 */
.global-container.creator-mode-active {
/* 6 rows to match the base grid (incl. the collapsed spread-action-row track);
gallery is hidden in creator mode so the action row maps to the canvas. */
grid-template-areas:
"sidebar top-bar top-bar top-bar"
"sidebar preferences-bar color-picker-controls export-tabs-zone"
"sidebar creator-canvas-wrap creator-canvas-wrap export-tabs-zone"
"sidebar creator-canvas-wrap creator-canvas-wrap export-tabs-zone"
"sidebar creator-canvas-wrap creator-canvas-wrap export-tabs-zone"
"sidebar creator-canvas-wrap creator-canvas-wrap export-tabs-zone";
}
/* Hide standard panels in creator mode */
.global-container.creator-mode-active .gallery-top-menu,
.global-container.creator-mode-active .gallery-zone,
.global-container.creator-mode-active .templates-gallery-container {
display: none;
}
/* Canvas wrap — hidden by default, visible when creator mode active */
.creator-canvas-wrap {
display: none;
grid-area: creator-canvas-wrap;
position: relative;
overflow: hidden;
background: var(--bg-secondary, #1a1a1a);
}
.global-container.creator-mode-active .creator-canvas-wrap {
display: flex;
flex-direction: column;
}
/* Empty state overlay */
.creator-empty-state {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem; /* 12px */
color: var(--text-muted, #888);
font-size: 0.875rem; /* 14px */
pointer-events: none;
}
.creator-empty-state button { pointer-events: all; }
.creator-empty-state.hidden { display: none; }
/* Scrollable canvas of page tiles */
.creator-canvas {
flex: 1;
overflow-y: auto;
padding: 1.5rem 1.5rem 10rem; /* 24px 24px 160px */
display: flex;
flex-wrap: wrap;
gap: 1rem; /* 16px */
align-content: flex-start;
}
/* в”Ђв”Ђ Page tiles в”Ђв”Ђ */
.creator-page-tile {
background: var(--bg-card, #262626);
border-radius: 0.5rem; /* 8px */
overflow: hidden;
position: relative;
border: 2px solid transparent;
transition: border-color 0.15s;
flex-shrink: 0;
}
.creator-page-tile.drag-over { border-color: var(--accent-blue, #4a9fff); }
.creator-page-tile--cover { width: 150px; }
.creator-page-tile--spread { width: 280px; }
.creator-page-tile__img-wrap {
width: 100%;
aspect-ratio: 3 / 4;
position: relative;
background: #111;
overflow: hidden;
}
.creator-page-tile--spread .creator-page-tile__img-wrap { aspect-ratio: 3 / 2; }
.creator-page-tile__img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.creator-page-tile__spinner {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.4);
color: #fff;
font-size: 1rem; /* 16px */
}
.creator-page-tile__template-badge {
position: absolute;
top: 0.25rem; /* 4px */
right: 0.25rem; /* 4px */
font-size: 0.5625rem; /* 9px */
background: rgba(0,0,0,0.62);
color: #fff;
border-radius: 0.1875rem; /* 3px */
padding: 1px 0.25rem; /* 4px */
max-width: 5rem; /* 80px */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.creator-page-tile__footer {
padding: 0.3125rem 0.5rem; /* 5px 8px */
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.25rem; /* 4px */
}
.creator-page-tile__page-num {
font-size: 0.6875rem; /* 11px */
color: var(--text-muted, #888);
white-space: nowrap;
}
.creator-page-tile__export-btn {
font-size: 0.6875rem; /* 11px */
padding: 0.125rem 0.5rem; /* 2px 8px */
border-radius: 0.25rem; /* 4px */
background: var(--accent-blue, #4a9fff);
color: #fff;
border: none;
cursor: pointer;
white-space: nowrap;
}
.creator-page-tile__export-btn:hover { opacity: 0.85; }
/* в”Ђв”Ђ Floating Dock в”Ђв”Ђ */
.creator-dock {
position: absolute;
bottom: 1rem; /* 16px */
left: 50%;
transform: translateX(-50%);
background: rgba(30, 30, 35, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 1rem; /* 16px */
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
padding: 0.625rem 0.875rem; /* 10px 14px */
min-width: 20rem; /* 320px */
max-width: min(56.25rem, calc(100% - 3rem)); /* 900px 48px */
z-index: 10;
display: flex;
flex-direction: column;
gap: 0.5rem; /* 8px */
}
.creator-dock-tabs {
display: flex;
gap: 0.25rem; /* 4px */
}
.creator-dock-tab {
padding: 0.25rem 0.75rem; /* 4px 12px */
border-radius: 0.5rem; /* 8px */
border: none;
background: transparent;
color: var(--text-muted, #888);
font-size: 0.75rem; /* 12px */
cursor: pointer;
transition: background 0.1s, color 0.1s;
}
.creator-dock-tab.is-active {
background: rgba(255,255,255,0.12);
color: #fff;
}
.creator-dock-scroll {
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
}
.creator-dock-scroll::-webkit-scrollbar { height: 4px; }
.creator-dock-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.creator-dock-list {
display: flex;
gap: 0.625rem; /* 10px */
padding: 0.125rem 0; /* 2px */
}
.creator-dock-item {
width: 5rem; /* 80px */
flex-shrink: 0;
cursor: grab;
border-radius: 0.5rem; /* 8px */
overflow: hidden;
background: var(--bg-card, #2a2a2a);
border: 2px solid transparent;
transition: border-color 0.12s, transform 0.12s;
display: inline-block;
}
.creator-dock-item:hover {
border-color: rgba(255,255,255,0.3);
transform: translateY(-0.125rem); /* -2px */
}
.creator-dock-item:active { cursor: grabbing; }
.creator-dock-item img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
pointer-events: none;
display: block;
}
.creator-dock-item__label {
font-size: 0.5625rem; /* 9px */
color: var(--text-muted, #888);
padding: 0.125rem 0.25rem 0.1875rem; /* 2px 4px 3px */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
}
/* ============================================================
Export History Modal
============================================================ */
.export-history-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 1200;
display: flex;
align-items: center;
justify-content: center;
}
.export-history-window {
background: var(--color-surface);
border-radius: 0.625rem; /* 10px */
width: 1140px;
max-width: 96vw;
height: 35rem; /* 560px */
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: 0 8px 40px rgba(0,0,0,0.18);
overflow: hidden;
}
.export-history-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem 0.75rem; /* 16px 20px 12px */
border-bottom: 1px solid #e8e8e8;
}
.export-history-header h3 {
margin: 0;
font-size: 0.9375rem; /* 15px */
font-weight: 600;
color: #1a1a1a;
}
.export-history-close {
background: none;
border: none;
font-size: 1.25rem; /* 20px */
line-height: 1;
cursor: pointer;
color: #888;
padding: 0 0.25rem; /* 4px */
}
.export-history-close:hover {
color: #333;
}
.export-history-toolbar {
display: flex;
align-items: center;
gap: 0.625rem; /* 10px */
padding: 0.625rem 1.25rem; /* 10px 20px */
border-bottom: 1px solid #f0f0f0;
background: #fafafa;
}
.export-history-toolbar select {
font-size: 0.8125rem; /* 13px */
padding: 0.25rem 0.5rem; /* 4px 8px */
border: 1px solid #d0d0d0;
border-radius: 0.3125rem; /* 5px */
background: var(--color-surface);
cursor: pointer;
color: #333;
}
.export-history-body {
flex: 1;
overflow-y: auto;
padding: 0;
}
.export-history-table {
width: 100%;
border-collapse: collapse;
font-size: 0.8125rem; /* 13px */
}
.export-history-table thead th {
text-align: left;
padding: 0.625rem 0.875rem; /* 10px 14px */
font-weight: 600;
color: #555;
background: #fafafa;
border-bottom: 1px solid #ebebeb;
white-space: nowrap;
}
.export-history-table tbody tr {
border-bottom: 1px solid #f0f0f0;
transition: background 0.12s;
}
.export-history-table tbody tr:hover {
background: #f7f9ff;
}
.export-history-td-image {
display: flex;
align-items: center;
gap: 0.625rem; /* 10px */
padding: 0.625rem 0.875rem; /* 10px 14px */
min-width: 12.5rem; /* 200px */
max-width: 16.25rem; /* 260px */
}
.export-history-td-credit,
.export-history-td-size,
.export-history-td-format,
.export-history-td-status,
.export-history-td-dl,
.export-history-td-dimensions,
.export-history-td-date {
padding: 0.625rem 0.875rem; /* 10px 14px */
white-space: nowrap;
vertical-align: middle;
}
.export-history-thumb {
width: 2.875rem; /* 46px */
height: 2.875rem; /* 46px */
object-fit: cover;
border-radius: 0.25rem; /* 4px */
flex-shrink: 0;
border: 1px solid #e8e8e8;
}
.export-history-thumb--placeholder {
background: #e8e8e8;
}
.export-history-name {
font-size: 0.75rem; /* 12px */
color: #444;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 11.25rem; /* 180px */
display: block;
}
.export-history-status {
font-style: normal;
color: #555;
}
.export-history-status--done {
color: var(--color-success);
font-weight: 600;
}
.export-history-status--downloaded {
font-style: italic;
color: #555;
}
.export-history-status--expired {
color: #aaa;
font-style: normal;
}
.export-history-dl-btn {
background: none;
border: 1px solid #d0d0d0;
border-radius: 0.3125rem; /* 5px */
padding: 0.3125rem 0.4375rem; /* 5px 7px */
cursor: pointer;
color: #555;
display: inline-flex;
align-items: center;
transition: background 0.12s, color 0.12s;
}
.export-history-dl-btn:hover:not([disabled]) {
background: #f0f4ff;
border-color: var(--color-info);
color: var(--color-info);
}
.export-history-dl-btn[disabled] {
opacity: 0.35;
cursor: not-allowed;
}
#export-history-empty {
text-align: center;
padding: 2.5rem 1.25rem; /* 40px 20px */
color: #888;
font-size: 0.875rem; /* 14px */
}
.export-history-pages {
display: flex;
align-items: center;
justify-content: center;
gap: 0.625rem; /* 10px */
padding: 0.75rem; /* 12px */
font-size: 0.8125rem; /* 13px */
color: #555;
}
.export-history-footer {
padding: 0.625rem 1.25rem; /* 10px 20px */
font-size: 0.75rem; /* 12px */
color: #777;
border-top: 1px solid #ebebeb;
background: #fafafa;
}
/* ── PDF Layout Selection Modal ── */
.pdflm-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
z-index: 5100;
display: none;
align-items: center;
justify-content: center;
}
.pdflm-backdrop.is-visible {
display: flex;
animation: fadeInModal 0.2s ease-out;
}
.pdflm-window {
background: var(--bg-main, #fff);
border-radius: 0.625rem; /* 10px */
width: max-content;
max-width: min(1200px, 96vw);
overflow: hidden;
box-shadow: 0 0 27.7px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
}
.pdflm-header {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 700;
font-size: 0.8125rem; /* 13px */
letter-spacing: -0.02em;
color: var(--color-text, #454545);
padding: 0 2.1875rem; /* 35px */
height: 3.5rem; /* 56px */
flex-shrink: 0;
border-bottom: 0.5px solid var(--color-border, #CBCBCB);
}
.pdflm-cards {
display: flex;
gap: 1.625rem; /* 26px */
padding: 2.1875rem 2.1875rem 0; /* 35px 35px */
}
.pdflm-card {
flex: none;
width: max-content;
cursor: pointer;
display: flex;
flex-direction: column;
user-select: none;
}
.pdflm-card-label {
font-weight: 700;
font-size: 0.8125rem; /* 13px */
letter-spacing: -0.02em;
line-height: 1rem; /* 16px */
color: var(--color-text, #454545);
text-align: center;
margin-bottom: 0.3125rem; /* 5px */
}
.pdflm-card-desc {
font-size: 0.8125rem; /* 13px */
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1rem; /* 16px */
color: var(--color-text, #454545);
text-align: center;
margin-bottom: 1.1875rem; /* 19px */
}
/* Thumbnail box — height fixed, width follows content */
.pdflm-preview {
width: max-content;
min-width: 14.125rem; /* 226px */
height: 15.25rem; /* 244px */
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.875rem; /* 14px */
border-radius: 0.8125rem; /* 13px */
padding: 1.8125rem 2.5625rem; /* 29px 41px */
background: var(--color-surface-muted, #F9F9F9);
border: 1px solid var(--color-border, #D8D8D8);
transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.pdflm-card.is-selected .pdflm-preview {
background: var(--color-brand, #2BBB75);
border-color: #7F7F7F;
box-shadow: 0 0 10.7px rgba(0, 0, 0, 0.25);
}
.pdflm-row {
display: flex;
gap: 0.375rem; /* 6px */
height: 5.375rem; /* 86px */
flex: none;
}
/* Real page thumbnail: height fixed, width natural from aspect ratio */
.pdflm-thumb {
height: 5.375rem; /* 86px */
width: auto;
flex: none;
display: block;
object-fit: fill;
border-radius: 0.125rem; /* 2px */
}
/* Empty placeholder: portrait page shape */
.pdflm-thumb--empty {
width: 4.125rem; /* 66px */
height: 5.375rem; /* 86px */
background: #FCF8F8;
border: 1px solid #D9D9D9;
}
/* Ghost: invisible spacer same width as a portrait page */
.pdflm-ghost {
height: 5.375rem; /* 86px */
width: 4.125rem; /* 66px */
flex: none;
}
.pdflm-footer {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 1rem; /* 16px */
padding: 3.375rem 2.1875rem 1.3125rem; /* 54px 35px 21px */
}
/* ======================================================
PDF MODULE — upload gallery block
====================================================== */
.pdf-module {
/* Component-local brand shadows (the green state shadows aren't tokenized in :root). */
--pdf-shadow-hover: 0 0 5px rgba(43, 187, 117, 0.15);
--pdf-shadow-active: 0 0 5px rgba(43, 187, 117, 0.25);
background: #ffffff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: none;
/* As a grid item in the body's 1fr track: keep padding inside the box and allow shrinking
below intrinsic content width so the module never overflows the gallery to the right. */
box-sizing: border-box;
width: 100%;
min-width: 0;
/* No vertical padding on the module: the header is a fixed 46px row flush to the top; the grid
adds its own bottom padding. Horizontal padding only. */
padding: 0 var(--space-7) var(--space-7);
margin-bottom: 0;
grid-column: 1 / -1;
transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
/* Hover — border stays the same grey as regular; only a light shadow appears. GREEN border is
reserved for the selected state. */
.pdf-module:hover {
box-shadow: var(--pdf-shadow-hover);
}
.pdf-module.has-selection {
box-shadow: var(--pdf-shadow-hover);
}
.pdf-module.is-module-selected {
box-shadow: var(--pdf-shadow-active);
border-color: var(--color-brand);
}
/* Collapsed: the module is exactly the 46px header row — grid hidden, header divider + gap removed,
and the module's bottom padding removed so total height == the 46px header. */
.pdf-module.is-collapsed {
padding-bottom: 0;
}
.pdf-module.is-collapsed .pdf-module-header {
border-bottom: none;
}
/* Header is a FIXED 46px row in every state (spec Property 1 = 472x46). border-box keeps the bottom
divider from adding height; horizontal padding comes from the module, so the row is flush to edges. */
.pdf-module-header {
box-sizing: border-box;
height: 2.875rem; /* 46px */
display: flex;
align-items: center;
gap: var(--space-4);
margin: 0 calc(-1 * var(--space-7));
padding: 0 var(--space-7);
border-bottom: 1px solid var(--color-border);
}
/* Gap between the header divider and the thumbnails grid (expanded only). */
.pdf-module:not(.is-collapsed) .pdf-module-header {
margin-bottom: var(--space-6);
}
.pdf-module-header[draggable="true"] {
cursor: grab;
}
.pdf-module-header[draggable="true"]:active {
cursor: grabbing;
}
.pdf-module-header button {
cursor: pointer;
}
/* Collapse caret: small 10x10 ROUND background (not the big 21x12 square), pulled toward the left edge.
Scoped with .pdf-module-header to OUT-specify the generic .pdf-btn (which is defined later in the file
and would otherwise win the width/background/color via source order). */
.pdf-module-header .pdf-module-collapse {
width: 0.9375rem; /* 15px */
height: 0.9375rem; /* 15px */
margin-left: calc(-1 * var(--space-2));
margin-right: var(--space-2);
color: var(--color-brand);
background: rgba(0, 0, 0, 0.06);
border-radius: 50%;
}
.pdf-module-header .pdf-module-collapse:hover {
background: rgba(0, 0, 0, 0.12);
}
.pdf-module-collapse svg {
transition: transform 0.15s ease;
}
.pdf-module.is-collapsed .pdf-module-collapse svg {
transform: rotate(-90deg);
}
/* Title column: filename on top, "N pages" sub-line below. */
.pdf-module-title {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
min-width: 0;
gap: var(--space-1);
}
.pdf-module-filename {
font-family: 'Inter', sans-serif;
font-size: var(--font-size-sm);
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pdf-module-subline {
font-family: 'Inter', sans-serif;
font-size: var(--font-size-xs);
color: var(--color-text-muted);
line-height: 1.2;
}
.pdf-module-icons {
display: flex;
align-items: center;
gap: var(--space-3);
flex-shrink: 0;
}
/* Vertical divider between pages/spreads buttons and the Cover-page toggle (spec Line 196). */
.pdf-module-divider {
width: 1px;
height: var(--space-9); /* ~24px */
background: var(--color-border);
flex-shrink: 0;
}
/* Icon button — BORDERLESS ghost (spec). Active state = dark fill + light icon. */
.pdf-btn {
width: var(--control-height-xs);
height: var(--control-height-xs);
border-radius: var(--radius-control);
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 0;
color: var(--color-text-muted);
transition: background 0.15s, color 0.15s;
}
.pdf-btn:hover {
background: rgba(0, 0, 0, 0.06);
}
.pdf-btn:disabled {
opacity: 0.4;
cursor: default;
pointer-events: none;
}
/* Dark "active" state — #454545 bg with a light icon (spec Group 516). */
.pdf-btn.is-active,
.pdf-btn-upload.is-active {
background: var(--color-text);
color: #eaeaea;
}
/* Icon SVG inside buttons — scale to fit */
.pdf-btn svg {
display: block;
max-width: 0.9375rem; /* 15px */
max-height: 0.8125rem; /* 13px */
flex-shrink: 0;
}
/* Cover-page toggle reuses .shadow-toggle styling (Separate-shadows switch). Compact geometry for
the PDF header (spec Group 517: ~22x13 track, ~10.75 knob) — rem-based control geometry. */
.pdf-cover-toggle.shadow-toggle { height: var(--control-height-xs); padding: 0 var(--space-3); gap: var(--space-3); }
.pdf-cover-toggle .shadow-toggle__label { font-size: var(--font-size-xs); color: var(--color-text); }
.pdf-cover-toggle .shadow-toggle__track { width: 1.375rem; height: 0.8125rem; border-radius: var(--radius-pill); } /* 22 x 13 */
.pdf-cover-toggle .shadow-toggle__thumb { width: 0.6875rem; height: 0.6875rem; top: 0.0625rem; left: 0.0625rem; } /* ~11, ~1px inset */
.pdf-cover-toggle .shadow-toggle__input:checked ~ .shadow-toggle__track .shadow-toggle__thumb {
transform: translateX(0.5625rem); /* 22 - 11 - 2*1 = ~9px */
}
/* Progress bar — full-width row between header and grid */
.pdf-module-progress {
display: block;
margin-bottom: var(--space-6);
width: 100%;
}
.pdf-progress-dot {
display: none;
}
.pdf-progress-track {
width: 100%;
height: 0.3125rem;
background: var(--color-border);
position: relative;
border-radius: var(--radius-sm);
overflow: hidden;
}
.pdf-progress-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: var(--color-brand);
border-radius: var(--radius-sm);
}
/* Hide progress bar when fully loaded OR when collapsed (spec: only shown under the header while a
group is expanded and still importing). */
.pdf-module.is-loaded .pdf-module-progress {
display: none;
}
.pdf-module.is-collapsed .pdf-module-progress {
display: none;
}
/* Pages layout inside module (F8c): fill-container AUTO-FILL grid. A spread tile is the
reference track; pages mode uses a half-spread target so switching spreads/pages preserves the
visual size of an individual page instead of doubling it. `min(target,100%)` lets a very narrow
zone drop to 1 column at 100% (never clipped). Tiles are WIDTH-driven (height auto-follows the
page aspect), so narrowing the zone SCALES tiles down instead of clipping. */
.pdf-module-pages-grid {
--pdf-module-spread-track-target: var(--gallery-tile-size, 12.5rem);
--pdf-module-page-track-target: calc(var(--pdf-module-spread-track-target) / 2);
--pdf-module-current-track-target: var(--pdf-module-page-track-target);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(var(--pdf-module-current-track-target), 100%), 1fr));
gap: 1rem; /* 16px */
}
.pdf-module-pages-grid.is-spreads-mode {
--pdf-module-current-track-target: var(--pdf-module-spread-track-target);
}
/* Manual groups: cap tile growth at ~1.5× the current zoom so a SPARSE group (e.g. 2 tiles) doesn't
balloon its tiles huge relative to the rest of the gallery. The group FRAME still spans full width
(.pdf-module grid-column:1/-1); only the inner tiles cap, leaving trailing space packed left. */
.pdf-module.is-manual-group .pdf-module-pages-grid {
--tile-shrink-floor: 0.85;
--tile-grow-cap: 1.5;
grid-template-columns: repeat(auto-fill,
minmax(
min(calc(var(--pdf-module-current-track-target) * var(--tile-shrink-floor)), 100%),
min(calc(var(--pdf-module-current-track-target) * var(--tile-grow-cap)), 100%)
)
);
justify-content: start;
}
.pdf-module.is-collapsed .pdf-module-pages-grid {
display: none;
}
/* Each grid cell wraps the tile + number label; fills its grid column (F8c). */
.pdf-tile-cell {
display: flex;
flex-direction: column;
min-width: 0;
}
.pdf-tile-stack {
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
}
/* F8b — In SPREADS mode a lone page (cover / odd tail) renders as a REAL two-half spread with one half
blank, so it occupies a full spread column with the image in one half. The blank half is a hidden
DUPLICATE of the page image (visibility:hidden) that still splits 50% of the row → cover image sits
in the RIGHT half, tail single in the LEFT half. No width math. */
.pdf-module .gallery-spread-inner.is-pdf-frame .gallery-page-thumb.is-blank-half {
visibility: hidden;
}
/* Tiles inside pdf-module — no border-radius, no shadow, border only */
.gallery-zone .pdf-module .gallery-spread-tile,
.gallery-zone.view-expanded .pdf-module .gallery-spread-tile {
width: auto;
min-width: 0;
border: 1px solid #D9D9D9;
border-radius: 0 !important;
background: #ffffff;
box-shadow: none;
display: flex;
flex-direction: column;
overflow: hidden;
cursor: default;
transition: border-color 0.15s ease;
/* fill the grid column (F8c) */
width: 100%;
}
.gallery-zone .pdf-module .gallery-spread-tile:hover,
.gallery-zone.view-expanded .pdf-module .gallery-spread-tile:hover {
border-color: #aaa;
box-shadow: none;
background-color: #ffffff;
}
/* Selected tile: keep the 1px border (constant width → NO reflow), convey selection with a
green ring + soft shadow via box-shadow. (Was border 1px→3px, which shoved neighbor rows.) */
.gallery-zone .pdf-module .gallery-spread-tile.is-selected,
.gallery-zone.view-expanded .pdf-module .gallery-spread-tile.is-selected {
border-color: var(--color-brand) !important;
box-shadow: 0 0 0 2px var(--color-brand), 0px 0px 11.3px rgba(0, 0, 0, 0.25) !important;
background: #ffffff !important;
}
.gallery-zone .pdf-module .gallery-spread-tile.is-selected .gallery-spread-inner,
.gallery-zone.view-expanded .pdf-module .gallery-spread-tile.is-selected .gallery-spread-inner {
background: #ffffff !important;
}
/* F8c — WIDTH-driven thumbs that fill the grid column. The inner is a flex row; each half is
`flex:1; width:0` so the two halves split the column width evenly, and `height:auto` makes the
tile height auto-follow the page aspect. NO min/max-height caps → narrowing the gallery SCALES the
tile down (never clips). Uniform per module (pages share aspect). */
.pdf-module .gallery-spread-inner {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%;
background: #ffffff;
}
/* In-frame thumbs stay slot-filling (flex:1; width:0) — the spread blank-half + 2-up split
rely on it. PDF tiles live inside `.pdf-module .pdf-module-pages-grid`, NOT as direct
children of `.gallery-collection-body`, so the page-hugging expanded rules above (which use a
`> .gallery-spread-tile` direct-child combinator) never reach them. `max-width:none`
guards against any inherited cap. */
.pdf-module .gallery-page-thumb {
flex: 1;
width: 0;
min-width: 0;
max-width: none;
height: auto;
object-fit: contain;
background: transparent;
border: none;
border-radius: 1px;
}
/* In-frame single page/cover: still width-driven and column-filling. (Beats the generic
`.gallery-spread-tile.is-single-page .gallery-page-thumb { width:100px }` at main.css:5331 inside a
PDF frame.) A spreads-mode cover/tail renders as two halves (real + hidden blank) that each split
via the flex:1 rule above; a pages-mode single is one image filling the cell. */
.pdf-module .gallery-spread-tile.is-single-page .gallery-spread-inner {
grid-template-columns: none;
width: 100%;
}
.pdf-module .gallery-spread-tile.is-single-page .gallery-page-thumb {
flex: 1;
width: 0;
min-width: 0;
height: auto;
object-fit: contain;
}
/* In-frame 2-up spread: thin white gap between the two halves (not flush). The two
thumbs share the fixed cell; the pair scales to fit (object-fit: contain). */
.pdf-module .gallery-spread-inner.is-pdf-frame:not(.is-single-page) {
gap: 0.125rem; /* 2px */
}
/* Page numbers — outside tile border, below the tile box. Flex row: each half centers its own
number UNDER its own page (no spine clustering). A single page has only .num-left (full width). */
.pdf-module .gallery-spread-tile-numbers {
display: none;
font-family: 'Inter', sans-serif;
font-size: 0.8125rem; /* 13px */
line-height: 1rem; /* 16px */
color: #7F7F7F;
padding: 0.3125rem 0 0; /* 5px */
}
.pdf-module .gallery-spread-tile-numbers .num-left,
.pdf-module .gallery-spread-tile-numbers .num-right {
flex: 1;
text-align: center;
}
.pdf-module.show-numbers .gallery-spread-tile-numbers {
display: flex;
}
/* Selected tile numbers: recolor the number row in place (no negative margin / overlap bar,
so selection never changes layout height). */
.pdf-module.show-numbers .pdf-tile-cell:has(.gallery-spread-tile.is-selected) .gallery-spread-tile-numbers {
color: #F9F9F9;
background: var(--color-brand);
border-radius: 1px;
}
/* Metadata row (RGB/CMYK tag, filename) — always hidden inside pdf-module */
.gallery-zone .pdf-module .gallery-spread-tile-meta,
.gallery-zone.view-expanded .pdf-module .gallery-spread-tile-meta {
display: none !important;
}
/* Loading placeholder inside pdf-module */
.pdf-module .gallery-loading-placeholder {
min-height: 8.125rem; /* 130px */
width: 100%;
background: #f0f0f0;
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* In-frame (F8): the inner is width:auto/height:--pdf-thumb-h, so a 100%-width placeholder would
collapse to 0. Give the loading box a definite size at the shared height (~portrait page aspect). */
.pdf-module .gallery-spread-inner.is-pdf-frame .gallery-loading-placeholder {
height: var(--pdf-thumb-h);
min-height: 0;
width: calc(var(--pdf-thumb-h) * 0.72);
}
/* === Spread Settings Modal === */
.ssm-overlay {
display: none;
position: fixed;
/* left/top/width/height are set in JS to cover EXACTLY the mockups gallery zone
(.templates-gallery-zone). It dims + blocks only that zone; the uploads gallery
(drag source) and export panel sit outside it and stay interactive. Close via
the close/Cancel buttons or Esc (no click-away). */
z-index: 1000;
background: rgba(20, 20, 20, 0.45);
pointer-events: auto;
}
.ssm-overlay--visible { display: block; }
.ssm-modal {
display: none;
position: fixed;
z-index: 1001;
/* left/top are set in JS (_positionToGallery) to centre the modal within the
mockups gallery zone. The dim overlay blocks that zone behind it, so the modal
centring over the gallery is fine (the uploads gallery — the drag source — is
outside the dimmed zone and remains usable). */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* preview 646 (SQUARE) + panel 250 — the variants rail is gone (the Variants
panel under the gallery owns the list). rem so the modal scales with
--ui-scale/--ui-zoom like the panes inside it (px here caused the mismatch). */
width: 56rem; /* 896px */
/* Height is driven by the SQUARE preview pane (646px), the tallest column. NO hard
height — a fixed ceiling cropped the square preview and squeezed the panel's button
stack. _positionToGallery reads offsetHeight dynamically, so auto height is safe. */
height: auto;
background: #FFFFFF;
box-shadow: 0px 0px 15.6px rgba(0, 0, 0, 0.25);
border-radius: 0.625rem; /* 10px */
box-sizing: border-box;
/* visible so nav arrows below the modal are not clipped; inner panes clip
their own content (preview pane + panel both have overflow handling). */
overflow: visible;
/* Figma layout: full-width header row on top, then preview + sidebar. */
flex-direction: column;
}
.ssm-modal--visible { display: flex; }
/* All modules (covers / presentations / spreads) use the same wide layout — the
preview pane must stay full size so the baked mockup composite reads clearly. */
/* Full-width TWO-COLUMN header mirroring the body columns: left cell (over the
preview pane) carries the editable variant NAME; right cell (over the sidebar)
carries the Colors/Levels tabs (LEFT-aligned) + close. The right cell's
border-left continues the preview pane's border-right, so the vertical divider
runs from the very top of the modal to the bottom. The header's bottom border
is the Figma full-width line; tab underlines sit ON it. */
.ssm-header {
display: flex;
align-items: stretch;
height: 3rem; /* 48px — roomier than the Figma 39.4 per user request */
flex-shrink: 0;
box-sizing: border-box;
border-bottom: 0.5px solid #D8D8D8;
border-radius: 0.625rem 0.625rem 0 0;
background: #FFFFFF;
}
.ssm-header-left {
flex: 0 0 40.375rem; /* = .ssm-preview-pane width → the divider lines up */
width: 40.375rem;
box-sizing: border-box;
display: flex;
align-items: center;
padding: 0 1.125rem; /* 18px */
min-width: 0;
}
.ssm-header-right {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
padding: 0 1.125rem; /* 18px */
border-left: 0.5px solid #C1C1C1; /* continues .ssm-preview-pane's border-right */
box-sizing: border-box;
}
.ssm-variant-name {
background: none;
border: 0;
padding: 0.125rem 0.25rem; /* 2px 4px */
margin-left: -0.25rem;
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 0.8125rem; /* 13px */
line-height: 1rem; /* 16px */
color: #454545;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: text;
border-radius: 0.25rem; /* 4px */
}
.ssm-variant-name:hover { background: #F5F5F5; }
.ssm-variant-name-input {
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 0.8125rem; /* 13px */
line-height: 1rem;
color: #454545;
border: 0.5px solid #B7B7B7;
border-radius: 0.25rem;
padding: 0.125rem 0.25rem;
width: 12rem;
}
/* Colors sits at the sidebar's LEFT edge; close pinned right; underlines on the line. */
.ssm-header-right .ssm-tabs { align-self: flex-end; }
.ssm-header-right .ssm-close-btn { margin-left: auto; }
/* Body row: white preview pane (left) + controls sidebar (right). */
.ssm-body {
display: flex;
flex-direction: row;
flex: 1;
min-height: 0;
}
.ssm-preview-pane { border-radius: 0 0 0 0.625rem; }
.ssm-panel { border-radius: 0 0 0.625rem 0; overflow: hidden; }
/* Left preview pane — WHITE margins around an inset bordered preview box (Figma
Rectangle 505). The pane itself stays white; the user's bg colour / transparency
paints INSIDE the box. */
.ssm-preview-pane {
position: relative;
width: 40.375rem; /* 646px */
flex: 0 0 40.375rem; /* 646px */
box-sizing: border-box;
padding: 1.125rem; /* 18px white margins */
border-right: 0.5px solid #C1C1C1; /* vertical divider (Figma Line 104) */
background: #ffffff;
overflow: hidden;
}
/* HARD square contract: aspect-ratio pins width == height so the preview host can
never go rectangular; the built/cloned tile fits INSIDE (object-fit: contain on
its layers) and never dictates the host size. */
.ssm-preview-box {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
height: auto;
box-sizing: border-box;
border: 1px solid #D8D8D8;
border-radius: 0.375rem; /* 6px */
background: #ffffff;
overflow: hidden;
}
/* Explicit transparent background = checkerboard (distinct from "no color"). */
.ssm-preview-box.is-transparent {
background-color: #ffffff;
background-image: conic-gradient(#ECECEC 0 25%, #FFFFFF 0 50%, #ECECEC 0 75%, #FFFFFF 0);
background-size: 1.25rem 1.25rem; /* 20px checker */
}
.ssm-preview-pane::after {
content: '';
position: absolute;
inset: 0;
z-index: 6;
background: rgba(41, 41, 41, 0.53);
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}
.ssm-modal--readonly .ssm-preview-pane:hover::after { opacity: 1; }
.ssm-preview-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
/* Drop feedback rings the preview BOX, not the padded white pane. */
.ssm-preview-pane--drop .ssm-preview-box { outline: 3px solid #2BBB75; outline-offset: -3px; }
/* Drag feedback overlay: numbered layer badges shown on the preview while a cover
is dragged over the modal, so the reaction + target layer are obvious. */
.ssm-drop-hint {
position: absolute; inset: 0; z-index: 7;
display: none; flex-direction: column; align-items: center; justify-content: center;
gap: 0.875rem; background: transparent; /* 14px */
}
.ssm-preview-pane--drop .ssm-drop-hint { display: flex; }
/* Per-cover green "droppable" highlight (no numbers). JS positions the wrapper over the
preview's contain-rect and draws the cover's mask, tinted green, into the canvas — so only
the targeted cover lights up, exactly like the PATTERN region highlight. */
.ssm-cover-hl {
position: absolute; display: none; pointer-events: none; z-index: 0;
left: 0; top: 0;
}
.ssm-cover-hl canvas { width: 100%; height: 100%; display: block; }
.ssm-drop-hint-badges { display: flex; flex-direction: column; gap: 16px; align-items: center; z-index: 1; }
.ssm-drop-badge {
min-width: 3.75rem; height: 3rem; padding: 0 0.75rem; border-radius: 0.75rem; /* 60px 48px 12px 12px */
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 1.1875rem; color: #2BBB75; /* 19px */
background: #fff; border: 2px solid #2BBB75; box-shadow: 0 3px 10px rgba(0,0,0,0.22);
transition: transform 0.08s ease, box-shadow 0.08s ease;
pointer-events: auto; cursor: default;
}
.ssm-drop-badge--filled { background: #2BBB75; color: #fff; }
.ssm-drop-badge--active { transform: scale(1.22); box-shadow: 0 0 0 5px rgba(43,187,117,0.35); }
/* Label pinned to the TOP of the preview so the drag cursor / drag-image doesn't cover it. */
.ssm-drop-hint-label {
position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 2;
font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.875rem; white-space: nowrap; /* 14px */
color: #1a7a4e; background: #fff; padding: 0.375rem 0.875rem; border-radius: 999px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* PATTERN region overlay on the preview: numbered dots (always visible) + a green
region highlight under the cursor on hover. Aligned to the cover image by JS. */
.ssm-pattern-overlay { position: absolute; z-index: 4; pointer-events: auto; }
.ssm-pattern-hl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ssm-pattern-dot {
position: absolute; transform: translate(-50%, -50%);
min-width: 1.375rem; height: 1.375rem; padding: 0 0.3125rem; box-sizing: border-box; /* 22px 22px 5px */
border-radius: 0.6875rem; background: rgba(255,255,255,0.95); border: 0.125rem solid #2BBB75; /* 11px 2px */
color: #1a7a4e; font: 700 0.75rem 'Inter', sans-serif; /* 12px */
display: flex; align-items: center; justify-content: center;
box-shadow: 0 1px 4px rgba(0,0,0,0.3); pointer-events: none;
opacity: 0;
transition: opacity 0.12s ease, transform 0.08s ease;
}
.ssm-modal--editing .ssm-preview-pane:hover .ssm-pattern-dot,
.ssm-modal--editing .ssm-preview-pane--drop .ssm-pattern-dot { opacity: 1; }
.ssm-modal--readonly .ssm-pattern-dot { opacity: 0; }
.ssm-pattern-dot.is-filled { background: #2BBB75; color: #fff; }
.ssm-pattern-dot.is-active { transform: translate(-50%, -50%) scale(1.25); box-shadow: 0 0 0 4px rgba(43,187,117,0.35); }
/* Standalone cover (hybrid SPREAD+COVER) — distinct blue accent so it reads as the
cover sitting on top of the spreads, not a numbered instance. */
.ssm-pattern-dot--cover { border-color: #2F6BFF; color: #1c47b0; }
.ssm-pattern-dot--cover.is-filled { background: #2F6BFF; color: #fff; }
.ssm-pattern-dot--cover.is-active { box-shadow: 0 0 0 4px rgba(47,107,255,0.35); }
/* Cloned tile visual stack (base object + UV artwork + gloss + shadow).
Fills the square pane; the cloned .template-item is stripped of its own
layout so its absolutely-positioned image layers fill the box. */
.ssm-preview-clone {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.ssm-preview-clone .ssm-clone {
position: relative;
width: 100%;
height: 100%;
margin: 0;
inset: auto;
box-shadow: none;
border: none;
background: transparent;
}
.ssm-preview-clone .ssm-clone img,
.ssm-preview-clone .ssm-clone canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
/* Modal-owned composite layers (rendered via mokupCoverUvPreview, NOT a tile clone)
— replicate the gallery tile's 3-layer stack so the preview is pixel-identical:
shadow (multiply) < base object < printed covers. All overlay EXACTLY. */
.ssm-preview-clone > .ssm-base-shadow,
.ssm-preview-clone > .ssm-base-object,
.ssm-preview-clone > canvas.ssm-preview-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
/* Shadow must blend exactly like the gallery .shadow-layer (black + multiply),
otherwise the raw shadow image looks opaque/inverted. */
.ssm-preview-clone > .ssm-base-shadow {
z-index: 0;
filter: brightness(0);
mix-blend-mode: multiply;
pointer-events: none;
}
.ssm-preview-clone > .ssm-base-object { z-index: 1; }
.ssm-preview-clone > canvas.ssm-preview-canvas { z-index: 2; }
/* Per-mockup background colour applied via SpreadSettingsModal.
The custom property --mokup-bg-color is set on the host (.template-item / .mockup-wrapper). */
.template-item.has-mokup-bg,
.mockup-wrapper.has-mokup-bg {
background-color: var(--mokup-bg-color);
}
.ssm-preview-shadow {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
filter: brightness(0);
mix-blend-mode: multiply;
z-index: 1;
}
.ssm-preview-img {
position: relative;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
z-index: 2;
}
/* (.ssm-preview-hover-actions removed: the modal is a single-variant editor —
no hover Edit/Clone on the preview.) */
/* Nav buttons — visible only on hover */
/* Nav arrows sit BELOW the whole modal box (outside it) so they never overlap the
multi-cover ID/region overlays inside the preview. */
.ssm-nav-outer {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: 0.75rem; /* 12px */
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem; /* 12px */
pointer-events: none; /* only the buttons are interactive */
}
.ssm-nav-outer .ssm-nav-btn { pointer-events: auto; }
.ssm-nav-btn {
width: 2.75rem; /* 44px */
height: 2.75rem; /* 44px */
background: #FFFFFF;
border: 1px solid #C1C1C1;
border-radius: 0.75rem; /* squared with rounded corners, a bit larger */
font-size: 1.5rem; /* 24px */
line-height: 1;
color: #454545;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
transition: background 0.15s, border-color 0.15s;
}
.ssm-nav-btn:hover { background: #F0F0F0; border-color: #989898; }
/* Spinner */
.ssm-spinner {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1.75rem; /* 28px */
height: 1.75rem; /* 28px */
border: 3px solid rgba(0,0,0,0.1);
border-top-color: #555;
border-radius: 50%;
animation: ssm-spin 0.7s linear infinite;
z-index: 8;
}
.ssm-spinner--visible { display: block; }
@keyframes ssm-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* Right panel */
.ssm-panel {
flex: 0 0 15.625rem; /* 250px */
width: 15.625rem; /* 250px */
display: flex;
flex-direction: column;
position: relative;
min-width: 0;
box-sizing: border-box;
}
.ssm-close-btn {
background: none;
border: none;
cursor: pointer;
padding: 0.25rem; /* 4px */
display: flex;
align-items: center;
opacity: 0.7;
transition: opacity 0.15s;
}
.ssm-close-btn:hover { opacity: 1; }
.ssm-divider {
height: 0;
border-top: 0.5px solid #D8D8D8;
margin: 0 0;
flex-shrink: 0;
}
/* Zone rows: flex layout matching the Figma rhythm without absolute positioning. */
.ssm-zones {
padding: 0;
flex-shrink: 0;
/* Even vertical spacing between the (1-3) real colour zones — looks balanced
regardless of how many the current module shows. */
display: flex;
flex-direction: column;
gap: 0.5rem; /* 8px */
}
.ssm-zone-row {
display: flex;
align-items: center;
justify-content: flex-end; /* pill is right-aligned (Figma right:20.41) */
padding: 0.25rem 1.25rem 0.25rem 1.125rem; /* 4px 20px 4px 18px */
box-sizing: border-box;
min-height: 2.625rem; /* 42px */
}
.ssm-zone-row.ssm-zone-hidden { display: none; }
.ssm-zone-label {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 0.8125rem; /* 11px */
line-height: 0.8125rem; /* 13px */
color: #454545;
flex: 1;
}
.ssm-color-field {
display: flex;
align-items: center;
justify-content: space-between;
width: 12.625rem; /* 202px */
max-width: 100%;
height: 2rem; /* 32px */
background: #FCFCFC;
border: 1px solid #D9D9D9;
border-radius: 0.4rem; /* 4px */
padding: 0 0.5rem 0 0.75rem; /* 8px 12px */
box-sizing: border-box;
gap: 0.5rem; /* 8px */
cursor: pointer;
}
.ssm-color-meta {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.375rem; /* 6px */
flex: 0 0 auto;
min-width: 0;
}
.ssm-color-state {
display: none;
position: relative;
order: 1;
width: 1.03125rem; /* 16.5px */
height: 1.03125rem; /* 16.5px */
flex: 0 0 1.03125rem; /* 16.5px */
box-sizing: border-box;
border: 0.5px solid #B6B6B6;
border-radius: 0.125rem; /* 2px */
background: #FFFFFF;
}
.ssm-zone-empty .ssm-color-state { display: block; }
.ssm-zone-transparent .ssm-color-state {
background-image:
conic-gradient(#D9D9D9 25%, #FFFFFF 0 50%, #D9D9D9 0 75%, #FFFFFF 0);
background-size: 0.5rem 0.5rem; /* 8px 8px */
}
.ssm-zone-no-color .ssm-color-state::after {
content: '';
position: absolute;
left: -0.125rem; /* -2px */
top: 0.4375rem; /* 7px */
width: 1.25rem; /* 20px */
border-top: 1.5px solid #DD584F;
transform: rotate(-42deg);
}
.ssm-color-hex {
order: 3;
min-width: 3.125rem; /* 50px */
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 0.6875rem; /* 11px */
line-height: 0.8125rem; /* 13px */
color: #454545;
text-align: left;
}
.ssm-color-swatch {
order: 2;
box-sizing: border-box;
width: 1.03125rem; /* 16.5px */
height: 1.03125rem; /* 16.5px */
border: 0.5px solid #B6B6B6;
border-radius: 0.125rem; /* 2px */
cursor: pointer;
flex-shrink: 0;
background: #f0f0f0;
transition: box-shadow 0.15s;
}
.ssm-color-swatch:hover { box-shadow: 0 0 0 2px rgba(0,0,0,0.12); }
/* Layers (multi-cover) section */
.ssm-layers {
display: flex;
flex-direction: column;
gap: 0.5rem; /* 8px */
padding: 0.5rem 1rem 0; /* 8px 16px */
}
.ssm-layers-head {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 0.8125rem; /* 13px */
color: #1A1A1A;
letter-spacing: -0.02em;
}
.ssm-layers-btn {
height: 1.6875rem; /* 27px */
background: #FFFFFF;
border: 0.5px solid #000000;
border-radius: 0.375rem; /* 6px */
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 0.8125rem; /* 13px */
color: #1A1A1A;
cursor: pointer;
letter-spacing: -0.02em;
}
.ssm-layers-btn:hover { background: #f7f7f7; }
.ssm-layers-slots {
display: flex;
flex-direction: column;
gap: 0.375rem; /* 6px */
max-height: 14.375rem; /* 230px */
overflow-y: auto;
}
.ssm-layer-slot {
display: flex;
align-items: center;
gap: 0.625rem; /* 10px */
height: 2.5rem; /* 40px */
padding: 0 0.5rem; /* 8px */
background: #7F7F7F;
border-radius: 0.375rem; /* 6px */
cursor: grab;
}
.ssm-layer-slot--dragging { opacity: 0.65; cursor: grabbing; }
.ssm-layer-slot.is-drag-over { outline: 2px solid #2BBB75; background: #5f5f5f; transform: translateX(3px); box-shadow: 0 0 0 3px rgba(43,187,117,0.3); }
.ssm-layer-slot__thumb {
width: 1.875rem; /* 30px */
height: 1.875rem; /* 30px */
border-radius: 0.25rem; /* 4px */
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
color: #9a9a9a;
font-size: 0.875rem; /* 14px */
}
.ssm-layer-slot__thumb img { width: 100%; height: 100%; object-fit: contain; }
.ssm-layer-slot__label {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 0.8125rem; /* 13px */
color: #F9F9F9;
min-width: 0;
flex: 1;
}
.ssm-layer-slot__del {
width: 1.375rem; /* 22px */
height: 1.375rem; /* 22px */
border: 0;
border-radius: 0.25rem; /* 4px */
background: rgba(255,255,255,0.18);
color: #FFFFFF;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
flex: 0 0 1.375rem; /* 22px */
}
.ssm-layer-slot__del:hover {
background: rgba(255,255,255,0.28);
}
/* (variants rail CSS removed: the rail is gone — the Variants panel under the
gallery owns the list; the modal edits exactly one variant.) */
/* Panel body — vertical stack below the header divider: tab bodies, the action
row (Edit / Undo+Save), Clone, a spacer, then the export buttons pinned at the
bottom (Figma order). */
.ssm-panel-body {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
padding: 0.5rem 0 1rem; /* 8px 16px */
/* Even vertical rhythm between the stacked groups (zones → actions → export)
instead of pinning zones to the top and buttons to the bottom via a stretching
spacer. The modal height follows the SQUARE preview, so this column distributes
its content within that height with consistent gaps. */
gap: 0.75rem; /* 12px */
justify-content: flex-start;
}
/* Spacer neutralised: no longer stretches (was flex:1, which jammed zones up and
buttons down). Kept as a no-op element so the DOM template stays stable. */
.ssm-panel-spacer { flex: 0 0 0; min-height: 0; }
/* Action row: read-only shows full-width Edit; editing shows Undo + Save split.
Figma Line 113 sits above this row. */
.ssm-actions {
display: flex;
gap: 0.5625rem; /* 9px */
padding: 1rem 1rem 0; /* 16px 16px */
margin-top: 0.5rem; /* 8px */
border-top: 0.5px solid #D8D8D8; /* Figma Line 113 */
flex-shrink: 0;
}
.ssm-actions:not(.ssm-actions--split) { display: none; }
.ssm-actions > button { flex: 1 1 0; }
/* Export buttons (bottom of the panel). Figma Line 206 sits above this block. */
.ssm-export {
display: flex;
flex-direction: column;
gap: 0.875rem; /* 14px */
padding: 1rem 1rem 1.125rem; /* 16px 16px 18px */
border-top: 0.5px solid #D8D8D8; /* Figma Line 206 */
flex-shrink: 0;
}
.ssm-render-preview,
.ssm-export-current,
.ssm-export-all {
border-radius: 0.375rem; /* 6px */
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 0.875rem; /* 14px */
line-height: 1.0625rem; /* 17px */
letter-spacing: 0;
cursor: pointer;
border: 0.5px solid #B7B7B7;
}
.ssm-render-preview {
/* Deliberately the LARGEST button — it's the primary action of the panel. */
height: 3.375rem; /* 54px */
font-size: 0.9375rem; /* 15px */
font-weight: 600;
background: #FFFFFF;
border-color: #434343;
color: #454545;
}
.ssm-export-current { height: 38px; background: #2EBB77; color: #F9F9F9; }
.ssm-export-all { height: 34px; background: #434343; color: #F9F9F9; }
.ssm-render-preview:hover { background: #f7f7f7; }
.ssm-render-preview[data-live] { background: #2BBB75; color: #fff; }
.ssm-render-preview[data-live]:hover { background: #29a86a; }
.ssm-render-preview:disabled,
.ssm-render-preview[disabled] { opacity: 0.6; pointer-events: none; }
.ssm-export-current:hover { background: #29a86a; }
.ssm-export-all:hover { background: #2f2f2f; }
/* Edit-mode action buttons (Cancel + Save). */
.ssm-undo-btn, .ssm-save-btn {
height: 1.625rem; /* 26px */
background: #FFFFFF;
border: 0.5px solid #434343;
border-radius: 0.375rem; /* 6px */
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 0.75rem; /* 12px */
line-height: 0.9375rem; /* 15px */
color: #454545;
cursor: pointer;
letter-spacing: 0;
}
.ssm-undo-btn:hover, .ssm-save-btn:hover { background: #f7f7f7; }
.ssm-save-btn--busy { opacity: 0.7; cursor: progress; }
.ssm-save-btn--busy::after { content: '…'; }
/* ── Stage 2: tabs + variant editing ───────────────────────────────────────── */
/* Generic hide utility (tab bodies, footer buttons, Levels empty state). */
.ssm-tab-hidden { display: none !important; }
/* Tabs now live INLINE in the panel header (Figma: Colors | Levels top-right). */
.ssm-tabs {
display: flex;
gap: 1.25rem; /* 20px */
flex-shrink: 0;
}
.ssm-tab {
background: none;
border: none;
/* Tabs sit at the header's flex-end; the padding drops their 3px underline
right onto the header's full-width bottom border (Figma Line 207 on Line 108). */
padding: 0 0 0.6875rem; /* 11px */
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 0.8125rem; /* 13px */
line-height: 1rem; /* 16px */
color: #7F7F7F;
cursor: pointer;
border-bottom: 3px solid transparent;
}
.ssm-tab--active {
color: #454545;
border-bottom-color: #454545;
}
/* Tab bodies are content-sized (everything fits — no scroll per Figma). The
.ssm-panel-spacer below them grows and pushes the Edit/Clone + export group to the
bottom of the panel. */
.ssm-tab-body {
display: flex;
flex-direction: column;
flex-shrink: 0;
}
.ssm-levels-empty {
padding: 1.5rem 1rem; /* 24px 16px */
text-align: center;
color: #989898;
font-size: 0.75rem; /* 12px */
}
/* Read-only gating: while viewing a SAVED version (not editing), block the colour
swatches and layer/region drop targets AND visibly DIM the editable controls so
the locked state is obvious (the way out is the prominent Edit button). */
.ssm-panel--readonly .ssm-color-swatch,
.ssm-panel--readonly .ssm-layer-slot { pointer-events: none; cursor: not-allowed; }
.ssm-panel--readonly .ssm-tab-body { opacity: 0.5; }
.ssm-panel--readonly .ssm-color-field { cursor: not-allowed; }
.ssm-modal--readonly .ssm-pattern-overlay,
.ssm-modal--readonly .ssm-pattern-dot { pointer-events: none; }
/* (.ssm-edit-btn / .ssm-clone-btn removed with the read-only mode's rail.) */
/* (.ssm-variant-confirm removed with the rail's trash flow.) */
/* Disabled placeholder colour zones (covers Inner/Outer block/cover — no EXR mask
yet). Shown to match Figma but non-interactive and greyed. */
.ssm-zone-row--disabled .ssm-zone-label { color: #D8D8D8; }
.ssm-zone-row--disabled .ssm-color-field { background: #FCFCFC; border-color: #EAEAEA; }
.ssm-zone-row--disabled .ssm-color-swatch {
background: #FFFFFF;
cursor: default;
pointer-events: none;
}
.ssm-zone-row--disabled .ssm-color-swatch:hover { box-shadow: none; }
.ssm-vc-yes { background: #DD584F; color: #fff; border-color: #DD584F; }
.ssm-vc-no { background: #FFFFFF; color: #7F7F7F; }
/* In-house unsaved-changes confirm (replaces window.confirm). Floats over the whole
modal; backdrop click = cancel. */
.ssm-confirm-backdrop {
position: absolute;
inset: 0;
z-index: 50;
background: rgba(0, 0, 0, 0.18);
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.625rem; /* 10px */
}
.ssm-confirm {
width: 20rem; /* 320px */
max-width: 80%;
background: #FFFFFF;
border: 1px solid #D9D9D9;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
border-radius: 0.625rem; /* 10px */
padding: 1.25rem; /* 20px */
box-sizing: border-box;
}
.ssm-confirm-title {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 0.8125rem; /* 13px */
line-height: 1.125rem; /* 18px */
color: #454545;
text-align: center;
margin-bottom: 1rem; /* 16px */
}
.ssm-confirm-row {
display: flex;
gap: 0.5rem; /* 8px */
}
.ssm-confirm-btn {
flex: 1 1 0;
height: 1.875rem; /* 30px */
border-radius: 0.375rem; /* 6px */
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 0.75rem; /* 12px */
line-height: 0.9375rem; /* 15px */
letter-spacing: -0.02em;
cursor: pointer;
border: 0.5px solid #B7B7B7;
}
.ssm-confirm-save { background: #2EBB77; color: #F9F9F9; border-color: #2EBB77; }
.ssm-confirm-save:hover { background: #29a86a; }
.ssm-confirm-discard { background: #FFFFFF; color: #DD584F; border-color: #DD584F; }
.ssm-confirm-discard:hover { background: #fdf2f1; }
.ssm-confirm-cancel { background: #FFFFFF; color: #7F7F7F; }
.ssm-confirm-cancel:hover { background: #f7f7f7; }
/* ============================================================================
PATTERN BUILDER — presentation-pattern module (admin-only).
Replaces the templates gallery inside templates-gallery-container while
.pattern-mode-active is on .global-container (set by pattern_builder.js).
Figma: workspace #F4F4F4 r8 p18; panel 208px #F9F9F9, border #D8D8D8.
============================================================================ */
/* Grid override: the preferences-bar row is dropped for this module (its size
dropdown lives inside the builder panel); spread-action-row moves up and the
gallery gets the freed 50px. Secondary sidebar stays (unlike creator mode). */
.global-container.pattern-mode-active {
grid-template-rows: 4.0625rem 3.125rem var(--spread-action-row-track) minmax(0, 1fr) minmax(0, 1fr) clamp(13.75rem, 32vh, 25rem);
grid-template-areas:
"sidebar top-bar top-bar top-bar"
"sidebar gallery-top-menu color-picker-controls export-tabs-zone"
"sidebar spread-action-row templates-gallery-container export-tabs-zone"
"sidebar gallery-zone templates-gallery-container export-tabs-zone"
"sidebar gallery-zone templates-gallery-container export-tabs-zone"
"sidebar gallery-zone templates-gallery-container export-tabs-zone";
}
.global-container.pattern-mode-active .preferences-bar { display: none; }
.global-container.pattern-mode-active .templates-gallery-scroll { display: none; }
/* Filter bar: template filters make no sense here — only the module label shows.
!important beats per-module inline display toggles from download_logic.js. */
.pattern-builder-bar-label {
display: none;
align-items: center;
font-size: 0.8125rem; /* 13px */
font-weight: 600;
color: var(--text-primary);
}
.global-container.pattern-mode-active .templates-filter-bar > *:not(.pattern-builder-bar-label) { display: none !important; }
.global-container.pattern-mode-active .pattern-builder-bar-label { display: flex; }
/* Match the export-actions-row height (2.75rem) — scoped to Pattern Builder only,
so the normal Templates header (and its collapse behavior) is untouched. */
.global-container.pattern-mode-active .templates-filter-bar { height: 2.75rem; padding: 0 1.25rem; }
/* --- area: [ workspace | panel ] row --- */
.pattern-builder-area {
display: none;
flex: 1 1 auto;
min-height: 0;
min-width: 0;
}
.global-container.pattern-mode-active .pattern-builder-area { display: flex; }
/* Expanded variants panel replaces the builder visually (same as the gallery). */
.templates-gallery-container.variants-expanded .pattern-builder-area { display: none; }
.pb-workspace {
flex: 1 1 auto;
min-width: 0;
min-height: 0;
display: flex;
padding: 1.125rem; /* 18px breathing room around the surface */
}
.pb-stage {
position: relative; /* cell/drop glows are positioned in here */
flex: 1 1 auto;
min-width: 0;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
background: #5C5C5C; /* darkest stage fill — literal, must stay dark in BOTH
themes (the --color-ink-hover token flips light in dark mode) */
border-radius: 0.5rem; /* 8px */
padding: 1.125rem; /* 18px — canvas letterboxes inside */
box-sizing: border-box;
overflow: hidden;
cursor: grab;
}
.pb-stage.is-panning,
.pb-stage.is-panning #pb-canvas { cursor: grabbing; }
#pb-canvas {
display: block;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
cursor: grab;
}
/* drag-drop highlights: whole-stage glow (multi drop) / one cell (single drop) */
.pb-drop-glow {
position: absolute;
inset: 0;
display: none;
pointer-events: none;
border: 2px solid var(--color-success, #2EBB77);
border-radius: 0.5rem;
background: rgba(46, 187, 119, 0.10);
}
.pb-drop-glow.is-on { display: block; }
/* (single-cell hover highlight is drawn ON the canvas as the slide parallelogram) */
.pb-error { margin: auto; color: #DD584F; font-size: 0.8125rem; }
/* --- control panel (Figma base 208px; default 240px, drag-resizable) --- */
.pb-panel {
position: relative; /* anchors the left-edge resize handle */
flex: 0 0 var(--pb-panel-w, 15rem);
width: var(--pb-panel-w, 15rem); /* 240px default; --pb-panel-w set by drag */
display: flex;
flex-direction: column;
min-height: 0;
background: #F9F9F9;
border-left: 1px solid #D8D8D8;
font-family: 'Inter', sans-serif;
}
.pb-resize-handle {
position: absolute;
top: 0;
bottom: 0;
left: -0.25rem; /* straddles the border for an easy grab */
width: 0.5rem; /* 8px */
cursor: col-resize;
z-index: 20;
touch-action: none;
}
.pb-resize-handle:hover,
.pb-resize-handle.is-active {
background: linear-gradient(to right, transparent, rgba(46, 187, 119, 0.35), transparent);
}
.pb-title-row { flex: 0 0 auto; padding: 0.75rem 0.875rem 0.625rem; }
.pb-title {
display: block;
width: 100%;
border: none;
background: none;
padding: 0;
text-align: left;
font-family: inherit;
font-size: 0.75rem; /* 12px */
font-weight: 500;
color: #333333;
cursor: text;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pb-title-input {
width: 100%;
box-sizing: border-box;
font-family: inherit;
font-size: 0.75rem;
font-weight: 500;
color: #333333;
border: 1px solid var(--color-success, #2EBB77);
border-radius: 0.25rem;
padding: 0.125rem 0.25rem;
outline: none;
}
.pb-sep { flex: 0 0 auto; height: 1px; background: #E3E3E3; }
.pb-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden; /* overflow-y:auto alone would compute x:auto */
scrollbar-gutter: stable; /* the scrollbar must not eat row width */
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.625rem 0.875rem 0.875rem;
}
.pb-scroll .pb-input { min-width: 0; }
.pb-section-label {
margin-top: 0.375rem;
font-size: 0.6875rem; /* 11px */
font-weight: 600;
color: #7F7F7F;
}
.pb-section-label:first-child { margin-top: 0; }
.pb-row { display: flex; align-items: center; gap: 0.375rem; }
.pb-row-label { flex: 1 1 auto; font-size: 0.75rem; color: #4A4A4A; }
.pb-input {
width: 3.5rem; /* 56px */
height: 1.5rem; /* 24px */
box-sizing: border-box;
border: 0.5px solid #B7B7B7;
border-radius: 0.375rem;
background: #FFFFFF;
padding: 0 0.375rem;
font-family: inherit;
font-size: 0.75rem;
color: #333333;
}
.pb-row--dims .pb-input { flex: 1 1 0; width: auto; min-width: 0; }
.pb-dim-tag { flex: 0 0 auto; font-size: 0.6875rem; color: #7F7F7F; }
/* format + mockup dropdowns — floating overlays anchored below their triggers.
Reuses only the MODEL of .preferences-menu (relative wrapper + absolute menu),
NOT the full .preferences-dropdown contract (no height:100%). */
.pb-format-row { position: relative; display: flex; flex-direction: column; gap: 0.25rem; }
.pb-format-btn { align-self: flex-start; }
.pb-mockup-picker { position: relative; }
.pb-format-menu, .pb-mockup-menu {
position: absolute;
top: 100%;
left: 0;
margin-top: 0.25rem;
z-index: 9999;
min-width: 100%;
display: flex;
flex-direction: column;
gap: 0.25rem;
background: #FFFFFF;
border: 1px solid #D8D8D8;
border-radius: 0.375rem;
box-shadow: var(--shadow-md);
padding: 0.25rem;
box-sizing: border-box;
}
.pb-format-menu[hidden], .pb-mockup-menu[hidden] { display: none; }
.pb-menu-item {
position: relative;
border: none;
background: transparent;
padding: 0.375rem 0.625rem;
font-family: inherit;
font-size: 0.75rem;
color: #333333;
text-align: left;
cursor: pointer;
}
.pb-menu-item:hover { background: var(--bg-grey-light); }
.pb-menu-item.is-active {
padding-left: 1.625rem;
}
.pb-menu-item.is-active::before {
content: "\2713";
position: absolute;
left: 0.625rem;
top: 50%;
transform: translateY(-50%);
font-size: 0.6875rem;
line-height: 1;
}
.pb-mockup-thumb {
/* Inset from 100% so the drop shadow isn't clipped by .pb-scroll's
overflow-x:hidden / overflow-y:auto. */
position: relative;
width: calc(100% - 0.5rem);
margin: 0.125rem 0.25rem 0.375rem;
aspect-ratio: 1 / 1;
box-sizing: border-box;
border: 0.5px solid #B7B7B7;
border-radius: 0.375rem;
background: #E5F5ED; /* light mint — matches .gallery-collection-head */
overflow: visible;
cursor: pointer;
}
.pb-mockup-thumb .shadow-layer,
.pb-mockup-thumb .object-layer {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.pb-mockup-option {
display: flex;
align-items: center;
gap: 0.375rem;
border: 1px solid transparent;
border-radius: 0.25rem;
background: transparent;
padding: 0.25rem;
font-family: inherit;
font-size: 0.6875rem;
color: #4A4A4A;
cursor: pointer;
}
.pb-mockup-option-thumb {
position: relative;
width: 2rem;
height: 2rem;
flex-shrink: 0;
}
.pb-mockup-option-thumb .shadow-layer,
.pb-mockup-option-thumb .object-layer {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
flex-shrink: 0;
}
.pb-mockup-option:hover { background: var(--bg-grey-light); }
.pb-mockup-option.is-active { border-color: var(--color-success, #2EBB77); }
/* Preview switch */
.pb-preview-toggle { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; user-select: none; }
.pb-preview-label { font-size: 0.75rem; color: #4A4A4A; }
.pb-switch {
position: relative;
width: 1.75rem; /* 28px */
height: 1rem; /* 16px */
border-radius: 0.5rem;
background: #CFCFCF;
transition: background 0.15s ease;
flex-shrink: 0;
cursor: pointer;
}
.pb-switch.is-on { background: var(--color-success, #2EBB77); }
.pb-switch-knob {
position: absolute;
top: 0.125rem;
left: 0.125rem;
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
background: #FFFFFF;
transition: left 0.15s ease;
}
.pb-switch.is-on .pb-switch-knob { left: 0.875rem; }
/* Zoom */
.pb-zoom-head { display: flex; justify-content: space-between; align-items: center; margin-top: 0.375rem; }
.pb-zoom-label { font-size: 0.75rem; font-weight: 600; color: #7F7F7F; }
.pb-zoom-value { font-size: 0.75rem; color: #4A4A4A; }
/* Thin rail like .tile-size-slider (1px/2px track + 14px thumb), full width, green thumb. */
.pb-zoom-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 1px;
background: var(--color-ink, #3B3B3B);
border-radius: 0.125rem; /* 2px */
outline: none;
cursor: pointer;
}
.pb-zoom-slider::-moz-range-track {
height: 0.125rem; /* 2px */
background: var(--color-ink, #3B3B3B);
border: 0;
border-radius: 0.125rem; /* 2px */
}
.pb-zoom-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 0.875rem; /* 14px */
height: 0.875rem; /* 14px */
border-radius: 50%;
background: var(--color-success, #2EBB77);
cursor: grab;
transition: transform 0.15s ease;
}
.pb-zoom-slider::-webkit-slider-thumb:active { cursor: grabbing; }
.pb-zoom-slider::-moz-range-thumb {
width: 0.875rem; /* 14px */
height: 0.875rem; /* 14px */
border: none;
border-radius: 50%;
background: var(--color-success, #2EBB77);
cursor: grab;
}
/* Buttons (match the .ssm-confirm-* conventions) */
.pb-export-btn {
margin-top: 0.625rem;
height: 1.875rem; /* 30px */
border: none;
border-radius: 0.375rem;
background: var(--color-success, #2EBB77);
color: #F9F9F9;
font-family: inherit;
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
}
.pb-export-btn:hover { background: #29a86a; }
.pb-actions {
flex: 0 0 auto;
display: flex;
gap: 0.5rem;
padding: 0.625rem 0.875rem;
border-top: 1px solid #E3E3E3;
}
.pb-cancel-btn, .pb-save-btn {
flex: 1 1 0;
height: 1.875rem;
border-radius: 0.375rem;
font-family: inherit;
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
}
.pb-cancel-btn { background: #FFFFFF; border: 0.5px solid #B7B7B7; color: #7F7F7F; }
.pb-cancel-btn:hover { background: #F7F7F7; }
.pb-save-btn { background: var(--color-success, #2EBB77); border: 1px solid var(--color-success, #2EBB77); color: #F9F9F9; }
.pb-save-btn:hover { background: #29a86a; }
/* ============================================================================
VARIANTS PANEL — cross-module saved-variants dock under the mockup gallery.
Default height = --bottom-dock-h (shared with .export-actions-bar). All rem.
============================================================================ */
.variants-panel {
position: relative;
flex: 0 0 auto;
height: var(--variants-panel-h, var(--bottom-dock-h));
display: flex;
flex-direction: column;
min-height: 0;
border-top: var(--border);
background: var(--bg-main);
}
.variants-panel.is-collapsed {
height: var(--variants-header-h);
}
.variants-panel.is-collapsed .variants-panel-body {
display: none;
}
.variants-panel.is-expanded {
flex: 1 1 auto;
height: auto;
}
/* Expanded panel replaces the mockup gallery visually. */
.templates-gallery-container.variants-expanded .templates-gallery-scroll {
display: none;
}
.variants-resize-handle {
position: absolute;
top: -0.25rem; /* 4px — straddles the border for an easy grab */
left: 0;
right: 0;
height: 0.5rem; /* 8px */
cursor: row-resize;
z-index: 20;
}
.variants-resize-handle:hover,
.variants-resize-handle.is-active {
background: linear-gradient(to bottom, transparent, rgba(46, 187, 119, 0.35), transparent);
}
body.is-resizing-variants {
cursor: row-resize;
user-select: none;
}
.variants-panel-header {
flex: 0 0 auto;
height: var(--variants-header-h);
display: flex;
align-items: center;
gap: 1.25rem; /* 20px */
padding: 0 1.25rem; /* 20px */
border-bottom: var(--border);
min-width: 0;
}
.variants-panel-title {
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
.variants-tabs {
display: flex;
align-items: center;
gap: 1.25rem; /* 20px */
min-width: 0;
overflow-x: auto;
}
.variants-tab {
background: none;
border: 0;
padding: 0.25rem 0; /* 4px */
font-family: 'Inter';
font-weight: 500;
font-size: var(--font-size-lg);
color: var(--text-secondary, #7F7F7F);
cursor: pointer;
border-bottom: 0.125rem solid transparent; /* 2px active underline slot */
white-space: nowrap;
}
.variants-tab--active {
color: var(--bg-dark);
border-bottom-color: var(--bg-dark);
}
.variants-header-controls {
margin-left: auto;
display: flex;
align-items: center;
gap: 0.5rem; /* 8px */
flex: 0 0 auto;
}
.variants-header-btn svg {
width: var(--icon-size-md);
height: var(--icon-size-md);
}
.variants-panel-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
position: relative;
}
.variants-panel-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--variants-tile-size, 6rem), 1fr));
gap: 0.75rem; /* 12px */
padding: 0.75rem 1.25rem; /* 12px 20px */
align-content: start;
}
.variants-tile {
display: flex;
flex-direction: column;
gap: 0.25rem; /* 4px */
min-width: 0;
}
.variants-tile-thumb {
position: relative;
aspect-ratio: 1 / 1;
border-radius: var(--radius-control);
background: var(--color-surface-muted);
overflow: hidden;
}
.variants-tile-thumb img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
/* Cache miss / regen in flight: neutral placeholder, never a broken-image icon. */
.variants-tile-thumb--empty img { visibility: hidden; }
.variants-tile-thumb--empty::after {
content: '';
position: absolute;
inset: 0;
margin: auto;
width: 1.5rem; /* 24px */
height: 1.5rem; /* 24px */
border-radius: var(--radius-sm);
border: 1px dashed #C9C9C9;
}
.variants-tile-name {
font-family: 'Inter';
font-weight: 400;
font-size: var(--font-size-xs);
line-height: var(--line-height-snug);
color: var(--bg-dark);
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.variants-empty {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Inter';
font-size: var(--font-size-sm);
color: var(--text-secondary, #7F7F7F);
pointer-events: none;
}
/* Transparent-background checker swatch in the modal's bg row: CLICK = set the
explicit transparent state (never opens the color picker). The OLD read-only
checker indicator (.ssm-color-state) is hidden in this row — two checkers read
as a duplicated control. */
.ssm-zone-row[data-zone="bg"] .ssm-color-state { display: none; }
.ssm-transparent-swatch {
width: 1.0625rem; /* 17px ~ Figma 16.49 */
height: 1.0625rem;
padding: 0;
border: 0.5px solid #B6B6B6;
border-radius: 0.125rem; /* 2px */
background-color: #FFFFFF;
background-image: conic-gradient(#D9D9D9 0 25%, #FFFFFF 0 50%, #D9D9D9 0 75%, #FFFFFF 0);
background-size: 0.5rem 0.5rem; /* 8px checker */
cursor: pointer;
flex-shrink: 0;
}
.ssm-zone-transparent-active .ssm-transparent-swatch {
outline: 1px solid #2BBB75;
outline-offset: 1px;
}
/* Per-variant shadow rows in the modal (Colors tab, under the zone list). */
.ssm-shadow-block {
display: flex;
flex-direction: column;
flex-shrink: 0;
border-top: 0.5px solid #D8D8D8;
margin-top: 0.5rem; /* 8px */
padding-top: 0.5rem; /* 8px */
}
.ssm-shadow-select {
min-width: 3.75rem; /* 60px ~ Figma 58.88 */
height: 1.75rem; /* 28px ~ Figma 27.67 */
background: #F8F8F8;
border: 0;
border-radius: var(--radius-sm);
font-family: 'Inter';
font-size: var(--font-size-xs);
color: var(--bg-dark);
padding: 0 0.375rem; /* 6px */
cursor: pointer;
}
/* Variant tile hover actions + context menu + rename input + drop highlight. */
.variants-tile-actions {
position: absolute;
top: 0.25rem; /* 4px */
right: 0.25rem; /* 4px */
display: flex;
gap: 0.25rem; /* 4px */
opacity: 0;
transition: opacity 0.12s ease;
z-index: 2;
}
.variants-tile:hover .variants-tile-actions { opacity: 1; }
.variants-tile-btn {
width: 1.5rem; /* 24px */
height: 1.5rem; /* 24px */
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.92);
border: 0.5px solid #D5D5D5;
border-radius: var(--radius-sm);
color: var(--bg-dark);
cursor: pointer;
}
.variants-tile-btn:hover { background: #FFFFFF; border-color: #B7B7B7; }
.variants-tile-btn--delete.is-armed {
background: #dd584f;
border-color: #dd584f;
color: #FFFFFF;
}
.variants-tile.is-drop-target .variants-tile-thumb {
outline: 0.125rem solid var(--green); /* 2px */
outline-offset: -0.125rem;
}
/* Click-selection: 1px green ring like gallery group selection (box-shadow → no reflow). */
.variants-tile.is-selected .variants-tile-thumb {
box-shadow: 0 0 0 1px var(--color-brand);
}
/* Centered pencil = the only edit entry point on the tile. */
.variants-tile-edit {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1.75rem; /* 28px */
height: 1.75rem; /* 28px */
opacity: 0;
transition: opacity 0.12s ease;
z-index: 2;
}
.variants-tile:hover .variants-tile-edit { opacity: 1; }
/* Compact zoom: tiny tiles keep only the centered pencil. */
.variants-grid--compact .variants-tile-actions { display: none; }
/* Header trash dropdown: two-step "Delete all" arm state. */
.variants-clean-menu .clean-menu-item.is-armed {
background: #dd584f;
color: #FFFFFF;
}
.variants-clean-menu .clean-menu-item.is-armed:hover { background: #c94b43; }
.variants-tile-rename {
width: 100%;
font-family: 'Inter';
font-size: var(--font-size-xs);
text-align: center;
border: 0.5px solid #B7B7B7;
border-radius: var(--radius-xs);
padding: 0.0625rem 0.25rem; /* 1px 4px */
background: #FFFFFF;
color: var(--bg-dark);
}
.variants-context-menu {
position: fixed;
z-index: 3000;
min-width: 10rem; /* 160px */
background: #FFFFFF;
border: 0.5px solid #D5D5D5;
border-radius: var(--radius-control);
box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.18);
padding: 0.25rem; /* 4px */
display: flex;
flex-direction: column;
}
.variants-context-item {
background: none;
border: 0;
text-align: left;
font-family: 'Inter';
font-size: var(--font-size-sm);
color: var(--bg-dark);
padding: 0.375rem 0.5rem; /* 6px 8px */
border-radius: var(--radius-sm);
cursor: pointer;
}
.variants-context-item:hover { background: var(--color-surface-muted); }
.variants-context-item--danger { color: #dd584f; }
/* Save animation: the variant "flies" from the modal preview into its panel tile. */
.ssm-fly-ghost {
position: fixed;
z-index: 3200;
pointer-events: none;
border-radius: var(--radius-control);
overflow: hidden;
background: #FFFFFF;
box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.25);
opacity: 1;
transition:
left 0.45s cubic-bezier(0.4, 0.7, 0.3, 1),
top 0.45s cubic-bezier(0.4, 0.7, 0.3, 1),
width 0.45s cubic-bezier(0.4, 0.7, 0.3, 1),
height 0.45s cubic-bezier(0.4, 0.7, 0.3, 1),
opacity 0.45s ease;
}
.ssm-fly-ghost img,
.ssm-fly-ghost canvas {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.variants-flash {
animation: variants-flash-pulse 0.6s ease;
}
@keyframes variants-flash-pulse {
0% { box-shadow: 0 0 0 0 rgba(46, 187, 119, 0.7); }
100% { box-shadow: 0 0 0 0.625rem rgba(46, 187, 119, 0); }
}