/* Переопределяем фон всего документа — переносим фон на html, чтобы псевдоэлемент body::before мог находиться за контентом (если у body будет прозрачный фон) */ html { background-color: var(--bg, #F7F5F2) !important; } body { background-color: transparent !important; } /* Переопределяем фон для section-soft, если нужен светлее */ .section-soft { background-color: var(--surface, #F7F5F2) !important; } /* Переопределяем фон для контейнеров, чтобы не было белого */ .container { background-color: transparent !important; } /* Растягиваем таблицу разворотов на всю доступную ширину */ .album-turns-table { width: 100%; table-layout: fixed; } /* (removed aggressive navbar overrides here to allow theme tokens to control appearance) */ /* ================================ Theme tokens (Light, "чистый админ") ================================ */ :root{ /* Нейтральная база */ --bg:#F7F5F2; /* фон страницы: светло‑серый */ --surface:#FFFFFF; /* базовая поверхность */ --surface-2:#F8FAFC; /* редкая светлая подложка (на больших полотнах) */ --line:#EAE6DF; /* разделители/границы (1px) */ --ink:#2B2B2B; /* основной текст: тёмно‑серый */ --muted:#6B7280; /* вторичный текст */ /* Акцент + состояния (сдержанные) */ --primary:#E07A3F; --primary-hover:#D66A33; /* Дополнительные переменные */ --ok:#16A34A; --warn:#D97706; --err:#DC2626; --focus:#93C5FD; /* мягкое focus-ring */ --shadow:0 1px 2px rgba(0,0,0,.04); /* локально, редко */ /* --card, --border, --accent, --grad, ... — больше не используются */ } /* ================================ Bootstrap variable bindings ================================ */ :root{ --bs-body-bg:#F7F5F2; --bs-body-color:#2B2B2B; /* Акцент выберите один блок и оставьте */ /* Вариант 1: тёплый янтарный */ --bs-primary:#E07A3F; --bs-primary-rgb:224,122,63; /* Вариант 2: бирюзовый (если решите его) */ /* --bs-primary: #2FA39B; --bs-primary-rgb: 47,163,155; */ --bs-secondary:#6E6A60; --bs-border-color:#EAE6DF; --bs-link-color:color-mix(in oklab, var(--bs-primary) 92%, black); --bs-link-hover-color:color-mix(in oklab, var(--bs-primary) 80%, black); --bs-heading-color:var(--ink); /* Поверхности Bootstrap */ --bs-card-bg:var(--surface); --bs-card-color:var(--ink); --bs-card-border-color:var(--line); /* Задаём фон для Bootstrap‑navbar в тёмный цвет */ --bs-navbar-bg: var(--ink); /* Настройки цветов Bootstrap‑navbar */ --bs-navbar-color:var(--surface); /* текст ссылок в навбаре — светлый */ --bs-navbar-hover-color:var(--primary-hover); /* при наведении — акцентный */ --bs-navbar-brand-color:var(--surface); /* текст логотипа/названия — светлый */ --bs-dropdown-bg:var(--surface); --bs-dropdown-color:var(--ink); --bs-dropdown-link-hover-bg:color-mix(in oklab,var(--surface),black 5%); } /* ================================ Базовые принципы ================================ */ html, body{ background:var(--bs-body-bg); color:var(--bs-body-color); } html{ scroll-behavior:smooth; } /* Prevent background scroll when any modal/sheet is open. Bootstrap toggles `body.modal-open`; we also mirror it to `` for cases where the scroll container is the root element. */ html.modal-open, body.modal-open{ overflow: hidden !important; overscroll-behavior: none; } /* Едва заметные деликатные линии */ hr, .divider{ border:0; border-top:1px solid var(--line); } /* ================================ Кнопки (как в демо — пилюли с тенями) ================================ */ .btn { border-radius: var(--fx-radius-pill); font-weight: 600; padding: 0.65rem 1.25rem; } .btn-primary { /* Use Bootstrap button variables fed from tokens */ --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); /* Ensure readable foreground on primary buttons — force white text for contrast */ --bs-btn-color: var(--fx-card); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 90%, white); /* Make hover text on primary (orange) buttons readable — use standard body color */ --bs-btn-hover-color: var(--bs-body-bg); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 80%, black); --bs-btn-active-border-color: var(--bs-primary); /* Добавляем тень как в демо */ box-shadow: 0 3px 8px rgba(0,0,0,.16), 0 1px 3px rgba(0,0,0,.08); } .btn-primary:hover { box-shadow: 0 4px 12px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.1); } /* Outline / secondary buttons: drive colors through variables */ .btn-outline-secondary { --bs-btn-color: var(--fx-muted); --bs-btn-border-color: var(--fx-border); --bs-btn-hover-bg: color-mix(in srgb, var(--fx-card), black 3%); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-border-color: var(--fx-border); background: var(--surface); } /* Кнопки действий разворотов (demo-style: увеличенный padding, pill-форма) */ .js-go-photos, .js-toggle-comment { border-radius: var(--fx-radius-pill) !important; padding: 0.85rem 1.5rem !important; font-weight: 600; font-size: 1rem; transition: all 0.15s ease; } .js-go-photos { box-shadow: 0 3px 8px rgba(0,0,0,.16), 0 1px 3px rgba(0,0,0,.08); } .js-go-photos:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.1); } .js-toggle-comment { box-shadow: 0 1px 3px rgba(0,0,0,.08); } .js-toggle-comment:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.12); } /* Компактные «пилюли» — плоские */ .pill{ display:inline-flex; align-items:center; gap:.35rem; white-space: nowrap; padding:.45rem .8rem; border-radius: var(--fx-radius-pill, 999px); font-weight:600; background:var(--surface); border:1px solid var(--line); transition: all 0.15s ease-in-out; cursor: pointer; text-decoration: none; } .pill:hover{ background:color-mix(in oklab,var(--surface),var(--primary) 8%); border-color:color-mix(in oklab,var(--line),var(--primary) 30%); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,.08); } .pill.is-active{ background:color-mix(in oklab,var(--primary),white 92%); border-color:color-mix(in oklab,var(--primary),white 70%); color:var(--bs-body-color); } /* компактные служебные пилюли статуса */ .pill--muted{ background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.08); color: rgba(0,0,0,.62); } /* “есть действие” (регистрация кликабельна) */ .pill--success{ background: rgba(25,135,84,.10); border-color: rgba(25,135,84,.22); color: rgba(25,135,84,.95); } .pill--success:hover{ background: rgba(25,135,84,.14); border-color: rgba(25,135,84,.28); color: rgba(25,135,84,1); } /* Кнопка удаления разворота — DEPRECATED, use [data-remove-turn] instead */ .spread-remove, .btn-remove-spread { padding: 6px 10px; border-radius: var(--fx-radius-pill, 999px) !important; border: 1px solid rgba(0,0,0,0.06); background: var(--fx-card); color: var(--bs-danger); font-size: 0.9rem; font-weight: 600; line-height: 1; cursor: pointer; min-width: 80px; box-shadow: 0 1px 2px rgba(0,0,0,.06); } .spread-remove:hover, .btn-remove-spread:hover { background: var(--fx-card); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.06); color: color-mix(in oklab, var(--bs-danger), black 6%); } /* ================================ Навбар (ровная полоса, токены темы) Сделано theme-aware: навбар цвета берёт из Bootstrap / project tokens - не принуждаем тёмную схему здесь; управляйте через токены (--bs-navbar-*) - кнопки и ссылки наследуют переменные (--bs-navbar-color / --bs-navbar-brand-color) ================================ */ .navbar{ /* Фон навбара — управляется токенами (в light/dark они разные). Убираем лишний !important — теперь фон полностью контролируется через токены (`--bs-navbar-*`). */ background: var(--surface); color: var(--bs-navbar-color, var(--bs-body-color)); border-bottom: none; border-radius: 0; padding: .5rem 0; box-shadow: none; } /* Пусть дочерние элементы наследуют цвета из навбара (но не перезаписываем корневой элемент), чтобы темы могли управлять внешним видом через токены. */ .navbar * { color: inherit; } /* Стили для кнопок в шапке (например, «Выйти») — используют navbar токены */ .navbar button { background: transparent; /* без фона */ border: none; /* убираем рамку */ border-radius: 0; /* убираем скругление */ padding: 0 .5rem; /* небольшие отступы по горизонтали */ color: var(--bs-navbar-color, var(--bs-body-color)); font-weight: 600; /* чуть выделяем */ } .navbar button:hover { color: var(--bs-navbar-hover-color, var(--primary-hover)); } .navbar .navbar-brand:hover, .navbar .nav-link:hover, .navbar a:hover { color: var(--bs-navbar-brand-hover-color, var(--bs-navbar-hover-color, var(--bs-navbar-brand-color))); } /* Navbar: pill actions rendered in the top bar (moved from inline in ERB) */ #mainNavbar .navbar-nav { flex-direction: row; align-items: center; } #mainNavbar .nav-item { display: flex; align-items: center; } #mainNavbar .sk-navbar-pill { height: 32px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--bs-border-color); color: var(--bs-body-color); font-size: 0.875rem; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; } #mainNavbar .sk-navbar-pill:hover { background: color-mix(in oklab, var(--surface), black 3%); color: var(--bs-body-color); } #mainNavbar .sk-navbar-pill:focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15); } /* ================================ Order tabs (admin pages) ================================ */ .order-tabs{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 1rem; } .order-tab-dropdown{ position: relative; display: inline-block; } .order-tab{ display: inline-flex; align-items: center; justify-content: center; padding: 0.38rem 0.7rem; border-radius: var(--fx-radius-pill) !important; font-weight: 700; font-size: 0.875rem; line-height: 1.1; text-decoration: none; cursor: pointer; text-align: center; white-space: nowrap; border: 1px solid var(--bs-border-color); background: var(--surface); color: var(--bs-body-color); } .order-tab-with-dropdown{ padding-right: 0.5rem; } .order-tab:hover{ background: color-mix(in oklab, var(--surface), black 4%); color: var(--bs-body-color); } .order-tab:focus-visible{ outline: 0; box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18); } .order-tab--active{ background: rgba(var(--bs-primary-rgb), 0.12); border-color: rgba(var(--bs-primary-rgb), 0.35); color: var(--bs-primary); } /* Right-aligned tab variant for order pages (helps put log-view link to the far right) */ .order-tab--right{ margin-left: auto; } @media (max-width: 991.98px){ .order-tabs{ gap: 6px; } .order-tab{ padding: 0.3rem 0.55rem; font-size: 0.8125rem; white-space: normal; } .order-tab--right{ margin-left: 0; } } /* Ensure admin/page buttons and tabs keep pill radius (override Bootstrap utilities if needed) */ .page .btn, .order-tabs .order-tab, input[type="submit"].btn { border-radius: var(--fx-radius-pill) !important; } /* Green button variant for list controls */ .btn-success{ background: color-mix(in oklab, var(--ok), white 92%); border-color: color-mix(in oklab, var(--ok), white 80%); color: color-mix(in oklab, var(--ok), black 12%); } .btn-success:hover{ background: var(--ok); color: var(--fx-card); border-color: var(--ok); } /* Highlight for potential duplicates (same phone) */ .twins-highlight > .accordion-header .accordion-button, .twins-highlight > .accordion-header .accordion-button.collapsed { border-left: 6px solid var(--bs-warning); background: color-mix(in oklab, var(--bs-warning), white 94%); } /* Highlight report table rows that have duplicate normalized phone numbers */ .order-table tr.twins-highlight td { background-color: #fff3cd !important; /* Bootstrap warning-light */ } .order-table tr.twins-highlight td:first-child { box-shadow: inset 6px 0 0 var(--bs-warning) !important; } .order-table tr.twins-highlight:hover td { background-color: #ffeeba !important; } /* Компактные сумм-чипы */ .sum-chip{ border:1px solid var(--line); background: transparent !important; border-radius:999px; padding:.35rem .75rem; font-weight:700; color:var(--ink); } /* Highlight preregistration entries that look like duplicates (same phone) */ .accordion-item.twins-highlight > .accordion-header .accordion-button { background: color-mix(in oklab, var(--bs-warning), white 92%); border-color: rgba(var(--bs-warning-rgb), 0.15); } .accordion-item.twins-highlight .badge { box-shadow: 0 0 0 0.15rem rgba(var(--bs-warning-rgb), 0.06); } /* ================================ Типографика ================================ */ .h-display{ font-family:var(--font-display, "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial); font-weight:800; letter-spacing:-0.02em; } /* Видимый маркер номера папки на странице public_orders */ .order-dir{ color: var(--primary); font-weight:800; display:inline-block; padding:.15rem .5rem; border-radius:6px; background: color-mix(in oklab, var(--primary), white 92%); border: 1px solid color-mix(in oklab, var(--primary), white 78%); margin-left:.5rem; } /* Убираем градиентный текст — простая читаемость */ .text-gradient{ color:var(--ink); -webkit-background-clip:initial; background-clip:initial; } /* Вторичный текст — кастомный класс для светлого текста на сером фоне */ .text-muted-custom { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 .5rem; color: var(--surface) !important; } .form-control::placeholder{ color:color-mix(in oklab,var(--muted),white 35%); } .form-control:focus,.form-select:focus{ border-color:var(--primary); box-shadow:0 0 0 .2rem color-mix(in oklab,var(--focus),transparent 65%); } /* Focus-ring utility for thin bottom-border inputs */ .focus-ring:focus{ outline: none; box-shadow: 0 0 0 .18rem color-mix(in oklab,var(--focus),transparent 65%); } /* Make the border-bottom style slightly muted by default */ .form-control.border-bottom{ border-top: none !important; border-left: none !important; border-right: none !important; border-bottom: 1px solid color-mix(in oklab, var(--line), black 2%); border-radius: 0 !important; padding-left: 0.25rem; padding-right: 0.25rem; } .form-control.is-invalid,.form-check-input.is-invalid{ border-color:var(--err); box-shadow:0 0 0 .2rem color-mix(in oklab,var(--err),transparent 82%); } .section-soft{ background:var(--fx-card); border:1px solid var(--line); border-radius:var(--fx-radius); padding:clamp(16px,2vw,28px); box-shadow:none; } .card-2025{ background:var(--fx-card); border:1px solid var(--fx-border); border-radius:var(--fx-radius); box-shadow:var(--fx-shadow); } .info-card{ background:var(--fx-card); border:1px solid var(--line); border-radius:var(--fx-radius); padding:16px; } .card{ border-color:var(--fx-border); background:var(--fx-card); color:var(--bs-body-color); border-radius:var(--fx-radius); box-shadow:var(--fx-shadow); } .modal-content, .offcanvas, .dropdown-menu{ background: var(--fx-card); color: var(--bs-body-color); border-color: var(--fx-border); border-radius: var(--fx-radius); box-shadow: var(--fx-shadow); } .badge-primary, .badge.bg-primary{ background: var(--bs-primary); } /* Бейдж для дополнительных услуг (фиолетовый) */ .badge.bg-extra { background: var(--fx-extra-accent) !important; color: var(--fx-card) !important; } /* ================================ Структуры списков/таблиц/строк (hover = фон) ================================ */ .table tr:hover, .list-group-item:hover { /* Keep padding untouched on hover; only apply background if desired. */ background-color: var(--bs-list-group-action-hover-bg, transparent); } /* Album turns table — compact editable rows */ .album-turns-table .code-input, .album-turns-table .name-input { border: none; border-radius: 0; padding: 0; background-color: transparent; transition: border-color .2s ease, background-color .2s ease; } .album-turns-table .code-input:focus, .album-turns-table .name-input:focus { border: 1px solid var(--primary); background-color: var(--surface); outline: none; } .album-turns-table .name-input { white-space: normal; } .album-turns-table { table-layout: auto; } @media (max-width: 767.98px) { .album-turns-table th:nth-last-child(2), .album-turns-table td:nth-last-child(2) { display: none; } } .album-turns-table tbody tr:nth-child(odd):not(.table-warning) { background-color: var(--surface-2); } .album-turns-table input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0; border: 1px solid var(--line); border-radius: 0.2rem; appearance: none; background-color: var(--surface); cursor: pointer; } .album-turns-table input[type="checkbox"]:checked { background-color: var(--primary); border-color: var(--primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M12.97 4.97a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 1 1 1.06-1.06L7 9.44l4.97-4.97a.75.75 0 0 1 1.06 0z'/%3E%3C/svg%3E"); background-size: 0.65rem; background-position: center; background-repeat: no-repeat; } /* ================================ Admin sidebar (moved from inline ERB into theme.css) Uses project tokens where possible; offcanvas override scoped. ================================ */ :root { --sk-sidebar-bg: #1f2933; --sk-sidebar-active: rgba(240, 138, 52, 0.18); --sk-primary: #f08a34; } .sk-sidebar { width: 260px; background: var(--sk-sidebar-bg); color: #fff; height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; overflow: hidden; } .sk-sidebar__brand { padding: 1rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); display: flex; align-items: center; justify-content: space-between; } .sk-sidebar__brand-left { display:flex; flex-direction:column; min-width:0; } .sk-sidebar__brand-title { font-weight:600; font-size:0.95rem; letter-spacing:.05em; text-transform:uppercase; } .sk-sidebar__brand-version { font-size:0.78rem; color:#9ca3af; margin-top:0.15rem; } .sk-sidebar__brand-version .text-muted { color: inherit !important; } .sk-sidebar__brand-badge { padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.7rem; background:#ffffff; color:#1f2933; } .sk-sidebar__nav { padding:0.75rem 0.75rem 1rem; flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; } .sk-sidebar__section-title { font-size:0.72rem; text-transform:uppercase; letter-spacing:.08em; color:#9ca3af; padding:0.4rem 0.9rem 0.2rem; } .sk-sidebar .nav-link { color: #cbd2da; border-radius: 999px; padding: 0.4rem 0.9rem; margin: 0.1rem 0.4rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 500; text-decoration: none; white-space: nowrap; } .sk-sidebar .nav-link:hover { background: rgba(255,255,255,0.05); color:#fff; } .sk-sidebar .nav-link.active { background: var(--sk-sidebar-active); color:#fff; } .sk-sidebar .nav-link small { font-size:0.7rem; opacity:0.7; margin-left:auto; } .sk-sidebar .nav-link i { font-size: 1.05rem; width: 1.25rem; text-align: center; vertical-align: middle; } .sk-sidebar__footer { padding:0.75rem 1rem 1rem; font-size:0.8rem; color:#9ca3af; border-top:1px solid rgba(255,255,255,0.05); display:flex; flex-direction:column; gap:0.6rem; } .sk-sidebar__logout .nav-link { width:100%; background:transparent; border:0; cursor:pointer; text-align:left; padding-left:0.9rem; padding-right:0.9rem; margin:0; } .sk-sidebar-burger { background: var(--sk-sidebar-bg); color:#fff; border:1px solid rgba(255,255,255,0.12); } .sk-sidebar-burger:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); } .sk-sidebar-burger:focus { box-shadow: 0 0 0 0.2rem rgba(240,138,52,0.25); } /* Force offcanvas (mobile) to look like sidebar, not like site theme. Keep specificity high. */ #skSidebarOffcanvas.sk-sidebar-offcanvas { background: var(--sk-sidebar-bg) !important; color: #fff !important; border-radius: 0 !important; border-color: transparent !important; box-shadow: none !important; --bs-offcanvas-color: #fff; } #skSidebarOffcanvas.sk-sidebar-offcanvas .offcanvas-header, #skSidebarOffcanvas.sk-sidebar-offcanvas .offcanvas-body { background: transparent !important; border-radius: 0 !important; } @media (max-width: 992px) { .sk-sidebar { width:100%; height:auto; position:static; top:auto; overflow:visible; flex-direction:column; } .sk-sidebar__nav { overflow:visible; } } /* Layout helpers moved from application layout inline styles */ .sk-layout-wrapper { display: flex; min-height: 100vh; } .sk-layout-main { flex: 1 1 auto; min-width: 0; } .sk-sidebar-burger { z-index: 1060; } /* Offcanvas vars for sidebar offcanvas (mobile) */ .sk-sidebar-offcanvas { --bs-offcanvas-width: 280px; --bs-offcanvas-bg: var(--sk-sidebar-bg); --bs-offcanvas-border-width: 0; --bs-offcanvas-border-radius: 0; } .sk-sidebar-offcanvas .offcanvas-header { border-color: rgba(255,255,255,0.06) !important; } /* Toast stack z-index centralized here */ #toastStackTR { z-index: 1100; } /* Admin layout helpers (moved from inline styles in layouts/admin.html.erb) */ .admin-layout-wrapper { display: flex; min-height: 100vh; } .admin-main-content { flex: 1; min-width: 0; display: flex; flex-direction: column; } #toastContainer { z-index: 9999; } /* Orders layout specific helpers (moved from admin_orders inline styles) */ .order-form span.status-danger { color: var(--err); } .order-form span.status-ok { color: var(--ok); } .toast-root { z-index: 1080; } /* ================================ Shoots list (orders index, tab: active) Signals: problem (primary), deadline (secondary) ================================ */ #orders-list-active .order-form{ position: relative; } /* Strong but quiet signal: thin left line when there is a problem */ #orders-list-active .order-form.has-problem::before, #orders-list-active .order-form.is-problem::before{ content: ""; position: absolute; left: -10px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--err); } #orders-list-active .problem-wrap{ background: color-mix(in oklab, var(--err), white 92%); border: 1px solid color-mix(in oklab, var(--err), white 75%); border-radius: 12px; padding: 10px 12px; margin-top: 10px; } #orders-list-active .deadline-pill{ display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); } #orders-list-active .deadline-pill.text-bg-danger, #orders-list-active .deadline-pill.text-bg-warning, #orders-list-active .deadline-pill.text-bg-light{ border-color: transparent; } /* Orders list: item layout and local utilities (scoped) */ #orders-list-active .order-form{ padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,.06); } #orders-list-active .order-form__grid{ display:flex; gap:16px; align-items:flex-start; } #orders-list-active .order-form__left{ flex: 0 0 360px; max-width: 420px; min-width: 0; } #orders-list-active .order-form__center{ flex: 1 1 auto; min-width: 0; } #orders-list-active .order-form__right{ flex: 0 0 300px; min-width: 260px; display:flex; flex-direction: column; gap: 10px; align-items: flex-end; } @media (max-width: 992px){ #orders-list-active .order-form__grid{ flex-direction: column; } #orders-list-active .order-form__left, #orders-list-active .order-form__right{ flex: 1 1 auto; max-width: none; min-width: 0; width: 100%; align-items: flex-start; } #orders-list-active .order-form__right{ align-items: flex-start; } } #orders-list-active .order-form__head{ display:flex; flex-wrap: wrap; gap: 10px; align-items: center; } #orders-list-active .order-form__title{ font-size: 20px; line-height: 1.15; margin-top: 6px; } #orders-list-active .order-form__comment{ margin-top: 6px; line-height: 1.25; opacity: .92; } /* Problem block (tweak existing) */ #orders-list-active .problem-wrap{ background: color-mix(in oklab, var(--err), white 92%); border: 1px solid color-mix(in oklab, var(--err), white 75%); border-radius: 12px; padding: 10px 12px; margin-top: 6px; } #orders-list-active .problem-wrap__top{ display:flex; align-items:flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; } #orders-list-active .problem-wrap__label{ font-size: 12px; font-weight: 800; color:var(--muted); text-transform: uppercase; letter-spacing: .02em; } #orders-list-active .problem-wrap__text{ font-size: 16px; line-height: 1.25; color:var(--bs-body-color); } #orders-list-active .order-form__problem-add{ border-radius: 999px; padding: 4px 10px; } #orders-list-active .order-form__meta{ margin-top: 10px; display:flex; gap: 14px; flex-wrap: wrap; row-gap: 6px; } #orders-list-active .order-form__progress{ height: 6px; background: rgba(0,0,0,.08); border-radius: 999px; margin-top: 10px; overflow:hidden; max-width: 640px; } #orders-list-active .order-form__progress > span{ display:block; height:100%; background: color-mix(in oklab, var(--bs-primary), black 10%); } /* Deadline tweaks scoped to item */ #orders-list-active .order-form__deadline .badge{ border-radius: 999px !important; padding: 6px 12px !important; font-size: 13px !important; font-weight: 700; border: 1px solid rgba(0,0,0,.10); background: var(--surface) !important; color: var(--bs-body-color) !important; } #orders-list-active .order-form__deadline .badge.text-bg-danger{ background: color-mix(in oklab,var(--err),white 92%) !important; border-color: color-mix(in oklab,var(--err),white 75%) !important; color: var(--err) !important; } #orders-list-active .order-form__deadline .badge.text-bg-warning{ background: #fff8e6 !important; border-color:#ffe1a1 !important; color:#8a6d00 !important; } #orders-list-active .order-form__deadline .badge.text-bg-success{ background:#eef8f1 !important; border-color:#bfe6cc !important; color:#146c43 !important; } #orders-list-active .order-form__right-top{ display:flex; align-items:center; gap: 10px; justify-content: flex-end; width: 100%; } #orders-list-active .order-form__stop{ color:var(--err); } #orders-list-active .order-form__actions{ display:flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; width: 100%; } #orders-list-active .order-form__actions .btn, #orders-list-active .order-form__pill{ border-radius: 999px; white-space: nowrap; } /* Title + inline icons: move edit + external link near title */ #orders-list-active .oa-item-title-wrap{ display:flex; align-items:center; gap:10px; } #orders-list-active .oa-item-title{ font-size: 22px; font-weight: 800; line-height: 1.15; color: var(--bs-body-color); text-decoration: none; } #orders-list-active .oa-item-title:hover{ text-decoration: underline; text-underline-offset: 3px; } #orders-list-active .oa-item-title-actions{ display:flex; gap:8px; opacity:.45; transition: opacity .15s ease; } #orders-list-active .oa-item-title-wrap:hover .oa-item-title-actions{ opacity:1; } #orders-list-active .oa-icon-hint, #orders-list-active .oa-icon-link{ color: var(--muted); font-size: 15px; line-height: 1; display:inline-flex; align-items:center; } #orders-list-active .oa-icon-link:hover, #orders-list-active .oa-icon-hint:hover{ color: var(--bs-primary); } /* Minimal title-actions tweaks requested */ #orders-list-active .order-form__title-actions .btn{ line-height: 1; text-decoration: none; } #orders-list-active .order-form__title-actions .btn:hover{ color: var(--ink, #111) !important; } @media (min-width: 768px){ #orders-list-active .order-form__title-actions{ opacity: .35; transition: opacity .15s ease; } #orders-list-active .order-form:hover .order-form__title-actions, #orders-list-active .order-form:focus-within .order-form__title-actions{ opacity: 1; } } /* Highlight when navigated-to from Problems list */ #orders-list-active .order-form.is-focus{ box-shadow: 0 10px 28px rgba(0,0,0,0.15); transform: translateY(-3px); border-radius: 10px; transition: box-shadow .24s ease, transform .24s ease; scroll-margin-top: 96px; /* adjust for fixed header height */ } /* Maintenance overlay (moved from shared/_maintenance_banner.html.erb) */ .maintenance-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); z-index: 999999; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.5s ease-out; overflow: hidden; pointer-events: all; } body:has(.maintenance-overlay) { overflow: hidden !important; height: 100vh !important; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .maintenance-content { text-align:center; color:white; max-width:600px; padding:3rem 2rem; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,0.3); animation: slideUp 0.6s ease-out 0.2s both; } @keyframes slideUp { from { opacity:0; transform:translateY(30px);} to { opacity:1; transform:translateY(0);} } .maintenance-icon { font-size:5rem; margin-bottom:1.5rem; animation: rotate 3s ease-in-out infinite; } @keyframes rotate { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(-15deg); } 75% { transform: rotate(15deg); } } .maintenance-title { font-size:2.5rem; font-weight:700; margin-bottom:1rem; color:white; text-shadow:0 2px 10px rgba(0,0,0,0.2); } .maintenance-message { font-size:1.125rem; line-height:1.7; margin-bottom:2rem; color: rgba(255,255,255,0.95); } .maintenance-footer { border-top:1px solid rgba(255,255,255,0.2); padding-top:1.5rem; margin-top:2rem; } .maintenance-footer p { color: rgba(255,255,255,0.9); font-size:1rem; } .maintenance-footer .text-muted { color: rgba(255,255,255,0.7) !important; } .maintenance-footer a { color: #ffd700; text-decoration:none; font-weight:600; } .maintenance-footer a:hover { color:#ffed4e; text-decoration:underline; } @media (max-width:768px) { .maintenance-content { padding:2rem 1.5rem; margin:1rem; } .maintenance-icon { font-size:4rem; } .maintenance-title { font-size:1.75rem; } .maintenance-message { font-size:1rem; } } /* Orders: RAW sort panel styles (moved from view partial) */ #raw-sort-card .card-title { font-size: 1rem; font-weight: 600; color: var(--ink, #212529); margin-bottom: 1rem; } #raw-sort-card .card-title .bi-palette { font-size: 1.25rem; } .raw-form-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; } .raw-submit-btn { white-space:nowrap; } .raw-options { display:flex; flex-wrap:wrap; align-items:center; gap:16px; } #raw-sort-card .form-check { display:flex; align-items:center; gap:0.5rem; margin:0; } #raw-sort-card .form-check-label { white-space:nowrap; font-size:0.875rem; } @media (max-width:768px) { .raw-form-row { gap:10px; } .raw-options { gap:12px; } } @media (max-width:576px) { .raw-form-row { flex-direction:column; align-items:stretch; gap:12px; } .raw-submit-btn { width:100%; justify-content:center; } .raw-options { justify-content:flex-start; gap:16px; } } /* Orders: Retouch sort panel styles (moved from view partial) */ #retouch-sort-card .card-title { font-size: 1rem; font-weight: 600; color: var(--ink, #212529); margin-bottom: 1rem; } #retouch-sort-card .card-title .bi-folder-check { font-size: 1.25rem; } .retouch-form-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; } .retouch-submit-btn { white-space:nowrap; } .retouch-options { display:flex; flex-wrap:wrap; align-items:center; gap:16px; } #retouch-sort-card .form-check { display:flex; align-items:center; gap:0.5rem; margin:0; } #retouch-sort-card .form-check-label { white-space:nowrap; font-size:0.875rem; } @media (max-width:768px) { .retouch-form-row { gap:10px; } .retouch-options { gap:12px; } } @media (max-width:576px) { .retouch-form-row { flex-direction:column; align-items:stretch; gap:12px; } .retouch-submit-btn { width:100%; justify-content:center; } .retouch-options { justify-content:flex-start; gap:16px; } } /* Order list (edit_list) local styles moved from inline */ .order-comment-indicator { color:#cc8a00; font-size:1rem; margin-left:.5rem; } .order-placeholder .accordion-button { opacity: .85; } .order-placeholder .accordion-button::after { filter: grayscale(0.6); } .order-turn-list { margin-top:1rem; } .order-turn-card { border:1px solid var(--border); border-radius:14px; padding:1.25rem; background:var(--section-soft); box-shadow:0 4px 18px rgba(20,20,20,0.05); margin-bottom:1.25rem; } .order-turn-card:last-child { margin-bottom:0; } .order-turn-header { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; } .order-turn-title { font-weight:600; color:var(--ink); } .order-turn-code { font-family:var(--font-mono, "SFMono-Regular", Consolas, monospace); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:color-mix(in oklab, var(--primary), black 40%); background:color-mix(in oklab, var(--primary), white 85%); border-radius:999px; padding:.2rem .7rem; } .order-turn-photo-grid { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1rem; } .order-turn-photo { width:100px; } .order-turn-photo-btn { position:relative; display:block; width:100%; border:0; padding:0; background:transparent; cursor:pointer; } .order-turn-photo-btn:focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:12px; } .order-turn-photo-img { width:100px; height:100px; object-fit:cover; border-radius:12px; border:1px solid color-mix(in oklab, var(--border), black 8%); box-shadow:0 6px 16px rgba(0,0,0,0.12); background:#f8f8f8; } .order-turn-photo-name { margin-top:.4rem; font-size:.75rem; color:var(--muted); text-align:center; line-height:1.1; word-break:break-word; } .order-turn-photo-mark { position:absolute; top:6px; right:6px; background:rgba(255,255,255,.92); border-radius:999px; width:22px; height:22px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.12); } .order-turn-photo-mark .bi-star-fill { color:#f5c200; font-size:.85rem; } .order-turn-no-photos { font-size:.875rem; color:var(--muted); margin-top:1rem; } .order-turn-comment { margin-top:1.25rem; } .order-turn-comment-body { padding:.85rem 1rem; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.8); font-size:.875rem; color:var(--ink); } .order-turn-comment-empty { font-size:.8125rem; color:var(--muted); } @media (max-width: 576px){ .order-turn-photo-grid { gap:.75rem; } } .order-photo-modal .modal-content { background:#000; border:none; border-radius:16px; position:relative; } .order-photo-modal .modal-body { padding:0; background:#000; display:flex; justify-content:center; align-items:center; } .order-photo-modal [data-role="modal-image"] { width:100%; height:auto; max-height:80vh; object-fit:contain; background:#000; } .order-photo-modal .modal-footer { border:0; background:#000; color:rgba(255,255,255,.75); justify-content:flex-start; gap:1rem; } .order-photo-modal .modal-caption { font-size:.8125rem; } .order-photo-modal .modal-footer .btn { border-color:rgba(255,255,255,.4); color:#fff; } .order-photo-modal .modal-footer .btn:hover { border-color:rgba(255,255,255,.6); color:#fff; } .order-photo-modal .btn-close { position:absolute; top:12px; right:12px; filter:invert(1); opacity:.7; } .order-photo-modal .btn-close:hover { opacity:1; } /* Single sales page heading */ .single-sales-heading { font-weight: 600; color: var(--ink); } /* Public orders: gating helpers and small modal utilities */ .gate-wrap { position: relative; } .gate-locked { position: relative; } .gate-locked [data-gated] { filter: grayscale(10%) opacity(.85); } #gatedArea.gate-locked { pointer-events: none; } #gatedArea.gate-unlocked { pointer-events: auto; } .js-toggle-comment.has-comment { opacity: 0.5; } .hello-fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .hello-fade-in.visible { opacity: 1; transform: translateY(0); } /* PIN modal small helpers */ .pin-icon { font-size: 2.5rem; } .pin-input { font-size: 2rem; letter-spacing: 0.5rem; } /* External sort server panel styles */ #external-sort-server-card .card-title { font-size:1rem; font-weight:600; color:var(--ink, #212529); margin-bottom:1rem; } #external-sort-server-card .card-title .bi-server { font-size:1.25rem; } #external-sort-server-card .btn-primary { min-width:140px; } @media (max-width:576px) { #external-sort-server-card .d-flex.align-items-center { flex-direction:column; align-items:flex-start !important; } } .switch { position: relative; display: inline-block; width: 34px; height: 18px; } .switch-input { opacity: 0; width: 0; height: 0; } .switch-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--line); border-radius: 18px; transition: 0.2s; } .switch-slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 2px; bottom: 2px; background-color: var(--surface); border-radius: 50%; transition: 0.2s; } .switch-input:checked + .switch-slider { background-color: var(--primary); } /* Focus state for switches (accessibility) */ .switch-input:focus + .switch-slider { box-shadow: 0 0 0 .18rem color-mix(in oklab, var(--focus), transparent 65%); outline: none; } /* ===== Bottom nav ===== */ .bottom-nav { pointer-events: none; /* чтобы клики проходили только по внутренней панели */ } .bottom-nav-inner { pointer-events: auto; background-color: var(--surface); gap: .25rem; } .bottom-nav-inner .nav-link { border-radius: .75rem; } .bottom-nav-inner .nav-link.active { background-color: rgba(13,110,253,.08); /* bs-primary 8% */ } .bottom-nav .bi { line-height: 1; } /* Отступ снизу, чтобы контент не прятался за панелью на мобиле */ @media (max-width: 576px) { body { padding-bottom: 76px; } } /* Hello form card tweaks (Step 2) */ .hello-card { max-width: 600px; background-color: var(--surface) !important; /* keep card surface consistent with theme */ } @media (max-width: 576px) { .hello-card { margin-top: 1rem !important; margin-bottom: 1rem !important; padding-left: 1rem !important; padding-right: 1rem !important; } } /* Step 4: Inputs styling inside hello-card */ .hello-card .form-control { padding-top: .55rem; padding-bottom: .55rem; font-size: 1.02rem; } .hello-card .form-label { margin-bottom: .35rem; } .hello-card .form-text { margin-top: .25rem; } .switch-input:checked + .switch-slider:before { transform: translateX(16px); } .turn-arrow { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--ink-secondary); border-radius: 50%; transition: background-color 0.2s ease; } .turn-arrow:hover { background-color: color-mix(in oklab, var(--surface), black 5%); text-decoration: none; } .icon-action { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: inherit; } /* Global page background pattern (moved from inline page styles) */ :root { --pattern-opacity: 0.7; /* set by pages when needed */ } body::before { content: ''; position: fixed; inset: 0; background-image: url('/patterns/pattern-white.png'); background-repeat: repeat; background-size: 400px; opacity: var(--pattern-opacity, 0.07); pointer-events: none; /* place behind page content; using -1 ensures it's below positioned content that does not explicitly set negative z-index. Note: html has the page background so the pattern stays visible. */ z-index: -1; } /* Ensure the main app wrapper sits above the pattern */ #app-wrapper { position: relative; } /* ===== Edit arrows overlay ===== */ .child-card { position: relative; } .child-card-wrap { position: relative; } .child-card .choose-photo-btn { display: none; } .child-card .choose-photo-btn button { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 10; opacity: 0.95; backdrop-filter: blur(6px); transition: opacity .2s ease, transform .2s ease; } .child-card .choose-photo-btn button:hover { opacity: 1; transform: translateX(-50%) scale(1.05); } /* Показать кнопку при активном режиме правки */ .edit-mode .child-card .choose-photo-btn { display: block !important; } /* Show button when picker has edit-mode class */ #child-picker.edit-mode .child-card-wrap .choose-photo-btn { display: block !important; z-index: 20; /* above the thumbnail */ pointer-events: auto; } /* Public forms — child cards (square thumbnails) */ .child-card{ display:block; position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--bs-card-border-color, #e5e7eb); text-decoration: none; background: var(--surface-soft, #f5f6f7); } .child-card, .child-card:link, .child-card:visited, .child-card:hover, .child-card:active { text-decoration: none; } /* Thumbnail area — keep square (uses CSS aspect-ratio when available) */ .child-thumb{ width:100%; aspect-ratio:1/1; background:var(--surface-2); position:relative; overflow:hidden; } /* Fallback for browsers without aspect-ratio support: add .no-aspect-ratio to via JS if needed */ .no-aspect-ratio .child-thumb{ height:0; padding-top:100%; } .child-thumb .child-img{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; background:var(--surface-2); } .child-card .child-meta{ padding:.5rem .6rem; } /* State indicator (small circle) placed to the left of the name */ .child-meta{ display:flex; align-items:center; gap:.5rem; } .state-indicator{ width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,0.06); flex:0 0 auto; cursor:pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } .state-indicator.state-done{ background: #16A34A; border-color: rgba(22,163,74,0.9); } .state-indicator.state-prog{ background: #F59E0B; border-color: rgba(245,158,11,0.9); } .state-indicator.state-new{ background: #9CA3AF; border-color: rgba(156,163,175,0.9); } .toast-notice{ position:fixed; right:16px; bottom:80px; background: var(--ok); color: var(--surface); padding:.6rem 1rem; border-radius:var(--fx-radius); box-shadow:0 8px 24px rgba(0,0,0,0.12); opacity:0; transform:translateY(8px); transition:opacity .18s ease, transform .18s ease; z-index:2000; pointer-events:none; } .toast-notice.show{ opacity:1; transform:translateY(0); } /* Batch toast for preview saves */ .batch-toast{ position:fixed; right:16px; bottom:80px; color:var(--surface); padding:.6rem 1rem; border-radius:var(--fx-radius); box-shadow:0 8px 24px rgba(0,0,0,0.12); opacity:0; transform:translateY(8px); transition:opacity .18s ease, transform .18s ease; z-index:2000; pointer-events:none; } .batch-toast.visible{ opacity:1; transform:translateY(0); } .batch-toast-success{ background: var(--ok); } .batch-toast-error{ background: var(--err); } .batch-toast-info{ background: var(--bs-primary); } /* statebar overlay positioned within thumb (deprecated) */ .child-thumb .statebar{ position:absolute; left:8px; bottom:8px; background:rgba(0,0,0,0.5); color:var(--surface); padding:.25rem .5rem; border-radius:6px; font-size:0.85rem; } /* small responsive tweak to tighten spacing on narrow screens */ @media (max-width: 575.98px){ .child-card .child-meta{ padding:.4rem .5rem; } .child-thumb .statebar{ font-size:0.75rem; padding:.2rem .4rem; } } .icon-action:hover { text-decoration: none; } .icon-sm { width: 16px; height: 16px; vertical-align: middle; fill: currentColor; } /* ================================ Компоненты «выбор разворотов/фото» ================================ */ /* Базовая карточка разворота — обновлено для консистентности с демо */ .spread-card { border-radius: var(--fx-radius); border: 1px solid var(--fx-border); background: var(--fx-card); padding: 16px 18px 18px; margin-bottom: 24px; box-shadow: var(--fx-shadow-lg); } .spread-card + .spread-card { margin-top: 24px; } /* Дополнительный (платный) разворот — фиолетовый акцент ВНИМАНИЕ: НЕ добавляем стили для .card-2025 внутри, чтобы избежать двойных рамок Применяется только к самой .spread-card или .extra-spread */ .spread-card.extra-spread { background: var(--fx-extra-bg); border-color: var(--fx-extra-border); box-shadow: 0 0 0 1px rgba(160,139,255,.25), 0 6px 20px rgba(0,0,0,.08); } /* Шапка разворота */ .spread-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; } .spread-head-main { flex: 1; min-width: 0; } .spread-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .spread-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--primary); color: var(--surface); font-weight: 800; font-size: .9rem; } .spread-title { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--bs-body-color); } .spread-meta { margin-top: 2px; font-size: 0.9rem; color: var(--fx-muted); } .spread-desc { margin: 6px 0 0; font-size: 0.9rem; color: var(--bs-body-color); } /* Бейджи для разворотов */ .spread-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--fx-radius-pill, 999px); font-size: 0.78rem; font-weight: 600; white-space: nowrap; } .spread-badge-extra { background: var(--fx-extra-accent); color: var(--surface); } .spread-badge-included, .badge-included { background: var(--fx-included-bg) !important; color: var(--fx-included-color) !important; } /* Правая часть шапки (цена, действия) */ .spread-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; } /* Base pill badge styles — reusable across price badges, delete buttons, etc. */ .pill-badge, .spread-price-pill, .price-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 80px; padding: 6px 10px; border-radius: var(--fx-radius-pill); border: 1px solid rgba(0,0,0,.06); background: var(--surface); font-weight: 600; font-size: 0.9rem; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); line-height: 1; } .spread-price-pill, .price-badge { text-align: right; /* price-specific alignment */ } /* Make header 'Удалить' button match price pill: pill-shape, size and visual weight and ensure controls in header stack vertically like in demo. */ .spread-head-side .btn-group { display: flex; flex-direction: column; gap: 8px; align-items: stretch; } .spread-head-side [data-remove-turn], .spread-head-side .btn[data-remove-turn], .spread-head-side .btn.btn-outline-danger[data-remove-turn], .spread-head-side .btn.btn-sm[data-remove-turn] { /* Inherit base pill-badge styles */ display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 80px !important; padding: 6px 10px !important; border-radius: var(--fx-radius-pill) !important; border: 1px solid rgba(0,0,0,.06) !important; background: var(--surface) !important; font-weight: 600 !important; font-size: 0.9rem !important; line-height: 1 !important; box-shadow: 0 1px 2px rgba(0,0,0,.06) !important; /* Delete-specific styles */ color: var(--bs-danger) !important; transition: transform .12s ease, box-shadow .12s ease; } .spread-head-side [data-remove-turn]:hover, .spread-head-side .btn[data-remove-turn]:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.06); background: var(--surface) !important; color: color-mix(in oklab, var(--bs-danger), black 6%) !important; border-color: rgba(0,0,0,.06) !important; } /* Действия и тело разворота */ .spread-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; } .spread-actions .btn { padding: 6px 8px; } .spread-body { padding: 12px 14px; margin-top: 6px; } /* Адаптация для мобильных */ @media (max-width: 767.98px) { .spread-card { padding: 14px 12px 16px; /* Радиус остаётся 24px везде — консистентность */ } .spread-header { flex-direction: column; align-items: flex-start; } .spread-head-side { align-items: flex-start; } } .tips{ background:var(--surface-2); border:1px solid var(--line); color:var(--ink); border-radius:var(--fx-radius); padding:12px 14px; } /* Галерея примеров разворотов */ .spread-example-label { font-weight: 600; margin-bottom: 8px; } .spread-gallery-wrap { display: flex; gap: 12px; align-items: stretch; margin-bottom: 14px; } .spread-gallery { flex: 1; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scroll-behavior: smooth; } .spread-example-img { flex: 0 0 220px; border-radius: var(--fx-image-radius); background: var(--surface-2); object-fit: cover; height: 140px; box-shadow: var(--fx-image-shadow); } /* Навигация по галерее (стрелки) */ .spread-gallery-nav { display: flex; flex-direction: column; gap: 4px; align-self: center; } /* Yandex dir picker row — make whole row clickable and visually respond on hover */ .ydp-row { cursor: pointer; padding: 6px 8px; border-radius: 6px; } .ydp-row:hover { background: color-mix(in oklab, var(--surface), black 4%); text-decoration: none; /* avoid link-underlines if any */ } .ydp-row:focus { outline: none; box-shadow: 0 0 0 .12rem color-mix(in oklab, var(--focus), black 15%); } .spread-nav-btn { width: 42px; height: 32px; border-radius: var(--fx-radius-pill, 999px); border: 1px solid var(--fx-border); background: var(--surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .spread-nav-btn:hover { background: color-mix(in oklab, var(--fx-card), black 3%); } /* Мобильная адаптация галереи */ @media (max-width: 767.98px) { .spread-gallery-wrap { flex-direction: column; align-items: stretch; } .spread-gallery-nav { flex-direction: row; justify-content: flex-end; } } .price-row{ display:flex; flex-direction:column; gap:0.5rem; } .price-row .price-input-wrapper{ min-width:160px; } .price-input{ width:100%; } .examples{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; } @media (min-width:768px){ .price-row{ flex-direction:row; align-items:center; } .price-row .form-label{ width:45%; margin-bottom:0; } .price-row .price-input-wrapper{ width:55%; } } .example-thumb{ height:112px; width:auto; object-fit:contain; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:4px; } /* Комментарий к развороту */ .spread-comment { margin-top: 4px; margin-bottom: 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--fx-border); font-size: 0.9rem; } /* Выбранные фотографии */ .spread-selected { display: flex; flex-wrap: wrap; gap: 10px; } .spread-photo { width: 200px; border-radius: var(--fx-image-radius); background: var(--surface); border: 1px solid var(--fx-border); box-shadow: var(--fx-image-shadow); overflow: hidden; position: relative; /* for overlay buttons */ } .spread-photo-img { width: 100%; height: 130px; object-fit: cover; display: block; border-radius: var(--fx-image-radius); } /* Overlay action buttons container (positioned over thumbnail images) */ .photo-overlay-actions { position: absolute; bottom: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; pointer-events: none; /* allow clicks to pass through container */ } .photo-overlay-actions > * { pointer-events: all; /* re-enable for buttons */ } /* Overlay action buttons that stick to the image */ .btn-photo-main, .btn-photo-remove { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px; border-radius: var(--fx-radius-pill); background: var(--surface); /* solid like demo, use token */ border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 1px 2px rgba(0,0,0,0.06); font-size: 0.9rem; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; font-weight: 600; line-height: 1; /* match price badge */ justify-content: center; } .btn-photo-main { color: var(--bs-body-color); } .btn-photo-remove { color: var(--bs-danger); } .btn-photo-main i { margin-right: 6px; } .btn-photo-remove i { margin-left: 0; } .btn-photo-main:hover { transform: translateY(-2px); color: var(--bs-warning); box-shadow: 0 6px 18px rgba(0,0,0,0.06); } .btn-photo-remove:hover { transform: translateY(-2px); color: color-mix(in oklab, var(--bs-danger), black 6%); box-shadow: 0 6px 18px rgba(0,0,0,0.06); } .btn-photo-main:disabled, .btn-photo-remove:disabled { opacity: .45; cursor: not-allowed; transform: none; } /* Ensure thumbnail wrapper supports absolute overlays (turn thumbnails) */ .turn-thumb-wrap { position: relative; } .spread-photo-foot { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; /* slightly larger for pill look */ min-width: 72px; /* compact but consistent with other pills */ border-radius: var(--fx-radius-pill); background: var(--surface); /* solid like demo */ border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 6px 18px rgba(0,0,0,0.06); font-size: 0.95rem; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; font-weight: 700; justify-content: center; } .btn-photo-main { color: var(--bs-body-color); } .btn-photo-remove { color: var(--bs-danger); } .btn-photo-main i { margin-right: 6px; } .btn-photo-remove i { margin-left: 0; } .btn-photo-main:hover { transform: translateY(-2px); color: var(--bs-warning); } .btn-photo-remove:hover { transform: translateY(-2px); color: color-mix(in oklab, var(--bs-danger), black 6%); opacity: 1; } .btn-photo-main:disabled, .btn-photo-remove:disabled { opacity: .45; cursor: not-allowed; transform: none; } .spread-photo-remove { opacity: .7; color: var(--fx-muted); } .spread-photo-remove:hover { opacity: 1; color: var(--bs-danger); } /* Старые классы (сохраняем для обратной совместимости) */ .chosen-row{ display:flex; gap:10px; overflow:auto; padding-bottom:4px; } .photo-tile{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:6px; } .photo-thumb{ height:120px; width:auto; object-fit:contain; background:var(--surface); border:1px solid var(--line); border-radius:var(--fx-image-radius); } img.lazy-pending{ opacity:0; background:color-mix(in oklab,var(--surface),black 4%); } img.lazy-loaded{ opacity:1; transition:opacity .2s ease-in-out; background:transparent; } .photo-tools{ display:flex; gap:8px; align-items:center; } .photo-tools .btn-icon{ border:1px solid var(--line); background:var(--surface); border-radius:var(--fx-radius); padding:6px; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; } .photo-tools .btn-icon[aria-pressed="true"]{ border-color:color-mix(in oklab,var(--primary),white 40%); box-shadow:0 0 0 2px color-mix(in oklab,var(--primary),white 82%); } /* Photo tips rail (2 on mobile, 4 on desktop) */ .tips-scroll{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:8px; } .tips-scroll::-webkit-scrollbar{ height:8px; } .tip-item{ flex:0 0 calc((100% - 12px)/2); scroll-snap-align:start; } @media (min-width: 992px){ .tip-item{ flex-basis: calc((100% - 3*12px)/4); } } .tip-item img{ width:100%; height:100%; object-fit:cover; border-radius:var(--fx-image-radius); } .tip-caption{ line-height:1.25; } /* Spread tips (внутри карточек разворотов) — авто-ширина карточек, фикс-высота изображений, увеличенный зазор и тени */ .spread-tips .tips-scroll{ display:flex; gap:32px; /* увеличенный зазор, синхронизирован с JS */ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:8px; } .spread-tips .tips-scroll::-webkit-scrollbar{ height:8px; } .spread-tips .tip-item{ flex:0 0 auto; scroll-snap-align:start; } .spread-tips .tip-img{ display:block; height:140px; /* базовая высота */ width:auto; /* ширина по пропорциям */ object-fit:cover; border-radius:var(--fx-image-radius); /* унифицировано: 24px */ background: var(--bg); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.08); } @media (min-width: 992px){ .spread-tips .tip-img{ height:140px; } } /* Блоковые уведомления (сдержанные) */ .alert-ok{ background:color-mix(in oklab,var(--ok),white 92%); border:1px solid color-mix(in oklab,var(--ok),white 70%); color:color-mix(in oklab,var(--ok),black 22%); border-radius:var(--fx-radius); } .alert-warn{ background:color-mix(in oklab,var(--warn),white 94%); border:1px solid color-mix(in oklab,var(--warn),white 74%); color:color-mix(in oklab,var(--warn),black 26%); border-radius:var(--fx-radius); } .alert-err{ background:color-mix(in oklab,var(--err),white 94%); border:1px solid color-mix(in oklab,var(--err),white 74%); color:color-mix(in oklab,var(--err),black 24%); border-radius:var(--fx-radius); } /* ================================ Секции выбора фото / заголовки ================================ */ .turn-section{ padding:16px 0; background:var(--bg); } .turn-head{ display:flex; align-items:flex-start; gap:12px; padding:12px 0; } .turn-num{ width:44px; height:44px; border-radius:var(--fx-radius); background:color-mix(in oklab,var(--surface),black 4%); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-weight:800; } .turn-titles .turn-hint{ color:var(--muted); font-size:.95rem; } .turn-actions{ display:flex; flex-wrap:wrap; gap:.5rem; } /* Thumbnails under each turn (selected photos) */ .turn-thumbs { display: flex; flex-wrap: wrap; gap: 8px; /* works well with Bootstrap spacing */ align-items: flex-start; } /* Highlight invalid spread card: subtle red glow + border change */ .highlight-invalid { box-shadow: 0 0 0 4px rgba(220,53,69,0.12) !important; transition: box-shadow 0.25s ease, border-color 0.25s ease; } /* Button flash animation for focus on '+ Выбрать фото' */ .btn-flash { animation: btnFlashAnim 0.36s ease-in-out; } @keyframes btnFlashAnim { 0% { transform: translateY(0); box-shadow: none; } 40% { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(255,193,7,0.45); } 100% { transform: translateY(0); box-shadow: none; } } .turn-thumb { height: 270px; width: auto; object-fit: cover; border-radius: var(--fx-image-radius); /* унифицировано: 24px */ cursor: pointer; max-width: 100%; /* subtle shadow to separate from background */ box-shadow: 0 1px 3px rgba(0,0,0,0.08); } /* Optional focus outline for accessibility when navigating via keyboard */ .turn-thumb:focus { outline: 2px solid rgba(13,110,253,0.6); /* bootstrap primary */ outline-offset: 2px; } /* Плитка */ .tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; } @media (min-width: 768px){ .tiles{ grid-template-columns:repeat(3,1fr); } } @media (min-width: 992px){ .tiles{ grid-template-columns:repeat(4,1fr); } } .tile{ position:relative; overflow:hidden; border-radius:var(--fx-radius); border:1px solid var(--line); background:#000; } .tile-img{ width:100%; height:100%; aspect-ratio:4/5; object-fit:cover; display:block; } .tile-toolbar{ position:absolute; inset:auto 8px 8px 8px; display:flex; gap:.35rem; justify-content:center; background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0)); padding:.35rem .4rem; border-radius:var(--fx-radius); } .icon-btn{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:var(--fx-radius); border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); color:var(--surface); } .icon-btn:hover{ background:rgba(255,255,255,.18); } .tile-caption{ position:absolute; left:8px; top:8px; padding:.2rem .45rem; font-size:.85rem; color:var(--surface); background:rgba(0,0,0,.45); border-radius:var(--fx-radius); } /* ================================ Состояния/бейджи ================================ */ .statebar{ position:absolute; right:8px; left:auto; top:8px; font-size:.75rem; padding:.15rem .5rem; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--muted); } .statebar.state-done{ background:color-mix(in oklab,var(--ok),white 92%); color:color-mix(in oklab,var(--ok),black 22%); } .statebar.state-prog{ background:color-mix(in oklab,var(--warn),white 94%); color:color-mix(in oklab,var(--warn),black 26%); } .statebar.state-new{ background:color-mix(in oklab,var(--primary),white 92%); color:var(--bs-heading-color); } /* ================================ Мелкие элементы ================================ */ .brand-badge{ width:32px; height:32px; border-radius:var(--fx-radius); background:var(--primary); display:inline-flex; align-items:center; justify-content:center; color:var(--surface); box-shadow:none; } .container-narrow{ max-width:960px; } /* Мобильная таб-панель: плоская */ .mobile-tabbar{ position:fixed; left:0; right:0; bottom:0; background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -1px 0 rgba(0,0,0,.02); padding:8px env(safe-area-inset-right) calc(8px + env(safe-area-inset-bottom)) env(safe-area-inset-left); z-index:1030; } .mobile-tabbar .btn-tab{ flex:1 1 25%; display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 4px; border-radius:var(--fx-radius); color:var(--ink); text-decoration:none; } .mobile-tabbar .btn-tab:active{ background:color-mix(in oklab,var(--surface),black 4%); } /* Small utility to allow flex content to shrink inside containers (used on preview table TDs) This mirrors the `min-width:0` requirement commonly needed for flex children inside constrained parents. */ .min-w-0{ min-width: 0 !important; } .mobile-tabbar .icon{ font-size:20px; line-height:1; } .badge-dot{ position:absolute; top:2px; right:18px; width:8px; height:8px; border-radius:50%; background:var(--primary); } .badge-num{ position:absolute; top:0; right:12px; min-width:18px; height:18px; padding:0 4px; border-radius:999px; background:var(--ink); color:var(--surface); font-size:11px; line-height:18px; text-align:center; } @media(min-width:992px){ .mobile-tabbar{ display:none; } } /* ================================ Степпер (менее «кричащий») ================================ */ .stepper{ display:flex; gap:12px; align-items:center; } .step{ display:flex; align-items:center; gap:8px; color:color-mix(in oklab,var(--muted),black 10%); } .step .bubble{ width:32px; height:32px; border-radius:50%; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--muted); } .step.active{ color:var(--ink); } .step.active .bubble{ border-color:var(--primary); color:var(--primary); } .step.done .bubble{ background:var(--primary); border-color:var(--primary); color:var(--surface); } /* ================================ Анимации (оставляем минимальные) ================================ */ .invalid-feedback{ font-size:.875rem; } .tooltip .tooltip-inner{ font-size:.875rem; padding:.5rem .75rem; max-width:260px; text-align:left; } .popover{ --bs-popover-max-width: 280px; } :target{ animation: anchor-hi 1.2s ease-in-out 1; } @keyframes anchor-hi{ 0%{ box-shadow:0 0 0 0 rgba(37,99,235,.00) } 30%{ box-shadow:0 0 0 .35rem rgba(37,99,235,.20) } 100%{ box-shadow:0 0 0 0 rgba(37,99,235,.00) } } .fav-bounce{ animation: fav-bounce 420ms cubic-bezier(.28,.84,.42,1.1) 1; } @keyframes fav-bounce{ 0%{ transform: translateY(0); } 25%{ transform: translateY(-6px); } 50%{ transform: translateY(0); } 75%{ transform: translateY(-3px); } 100%{ transform: translateY(0); } } /* Styles moved from app/views/orders/edit.html.erb (page-specific helpers) */ .page{max-width:1300px} .section{padding:16px 20px; background:var(--fx-card); border:1px solid var(--fx-border); border-radius:var(--fx-radius); box-shadow:var(--fx-shadow)} .subsection{padding:12px 16px; background:var(--fx-card); border:1px solid var(--fx-border); border-radius:0; box-shadow:none} .label-muted{font-size:.875rem; color:var(--muted)} .form-help{font-size:.8125rem; color:var(--muted)} .headline{font-weight:700; color:var(--ink)} .table-compact td,.table-compact th{padding:.5rem .75rem} .badge-on{background:color-mix(in oklab, var(--ok), white 86%); color:color-mix(in oklab, var(--ok), black 20%); font-weight:600} .badge-off{background:color-mix(in oklab, var(--err), white 90%); color:color-mix(in oklab, var(--err), black 12%); font-weight:600} .desc{background:color-mix(in oklab, var(--card), white 0%); border:1px dashed var(--border); border-radius:var(--fx-radius)} .turn-row-deleted{opacity:.4;text-decoration:line-through} .prices-panel{ border-color: color-mix(in oklab, var(--primary), white 65%); } .prices-panel .form-label{ color: var(--ink); font-weight:600; font-size: 12pt;} .prices-panel .input-group-text{ background: color-mix(in oklab, var(--primary), white 90%); border-color: color-mix(in oklab, var(--primary), white 65%); } /* Center helpers for indicators */ .turn-indicator{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-width:56px; } .turn-indicator .badge{ display:inline-block; } .turn-indicators-cell{ text-align:center; vertical-align:middle; } .turn-hints-indicator img, .turn-hints-indicator i{ display:block; margin:0 auto; } .hint-card .ratio{ max-width:128px; width:128px; } .hint-card .ratio img{ width:100%; height:100%; object-fit:cover; } /* ================================ Герой-блок (без градиентов, просто разрыв) ================================ */ .hero{ color: var(--ink); padding: clamp(48px, 7vw, 88px) 0 clamp(32px, 5vw, 64px); } .hero-bleed{ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: var(--surface); border-bottom:1px solid var(--line); } /* ================================ Модалка галереи — режим выбора разворота ================================ */ #gallery.gallery--select-mode #btnFinish{ display:none !important; } #gallery.gallery--select-mode #btnResetSelection{ display:inline-flex !important; } #gallery.gallery--select-mode #btnFinishSelect{ display:inline-flex !important; } #gallery.gallery--select-mode .masonry-item{ position:relative; } #gallery.gallery--select-mode .photo-actions{ position:absolute; left:8px; right:auto; bottom:8px; top:auto; } /* ================================ Расширенные размеры модалок Bootstrap 5 — проектные токены Добавляем `--bs-modal-width-m` (medium) и переопределяем стандартные значения для удобства: sm, md, lg, xl. Мы используем CSS custom properties чтобы привязать ширины к токенам темы. -------------------------------- */ :root { --bs-modal-width-sm: 400px; --bs-modal-width-m: 600px; --bs-modal-width-lg: 900px; --bs-modal-width-xl: 1100px; } @media (min-width: 576px) { .modal-sm { --bs-modal-width: var(--bs-modal-width-sm); } .modal-md { --bs-modal-width: var(--bs-modal-width-m); } } @media (min-width: 992px) { .modal-lg { --bs-modal-width: var(--bs-modal-width-lg); } .modal-xl { --bs-modal-width: var(--bs-modal-width-xl); } } #gallery.gallery--select-mode .photo-zoom{ position:absolute; right:8px; bottom:8px; top:auto; } /* Рамки статусов (будут назначаться классами из JS) */ .tile-on-current{ outline:6px solid var(--primary); outline-offset:-3px; } .tile-on-other{ outline:3px solid color-mix(in oklab, var(--line), black 40%); outline-offset:-3px; } .tile-selected-temp{ outline:3px dashed var(--primary); outline-offset:-3px; } /* When a tile is occupied by a photo assigned to another turn, make the image dimmer and disable transitions so the change is immediate (no flicker/animation). */ #gallery.gallery--select-mode .masonry-item.tile-on-other img{ opacity: .5 !important; transition: none !important; -webkit-transition: none !important; } .filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; background: var(--bs-gray-100); border-radius: .5rem; padding: .5rem .75rem; } .filters button, .filters input[type="checkbox"] { margin-right: .25rem; } .child-card.is-selected { outline: 2px solid var(--primary); box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.35); } /* ===== Hello callout ===== */ #hello.hello-callout{ background: var(--bs-card-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); border-left: 6px solid color-mix(in oklab, var(--bs-primary) 25%, transparent); border-radius: 18px; box-shadow: 0 4px 12px rgba(17,17,17,.08); padding: 20px 22px; } /* Заголовок */ #hello h1{ color: var(--bs-body-color); font-weight: 700; line-height: 1.25; text-wrap: balance; } /* Список */ #hello ul{ padding-left: 1.15rem; /* висячая отступка */ margin: .25rem 0 0; list-style: disc; list-style-position: outside; } #hello ul li{ margin: .5rem 0; font-size: clamp(16px, 0.35vw + 15px, 18px); line-height: 1.6; max-width: 68ch; /* комфортная длина строки на десктопе */ height: auto !important; /* снятие хардкодов */ width: auto !important; box-sizing: border-box; } #hello ul li::marker{ color: color-mix(in oklab, var(--bs-primary) 30%, #8F6E4B); /* мягкий акцент-маркер */ font-size: 1.15em; } /* Дедлайн – мягкая плашка, не кричит */ #hello .hello-deadline{ background: color-mix(in oklab, var(--bs-primary) 10%, transparent); border: 1px solid color-mix(in oklab, var(--bs-primary) 25%, transparent); border-radius: .45rem; padding: .05rem .4rem; white-space: nowrap; } /* Ссылки и разделитель */ #hello a{ text-decoration-thickness: .08em; text-underline-offset: .18em; } #hello .sep{ color: var(--bs-secondary); margin: 0 .25rem; } /* Мобильные правки */ @media (max-width: 576px){ #hello.hello-callout{ border-radius: 16px; padding: 16px 18px; } #hello .simple-list{ padding-left: 1rem; } #hello .simple-list li{ margin: .6rem 0; max-width: 100%; } } /* ================================ Addon Cards (spread types) ================================ */ /* Обёртка секции */ .addons-block { padding: 4px 0 12px; } /* Сетка для карточек */ .sheet-grid { display: grid; gap: 10px; } @media (min-width: 768px) { .sheet-grid { grid-template-columns: 1fr 1fr; } } /* Карточка допа */ .addon-card { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; margin-bottom: 0; border-radius: 18px; border: 1px solid var(--fx-border); background: var(--fx-card); box-shadow: 0 2px 6px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.03); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease, background-color .15s ease; } .addon-card:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(0,0,0,.06); } .addon-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.08); } /* Состояние "выбрано" */ .addon-card.is-selected { border-color: var(--fx-extra-border); background: linear-gradient(135deg, #FFFDF8, #F3EFFF); box-shadow: 0 0 0 1px rgba(124,92,252,.28), 0 4px 14px rgba(0,0,0,.12); } /* Миниатюра слева */ .addon-thumb { flex: 0 0 60px; height: 60px; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,.1); background: var(--surface-2); } .addon-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Текстовая часть */ .addon-main { flex: 1; min-width: 0; } .addon-title { font-weight: 700; font-size: 0.98rem; color: var(--bs-body-color); } .addon-subtitle { font-size: 0.88rem; color: var(--fx-muted); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } /* Цена справа */ .addon-price-pill { margin-left: 8px; } .addon-price { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(0,0,0,.06); background: var(--surface); font-weight: 600; font-size: 0.9rem; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); } /* Низ карточки: "Выбрать / Добавлено" и теги */ .addon-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; } .addon-cta { display: inline-flex; align-items: center; justify-content: center; padding: 7px 14px; border-radius: 999px; font-weight: 600; font-size: 0.9rem; background: var(--bs-primary); color: var(--surface); box-shadow: 0 2px 6px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.06); } /* вид "Добавлено" */ .addon-card.is-selected .addon-cta { background: transparent; color: var(--bs-primary); box-shadow: none; border: 1px solid rgba(224,122,63,.4); } /* опциональный бейдж "Рекомендуем" */ .addon-tag { padding: 3px 9px; border-radius: 999px; background: var(--fx-extra-bg); color: var(--bs-body-color); font-size: 0.78rem; font-weight: 600; } /* Мобильные мелочи */ @media (max-width: 575.98px) { .addon-card { padding: 10px 12px; } .addon-thumb { flex-basis: 56px; height: 56px; } } /* Inline spread types section (replaces offcanvas) */ .spread-types-inline { margin-top: 1rem; scroll-margin-top: 2rem; } .spread-types-inline .card-2025 { animation: slideDown 0.3s ease-out; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* ===== Кнопка-разделитель между разворотами ===== */ .spread-inserter { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; } .spread-inserter-line { height: 1px; background: linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.12), rgba(0,0,0,.06)); } .spread-inserter-cta { background: var(--surface); border: 1px solid rgba(0,0,0,.08); border-radius: 999px; padding: .5rem .75rem; text-align: center; } .btn-add-spread { display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px; padding-inline: 1rem 1.1rem; font-weight: 600; position: relative; } /* Плюс — аккуратный кружок */ .btn-add-spread .btn-plus { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: rgba(255,255,255,.25); line-height: 1; font-size: 1rem; } /* Небольшой «пульс» чтобы кнопка не терялась (мягкий, не мешает) */ .btn-add-spread::after { content: ""; position: absolute; inset: -6px; border-radius: 999px; box-shadow: 0 0 0 0 rgba(13,110,253,.25); /* использует цвет primary */ animation: spreadPulse 2.6s ease-out infinite; pointer-events: none; opacity: .8; } @keyframes spreadPulse { 0% { box-shadow: 0 0 0 0 rgba(13,110,253,.25); } 70% { box-shadow: 0 0 0 14px rgba(13,110,253,0); } 100% { box-shadow: 0 0 0 14px rgba(13,110,253,0); } } /* Мобильная адаптация: делаем шире и убираем лишнюю «декорацию» */ @media (max-width: 576px) { .spread-inserter { grid-template-columns: 1fr; gap: .5rem; } .spread-inserter-line { display: none; } .spread-inserter-cta { width: 100%; border-radius: 16px; } .btn-add-spread { width: 100%; justify-content: center; padding-block: .625rem; } } /* ================================ CTA: Начать выбор фоток ================================ */ #public-orders-start-photos .cta-start-photos { --bs-btn-bg: var(--primary, #E07A3F); --bs-btn-border-color: var(--primary, #E07A3F); --bs-btn-hover-bg: var(--primary-hover, #D66A33); --bs-btn-hover-border-color: var(--primary-hover, #D66A33); --bs-btn-color: var(--surface); --bs-btn-padding-y: 1rem; --bs-btn-padding-x: 1.25rem; --bs-btn-border-radius: 1rem; --bs-btn-font-size: 1.125rem; --bs-btn-font-weight: 600; box-shadow: 0 8px 24px rgba(224, 122, 63, 0.28); transition: transform 0.2s ease, box-shadow 0.2s ease; } #public-orders-start-photos .cta-start-photos:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(224, 122, 63, 0.36); } #public-orders-start-photos .cta-start-photos:active { transform: translateY(0); } .cta-start-photos:focus-visible { outline: 3px solid #ffd666; outline-offset: 2px; } /* Липкая мобильная кнопка */ .mobile-cta-wrapper { background: linear-gradient(to top, rgba(247,245,242,0.98) 0%, rgba(247,245,242,0.95) 70%, transparent 100%); backdrop-filter: blur(8px); z-index: 1000; pointer-events: none; } .mobile-cta-wrapper .cta-start-photos { pointer-events: auto; --bs-btn-bg: var(--primary, #E07A3F); --bs-btn-border-color: var(--primary, #E07A3F); --bs-btn-hover-bg: var(--primary-hover, #D66A33); --bs-btn-hover-border-color: var(--primary-hover, #D66A33); --bs-btn-color: var(--surface); --bs-btn-padding-y: 0.875rem; --bs-btn-padding-x: 1.25rem; --bs-btn-border-radius: 1rem; --bs-btn-font-size: 1.0625rem; --bs-btn-font-weight: 600; box-shadow: 0 4px 16px rgba(224, 122, 63, 0.32); } .mobile-cta-wrapper .cta-start-photos:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(224, 122, 63, 0.4); } #child-picker-controls.filters {background-color: var(--fx-bg); } .progress-done { background-color: var(--fx-extra-accent); } /* Photo header (public order) */ .photo-header__thumb { width: 135px; height: 180px; border-radius: 0.75rem; /* matches rounded-3 */ overflow: hidden; background-color: var(--extra-bg); display: inline-block; } .photo-header__img { display: block; width: 100%; height: 100%; object-fit: cover; } .photo-header__caption { margin-top: 0.5rem; font-size: .875rem; color: var(--muted); } a { color: var(--bs-primary); } /* Зона загрузки для Яндекс.Диска */ .yadisk-dropzone { border: 1px dashed var(--fx-border); border-radius: var(--fx-radius); background: var(--fx-card); box-shadow: var(--fx-shadow); padding: 1.5rem; min-height: 96px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, transform .1s ease; } .yadisk-dropzone-inner { max-width: 320px; } /* hover/focus — тёплый оранжевый акцент */ .yadisk-dropzone:hover, .yadisk-dropzone:focus-within { border-color: var(--bs-primary); background: var(--fx-bg); /* чуть теплее var(--fx-bg) */ box-shadow: var(--fx-shadow-lg); transform: translateY(-1px); } /* Состояние "тащат файл" — можно ставить класс dragover из JS */ .yadisk-dropzone.dragover { border-color: var(--fx-extra-accent); background: var(--fx-extra-bg); } .action-tile { border-radius: var(--fx-radius-lg, 999px); background-color: var(--fx-surface-subtle, #fff); border: 1px solid var(--fx-border-soft, #e5e5e5); padding: 0.85rem 1rem; box-shadow: var(--fx-shadow-soft, 0 1px 2px rgba(15, 23, 42, 0.06)); transition: transform 0.08s ease, box-shadow 0.08s ease, border-color 0.08s ease, background-color 0.08s ease; } .action-tile:hover { transform: translateY(-1px); background-color: var(--fx-surface-hover, #fffaf5); border-color: var(--bs-primary); box-shadow: var(--fx-shadow-md, 0 6px 18px rgba(15, 23, 42, 0.12)); } .action-icon { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--fx-pill-bg, rgba(253, 186, 116, 0.16)); } .action-icon i { font-size: 1.25rem; color: var(--bs-primary); } #orders-list-active .order-form.has-problem, #orders-list-active .order-form.is-problem{ position: relative; padding-left: 12px; /* место под полоску */ border-left: 0; /* убираем второй маркер */ } #orders-list-active .order-form.has-problem::before, #orders-list-active .order-form.is-problem::before{ content:""; position:absolute; left:0; /* ВНУТРИ блока */ top:10px; bottom:10px; width:3px; border-radius: 3px; background: var(--err); }