/*
PVlab Glass — переиспользуемые стеклянные поверхности и контролы.
Состоит из:
1. Базовая поверхность (.pvlab-glass, .pvlab-glass--strong) — карточки/модалки.
2. Контролы формы — input (.pvlab-glass-input), кнопка (.pvlab-glass-button),
чекбокс (.pvlab-glass-checkbox), input-wrapper с toggle (.pvlab-input-wrapper).
3. Хорошо выраженный glassmorphism: сильный backdrop-blur + двойной border
(внешний + inset highlight) + многослойная тень + лёгкая внутренняя
светящаяся подсветка.
Параметры открыты CSS-переменными — на конкретной странице можно перебить:
:root { --pvlab-glass-blur: 40px; --pvlab-glass-bg: rgba(255,255,255,0.6); }
Версия 1.1 — апрель 2026 (усилен glass-эффект, добавлены hover-состояния,
добавлены контролы input-wrapper / toggle / checkbox).
*/
/* ── Steppe (display-шрифт для логотипа PV Lab.) ──────────────────────────
Подключается здесь, в общем glass-файле — чтобы быть доступным во всех
layouts (главный _Layout, _LoginLayout, и любые будущие).
Раньше @font-face жил только в pvlab-login.css → лого в navbar получал
fallback Inter. Перенесено в glass.css апрель 2026. */
@font-face { font-family: 'Steppe'; font-style: normal; font-display: swap; font-weight: 300;
src: url('/fonts/Steppe/Web-PS/Steppe-Light.woff2') format('woff2'),
url('/fonts/Steppe/Web-TT/Steppe-Light.woff') format('woff'); }
@font-face { font-family: 'Steppe'; font-style: normal; font-display: swap; font-weight: 400;
src: url('/fonts/Steppe/Web-PS/Steppe-Regular.woff2') format('woff2'),
url('/fonts/Steppe/Web-TT/Steppe-Regular.woff') format('woff'); }
@font-face { font-family: 'Steppe'; font-style: normal; font-display: swap; font-weight: 500;
src: url('/fonts/Steppe/Web-PS/Steppe-Medium.woff2') format('woff2'),
url('/fonts/Steppe/Web-TT/Steppe-Medium.woff') format('woff'); }
@font-face { font-family: 'Steppe'; font-style: normal; font-display: swap; font-weight: 600;
src: url('/fonts/Steppe/Web-PS/Steppe-SemiBold.woff2') format('woff2'),
url('/fonts/Steppe/Web-TT/Steppe-SemiBold.woff') format('woff'); }
@font-face { font-family: 'Steppe'; font-style: normal; font-display: swap; font-weight: 700;
src: url('/fonts/Steppe/Web-PS/Steppe-Bold.woff2') format('woff2'),
url('/fonts/Steppe/Web-TT/Steppe-Bold.woff') format('woff'); }
@font-face { font-family: 'Steppe'; font-style: normal; font-display: swap; font-weight: 900;
src: url('/fonts/Steppe/Web-PS/Steppe-Black.woff2') format('woff2'),
url('/fonts/Steppe/Web-TT/Steppe-Black.woff') format('woff'); }
:root {
/* ── Структурные переменные (НЕ зависят от темы) ───────────────────────── */
--pvlab-glass-blur: 36px;
--pvlab-glass-radius: 24px;
--pvlab-glass-radius-pill: 999px;
/* Z-index scale. Магические числа в CSS — источник конфликтов overlay'ев.
Все новые слои берут значение отсюда, не пишем z-index числом. */
--pvlab-z-back: 0; /* декоративный фон (блобы) */
--pvlab-z-content: 1; /* основной контент над фоном */
--pvlab-z-cursor: 2; /* кастомный курсор-следователь (login) */
--pvlab-z-sticky: 100; /* sticky-navbar */
--pvlab-z-dropdown: 1000; /* popover'ы / выпадающие списки */
--pvlab-z-modal-backdrop: 1040; /* затемнение модалки */
--pvlab-z-modal: 1050; /* модальное окно */
--pvlab-z-toast: 1100; /* всплывающие уведомления */
--pvlab-z-tooltip: 1200; /* тултипы — самый верх */
/* ── СВЕТЛАЯ ТЕМА (по умолчанию) ───────────────────────────────────────── */
/* Фоновые слои страницы. */
--pvlab-page-bg: #dde3ec;
--pvlab-surface-bg: #ffffff; /* плотный фон карточек/нав-зон */
--pvlab-divider: rgba(15, 23, 42, 0.06);
--pvlab-row-hover: rgba(255, 255, 255, 0.45);
--pvlab-row-selected: rgba(61, 182, 255, 0.08);
/* Glass — сильно выраженный (opacity, inset highlight, тонкий тёмный
внутренний border снизу для «грани стекла»). */
--pvlab-glass-bg: rgba(255, 255, 255, 0.70);
--pvlab-glass-bg-strong: rgba(255, 255, 255, 0.88);
--pvlab-glass-border: rgba(255, 255, 255, 0.92);
--pvlab-glass-border-strong: rgba(255, 255, 255, 1);
--pvlab-glass-highlight: rgba(255, 255, 255, 0.85); /* inset верхняя подсветка */
--pvlab-glass-edge: rgba(15, 23, 42, 0.06); /* inset нижняя грань */
--pvlab-glass-shadow: 0 14px 40px rgba(15, 23, 42, 0.14),
0 2px 8px rgba(15, 23, 42, 0.06);
--pvlab-glass-shadow-hover: 0 20px 56px rgba(15, 23, 42, 0.20),
0 4px 12px rgba(15, 23, 42, 0.10);
/* Поверхность таблицы (карточка + toolbar). */
--pvlab-table-bg: rgba(255, 255, 255, 0.62);
--pvlab-table-border: rgba(255, 255, 255, 0.85);
--pvlab-table-thead-bg: rgba(255, 255, 255, 0.55);
--pvlab-table-row-border: rgba(15, 23, 42, 0.05);
/* Input в toolbar (search, page-size). */
--pvlab-input-bg: rgba(255, 255, 255, 0.55);
--pvlab-input-bg-hover: rgba(255, 255, 255, 0.78);
--pvlab-input-bg-focus: rgba(255, 255, 255, 0.92);
--pvlab-input-border: rgba(15, 23, 42, 0.08);
/* Акценты.
--pvlab-accent (#3DB6FF) ОК для декора, но не для текста на светлом фоне (~2.5:1).
Для текста-ссылок везде использовать --pvlab-accent-dark (4.7:1). */
--pvlab-accent: #3DB6FF;
--pvlab-accent-hover: #1796db;
--pvlab-accent-dark: #0e6fa3;
--pvlab-accent-text: var(--pvlab-accent-dark); /* читабельный акцент-как-текст */
--pvlab-danger: #c5253a;
--pvlab-text: #1a1a23;
--pvlab-text-muted: #4b5160; /* 4.55:1 на #dde3ec */
--pvlab-text-placeholder: #7a8190; /* 4.5:1 на белом */
--pvlab-text-on-accent: #ffffff;
/* Шапка таблицы — в light повторяет muted (фигма про dark). */
--pvlab-thead-text: var(--pvlab-text-muted);
/* Цвет thumb'а скроллбара таблицы в light. */
--pvlab-scrollbar-thumb: rgba(15, 23, 42, 0.18);
--pvlab-scrollbar-thumb-hover: rgba(15, 23, 42, 0.32);
}
/* ── ТЁМНАЯ ТЕМА (data-theme="dark" на или ) ──────────────────
Все color-tokens переопределяются; структурные (radius, blur, z-index) — нет.
Логин — собственный layout, его собственная палитра (см. pvlab-login.css).
КЛЮЧЕВОЙ ПРИНЦИП DARK-GLASS: поверхности (карточки/pills/navbar/input)
должны быть СВЕТЛЕЕ фона страницы, а не темнее. Это даёт эффект «приподнятой
панели, отражающей свет». Раньше было наоборот (карточка #161B2A темнее
фона #0A0F1E) — выглядело как «впадина», что нарушает glass-логику. */
[data-theme="dark"] {
/* ТОЧНЫЕ значения из фигмы pharma-lab (node 454:3899). Все цвета вычерпаны
из живых design tokens — никакого «угадывания». */
--pvlab-page-bg: #222836;
--pvlab-surface-bg: #2a3142;
--pvlab-divider: rgba(229, 233, 235, 0.18);
--pvlab-row-hover: rgba(255, 255, 255, 0.05);
--pvlab-row-selected: rgba(246, 248, 249, 0.38);
/* Glass — приподнятые поверхности. Фон оставляем как в фигме (0.20 / 0.22),
а бордеры понижаем — оригинальные 0.32 / 0.41 на тёмном фоне читаются как
«обведённые меловым контуром». 0.18 / 0.22 даёт мягкую грань без визуального шума. */
--pvlab-glass-bg: rgba(255, 255, 255, 0.20);
--pvlab-glass-bg-strong: rgba(255, 255, 255, 0.22);
--pvlab-glass-border: rgba(255, 255, 255, 0.18);
--pvlab-glass-border-strong: rgba(255, 255, 255, 0.22);
--pvlab-glass-highlight: rgba(255, 255, 255, 0.18);
--pvlab-glass-edge: rgba(0, 0, 0, 0.30);
--pvlab-glass-shadow: 0 14px 40px rgba(0, 0, 0, 0.45),
0 2px 8px rgba(0, 0, 0, 0.25);
--pvlab-glass-shadow-hover: 0 20px 56px rgba(0, 0, 0, 0.55),
0 4px 12px rgba(0, 0, 0, 0.32);
/* Таблица — более прозрачное стекло, чем pills (как в фигме).
Border у самой карточки приглушён до 0.10 — между ячейками остаётся ярче.
thead-bg НЕ прозрачный — sticky-шапка должна перекрывать строки при скролле
(полупрозрачный фон страницы + сильный blur даёт «морозное стекло»). */
--pvlab-table-bg: rgba(255, 255, 255, 0.14);
--pvlab-table-border: rgba(255, 255, 255, 0.10);
--pvlab-table-thead-bg: rgba(35, 42, 56, 0.78);
--pvlab-table-row-border: rgba(229, 233, 235, 0.18);
/* Цвет thumb'а вертикального/горизонтального скроллбара таблицы. */
--pvlab-scrollbar-thumb: rgba(255, 255, 255, 0.18);
--pvlab-scrollbar-thumb-hover: rgba(255, 255, 255, 0.28);
--pvlab-input-bg: rgba(255, 255, 255, 0.07);
--pvlab-input-bg-hover: rgba(255, 255, 255, 0.10);
--pvlab-input-bg-focus: rgba(255, 255, 255, 0.14);
--pvlab-input-border: rgba(255, 255, 255, 0.18);
--pvlab-accent: #3da7f3; /* Text&icon/Brand */
--pvlab-accent-hover: #6ec0f7;
--pvlab-accent-dark: #6ec0f7;
--pvlab-accent-text: #6ec0f7;
--pvlab-danger: #ff6b7a;
--pvlab-text: #ffffff; /* Text&icon/Primery */
--pvlab-text-muted: #a6a6a6; /* Text&icon/Tertiary */
--pvlab-text-placeholder: rgba(255, 255, 255, 0.6);
--pvlab-text-on-accent: #ffffff;
/* Шапка таблицы — отдельный токен, ярче muted (как в фигме #dadada). */
--pvlab-thead-text: #dadada;
}
/* ── Floating tooltip (data-tooltip="...") ───────────────────────────────
Рисуется через JS (pvlab-tooltip.js) — это floating-элемент в
с position: fixed. CSS-only ::after был бы проще, но обрезался
overflow:hidden / overflow:auto родителей (например, table-responsive).
Сам элемент — `.pvlab-tooltip-floating`. Стиль — «чёрное стекло».
Использование в HTML:
ВАЖНО: НЕ ставьте одновременно `title="..."` — иначе нативный browser-tooltip
будет показываться поверх. Для screen-reader используйте aria-label. */
.pvlab-tooltip-floating {
position: fixed;
top: 0;
left: 0;
padding: 6px 10px;
background: rgba(20, 22, 30, 0.92);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 8px;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
color: #ffffff;
font-size: 12px;
font-weight: 400;
line-height: 1.3;
white-space: nowrap;
opacity: 0;
pointer-events: none;
z-index: var(--pvlab-z-tooltip, 1200);
transform: translateY(-4px);
transition: opacity 180ms ease, transform 180ms ease;
}
.pvlab-tooltip-floating.is-visible {
opacity: 1;
transform: translateY(0);
}
/* В light — оставляем тёмный фон, чуть мягче. */
:root:not([data-theme="dark"]) .pvlab-tooltip-floating {
background: rgba(15, 23, 42, 0.92);
border-color: rgba(0, 0, 0, 0.06);
}
/* Тач-устройства: hover отсутствует — JS сам это игнорирует через pointer-events. */
/* ── Базовая стеклянная поверхность ─────────────────────────────────────── */
.pvlab-glass {
background: var(--pvlab-glass-bg);
border: 1px solid var(--pvlab-glass-border);
border-radius: var(--pvlab-glass-radius);
box-shadow: inset 0 1px 0 var(--pvlab-glass-highlight), var(--pvlab-glass-shadow);
backdrop-filter: blur(var(--pvlab-glass-blur)) saturate(140%);
-webkit-backdrop-filter: blur(var(--pvlab-glass-blur)) saturate(140%);
}
.pvlab-glass--strong {
background: var(--pvlab-glass-bg-strong);
border-color: var(--pvlab-glass-border-strong);
}
/* ── Pill-input в стекле ────────────────────────────────────────────────── */
.pvlab-glass-input {
display: block;
width: 100%;
padding: 14px 22px;
font: inherit;
color: var(--pvlab-text);
/* Лёгкий вертикальный градиент даёт «грань стекла»: сверху ярче (свет),
снизу темнее. С inset highlight + inset edge это читается явно. */
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.62) 100%),
var(--pvlab-glass-bg-strong);
border: 1px solid var(--pvlab-glass-border);
border-radius: var(--pvlab-glass-radius-pill);
box-shadow:
inset 0 1px 0 var(--pvlab-glass-highlight),
inset 0 -1px 0 var(--pvlab-glass-edge),
var(--pvlab-glass-shadow);
backdrop-filter: blur(var(--pvlab-glass-blur)) saturate(160%);
-webkit-backdrop-filter: blur(var(--pvlab-glass-blur)) saturate(160%);
outline: none;
user-select: text;
transition:
border-color 280ms ease,
box-shadow 280ms ease,
background-color 280ms ease,
transform 220ms ease;
}
.pvlab-glass-input::placeholder {
color: var(--pvlab-text-placeholder, #7a8190);
transition: opacity 280ms ease;
}
/* Hover — лёгкое увеличение (как у чекбокса) + чуть ярче border. */
.pvlab-glass-input:hover {
border-color: rgba(255, 255, 255, 1);
transform: scale(1.015);
}
.pvlab-glass-input:focus {
background: rgba(255, 255, 255, 0.96);
border-color: rgba(61, 182, 255, 0.55);
box-shadow:
inset 0 1px 0 var(--pvlab-glass-highlight),
0 0 0 3px rgba(61, 182, 255, 0.16),
var(--pvlab-glass-shadow);
}
.pvlab-glass-input:focus::placeholder {
opacity: 0.55;
}
.pvlab-glass-input.is-invalid,
.pvlab-glass-input[aria-invalid="true"] {
border-color: rgba(220, 53, 69, 0.6);
box-shadow:
inset 0 1px 0 var(--pvlab-glass-highlight),
0 0 0 4px rgba(220, 53, 69, 0.16),
var(--pvlab-glass-shadow);
}
/* ── Input wrapper с правой кнопкой (toggle password / clear / unit) ──── */
.pvlab-input-wrapper {
position: relative;
}
.pvlab-input-wrapper > .pvlab-glass-input {
padding-right: 52px; /* место под кнопку справа */
}
.pvlab-input-toggle {
position: absolute;
top: 50%;
right: 14px;
transform: translateY(-50%);
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
background: transparent;
border: 0;
border-radius: 50%;
color: #6e7480;
cursor: pointer;
transition: color 160ms ease, background-color 160ms ease;
}
.pvlab-input-toggle:hover { color: var(--pvlab-text); background: rgba(255, 255, 255, 0.6); }
.pvlab-input-toggle:active { background: rgba(255, 255, 255, 0.85); }
.pvlab-input-toggle:focus-visible {
outline: 2px solid rgba(61, 182, 255, 0.55);
outline-offset: 2px;
}
/* В toggle-кнопке две иконки (eye / eye-off); JS переключает data-shown,
CSS показывает соответствующий