/* ============================================================ Набор оформления «Белый лист» (data-palette="paper") ------------------------------------------------------------ Третий набор рядом с пастельным и ярким. Переключается в меню профиля, ничего не ломает: не выбран — файл просто не срабатывает, потому что все правила висят на атрибуте. ЧТО ЗА ИДЕЯ. Не «список дел», а технический лист, на который кто-то внимательный уже нанёс наблюдения. Продукт не просит заполнять формы — он показывает, что заметил. Отсюда приёмы: · белая бумага вместо серого фона; · волосяные линии вместо теней и скруглений — чертёж, а не карточки; · моноширинные подписи капслоком: пометка на полях, а не рубрика; · чёрная плашка вместо красной заливки: вычеркнутое выглядит вычеркнутым, а не подсвеченным; · красный — точкой и только там, где уже поздно. Когда красным подсвечено всё, не подсвечено ничего. ЧЕГО ЗДЕСЬ НЕТ. Ни одного элемента из заставки сериала, который послужил поводом: ни прицела, ни его слов, ни шрифтов, ни кадров. Чертёжная сетка, моноширинный текст и затирки — общее место технической графики; охраняется воплощение, а не жанр. СКОБКА БЕЗ :root — намеренно. Правила висят на любом предке с атрибутом, а не только на . В приложении это , в макете (tools/preview-machine.mjs) — колонка, и обе половины сравнения живут на одной странице без единой подпорки. ============================================================ */ [data-palette="paper"] { /* Лист лежит НА СТОЛЕ, а не сливается с ним. Первая версия красила и стол, и карточки почти одинаково белым (#f4f4f2 против #fbfbfa) — разница в семь единиц, её не видно ни на одном экране. Получился белый экран без структуры: где заканчивается один блок и начинается другой, читалось только по волосяной рамке. Стол ощутимо серее, карточка — чистая бумага. Разница теперь видна, и сетка на столе тоже: на #fbfbfa она пропадала. */ --bg: #e8e8e5; --surface: #ffffff; --surface2: #e2e2de; --panel: #fafaf8; /* Линия чертежа. Светлее текста, но темнее, чем обычная граница карточки: её должно быть видно как линию, а не как край. */ --border: #c6c8c4; --text: #14161a; --muted: #7c8087; /* Акцент не цвет, а структура: почти чёрный. Цвет остаётся единственному, что правда срочно. */ --accent: #1c1f24; --accent-dim: rgba(28,31,36,0.06); --brand: #2c3036; --brand-dim: rgba(44,48,54,0.08); --calm: #b3b6b1; --red: #c8341f; --red-dim: rgba(200,52,31,0.10); --yellow: #8a7b3a; --yellow-dim: rgba(138,123,58,0.10); --r-sm: 0px; --r-md: 0px; --r-lg: 0px; /* Пилюля тоже прямоугольник. Без этой строки фильтры и чипы проектов остались круглыми и зелёными — Анфиса это увидела сразу: «левая часть стала от старого дизайна». */ --r-pill: 0px; /* Градиент активной кнопки. Отдельная переменная мимо --accent, поэтому и пережила первую версию набора: чипы проектов оставались зелёными посреди чёрно-белого листа. */ --brand-gradient: #14161a; /* Теней нет вообще: на листе ничего не парит. */ --shadow-card: none; --shadow-float: none; --shadow-brand: none; /* Подложка переключателей — не серая пилюля, а поле листа. */ --track-bg: #ebebe8; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } /* ------------------------------------------------------------ ЛИСТ. Сетка сама по себе ничего не значит и не должна лезть в глаза: она задаёт, что перед нами разметочный лист, и на этом её работа заканчивается. Поэтому шаг крупный, а контраст на грани различимости. ------------------------------------------------------------ */ [data-palette="paper"] { background-color: var(--bg); /* Две сетки, как на миллиметровке: частая бледная и редкая потемнее. Одна сетка читается как «фон в клетку», две — как разметочный лист, и разница именно в этом. Обе на грани различимости: сетка задаёт, что перед нами лист, и на этом её работа заканчивается. Заметная сетка начинает спорить с содержимым. */ background-image: linear-gradient(to right, rgba(20,22,26,0.055) 1px, transparent 1px), linear-gradient(to bottom, rgba(20,22,26,0.055) 1px, transparent 1px), linear-gradient(to right, rgba(20,22,26,0.028) 1px, transparent 1px), linear-gradient(to bottom, rgba(20,22,26,0.028) 1px, transparent 1px); background-size: 128px 128px, 128px 128px, 32px 32px, 32px 32px; } /* ------------------------------------------------------------ ПОЧЕМУ СЕТКИ НЕ БЫЛО ВИДНО Сетка лежит на элементе, который несёт атрибут набора, — в приложении это . А заливает себя своим градиентом («мягкий студийный свет» из style.css) и накрывает её целиком. Поэтому здесь тело делаем прозрачным. Правило нарочно смотрит на body ВНУТРИ набора: в макете (tools/preview-machine.mjs) атрибут висит на колонке, body ей не потомок, и правило там просто не срабатывает — колонка рисует сетку сама. ------------------------------------------------------------ */ [data-palette="paper"] body { background: none; } /* ------------------------------------------------------------ БЛОК = ЛИСТ, А НЕ КАРТОЧКА Тени убраны совсем. Тень говорит «этот объект лежит сверху», а здесь всё нанесено на один лист. Вместо тени — линия и угловые метки: так размечают чертёж под обрез. ------------------------------------------------------------ */ [data-palette="paper"] .widget, [data-palette="paper"] .ov, [data-palette="paper"] .bl, [data-palette="paper"] .todaybar { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 0; box-shadow: none; } /* Угловые метки. Чистая декорация, но она делает главное: объясняет, почему у блока нет тени, — он не парит, он отчерчен. */ [data-palette="paper"] .widget::before, [data-palette="paper"] .widget::after { content: ''; position: absolute; width: 7px; height: 7px; border: 1px solid var(--text); opacity: .55; pointer-events: none; } [data-palette="paper"] .widget::before { top: -1px; left: -1px; border-right: none; border-bottom: none; } [data-palette="paper"] .widget::after { bottom: -1px; right: -1px; border-left: none; border-top: none; } /* ------------------------------------------------------------ ПОДПИСЬ МАШИНЫ Заголовок блока перестаёт быть заголовком раздела и становится подписью к наблюдению: моноширинный, капслоком, с ведущей чертой. Разница смысловая: «БЮДЖЕТЫ» как рубрика читается как меню, «— БЮДЖЕТЫ» как отметка на полях читается как чья-то пометка. ------------------------------------------------------------ */ [data-palette="paper"] .widget-title, [data-palette="paper"] .today-k, [data-palette="paper"] .lost-k, [data-palette="paper"] .bl-name, [data-palette="paper"] .cal-day-name { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); } [data-palette="paper"] .widget-title { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } [data-palette="paper"] .widget-title::before { content: ''; width: 14px; height: 1px; background: var(--text); flex: none; } /* ------------------------------------------------------------ ЧИСЛА Цифры моноширинные и с табличными знаками: в столбце сумм единицы должны стоять под единицами. В нынешнем оформлении они «пляшут», и колонка денег читается хуже, чем могла бы. ------------------------------------------------------------ */ [data-palette="paper"] .today-v, [data-palette="paper"] .lost-sum, [data-palette="paper"] .lost-val, [data-palette="paper"] .bl-val, [data-palette="paper"] .ov-date, [data-palette="paper"] .cal-day, [data-palette="paper"] .since-when { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.2px; } /* ------------------------------------------------------------ СТРОКА ДНЯ Была цветная плашка. Стала шапка листа: тонкая линия сверху, дата моноширинно слева, сводка обычным текстом. Тревога не в фоне, а в словах — фоном тревожить нечестно, он одинаков и когда горит, и когда нет. ------------------------------------------------------------ */ [data-palette="paper"] .todaybar { border-left: 3px solid var(--text); padding-left: 16px; } [data-palette="paper"] .today-bad { color: var(--red); font-weight: 700; } /* ------------------------------------------------------------ ТО, ЧТО УЖЕ СЛУЧИЛОСЬ — ЗАТИРКА, А НЕ ПОДСВЕТКА Красная заливка кричит «смотри сюда» одинаково громко на первой и на двадцатой строке. Чёрная плашка работает иначе: она говорит «здесь уже нечего решать», и таких строк в списке обычно две-три. ------------------------------------------------------------ */ [data-palette="paper"] .ww-red .ww-why, [data-palette="paper"] .d-bad { background: var(--text); color: var(--surface); padding: 1px 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .3px; } [data-palette="paper"] .ww-yellow .ww-why { border-bottom: 1px dashed var(--muted); color: var(--text); } /* Красная метка слева — единственное цветное пятно на листе. Три пикселя, и их видно ровно потому, что больше ничего не цветное. */ [data-palette="paper"] .lv-red { border-left: 3px solid var(--red); } [data-palette="paper"] .lv-yellow { border-left: 3px solid var(--muted); } /* ------------------------------------------------------------ ПОЛОСЫ Толстая скруглённая полоса — из мира «прогресс, ура». Здесь она измерительная шкала: тонкая, прямая, с засечкой. ------------------------------------------------------------ */ [data-palette="paper"] .bl-bg { height: 4px; background: var(--surface2); border-radius: 0; } [data-palette="paper"] .bl-fill { background: var(--text); border-radius: 0; } [data-palette="paper"] .bl.over .bl-fill, [data-palette="paper"] .over .bl-fill { /* Перерасход — штриховка, а не просто другой цвет: заштрихованное поле на чертеже значит «зона за пределом», и это читается без легенды. */ background: repeating-linear-gradient( 45deg, var(--red) 0 3px, transparent 3px 6px); } /* ------------------------------------------------------------ КНОПКИ Прямоугольник с линией. Главная — чёрная заливка: на листе, где нет ни одного цветного пятна, чёрный прямоугольник и есть самое заметное место. ------------------------------------------------------------ */ [data-palette="paper"] .btn { border-radius: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .4px; text-transform: uppercase; border: 1px solid var(--text); } [data-palette="paper"] .btn-primary { background: var(--text); color: var(--surface); border-color: var(--text); } [data-palette="paper"] .btn-primary:hover { background: #000; } [data-palette="paper"] .btn-hero { padding: 10px 18px; } /* ------------------------------------------------------------ КАЛЕНДАРЬ Сетка становится настоящей сеткой: с линиями, а не с воздухом между ячейками. Сегодня — не заливка кружком, а рамка: отметка на календаре, а не выделение маркером. ------------------------------------------------------------ */ [data-palette="paper"] .cal-grid { border-top: 1px solid var(--border); border-left: 1px solid var(--border); gap: 0; } [data-palette="paper"] .cal-day, [data-palette="paper"] .cal-blank, [data-palette="paper"] .cal-day-name { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 0; } /* «Сегодня»: рамка вместо заливки — отметка на календаре, а не мазок маркером. Но у базового правила остаётся color: #fff под заливку, которую я убрала, — и число становилось белым на белом. Анфиса увидела пустую клетку. Цвет возвращаем явно. */ [data-palette="paper"] .cal-day.cal-today { outline: 1px solid var(--text); outline-offset: -3px; background: none; color: var(--text); font-weight: 800; } [data-palette="paper"] .cal-month { font-family: var(--mono); text-transform: uppercase; letter-spacing: 1px; font-size: 12px; } /* ------------------------------------------------------------ МЕЛОЧЬ, КОТОРАЯ ДЕЛАЕТ ЖАНР Проект рядом с задачей — как индекс на чертеже, в квадратных скобках. Дешёвый приём, но именно из таких деталей складывается ощущение, что лист заполняла машина, а не человек в форме. ------------------------------------------------------------ */ [data-palette="paper"] .ww-project::before { content: '['; } [data-palette="paper"] .ww-project::after { content: ']'; } [data-palette="paper"] .ww-project { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: .3px; } /* Разделители между строками наблюдений — пунктир, а не сплошная: сплошная делит на разделы, пунктир перечисляет. */ [data-palette="paper"] .ww + .ww, [data-palette="paper"] .lost-line + .lost-line, [data-palette="paper"] .since-row + .since-row { border-top: 1px dashed var(--border); } /* ------------------------------------------------------------ СКОЛЬКО НА ЛИСТЕ КРАСНОГО Замер показал девятнадцать красных мест на трёх экранах — при том что весь замысел держится на «красный точкой». Причина не в наборе цветов, а в том, что базовый CSS красит красным всё тревожное разом: плашки задач, даты, числа бюджета. Пока красный один из двух цветов, это работает. Когда цвета больше нет нигде, девятнадцать пятен превращаются в сыпь. Поэтому здесь красный отбирается у всего, кроме одного случая: УЖЕ ПОЗДНО. Срок прошёл, лимит исчерпан. Остальное — тем же чёрным, но другой формой: рамка, штриховка, пунктир. Форма различает не хуже цвета, а шума не создаёт. ------------------------------------------------------------ */ /* Плашка задачи: рамка вместо заливки, буквы чёрные. */ [data-palette="paper"] .clarity-badge { border-radius: 0; font-family: var(--mono); font-weight: 600; letter-spacing: .8px; background: none; border: 1px solid var(--border); color: var(--text); } [data-palette="paper"] .clarity-yellow { background: none; color: var(--text); border-style: dashed; } /* Единственное исключение: уже поздно. Не буквы, а плашка — на белом листе чёрный прямоугольник заметнее любого цвета, а красная кромка добавляет ровно один цветной пиксель. */ [data-palette="paper"] .clarity-red { background: var(--text); color: var(--surface); border-color: var(--text); box-shadow: inset 2px 0 0 var(--red); } [data-palette="paper"] .clarity-green { background: none; color: var(--muted); border-color: var(--border); } /* Даты и числа не красим: срочность видно по плашке рядом, а красная дата рядом с красной плашкой удваивает сигнал. */ [data-palette="paper"] .timeline-date.urgent, [data-palette="paper"] .timeline-date.soon, [data-palette="paper"] .budget-nums { color: var(--text); } [data-palette="paper"] .timeline-date.urgent { font-weight: 700; text-decoration: underline; } /* День с просроченным сроком в календаре: точка под числом, а не красная цифра. Цифра должна оставаться цифрой. */ [data-palette="paper"] .cal-day .cal-dot-red { background: var(--red); } /* ============================================================ ПРАВКИ ПОСЛЕ ПЕРВОГО ПОКАЗА ============================================================ */ /* ------------------------------------------------------------ 1. ВСЁ ПРЯМОУГОЛЬНОЕ Скругления в базовом CSS зашиты числом, а не переменной, в 172 местах: «border-radius: 20px», «9px», «3px». Переменные их не достают, поэтому здесь одно общее правило. !important тут не лень, а единственный способ: у обычного правила специфичность ниже, чем у «.pf { border-radius: … }», и оно проигрывает. Набор оформления — как раз то место, где такое допустимо: он поверх всего и по построению последний. ------------------------------------------------------------ */ [data-palette="paper"] *, [data-palette="paper"] *::before, [data-palette="paper"] *::after { border-radius: 0 !important; } /* ------------------------------------------------------------ 2. ВНУТРЕННИЕ РАМКИ — ДОЛОЙ Рамка вокруг каждой строки бюджета превращала список в решётку: рамка внутри рамки внутри рамки, и глазу не за что зацепиться. Рамка остаётся ОДНА — внешняя, у блока. Внутри строки делит волосяная линия снизу, и то не у последней. ------------------------------------------------------------ */ [data-palette="paper"] .bl, [data-palette="paper"] .ov { border: none; border-bottom: 1px solid var(--border); padding-bottom: 10px; } [data-palette="paper"] .bl:last-child, [data-palette="paper"] .ov:last-child { border-bottom: none; } /* ------------------------------------------------------------ 3. ФИЛЬТРЫ, ЧИПЫ, ПОИСК Не были тронуты вовсе — отсюда зелёные пилюли посреди листа. Логика та же, что у остального: прямоугольник, волосяная рамка, моноширинная подпись. Выбранное — чёрная заливка: на листе без цвета чёрный прямоугольник и есть самое заметное место. ------------------------------------------------------------ */ [data-palette="paper"] .pf, [data-palette="paper"] .filt, [data-palette="paper"] .fchip, [data-palette="paper"] .c-mini, [data-palette="paper"] .ltoggle, [data-palette="paper"] .status-badge { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; background: var(--surface); border: 1px solid var(--border); color: var(--muted); box-shadow: none; } [data-palette="paper"] .pf.active, [data-palette="paper"] .filt.active { background: var(--text); border-color: var(--text); color: var(--surface); box-shadow: none; } /* Счётчик внутри чипа — не пузырь, а приписка через двоеточие. */ [data-palette="paper"] .pf-n { background: none; opacity: 1; font-family: var(--mono); color: inherit; padding: 0 0 0 2px; } [data-palette="paper"] .pf-n::before { content: '· '; } /* Ряд фильтров был серой пилюлей-подложкой. Стал строкой на листе: подложки нет, кнопки стоят встык, как клавиши. */ [data-palette="paper"] .filter-row { background: none; padding: 0; gap: 0; } [data-palette="paper"] .filter-row .filt + .filt { border-left: none; } [data-palette="paper"] .filter-group-label { font-family: var(--mono); text-transform: uppercase; letter-spacing: 1.2px; font-size: 9.5px; } /* Поиск — поле ввода, а не пилюля: рамка снизу, как в бланке. */ [data-palette="paper"] .srch { background: none; border: 1px solid var(--border); padding: 3px 10px; } [data-palette="paper"] .srch:focus-within { border-color: var(--text); } [data-palette="paper"] .srch input { font-family: var(--mono); font-size: 12px; } /* Кнопка-призрак: тот же прямоугольник, только светлее. */ [data-palette="paper"] .btn-ghost { background: var(--surface); border: 1px solid var(--border); color: var(--text); } [data-palette="paper"] .btn-ghost:hover { border-color: var(--text); } /* ============================================================ ОБОЛОЧКА: САЙДБАР И ШАПКА Их разметка лежит в index.html, а не в render.js, и мой макет её не рисовал вовсе — поэтому первый вариант набора выглядел готовым у меня и наполовину старым у человека. Теперь макет берёт оболочку из настоящего файла, и вот что там нашлось. ============================================================ */ /* ------------------------------------------------------------ САЙДБАР — ПЛИТА, НА КОТОРОЙ ЛЕЖИТ ЛИСТ Единственное место, где остался градиент: он задан прямо в .sidebar тремя слоями, мимо всех переменных, поэтому набор его и не достал. Плюс блик — анимированная полоса поверх. Оставляем сайдбар тёмным намеренно. Он не часть листа, он то, на чём лист лежит: навигация не должна выглядеть содержимым. Но плоским — без градиента, блика и тени. ------------------------------------------------------------ */ [data-palette="paper"] .sidebar { background: #14161a; box-shadow: none; } /* Блик выключаем совсем. Движение на плоском листе читается как поломка, а не как эффект. */ [data-palette="paper"] .sidebar::after { display: none; } /* Лого — белый квадрат на тёмном. Чёрный на чёрном не виден, а именно это и вышло бы: --brand-gradient в этом наборе почти чёрный, и логотип слился бы с сайдбаром. */ [data-palette="paper"] .sidebar-logo { background: #f4f4f2; color: #14161a; box-shadow: none; font-family: var(--mono); font-weight: 700; } /* ГЛАВНОЕ ЗДЕСЬ. Активный пункт меню красится в --brand-gradient, а он в этом наборе почти чёрный — на тёмном сайдбаре пункт стал бы невидимым. Человек открыл бы приложение и не понял, на каком он экране. Инвертируем: выбранное — белый блок. Нашлось замером, а не глазами: на макете без оболочки этого пункта просто не было. */ [data-palette="paper"] .nav-btn.active { background: #f4f4f2; color: #14161a; box-shadow: none; } [data-palette="paper"] .nav-btn { color: rgba(244,244,242,0.55); font-family: var(--mono); } [data-palette="paper"] .nav-btn:hover { background: rgba(244,244,242,0.10); color: rgba(244,244,242,0.95); } [data-palette="paper"] .nav-label { letter-spacing: .6px; text-transform: uppercase; font-size: 8.5px; } /* ------------------------------------------------------------ ШАПКА Название экрана — не заголовок статьи, а поле бланка: что сейчас на столе. Моноширинно, капслоком, с разрядкой. ------------------------------------------------------------ */ [data-palette="paper"] .topbar-title { font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } [data-palette="paper"] .topbar > .btn-ghost, [data-palette="paper"] .bell, [data-palette="paper"] .user-chip { background: var(--surface); border: 1px solid var(--border); box-shadow: none; } [data-palette="paper"] .avatar { background: var(--text); color: var(--surface); font-family: var(--mono); box-shadow: none; } [data-palette="paper"] .user-name { font-family: var(--mono); font-size: 12px; } [data-palette="paper"] .project-select { background: var(--surface); border: 1px solid var(--border); box-shadow: none; font-family: var(--mono); font-size: 12px; } /* Счётчик на колокольчике — единственная красная точка в шапке. Квадратная, как всё остальное, и не крупнее, чем нужно. */ [data-palette="paper"] .bell-badge { background: var(--red); box-shadow: none; } /* ============================================================ ТЁМНАЯ ПОЛОВИНА Тёмную тему переключают отдельно от набора цветов, и без этой части «Белый лист» в темноте превратился бы в мешанину: фон из базовой тёмной темы, а линии и подписи отсюда. Смысл тот же, значения перевёрнуты: не белая бумага, а тёмный лист кальки. Линии светлее фона, текст мягкий белый — чистый #fff на тёмном режет глаз и «звенит» на волосяных линиях. ============================================================ */ [data-palette="paper"][data-theme="dark"] { /* Та же правка, что на светлом: стол заметно темнее карточки, иначе тёмная тема превращается в одно серое пятно. */ --bg: #131416; --surface: #1e1f22; --surface2: #2a2c30; --panel: #1a1b1e; --border: #3a3d42; --text: #e6e6e3; --muted: #8d9198; --accent: #e6e6e3; --accent-dim: rgba(230,230,227,0.08); --brand: #cfd0cc; --brand-dim: rgba(207,208,204,0.10); --brand-gradient: #e6e6e3; --calm: #565a5f; --red: #e2593f; --red-dim: rgba(226,89,63,0.14); --yellow: #b7a45c; --yellow-dim: rgba(183,164,92,0.14); --track-bg: #26282b; /* Сетка на тёмном должна быть светлее фона, а не темнее. Слоёв тоже два — частый и редкий, как на светлом. */ background-image: linear-gradient(to right, rgba(230,230,227,0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(230,230,227,0.07) 1px, transparent 1px), linear-gradient(to right, rgba(230,230,227,0.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(230,230,227,0.035) 1px, transparent 1px); background-size: 128px 128px, 128px 128px, 32px 32px, 32px 32px; } /* Чёрная плашка на тёмном фоне не читается — она становится светлой. Смысл сохраняется: плашка это инверсия листа, какой бы он ни был. */ [data-palette="paper"][data-theme="dark"] .ww-red .ww-why, [data-palette="paper"][data-theme="dark"] .d-bad, [data-palette="paper"][data-theme="dark"] .clarity-red, [data-palette="paper"][data-theme="dark"] .btn-primary, [data-palette="paper"][data-theme="dark"] .pf.active, [data-palette="paper"][data-theme="dark"] .filt.active { background: var(--text); color: var(--bg); border-color: var(--text); }