/* Единый стиль шапки — как на history.php */ /* Предполагается, что шрифты подключаются в страницы (Montserrat/Poppins/Roboto) */ /* Глобальный reset для предотвращения «дыр» сверху из-за margin у */ html, body { margin: 0; padding: 0; } /* Стили body для предотвращения обрезания контента */ body { font-family: 'Montserrat', sans-serif; line-height: 1.6; background-color: #f9fafb; color: #333; /* Отступ сверху под фиксированную шапку */ padding-top: calc(60px + constant(safe-area-inset-top)); padding-top: calc(60px + env(safe-area-inset-top)); /* Отступ снизу убран */ padding-bottom: 0; padding-bottom: 0; /* Обеспечиваем минимальную высоту для корректной прокрутки */ min-height: 100vh; overflow-x: hidden; /* Для прижатия футера к низу */ display: flex; flex-direction: column; } /* Шапка */ header { position: fixed; top: 0; left: 0; right: 0; background-color: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); z-index: 9999; /* Шапка учитывает safe-area сверху и содержит 60px контента */ height: auto; min-height: calc(60px + constant(safe-area-inset-top)); min-height: calc(60px + env(safe-area-inset-top)); padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); } /* Внутренний контейнер */ /* Усиливаем правило, чтобы ничто локально не перебивало внутренние отступы в шапке */ header .header-container { display: flex; justify-content: space-between; align-items: center; height: 60px; /* реальная высота контента шапки */ max-width: 600px; margin: 0 auto; box-sizing: border-box; /* Базовые внутренние отступы */ padding: 0 15px !important; /* Фиксированный боковой отступ для полного совпадения по всем страницам */ padding-left: 15px !important; padding-right: 15px !important; transition: margin-top 0.2s ease; } /* Логотип */ .logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 20px; /* как в истории */ } /* Больше специфичности, чтобы перебить локальные стили на страницах */ header .logo img { width: 42px !important; height: 42px !important; max-height: 44px !important; object-fit: contain; flex: 0 0 42px; } .logo-text { font-size: 18px; font-weight: 700; letter-spacing: 0.2px; font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; } /* Правая часть действий (необязательна) */ .header-actions { display: flex; align-items: center; gap: 6px; } /* Унифицированная иконка-кнопка в шапке (например, стрелка «назад») */ .header-actions .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; background: transparent; color: #111827; border-radius: 6px; text-decoration: none !important; } .header-actions .icon-btn, .header-actions .icon-btn:visited, .header-actions .icon-btn:hover, .header-actions .icon-btn:active, .header-actions .icon-btn:focus { color: #111827 !important; text-decoration: none !important; } .header-actions .icon-btn i { font-size: 16px; line-height: 1; } .header-actions .icon-btn:hover { background: rgba(0,0,0,0.06); } .header-actions .icon-btn:focus { outline: 2px solid #111; outline-offset: 2px; } /* Утилита: отступ контента под фиксированную шапку Считаем: высота контента шапки (60px) + верхняя safe-area, если есть */ .content-with-header { padding-top: 0; } /* Убираем случайные внешние отступы у первого блока после шапки, чтобы не появлялась «дыра» при margin-top у секции */ .content-with-header > :first-child { margin-top: 0 !important; } .container.content-with-header > :first-child { margin-top: 0 !important; } /* Снять стандартный отступ (60px), но оставить safe-area, чтобы не было «дырок» сверху в iOS */ .header-offset-0 .content-with-header, .content-no-header-offset { padding-top: 0 !important; } /* Универсальный спейсер под шапкой (вставляется сразу после ) */ .header-spacer { display: block; height: calc(60px + constant(safe-area-inset-top)); height: calc(60px + env(safe-area-inset-top)); } /* Если на странице есть .header-spacer, отключаем доп. паддинг у контента, чтобы не было двойного отступа. :has() поддерживается Safari 15.4+ */ body:has(.header-spacer) .content-with-header { padding-top: 0 !important; } /* Fallback: если скрипт добавил класс на , также убираем паддинг */ .has-header .content-with-header { padding-top: 0 !important; } /* Кнопки в шапке */ .btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; padding: 10px 14px; border-radius: 8px; border: none; background: #111827; color: #fff; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .btn:hover { background: #000; color: #fff; } .btn:focus { outline: 2px solid #111; outline-offset: 2px; } .btn i { font-size: 14px; } /* Сделать кнопки в шапке значительно компактнее */ .header-actions .btn { font-size: 11px; padding: 2px 6px; gap: 4px; border-radius: 6px; line-height: 1.2; } .header-actions .btn i { font-size: 11px; } .btn.btn-outline { background: #fff; color: #111827; border: 1px solid #c2c2c2; } .btn.btn-outline:hover { background: #f3f4f6; } .btn.btn-outline:focus { outline: 2px solid #111; outline-offset: 2px; } /* Унифицированный футер — компактный размер */ footer { background-color: #1a202c; color: #ffffff; padding: 15px 0; text-align: center; margin-top: auto; } .footer-bottom { padding: 5px 0; } /* Дополнительные стили для предотвращения обрезания контента */ .container { max-width: 600px; margin: 0 auto; padding: 0 15px; } /* Навигационные кнопки */ .nav-buttons { display: flex; gap: 10px; margin: 20px 0 15px 0; flex-wrap: wrap; justify-content: center; } /* Отступы для последних элементов */ .media-feed:last-child, section:last-child { margin-bottom: 20px; } /* Адаптивные отступы для мобильных устройств */ @media (max-width: 768px) { body { padding-bottom: 0; } .media-feed:last-child, section:last-child { margin-bottom: 30px; } /* Компактный футер на мобильных */ footer { padding: 0; font-size: 10px; } .footer-bottom { padding: 10px 0; } } /* Для очень маленьких экранов */ @media (max-width: 480px) { body { padding-bottom: 0; } .media-feed:last-child, section:last-child { margin-bottom: 25px; } /* Ещё более компактный футер */ footer { padding: 0; font-size: 10px; } .footer-bottom { padding: 10px 0; } } /* Унификация кнопок панели на малых экранах: одинаковая ширина, независимо от текста */ @media (max-width: 768px) { .actions-row { display: flex !important; gap: 10px !important; width: 100% !important; max-width: 600px; margin: 0 auto !important; } .actions-row .action-btn, .actions-row .btn { flex: 1 1 0 !important; /* равные доли ширины */ width: auto !important; min-width: 0 !important; justify-content: center !important; white-space: nowrap; box-sizing: border-box; } } /* Hide week progress on profile page */ .week-progress-container { display: none !important; }