/* * Reforma — базовая стилевая система кабинетов. * Источник истины — CSS custom properties (далее «токены»). Темы переключаются * через атрибут [data-effective-theme="light|dark"] на . * * Любая страница кабинета должна работать на одних и тех же токенах, * без хардкода цветов. */ :root, [data-effective-theme="light"] { color-scheme: light; --color-bg: #f7f8fa; --color-bg-elevated: #ffffff; --color-text: #1a1a1a; --color-text-muted: #6b7280; --color-border: #e5e7eb; --color-primary: #2563eb; --color-primary-hover:#1d4ed8; --color-error: #dc2626; --color-success: #16a34a; --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); } [data-effective-theme="dark"] { /* color-scheme подсказывает браузеру использовать тёмные дефолты для нативных контролов (иконка календаря/часов в input[type=date|time], скроллбары, фокус-кольцо). Без этого SVG-иконка остаётся чёрной на тёмном фоне. */ color-scheme: dark; --color-bg: #0f1115; --color-bg-elevated: #161a22; --color-text: #e7e9ee; --color-text-muted: #9ca3af; --color-border: #232834; --color-primary: #60a5fa; --color-primary-hover:#93c5fd; --color-error: #f87171; --color-success: #34d399; --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--color-bg); color: var(--color-text); min-height: 100vh; } a { color: var(--color-primary); text-decoration: none; } a:hover { color: var(--color-primary-hover); text-decoration: underline; } /* ---------- Header ---------- */ .app-header { display: flex; align-items: center; gap: 1.5rem; padding: 0.75rem 1.5rem; background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border); } .app-brand { display: inline-flex; align-items: center; line-height: 0; } .app-brand-logo { height: 28px; width: auto; display: block; } /* Логотип нарисован тёмным fill'ом (#08090b). На светлой теме — оставляем как есть. На тёмной — превращаем в чистый белый через filter: brightness(0) делает все пиксели чёрными, invert(1) — переворачивает в белые. Прозрачный фон сохраняется. */ [data-effective-theme="dark"] .app-brand-logo { filter: brightness(0) invert(1); } .app-nav { display: flex; gap: 1rem; flex: 1; } .app-nav a { color: var(--color-text-muted); } .app-nav a:hover { color: var(--color-text); } .app-controls { display: flex; gap: 0.75rem; align-items: center; } .app-user { color: var(--color-text-muted); font-size: 0.9rem; } /* Theme toggle (icon-only button). */ .theme-toggle { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: 50%; background: transparent; color: var(--color-text-muted); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .theme-toggle:hover { color: var(--color-text); border-color: var(--color-primary); background: var(--color-bg-elevated); } /* На светлой теме показываем луну (предлагаем переключить в тёмную), на тёмной — солнце. Скрытие через display:none, чтобы не занимать место. */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: inline-block; } [data-effective-theme="dark"] .theme-toggle .icon-sun { display: inline-block; } [data-effective-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ---------- Forms ---------- */ input[type="text"], input[type="email"], input[type="password"], input[type="time"], input[type="date"], select, textarea { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-bg-elevated); color: var(--color-text); font: inherit; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--color-primary); outline-offset: -1px; } button { padding: 0.5rem 1rem; border: 1px solid var(--color-primary); background: var(--color-primary); color: #fff; border-radius: 6px; cursor: pointer; font: inherit; } button:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); } button[type="button"].btn-secondary { background: transparent; color: var(--color-text); border-color: var(--color-border); } button.btn-state { min-width: 130px; text-align: center; color: #fff; } button.btn-state-on { background: var(--color-success); border-color: var(--color-success); } button.btn-state-on:hover { background: #15803d; border-color: #15803d; } button.btn-state-off { background: var(--color-error); border-color: var(--color-error); } button.btn-state-off:hover { background: #b91c1c; border-color: #b91c1c; } button.btn-icon { background: transparent; border: 1px solid var(--color-border); color: var(--color-text); padding: 0.35rem; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; line-height: 0; } button.btn-icon:hover { background: var(--color-bg); border-color: var(--color-primary); } /* ---------- Modal dialog ---------- */ dialog.modal { border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg-elevated); color: var(--color-text); padding: 0; max-width: 480px; width: calc(100% - 2rem); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } dialog.modal::backdrop { background: rgba(0, 0, 0, 0.4); } dialog.modal .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); } dialog.modal .modal-header h3 { margin: 0; font-size: 1.05rem; } dialog.modal .modal-close { background: transparent; border: none; color: var(--color-text-muted); font-size: 1.4rem; line-height: 1; padding: 0.25rem 0.5rem; cursor: pointer; } dialog.modal .modal-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; } dialog.modal .modal-body fieldset { border: 1px solid var(--color-border); border-radius: 8px; padding: 0.75rem 1rem 1rem; margin: 0; } dialog.modal .modal-body legend { padding: 0 0.4rem; color: var(--color-text-muted); font-size: 0.85rem; } dialog.modal .modal-body form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } dialog.modal .modal-body form > input[type="password"], dialog.modal .modal-body form > select { flex: 1 1 200px; } /* ---------- Layout ---------- */ .app-main { max-width: 1100px; margin: 1.5rem auto; padding: 0 1.5rem; } .card { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 10px; padding: 1.5rem; box-shadow: var(--shadow-card); } /* Кликабельные плитки разделов на дашборде. */ .dashboard-card { transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .dashboard-card:hover { transform: translateY(-2px); border-color: var(--color-primary); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } /* ---------- Auth page ---------- */ .auth-card { max-width: 380px; margin: 5rem auto; background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 10px; padding: 2rem; box-shadow: var(--shadow-card); } .auth-logo { display: block; height: 56px; width: auto; margin: 0 auto 1.25rem; } [data-effective-theme="dark"] .auth-logo { filter: brightness(0) invert(1); } .auth-card h1 { margin: 0 0 1.5rem; font-size: 1.4rem; text-align: center; } .auth-form label { display: block; margin-bottom: 1rem; } .auth-form button { width: 100%; margin-top: 0.5rem; } .auth-error { background: rgba(220, 38, 38, 0.1); color: var(--color-error); padding: 0.5rem 0.75rem; border-radius: 6px; margin-bottom: 1rem; } .auth-hint { color: var(--color-text-muted); font-size: 0.85rem; margin-top: 1rem; text-align: center; } /* ---------- Tables (для админских списков) ---------- */ .table { width: 100%; border-collapse: collapse; } .table th, .table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--color-border); text-align: left; } .table th { font-weight: 600; color: var(--color-text-muted); font-size: 0.85rem; } /* Длинные значения без пробелов (URL в «Источнике», длинные имена клиентов) переносим внутри ячейки, иначе они растягивают таблицу и ломают вёрстку. `anywhere` (в отличие от break-word) уменьшает min-content ширину ячейки, так что таблица не вылезает за контейнер. */ .table td { overflow-wrap: anywhere; } /* ---------- Календарь графика ---------- */ .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 1rem; } .cal-head { text-align: center; font-weight: 600; color: var(--color-text-muted); font-size: 0.85rem; padding: 0.4rem 0; } .cal-cell { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 6px; overflow: hidden; transition: border-color 0.1s ease; } .cal-cell summary { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; cursor: pointer; list-style: none; min-height: 56px; } .cal-cell summary::-webkit-details-marker { display: none; } .cal-cell:hover { border-color: var(--color-primary); } .cal-day { font-weight: 600; color: var(--color-text); } .cal-cell--today { outline: 2px solid var(--color-primary); outline-offset: -2px; } /* Состояния ячейки: - unset — нейтральная (без цвета): значит менеджер ещё ничего не задал или РОП не согласовал; - work — зелёная (явно «рабочий», уже сохранено/согласовано); - off — красная (явно «выходной»). */ .cal-cell--unset { background: var(--color-bg-elevated); } .cal-cell--work { background: rgba(22, 163, 74, 0.18); border-color: rgba(22, 163, 74, 0.5); } .cal-cell--work .cal-day { color: var(--color-success); } .cal-cell--off { background: rgba(220, 38, 38, 0.18); border-color: rgba(220, 38, 38, 0.5); } .cal-cell--off .cal-day { color: var(--color-error); } [data-effective-theme="dark"] .cal-cell--work { background: rgba(52, 211, 153, 0.22); } [data-effective-theme="dark"] .cal-cell--off { background: rgba(248, 113, 113, 0.22); } .cal-radio--clear span { color: var(--color-text-muted); } /* Навигация по месяцам в верхней части календаря. */ .month-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0 0 1rem; max-width: 320px; } .month-nav__btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-text); text-decoration: none; font-size: 1rem; transition: border-color 0.1s ease; } .month-nav__btn:hover { border-color: var(--color-primary); color: var(--color-primary); } .month-nav__title { font-size: 1.05rem; } /* Заблокированные ячейки — прошлое для менеджера, либо read-only. */ .cal-cell--locked summary { cursor: not-allowed; } .cal-cell--past summary { opacity: 0.6; } .cal-status { font-size: 0.78rem; line-height: 1.2; word-break: break-word; } .cal-form { display: grid; gap: 4px; padding: 8px; background: var(--color-bg); border-top: 1px solid var(--color-border); } .cal-radio { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; cursor: pointer; } /* ---------- Горизонтальный обзор графиков (РОП) ---------- */ .overview-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg-elevated); margin-top: 1rem; } .overview-table { border-collapse: collapse; table-layout: fixed; width: 100%; } .overview-table th, .overview-table td { border: 1px solid var(--color-border); padding: 0; text-align: center; vertical-align: middle; } .overview-name-col { width: 200px; min-width: 200px; text-align: left !important; padding: 6px 10px !important; background: var(--color-bg-elevated); position: sticky; left: 0; z-index: 1; } .overview-day { width: 30px; min-width: 30px; padding: 4px 0 !important; color: var(--color-text-muted); font-weight: 500; font-size: 0.7rem; line-height: 1.1; } .overview-day--weekend { background: rgba(0, 0, 0, 0.04); } [data-effective-theme="dark"] .overview-day--weekend { background: rgba(255, 255, 255, 0.04); } .overview-day--today { color: var(--color-primary); font-weight: 700; } .overview-num { font-size: 0.85rem; color: var(--color-text); font-weight: 600; } .overview-wd { font-size: 0.65rem; } .overview-cell { width: 30px; height: 30px; } .overview-cell--weekend { background: rgba(0, 0, 0, 0.04); } [data-effective-theme="dark"] .overview-cell--weekend { background: rgba(255, 255, 255, 0.04); } .overview-cell--work { background: rgba(22, 163, 74, 0.55); } .overview-cell--off { background: rgba(220, 38, 38, 0.55); } [data-effective-theme="dark"] .overview-cell--work { background: rgba(52, 211, 153, 0.55); } [data-effective-theme="dark"] .overview-cell--off { background: rgba(248, 113, 113, 0.55); } .overview-cell--today { box-shadow: inset 0 0 0 2px var(--color-primary); } /* Бейдж «!» с количеством изменений в pending-заявке. */ .diff-badge { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: 0.5rem; padding: 2px 0.6rem; background: rgba(220, 38, 38, 0.12); color: var(--color-error); border: 1px solid rgba(220, 38, 38, 0.4); border-radius: 999px; font-size: 0.85rem; font-weight: 600; vertical-align: middle; } .diff-badge__icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--color-error); color: #fff; font-weight: 700; font-size: 0.75rem; line-height: 1; } /* Inline-форма выхода в шапке. */ .app-logout-form { display: inline; margin: 0; } .app-logout-form button { padding: 0.3rem 0.7rem; background: transparent; color: var(--color-text-muted); border-color: var(--color-border); } .app-logout-form button:hover { background: var(--color-border); color: var(--color-text); }