/* Палитра и темы — общий слой для всех страниц: дашборда, заданий и плеера.
Раньше каждый файл держал свои цвета: app.css один набор, simple.css
почти такой же, player.css дописывал третий. Страницы от этого медленно
расходились, а чек-лист и полосы времени сливались с фоном — белое на
почти белом, границы в один тон с подложкой.
Здесь одно место на все цвета и четыре темы. Правило простое: фон
страницы ВСЕГДА темнее панели, а граница панели видна. Тогда чек-лист,
таблица и полосы времени читаются как отдельные предметы, а не как пятна.
Полосы времени рисуются на холсте и цвета читают отсюда же — переменные
с приставкой `--tl-`; timeline.js берёт их через getComputedStyle. */
/* Радиус ровно один на весь интерфейс и живёт одной переменной.
Раньше углы были прямые везде, и это оказалось слишком жёстко: страница
из одних прямых углов читается как чертёж, а не как рабочий стол. Но и
зоопарк радиусов (3, 5, 7, 10 px — все встречались в проекте) выглядел
случайностью. Отсюда правило: скругление есть, оно маленькое, и во всём
интерфейсе оно ОДНО. Своих радиусов в файлах страниц не заводить —
писать `var(--r)`. Блоки на полосах времени рисуются на холсте и
остаются прямыми: пиксельный прямоугольник там точнее показывает
границы события. */
:root { --r: 3px; }
:root,
:root[data-theme="light"] {
color-scheme: light;
/* Контраст намеренно сбавлен против первой версии: фон был на две
ступени темнее панели, а границы — почти чернильные, и таблица из
этого получалась расчерченной сеткой. Панель по-прежнему светлее
фона и её край видно, но спорить с содержимым он перестал. */
--bg: #eef1f4; /* фон страницы: всегда темнее панели */
--panel: #ffffff; /* карточки, таблицы, панели */
--panel-2: #f5f7f9; /* вложенное: шапка таблицы, подсписок отметок */
--panel-3: #e7ecf0; /* дорожки, полоски прогресса */
--line: #d7dee4; /* граница панели — её должно быть видно */
--line-soft: #e6eaee; /* разделители внутри панели */
--hover: #f1f6fa;
--ink: #27313d;
--ink-2: #4b5a67;
--grey: #78848f;
--accent: #2f6f9f;
--accent-2: #3d86bd;
--accent-ink: #ffffff;
--accent-soft: #d9e8f5;
--green: #2e9e4f;
--green-dark: #1f7a3a;
--green-soft: #e8f5ec;
--orange: #c07914;
--red: #c0392b;
--red-soft: #fae9e7;
--shadow: rgba(20, 40, 60, .18);
--bar-bg: #1c2733; /* планка под кадром — продолжение чёрного поля */
--bar-ink: #dbe3ea;
--bar-btn: rgba(255, 255, 255, .10);
--bar-btn-on: rgba(255, 255, 255, .20);
--tl-bg: #eef2f5;
--tl-lane-a: #e4eaf0;
--tl-lane-b: #e9eef2;
--tl-ruler-a: #f5f8fa;
--tl-ruler-b: #e3e9ee;
--tl-tick: #4e5c68;
--tl-tick-soft: #b3bfc9;
--tl-guide: rgba(120, 140, 160, .22);
--tl-text: #38454f;
--tl-edge: #a7b3bd;
--tl-buf: #b9cfe0;
--tl-cursor: #c0392b;
--tl-win: #3d86bd;
--tl-sel: #10161c;
}
/* Бумага: тёплая и чуть плотнее по контрасту. Тем, кому синевато-серое
к вечеру начинает резать глаз. */
:root[data-theme="paper"] {
color-scheme: light;
--bg: #ece6da;
--panel: #fffdf7;
--panel-2: #f6f2e9;
--panel-3: #ebe5d8;
--line: #d3cab6;
--line-soft: #e4ddcd;
--hover: #f6f0e3;
--ink: #332c20;
--ink-2: #574e3e;
--grey: #837968;
--accent: #7c5a2e;
--accent-2: #96703c;
--accent-ink: #fffdf7;
--accent-soft: #eee0c8;
--green: #3f7d3f;
--green-dark: #2c5f2c;
--green-soft: #e9f0e2;
--orange: #b26a12;
--red: #a8352a;
--red-soft: #f6e4df;
--shadow: rgba(60, 45, 20, .20);
--bar-bg: #2a241b;
--bar-ink: #ece3d2;
--bar-btn: rgba(255, 250, 235, .10);
--bar-btn-on: rgba(255, 250, 235, .20);
--tl-bg: #f2ecdf;
--tl-lane-a: #e9e2d3;
--tl-lane-b: #ede7da;
--tl-ruler-a: #f8f3e8;
--tl-ruler-b: #e8e0d0;
--tl-tick: #4d4536;
--tl-tick-soft: #bcb19b;
--tl-guide: rgba(120, 105, 80, .22);
--tl-text: #3d3527;
--tl-edge: #b3a890;
--tl-buf: #d7c8a7;
--tl-cursor: #a8352a;
--tl-win: #7c5a2e;
--tl-sel: #1a1409;
}
/* Графит: тёмная. Смотреть ролик проще в темноте — белая страница вокруг
чёрного кадра слепит и сажает глаза за смену. */
:root[data-theme="slate"] {
color-scheme: dark;
--bg: #171c22;
--panel: #1e242b;
--panel-2: #242c34;
--panel-3: #2c353e;
--line: #333c46;
--line-soft: #29313a;
--hover: #27313a;
--ink: #dee5ec;
--ink-2: #b2bdc7;
--grey: #8794a1;
--accent: #4d9cd6;
--accent-2: #64aee2;
--accent-ink: #0e1216;
--accent-soft: #23384a;
--green: #4cbf6f;
--green-dark: #7fd79a;
--green-soft: #1d3125;
--orange: #e0a33f;
--red: #e46a5c;
--red-soft: #3a221f;
--shadow: rgba(0, 0, 0, .55);
--bar-bg: #10151a;
--bar-ink: #cbd6e0;
--bar-btn: rgba(255, 255, 255, .10);
--bar-btn-on: rgba(255, 255, 255, .20);
--tl-bg: #1a2027;
--tl-lane-a: #202832;
--tl-lane-b: #232c35;
--tl-ruler-a: #262f39;
--tl-ruler-b: #1b232b;
--tl-tick: #9aa8b5;
--tl-tick-soft: #46525e;
--tl-guide: rgba(160, 180, 200, .16);
--tl-text: #c3ced8;
--tl-edge: #3c4753;
--tl-buf: #35506a;
--tl-cursor: #e4645a;
--tl-win: #4d9cd6;
--tl-sel: #ffffff;
}
/* Контраст: чёрные границы и серый фон. Для дешёвых матриц и для тех, у
кого светлая тема расплывается — на них тонкая серо-голубая рамка не
видна вовсе, и панель кажется просто куском фона. */
:root[data-theme="contrast"] {
color-scheme: light;
--bg: #d7d7d7;
--panel: #ffffff;
--panel-2: #ebebeb;
--panel-3: #cfcfcf;
--line: #4a4a4a;
--line-soft: #8a8a8a;
--hover: #e6eff7;
--ink: #000000;
--ink-2: #1a1a1a;
--grey: #454545;
--accent: #0b4f86;
--accent-2: #0f66ad;
--accent-ink: #ffffff;
--accent-soft: #cfe2f2;
--green: #1a7a34;
--green-dark: #115c26;
--green-soft: #dcefe1;
--orange: #8f5300;
--red: #a3140b;
--red-soft: #f7dedb;
--shadow: rgba(0, 0, 0, .35);
--bar-bg: #000000;
--bar-ink: #ffffff;
--bar-btn: rgba(255, 255, 255, .16);
--bar-btn-on: rgba(255, 255, 255, .30);
--tl-bg: #ededed;
--tl-lane-a: #e0e0e0;
--tl-lane-b: #e9e9e9;
--tl-ruler-a: #f6f6f6;
--tl-ruler-b: #d8d8d8;
--tl-tick: #000000;
--tl-tick-soft: #6f6f6f;
--tl-guide: rgba(0, 0, 0, .28);
--tl-text: #000000;
--tl-edge: #333333;
--tl-buf: #9dbcd6;
--tl-cursor: #a3140b;
--tl-win: #0f66ad;
--tl-sel: #000000;
}
/* ------------------------------------------------- переключатель темы */
/* Живёт в шапке любой страницы: ``, а
разметку в него кладёт theme.js. Выпадающий список, а не набор кнопок:
тему меняют раз в месяц, и четыре кнопки в шапке — это четыре кнопки,
которые каждый день занимают место зря. */
.themeSel {
font: inherit; font-size: 12px;
padding: 3px 6px;
border: 1px solid var(--line); border-radius: var(--r);
background: var(--panel);
color: var(--ink-2);
cursor: pointer;
}
.themeSel:hover { background: var(--hover); color: var(--ink); }
/* ---------------------------------------------------- верхняя полоса */
/* Навигация, одна и та же на всех страницах: ``, содержимое кладёт nav.js. Лежит тут, а не в
simple.css, потому что стоит и на дашборде тоже, а тот про simple.css
не знает.
Пустая заглушка держит высоту: набор вкладок зависит от роли, роль
приходит с сервера, и без заглушки страница дёргалась бы на каждом
открытии. */
.topnav {
display: flex; align-items: center; gap: 2px; flex-wrap: nowrap;
/* На дашборде — колонка флексбокса: без этого полосу сплющит
таблица, которая забирает всю высоту. */
flex: none;
/* Высота ЖЁСТКАЯ и свой кегль — не наследованный. Полоса стоит на всех
страницах, а базовый шрифт у них разный (дашборд повторяет tkinter и
живёт на 12px, остальные — на 13px), и от одного этого полоса меняла
высоту при переходе «сбор данных → задания»: страница дёргалась на
ровном месте. По той же причине не переносим: перенос — это ещё одна
высота, теперь уже от ширины окна. */
height: 38px;
font: 13px/18px "Segoe UI", "Noto Sans", Arial, sans-serif;
overflow: hidden;
padding: 0 12px;
background: var(--panel-2);
border-bottom: 1px solid var(--line);
}
.topnav a {
padding: 4px 12px; text-decoration: none; color: var(--accent);
border: 1px solid transparent; border-radius: var(--r);
white-space: nowrap;
}
.topnav a:hover { background: var(--hover); }
/* Где мы сейчас — вкладкой, как в /tasks: та же заливка панелью, та же
рамка, тот же жирный. */
.topnav a.on { background: var(--panel); border-color: var(--line);
color: var(--ink); font-weight: 600; }
.topnav a .count { color: var(--grey); font-weight: normal; margin-left: 4px; }
/* Карманы для страницы: слева сразу за вкладками, справа перед именем
вошедшего. Что в них лежит — дело страницы (плеер кладёт туда выбор
схемы и плашки состояния), полоса только держит место. Пустой карман
не занимает ничего. */
.topnav .navslot { display: flex; align-items: center; gap: 6px;
min-width: 0; overflow: hidden; }
.topnav .navslot:empty { display: none; }
.topnav .grow { flex: 1 1 auto; }
.topnav .me { color: var(--grey); font-size: 12px; margin-right: 6px; }
.topnav a.out { color: var(--grey); }
.topnav a .count:empty { display: none; }