5494
редагування
MediaWiki:Common.css: відмінності між версіями
нема опису редагування
Admin (обговорення | внесок) Немає опису редагування |
Admin (обговорення | внесок) Немає опису редагування |
||
| Рядок 1260: | Рядок 1260: | ||
flex: 1; | flex: 1; | ||
text-align: center; | text-align: center; | ||
} | |||
} | |||
/* ==================================================== */ | |||
/* МОБІЛЬНА ВЕРСІЯ - КРОК 1: ПОШУК ТА КОМПАКТНИЙ ХЕДЕР */ | |||
/* ==================================================== */ | |||
@media (max-width: 768px) { | |||
/* Менші відступи в хедері */ | |||
.header-container.header-chrome { | |||
padding: 6px 12px !important; | |||
} | |||
.minerva-header { | |||
padding: 4px 0 !important; | |||
gap: 8px !important; | |||
} | |||
/* Менше лого */ | |||
.minerva-header .branding-box a::before { | |||
width: 28px !important; | |||
height: 28px !important; | |||
} | |||
/* Менший текст */ | |||
.minerva-header .branding-box a span { | |||
font-size: 13px !important; | |||
} | |||
/* Ховаємо звичайний пошук */ | |||
.minerva-header .minerva-search-form { | |||
display: none !important; | |||
} | |||
/* Показуємо кнопку пошуку */ | |||
.minerva-header #searchIcon { | |||
display: flex !important; | |||
align-items: center !important; | |||
justify-content: center !important; | |||
width: 36px !important; | |||
height: 36px !important; | |||
background: rgba(255, 255, 255, 0.1) !important; | |||
border-radius: 8px !important; | |||
margin-left: auto !important; | |||
} | |||
.minerva-header #searchIcon .minerva-icon--search-base20 { | |||
filter: brightness(2) !important; | |||
} | |||
/* Мобільний пошук (спочатку прихований) */ | |||
.mobile-search-overlay { | |||
display: none; | |||
position: fixed; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
z-index: 1001; | |||
background: rgba(21, 21, 31, 0.98); | |||
padding: 12px; | |||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); | |||
} | |||
.mobile-search-overlay.active { | |||
display: flex; | |||
align-items: center; | |||
gap: 10px; | |||
} | |||
.mobile-search-overlay input { | |||
flex: 1; | |||
padding: 12px 16px; | |||
font-size: 16px; | |||
border: 1px solid rgba(255, 255, 255, 0.15); | |||
border-radius: 8px; | |||
background: #23232c; | |||
color: white; | |||
outline: none; | |||
} | |||
.mobile-search-overlay input:focus { | |||
border-color: #a19ce0; | |||
} | |||
.mobile-search-overlay input::placeholder { | |||
color: rgba(255, 255, 255, 0.4); | |||
} | |||
.mobile-search-close { | |||
width: 36px; | |||
height: 36px; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
font-size: 24px; | |||
color: #888; | |||
cursor: pointer; | |||
flex-shrink: 0; | |||
} | |||
.mobile-search-close:hover { | |||
color: white; | |||
} | |||
/* Менший padding-top для контенту */ | |||
.mw-body { | |||
padding-top: 52px !important; | |||
} | |||
} | |||
/* Ще менші екрани - ховаємо назву сайту */ | |||
@media (max-width: 400px) { | |||
.minerva-header .branding-box a span { | |||
display: none !important; | |||
} | } | ||
} | } | ||