/* Дизайн-система шаблона. Единственный источник стилей. Нейтраль — шкала gray, успех — green, инфо — blue, ошибка — red; одно семейство на роль. Тема — атрибут data-theme на (ставится в head-includes.html до загрузки CSS). Утилитарные классы даёт Tailwind (assets/js/tailwind-config.js), здесь — только токены и компоненты, которых в Tailwind нет: сайдбар, грид Tabulator, меню строки, бейджи. Живая витрина — /_design/showcase.html */ /* ===== Токены ===== */ :root{ --c-app:#f9fafb; --c-panel:#ffffff; --c-line:#e5e7eb; --c-ink:#111827; --c-dim:#6b7280; --c-field:#f3f4f6; --g-head-bg:#ffffff; --g-head-line:#e5e7eb; --g-col-line:#e5e7eb; --g-col-fg:#111827; --g-sort-bg:#f3f4f6; --g-sort-fg:#111827; --g-sort-bar:#9ca3af; --g-row-odd:#f3f4f6; --g-row-even:#ffffff; --g-row-line:#e5e7eb; --g-cell-fg:#111827; --g-row-hover:#e5e7eb; --sb-thumb:#d1d5db; --sb-thumb-h:#9ca3af; --c-hdr-2:#f9fafb; color-scheme:light; } :root[data-theme="dark"]{ --c-app:#111827; --c-panel:#1f2937; --c-line:#374151; --c-ink:#d1d5db; --c-dim:#9ca3af; --c-field:#374151; --g-head-bg:#1f2937; --g-head-line:#374151; --g-col-line:#374151; --g-col-fg:#d1d5db; --g-sort-bg:#374151; --g-sort-fg:#f3f4f6; --g-sort-bar:#6b7280; --g-row-odd:#111827; --g-row-even:#1f2937; --g-row-line:#374151; --g-cell-fg:#d1d5db; --g-row-hover:#374151; --sb-thumb:#4b5563; --sb-thumb-h:#6b7280; --c-hdr-2:#111827; color-scheme:dark; } /* ===== Сайдбар: сворачивание 268 ⇄ 64, как в оригинале ===== */ #sidebar{width:268px;transition:width .3s ease;border-right:1px solid #4b5563} #sidebar.is-collapsed{width:64px} #sidebar.is-collapsed .sb-label, #sidebar.is-collapsed .sb-caret, #sidebar.is-collapsed .sb-sub, #sidebar.is-collapsed .sb-brand-text{display:none} #sidebar.is-collapsed .sb-item{justify-content:center;padding-left:0;padding-right:0} #sidebar.is-collapsed .sb-brand{justify-content:center;padding-left:0;padding-right:0} .sb-item{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:8px;color:#d1d5db;transition:background-color .15s,color .15s;width:100%;text-align:start;background:none;border:0;cursor:pointer;font-size:14px;line-height:20px} .sb-item:hover{background:rgba(75,85,99,.2);color:#f3f4f6} /* активный пункт: подложка + левая полоса */ .sb-item.is-active{background:rgba(75,85,99,.3);border-inline-start:4px solid #9ca3af;margin-inline-start:-4px;color:#fff;font-weight:500} .sb-caret{margin-inline-start:auto;transition:transform .2s} .sb-group.is-open>.sb-item .sb-caret{transform:rotate(180deg)} .sb-sub{display:none;padding-inline-start:34px;margin-top:2px} .sb-group.is-open .sb-sub{display:block} .sb-sub a{display:block;padding:6px 12px;border-radius:6px;font-size:14px;color:#9ca3af} .sb-sub a:hover{background:rgba(75,85,99,.2);color:#f3f4f6} #backdrop{display:none} /* ===== Мобильный и планшет ===== */ @media (max-width:767px){ #sidebar{position:fixed;top:0;bottom:0;left:0;z-index:50;width:268px;transform:translateX(-100%);transition:transform .3s ease} #sidebar.is-open{transform:none} #sidebar.is-collapsed{width:268px} #sidebar.is-collapsed .sb-label,#sidebar.is-collapsed .sb-brand-text,#sidebar.is-collapsed .sb-caret{display:inline} #sidebar.is-collapsed .sb-item{justify-content:flex-start;padding-left:12px;padding-right:12px} #backdrop.is-open{display:block;position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.5)} } /* ===== Тема Tabulator (значения с боевого грида) ===== */ .tabulator{background-color:var(--c-panel);border:1px solid var(--c-line);border-radius:8px; box-shadow:0 2px 4px 0 rgba(0,0,0,.05);font-size:14px;color:var(--g-cell-fg)} .tabulator .tabulator-header{background-color:var(--g-head-bg);border-bottom:3px solid var(--g-head-line); color:var(--g-col-fg);font-weight:600} .tabulator .tabulator-header .tabulator-col{background:var(--g-head-bg);border-right:1px solid var(--g-col-line); color:var(--g-col-fg);font-weight:600;padding:8px 6px} .tabulator .tabulator-header .tabulator-col .tabulator-col-content{padding:4px} .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"], .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"], .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"], .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"]{ background:var(--g-sort-bg);color:var(--g-sort-fg);box-shadow:inset 0 -2px 0 0 var(--g-sort-bar)} .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-sorter{display:none} .tabulator .tabulator-header .tabulator-col .tabulator-col-sorter .tabulator-arrow{border-bottom-color:var(--g-sort-fg)} .tabulator .tabulator-tableholder .tabulator-table{background:transparent;color:var(--g-cell-fg)} .tabulator .tabulator-row{background-color:var(--g-row-even);border-bottom:1px solid var(--g-row-line); min-height:22px;position:relative} .tabulator .tabulator-row.tabulator-row-odd{background-color:var(--g-row-odd)} .tabulator .tabulator-row:hover{background-color:var(--g-row-hover)} .tabulator .tabulator-row .tabulator-cell{padding:8px 6px;font-size:14px;color:var(--g-cell-fg);border-right:none} /* ячейка с меню действий не должна обрезать выпадающий список */ .tabulator .tabulator-row .tabulator-cell.cell-actions{overflow:visible} .tabulator .tabulator-placeholder{background:transparent;color:var(--c-dim)} .tabulator .tabulator-placeholder .tabulator-placeholder-contents{color:var(--c-dim);font-size:14px;font-weight:400} /* карточный вид строки на узком экране */ .tabulator .tabulator-responsive-collapse{border-top:1px solid var(--g-row-line);padding:8px 10px} .tabulator .tabulator-responsive-collapse table td{padding:2px 0;font-size:13px;color:var(--c-dim)} .tabulator .tabulator-responsive-collapse table td:first-child{padding-inline-end:8px} /* скроллбар 8px, трек прозрачный */ .tabulator .tabulator-tableholder::-webkit-scrollbar,.thin::-webkit-scrollbar{width:8px;height:8px} .tabulator .tabulator-tableholder::-webkit-scrollbar-track,.thin::-webkit-scrollbar-track{background:transparent} .tabulator .tabulator-tableholder::-webkit-scrollbar-thumb,.thin::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:8px} .tabulator .tabulator-tableholder::-webkit-scrollbar-thumb:hover,.thin::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-h)} /* ===== Меню действий в строке — CSS 1-в-1 с боевого ===== */ /* inline-flex, а не inline-block: у inline-block под кнопкой остаётся место под базовую линию, и меню отходит вниз на несколько лишних пикселей. top:100% фиксирует привязку к низу кнопки, а не к статическому положению. */ .actions-wrap{position:relative;display:inline-flex;text-align:left} .actions-button{padding:2px 6px;border:0;background:transparent;color:var(--c-dim);cursor:pointer;border-radius:6px} .actions-button:hover{background-color:rgba(17,24,39,.06)} [data-theme="dark"] .actions-button:hover{background-color:rgba(255,255,255,.08)} .actions-icon{font-size:.875rem;font-weight:600;line-height:1;user-select:none} .actions-dropdown{display:none;position:absolute;right:0;top:100%;z-index:50;margin-top:.25rem;min-width:10rem; padding-top:.25rem;padding-bottom:.25rem;transform-origin:right top;background-color:#fff; border:1px solid #e5e7eb;border-radius:.375rem; box-shadow:0 10px 15px -3px rgba(17,24,39,.15),0 4px 6px -4px rgba(17,24,39,.15)} [data-theme="dark"] .actions-dropdown{background-color:#374151;border-color:#4b5563} .actions-wrap.is-active .actions-dropdown{display:block} .actions-menu-item{display:flex;align-items:center;width:100%;padding:.5rem .75rem;font-size:.875rem; line-height:1.25rem;color:#374151;gap:.5rem;background:transparent;border:0;cursor:pointer; transition:background-color .15s,color .15s;white-space:nowrap} .actions-menu-item:hover{background-color:#f3f4f6} [data-theme="dark"] .actions-menu-item{color:#d1d5db} [data-theme="dark"] .actions-menu-item:hover{background-color:#4b5563} .actions-menu-item-danger{color:#dc2626} /* Имя пользователя в меню: пустой блок с паддингом и рамкой читается как лишний отступ, поэтому пустым не показываем. */ #navUser:empty{display:none} [data-theme="dark"] .actions-menu-item-danger{color:#f87171} /* ===== Бейджи ===== */ .pill{display:inline-flex;align-items:center;padding:2px 10px;border-radius:9999px;font-size:12px;font-weight:500} .pill-ok{background:#dcfce7;color:#166534} [data-theme="dark"] .pill-ok{background:#14532d;color:#bbf7d0} .pill-bad{background:#fee2e2;color:#991b1b} [data-theme="dark"] .pill-bad{background:#7f1d1d;color:#fecaca} .pill-neutral{background:#e5e7eb;color:#374151} [data-theme="dark"] .pill-neutral{background:#374151;color:#d1d5db} .pill-srv{background:#dbeafe;color:#1e40af} [data-theme="dark"] .pill-srv{background:#1e3a8a;color:#93c5fd} .money{color:#15803d;font-variant-numeric:tabular-nums} [data-theme="dark"] .money{color:#4ade80} /* Кнопка тулбара: px-3 py-2, 14px/500, высота 36px — как в оригинале */ .btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;font-size:14px; font-weight:500;color:var(--c-dim);background:transparent;border:0;cursor:pointer;white-space:nowrap; transition:background-color .15s,color .15s} .btn:hover{color:var(--c-ink);background:rgba(17,24,39,.06)} [data-theme="dark"] .btn:hover{color:#f3f4f6;background:rgba(255,255,255,.08)} /* «Add» — фон только при наведении */ .btn-add{color:#15803d} [data-theme="dark"] .btn-add{color:#4ade80} .btn-add:hover{background:#2ed38a;color:#000} .btn-danger{color:#dc2626} .btn-danger:hover{background:rgba(220,38,38,.1);color:#dc2626} [data-theme="dark"] .btn-danger{color:#f87171} [data-theme="dark"] .btn-danger:hover{background:rgba(248,113,113,.12);color:#f87171} /* Шапка страницы: градиент */ .page-header{background-image:linear-gradient(90deg,var(--c-panel) 0%,var(--c-hdr-2) 100%)} /* Курсор-рука на всём, что раскрывается или выбирается */ select,.actions-menu-item,.actions-menu-item-danger,.actions-wrap>button,summary{cursor:pointer} .actions-dropdown label{cursor:pointer} /* Основное действие: залитая кнопка. Одна на экран — остальное .btn */ .btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px; border-radius:6px;font-size:14px;font-weight:600;background:#2ed38a;color:#000;border:0;cursor:pointer; text-decoration:none;transition:background-color .15s} .btn-primary:hover{background:#25b877} .btn-primary:disabled{opacity:.6;cursor:default} /* Вторичное действие с рамкой. Компонент, а не утилита border: у .btn задан border:0, и при споре с утилитой Tailwind исход зависел бы от порядка вставки. */ .btn-outline{border:1px solid var(--c-line)} .btn-outline:hover{background:rgba(17,24,39,.06)} [data-theme="dark"] .btn-outline:hover{background:rgba(255,255,255,.08)} /* Ссылка в тексте */ .link{color:#15803d;text-decoration:underline;text-underline-offset:2px} [data-theme="dark"] .link{color:#4ade80} .link:hover{opacity:.85} /* Скоуп страницы входа */ .p-login{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:24px} /* Вкладка раздела */ .tab{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;font-size:14px;font-weight:500; color:var(--c-dim);background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap} .tab:hover{color:var(--c-ink)} .tab.is-active{color:#111827;border-bottom-color:#2ed38a} [data-theme="dark"] .tab.is-active{color:#fff} /* Поле формы */ /* Селектор с тегом — намеренно: плагин forms из сборки Tailwind объявляет background-color для [type="email"] и подобных с той же специфичностью, что и .fld, и тогда всё решает порядок вставки, а он у браузерной сборки плавающий. */ .fld, input.fld,select.fld,textarea.fld{width:100%;padding:6px 10px;border-radius:6px;background:var(--c-field); border:1px solid transparent;font-size:14px;color:#111827;font-family:inherit} [data-theme="dark"] .fld{color:#f3f4f6} .fld:focus,input.fld:focus,select.fld:focus,textarea.fld:focus{outline:none;border-color:#2ed38a} input.bg-field,select.bg-field,textarea.bg-field{background-color:var(--c-field)} .fld::placeholder{color:var(--c-dim)} /* Дата и время. color-scheme нужен, чтобы браузер рисовал нативный календарь тёмным; без него поле остаётся белым, а иконка календаря — невидимой на тёмном фоне. */ input[type="date"].fld,input[type="datetime-local"].fld,input[type="time"].fld, input[type="month"].fld,input[type="week"].fld{color-scheme:inherit} [data-theme="dark"] input[type="date"].fld::-webkit-calendar-picker-indicator, [data-theme="dark"] input[type="datetime-local"].fld::-webkit-calendar-picker-indicator, [data-theme="dark"] input[type="time"].fld::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.7)} [data-theme="dark"] input[type="date"].fld::-webkit-calendar-picker-indicator:hover{opacity:1} /* Иконочная кнопка в шапке — 32px */ .ibtn{width:32px;height:32px;display:grid;place-items:center;border-radius:6px;color:var(--c-dim); background:transparent;border:0;cursor:pointer;transition:background-color .15s,color .15s} .ibtn:hover{color:var(--c-ink);background:rgba(17,24,39,.06)} [data-theme="dark"] .ibtn:hover{color:#f3f4f6;background:rgba(255,255,255,.08)} /* Alpine прячет элемент до своего запуска только через этот атрибут: без правила модалка с x-show успевает мигнуть на весь экран до инициализации. */ [x-cloak]{display:none !important}