/* Тема (тёмная/светлая/фисташковая/оранжевая/розовая, см. Profile.theme/CLAUDE.md "Тема оформления") -
переменные объявлены здесь, а не в categories.css, потому что styles.css
грузится первым на каждой странице (см. порядок в шаблонах) - но
:root-переменные каскадируются глобально независимо от того, в каком из
двух файлов их использует конкретное правило.
Тёмные значения ниже - ровно те цвета, что были захардкожены в CSS до
появления тем, один в один - так что тема "dark"/её отсутствие (ни один
Profile.theme ещё не заполнен, см. context_processors.py) выглядит
пиксель-в-пиксель как приложение выглядело всегда, без единой визуальной
регрессии для существующих пользователей.
data-theme ставится на сервером (см. каждый шаблон) - тема
осознанный выбор пользователя, сохранённый в профиле, а не производная
от системных настроек ОС/браузера. Единственное исключение - вариант
"auto" ("Как в системе", Profile.AUTO): сервер по-прежнему буквально
пишет data-theme="auto", но сами переменные для этого значения ниже
переопределены внутри @media (prefers-color-scheme: light) - то есть
именно для этой одной темы палитру фактически выбирает браузер/ОС в
момент рендера CSS, а не Django/Python.
Не все цвета в CSS заведены сюда - точечные исключения (тултип на неделе,
белая подложка QR-кода, белая иконка на полупрозрачном чёрном кружке над
картинкой события) намеренно остались как есть буквальным hex - см.
комментарии на местах их использования. */
:root {
/* Фоны, от самого глубокого (html/body) до самого светлого/приподнятого */
--bg-page: #1f2a38;
--bg-surface: #2b3947;
--bg-surface-2: #232f3b;
--bg-surface-3: #26313f;
--bg-surface-4: #2f3d4f;
--bg-header: #34495e;
--bg-hover: #3d566e;
--bg-inset: #1c262f;
--bg-danger-subtle: #3a1620;
--today-highlight: #3d6690;
/* Текст */
--text-primary: #ecf0f1;
--text-secondary: #95a5a6;
--text-tertiary: #7f8c8d;
--text-muted: #d5dbdb;
--text-faint: #b0bec5;
--text-link-muted: #bfced0;
--text-dim: #5c6b7a;
--text-danger: #f1948a;
/* Акцентный синий (фирменный градиент кнопок/активных состояний) */
--accent: #5ba3f2;
--accent-dark: #3d78c2;
--accent-solid: #4a90e2;
/* Смысловые статусные цвета */
--color-success: #4ac97a;
--color-warning: #f1c40f;
--color-danger: #e74c3c;
--color-danger-grad-start: #ef5b4e;
--color-danger-grad-end: #c0392b;
/* RGB-триплеты (без #) - для rgba(var(--x-rgb), alpha) в полупрозрачных
наложениях/тенях, где нужен именно альфа-канал, а не сплошной цвет. */
--overlay-rgb: 255, 255, 255;
--accent-solid-rgb: 74, 144, 226;
--accent-rgb: 91, 163, 242;
--danger-rgb: 231, 76, 60;
--warning-rgb: 241, 196, 15;
--text-primary-rgb: 236, 240, 241;
--success-rgb: 74, 201, 122;
}
:root[data-theme="light"] {
--bg-page: #eef2f6;
--bg-surface: #ffffff;
--bg-surface-2: #f4f6f8;
--bg-surface-3: #e9edf1;
--bg-surface-4: #dfe4ea;
--bg-header: #dde3ea;
--bg-hover: #e3e9ef;
--bg-inset: #e4e8ec;
--bg-danger-subtle: #f3d2ce;
--today-highlight: #cfe0f5;
--text-primary: #1f2a38;
--text-secondary: #5b6b78;
--text-tertiary: #748393;
--text-muted: #46525c;
--text-faint: #5c6b78;
--text-link-muted: #3d78c2;
--text-dim: #7f8c98;
--text-danger: #c0392b;
--accent: #3d78c2;
--accent-dark: #2c5c98;
--accent-solid: #3d78c2;
--color-success: #2e9e5b;
--color-warning: #b8860b;
--color-danger: #c0392b;
--color-danger-grad-start: #d9463a;
--color-danger-grad-end: #a52a20;
/* Тёмный (не белый) оверлей - на светлой поверхности полупрозрачный белый
был бы попросту не виден; те же самые alpha-значения, что и в тёмной
теме, дают тот же по силе, но инвертированный по направлению эффект. */
--overlay-rgb: 20, 30, 40;
--accent-solid-rgb: 61, 120, 194;
--accent-rgb: 61, 120, 194;
--danger-rgb: 192, 57, 43;
--warning-rgb: 184, 134, 11;
--text-primary-rgb: 31, 42, 56;
--success-rgb: 46, 158, 91;
}
/* "Как в системе" (auto, Profile.AUTO) - единственная тема, которая
действительно завязана на prefers-color-scheme, а не на серверный выбор.
Сам код 'auto' не переопределяет ни одной переменной безусловно: при
тёмной ОС/браузере ничего из этого блока не применяется, и data-theme=
"auto" просто наследует тёмные значения из безусловного :root в самом
верху файла - тот же эффект, что и у полного отсутствия темы. При
светлой ОС/браузере (только тогда матчится @media ниже) применяется
ровно тот же набор переменных, что и у явной темы "light" выше -
дублирование значений между этим блоком и "light" сознательное, тот же
принцип "маленький независимый кусок вместо сквозной абстракции", что
уже используется всеми пастельными темами ниже (см. их собственные
комментарии). */
@media (prefers-color-scheme: light) {
:root[data-theme="auto"] {
--bg-page: #eef2f6;
--bg-surface: #ffffff;
--bg-surface-2: #f4f6f8;
--bg-surface-3: #e9edf1;
--bg-surface-4: #dfe4ea;
--bg-header: #dde3ea;
--bg-hover: #e3e9ef;
--bg-inset: #e4e8ec;
--bg-danger-subtle: #f3d2ce;
--today-highlight: #cfe0f5;
--text-primary: #1f2a38;
--text-secondary: #5b6b78;
--text-tertiary: #748393;
--text-muted: #46525c;
--text-faint: #5c6b78;
--text-link-muted: #3d78c2;
--text-dim: #7f8c98;
--text-danger: #c0392b;
--accent: #3d78c2;
--accent-dark: #2c5c98;
--accent-solid: #3d78c2;
--color-success: #2e9e5b;
--color-warning: #b8860b;
--color-danger: #c0392b;
--color-danger-grad-start: #d9463a;
--color-danger-grad-end: #a52a20;
--overlay-rgb: 20, 30, 40;
--accent-solid-rgb: 61, 120, 194;
--accent-rgb: 61, 120, 194;
--danger-rgb: 192, 57, 43;
--warning-rgb: 184, 134, 11;
--text-primary-rgb: 31, 42, 56;
--success-rgb: 46, 158, 91;
}
}
/* Нежная пастельная зелёная (фисташковая) - та же светлая по духу палитра,
что и "light" выше (белые/светлые поверхности, тёмный текст), просто с
тёплым зелёным оттенком вместо нейтрально-серого/синего - оверлей и
акцент подобраны под ту же логику контраста, что и в "light". */
:root[data-theme="pistachio"] {
--bg-page: #eef3e6;
--bg-surface: #fbfdf8;
--bg-surface-2: #eef3e6;
--bg-surface-3: #e3ebd9;
--bg-surface-4: #d7e2c9;
--bg-header: #d3e0c4;
--bg-hover: #dbe6cd;
--bg-inset: #e6eedb;
--bg-danger-subtle: #f6dcd6;
--today-highlight: #d0e8d4;
--text-primary: #2f3a26;
--text-secondary: #6b7a5e;
--text-tertiary: #7f8c74;
--text-muted: #46523b;
--text-faint: #5c6b52;
--text-link-muted: #6a8f4e;
--text-dim: #8a9680;
--text-danger: #b1533f;
--accent: #9fc77e;
--accent-dark: #6b9a4f;
--accent-solid: #7fae5a;
--color-success: #5fae62;
--color-warning: #b8923a;
--color-danger: #b1533f;
--color-danger-grad-start: #c56b57;
--color-danger-grad-end: #96412f;
--overlay-rgb: 40, 50, 30;
--accent-solid-rgb: 127, 174, 90;
--accent-rgb: 159, 199, 126;
--danger-rgb: 177, 83, 63;
--warning-rgb: 184, 146, 58;
--text-primary-rgb: 47, 58, 38;
--success-rgb: 95, 174, 98;
}
/* Нежная пастельная оранжевая (персиковая) - тот же принцип, что и у
"pistachio" выше, только тёплый оранжево-персиковый оттенок вместо
зелёного. */
:root[data-theme="orange"] {
--bg-page: #fdf3ea;
--bg-surface: #fffaf5;
--bg-surface-2: #fbeee0;
--bg-surface-3: #f6e3cf;
--bg-surface-4: #efd6bb;
--bg-header: #eccba9;
--bg-hover: #f2dcc4;
--bg-inset: #f5e6d3;
--bg-danger-subtle: #f8d9d3;
--today-highlight: #fbe0c2;
--text-primary: #4a3423;
--text-secondary: #8a6b4f;
--text-tertiary: #9c8267;
--text-muted: #5c4530;
--text-faint: #6e5540;
--text-link-muted: #c97b3a;
--text-dim: #a68d76;
--text-danger: #b1533f;
--accent: #f0a860;
--accent-dark: #d17f3e;
--accent-solid: #e28f4a;
--color-success: #7fa563;
--color-warning: #d4a13a;
--color-danger: #b1533f;
--color-danger-grad-start: #c56b57;
--color-danger-grad-end: #96412f;
--overlay-rgb: 60, 40, 20;
--accent-solid-rgb: 226, 143, 74;
--accent-rgb: 240, 168, 96;
--danger-rgb: 177, 83, 63;
--warning-rgb: 212, 161, 58;
--text-primary-rgb: 74, 52, 35;
--success-rgb: 127, 165, 99;
}
/* Нежная пастельная розовая - тот же принцип, что и у "pistachio"/"orange"
выше, только тёплый розовый оттенок. success/warning переподобраны под
контраст с розовым фоном (тот же приём, что и у остальных пастельных
палитр); danger - те же самые значения, что в pistachio/orange, а не
переподобранные - там они тоже совпадают между собой один в один, так что
это не отдельное исключение, а уже устоявшийся across pastel-тем выбор. */
:root[data-theme="pink"] {
--bg-page: #fceef4;
--bg-surface: #fffbfd;
--bg-surface-2: #fbe9f1;
--bg-surface-3: #f6dbe8;
--bg-surface-4: #efc7dc;
--bg-header: #ecbcd6;
--bg-hover: #f2d2e4;
--bg-inset: #f7e2ee;
--bg-danger-subtle: #f9d7dd;
--today-highlight: #f5c6de;
--text-primary: #4a2438;
--text-secondary: #8a5570;
--text-tertiary: #9c6f85;
--text-muted: #5c3348;
--text-faint: #6e4058;
--text-link-muted: #c94f8a;
--text-dim: #a67f92;
--text-danger: #b1533f;
--accent: #f0a8c8;
--accent-dark: #cc4d85;
--accent-solid: #de7aa8;
--color-success: #5fae62;
--color-warning: #c28a3d;
--color-danger: #b1533f;
--color-danger-grad-start: #c56b57;
--color-danger-grad-end: #96412f;
--overlay-rgb: 60, 30, 45;
--accent-solid-rgb: 222, 122, 168;
--accent-rgb: 240, 168, 200;
--danger-rgb: 177, 83, 63;
--warning-rgb: 194, 138, 61;
--text-primary-rgb: 74, 36, 56;
--success-rgb: 95, 174, 98;
}
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
margin: 0;
min-height: 100%;
background-color: var(--bg-page);
color: var(--text-primary);
font-family: "Open Sans", sans-serif;
/* На мобильном .bottom-nav зафиксирована (position: fixed; bottom: 0, см.
категорию "Mobile" ниже) - при прокрутке в самый конец страницы iOS
Safari (и в меньшей степени Chrome/Android) даёт эффект "резинового"
перескролла (rubber-band bounce) за пределы реального контента. Пока
страница пружинит обратно, фиксированные элементы на мгновение
отклеиваются от края экрана, обнажая настоящий фон под их текущим
(уже сдвинутым) положением - ровно то, что выглядит как "нижняя панель
уходит выше, а под ней появляется полоса". overscroll-behavior-y: contain
не даёт прокрутке жёстко упереться в реальный край и оттуда
"срикошетить" туда-обратно - обычная прокрутка контента при этом никак
не меняется. */
overscroll-behavior-y: contain;
/* Тот же "резиновый" эффект существует и по горизонтали - ни одна из
обычных страниц не имеет настоящего горизонтального переполнения (не
путать с .availability-grid-wrap на /plan/, у неё свой собственный
overflow-x: auto на внутреннем контейнере, а не на html/body - его это
не касается), но iOS Safari всё равно позволяет чуть "потянуть" всю
страницу пальцем вбок и спружинить обратно - воспринимается как "страницу
можно листнуть чуть правее", хотя document.scrollWidth фактически равен
ширине экрана. overscroll-behavior-x: none отключает именно этот
тянуще-пружинящий эффект по X, не трогая вертикальную прокрутку. */
overscroll-behavior-x: none;
}
h1 {
color: var(--text-primary);
}
table.planner {
margin: auto;
font-family: "Open Sans", sans-serif;
border-collapse: collapse;
table-layout: fixed;
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
/* Cells */
.planner thead tr th,
.planner tbody tr td {
position: relative;
background-color: var(--bg-surface-3);
width: 80px;
border: 0.15em solid transparent;
/* Видимая граница между днями недели (не просто транспарентный отступ,
как раньше) - ширина (0.5em дестоп / 2px мобильный, см. media-запрос
ниже) не трогается, меняется только цвет, поэтому колонки не смещаются
по ширине между строками. */
border-left: 0.5em solid rgba(var(--overlay-rgb), 0.1);
border-right: 0.5em solid rgba(var(--overlay-rgb), 0.1);
}
/* Header cells */
.planner thead tr th {
color: var(--text-primary);
background-color: var(--bg-header);
padding: 0.3em;
border-bottom-width: 0.8em;
}
/* First column header cells */
.planner thead tr th:nth-child(1) {
width: 2em;
background-color: transparent;
padding: 0;
/* Пустая ячейка над колонкой времени - ей не с чем "делить день", вертикальная
граница дней (см. выше) тут не нужна и выглядит как лишняя линия сама по себе. */
border-left-color: transparent;
border-right-color: transparent;
}
/* Body cells */
.planner tbody tr td {
border-radius: 1em;
height: 0.8em;
}
.planner tbody tr td:hover {
background-color: var(--bg-hover);
cursor: pointer;
}
/* First column body cells */
.planner tbody tr td:nth-child(1) {
width: 2em;
font-size: 0.9em;
background-color: transparent;
padding: 0;
/* Колонка с подписями времени (00h, 02h...) не является днём - вертикальная
граница дней тут смотрится лишней линией слева/справа от подписи. */
border-left-color: transparent;
border-right-color: transparent;
}
/* First column body content */
.planner tbody tr td:nth-child(1) span {
color: var(--text-primary);
right: 0;
display:none;
position: absolute;
top: -100%;
}
/* Every 4 lines -> first column cell */
.planner tbody tr:nth-child(4n + 1) td:nth-child(1) span {
display: inline;
}
.planner tbody tr:nth-child(8n) td{
border-bottom-width: 0.25em;
}
/*****************************
Cell State
******************************/
/* Подсветка ячеек во время выделения времени под новое событие - !important
по той же причине, что и у .has-event ниже: иначе перекрывается цветом
6-часовой полосы (--row-band, см. categories.css), у которой сравнимая
специфичность селектора. */
.planner td.selected {
background-color: var(--accent-solid) !important;
}
.planner td.unfocus{
opacity: 0.5;
}
.planner .tooltip {
font-size: 0.8em;
padding: 0.3em 0.6em;
border-radius: 0.3em;
/* Намеренно НЕ через переменные темы - маленький летучий элемент,
всплывающий поверх сетки при drag-выделении (см. Tooltip.js), всегда
тёмный фон + светлый текст независимо от темы сайта, как нативная
подсказка ОС - не часть основной иерархии поверхностей. */
background-color: #1b2431;
color: #ecf0f1;
opacity: 0.95;
position: fixed;
display: inline-block;
/* Следует за курсором - без этого сама подсказка периодически оказывается
"под" курсором и перехватывает mousemove/mouseup, ломая расчёт ячейки/времени
под курсором (event.target перестаёт быть
). */
pointer-events: none;
}
/*****************************
Misc
******************************/
.container {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
width: 100%;
background-color: var(--bg-page);
box-sizing: border-box;
padding : 3em;
overflow:auto;
}
/* 3em (~48px) padding on each side eats almost a third of a phone-width
screen - the fixed desktop value never had a mobile override before. */
@media (max-width: 600px) {
.container {
padding: 0.4em;
}
}
/* Cell class */
.planner td.cell {
cursor: pointer;
transition: background-color 0.2s;
}
.planner td.cell:hover {
background-color: var(--bg-hover);
}