6202
редагування
MediaWiki:Common.css: відмінності між версіями
нема опису редагування
Admin (обговорення | внесок) Немає опису редагування Мітка: Скасовано |
Admin (обговорення | внесок) Немає опису редагування Мітка: Ручний відкіт |
||
| (Не показано 10 проміжних версій цього користувача) | |||
| Рядок 1425: | Рядок 1425: | ||
} | } | ||
/* | /* ==================================================== */ | ||
.overlay, | /* БЛОКУВАННЯ SEARCH OVERLAY */ | ||
. | /* ==================================================== */ | ||
background-color: | /* Фіксуємо scroll */ | ||
html { | |||
overflow-y: scroll !important; | |||
scrollbar-gutter: stable !important; | |||
} | |||
/* Блокуємо зміни body при search overlay */ | |||
body.overlay-enabled, | |||
body.search-enabled { | |||
overflow: auto !important; | |||
position: static !important; | |||
background-color: #15151f !important; | |||
} | |||
/* Ховаємо search overlay */ | |||
.overlay.search-overlay, | |||
.search-overlay { | |||
display: none !important; | |||
visibility: hidden !important; | |||
opacity: 0 !important; | |||
} | } | ||
/* | /* Поле пошуку - завжди активне */ | ||
#searchInput { | |||
pointer-events: auto !important; | pointer-events: auto !important; | ||
cursor: text !important; | |||
top: | } | ||
left: 0 | |||
right: 0 !important; | /* Контент - правильний padding-top */ | ||
.mw-body { | |||
width: | padding-top: 70px !important; | ||
height: | } | ||
z-index: | |||
@media (max-width: 767px) { | |||
.mw-body { | |||
padding-top: 60px !important; | |||
} | |||
} | |||
/* ==================================================== */ | |||
/* HEADER BANNER - LIQUIPEDIA STYLE */ | |||
/* ==================================================== */ | |||
.header-banner { | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
padding: 20px 30px; | |||
margin-bottom: 20px; | |||
background-image: url('/images/4/44/Searchbackground.png'); | |||
background-size: cover; | |||
background-position: center; | |||
border-radius: 8px; | |||
position: relative; | |||
min-height: 80px; | |||
} | |||
/* Затемнення для кращої читабельності */ | |||
.header-banner::before { | |||
content: ''; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
bottom: 0; | |||
background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.5) 100%); | |||
border-radius: 8px; | |||
pointer-events: none; | |||
} | |||
/* Логотип зліва */ | |||
.header-banner__logo { | |||
position: relative; | |||
z-index: 1; | |||
display: flex; | |||
align-items: center; | |||
gap: 12px; | |||
} | |||
.header-banner__logo span[typeof="mw:File"], | |||
.header-banner__logo > span:first-child { | |||
display: flex; | |||
align-items: center; | |||
} | |||
.header-banner__logo > span:last-child { | |||
font-size: 24px; | |||
font-weight: 700; | |||
color: #fff !important; | |||
letter-spacing: 1px; | |||
text-shadow: 0 2px 4px rgba(0,0,0,0.5); | |||
white-space: nowrap; | |||
} | |||
.header-banner__logo a { | |||
display: flex; | |||
align-items: center; | |||
gap: 12px; | |||
text-decoration: none !important; | |||
} | |||
.header-banner__logo img { | |||
width: 50px; | |||
height: 50px; | |||
object-fit: contain; | |||
} | |||
.header-banner__logo span { | |||
font-size: 24px; | |||
font-weight: 700; | |||
color: #fff !important; | |||
letter-spacing: 1px; | |||
text-shadow: 0 2px 4px rgba(0,0,0,0.5); | |||
} | |||
/* Пошук справа */ | |||
.header-banner__search { | |||
position: relative; | |||
z-index: 1; | |||
display: flex; | |||
gap: 0; | |||
} | |||
.header-banner__search input { | |||
width: 360px; | |||
margin-right: 16px; | |||
padding: 12px 16px; | |||
font-size: 14px; | |||
border: none; | |||
border-radius: 6px; | |||
background: #fff; | |||
color: #333; | |||
outline: none; | |||
} | |||
.header-banner__search input::placeholder { | |||
color: #888; | |||
} | |||
.header-banner__search input:focus { | |||
box-shadow: 0 0 0 2px rgba(161, 156, 224, 0.5); | |||
} | |||
.header-banner__search button { | |||
padding: 12px 20px; | |||
font-size: 14px; | |||
font-weight: 600; | |||
border: none; | |||
border-radius: 6px; | |||
background: #3b82f6; | |||
color: #fff; | |||
cursor: pointer; | |||
transition: background 0.2s; | |||
} | |||
.header-banner__search button:hover { | |||
background: #2563eb; | |||
} | |||
/* Мобільна версія */ | |||
@media (max-width: 768px) { | |||
.header-banner { | |||
flex-direction: column; | |||
gap: 16px; | |||
padding: 20px; | |||
text-align: center; | |||
} | |||
.header-banner__logo span { | |||
font-size: 18px; | |||
} | |||
.header-banner__search { | |||
width: 100%; | |||
} | |||
.header-banner__search input { | |||
flex: 1; | |||
width: auto; | |||
} | |||
} | |||
@media (max-width: 768px) { | |||
.header-banner__logo > span:last-child { | |||
font-size: 16px; | |||
letter-spacing: 0.5px; | |||
} | |||
} | |||
@media (max-width: 480px) { | |||
.header-banner__logo > span:last-child { | |||
display: none; | |||
} | |||
} | } | ||