6202
редагування
MediaWiki:Common.css: відмінності між версіями
нема опису редагування
Admin (обговорення | внесок) Немає опису редагування |
Admin (обговорення | внесок) Немає опису редагування Мітка: Ручний відкіт |
||
| (Не показано 8 проміжних версій цього користувача) | |||
| Рядок 1465: | Рядок 1465: | ||
.mw-body { | .mw-body { | ||
padding-top: 60px !important; | 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; | |||
} | } | ||
} | } | ||