/* ========================================================= #style.css — БАЗА + ТЕМЫ + ОБЩИЕ КОМПОНЕНТЫ Порядок слоёв: base -> components -> (modules подключаются в других файлах) ========================================================= */ @layer base, components, modules; /* ========================================================= #region 🎛 Токены темы (light/dark) и их переопределения ========================================================= */ @layer base{ /* Светлая тема (по умолчанию) */ :root{ /* Базовая палитра */ --bg:#e8f5e9; /* фон страницы */ --card:#f1f8e9; /* фон карточек/таблиц/инпутов — мягко-зелёный */ --txt:#111827; /* основной текст */ --muted:#6b7280; /* вторичный текст */ --line:rgba(0,0,0,.08); /* линии/бордеры */ /* Акцент / управляющие */ --btn:#22c55e; /* основной акцент (кнопки/активы) */ --btn-600:#16a34a; /* hover акцента */ --tab:#e3f3ea; /* фон заголовков таблиц/вкладок */ --chip:#e3f3ea; /* фон "чипов" */ /* Поля ввода */ --field-bg:#f7fbf8; /* фон полей — очень светло-зелёный */ --field-bd:var(--line); --field-ring:rgba(34,197,94,.25); /* Статусы (можно использовать в бэйджах) */ --ok:#16a34a; --warn:#f59e0b; --err:#ef4444; --info:#3b82f6; /* Радиусы/тени/скорость */ --radius:12px; --radius-sm:10px; --radius-lg:16px; --shadow:0 6px 20px rgba(0,0,0,.08); --shadow-sm:0 2px 10px rgba(0,0,0,.06); --shadow-lg:0 14px 40px rgba(0,0,0,.12); /* Прочие */ --focus:color-mix(in oklab, var(--btn), white 25%); --focus-ring:color-mix(in oklab, var(--btn), white 75%); } /* Авто-тёмная тема, если пользовательская не зафиксирована */ @media (prefers-color-scheme: dark){ :root{ --bg:#0b1220; --card:#121a2a; --txt:#e5e7eb; --muted:#9ca3af; --line:#1f2937; --btn:#22c55e; --btn-600:#16a34a; --tab:#0f1829; --chip:#0f1829; --field-bg:#0f1829; --field-bd:#1f2937; --field-ring:rgba(34,197,94,.22); --shadow:0 6px 24px rgba(0,0,0,.28); --shadow-sm:0 2px 12px rgba(0,0,0,.22); --shadow-lg:0 18px 50px rgba(0,0,0,.35); --focus:color-mix(in oklab, var(--btn), black 10%); --focus-ring:color-mix(in oklab, var(--btn), black 50%); } } /* Принудительно тёмная/светлая (через data-theme на или ) */ html[data-theme="dark"], body[data-theme="dark"]{ --bg:#0b1220; --card:#121a2a; --txt:#e5e7eb; --muted:#9ca3af; --line:#1f2937; --btn:#22c55e; --btn-600:#16a34a; --tab:#0f1829; --chip:#0f1829; --field-bg:#0f1829; --field-bd:#1f2937; --field-ring:rgba(34,197,94,.22); --shadow:0 6px 24px rgba(0,0,0,.28); --shadow-sm:0 2px 12px rgba(0,0,0,.22); --shadow-lg:0 18px 50px rgba(0,0,0,.35); --focus:color-mix(in oklab, var(--btn), black 10%); --focus-ring:color-mix(in oklab, var(--btn), black 50%); } html[data-theme="light"], body[data-theme="light"]{ --bg:#e8f5e9; --card:#f1f8e9; --txt:#111827; --muted:#6b7280; --line:rgba(0,0,0,.08); --btn:#22c55e; --btn-600:#16a34a; --tab:#e3f3ea; --chip:#e3f3ea; --field-bg:#f7fbf8; --field-bd:var(--line); --field-ring:rgba(34,197,94,.25); --shadow:0 6px 20px rgba(0,0,0,.08); --shadow-sm:0 2px 10px rgba(0,0,0,.06); --shadow-lg:0 14px 40px rgba(0,0,0,.12); --focus:color-mix(in oklab, var(--btn), white 25%); --focus-ring:color-mix(in oklab, var(--btn), white 75%); } } /* ---------- #endregion Токены ---------- */ /* ========================================================= #region 🧼 База, сброс, типографика, утилиты ========================================================= */ @layer base{ *,*::before,*::after{ box-sizing:border-box } html,body{ height:100% } body{ margin:0; background:var(--bg); color:var(--txt); font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,Ubuntu,"Helvetica Neue",sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } img{ max-width:100%; height:auto; display:block } a{ color:inherit; text-decoration:none } a:hover{ text-decoration:underline } :focus-visible{ outline:2px solid var(--focus); outline-offset:2px } /* Скроллбары (мягкие) */ *{ scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.2) transparent } *::-webkit-scrollbar{ width:10px; height:10px } *::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.2); border-radius:8px } *::-webkit-scrollbar-track{ background:transparent } /* Утилиты */ .sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 } .is-hidden{ display:none !important } .text-muted{ color:var(--muted) } .muted{ color:var(--muted) } /* ✅ для единообразия с локальными страницами */ .text-right{ text-align:right } .text-center{ text-align:center } .nowrap{ white-space:nowrap } .ell{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis } .w-100{ width:100% } .h-100{ height:100% } .flex{ display:flex } .inline-flex{ display:inline-flex } .items-center{ align-items:center } .justify-between{ justify-content:space-between } .justify-center{ justify-content:center } .gap-4{ gap:4px } .gap-6{ gap:6px } .gap-8{ gap:8px } .gap-10{ gap:10px } .gap-12{ gap:12px } .p-8{ padding:8px } .p-10{ padding:10px } .p-12{ padding:12px } .p-16{ padding:16px } .mt-8{ margin-top:8px } .mt-12{ margin-top:12px } .mt-16{ margin-top:16px } .flex1{ flex:1 1 auto; min-width:1px } /* ✅ спейсер-растяжка (совместимо с bar-bottom) */ } /* ---------- #endregion База ---------- */ /* ========================================================= #region 🧩 Компоненты: кнопки ========================================================= */ @layer components{ .btn{ --_bg:#f3f4f6; --_txt:#111827; --_bd:var(--line); display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.6rem .9rem; border:1px solid var(--_bd); border-radius:var(--radius); background:var(--_bg); color:var(--_txt); font-weight:700; cursor:pointer; box-shadow:0 2px 0 rgba(0,0,0,.06); transition:background .15s ease, transform .06s ease; user-select:none; text-decoration:none; } .btn:active{ transform:translateY(1px) } .btn:disabled{ opacity:.6; cursor:not-allowed } .btn.primary{ --_bg:var(--btn); --_txt:#fff; --_bd:transparent } .btn.primary:hover{ background:var(--btn-600) } .btn.secondary{ --_bg:#9ca3af; --_txt:#fff; --_bd:transparent } .btn.gray{ --_bg:#9ca3af; --_txt:#fff; --_bd:transparent } .btn.red{ --_bg:#ef4444; --_txt:#fff; --_bd:transparent } .btn.ghost{ --_bg:transparent; --_txt:var(--txt); --_bd:var(--line) } .btn.outline{ --_bg:var(--card); --_txt:var(--txt); --_bd:var(--line) } .btn.icon{ padding:.5rem; aspect-ratio:1/1; min-width:36px } .btn .i{ width:16px; height:16px; display:inline-block; } /* 🔗 Алиасы под классы, которые приходят из JS (btn-green/btn-ghost/btn-red) */ .btn.btn-green, .btn-green{ --_bg:var(--btn); --_txt:#fff; --_bd:transparent; } .btn.btn-ghost, .btn-ghost{ --_bg:transparent; --_txt:var(--txt); --_bd:var(--line); } .btn.btn-red, .btn-red{ --_bg:#ef4444; --_txt:#fff; --_bd:transparent; } /* Группа кнопок */ .btn-group{ display:inline-flex; gap:8px } } /* ---------- #endregion Кнопки ---------- */ /* ========================================================= #region 🧩 Компоненты: карточки/панели/контейнеры ========================================================= */ @layer components{ .card{ background:var(--card); color:var(--txt); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:12px; } .panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); } .panel .panel-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--line); background:var(--tab); border-top-left-radius:var(--radius); border-top-right-radius:var(--radius); } .panel .panel-body{ padding:10px 12px } .panel .panel-foot{ padding:8px 12px; border-top:1px solid var(--line); background:color-mix(in oklab, var(--tab), white 10%); border-bottom-left-radius:var(--radius); border-bottom-right-radius:var(--radius); } } /* ---------- #endregion Карточки ---------- */ /* ========================================================= #region 🧩 Компоненты: поля ввода/формы ========================================================= */ @layer components{ /* Базовые поля */ .field, .select, input[type="text"], input[type="number"], input[type="tel"], input[type="email"], input[type="date"], input[type="time"], textarea, select{ width:100%; padding:8px 10px; border:1px solid var(--field-bd); border-radius:var(--radius-sm); background:var(--field-bg); color:var(--txt); font:14px/1.35 inherit; outline:none; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; } .field:focus, .select:focus, input:focus, textarea:focus, select:focus{ border-color:var(--focus); box-shadow:0 0 0 3px var(--field-ring); } .field[readonly], input[readonly], textarea[readonly]{ opacity:.9; background:color-mix(in oklab, var(--field-bg), black 4%) } .field:disabled, input:disabled, textarea:disabled, select:disabled{ opacity:.6; cursor:not-allowed } /* Плейсхолдеры */ ::placeholder{ color:var(--muted) } /* Инлайн-лейблы и хелп-текст */ .form-row{ display:grid; gap:6px; margin:8px 0 } .form-row label{ font-size:12px; color:var(--muted) } .help{ font-size:12px; color:var(--muted) } /* Переключатели/чекбоксы (минимальный рескин) */ input[type="checkbox"], input[type="radio"]{ accent-color:var(--btn) } } /* ---------- #endregion Поля ---------- */ /* ========================================================= #region 🧩 Компоненты: таблицы (универсальные стили) ========================================================= */ @layer components{ .tbl{ width:100%; border-collapse:separate; border-spacing:0; background:var(--card); color:var(--txt); table-layout:auto; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } .tbl thead th{ position:sticky; top:0; z-index:2; background:var(--tab); text-align:left; font-weight:700; padding:8px 10px; border-bottom:1px solid var(--line); } .tbl th, .tbl td{ padding:8px 10px; vertical-align:middle; } .tbl tbody tr{ border-bottom:1px solid var(--line) } /* ⚠ обычный hover — только для таблиц без дебиторки */ .tbl:not(.debitorka) tbody tr:hover td{ background:color-mix(in oklab, var(--btn) 10%, transparent); } .tbl .td-right{ text-align:right } .tbl .td-center{ text-align:center } .tbl .td-ell{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .tbl.zebra tbody tr:nth-child(odd) td{ background:color-mix(in oklab, var(--tab), white 40%) } .tbl .row-selected td{ background:color-mix(in oklab, var(--btn) 16%, white) } /* 🎨 Дебиторка: мягкая подсветка строк по статусу */ .tbl.debitorka thead th{ text-align:center; } .tbl.debitorka tbody tr.deb-row-draft td{ background:color-mix(in oklab, var(--warn) 18%, var(--card)); } .tbl.debitorka tbody tr.deb-row-ok td{ background:color-mix(in oklab, var(--ok) 14%, var(--card)); } .tbl.debitorka tbody tr.deb-row-overdue td{ background:color-mix(in oklab, var(--err) 18%, var(--card)); color:#7f1d1d; } /* Hover по дебиторке — чуть затемняем, не убивая цвет статуса */ .tbl.debitorka tbody tr:hover td{ filter:brightness(0.97); } .tbl.debitorka tbody tr.deb-row-draft.row-selected td, .tbl.debitorka tbody tr.deb-row-ok.row-selected td, .tbl.debitorka tbody tr.deb-row-overdue.row-selected td{ outline:2px solid color-mix(in oklab, var(--btn), black 10%); outline-offset:-2px; } } /* ---------- #endregion Таблицы ---------- */ /* ========================================================= #region 🧩 Компоненты: модалки/оверлеи/диалоги ========================================================= */ @layer components{ .modal[hidden]{ display:none !important } .modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.28); z-index:1000; padding:16px; } .modal .box{ width:min(640px, 96vw); background:var(--card); color:var(--txt); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:18px; } .modal .box .head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px } .modal .box .foot{ display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:14px } } /* ---------- #endregion Модалки ---------- */ /* ========================================================= #region 🧩 Компоненты: чипы/бейджи/тултипы ========================================================= */ @layer components{ .chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; background:var(--chip); color:var(--muted); border:1px solid var(--line); border-radius:999px; font-size:12px; } .badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; line-height:1.4; background:color-mix(in oklab, var(--btn) 15%, white); color:#065f46; border:1px solid var(--line); } .tooltip{ position:absolute; z-index:20; background:var(--card); color:var(--txt); border:1px solid var(--line); border-radius:8px; padding:6px 8px; font-size:12px; box-shadow:var(--shadow-sm); } } /* ---------- #endregion Чипы ---------- */ /* ========================================================= #region 🧩 Компоненты: тосты/уведомления ========================================================= */ @layer components{ .toast{ position:fixed; left:50%; bottom:16px; transform:translateX(-50%); padding:8px 14px; border-radius:999px; font-size:12px; background:var(--txt); color:var(--card); box-shadow:var(--shadow-lg); z-index:1100; max-width:min(92vw, 560px); opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease; } .toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(-4px); } /* Варианты по типу: совместимы и с классами, и с data-kind из JS */ .toast.success, .toast[data-kind="ok"]{ background:#166534; color:#fff; } .toast.error, .toast[data-kind="error"]{ background:#b91c1c; color:#fff; } .toast.info, .toast[data-kind="info"]{ background:#111827; color:#f9fafb; } } /* ---------- #endregion Тосты ---------- */