/* * theme.css — темы и базовые токены дневника Марса. * * Две независимые оси: * 1. Светлая/тёмная — определяется prefers-color-scheme, перебивается * атрибутом data-theme="light"|"dark" на (ручной выбор сильнее * системного — блоки [data-theme] идут ниже по файлу и потому * выигрывают каскад при равной специфичности с :root). * 2. Мобильная/десктопная — только по ширине окна (<=768px — мобильная), * вручную не переключается. * * Из этих осей получаются ровно четыре темы. Каждый блок ниже задаёт * полный набор переменных на случай — так проще проверить глазами, что * ни одно значение не «утекло» из соседней темы по каскаду. */ :root { /* ---- Типографика ---- */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --fs-xs: 0.6875rem; /* 11px — подписи, вспомогательный текст */ --fs-sm: 0.8125rem; /* 13px — детали события, подписи полей */ --fs-base: 0.9375rem; /* 15px — тело */ --fs-md: 1rem; /* 16px — поля ввода: меньше вызывает автозум на iOS */ --fs-lg: 1.125rem; /* 18px — заголовки карточек */ --fs-xl: 1.375rem; /* 22px — заголовки экрана */ --lh-tight: 1.25; --lh-base: 1.5; --fw-normal: 400; --fw-semibold: 600; /* ---- Отступы (шаг 4px) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; /* ---- Скругления ---- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px; --border-width: 1px; /* ---- Переходы ---- */ --transition-fast: 120ms ease; --transition-base: 200ms ease; /* ---- Тап-таргеты ---- */ --tap-min: 44px; /* ---- Безопасные зоны (вырез, нижняя панель жестов) ---- */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); /* ---- Цвета: запасной вариант (мобильная светлая) на случай, если ни один media-запрос не совпал ---- */ --color-bg: #FAFAFA; --color-surface: #FFFFFF; --color-accent: #0184BC; --color-on-accent: #FFFFFF; --color-text: #383A42; --color-muted: #6B6D75; --color-border: #E5E5E6; --color-danger: #C6382C; color-scheme: light; } /* ================== Цвета типов событий ================== Не зависят от ширины окна — только от светлой/тёмной ветки. Светлые варианты сознательно темнее канона Atom One Light: #50A14F на светлой подложке даёт около 3:1, для мелкого текста мало. */ :root { --c-feeding: #98C379; /* кормление */ --c-stool: #D19A66; /* стул */ --c-vomit: #E06C75; /* рвота */ --c-nausea: #E5C07B; /* тошнота */ --c-med: #61AFEF; /* лекарства */ --c-day-event: #C678DD; /* событие дня */ --c-weight: #56B6C2; /* вес */ --c-treat: #98C379; /* лакомство */ --c-note: #7E8794; /* заметка */ } @media (prefers-color-scheme: light) { :root { --c-feeding: #3F7F3E; --c-stool: #8A5D01; --c-vomit: #C6382C; --c-nausea: #8A6D01; --c-med: #4078F2; --c-day-event: #A626A4; --c-weight: #0184BC; --c-treat: #3F7F3E; --c-note: #6B6D75; } } /* ================== Базовые токены — системная тема ================== */ /* Мобильная тёмная: AMOLED-гибрид Atom One Dark. Чистый чёрный выключает пиксели на OLED — экономия батареи и настоящий чёрный в темноте. Акцент #3DD6E3 вместо канонического #00FFFF: чистый циан даёт максимум яркости сразу по двум субпикселям, отсюда свечение по краям букв и усталость при чтении мелкого текста вечером. */ @media (max-width: 768px) and (prefers-color-scheme: dark) { :root { --color-bg: #000000; --color-surface: #0D1015; --color-accent: #3DD6E3; --color-on-accent: #000000; --color-text: #D7DAE0; --color-muted: #7E8794; --color-border: #1B1F26; --color-danger: #E06C75; color-scheme: dark; } } /* Десктопная светлая: тот же Atom One Light, поверхность и границы чуть темнее мобильной — на большом экране разница фона и карточки виднее. */ @media (min-width: 769px) { :root { --color-bg: #FAFAFA; --color-surface: #F2F2F2; --color-accent: #0184BC; --color-on-accent: #FFFFFF; --color-text: #383A42; --color-muted: #6B6D75; --color-border: #DBDBDC; --color-danger: #C6382C; color-scheme: light; } } /* Десктопная тёмная: канонический Atom One Dark без правок. */ @media (min-width: 769px) and (prefers-color-scheme: dark) { :root { --color-bg: #282C34; --color-surface: #21252B; --color-accent: #56B6C2; --color-on-accent: #21252B; --color-text: #ABB2BF; --color-muted: #9198A6; --color-border: #3E4451; --color-danger: #E06C75; color-scheme: dark; } } /* ================== Ручной выбор темы ================== Атрибут data-theme на перебивает системную настройку. Блоки ниже полные (не только «диф» от системных), поэтому порядок в файле, а не хитрая специфичность селекторов, решает, кто победит — и они идут последними. */ [data-theme="light"] { --color-bg: #FAFAFA; --color-surface: #FFFFFF; --color-accent: #0184BC; --color-on-accent: #FFFFFF; --color-text: #383A42; --color-muted: #6B6D75; --color-border: #E5E5E6; --color-danger: #C6382C; --c-feeding: #3F7F3E; --c-stool: #8A5D01; --c-vomit: #C6382C; --c-nausea: #8A6D01; --c-med: #4078F2; --c-day-event: #A626A4; --c-weight: #0184BC; --c-treat: #3F7F3E; --c-note: #6B6D75; color-scheme: light; } [data-theme="dark"] { --color-bg: #000000; --color-surface: #0D1015; --color-accent: #3DD6E3; --color-on-accent: #000000; --color-text: #D7DAE0; --color-muted: #7E8794; --color-border: #1B1F26; --color-danger: #E06C75; --c-feeding: #98C379; --c-stool: #D19A66; --c-vomit: #E06C75; --c-nausea: #E5C07B; --c-med: #61AFEF; --c-day-event: #C678DD; --c-weight: #56B6C2; --c-treat: #98C379; --c-note: #7E8794; color-scheme: dark; } @media (min-width: 769px) { [data-theme="light"] { --color-surface: #F2F2F2; --color-border: #DBDBDC; } [data-theme="dark"] { --color-bg: #282C34; --color-surface: #21252B; --color-accent: #56B6C2; --color-on-accent: #21252B; --color-text: #ABB2BF; --color-muted: #9198A6; --color-border: #3E4451; } } /* ================== Сброс и оболочка ================== */ *, *::before, *::after { box-sizing: border-box; } html { height: 100%; -webkit-text-size-adjust: 100%; } body { min-height: 100dvh; margin: 0; padding-left: var(--safe-left); padding-right: var(--safe-right); background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); -webkit-tap-highlight-color: transparent; transition: background var(--transition-base), color var(--transition-base); } h1, h2, h3, p { margin: 0 0 var(--space-3); } button, input, textarea, select { font: inherit; color: inherit; } a { color: var(--color-accent); } ::selection { background: var(--color-accent); color: var(--color-on-accent); } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } #app { max-width: 720px; margin: 0 auto; padding: var(--space-4); } /* ================== Компоненты ================== */ /* --- Чип --- */ .chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap-min); padding: var(--space-2) var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-pill); background: transparent; color: var(--color-text); font-size: var(--fs-sm); line-height: var(--lh-tight); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .chip--muted { border-style: dashed; color: var(--color-muted); } .chip--selected { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent); } /* --- Тумблер --- */ .toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; min-height: var(--tap-min); cursor: pointer; } .toggle__text { display: flex; flex-direction: column; gap: 2px; } .toggle__label { font-size: var(--fs-base); } .toggle__sub { font-size: var(--fs-xs); color: var(--color-muted); } .toggle__input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .toggle__switch { flex-shrink: 0; width: 44px; height: 26px; border-radius: var(--radius-pill); background: var(--color-border); position: relative; transition: background var(--transition-fast); } .toggle__switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-muted); transition: left var(--transition-fast), background var(--transition-fast); } .toggle__input:checked + .toggle__switch { background: color-mix(in srgb, var(--color-accent) 28%, var(--color-surface)); } .toggle__input:checked + .toggle__switch::after { left: 21px; background: var(--color-accent); } .toggle__input:focus-visible + .toggle__switch { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* --- Ряд Бристоля --- */ .bristol__row { display: flex; gap: var(--space-2); } .bristol__btn { flex: 1; min-height: var(--tap-min); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font-size: var(--fs-lg); font-weight: var(--fw-semibold); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .bristol__btn--selected { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent); } .bristol__caption { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--color-muted); text-align: center; min-height: 1.2em; } /* --- Поле --- */ .field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); } .field__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); } .field input, .field textarea, .field select { width: 100%; min-height: var(--tap-min); padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font-size: var(--fs-md); } .field input::placeholder, .field textarea::placeholder { color: var(--color-muted); } /* --- Кнопка --- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-min); padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); border: var(--border-width) solid transparent; font-size: var(--fs-md); font-weight: var(--fw-semibold); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast); } .btn--primary { background: var(--color-accent); color: var(--color-on-accent); } .btn--ghost { background: transparent; border-color: var(--color-border); color: var(--color-text); } .btn:active { opacity: 0.8; } /* --- Вспышка «сохранено» --- */ .flash-container { position: fixed; left: 0; right: 0; bottom: calc(var(--space-5) + var(--safe-bottom)); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); pointer-events: none; z-index: 1000; } .flash { padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text); border: var(--border-width) solid var(--color-border); font-size: var(--fs-sm); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); opacity: 0; transform: translateY(6px); transition: opacity var(--transition-base), transform var(--transition-base); } .flash--visible { opacity: 1; transform: translateY(0); } /* --- Карточка события --- */ .event-card { --event-color: var(--color-muted); position: relative; display: flex; gap: var(--space-3); padding: var(--space-3); margin-bottom: var(--space-2); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); } .event-card__time { flex-shrink: 0; width: 42px; padding-top: 2px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); color: var(--color-muted); text-align: right; } .event-card__dot { flex-shrink: 0; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--event-color); box-shadow: 0 0 0 3px var(--color-bg); } .event-card__body { flex: 1; min-width: 0; } .event-card__title { margin: 0 0 2px; font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--color-text); } .event-card__subtitle { margin: 0; font-size: var(--fs-sm); color: var(--color-muted); line-height: var(--lh-base); } .event-card__derived { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px dashed var(--color-border); font-size: var(--fs-xs); color: var(--color-muted); } /* На мобильной ширине заголовок подкрашивается цветом типа события — на маленьком экране цветовая подсказка у каждой строки уместна. */ @media (max-width: 768px) { .event-card__title { color: var(--event-color); } }