/* Летопись — оформление: матовое стекло (glassmorphism) поверх мягкого градиента-«авроры». Приём: «хром» (шапка/композер/вкладки) — полупрозрачное стекло, а карточки заметок — на более плотном стекле, чтобы текст 16-летнего архива всегда читался чётко. Обе темы через одни токены. */ [x-cloak] { display: none !important; } /* ── Токены ─────────────────────────────────────────────────────────────── */ :root { /* Фон-аврора */ --g-a: #eef1fb; --g-b: #e9f2f1; --g-c: #f7eef4; --aur1: rgba(150,168,240,.42); --aur2: rgba(110,205,188,.32); --aur3: rgba(240,178,210,.40); /* Текст */ --text: #232630; --muted: #5b6472; --faint: #8b93a1; /* Стеклянные поверхности */ --card: rgba(255,255,255,.55); /* «хром»: шапка, композер, панели */ --card-strong: rgba(255,255,255,.74); /* карточки для чтения: заметки, плитки */ --pop: rgba(255,255,255,.93); /* всплывающие панели: сквозь них не должно просвечивать */ --solid: #ffffff; /* непрозрачный фон: поля с длинным текстом (поиск) — читаемость важнее стекла */ --line: rgba(30,42,74,.12); /* внутренние разделители-волоски */ --brd: rgba(255,255,255,.62); /* светлая «фаска» края стекла */ --field: rgba(255,255,255,.5); /* поля ввода / вторичные кнопки */ --bg: rgba(255,255,255,.5); /* совместимость: старые ссылки на var(--bg) */ /* Акцент */ --accent: #3b6fd4; --accent-2: #6a9bf2; --on-accent: #ffffff; /* Важность */ --imp1: #e79325; --imp2: #e0554b; /* Тени, геометрия, блюр */ --shadow: 0 12px 34px rgba(30,44,82,.13); --shadow-sm: 0 4px 14px rgba(30,44,82,.09); --radius: 16px; --radius-card: 12px; --radius-ctl: 11px; --blur: 18px; --wrap: 940px; /* макс. ширина колонки контента (шапка выравнивается по ней же) */ } @media (prefers-color-scheme: dark) { :root { --g-a: #0f1119; --g-b: #141824; --g-c: #181421; --aur1: rgba(72,92,182,.32); --aur2: rgba(40,122,110,.24); --aur3: rgba(150,80,132,.27); --text: #e8eaf0; --muted: #9aa3b3; --faint: #6c7585; --card: rgba(38,42,55,.52); --card-strong: rgba(45,50,65,.68); --pop: rgba(34,38,50,.95); --solid: #262a37; --line: rgba(255,255,255,.09); --brd: rgba(255,255,255,.10); --field: rgba(255,255,255,.06); --bg: rgba(255,255,255,.06); --accent: #719dff; --accent-2: #9ab8ff; --on-accent: #0f1424; --imp1: #e7a544; --imp2: #ef6a60; --shadow: 0 16px 42px rgba(0,0,0,.48); --shadow-sm: 0 6px 18px rgba(0,0,0,.40); } } /* Явный выбор темы в настройках (data-theme на ) перебивает системную. */ :root[data-theme="light"] { --g-a: #eef1fb; --g-b: #e9f2f1; --g-c: #f7eef4; --aur1: rgba(150,168,240,.42); --aur2: rgba(110,205,188,.32); --aur3: rgba(240,178,210,.40); --text: #232630; --muted: #5b6472; --faint: #8b93a1; --card: rgba(255,255,255,.55); --card-strong: rgba(255,255,255,.74); --pop: rgba(255,255,255,.93); --solid: #ffffff; --line: rgba(30,42,74,.12); --brd: rgba(255,255,255,.62); --field: rgba(255,255,255,.5); --bg: rgba(255,255,255,.5); --accent: #3b6fd4; --accent-2: #6a9bf2; --on-accent: #ffffff; --imp1: #e79325; --imp2: #e0554b; --shadow: 0 12px 34px rgba(30,44,82,.13); --shadow-sm: 0 4px 14px rgba(30,44,82,.09); } :root[data-theme="dark"] { --g-a: #0f1119; --g-b: #141824; --g-c: #181421; --aur1: rgba(72,92,182,.32); --aur2: rgba(40,122,110,.24); --aur3: rgba(150,80,132,.27); --text: #e8eaf0; --muted: #9aa3b3; --faint: #6c7585; --card: rgba(38,42,55,.52); --card-strong: rgba(45,50,65,.68); --pop: rgba(34,38,50,.95); --solid: #262a37; --line: rgba(255,255,255,.09); --brd: rgba(255,255,255,.10); --field: rgba(255,255,255,.06); --bg: rgba(255,255,255,.06); --accent: #719dff; --accent-2: #9ab8ff; --on-accent: #0f1424; --imp1: #e7a544; --imp2: #ef6a60; --shadow: 0 16px 42px rgba(0,0,0,.48); --shadow-sm: 0 6px 18px rgba(0,0,0,.40); } /* ── Шрифт ──────────────────────────────────────────────────────────────── */ /* Montserrat лежит локально (assets/fonts/), без CDN: дневник приватный и не должен ходить на чужие домены. Файлы вариативные (400–700) — одного @font-face хватает на все начертания; unicode-range разводит субсеты, чтобы кириллица и латиница грузились по отдельности. */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/montserrat-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/montserrat-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/montserrat-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } * { box-sizing: border-box; } html, body { min-height: 100%; } /* ── Поля ввода и выпадающие списки (единый вид на всё приложение) ───────── */ /* Базовое правило по типу элемента: любое новое поле сразу выглядит как остальные, а компонентные классы (.composer__input и пр.) при необходимости перебивают его — специфичность класса выше. */ input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea { padding: 9px 11px; font: inherit; font-size: 14px; color: var(--text); /* Фон непрозрачный (02.08.2026): сквозь полупрозрачный var(--field) просвечивал фон страницы, и текст в полях читался хуже. Стекло остаётся у панелей и карточек, но не у того, что читают. */ background: var(--solid); border: 1px solid var(--line); border-radius: var(--radius-ctl); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); } input::placeholder, textarea::placeholder { color: var(--faint); } /* Выпадающие списки: своя стрелка вместо системной — иначе вид разъезжается по платформам. Цвет стрелки нейтрально-серый: один и тот же читается в светлой и тёмной теме. */ select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 14px; } select:hover { border-color: var(--accent); } body { margin: 0; min-height: 100vh; /* Montserrat шире системного шрифта, поэтому базовый кегль чуть меньше прежних 15px. */ font: 14.5px/1.6 Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--text); background: radial-gradient(1000px 640px at 6% -8%, var(--aur1), transparent 60%), radial-gradient(920px 700px at 104% 2%, var(--aur3), transparent 60%), radial-gradient(780px 640px at 50% 112%, var(--aur2), transparent 55%), linear-gradient(162deg, var(--g-b), var(--g-a) 55%, var(--g-c)); background-attachment: fixed; } /* Общая матовость для стеклянных поверхностей. */ .topbar, .composer, .ac, .summaries, .onthisday, .note, .card, .tile, .login__box, .viewnav__tabs, .filter-chip { -webkit-backdrop-filter: blur(var(--blur)) saturate(150%); backdrop-filter: blur(var(--blur)) saturate(150%); } /* ── Шапка ──────────────────────────────────────────────────────────────── */ .topbar { display: flex; align-items: baseline; gap: 10px; padding: 13px max(16px, calc((100% - var(--wrap)) / 2)); /* контент шапки выравниваем по колонке .wrap */ position: sticky; top: 0; z-index: 10; background: var(--card); border-bottom: 1px solid var(--brd); } .topbar__title { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: .01em; } .topbar__home { color: inherit; text-decoration: none; } /* кликабельный логотип → на главную */ .topbar__home:hover { color: var(--accent); } .topbar__tagline { color: var(--muted); font-size: 13px; } /* Селектор проекта — тот же выпадающий список, что и везде, только компактнее (живёт в шапке). */ .projectpick { display: inline-flex; } .projectpick__select { padding: 5px 27px 5px 10px; font-size: 13px; background-position: right 8px center; } .topbar__actions { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; } .topbar__tools { display: inline-flex; gap: 14px; } .topbar__back { margin-left: auto; } /* страницы с одной ссылкой «← К заметкам» — без бургера */ .toollink { color: var(--muted); font-size: 13px; text-decoration: none; } .toollink:hover { color: var(--accent); } /* Бургер — только на мобилке (см. медиазапрос). Селектор с родителем, чтобы перебить `.iconbtn`. */ .topbar__actions .topbar__burger { display: none; } /* Поиск в шапке: иконка + раскрывающееся поле. Поле висит абсолютом прямо под своей кнопкой — раньше было fixed в углу экрана, и связь с иконкой на глаз терялась (владелец 01.08.2026). Правый край выровнен по кнопке, поэтому на узком экране поле растёт влево и не выходит за край. */ .topbar__search { position: relative; display: inline-flex; align-items: center; } .topbar__searchform { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; } .topbar__searchbox { position: relative; display: block; } .topbar__searchinput { width: min(72vw, 300px); padding: 9px 34px 9px 12px; font-size: 14px; color: var(--text); border: 1px solid var(--brd); border-radius: var(--radius-ctl); background: var(--solid); box-shadow: var(--shadow); } .topbar__searchinput:focus { outline: none; border-color: var(--accent); } .topbar__searchinput::placeholder { color: var(--faint); } /* Крестик очистки — внутри поля справа, поверх текста (место под него дал padding-right). */ .topbar__searchclear { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; cursor: pointer; background: none; border: none; border-radius: 50%; color: var(--faint); } .topbar__searchclear:hover { background: var(--field); color: var(--text); } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 18px 16px 60px; } /* ── Композер (умная строка + разворот) ─────────────────────────────────── */ /* Прилипание к шапке выключено по просьбе владельца (19.07.2026) — композер скроллится вместе с лентой. Код липкого поведения сохранён под комментарием здесь, в мобильном медиазапросе и в init() (page.php), чтобы вернуть одним движением. */ .composer { /* position: sticky; top: 62px; */ /* z-index нужен и без sticky: backdrop-filter делает композер отдельным stacking context, а его выпадающие списки (подсказки, календарь) должны лежать поверх карточек ленты. */ position: relative; z-index: 5; background: var(--card); border: 1px solid var(--brd); border-radius: var(--radius); padding: 12px; margin-bottom: 18px; box-shadow: var(--shadow); } /* Композер в две строки: поле во всю ширину, под ним ряд кнопок. Кнопки сбоку отъедали ширину у самого важного элемента страницы — строки ввода. «Подробнее» слева (оно про форму ниже), микрофон и «Добавить» — справа, у большого пальца; разводит их распорка .composer__spacer. */ .composer__field { position: relative; min-width: 0; } .composer__row { display: flex; gap: 9px; align-items: center; margin-top: 9px; } .composer__spacer { flex: 1; min-width: 0; } /* Строка ввода — textarea, а не input: заметки чаще длиннее строки, и обрезание прятало бы текст, который как раз проверяют перед отправкой. Высоту считает JS (autoGrow) — от одной строки до предела --input-max, дальше собственный скролл. resize убран: тянуть руками нечего. */ .composer__input { display: block; width: 100%; padding: 12px 14px; font: inherit; font-size: 15px; line-height: 1.45; resize: none; overflow-y: auto; max-height: var(--input-max, 200px); /* Фон непрозрачный (не var(--field)): сквозь стекло просвечивал фон страницы и текст читался хуже. */ border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--solid); color: var(--text); } .composer__input:focus { outline: none; border-color: var(--accent); } /* Пустое поле — ровно одна строка (высоту задаёт rows, см. autoGrow), а подсказка длиннее строки. Поэтому держим её в одну строку с многоточием: без этого на узком экране из-под низа поля торчал обрезок второй строки (overflow режет по padding-box, а не по строке текста). */ .composer__input::placeholder { color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .composer__input:placeholder-shown { overflow: hidden; } /* Автокомплит @категория / #тэг */ .ac { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; margin: 0; padding: 5px; list-style: none; /* Плотное стекло: список ложится поверх ленты, сквозь полупрозрачный фон текст читался плохо. */ background: var(--pop); border: 1px solid var(--brd); border-radius: var(--radius-ctl); box-shadow: var(--shadow); max-height: 260px; overflow-y: auto; } .ac__item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; font-size: 14px; cursor: pointer; } .ac__item--active { background: color-mix(in srgb, var(--accent) 16%, transparent); } .ac__ic { color: var(--chip, var(--muted)); } /* Обёртка поля с подсказками (поле «Тэги») — якорь для выпадающего списка `.ac`. */ .field__ac { position: relative; } .field__ac input { width: 100%; } .composer__form { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } /* Поля записи — одна разметка на добавление и правку (templates/_noteform.php). */ .noteform { display: grid; gap: 10px; } .field { display: grid; gap: 6px; } .field__label { font-size: 13px; color: var(--muted); } /* Категории — не поле ввода, а набор переключателей: браузерную рамку fieldset убираем, чтобы блок жил в одном ритме с остальными полями формы. */ .field--cats { border: none; padding: 0; margin: 0; min-width: 0; } /* Выбор категорий (композер/правка): не чекбоксы, а сами категории — выбранные заметно ярче. */ .cats { display: flex; flex-wrap: wrap; gap: 8px 16px; } .cat-check { position: relative; display: inline-flex; align-items: center; cursor: pointer; } .cat-check input { position: absolute; left: 0; width: 1px; height: 1px; opacity: 0; margin: 0; } /* прячем, но доступно с клавиатуры */ .cat-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); opacity: .6; transition: opacity .15s ease, color .15s ease; } .cat-pick .icon { color: var(--chip, var(--muted)); opacity: .5; transition: opacity .15s ease; } .cat-check:hover .cat-pick { opacity: 1; } .cat-check input:checked + .cat-pick { opacity: 1; font-weight: 650; color: color-mix(in srgb, var(--chip, var(--text)) 72%, var(--text)); } .cat-check input:checked + .cat-pick .icon { opacity: 1; } .cat-check input:focus-visible + .cat-pick { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ── Дата-пикер (свой календарь) ────────────────────────────────────────── */ /* Обёртка «дата + время»: кнопка-дата открывает календарь-поповер, время — отдельным полем. */ .datetime { position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .dp__btn { padding: 9px 12px; min-width: 7em; text-align: left; cursor: pointer; font: inherit; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--field); color: var(--text); } .dp__btn:hover { border-color: var(--accent); } .dp__time { padding: 9px 10px; font: inherit; color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--field); } .dp__time:focus, .dp__btn:focus-visible { outline: none; border-color: var(--accent); } /* Шаг в час: столбик-спиннер вплотную к полю времени — плюс сверху, минус снизу. Мелко (по половине высоты поля), но оба шага под одним пальцем и не надо целиться в разные концы поля. Группа неразрывна (.timestep) — у .datetime включён перенос, и порознь кнопка уезжала строкой ниже. */ .timestep { display: flex; align-items: stretch; gap: 4px; } .hsteps { display: flex; flex-direction: column; gap: 2px; } .hstep { display: inline-flex; align-items: center; justify-content: center; width: 26px; flex: 1 1 0; min-height: 0; padding: 0; cursor: pointer; color: var(--muted); border: 1px solid var(--line); border-radius: 7px; background: var(--field); } .hstep:hover { color: var(--accent); border-color: var(--accent); } .hstep:focus-visible { outline: none; border-color: var(--accent); color: var(--accent); } /* Поповер календаря */ .dp { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 264px; padding: 10px; background: var(--pop); border: 1px solid var(--brd); border-radius: var(--radius-ctl); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(var(--blur)) saturate(150%); backdrop-filter: blur(var(--blur)) saturate(150%); } .dp__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .dp__title { cursor: pointer; border: none; background: none; color: var(--text); font: inherit; font-weight: 600; font-size: 14px; padding: 4px 8px; border-radius: 8px; } .dp__title:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); } .dp__nav { width: 30px; height: 30px; flex: none; cursor: pointer; font-size: 16px; line-height: 1; border: 1px solid var(--brd); border-radius: 8px; background: var(--field); color: var(--text); } .dp__nav:hover { border-color: var(--accent); color: var(--accent); } .dp__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .dp__wd { text-align: center; font-size: 11px; color: var(--muted); padding: 2px 0; } .dp__day { aspect-ratio: 1; border: none; border-radius: 8px; background: none; color: var(--text); cursor: pointer; font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; } .dp__day:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); } .dp__day--other { color: var(--faint); } .dp__day--today { font-weight: 700; color: var(--accent); } .dp__day--sel, .dp__day--sel:hover { color: var(--on-accent); background: linear-gradient(135deg, var(--accent-2), var(--accent)); } /* Сетки выбора месяца/года — тот же поповер, режимы dp.mode ('months' | 'years'). */ .dp__cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .dp__cell { padding: 10px 4px; border: none; border-radius: 8px; background: none; color: var(--text); cursor: pointer; font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; } .dp__cell:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); } .dp__cell--today { font-weight: 700; color: var(--accent); } .dp__cell--sel, .dp__cell--sel:hover { color: var(--on-accent); background: linear-gradient(135deg, var(--accent-2), var(--accent)); } .dp__foot { margin-top: 8px; display: flex; justify-content: center; } .dp__today { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; font-size: 13px; } .dp__today:hover { text-decoration: underline; } /* ── Иконки ─────────────────────────────────────────────────────────────── */ /* Единый стиль для всего набора (спрайт — templates/_icons.php): контур в цвет текста, без заливки. Значит иконка принимает цвет родителя — в том числе цвет категории через var(--chip). */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .icon { width: 18px; height: 18px; flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .icon--sm { width: 14px; height: 14px; stroke-width: 2; } .icon--xs { width: 11px; height: 11px; stroke-width: 2.2; } /* Кнопка-иконка: прозрачная, подсвечивается при наведении — общий вид для шапки и карточек. */ .iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; flex: none; cursor: pointer; background: none; border: none; border-radius: 9px; color: var(--muted); transition: background .15s ease, color .15s ease; } .iconbtn:hover { background: var(--field); color: var(--accent); } .iconbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Кнопка-иконка при поле ввода (композер и правка на месте). Отдельный класс от `.iconbtn`: здесь кнопки стоят в ряд с полем и должны читаться как элементы одной формы — та же рамка, тот же радиус, одинаковый квадрат. Подписи ушли в title/aria-label: ряд из трёх слов («Надиктовать», «Подробнее», «Добавить») занимал больше места, чем сама строка ввода. */ .ctlbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; padding: 0; cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--field); color: var(--muted); transition: color .15s ease, border-color .15s ease, filter .15s ease; } .ctlbtn:hover { color: var(--accent); border-color: var(--accent); } .ctlbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .ctlbtn .icon { transition: transform .18s ease; } /* Главное действие ряда — заливкой акцента (как .btn--primary, только квадратной кнопкой). */ .ctlbtn--primary { border-color: transparent; color: var(--on-accent); background: linear-gradient(135deg, var(--accent-2), var(--accent)); box-shadow: 0 6px 18px -5px color-mix(in srgb, var(--accent) 65%, transparent); } .ctlbtn--primary:hover { filter: brightness(1.06); color: var(--on-accent); border-color: transparent; } /* Форма раскрыта — шеврон смотрит вверх (кнопка «Подробнее» работает и на сворачивание). */ .ctlbtn--open { color: var(--accent); border-color: var(--accent); } .ctlbtn--open .icon { transform: rotate(180deg); } /* Удаление — тем же квадратом, но в красном; заливка появляется только на наведении. */ .ctlbtn--danger { color: var(--imp2); border-color: color-mix(in srgb, var(--imp2) 45%, transparent); } .ctlbtn--danger:hover { background: var(--imp2); border-color: var(--imp2); color: #fff; } /* Запрос в работе: кнопка выключена и «дышит». Тонкой полосы наверху не хватало — палец успевал тапнуть второй раз, и запись задваивалась (владелец 02.08.2026). */ .ctlbtn:disabled { cursor: default; opacity: .5; } .ctlbtn:disabled:hover { color: var(--muted); border-color: var(--line); filter: none; } .ctlbtn--primary:disabled:hover { color: var(--on-accent); border-color: transparent; } .ctlbtn--danger:disabled:hover { background: none; color: var(--imp2); border-color: color-mix(in srgb, var(--imp2) 45%, transparent); } .ctlbtn--busy { animation: ctl-pulse 1s ease-in-out infinite; } @keyframes ctl-pulse { 50% { opacity: .28; } } /* ── Кнопки ─────────────────────────────────────────────────────────────── */ .btn { padding: 11px 16px; font-size: 14px; font-weight: 550; cursor: pointer; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; background: var(--field); color: var(--text); transition: filter .15s ease, border-color .15s ease; } .btn:hover { border-color: var(--accent); color: var(--accent); } .btn--primary { border: none; color: var(--on-accent); background: linear-gradient(135deg, var(--accent-2), var(--accent)); box-shadow: 0 6px 18px -5px color-mix(in srgb, var(--accent) 65%, transparent); } .btn--primary:hover { filter: brightness(1.06); color: var(--on-accent); } /* ── Чипсы категорий / тэги ─────────────────────────────────────────────── */ .chip { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 550; color: #fff; background: var(--chip, var(--muted)); } .tag { font-size: 12px; color: var(--accent); margin-right: 6px; text-decoration: none; } /* ── Быстрая запись: заголовок экрана, чипсы времени, микрофон ──────────── */ .quickhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .quickhead__title { margin: 0; font-size: 17px; font-weight: 650; } /* Чипсы времени («Сейчас / Час назад / Вечером / Сегодня / Вчера / Вчера вечером») — вторичные к самому полю даты, потому без заливки. Их шесть, и ряд должен уложиться на узком экране: отсюда мелкий кегль и тесные поля (владелец 21.08.2026). */ .timechips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } /* Колонка «Дата и время» — единственная, где под полем есть второй ярус (чипсы). На широком экране чипсы уезжают вправо от поля, в пустоту, которая всё равно оставалась в ряду между датой и важностью (владелец 22.08.2026); когда места на них рядом не хватает — сами переносятся под поле, как было. Отсюда флекс с переносом вместо медиазапроса: порог считает сама раскладка, а не мы. */ .fieldrow > .field--when { flex: 1 1 320px; } .field--when { display: flex; flex-wrap: wrap; align-items: start; gap: 6px 10px; } .field--when > .field__label { flex: 0 0 100%; } .field--when > .datetime { flex: 0 0 auto; } .field--when .timechips { flex: 1 1 205px; max-width: 340px; margin-top: 0; } .timechip { padding: 2px 7px; border-radius: 999px; font: inherit; font-size: 11px; line-height: 1.55; cursor: pointer; color: var(--muted); background: var(--field); border: 1px solid var(--line); white-space: nowrap; } .timechip:hover { color: var(--accent); border-color: var(--accent); } /* Микрофон во время диктовки «дышит» — иначе непонятно, слушает он или уже нет. */ .ctlbtn--rec, .ctlbtn--rec:hover { color: var(--imp2); border-color: color-mix(in srgb, var(--imp2) 50%, transparent); animation: mic-pulse 1.2s ease-in-out infinite; } @keyframes mic-pulse { 50% { opacity: .45; } } /* ── Навигация видов ────────────────────────────────────────────────────── */ .viewnav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; } .viewnav__tabs { display: inline-flex; gap: 3px; padding: 4px; background: var(--card); border: 1px solid var(--brd); border-radius: 14px; box-shadow: var(--shadow-sm); } .tab { padding: 7px 13px; border-radius: 10px; font-size: 14px; text-decoration: none; color: var(--muted); } .tab:hover { color: var(--text); } .tab--active { color: var(--on-accent); background: linear-gradient(135deg, var(--accent-2), var(--accent)); box-shadow: var(--shadow-sm); } .viewnav__period { display: inline-flex; align-items: center; gap: 8px; } .viewnav__scope { display: inline-flex; gap: 4px; } .viewnav__scope .seg { display: inline-block; text-decoration: none; } .viewnav__jump { position: relative; display: inline-flex; } /* якорь поповера «перейти к дате» */ /* Подпись периода — кнопка: открывает календарь перехода. Сброс кнопочного хрома. */ .viewnav__label { font-size: 15px; font-weight: 600; min-width: 8ch; text-align: center; font-variant-numeric: tabular-nums; padding: 4px 8px; border: none; border-radius: 8px; background: none; color: inherit; cursor: pointer; font-family: inherit; } .viewnav__label:hover { background: var(--field); color: var(--accent); } /* Свободный диапазон: две даты «С … По …» + «Показать». */ .viewnav__range { flex-wrap: wrap; } .range__lbl { font-size: 13px; color: var(--muted); } .navbtn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 9px; border: 1px solid var(--brd); border-radius: var(--radius-ctl); background: var(--field); color: var(--text); text-decoration: none; font-size: 17px; line-height: 1; } .navbtn:hover { border-color: var(--accent); color: var(--accent); } .navbtn--today { font-size: 13px; font-weight: 550; } /* Доп. параметры ленты (группировка / порядок / сколько показывать) — отдельным блоком слева, мельче основного хрома: группировка занимает свою строку, порядок и «показывать» — следующую. */ .viewnav__opts { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 7px 14px; } .viewnav__group { flex-basis: 100%; display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; } .viewnav__sort { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; } .viewnav__limit { display: inline-flex; align-items: center; gap: 5px; } .viewnav__opts .field__label { font-size: 12px; color: var(--faint); } .seg { padding: 4px 9px; font-size: 12px; cursor: pointer; border: 1px solid var(--brd); border-radius: 9px; background: var(--field); color: var(--muted); } .seg--on { color: var(--on-accent); background: linear-gradient(135deg, var(--accent-2), var(--accent)); border-color: transparent; } /* Селектор размера страницы (пагинация). */ .seg-select { padding: 4px 21px 4px 8px; font-size: 12px; /* место справа — под общую стрелку select */ border-color: var(--brd); border-radius: 9px; background-position: right 6px center; background-size: 12px; } .seg-select:focus { outline: none; border-color: var(--accent); } /* Незаметные текстовые действия (раскрыть/свернуть все, показать все). */ .linklike { background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-size: 12px; color: var(--faint); } .linklike:hover { color: var(--accent); text-decoration: underline; } /* Строка «раскрыть все / свернуть все» над лентой. */ .feed-tools { display: flex; align-items: center; gap: 8px; margin: 2px 2px 10px; } .feed-tools__sep { color: var(--faint); font-size: 12px; } /* Подсказка усечения ленты лимитом (пагинация). */ .feed__more { margin: 8px 2px 0; color: var(--muted); font-size: 13px; } /* ── Строка поиска ──────────────────────────────────────────────────────── */ .searchbar { margin-bottom: 14px; } .searchbar__input { width: 100%; padding: 11px 14px; font-size: 14px; border: 1px solid var(--brd); border-radius: var(--radius-ctl); background: var(--solid); color: var(--text); box-shadow: var(--shadow-sm); } .searchbar__input:focus { outline: none; border-color: var(--accent); } .searchbar__input::placeholder { color: var(--faint); } /* ── Тост-уведомление ───────────────────────────────────────────────────── */ .flash { margin-bottom: 12px; padding: 10px 14px; border-radius: var(--radius-ctl); background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: var(--on-accent); font-size: 14px; box-shadow: var(--shadow-sm); } /* Неудача (сеть не ответила) — тем же тостом, но красным: иначе «не сохранилось» читается как «ок». */ .flash--error { background: linear-gradient(135deg, color-mix(in srgb, var(--imp2) 82%, #fff), var(--imp2)); color: #fff; } /* ── Полоса занятости (assets/busy.js) ──────────────────────────────────── */ /* Поверх всего, включая липкую шапку: единственный признак, что запрос ушёл и ответа ещё нет. */ .busybar { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 100; pointer-events: none; opacity: 0; transition: opacity .2s ease; background-image: linear-gradient(90deg, transparent, var(--accent-2), var(--accent), transparent); background-size: 42% 100%; background-repeat: no-repeat; background-position: -42% 0; } .busybar--on { opacity: 1; animation: busy-slide 1.15s ease-in-out infinite; } @keyframes busy-slide { to { background-position: 142% 0; } } /* Бегущая полоса — украшение; при выключенной анимации хватает ровной линии. */ @media (prefers-reduced-motion: reduce) { .busybar--on { animation: none; background-image: linear-gradient(90deg, var(--accent), var(--accent)); background-size: 100% 100%; background-position: 0 0; } } /* ── Сводки-итоги периода (спойлер над лентой на видах месяц/год) ────────── */ .summaries { margin: 0 0 14px; padding: 11px 15px; background: var(--card); border: 1px solid var(--brd); border-radius: var(--radius); box-shadow: var(--shadow-sm); } /* Заголовок — он же кнопка спойлера: свёрнутый блок остаётся одной тонкой строкой над лентой. */ .summaries__title { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; cursor: pointer; user-select: none; } .summaries__title:hover, .summaries__title:focus-visible { color: var(--text); } .summaries__caret { color: var(--muted); font-size: 11px; width: 1em; } .summaries__count { padding: 0 6px; border-radius: 8px; background: var(--line); color: var(--muted); font-size: 11px; letter-spacing: 0; } .summaries__body { margin-top: 10px; } .summary + .summary { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .summary__meta { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--muted); margin-bottom: 4px; } .summary__text { white-space: pre-wrap; overflow-wrap: anywhere; } /* длинные строки/URL не должны уезжать за карточку */ .summary__src { border-bottom: 1px dotted var(--line); cursor: help; } /* в title — имя файла архива */ /* «Изменить» проявляется по наведению на итог — в спокойном состоянии блок остаётся текстом. */ .summary__editbtn { margin-left: auto; opacity: 0; transition: opacity .12s; } .summary:hover .summary__editbtn, .summary__editbtn:focus-visible { opacity: 1; } .summary__form { display: grid; gap: 10px; } .summary__area { resize: vertical; } .summary__actions { display: flex; align-items: center; gap: 8px; } .summaries__add { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } /* ── Группы по категориям ───────────────────────────────────────────────── */ .group { margin-bottom: 14px; } .group--flat { margin-bottom: 0; } .group__head { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; padding: 6px 4px; border-bottom: 1px solid var(--line); margin-bottom: 10px; } .group__caret { color: var(--muted); font-size: 12px; width: 1em; } .group__count { color: var(--muted); font-size: 12px; } .group__body { display: block; } /* Заголовок группы-категории — цветной текст с точкой (без фоновой «кнопки»). */ .group__cat { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 650; text-decoration: none; color: color-mix(in srgb, var(--chip, var(--muted)) 72%, var(--text)); } .group__cat .icon { color: var(--chip, var(--muted)); } .group__cat:hover { text-decoration: underline; } /* «+» у категорийной группы — быстрое добавление в этот срез. */ .group__add { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; cursor: pointer; background: none; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); } .group__add:hover { border-color: var(--accent); color: var(--accent); } .group__cat--none { color: var(--muted); font-weight: 600; } /* Дата-группа: подпись периода простым приглушённым текстом — не навязчиво (не чип-кнопка). */ .group__date { font-size: 13.5px; font-weight: 600; color: var(--muted); } /* ── Лента заметок ──────────────────────────────────────────────────────── */ .feed__empty { color: var(--muted); } .note { position: relative; /* якорь для плавающей панели действий (.note__actions) */ background: var(--card-strong); border: 1px solid var(--brd); border-radius: var(--radius-card); padding: 13px 15px; margin-bottom: 11px; box-shadow: var(--shadow-sm); } /* Карточка на наведении намеренно НЕ реагирует (владелец 02.08.2026): подъём и тень при каждом проходе мыши по ленте дёргали глаз. Кнопки действий по-прежнему проявляются, см. .note__actions. */ /* Карточка в режиме правки — поверх соседних: у `.note` свой stacking context (backdrop-filter), поэтому без этого её поповеры (подсказки тэгов, календарь) уходят под следующие карточки. */ .note--editing { position: relative; z-index: 4; } /* Важность — внутренней цветной полоской (inset-тень сохраняет скругление углов). Цвет полоски — категории заметки (--note-cat), чтобы карточка была в одном тоне; степень важности передаёт толщина (3px / 6px). Без категории — запасные цвета важности. */ .note--imp1 { box-shadow: var(--shadow-sm), inset 3px 0 0 var(--note-cat, var(--imp1)); } .note--imp2 { box-shadow: var(--shadow-sm), inset 6px 0 0 var(--note-cat, var(--imp2)); } .note--imp1:hover { box-shadow: var(--shadow), inset 3px 0 0 var(--note-cat, var(--imp1)); } .note--imp2:hover { box-shadow: var(--shadow), inset 6px 0 0 var(--note-cat, var(--imp2)); } /* Две колонки: слева текст (главный акцент, ~2/3), справа метаданные (~1/3). */ .note__view { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; } .note__body { min-width: 0; } /* Главное — читаемый текст; цвет = тон категории, подмешанный к базовому (контраст в обеих темах). */ /* Тон категории только подмешан к базовому цвету — доля небольшая (45%), иначе светлые категории размывают текст; кегль/интерлиньяж плотные — читаем длинные записи архива. */ .note__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.4; color: color-mix(in srgb, var(--note-cat, var(--text)) 45%, var(--text)); } /* Зажим высоты длинной заметки: тело обрезано с мягким затуханием, ниже — кнопка «показать всю». */ .note__text--clamp { max-height: 220px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent); } .note__more { margin-top: 3px; padding: 0; background: none; border: 0; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; } .note__more:hover { color: var(--text); text-decoration: underline; } /* Подсветка совпадений поиска в тексте заметки. */ .hl { background: color-mix(in srgb, var(--accent) 26%, transparent); color: inherit; border-radius: 4px; padding: 0 2px; } /* Правая колонка метаданных — по убыванию веса: дата → категории → теги → управление. */ .note__side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; min-width: 0; } .note__time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } /* День недели — доп. информация: серая подложка, самый светлый текст, менее акцентно, чем дата. */ .note__dow { margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--muted) 15%, transparent); color: var(--faint); font-size: 11px; font-weight: 500; } /* Время видно всегда. Раньше оно проявлялось по наведению — и на его месте зияла дыра, а сама дата выглядела недописанной (владелец 01.08.2026). */ .note__clock { margin-left: 5px; opacity: .75; } .note__imp { font-size: 10px; font-weight: 650; color: var(--note-cat, var(--imp1)); text-transform: uppercase; letter-spacing: .04em; } .note--imp2 .note__imp { color: var(--note-cat, var(--imp2)); } /* Категории — мелкий цветной текст с точкой, без фона: заметны меньше, чем сам текст. */ .note__cats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px 9px; } .note__cat { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; font-size: 11px; font-weight: 550; text-decoration: none; color: var(--chip, var(--muted)); } .note__cat .icon { color: var(--chip, var(--muted)); } .note__cat:hover span { text-decoration: underline; } /* Теги — ещё мельче, компактнее и приглушённее. */ .note__tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 6px; } .note__side .tag { font-size: 10px; color: var(--faint); margin: 0; } .note__side .tag:hover { color: var(--accent); } /* Панель служебного: метки происхождения/правки + «Изменить» и «Дублировать». В спокойном виде её нет вовсе — это шум, особенно на телефоне, где карточек на экране мало. На desktop панель висит абсолютом над правым верхним углом карточки и проявляется по наведению. Абсолют здесь принципиален: будь она в потоке, наведение дёргало бы высоту карточки, а вместе с ней и всю ленту под курсором. */ .note__actions { position: absolute; top: -13px; right: 12px; z-index: 3; display: flex; align-items: center; gap: 2px; padding: 3px 5px; background: var(--pop); border: 1px solid var(--brd); border-radius: 999px; box-shadow: var(--shadow-sm); opacity: 0; pointer-events: none; transition: opacity .14s ease; -webkit-backdrop-filter: blur(var(--blur)) saturate(150%); backdrop-filter: blur(var(--blur)) saturate(150%); } .note:hover .note__actions, .note:focus-within .note__actions { opacity: 1; pointer-events: auto; } .note__edit, .note__dup { display: inline-flex; align-items: center; justify-content: center; padding: 4px 6px; line-height: 1; cursor: pointer; background: none; border: none; color: var(--muted); border-radius: 8px; } .note__edit:hover, .note__dup:hover { background: var(--field); color: var(--text); } /* Тач-экран: наведения нет, поэтому панель живёт в потоке — отдельной строкой под карточкой, раскрывается одиночным тапом по записи (двойной по-прежнему открывает правку). Карточка при этом становится выше — так и задумано, места на экране это стоит немного. */ @media (hover: none) { .note__actions { position: static; opacity: 1; pointer-events: auto; display: none; justify-content: flex-end; gap: 6px; padding: 8px 0 0; border: none; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .note--meta .note__actions { display: flex; } .note__edit, .note__dup { padding: 6px 8px; } } /* Правка заметки на месте */ .noteedit { display: grid; gap: 10px; } /* Ряд «поле + микрофон» повторяет композер: диктовать при правке нужно ровно так же, как при добавлении, и кнопка должна стоять там же, где к ней привыкли. */ .noteedit__row { display: flex; gap: 9px; align-items: flex-end; } .noteedit__text { display: block; flex: 1; min-width: 0; width: 100%; padding: 9px 11px; font: inherit; line-height: 1.45; resize: none; overflow-y: auto; max-height: var(--input-max, 200px); /* Непрозрачный фон — как у композера: длинный текст поверх стекла читается хуже. */ border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--solid); color: var(--text); } .noteedit__text:focus { outline: none; border-color: var(--accent); } /* Ряд полей формы (проект / дата / важность / точность) — общий для правки на месте и композера. align-items: start обязателен: у колонки с датой есть ещё ряд чипсов времени, и без него соседние селекты растягивались бы на всю высоту строки. */ .fieldrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: start; } /* Без min-width:0 флекс-элемент не сжимается уже своего содержимого: ряд чипсов времени под датой растягивал бы колонку и уводил страницу в горизонтальный скролл на телефоне. */ .fieldrow > .field { min-width: 0; } /* Кнопки правки — иконками (.ctlbtn), удаление отодвинуто вправо: промахнуться мимо «Сохранить» в него труднее. */ .noteedit__buttons { display: flex; gap: 8px; align-items: center; } .noteedit__buttons .ctlbtn--danger { margin-left: auto; } .btn--danger { border-color: color-mix(in srgb, var(--imp2) 45%, transparent); color: var(--imp2); background: none; } .btn--danger:hover { background: var(--imp2); border-color: var(--imp2); color: #fff; } /* ── Технические данные записи (форма правки) ───────────────────────────── */ /* Свёрнутый
: нужны редко (откуда запись, правил ли её), но должны быть под рукой — раньше это были значки в ленте, и они там только шумели. */ .techinfo { font-size: 12px; color: var(--muted); } .techinfo__head { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--faint); list-style: none; user-select: none; } .techinfo__head::-webkit-details-marker { display: none; } .techinfo__head:hover { color: var(--text); } .techinfo__list { margin: 8px 0 0; display: grid; gap: 4px; } .techinfo__row { display: flex; gap: 8px; } .techinfo__row dt { flex: none; min-width: 11em; color: var(--faint); } .techinfo__row dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } /* Тост «Отменить» */ .flash--undo { display: flex; align-items: center; gap: 12px; } .linkbtn { background: none; border: none; color: var(--on-accent); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; } /* Кликабельные тэги */ .tag:hover { text-decoration: underline; } /* Чипсы активных фильтров — своей строкой слева, над доп. параметрами ленты. */ .viewnav__filters { flex-basis: 100%; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .filter-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px 3px 10px; font-size: 13px; border-radius: 999px; background: var(--card); border: 1px solid var(--brd); color: var(--text); } /* Фильтр по категории читается как сама категория: её цвет в тексте и иконке. */ .filter-chip--cat { color: color-mix(in srgb, var(--chip, var(--text)) 72%, var(--text)); } .filter-chip--cat > .icon { color: var(--chip, var(--muted)); } .filter-chip__x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; text-decoration: none; color: var(--muted); } .filter-chip__x:hover { background: var(--line); color: var(--text); } /* ── Панель «В этот день раньше» ────────────────────────────────────────── */ /* Оформление спойлера берём у «Итогов периода» (класс .summaries на той же секции) — здесь только внутренности списка. Цветная полоска слева отличает панель от итогов. */ .onthisday { position: relative; overflow: hidden; } .onthisday::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(var(--accent-2), var(--accent)); } .onthisday__year + .onthisday__year { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .onthisday__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; } .onthisday__yr { font-weight: 650; font-size: 14px; font-variant-numeric: tabular-nums; } .onthisday__ago { font-size: 12px; color: var(--muted); text-decoration: none; } .onthisday__ago:hover { color: var(--accent); text-decoration: underline; } .onthisday__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; } .onthisday__note { display: flex; align-items: baseline; gap: 6px; } .onthisday__ic { color: var(--chip, var(--muted)); position: relative; top: 2px; } .onthisday__text { white-space: pre-wrap; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* ── Страница входа ─────────────────────────────────────────────────────── */ .login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } .login__box { width: 100%; max-width: 350px; display: grid; gap: 14px; background: var(--card); border: 1px solid var(--brd); border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--shadow); } .login__title { margin: 0; font-size: 23px; text-align: center; font-weight: 650; } .login__tagline { margin: 0 0 6px; text-align: center; color: var(--muted); font-size: 13px; } .login__input { width: 100%; padding: 11px 13px; font-size: 15px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--field); color: var(--text); } .login__input:focus { outline: none; border-color: var(--accent); } .login__submit { width: 100%; margin-top: 4px; } .login__remember { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); cursor: pointer; } .login__remember input { width: 16px; height: 16px; flex: none; accent-color: var(--accent); cursor: pointer; } .login__error { padding: 10px 13px; border-radius: var(--radius-ctl); font-size: 14px; background: color-mix(in srgb, var(--imp2) 14%, transparent); color: var(--imp2); border: 1px solid color-mix(in srgb, var(--imp2) 32%, transparent); } /* ── Настройки ──────────────────────────────────────────────────────────── */ .settings { display: grid; gap: 16px; } .card { background: var(--card); border: 1px solid var(--brd); border-radius: var(--radius); padding: 17px 19px; box-shadow: var(--shadow-sm); } /* Карточка с раскрытым пикером — поверх соседних: backdrop-filter делает каждую .card отдельным stacking context, и без этого поповер уходит под следующую секцию. */ .card--front { position: relative; z-index: 5; } .card__title { margin: 0 0 12px; font-size: 15px; font-weight: 650; } .card__hint { margin: -6px 0 12px; color: var(--muted); font-size: 13px; } /* Отчёт прогона (Todoist): моноширинный, со своим скроллом — длинный список не ломает карточку. */ .report { margin: 10px 0 0; padding: 10px 12px; max-height: 220px; overflow: auto; background: var(--field); border-radius: var(--radius-ctl); border: 1px solid var(--line); font-size: 12px; line-height: 1.5; white-space: pre-wrap; color: var(--muted); } .card .row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .btn--sm { padding: 7px 11px; font-size: 13px; } .btn--ghost { color: var(--muted); } .catlist { display: grid; gap: 8px; margin-bottom: 14px; } .catrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .catrow--arch { opacity: .55; } .catrow__color { width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: none; cursor: pointer; } .catsave { margin-bottom: 4px; } /* ── Пикер оформления категории (цвет из палитры / свой + иконка) ────────── */ .catpick { position: relative; display: inline-flex; } .catpick__btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; padding: 0; cursor: pointer; color: var(--chip, var(--muted)); background: var(--field); border: 1px solid var(--line); border-radius: var(--radius-ctl); } .catpick__btn:hover { border-color: var(--chip, var(--accent)); } .catpick__pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 244px; padding: 10px; background: var(--pop); border: 1px solid var(--brd); border-radius: var(--radius-ctl); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(var(--blur)) saturate(150%); backdrop-filter: blur(var(--blur)) saturate(150%); } .catpick__label { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; } .catpick__colors { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 10px; } .swatch { width: 100%; aspect-ratio: 1; padding: 0; cursor: pointer; border: 2px solid transparent; border-radius: 50%; box-shadow: 0 0 0 1px var(--line) inset; } .swatch:hover { transform: scale(1.12); } .swatch--on { border-color: var(--text); } /* Свой цвет: нативный color-input спрятан под кружком-образцом. */ .swatch--custom { position: relative; overflow: hidden; display: inline-flex; box-shadow: 0 0 0 2px var(--brd) inset; } .swatch--custom input { position: absolute; inset: -6px; width: 200%; height: 200%; padding: 0; border: none; opacity: 0; cursor: pointer; } .catpick__icons { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .iconpick { display: inline-flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: 0; cursor: pointer; color: var(--muted); background: none; border: 1px solid transparent; border-radius: 8px; } .iconpick .icon { width: 19px; height: 19px; } /* мельче 18px мелкие иконки не читаются */ .iconpick:hover { color: var(--chip, var(--accent)); background: var(--field); } .iconpick--on { color: var(--chip, var(--accent)); border-color: var(--chip, var(--accent)); background: var(--field); } .catrow__name { flex: 1; min-width: 120px; } .catrow__sort { width: 70px; } .catrow__count { min-width: 2ch; text-align: right; color: var(--muted); font-size: 12px; } .catadd { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); } .catadd__name { flex: 1; min-width: 140px; } .trashlist { display: grid; gap: 8px; } .trashrow { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--field); } .trashrow__body { min-width: 0; } .trashrow__meta { font-size: 12px; color: var(--muted); margin-right: 8px; } .trashrow__text { overflow-wrap: anywhere; } .trashrow__act { display: flex; gap: 6px; flex: none; } /* ── Статистика ─────────────────────────────────────────────────────────── */ .stats { display: grid; gap: 16px; } .card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .card__head .card__title { margin: 0; } .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; } .tile { display: flex; flex-direction: column; gap: 4px; background: var(--card-strong); border: 1px solid var(--brd); border-radius: var(--radius-card); padding: 15px 16px; box-shadow: var(--shadow-sm); } .tile__num { font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .tile__num--sm { font-size: 18px; } .tile__label { font-size: 12px; color: var(--muted); } /* Heatmap (шкала интенсивности — функциональная, не трогаем зелёную семантику) */ .hm-year { margin-top: 14px; } .hm-year:first-of-type { margin-top: 0; } .hm-year__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; } .hm-year__label { font-weight: 650; } .hm-year__total { font-size: 12px; color: var(--muted); } .hm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } .hm { display: block; } .hm-cell { stroke: rgba(0,0,0,.04); } .hm-legend { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); } .hm-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } .hm--l0 { fill: var(--line); background: var(--line); } .hm--l1 { fill: #9be9a8; background: #9be9a8; } .hm--l2 { fill: #40c463; background: #40c463; } .hm--l3 { fill: #30a14e; background: #30a14e; } .hm--l4 { fill: #216e39; background: #216e39; } /* Распределение по категориям */ .catbars { display: grid; gap: 8px; } .catbar { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto; align-items: center; gap: 10px; } .catbar__name { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; overflow-wrap: anywhere; } .catbar__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--chip, var(--muted)); flex: none; } .catbar__track { height: 12px; background: var(--field); border-radius: 6px; overflow: hidden; } .catbar__fill { display: block; height: 100%; background: var(--chip, var(--accent)); border-radius: 6px; min-width: 2px; } .catbar__val { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } /* ── Мобильная версия (≤640px) ──────────────────────────────────────────── */ @media (max-width: 640px) { .wrap { padding: 12px 12px 40px; } /* Шапка в одну строку: логотип, проект, поиск и бургер. Остальные пункты — в выпадающем меню (fixed под шапкой, а не в потоке — иначе раскрытое меню растягивало бы липкую шапку). */ .topbar { flex-wrap: nowrap; align-items: center; padding: 10px 12px; gap: 8px; } .topbar__title { white-space: nowrap; font-size: 17px; } .topbar__tagline { display: none; } .topbar__actions .topbar__burger { display: inline-flex; } .topbar__tools { position: fixed; top: calc(var(--topbar-h, 58px) + 4px); right: 12px; z-index: 40; display: none; flex-direction: column; gap: 2px; min-width: 190px; padding: 6px; background: var(--pop); border: 1px solid var(--brd); border-radius: var(--radius-ctl); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(var(--blur)) saturate(150%); backdrop-filter: blur(var(--blur)) saturate(150%); } .topbar__tools--open { display: flex; } .topbar__tools { -webkit-backdrop-filter: blur(var(--blur)) saturate(150%); backdrop-filter: blur(var(--blur)) saturate(150%); } .toollink { white-space: nowrap; padding: 9px 10px; border-radius: 8px; font-size: 14px; } .toollink:hover { background: var(--field); } /* Композер: кнопки — иконками, поэтому весь ряд (поле + три кнопки) помещается в одну строку; раньше подписи не влезали и кнопки уезжали под поле. 44px — минимум под палец. */ .composer { margin-bottom: 14px; } /* Липкий композер выключен (см. выше). Возврат — раскомментировать этот блок и код в init(): .composer { position: sticky; top: var(--topbar-h, 84px); z-index: 6; } .composer--stuck:not(.composer--active) { padding: 6px; margin-bottom: 10px; } .composer--stuck:not(.composer--active) .composer__input { padding: 8px 12px; } .composer--stuck:not(.composer--active) .composer__row .ctlbtn:not(.ctlbtn--primary), .composer--stuck:not(.composer--active) .composer__form { display: none; } */ .ctlbtn { width: 44px; height: 44px; } /* Вкладки видов — горизонтальный скролл вместо переноса/сжатия. */ .viewnav { gap: 10px; } .viewnav__tabs { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; } .viewnav__tabs::-webkit-scrollbar { display: none; } .tab { white-space: nowrap; padding: 9px 14px; } .viewnav__period { width: 100%; justify-content: center; } .navbtn { min-width: 40px; height: 40px; } /* Карточки: один столбец — текст крупно сверху, под ним строка меты (дата, важность, категории, тэги). Служебное (метки и кнопки) сюда не входит — оно в .note__actions, отдельной строкой по тапу (см. @media (hover: none)). */ .note__view { grid-template-columns: 1fr; gap: 10px; } .note__side { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; text-align: left; gap: 6px 10px; } .note__time { order: 1; } .note__imp { order: 2; } .note__cats { order: 3; justify-content: flex-start; } /* Распорка разводит тэги и категории по разным строкам — иначе при длинных списках они сливаются в кашу. Только когда тэги есть (:has), иначе висел бы пустой ряд. Отрицательный margin гасит лишний row-gap, который вносит сама распорка. */ .note__side:has(.note__tags)::before { content: ""; order: 4; flex-basis: 100%; height: 0; margin: -3px 0; } .note__tags { order: 5; justify-content: flex-start; flex: 1 1 auto; min-width: 0; } .summary__editbtn { opacity: 1; } /* hover'а нет — кнопка нужна сразу */ .note__edit .icon, .note__dup .icon { width: 17px; height: 17px; } .hstep { width: 30px; } /* по высоте мелкие, так хоть шире под палец */ /* 16px в полях ввода — чтобы iOS не зумил при фокусе. */ .composer__input, .searchbar__input, .login__input, .field input, .field select, .noteedit__text, input[type="text"] { font-size: 16px; } /* Статистика: бары категорий в две строки (название+число / трек). */ .catbar { grid-template-columns: 1fr auto; } .catbar__track { grid-column: 1 / -1; } .tile__num { font-size: 22px; } }