/* ============================================================ Дизайн-токены диспетчерской (Ecosin) Светлая тема = эстетика Ecosin (alinaecosin.ru). Тёмная тема = нейтральная угольная с зелёным акцентом (для долгой работы в инбоксе). Переключение через [data-theme="dark"] на . ============================================================ */ :root { /* Шрифты (из источника Ecosin) */ --font-display: "Cormorant Garamond", "Times New Roman", serif; --font-body: "Onest", "Helvetica Neue", system-ui, -apple-system, sans-serif; /* Радиусы */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; /* Размеры */ --max-w: 1280px; --pad-x: clamp(16px, 3vw, 32px); /* Тени (мягкие, тёплые) */ --shadow-sm: 0 1px 2px rgba(42,36,24,0.04), 0 1px 1px rgba(42,36,24,0.03); --shadow-md: 0 4px 12px rgba(42,36,24,0.06), 0 2px 4px rgba(42,36,24,0.04); /* === СВЕТЛАЯ ТЕМА (Ecosin) — значения по умолчанию === */ --bg: #faf6ed; /* paper */ --bg-soft: #f5ede0; /* cream */ --bg-warm: #ede2cf; /* cream-warm */ --surface: #ffffff; /* карточки */ --surface-2: #faf6ed; /* вложенные блоки */ --border: rgba(42,36,24,0.12); --border-strong:rgba(42,36,24,0.22); --text: #2a2418; /* ink */ --text-soft: #4d4538; /* ink-soft */ --text-muted: #8a8170; --accent: #1f4a2c; /* forest — главный бренд */ --accent-deep: #0f2c1a; --accent-soft: #2f5d3b; --on-accent: #f5ede0; /* текст на акценте — кремовый */ --sand: #d8c6a3; --olive: #6f7e4a; --terra: #b86b4a; /* для редких акцентов / срочного */ /* Состояния (входящие/исходящие, успех, ошибка) */ --msg-in-bg: #ede2cf; --msg-in-fg: #2a2418; --msg-out-bg: #1f4a2c; --msg-out-fg: #f5ede0; --ok-bg: #e6efe0; --ok-fg: #2f5d3b; --err-bg: #f4dccf; --err-fg: #8a3a1f; --badge-bg: #1f4a2c; --badge-fg: #f5ede0; --focus-ring: 0 0 0 3px rgba(31,74,44,0.25); } /* === ТЁМНАЯ ТЕМА — нейтральная угольная с зелёным акцентом === */ [data-theme="dark"] { --bg: #1a1814; /* угольный с тёплой подмесью */ --bg-soft: #211e19; --bg-warm: #262219; --surface: #23201b; --surface-2: #2b2721; --border: rgba(245,237,224,0.10); --border-strong:rgba(245,237,224,0.18); --text: #ede2cf; --text-soft: #c2b9a6; --text-muted: #8a8170; --accent: #6f9a78; /* более светлый лесной для контраста на тёмном */ --accent-deep: #4a7a55; --accent-soft: #8db595; --on-accent: #0f2c1a; --sand: #b9a682; --olive: #93a072; --terra: #d59276; --msg-in-bg: #2b2721; --msg-in-fg: #ede2cf; --msg-out-bg: #2f5d3b; --msg-out-fg: #f5ede0; --ok-bg: #1f3a26; --ok-fg: #8db595; --err-bg: #3a2017; --err-fg: #e3a784; --badge-bg: #2f5d3b; --badge-fg: #f5ede0; --focus-ring: 0 0 0 3px rgba(141,181,149,0.30); --shadow-sm: 0 1px 2px rgba(0,0,0,0.30); --shadow-md: 0 4px 12px rgba(0,0,0,0.35); } /* ============================================================ Базовые стили ============================================================ */ * { box-sizing: border-box; } html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; min-height: 100vh; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; margin: 0; text-wrap: balance; } h1 { font-size: clamp(28px, 4vw, 40px); } h2 { font-size: 22px; } h3 { font-size: 18px; } p { margin: 0; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .muted { color: var(--text-muted); } .small { font-size: 13px; } .link { color: var(--accent); } .link:hover { text-decoration: underline; } /* ============================================================ Layout ============================================================ */ .container { max-width: var(--max-w); margin: 0 auto; padding: 32px var(--pad-x); } .topbar { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 16px 0 24px; border-bottom: 1px solid var(--border); margin-bottom: 24px; flex-wrap: wrap; gap: 12px; } .topbar strong { font-family: var(--font-display); font-size: 20px; font-weight: 500; } .topbar-brand { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } .nav { display: flex; align-items: center; gap: 18px; } .nav .link { font-size: 14px; } /* Бургер — скрыт на десктопе, показывается в мобильном media-блоке */ .nav-burger { display: none; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); color: var(--text); font-size: 20px; line-height: 1; padding: 6px 12px; } /* Выпадающее «Настройки» (на базе
) */ .nav-group { position: relative; } .nav-group > summary { list-style: none; cursor: pointer; font-size: 14px; color: var(--accent); display: inline-flex; align-items: center; gap: 4px; user-select: none; } .nav-group > summary::-webkit-details-marker { display: none; } .nav-group > summary::after { content: "▾"; font-size: 11px; opacity: 0.7; } .nav-group[open] > summary::after { content: "▴"; } .nav-menu { position: absolute; right: 0; top: calc(100% + 8px); display: flex; flex-direction: column; gap: 2px; min-width: 170px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 8px; z-index: 40; } .nav-menu .link { padding: 8px 10px; border-radius: var(--radius-sm); } .nav-menu .link:hover { background: var(--bg-warm); text-decoration: none; } /* Числовой бейдж на вкладке (непрочитанные диалоги / заказы в работе) */ .nav-badge { display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 6px; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; vertical-align: middle; background: var(--accent); color: var(--on-accent); border-radius: var(--radius-pill); } .nav-badge[hidden] { display: none; } /* ============================================================ Карточки ============================================================ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); } .card + .card { margin-top: 16px; } /* ============================================================ Бейджи (роль, источник канала) ============================================================ */ .badge { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; margin-left: 8px; background: var(--bg-warm); color: var(--text-soft); border: 1px solid var(--border); } .badge-expert { background: var(--accent); color: var(--on-accent); border-color: transparent; } .badge-manager { background: var(--sand); color: var(--text); border-color: transparent; } .badge-src { background: var(--bg-warm); color: var(--accent); border-color: var(--border); } /* ============================================================ Формы и кнопки (пилюли как у Ecosin) ============================================================ */ label { display: block; margin: 14px 0 6px; font-size: 13px; font-weight: 500; color: var(--text-soft); letter-spacing: 0.01em; } input[type=text], input[type=password], input:not([type]), textarea { width: 100%; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: inherit; font-size: 15px; transition: border-color .15s, box-shadow .15s; } input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); } input::placeholder { color: var(--text-muted); } button { font-family: inherit; cursor: pointer; } .btn, button[type=submit] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; margin-top: 16px; border: 0; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: 14px; font-weight: 500; letter-spacing: 0.01em; transition: background .15s, transform .05s; } .btn:hover, button[type=submit]:hover { background: var(--accent-deep); } .btn:active, button[type=submit]:active { transform: translateY(1px); } .btn-ghost { background: transparent; border: 1px solid var(--accent); color: var(--accent); } .btn-ghost:hover { background: var(--accent); color: var(--on-accent); } .btn-sm { padding: 8px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 500; margin: 0; } .btn-sm:hover { background: var(--bg-warm); } /* ============================================================ Алёрты ============================================================ */ .alert { padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: 16px; font-size: 14px; border: 1px solid transparent; } .alert.ok { background: var(--ok-bg); color: var(--ok-fg); border-color: rgba(47,93,59,0.18); } .alert.error { background: var(--err-bg); color: var(--err-fg); border-color: rgba(184,107,74,0.22); } /* ============================================================ Auth (страница входа) ============================================================ */ .auth-card { max-width: 400px; margin: 60px auto; } /* ============================================================ Таблица команды ============================================================ */ .tbl { width: 100%; border-collapse: collapse; font-size: 14px; } .tbl th, .tbl td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--border); } .tbl th { color: var(--text-muted); font-weight: 500; font-size: 13px; } /* ============================================================ Inbox двухколоночный ============================================================ */ .container.inbox-container { max-width: 1280px; } .inbox { display: grid; grid-template-columns: 340px 1fr; gap: 16px; height: calc(100vh - 180px); min-height: 500px; } .dialog-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow-y: auto; box-shadow: var(--shadow-sm); } .list-head { padding: 16px 18px; border-bottom: 1px solid var(--border); font-family: var(--font-display); font-size: 18px; font-weight: 500; position: sticky; top: 0; background: var(--surface); z-index: 1; } .dialog-item { display: block; padding: 14px 18px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); transition: background .12s; } .dialog-item:hover { background: var(--bg-warm); text-decoration: none; } .dialog-item.active { background: var(--bg-warm); border-left: 3px solid var(--accent); padding-left: 15px; } .di-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .di-name { font-weight: 500; font-size: 14px; } .unread { background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 600; border-radius: var(--radius-pill); padding: 2px 8px; min-width: 22px; text-align: center; } .di-src { font-size: 11px; color: var(--accent); margin: 3px 0; letter-spacing: 0.02em; } .di-last { font-size: 13px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .empty { padding: 28px 18px; } /* Переписка */ .conversation { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; box-shadow: var(--shadow-sm); overflow: hidden; } .conv-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: var(--bg-soft); } .conv-head strong { font-family: var(--font-display); font-size: 18px; font-weight: 500; } .conv-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); } .msg { max-width: 72%; padding: 10px 14px; border-radius: var(--radius-md); font-size: 14px; line-height: 1.45; } .msg-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; } .msg-in { align-self: flex-start; background: var(--msg-in-bg); color: var(--msg-in-fg); border-bottom-left-radius: 4px; } .msg-out { align-self: flex-end; background: var(--msg-out-bg); color: var(--msg-out-fg); border-bottom-right-radius: 4px; } .msg-out .msg-time { color: rgba(245,237,224,0.6); } .conv-reply { padding: 14px 18px; border-top: 1px solid var(--border); background: var(--surface); } .reply-form { display: flex; gap: 10px; align-items: center; width: 100%; } .reply-form input { flex: 1; margin: 0; } .reply-form button { margin: 0; } .reply-error { margin: 0 18px 14px; } .conv-empty { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--bg); } /* Права на дашборде */ .perms { list-style: none; padding: 0; margin: 0; } .perms li { padding: 4px 0; font-size: 14px; color: var(--text-soft); } .perms li::before { content: "·"; color: var(--accent); margin-right: 8px; font-weight: 700; } /* ============================================================ Переключатель темы ============================================================ */ .theme-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-soft); font-size: 13px; cursor: pointer; } .theme-toggle:hover { background: var(--bg-warm); } .theme-toggle .theme-icon { width: 14px; height: 14px; display: inline-block; } /* ============================================================ Адаптив ============================================================ */ /* ===== Планшет / мобильный: меню сворачивается в бургер ===== */ @media (max-width: 820px) { .nav-burger { display: inline-flex; align-items: center; } .nav { display: none; position: absolute; top: 100%; right: 0; flex-direction: column; align-items: stretch; gap: 4px; min-width: 220px; max-width: calc(100vw - 2 * var(--pad-x)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 12px; z-index: 50; } .nav.nav--open { display: flex; } .nav > .link { padding: 9px 8px; border-radius: var(--radius-sm); } .nav > .link:hover { background: var(--bg-warm); text-decoration: none; } /* «Настройки» внутри бургера раскрывается инлайном, а не абсолютным дропдауном */ .nav-group { width: 100%; } .nav-group > summary { padding: 9px 8px; } .nav-menu { position: static; box-shadow: none; border: 0; min-width: 0; padding: 2px 0 2px 14px; margin-left: 6px; border-left: 2px solid var(--border); border-radius: 0; } .theme-toggle, .nav-logout { align-self: flex-start; } /* Контент в одну колонку */ .inbox { grid-template-columns: 1fr; height: auto; } .dialog-list { max-height: 340px; } .mon-grid { grid-template-columns: 1fr; } .integ-grid { grid-template-columns: 1fr; } h1 { font-size: 26px; } } /* ===== Узкий мобильный: уплотняем отступы и стекаем мелочи ===== */ @media (max-width: 560px) { .container { padding: 20px var(--pad-x); } .card { padding: 18px; } h1 { font-size: 24px; } .msg { max-width: 86%; } .tbl th, .tbl td { padding: 10px 6px; } /* Редактор кнопок бота — каждая строка в столбик на всю ширину */ .bb-row { flex-wrap: wrap; } .bb-row .bb-label, .bb-row .bb-value { flex: 1 1 100%; } .bb-row select { flex: 1 1 auto; } /* Формы-строки, что лежали в ряд — переносим */ .mon-add-form, .order-comment-form, .reply-form { flex-wrap: wrap; } .reply-form input { flex: 1 1 100%; } } /* ============================================================ Мониторинг публичных каналов ============================================================ */ .mon-grid { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; } .mon-add-form { display: flex; gap: 8px; } .mon-add-form input { flex: 1; } .mon-channels-head { display: flex; justify-content: space-between; align-items: center; } .mon-channels-head h2 { margin: 0; } /* фильтр-чипы по каналам */ .mon-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; } .chip { padding: 4px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 12px; color: var(--text-soft); background: var(--surface-2); text-decoration: none; } .chip:hover { background: var(--bg-warm); } .chip-on { background: var(--accent); color: #fff; border-color: transparent; } .mon-channel-list { list-style: none; margin: 0; padding: 0; } .mon-channel { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--border); } .mon-channel.is-off { opacity: 0.5; } .mc-title { font-weight: 600; color: var(--text); text-decoration: none; display: block; } .mc-title:hover { color: var(--accent); } .mc-err { color: var(--terra); font-size: 12px; margin-top: 2px; } .mc-actions { display: flex; gap: 6px; flex-shrink: 0; } .btn-xs { padding: 3px 9px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-soft); font-size: 12px; cursor: pointer; } .btn-xs:hover { background: var(--bg-warm); } .btn-danger { color: var(--terra); border-color: rgba(184,107,74,0.4); } /* лента постов */ .mon-feed-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .mon-feed-filter input[type="search"] { flex: 1; min-width: 160px; } .mon-check { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-soft); white-space: nowrap; } .mon-check input { width: auto; margin: 0; } .mon-posts { display: flex; flex-direction: column; gap: 12px; } .mon-post { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow-sm); } .mon-post.is-guide { border-left: 3px solid var(--olive); } /* ============================================================ Интеграции ============================================================ */ .integ-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .integ-actions { display: flex; gap: 8px; margin-top: 12px; align-items: center; } .ok-dot { color: var(--olive); } .off-dot { color: var(--text-muted); } .btn-sm[disabled] { opacity: 0.5; cursor: not-allowed; } @media (max-width: 780px) { .integ-grid { grid-template-columns: 1fr; } } .mp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .mp-channel { font-weight: 600; color: var(--accent); } .mp-date { margin-left: auto; } .mp-text { white-space: pre-wrap; word-break: break-word; color: var(--text); line-height: 1.5; } .mp-foot { margin-top: 8px; } .badge-guide { background: var(--olive); color: #fff; border-color: transparent; } /* Тулбар на странице входа (только переключатель темы) */ .auth-toolbar { display: flex; justify-content: flex-end; margin-top: 8px; } /* ===== Раздел «Товары» (Этап Ш-2) ===== */ .product-form .pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; } .product-form label { display: block; font-size: 0.85rem; color: var(--ink-soft, #4d4538); } .product-form input, .product-form select, .product-form textarea { width: 100%; margin-top: 4px; } .prod-thumb { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; display: block; background: var(--cream, #f5ede0); } .prod-thumb-empty { display: flex; align-items: center; justify-content: center; color: var(--muted, #9a8f7d); } .row-off { opacity: 0.55; } .prod-actions { display: flex; gap: 6px; align-items: center; white-space: nowrap; } .img-upload { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; } .prod-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .pg-item { position: relative; margin: 0; border-radius: 14px; overflow: hidden; border: 2px solid transparent; background: var(--cream, #f5ede0); } .pg-item.is-cover { border-color: var(--forest, #1f4a2c); } .pg-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; } .pg-cover-label { position: absolute; top: 8px; left: 8px; background: var(--forest, #1f4a2c); color: #fff; font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; } .pg-actions { position: absolute; bottom: 0; left: 0; right: 0; display: flex; gap: 6px; justify-content: center; padding: 6px; background: linear-gradient(transparent, rgba(0,0,0,0.45)); } /* ===== Раздел «Заказы» (Этап Ш-3) ===== */ .orders-list { display: flex; flex-direction: column; gap: 14px; } .order-card { border-left: 4px solid var(--sand, #d8c6a3); } .order-card.order-placed { border-left-color: var(--terra, #b86b4a); } .order-card.order-confirmed { border-left-color: var(--olive, #6f7e4a); } .order-card.order-paid { border-left-color: var(--forest-soft, #2f5d3b); } .order-card.order-shipped { border-left-color: var(--forest, #1f4a2c); } .order-card.order-cancelled { border-left-color: var(--muted, #9a8f7d); opacity: 0.7; } .order-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .order-id { font-weight: 600; } .order-badge { background: var(--cream-warm, #ede2cf); color: var(--ink, #2a2418); } .order-date { margin-left: auto; } .order-customer { margin: 8px 0; } .order-items { list-style: none; padding: 0; margin: 8px 0; } .order-items li { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; } .order-item-sum { margin-left: auto; color: var(--ink-soft, #4d4538); white-space: nowrap; } .order-total { margin: 6px 0 12px; } .order-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; } .order-status-form { display: flex; gap: 6px; align-items: center; margin: 0; } .order-comment-form { display: flex; gap: 8px; align-items: center; } .order-comment-form input { flex: 1; } /* ===== Раздел «Бот» — редактор кнопок (Этап Ш-5) ===== */ .bb-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; } .bb-row .bb-label, .bb-row .bb-value { flex: 2; min-width: 0; } .bb-row .btn-kind { flex: 0 0 auto; } .bb-row .mon-check { white-space: nowrap; }