/* Визуальный словарь взят из рабочего дашборда (bi-v2): те же токены, та же таблица-как-интерфейс, те же пилюли отклонений и та же ломаная на inline-SVG. Приложение должно быть узнаваемо своим, а не «ещё одним health-трекером». */ :root{ --bg:#f6f7f9; --card:#fff; --ink:#1a1d23; --line:#e6e8ec; --good:#0e7a3d; --goodbg:#e8f5ee; --bad:#b3261e; --badbg:#fdecea; --warn:#8a5a00; --warnbg:#fdf3e2; --acc:#2456c8; --accbg:#eef3fd; /* Приглушённый серый темнее, чем в рабочем дашборде. Там --mut:#7a8090 и --fc:#9aa1b0 — это 3,95:1 и 3,1:1 на белом при норме 4,5:1 для мелкого текста, а мелким тут набрано почти всё второстепенное: подписи осей, число замеров, пометки «по телефону». Считано, не на глаз: #61697a на #fff = 5,5:1; на #f6f7f9 = 5,1:1 #6b7280 на #fff = 4,8:1 Прежние значения для сравнения: #7a8090 = 3,95:1, #9aa1b0 = 2,59:1. Роль «прогноз/пометка» отличается курсивом и рамкой, а не ещё более светлым серым — иначе выигрыш в оттенке оплачивается читаемостью. */ --mut:#61697a; --fc:#6b7280; /* было #7a8090 (3,95:1) и #9aa1b0 (2,59:1) */ --btn-line:#9aa1b0; /* это РАМКА, ей нужно 3:1 — проходит */ --ease:cubic-bezier(.4,0,.2,1); } *{box-sizing:border-box} body{margin:0;font:14px/1.45 -apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg);color:var(--ink);padding:24px; -webkit-text-size-adjust:100%} /* Установленное на «Домой» приложение открывается во весь экран, без адресной строки: снизу в поле попадает полоса жеста, в альбомной — «чёлка». Отступ вешаем на , а НЕ на : у body свой padding, и он разный на брейкпойнтах — перебив его здесь, вернули бы телефону широкие поля ровно в том режиме, ради которого их и ужимали. */ @media (display-mode:standalone){ html{background:var(--bg); padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)} } .wrap{max-width:1160px;margin:0 auto} h1{font-size:18px;margin:0 0 4px} h2{font-size:15px;margin:26px 0 8px} .sub{color:var(--mut);font-size:13px;margin-bottom:20px} .note{color:var(--mut);font-size:12.5px;margin-bottom:10px} .foot{color:var(--mut);font-size:12px;margin-top:24px; border-top:1px solid var(--line);padding-top:12px} a{color:var(--acc);text-decoration:none} a:hover{text-decoration:underline} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{ outline:2px solid var(--acc);outline-offset:1px} /* ---------- шапка ---------- */ .topbar{display:flex;align-items:center;gap:18px;margin-bottom:18px;flex-wrap:wrap} .topbar .brand{font-weight:700;font-size:15px} .tag{font-size:10.5px;color:var(--fc);border:1px solid var(--line);border-radius:4px; padding:0 4px;margin-left:5px;white-space:nowrap} .nav{display:flex;gap:4px;flex-wrap:wrap} .nav a{padding:5px 12px;border-radius:8px;color:var(--ink)} .nav a.on{background:var(--acc);color:#fff} .nav a:hover{text-decoration:none;background:var(--accbg)} .nav a.on:hover{background:var(--acc)} .topbar .spacer{flex:1} /* ---------- сторож: полоса состояния данных ---------- Он не заводит задач, он не даёт экрану тихо застыть на позапрошлой неделе. Поэтому висит на КАЖДОМ экране, а не прячется в свою вкладку. */ .wdbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px} /* ⚠ white-space:nowrap здесь давал горизонтальную прокрутку ВСЕЙ страницы на 375 px: пилюли сторожа шириной 368–421 px не влезали, и обрезался ровно тот текст, который обязан объявлять ограничение. Переносим строки. */ .wd{font-size:12px;border:1px solid var(--line);border-radius:16px; padding:3px 11px;background:var(--card);color:var(--mut);max-width:100%} .wd b{color:var(--ink);font-weight:600} .wd.bad{background:var(--badbg);border-color:#f3c9c5;color:#7d1c16} .wd.bad b{color:#7d1c16} .wd.warn{background:var(--warnbg);border-color:#f0dcb4;color:var(--warn)} .wd.warn b{color:var(--warn)} /* ---------- панель управления ---------- */ .panel{background:var(--card);border:1px solid var(--line);border-radius:10px; padding:14px 16px;margin-bottom:16px} .ctrls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13px} .lbl{color:var(--ink);font-weight:600} .grp{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap} input[type=date],input[type=time],select{font:inherit;border:1px solid var(--line); border-radius:8px;padding:5px 8px;background:#fff;color:var(--ink)} .btn{border:1px solid var(--acc);background:var(--acc);color:#fff;font:inherit; border-radius:8px;padding:6px 16px;cursor:pointer; transition:background .18s var(--ease)} .btn:hover{background:#1c47a8} .btn.ghost{background:#fff;color:var(--acc)} .btn.ghost:hover{background:var(--accbg)} /* overflow:hidden срезал кольцо фокуса у кнопок внутри — человек, идущий табом, не видел, на какой из четырёх он стоит. Скругление держим на самих кнопках, а не обрезкой родителя. */ .seg{display:inline-flex;border:1px solid var(--line);border-radius:8px} .seg a:first-child{border-radius:7px 0 0 7px} .seg a:last-child{border-radius:0 7px 7px 0} .seg a{padding:5px 12px;background:#fff;cursor:pointer;color:var(--ink)} .seg a:hover{text-decoration:none;background:var(--accbg)} .seg a.on{background:var(--acc);color:#fff} .seg a.on:hover{background:var(--acc)} /* ---------- карточки показателей ---------- */ .cards{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px} .card{background:var(--card);border:1px solid var(--line);border-radius:10px; padding:12px 16px;min-width:150px;flex:1 1 150px} .card .t{color:var(--mut);font-size:12px} .card .v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums; line-height:1.25} .card .d{font-size:12.5px;margin-top:2px;color:var(--mut)} .card.hi .v{color:var(--acc)} /* ---------- таблицы: главный интерфейс, а не иллюстрация ---------- */ table{width:100%;border-collapse:collapse;background:var(--card); border:1px solid var(--line);border-radius:10px;overflow:hidden; font-variant-numeric:tabular-nums} th,td{padding:7px 10px;text-align:right;border-bottom:1px solid var(--line); white-space:nowrap} th{background:#fafbfc;color:var(--mut);font-weight:600;font-size:12px} th:first-child,td:first-child{text-align:left} tbody tr:hover{background:#fbfcff} .tot td{font-weight:700;background:#fafbfc;border-top:2px solid var(--line)} .pos{color:var(--good)} .neg{color:var(--bad)} .pill{display:inline-block;padding:1px 7px;border-radius:10px;font-size:12px; font-weight:600} .pill.pos{background:var(--goodbg);color:var(--good)} .pill.neg{background:var(--badbg);color:var(--bad)} .pill.warn{background:var(--warnbg);color:var(--warn)} .pill.mut{background:#eef0f3;color:var(--mut)} .sm{font-size:11.5px;color:var(--mut)} .we{color:#3a5bbf} /* суббота и воскресенье */ .mutrow td{color:var(--mut)} .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch} /* ---------- пустое место вместо подделки ---------- Метрику, которую нельзя посчитать, не рисуем. Это оформление того самого пустого места: оно должно объяснять себя, а не выглядеть как ошибка. */ .empty{background:var(--card);border:1px dashed var(--btn-line);border-radius:10px; padding:22px 20px;color:var(--mut)} .empty b{color:var(--ink);display:block;font-size:15px;margin-bottom:6px} .empty .big{font-size:32px;font-weight:700;color:var(--ink); font-variant-numeric:tabular-nums;line-height:1.1;margin:10px 0 4px} .bar{height:8px;background:#eceff3;border-radius:5px;overflow:hidden; margin:12px 0 6px;max-width:420px} .bar i{display:block;height:100%;background:var(--acc);border-radius:5px} /* ---------- ломаная пульса ---------- Тот же приём, что на рабочем дашборде: inline-SVG в viewBox 0..100 с preserveAspectRatio=none, толщина линии держится non-scaling-stroke, точки и полосы наведения — обычным HTML поверх. */ .chart{margin:8px 0 0} .chart figcaption{font-size:12.5px;color:var(--ink);font-weight:600;margin-bottom:8px} .cwrap{display:flex;align-items:stretch;gap:6px} .cyaxis{position:relative;width:44px;flex:none;height:220px} .cy{position:absolute;right:0;transform:translateY(50%);white-space:nowrap; padding-right:5px;font-size:9.5px;color:var(--mut);font-variant-numeric:tabular-nums} .cplot{position:relative;flex:1;min-width:0;height:220px; border-left:1px solid #c3ccd8;border-bottom:1px solid #aab3c0} .cgrid{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--line)} .cbase{position:absolute;left:0;right:0;height:0;border-top:1.5px solid #b6c2d8} /* Подпись линии фона — то самое число, относительно которого построен экран. Было #7a8699 = 3,69:1. Теперь --mut = 5,5:1. */ .cbase span{position:absolute;right:2px;top:-15px;font-size:10.5px;color:var(--mut); background:var(--card);padding:0 3px} .cline{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible} .cpath{fill:none;stroke:#2456c8;stroke-width:2;stroke-linejoin:round;stroke-linecap:round} /* Разрыв между замерами: пунктир. Между двумя точками через десять минут не известно ничего, и сплошная линия была бы обещанием без данных. */ .cpath.gap{stroke:#a8bbe6;stroke-width:1.5;stroke-dasharray:3 3} .cdot{position:absolute;width:6px;height:6px;margin:0 0 -3px -3px;border-radius:50%; background:#fff;border:2px solid #2456c8;box-sizing:border-box;pointer-events:none} .cdot.act{border-color:var(--bad);background:#fff} /* замер «в движении» */ .cband{position:absolute;top:0;bottom:0;z-index:3;width:10px;margin-left:-5px} .cband:hover{background:rgba(36,86,200,.07)} .cax{display:flex;margin-top:3px;padding-left:50px;position:relative;height:14px; overflow:hidden} /* последняя метка вылезала за правый край на 375 px */ .cax-l{position:absolute;transform:translateX(-50%);font-size:10.5px;color:var(--mut); font-variant-numeric:tabular-nums;white-space:nowrap} .cax-l:last-child{transform:translateX(-100%)} .clegend{margin-top:10px;font-size:12px;color:var(--mut);display:flex;gap:16px; flex-wrap:wrap} .clegend i{display:inline-block;width:9px;height:9px;border-radius:50%; border:2px solid #2456c8;background:#fff;margin-right:5px;vertical-align:-1px} .clegend i.act{border-color:var(--bad)} .clegend i.gapline{width:14px;height:0;border:0;border-top:1.5px dashed #a8bbe6; border-radius:0;vertical-align:3px} /* ---------- вход ---------- */ .login{max-width:340px;margin:14vh auto;background:var(--card); border:1px solid var(--line);border-radius:12px;padding:24px; display:flex;flex-direction:column;gap:10px} .login .brand{font-weight:700;font-size:17px} .login .note{color:var(--mut);font-size:12.5px;margin:0 0 6px} .login input{font:inherit;font-size:16px;height:44px;padding:0 12px; border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)} .login .btn{height:44px;font-size:15px} .lerr{background:var(--badbg);border:1px solid #f3c9c5;color:#7d1c16; border-radius:8px;padding:8px 12px;font-size:13px} .logout{color:var(--mut);font-size:12.5px} /* ---------- адаптив ---------- */ @media (max-width:760px){ body{padding:10px} .wrap{max-width:100%} .card{min-width:calc(50% - 6px);padding:10px 12px} .card .v{font-size:20px} .cyaxis,.cplot{height:180px} th,td{padding:6px 7px;font-size:12.5px} h1{font-size:17px} .sub{margin-bottom:14px} .panel{padding:12px} /* ⚠ 16px — не вкусовщина: при меньшем кегле Safari на iOS зумит страницу при фокусе в поле и обратно уже не отъезжает. Высота 44 — минимальная цель для пальца. */ input[type=date],input[type=time],select{font-size:16px;height:44px; padding:0 10px} .btn{min-height:44px;padding:0 18px} .ctrls{gap:8px} .ctrls .lbl{font-size:13px} } /* Пальцем целятся хуже, чем мышью: ссылки меню и кнопки диапазона получают полноценную цель во всю высоту строки. Правило по типу указателя, а не по ширине: планшет широкий, а палец у него тот же. */ @media (pointer:coarse){ .nav a{min-height:44px;display:flex;align-items:center;padding:0 14px} .seg a{min-height:44px;display:flex;align-items:center} .logout{min-height:44px;display:flex;align-items:center} .crumbs a,.note a{padding:4px 2px} /* Наведения на тач-экране нет: подсветка «залипала» после касания. */ tbody tr:hover{background:transparent} .nav a:hover{background:transparent} .nav a.on{background:var(--acc)} } @media (max-width:420px){ .card{min-width:100%} .topbar{gap:10px} .nav{gap:2px} .nav a{padding:0 11px;font-size:13.5px} } /* Широкие таблицы на телефоне: первая колонка (дата) остаётся на месте, остальное едет вбок внутри своего контейнера. Без этого, домотав до нужного столбца, не помнишь, к какому дню он относится. ⚠ border-collapse:collapse ЛОМАЕТ position:sticky на ячейках — липкая колонка просто уезжает вместе с остальными. Поэтому на телефоне таблица переводится на separate + border-spacing:0, а рамки переезжают на сами ячейки: внешне то же самое, а sticky начинает работать. */ @media (max-width:760px){ .tscroll{position:relative} /* ⚠ И overflow:hidden тоже снимаем. Он стоит на table ради скругления углов, но делает саму таблицу контейнером прокрутки — а sticky липнет к ближайшему такому контейнеру, то есть к неподвижному, и никуда не липнет. Скругление на телефоне и так не нужно: рамки нет. */ .tscroll table{min-width:660px;border-collapse:separate;border-spacing:0; border:0;overflow:visible;border-radius:0} .tscroll th,.tscroll td{border-bottom:1px solid var(--line)} .tscroll th:first-child,.tscroll td:first-child{position:sticky;left:0;z-index:2; background:var(--card); /* тень вместо рамки: рамка на липкой ячейке при прокрутке дрожит */ box-shadow:1px 0 0 var(--line)} .tscroll thead th{position:sticky;top:0;z-index:3;background:#fafbfc} .tscroll thead th:first-child{z-index:4;background:#fafbfc} .tscroll tbody tr:hover td:first-child{background:var(--card)} .tscroll .mutrow td:first-child{background:var(--card)} } @media (prefers-reduced-motion:reduce){ *{transition:none !important;animation:none !important} }