/* ============================================================ style.css — базовые стили + login + общие компоненты. На каждой странице — собственная секция, разделена /* === */ ============================================================ */ /* ---------- Reset + переменные ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } :root { --blue: #1A6FD4; --blue-light: #E8F1FB; --blue-mid: #4A90E2; --yellow: #F5C518; --yellow-dark: #C49A0A; --black: #111; --dark: #1C1C1E; --dark2: #2C2C2E; --dark3: #3A3A3C; --gray: #8E8E93; --gray2: #AEAEB2; --gray3: #C7C7CC; --gray4: #D1D1D6; --gray5: #E5E5EA; --gray6: #F2F2F7; --white: #fff; --bg: #F2F2F7; --green: #34C759; --red: #FF3B30; --orange: #FF9500; --purple: #AF52DE; --card-bg: #fff; --card-border: rgba(0, 0, 0, 0.08); --text: #111; --text2: #3C3C43; --text3: #8E8E93; --radius: 12px; --radius-sm: 8px; --radius-pill: 20px; --shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); /* Алиас для основного акцентного цвета. В проекте исторически используется --blue, но многие места (включая мои новые компоненты — merge button, print button, баннер заказа, форма комментария фото) используют --accent. Один алиас разом чинит их все. */ --accent: var(--blue); } html, body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; font-size: 15px; line-height: 1.4; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; min-height: 100vh; } html { background: var(--bg); overflow-x: hidden; /* страховка от горизонтального скролла на странице */ } html.login-screen, html.login-screen body { background: var(--dark); max-width: 100vw; overflow-x: hidden; } body { display: flex; flex-direction: column; min-height: 100vh; } /* Полное обнуление боковых отступов на основных контейнерах - с !important чтобы перебить любые возможные правила. Контент занимает всю ширину экрана впритык к краю. ИСКЛЮЧЕНИЕ: .section-header убран из этого списка - у него отдельное правило ниже с небольшим отступом слева (чтобы заголовки секций "СЕЙЧАС В ЦЕНТРЕ" / "ВЫШЕДШИЕ" / "СТАТИСТИКА ПО ДНЯМ" не лепились впритык к краю). */ html, body, #app-content { padding-left: 1px !important; padding-right: 1px !important; margin-left: 0 !important; margin-right: 0 !important; } .timers-list, .location-list, .location-header, .stats-row, .room-log-wrap, .player-section, .reg-section, .nav-bar { padding-left: 1px !important; padding-right: 1px !important; margin-left: 0 !important; margin-right: 0 !important; } /* Заголовки секций имеют небольшой отступ слева (4px) - чтобы текст не примыкал ровно к краю экрана. Карточки таймеров - на 0, заголовок - на 4px вглубь. !important чтобы не перетёрлось ничем сверху. */ .section-header { padding-left: 4px !important; } input, button, select, textarea { font: inherit; color: inherit; outline: none; } a { color: var(--blue); text-decoration: none; } /* SVG-иконки управляются через color/font-size в родителе */ .icon { width: 1em; height: 1em; vertical-align: -0.15em; flex-shrink: 0; } button .icon, a .icon { pointer-events: none; } /* ========================================================================= * !!! ВНИМАНИЕ — НЕ ТРОГАТЬ position: fixed у .page-head и .bottom-bar !!! * ========================================================================= * * Шапка (.page-head) и нижняя панель (.bottom-bar) ОБЯЗАТЕЛЬНО fixed, * а НЕ sticky/relative/absolute. * * На iOS Safari + Android Chrome `position: sticky` ломается когда у * / установлен overflow-x: hidden (а у нас он есть для защиты * от горизонтального скролла). Шапка/подвал начинают ДЁРГАТЬСЯ при скролле * — едут вверх/вниз вместе с контентом. * * Если когда-то нужно будет менять position здесь — обязательно * ПРОВЕРЯТЬ НА РЕАЛЬНОМ МОБИЛЬНИКЕ iOS. На десктопе всё выглядит ок, * но на телефонах ломается. * * transform: translateZ(0) — принудительный compositor layer, * устраняет дрейф при показе/скрытии iOS address bar. Тоже НЕ убирать. * ========================================================================= */ /* ---------- Lock-friendly шапка (nav-bar) ---------- */ /* Шапка страницы: первая строка — кнопки (◀ Назад слева, опц. справа), вторая строка — заголовок по центру. Жёстко приклеена к верху. */ .page-head { background: var(--bg); position: fixed; /* !!! НЕ МЕНЯТЬ — см. блок ВНИМАНИЕ выше !!! */ inset: 0 0 auto 0; /* top:0; right:0; bottom:auto; left:0 - явная фиксация ко всем 4 краям */ top: 0; left: 0; right: 0; /* дубль для совместимости со старыми браузерами без inset */ z-index: 50; /* как было — ниже modal-backdrop (100) чтобы модалы перекрывали шапку */ padding-top: env(safe-area-inset-top, 0); padding-left: 0; padding-right: 0; padding-bottom: 0; /* Принудительный composite layer — устраняет дрейф при показе/скрытии iOS address bar */ transform: translateZ(0); -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; /* isolation: isolate создаёт новый stacking context у самой шапки, не затрагивая родителей. Это страховка чтобы случайный transform/filter у соседних элементов не вытолкнул шапку из её слоя. */ isolation: isolate; } .head-spacer { height: calc(var(--head-h, 80px) + env(safe-area-inset-top, 0px)); flex-shrink: 0; } /* Spacer — занимает место под fixed page-head, чтобы контент не оказался под шапкой. PHP layout_start вставляет
сразу после . */ /* (head-spacer определён выше — учитывает safe-area-inset-top) */ .nav-bar { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 0; background: transparent; } /* Заголовок страницы — крупно, по центру, в одну строку с многоточием */ .nav-title { display: block; text-align: center; font-size: 24px; font-weight: 700; color: var(--text); padding: 0 6px 6px; margin-top: 0; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.login-screen .nav-title { color: #fff; } .nav-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; color: var(--blue); font-size: 17px; padding: 6px; min-width: 44px; text-decoration: none; } .nav-btn .icon { font-size: 22px; } .nav-btn.right { justify-content: flex-end; } /* ---------- Кнопки ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--blue); color: #fff; border: 0; border-radius: var(--radius); padding: 14px 18px; font-size: 16px; font-weight: 600; cursor: pointer; transition: opacity 0.15s, transform 0.05s; } .btn:active { transform: scale(0.98); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-block { display: flex; width: 100%; } .btn-secondary { background: var(--gray5); color: var(--text); } .btn-ghost { background: transparent; color: var(--blue); } .btn-danger { background: var(--red); color: #fff; } .btn-success { background: var(--green); color: #fff; } /* ---------- Текстовые поля ---------- */ .field { display: block; width: 100%; background: var(--white); border: 1px solid var(--gray5); border-radius: var(--radius-sm); padding: 14px 14px; font-size: 16px; color: var(--text); } .field:focus { border-color: var(--blue); } .field::placeholder { color: var(--gray2); } .label { display: block; font-size: 13px; color: var(--text3); margin: 0 0 4px 4px; } /* ---------- Лоадер (Promise-обёртка над AJAX) ---------- */ .loader-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.18); display: none; align-items: center; justify-content: center; z-index: 1000; } .loader-backdrop.show { display: flex; } .loader-spinner { width: 44px; height: 44px; border: 4px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- Toast (короткие уведомления) ---------- */ .toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--dark); color: #fff; padding: 12px 18px; border-radius: var(--radius); font-size: 14px; z-index: 1001; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; width: 80vw; max-width: 80vw; box-sizing: border-box; text-align: center; white-space: pre-line; } /* На страницах с fixed bottom-bar — поднимаем toast выше неё */ body[data-has-bar="1"] .toast { bottom: calc(var(--bar-h, 60px) + 12px); } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .toast.err { background: var(--red); } .toast.ok { background: var(--green); } /* ============================================================ ЭКРАН ВХОДА / РЕГИСТРАЦИИ (login.php) ============================================================ */ body.login-screen { background: var(--dark); color: #fff; justify-content: stretch; } body.login-screen .nav-bar { background: transparent; padding-left: 0; } body.login-screen .nav-btn { color: var(--blue-mid); padding-left: 4px; } /* Экран-обёртка занимает весь viewport */ .login-screen .page { flex: 1; display: flex; flex-direction: column; min-height: 100vh; width: 100%; max-width: 100vw; box-sizing: border-box; background: var(--dark); overflow-x: hidden; } .login-screen .page.hidden { display: none; } html.login-screen .page-head { background: transparent; } html.login-screen .nav-bar { background: transparent; } /* Все формы внутри login-screen — ровно по ширине родителя, никаких выпираний. У /