/* * Левая рейка вместо старой шапки - страницы аккаунта (дальше, возможно, блог). * Разметка: public/header-rail.php. * * Геометрия и цвета сняты с рейки самой игры (ui/features/Sidebar в репозитории * игры): 176 ширина, 72 логотип, 56 на пункт, иконка 40x40 на отступе 16, * подпись с 64. Числа продублированы здесь руками - у сайта нет токенов игры, и * тащить их целиком ради одной рейки смысла нет; если в игре поменяют ширину, * это место придётся поправить вслед. * * Цвета: background/right_panel игры (#144525) и золотая рамка кнопки * (#ffeaa8 -> #fec372) - та же пара, что в аккаунт-менеджере зовётся * --pa--gradient-gold, так что страница и рейка не спорят. * * На узком экране рейка ложится в полосу сверху: в игре на телефоне рейки нет * вовсе, а на странице аккаунта что-то в шапке быть должно - логотип и вход * никуда не денутся. */ :root { --game-rail-width: 176px; --game-rail-bar-height: 56px; --game-rail-shadow: 0 0 2px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.7); } /* * Отступ под рейку. Два пути к одному и тому же, и это не перестраховка ради * перестраховки: класс на ставит скрипт самой рейки (страниц с этой * шапкой 388, у каждой свой ), а :has смотрит на разметку и работает * без скриптов вообще - то есть содержимое не уедет под рейку, даже если js * не выполнился или отключён. Правило одно на оба селектора. */ body:has(> .game-rail), .game-rail-page { padding-left: var(--game-rail-width); } .main-header.game-rail { position: fixed; z-index: 1000; top: 0; bottom: 0; left: 0; display: flex; width: var(--game-rail-width); max-width: none; flex-direction: column; padding: 0; background: #144525; box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.35); color: #fff; } /* 72 на блок, картинка 147x46 с отступом 13/11 - как в моке рейки. */ .game-rail-logo { display: flex; height: 72px; flex: 0 0 auto; align-items: flex-start; padding: 13px 0 0 11px; line-height: 0; } .game-rail-logo img { display: block; width: 147px; height: 46px; } /* Тот же двухпиксельный скос, что в рейке игры: тёмная линия поверх белой в 10%. */ .game-rail-divider { height: 2px; flex: 0 0 auto; background: linear-gradient( to bottom, rgba(31, 31, 31, 0.3) 0, rgba(31, 31, 31, 0.3) 1px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.1) 2px ); } .game-rail-spacer { flex: 1 1 auto; min-height: 8px; } .game-rail-items { display: flex; flex: 0 0 auto; flex-direction: column; min-height: 0; } .game-rail-item { display: flex; height: 56px; flex: 0 0 auto; align-items: center; padding-left: 16px; color: #fff; gap: 8px; text-decoration: none; } .game-rail-item:hover, .game-rail-item:focus-visible { background: rgba(31, 31, 31, 0.3); color: #fff; } .game-rail-item:active { background: rgba(31, 31, 31, 0.5); } /* Где мы сейчас. Тем же затемнением, что и наведение, но плотнее - как в рейке игры: выбранный пункт и пункт под курсором отличаются глубиной, а не цветом. Правило идёт после :hover, поэтому наведение на выбранный пункт его подсветку не сбрасывает. */ .game-rail-item--active, .game-rail-item--active:hover { background: rgba(31, 31, 31, 0.5); } .game-rail-item-icon, .game-rail-item-icon img { display: block; width: 40px; height: 40px; flex: 0 0 auto; object-fit: contain; } /* Подпись в одну строку с усечением: тридцать локалей, и «Play» в некоторых длиннее, чем кажется. */ .game-rail-item-label { overflow: hidden; font-size: 14px; font-weight: 500; text-overflow: ellipsis; text-shadow: var(--game-rail-shadow); white-space: nowrap; } .game-rail-bottom { flex: 0 0 auto; padding-bottom: 8px; } /* * Вход и профиль - разметка includes/profile-dropdown.php, общая с обычной * шапкой, поэтому дальше идут перебивки её вида. Селекторы с .game-rail * специфичнее правил из header-common.php, так что !important нужен только там, * где он есть в исходном правиле. */ /* Кнопка входа: 40 в высоту на отступе 16, без заливки, золотая рамка в 2px - как в рейке игры. Зелёная таблетка из header-common тут читалась бы кнопкой с другой страницы. */ .game-rail .sign-in-button { position: relative; height: 40px; margin: 8px 16px 0; padding: 0; border-radius: 8px; background: none; font-size: 16px; font-weight: 600; text-shadow: var(--game-rail-shadow); } /* Рамка с дыркой: градиент по всей коробке, замаскированный двумя своими же копиями (по content-box и по border-box) так, что остаётся только полоса padding'а. Через border-image нельзя - он не знает про border-radius. */ .game-rail .sign-in-button::before { position: absolute; padding: 2px; border-radius: inherit; background: linear-gradient(to bottom, #ffeaa8, #fec372); content: ''; inset: 0; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .game-rail .sign-in-button:hover { background: rgba(255, 255, 255, 0.12); } .game-rail .sign-in-button:active { background: rgba(0, 0, 0, 0.25); } /* Профиль - строка на всю ширину рейки, как остальные пункты. Селектор с id, а не с классом: в new-index.css лежит `#profile-dropdown { position: absolute; right: 0 }` - для старой шапки, где профиль висел в правом углу. В рейке он должен стоять в потоке, иначе блок под ним схлопывается в свой padding, а сама строка уезжает под низ экрана. */ .game-rail #profile-dropdown.profile-button { position: relative; right: auto; width: 100%; margin: 0; } .game-rail .profile-button > [data-bs-toggle='dropdown'] { display: flex; height: 56px; align-items: center; padding-left: 16px; gap: 8px; } .game-rail .profile-button img { display: block; width: 40px; height: 40px; flex: 0 0 auto; object-fit: contain; } .game-rail .profile-button:hover > [data-bs-toggle='dropdown'] { background: rgba(31, 31, 31, 0.3); } /* Ник рядом с аватаром. Он в разметке спрятан инлайновым style - здесь его надо перебить, отсюда !important; padding и ширина приходят из .profile-dropdown-menu-item в header-common.php, тоже с !important. */ .game-rail .profile-button-name { display: block !important; overflow: hidden; width: auto !important; padding: 0 !important; gap: 0; } .game-rail .profile-button-name span { display: block; overflow: hidden; color: #fff; font-size: 14px; font-weight: 500; text-overflow: ellipsis; text-shadow: var(--game-rail-shadow); white-space: nowrap; } /* Меню открывается вверх (класс dropup ставит скрипт в header-rail.php) и выезжает правее рейки - её ширины ему мало. */ .game-rail .profile-dropdown-menu { margin-bottom: 8px !important; } /* * Липкий баннер внизу статей растянут на всё окно (`left: 0; width: 100vw` в * new-index.css), поэтому его содержимое центрировалось по окну, а не по белой * колонке справа от рейки - и уезжало влево ровно на половину её ширины. * Прижимаем оба края вместо арифметики с vw: 100vw считает и полосу прокрутки. */ .game-rail-page .fixed-bottom-banner { left: var(--game-rail-width); width: auto; right: 0; } /* Полоса сверху вместо рейки. */ @media (max-width: 767.98px) { body:has(> .game-rail), .game-rail-page { padding-top: var(--game-rail-bar-height); padding-left: 0; } .main-header.game-rail { right: 0; bottom: auto; width: auto; height: var(--game-rail-bar-height); flex-direction: row; align-items: center; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35); } .game-rail-divider { display: none; } .game-rail-logo { height: auto; align-items: center; padding: 0 0 0 12px; } .game-rail-logo img { width: 115px; height: 36px; } /* Пять пунктов в полосу по ширине не влезают, поэтому середина едет горизонтально. Прятать их под бургер нельзя: из статей это единственные ссылки на игровые страницы, а ссылка за двумя нажатиями - почти не ссылка. Подписи остаются: иконки четырёх пасьянсов похожи между собой, и без слов их не различить. */ .game-rail-items { flex-direction: row; overflow-x: auto; min-width: 0; flex: 1 1 auto; scrollbar-width: none; } .game-rail-items::-webkit-scrollbar { display: none; } .game-rail-item { height: var(--game-rail-bar-height); flex: 0 0 auto; padding: 0 10px; gap: 6px; } .game-rail-item-icon, .game-rail-item-icon img { width: 28px; height: 28px; } .game-rail-item-label { font-size: 13px; } .game-rail-bottom { padding: 0 8px 0 0; } .game-rail .profile-button { width: auto; } .game-rail .profile-button > [data-bs-toggle='dropdown'] { height: var(--game-rail-bar-height); padding: 0 8px; } /* В полосе ник не помещается рядом с аватаром - остаётся только он сам, ник виден в самом меню. */ .game-rail .profile-button-name { display: none !important; } .game-rail .sign-in-button { height: 32px; margin: 0; padding: 0 14px; font-size: 14px; } /* Рейка ушла наверх - баннеру внизу снова принадлежит вся ширина. */ .game-rail-page .fixed-bottom-banner { left: 0; } }