/* ============================================================ IQ КОФЕ — тема «Точка» (наложение поверх iq-portal.css) Активируется через . Базовый CSS не трогаем. Структура (масштабируемо): • [data-theme^="tochka"] — общая «ДНК Точки» для всех вариантов • [data-theme="tochka1"] — ВАРИАНТ 1: тёплый фон, объёмные тени • [data-theme="tochka2"] — ВАРИАНТ 2: нейтрально-серый, плоско • [data-theme="dark"] — ночная тема: тёмный холст, фиолет-акцент Новый вариант = ещё один блок + кнопка в переключателе. ============================================================ */ /* ─────────── ОБЩАЯ ДНК ТОЧКИ ─────────── */ [data-theme^="tochka"]{ --surface:#FFFFFF; --violet:#7C5CFF; /* фирменный лавандовый фиолет */ --violet-ink:#5E3FE6; --violet-soft:#EFEBFF; --g-cert:#7C5CFF; /* грейд «аттестованный» завязан на фиолет */ } [data-theme^="tochka"] body{background:var(--bg)} /* левая колонка — скруглённая «парящая» карточка. Равные отступы слева (margin) и справа (= padding-left у .wrap), чтобы колонка стояла по центру своего «коридора». */ [data-theme^="tochka"] .sidebar{ border-right:none; margin:20px 0 20px 20px; height:calc(100vh - 40px); height:calc(100dvh - 40px); align-self:flex-start; border-radius:22px; } /* таблица тянется на всю доступную ширину (снимаем max-width базового .wrap) с равными полями 16px со всех сторон → три серые полоски одинаковы: край↔колонка = колонка↔таблица = таблица↔край = 16px */ [data-theme^="tochka"] .wrap{max-width:none;margin-left:0;padding-left:20px;padding-right:20px} [data-theme^="tochka"] .sb-item{border-radius:13px} [data-theme^="tochka"] .sb-item.active{background:var(--violet);color:#fff} [data-theme^="tochka"] .sb-item.active svg{stroke:#fff} /* кнопки и сегменты — скруглённые «пилюли» */ [data-theme^="tochka"] .btn{border-radius:999px;padding:10px 18px} [data-theme^="tochka"] .btn-primary{background:var(--violet)} [data-theme^="tochka"] .btn-primary:hover{background:var(--violet-ink)} [data-theme^="tochka"] .weeknav{border-radius:16px;border-color:var(--border)} [data-theme^="tochka"] .weeknav button{border-radius:11px} [data-theme^="tochka"] .seg{border-radius:16px;border-color:var(--border)} [data-theme^="tochka"] .seg button{border-radius:12px} [data-theme^="tochka"] .seg button.on{background:var(--violet);color:#fff} /* карточки-контейнеры */ [data-theme^="tochka"] .board{border:1px solid var(--border)} [data-theme^="tochka"] .foot{border:1px solid var(--border)} /* ВНУТРИ таблицы — белое (как в дизайне Точки): шапка и угол белые, серым остаётся только холст-фон вокруг карточек */ [data-theme^="tochka"] .gh{background:var(--surface)} [data-theme^="tochka"] .gh-corner{background:var(--surface)} /* первый столбец — по левому краю, но с отступом слева: имена стоят на одной вертикальной линии, с воздухом от края ячейки (аккуратно, визуально ближе к центру, без «рваного» центрирования) */ [data-theme^="tochka"] .gh-corner{padding-left:20px} [data-theme^="tochka"] .nm{padding-left:20px} [data-theme^="tochka"] .mlabel{padding-left:20px} /* акценты */ [data-theme^="tochka"] .gh.weekend{color:var(--violet-ink)} [data-theme^="tochka"] .pill.p1{background:#E5DEFF;color:var(--violet-ink)} [data-theme^="tochka"] .pill.p2{background:var(--violet);color:#fff} /* ─────────── ВАРИАНТ 1 (тёплый фон + объёмные тени, R22) ─────────── */ [data-theme="tochka1"]{ --bg:#F1F0F6; --bg-soft:#F7F6FB; --border:#ECEAF4; --border-soft:#F3F2F8; --ink:#16131F; --ink-2:#56516B; --muted:#928DA6; --faint:#BFBBCE; --r:22px; } [data-theme="tochka1"] .sidebar{box-shadow:0 6px 28px -14px rgba(70,50,140,.28)} [data-theme="tochka1"] .sb-item.active{box-shadow:0 6px 16px -6px rgba(123,77,255,.55)} [data-theme="tochka1"] .btn-primary{box-shadow:0 8px 20px -6px rgba(123,77,255,.55)} [data-theme="tochka1"] .seg button.on{box-shadow:0 4px 12px -4px rgba(123,77,255,.5)} [data-theme="tochka1"] .board{box-shadow:0 10px 34px -18px rgba(70,50,140,.30)} [data-theme="tochka1"] .foot{box-shadow:0 8px 28px -18px rgba(70,50,140,.26)} /* ─────────── ВАРИАНТ 2 (нейтрально-серый холст, белые карточки, плоско, R20) ─────────── */ [data-theme="tochka2"]{ --bg:#EBEBEB; /* чётко серый холст — белая таблица на нём «всплывает» */ --bg-soft:#F4F4F4; --border:#E2E2E2; --border-soft:#EFEFEF; --ink:#1A1A1D; --ink-2:#5C5C62; --muted:#9A9AA0; --faint:#C3C3C8; --r:20px; } [data-theme="tochka2"] .sidebar{box-shadow:0 4px 16px -10px rgba(0,0,0,.18)} [data-theme="tochka2"] .board{box-shadow:0 1px 3px rgba(0,0,0,.04)} [data-theme="tochka2"] .foot{box-shadow:0 1px 3px rgba(0,0,0,.04)} /* ─────────── ТЁМНАЯ (НОЧНАЯ) ТЕМА ─────────── Тёмный сине-графитовый холст, приподнятые карточки, лавандовый акцент. Перекрываем токены + литеральные «белые» поверхности базового CSS. */ [data-theme="dark"]{ color-scheme:dark; --bg:#0F0F14; /* холст */ --bg-soft:#16161D; --surface:#1B1B24; /* карточки/таблицы */ --surface-2:#21212B; /* приподнятый слой (итоги, hover) */ --border:#2C2C38; --border-soft:#24242E; --ink:#ECECF2; --ink-2:#B7B7C6; --muted:#8A8A99; --faint:#5C5C6B; --violet:#8B6CFF; /* чуть светлее — читается на тёмном */ --violet-ink:#B7A2FF; /* акцентный текст на тёмном */ --violet-soft:#241F3A; /* тёмная фиолет-подложка (active/ava) */ --g-cert:#8B6CFF; --r:18px; } [data-theme="dark"] body{background:var(--bg)} [data-theme="dark"] .sidebar{background:var(--surface);border-right-color:var(--border)} [data-theme="dark"] .sb-item.active{background:var(--violet-soft);color:var(--violet-ink)} [data-theme="dark"] .sb-item.active svg{stroke:var(--violet-ink)} [data-theme="dark"] .sb-item:hover{background:var(--bg-soft)} [data-theme="dark"] .card, [data-theme="dark"] .board, [data-theme="dark"] .foot, [data-theme="dark"] .weeknav, [data-theme="dark"] .user, [data-theme="dark"] .seg, [data-theme="dark"] .qnav a, [data-theme="dark"] .btn-ghost{background:var(--surface);border-color:var(--border)} [data-theme="dark"] .btn-ghost{color:var(--ink-2)} [data-theme="dark"] .seg button.on{background:var(--surface-2);color:var(--violet-ink);box-shadow:0 0 0 1px var(--border)} [data-theme="dark"] .btn-primary{color:#fff} [data-theme="dark"] .btn-danger{background:var(--surface);border-color:#5A2E2E;color:#F08A7A} /* шапка/угол таблицы-доски и серые фоны */ [data-theme="dark"] .gh, [data-theme="dark"] .gh-corner, [data-theme="dark"] .gh-end{background:var(--bg-soft)} [data-theme="dark"] .seg{background:var(--bg-soft)} /* литеральные color-mix(...,white) → подмешиваем в тёмную поверхность */ [data-theme="dark"] .loc{background:color-mix(in srgb,var(--c) 18%,var(--surface))} [data-theme="dark"] .cell:hover .t{background:color-mix(in srgb,var(--c) 26%,var(--surface));border-color:color-mix(in srgb,var(--c) 45%,var(--surface))} [data-theme="dark"] .qnav a:hover{background:color-mix(in srgb,var(--cc) 22%,var(--surface));color:var(--ink)} /* инпуты */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea{background:var(--bg-soft);color:var(--ink);border-color:var(--border)} [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder{color:var(--faint)} [data-theme="dark"] input[type=time], [data-theme="dark"] input[type=date]{color-scheme:dark} /* тени помягче, тёплый ореол убираем */ [data-theme="dark"] .sidebar{box-shadow:0 4px 18px -12px rgba(0,0,0,.6)} [data-theme="dark"] .board, [data-theme="dark"] .card{box-shadow:0 1px 3px rgba(0,0,0,.4)} /* плавающий переключатель тем — тёмный */ [data-theme="dark"] #iq-theme-switch{background:var(--surface); box-shadow:0 8px 28px -8px rgba(0,0,0,.7),0 0 0 1px var(--border)} [data-theme="dark"] #iq-theme-switch button{color:var(--ink-2)} [data-theme="dark"] #iq-theme-switch button.on{background:var(--violet);color:#fff} /* таблицы: итог/предупреждение (литеральные светлые фоны в app.css) */ [data-theme="dark"] .tbl tr:hover td{background:var(--surface-2)} [data-theme="dark"] .tbl .tot td{background:var(--surface-2)} [data-theme="dark"] .tbl tr.tot{background:var(--surface-2)} [data-theme="dark"] .tbl tr.warn-row td{background:#3A2E18} [data-theme="dark"] .tbl tr.warn-row{border-color:#6B5520;background:#2A2310} /* расписание: литеральные светлые фоны в iq-portal.css */ [data-theme="dark"] .hrs{background:var(--surface)} [data-theme="dark"] .nm .rm:hover{background:#3A1F1F;color:#F08A7A}