/** * Оформление «Лялиной Радости». * * Как оно устроено и почему: * два шрифта — Rubik для имени, крупных чисел и заголовков, Golos * Text для всего остального; оба свои, лежат рядом, наружу не ходим; * поверхности ярусами, а не коробками: приподняты только карточки * категорий, остальное живёт прямо на фоне и делится воздухом; * цвет закреплён за категорией и работает как подпись; * навигация внизу, плавающей полосой, под большой палец; * тёмная тема без белых вспышек — приложение открывают ночью. */ /* ── Шрифты ──────────────────────────────────────────────── */ @font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/golos-cyr.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/golos-lat.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; } @font-face { font-family: "Rubik"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/fonts/rubik-cyr.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Rubik"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/fonts/rubik-lat.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; } /* ── Цвета ───────────────────────────────────────────────── */ :root { color-scheme: light dark; /* Нейтральные с уклоном в розовый, под акцент: серый без оттенка выглядит случайным, серый с оттенком — выбранным. */ --ground: #f6f3f5; --surface: #ffffff; --surface-2: #f0ecef; --ink: #1d1922; --ink-2: #6f6876; --ink-3: #a29ba8; --hairline: #e8e3e7; --accent: #b8305e; --accent-ink: #ffffff; --accent-weak: #f8e6ee; --feed: #c3672a; --feed-weak: #faece1; --diaper: #2f6f9f; --diaper-weak: #e4eef7; --sleep: #357a5b; --sleep-weak: #e2f1e9; --pump: #8a6547; --pump-weak: #f3ebe4; --other: #5d6472; --other-weak: #e9ebef; --danger: #b03028; --display: "Rubik", "Golos Text", -apple-system, "Segoe UI", sans-serif; --body: "Golos Text", -apple-system, "Segoe UI", Roboto, sans-serif; --r-s: 12px; --r-m: 18px; --r-l: 26px; --tap: 52px; --lift: 0 1px 2px rgba(29, 25, 34, .05), 0 8px 24px -12px rgba(29, 25, 34, .18); --float: 0 10px 30px -8px rgba(29, 25, 34, .28); } /* Тёмные цвета перечислены дважды намеренно: системную настройку ловит медиазапрос, а ручной выбор и ночное время — атрибут на , который ставит скрипт ещё до первой отрисовки. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #121016; --surface: #1b181f; --surface-2: #242029; --ink: #f3eff3; --ink-2: #a59eab; --ink-3: #6f6876; --hairline: #2b2730; --accent: #ef86ad; --accent-ink: #2a0d18; --accent-weak: #2c1c25; --feed: #e59c66; --feed-weak: #2b1f15; --diaper: #7fadd6; --diaper-weak: #16212b; --sleep: #72bd94; --sleep-weak: #15251d; --pump: #bd9778; --pump-weak: #251d16; --other: #9ea6b4; --other-weak: #1f2128; --danger: #ff9b91; --lift: 0 1px 0 rgba(255, 255, 255, .03); --float: 0 10px 30px -8px rgba(0, 0, 0, .6); } } :root[data-theme="dark"] { --ground: #121016; --surface: #1b181f; --surface-2: #242029; --ink: #f3eff3; --ink-2: #a59eab; --ink-3: #6f6876; --hairline: #2b2730; --accent: #ef86ad; --accent-ink: #2a0d18; --accent-weak: #2c1c25; --feed: #e59c66; --feed-weak: #2b1f15; --diaper: #7fadd6; --diaper-weak: #16212b; --sleep: #72bd94; --sleep-weak: #15251d; --pump: #bd9778; --pump-weak: #251d16; --other: #9ea6b4; --other-weak: #1f2128; --danger: #ff9b91; --lift: 0 1px 0 rgba(255, 255, 255, .03); --float: 0 10px 30px -8px rgba(0, 0, 0, .6); } /* Старые имена оставлены как псевдонимы: их читает код карточек. */ :root { --bg: var(--ground); --text: var(--ink); --muted: var(--ink-2); --line: var(--hairline); } /* ── Основа ──────────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; } body { background: var(--ground); color: var(--ink); font: 16px/1.45 var(--body); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; font-variant-numeric: tabular-nums; } button, input, textarea { font-family: inherit; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .icon { display: block; flex: none; width: 20px; height: 20px; } @media (prefers-reduced-motion: no-preference) { .card-act, .tabbtn, .chip, .btn { transition: transform .12s ease, background-color .15s ease, opacity .15s ease; } } /* ── Шапка ───────────────────────────────────────────────── */ .bar { display: flex; align-items: center; gap: 12px; padding: calc(12px + env(safe-area-inset-top)) 20px 10px; background: var(--ground); } .avatar { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 14px; background: var(--accent-weak) center/cover no-repeat; color: var(--accent); font-family: var(--display); font-size: 18px; font-weight: 700; overflow: hidden; } .who { flex: 1; min-width: 0; } .who strong { display: block; font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; } .who span { display: block; font-size: 13px; color: var(--ink-2); } .hero { position: relative; display: flex; align-items: flex-end; gap: 12px; min-height: 236px; padding: calc(14px + env(safe-area-inset-top)) 20px 18px; background: var(--surface-2) center/cover no-repeat; color: #fff; } .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .66) 100%); } .hero > * { position: relative; z-index: 1; } .hero-text { flex: 1; min-width: 0; } .hero-text strong { display: block; font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; text-shadow: 0 1px 14px rgba(0, 0, 0, .4); } .hero-text span { display: block; margin-top: 3px; font-size: 14px; opacity: .9; text-shadow: 0 1px 10px rgba(0, 0, 0, .4); } .hero .avatar { display: none; } .hero.no-photo { min-height: 0; align-items: center; padding-bottom: 10px; background: var(--ground); color: var(--ink); } .hero.no-photo::after { display: none; } .hero.no-photo .avatar { display: grid; } .hero.no-photo .hero-text strong { font-size: 20px; font-weight: 600; text-shadow: none; } .hero.no-photo .hero-text span { color: var(--ink-2); font-size: 13px; opacity: 1; text-shadow: none; } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; background: var(--accent-weak); color: var(--accent); font-size: 12px; font-weight: 600; } .pill .icon { width: 15px; height: 15px; } /* ── Страница и секции ───────────────────────────────────── */ .page { max-width: 640px; margin: 0 auto; padding: 18px 20px calc(112px + env(safe-area-inset-bottom)); } .block { margin-top: 30px; } .block:first-child { margin-top: 0; } .block-title { margin: 0 0 12px; font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -0.015em; } /* Панель нужна только там, где содержимое должно читаться как один предмет. Секции живут на фоне и делятся воздухом. */ .panel { padding: 4px 0 0; } .tiny { margin: 8px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.45; } .tiny:first-child { margin-top: 0; } /* ── Карточки категорий ──────────────────────────────────── */ .cards { display: flex; flex-direction: column; gap: 10px; } .card-act { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 16px; border: 0; border-radius: var(--r-m); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; box-shadow: var(--lift); } .card-act:active { transform: scale(.985); } .ca-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 16px; background: var(--cw); color: var(--c); } .ca-icon .icon { width: 24px; height: 24px; } .ca-body { flex: 1; min-width: 0; } .ca-when { display: block; font-family: var(--display); font-size: 16px; font-weight: 600; color: var(--c); letter-spacing: -0.01em; } .ca-what { display: block; margin-top: 1px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ca-sum { display: block; margin-top: 2px; color: var(--ink-2); font-size: 12.5px; } .card-act.running { background: var(--cw); box-shadow: inset 0 0 0 1.5px var(--c); } /* ── Кнопки-крошки ───────────────────────────────────────── */ .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .chip { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 14px; border: 0; border-radius: 99px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; box-shadow: var(--lift); } .chip .icon { width: 18px; height: 18px; color: var(--ink-2); } .chip.chosen, .chip:active { background: var(--accent); color: var(--accent-ink); } .chip.chosen .icon, .chip:active .icon { color: var(--accent-ink); } /* ── Итоги дня ───────────────────────────────────────────── */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; margin-bottom: 18px; } .stat { padding: 12px 14px; border-radius: var(--r-s); background: var(--surface-2); } .stat-head { display: flex; align-items: center; gap: 6px; color: var(--c); } .stat-head .icon { width: 16px; height: 16px; } .stat-head span { font-size: 12px; font-weight: 600; letter-spacing: .02em; } .stat b { display: block; margin-top: 6px; font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } .stat i { display: block; margin-top: 3px; color: var(--ink-2); font-size: 12.5px; font-style: normal; } /* ── Лента дня ───────────────────────────────────────────── */ .navhead { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .navhead > div { flex: 1; text-align: center; } .navhead h2 { margin: 0; font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -0.015em; } .navhead p { margin: 1px 0 0; color: var(--ink-2); font-size: 13px; } .iconbtn { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: var(--lift); } .iconbtn[disabled] { opacity: .3; cursor: default; } .timeline { position: relative; margin: 0; padding: 0; list-style: none; } .timeline::before { content: ""; position: absolute; top: 26px; bottom: 26px; left: 71px; width: 1px; background: var(--hairline); } .ev { display: grid; grid-template-columns: 50px 36px 1fr; align-items: start; gap: 12px; width: 100%; padding: 8px 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; } .ev-time { padding-top: 9px; color: var(--ink-2); font-size: 13px; font-weight: 500; } .ev-mark { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--cw); color: var(--c); } .ev-mark .icon { width: 19px; height: 19px; } .ev-body { min-width: 0; padding-top: 6px; } .ev-body strong { display: block; font-size: 15px; font-weight: 600; } .ev-sub { display: block; color: var(--ink-2); font-size: 13px; } .empty { padding: 12px 0; color: var(--ink-2); font-size: 14px; } /* ── Что дальше ──────────────────────────────────────────── */ .cue { margin-bottom: 26px; } .cue:last-of-type { margin-bottom: 10px; } .cue-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; } .cue-mark { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--cw); color: var(--c); } .cue-mark .icon { width: 21px; height: 21px; } .cue-title { display: block; color: var(--c); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .cue-text { margin: 3px 0 0; font-family: var(--display); font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; } .cue-extra { margin: 3px 0 0; color: var(--ink-2); font-size: 13px; } .cue-bar { position: relative; height: 40px; } .cue-line, .cue-past { position: absolute; top: 27px; height: 3px; border-radius: 99px; } .cue-line { left: 0; right: 0; background: var(--hairline); } .cue-past { left: 0; background: var(--c); } .cue-range { position: absolute; top: 22px; height: 13px; border-radius: 99px; background: var(--c); opacity: .32; } .cue-mid { position: absolute; top: 26px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #fff; } .cue-now { position: absolute; top: 22px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--ground), 0 2px 10px rgba(20, 10, 20, .3); } .cue-now-label { position: absolute; top: 0; transform: translateX(-50%); color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } .cue-scale { display: flex; justify-content: space-between; gap: 10px; margin-top: 2px; color: var(--ink-2); font-size: 12px; } /* ── Недельные графики ───────────────────────────────────── */ .chart { margin-top: 24px; } .chart:first-child { margin-top: 0; } .chart-head { display: flex; align-items: center; gap: 8px; } .chart-head .icon { width: 17px; height: 17px; color: var(--c); } .chart-title { color: var(--c); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .chart-nums { margin: 3px 0 8px; font-family: var(--display); font-size: 15px; font-weight: 500; color: var(--ink); } .chart-svg { display: block; width: 100%; height: auto; overflow: visible; } .chart-base { stroke: var(--hairline); stroke-width: 1; } .chart-value, .chart-day { fill: var(--ink-2); font-family: var(--body); font-size: 12px; text-anchor: middle; } .chart-day.today { fill: var(--accent); font-weight: 600; } /* ── Нижняя панель ───────────────────────────────────────── */ /* Плавающая полоса, а не приклеенная к краю: так она читается как часть приложения, а не как обрезанный низ страницы. */ .tabbar { position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 30; display: grid; grid-template-columns: repeat(3, 1fr); max-width: 480px; margin: 0 auto; padding: 6px; border-radius: 24px; background: var(--surface); box-shadow: var(--float); } .tabbtn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0 8px; border: 0; border-radius: 18px; background: none; color: var(--ink-2); font-size: 11px; font-weight: 600; cursor: pointer; } .tabbtn .icon { width: 23px; height: 23px; } .tabbtn.chosen { background: var(--accent-weak); color: var(--accent); } /* ── Кнопки ──────────────────────────────────────────────── */ .btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: var(--tap); padding: 0 18px; border: 0; border-radius: 16px; background: var(--accent); color: var(--accent-ink); font-size: 16px; font-weight: 600; cursor: pointer; } .btn + .btn, .btn + .field, .field + .btn { margin-top: 10px; } .btn:active { transform: scale(.99); } .btn-quiet { background: var(--surface); color: var(--ink); box-shadow: var(--lift); } .btn-quiet .icon { color: var(--ink-2); } .btn-danger { background: none; color: var(--danger); } /* ── Списки настроек ─────────────────────────────────────── */ /* Группа строк: как в системных настройках телефона. Один предмет со скруглением, внутри строки через волосяную линию. */ .group { border-radius: var(--r-m); background: var(--surface); box-shadow: var(--lift); overflow: hidden; } .group .btn { border-radius: 0; box-shadow: none; justify-content: flex-start; padding: 0 16px; min-height: 56px; font-weight: 500; } .group .btn + .btn, .group .btn + .field, .group .field + .btn, .group > * + * { margin-top: 0; border-top: 1px solid var(--hairline); } .group .btn-danger { color: var(--danger); } .group .switch, .group .field, .group .tiny, .group .code, .group .steps, .group .baby-card, .group .choice { padding-left: 16px; padding-right: 16px; } .group .tiny { padding-top: 12px; padding-bottom: 12px; margin: 0; } .group .field { padding-top: 12px; padding-bottom: 14px; margin: 0; } .group .choice { padding-top: 12px; padding-bottom: 12px; } .group .steps { margin: 0; padding-top: 6px; padding-bottom: 8px; } .group .baby-card { padding-top: 16px; padding-bottom: 16px; margin: 0; } .group .code { margin: 12px 16px; } .switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 54px; font-size: 15px; cursor: pointer; } .switch input { width: 22px; height: 22px; flex: none; accent-color: var(--accent); cursor: pointer; } .steps { list-style: none; } .steps li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 14px; } .steps b { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--accent-weak); color: var(--accent); font-size: 12px; } .glyph { display: inline-block; vertical-align: -4px; margin: 0 2px; } .code { padding: 15px; border-radius: var(--r-s); background: var(--accent-weak); color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 21px; font-weight: 700; letter-spacing: .12em; text-align: center; user-select: all; -webkit-user-select: all; } .avatar-big { width: 66px; height: 66px; border-radius: 22px; font-size: 26px; } .baby-card { display: flex; align-items: center; gap: 14px; } .baby-card strong { display: block; font-family: var(--display); font-size: 18px; font-weight: 600; } /* ── Поля ────────────────────────────────────────────────── */ .field { display: block; margin-bottom: 14px; } .field > span { display: block; margin-bottom: 6px; color: var(--ink-2); font-size: 13px; } .field input[type="text"], .field input[type="date"], .field input[type="time"], .field input[type="number"], .field textarea { width: 100%; max-width: 100%; min-height: var(--tap); padding: 13px 14px; border: 0; border-radius: var(--r-s); background: var(--surface-2); color: var(--ink); /* Ровно 16px и ни пикселем меньше: у поля с мелким шрифтом айфон увеличивает страницу при касании. */ font-size: 16px; line-height: 1.35; resize: vertical; } .field input[type="date"], .field input[type="time"] { -webkit-appearance: none; appearance: none; min-width: 0; text-align: left; } .field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .choice { display: flex; gap: 8px; } .choice label { position: relative; flex: 1; } .choice input { position: absolute; width: 1px; height: 1px; opacity: 0; } .choice span { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: var(--r-s); background: var(--surface-2); font-size: 15px; font-weight: 500; cursor: pointer; } .choice input:checked + span { background: var(--accent); color: var(--accent-ink); } .choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; } .hint { margin: -4px 0 14px; color: var(--ink-2); font-size: 13px; } .timerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .time-input { width: 120px; min-height: var(--tap); padding: 0 12px; border: 0; border-radius: var(--r-s); background: var(--surface-2); color: var(--ink); font-family: var(--display); font-size: 21px; font-weight: 600; text-align: center; -webkit-appearance: none; appearance: none; } .chips.tight { margin-top: 0; gap: 6px; } .chips.tight .chip { min-height: 40px; padding: 0 12px; font-size: 13px; box-shadow: none; background: var(--surface-2); } .chips.tight .chip.chosen { background: var(--accent); } .field.is-empty .time-input { color: var(--ink-3); } /* ── Карточка записи ─────────────────────────────────────── */ .sheet-backdrop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; background: rgba(12, 10, 16, .48); } .sheet { display: flex; flex-direction: column; width: 100%; max-width: 640px; max-height: 92vh; border-radius: 28px 28px 0 0; background: var(--surface); overflow: hidden; } /* Ручка сверху: подсказывает, что карточка выехала снизу и уезжает обратно тапом мимо. */ .sheet::before { content: ""; display: block; width: 40px; height: 5px; margin: 10px auto 0; border-radius: 99px; background: var(--hairline); } .sheet-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px 12px 16px; } .sheet-head .icon { width: 22px; height: 22px; color: var(--c); } .sheet-head h2 { flex: 1; margin: 0; font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; } .text-btn { padding: 9px 6px; border: 0; background: none; color: var(--ink-2); font-size: 16px; cursor: pointer; } .save-btn { padding: 10px 18px; border: 0; border-radius: 14px; background: var(--accent); color: var(--accent-ink); font-size: 16px; font-weight: 600; cursor: pointer; } .sheet-body { padding: 4px 16px calc(22px + env(safe-area-inset-bottom)); overflow-y: auto; } body.sheet-open { overflow: hidden; } .timer { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 14px; border-radius: var(--r-s); background: var(--surface-2); } .timer-readout { flex: 1; font-family: var(--display); font-size: 24px; font-weight: 600; color: var(--ink-2); } .timer.running .timer-readout { color: var(--accent); } .timer-button { width: auto; min-height: 42px; padding: 0 16px; border-radius: 12px; box-shadow: none; } /* ── Таймер кормления ────────────────────────────────────── */ /* Две стороны рядом, крупные цифры, кнопка величиной с ладонь: нажимать приходится в темноте, одной рукой и не глядя. */ .nurse-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .nurse-side { display: flex; flex-direction: column; align-items: center; padding: 14px 10px 12px; border: 0; border-radius: var(--r-m); background: var(--surface-2); color: var(--ink); cursor: pointer; } .nurse-name { font-size: 13px; color: var(--ink-2); } .nurse-clock { margin-top: 2px; font-family: var(--display); font-size: 30px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink-3); } .nurse-act { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--ink-2); font-size: 13px; font-weight: 500; } .nurse-act .icon { width: 15px; height: 15px; } /* Сторона, с которой обычно начинают в этот раз: тонкое кольцо и строчка под кнопками. Подсказываем, но не выбираем за человека. */ .nurse-side.suggested { box-shadow: inset 0 0 0 1.5px var(--hairline); } /* Уже кормили с этой стороны, сейчас пауза. */ .nurse-side.filled .nurse-clock { color: var(--ink); } /* Сторона идёт прямо сейчас. */ .nurse-side.running { background: var(--cw); box-shadow: inset 0 0 0 2px var(--c); } .nurse-side.running .nurse-name, .nurse-side.running .nurse-clock, .nurse-side.running .nurse-act { color: var(--c); } .nurse-side.running .nurse-clock::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--c); vertical-align: middle; } @media (prefers-reduced-motion: no-preference) { .nurse-side.running .nurse-clock::before { animation: nurse-pulse 1.8s ease-in-out infinite; } } @keyframes nurse-pulse { 50% { opacity: .2; } } .nurse-hint { margin: 10px 0 0; color: var(--ink-2); font-size: 13px; } .nurse-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 18px; } .nurse-total { min-width: 0; color: var(--ink-2); font-size: 13px; } .nurse-stop { flex: none; min-height: 38px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; } /* Тревожный цвет берём фоном, а буквы — цветом фона приложения: в тёмной теме красный светлый, и белый текст на нём не читается. */ .nurse-stop.armed { background: var(--danger); color: var(--ground); } /* ── Полоска снизу ───────────────────────────────────────── */ .toast { position: fixed; left: 16px; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 480px; margin: 0 auto; padding: 13px 16px; border-radius: 16px; background: var(--ink); color: var(--ground); box-shadow: var(--float); font-size: 14px; } .toast button { border: 0; background: none; color: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; cursor: pointer; } /* ── Общее ───────────────────────────────────────────────── */ .only-installed { display: none; } html.installed .only-installed { display: revert; } html.installed .only-browser { display: none; } [hidden] { display: none !important; } .btn:focus-visible, .card-act:focus-visible, .chip:focus-visible, .tabbtn:focus-visible, .ev:focus-visible, .iconbtn:focus-visible, .text-btn:focus-visible, .save-btn:focus-visible, .nurse-side:focus-visible, .nurse-stop:focus-visible, .switch:focus-within, .toast button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── Печатная сводка ─────────────────────────────────────── */ #print-area { display: none; } @media print { body { background: #fff; color: #000; } .bar, .hero, .page, .tabbar, .toast, .sheet-backdrop { display: none !important; } #print-area { display: block; font: 12pt/1.45 Georgia, "Times New Roman", serif; } #print-area h1 { margin: 0 0 6pt; font-size: 17pt; } #print-area p { margin: 0 0 3pt; } #print-area table { width: 100%; margin-top: 12pt; border-collapse: collapse; } #print-area th, #print-area td { padding: 4pt 6pt; border: 1px solid #888; font-size: 11pt; text-align: left; } #print-area th { background: #eee; } .print-note { margin-top: 12pt; font-size: 9pt; color: #444; } } /* Строки в группе: главное действие — цветом текста, а не заливкой; справа шеврон, чтобы строка читалась как нажимаемая. */ .group .btn { background: var(--surface); color: var(--accent); font-size: 15px; } .group .btn .icon { color: currentColor; } .group .btn-quiet { color: var(--ink); } .group .btn-quiet .icon { color: var(--ink-2); } .group .btn::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(-45deg); } .group .btn-danger { justify-content: center; } .group .btn-danger::after { display: none; } .group .btn[disabled] { color: var(--ink-3); } /* На «Неделе» и в «Настройках» большой снимок ни к чему: там шапка сжимается до строки, а фото остаётся маленьким кружком. */ .hero.compact { min-height: 0; align-items: center; padding-bottom: 10px; background-image: none; background-color: var(--ground); color: var(--ink); } .hero.compact::after { display: none; } .hero.compact .avatar { display: grid; } .hero.compact .hero-text strong { font-size: 20px; font-weight: 600; text-shadow: none; } .hero.compact .hero-text span { color: var(--ink-2); font-size: 13px; opacity: 1; text-shadow: none; }