2206
редагувань
MediaWiki:Common.css: відмінності між версіями
login v2.6: body→flex column на весь viewport, фікс вертикального центрування
Admin (обговорення | внесок) (login v2.5: повна ширина viewport, грід → flex, фікс горизонтального центрування) |
Admin (обговорення | внесок) (login v2.6: body→flex column на весь viewport, фікс вертикального центрування) |
||
| Рядок 846: | Рядок 846: | ||
Special:UserLogin / Special:CreateAccount — beautiful auth pages v2 | Special:UserLogin / Special:CreateAccount — beautiful auth pages v2 | ||
==================================================================== */ | ==================================================================== */ | ||
/* BODY стає flex-контейнером на весь viewport, щоб header + page-container + footer | |||
правильно розподілили висоту. Інакше .mw-page-container з min-height:100vh | |||
опускається нижче хедера → overflow + форма візуально вище центру. */ | |||
body.mw-special-Userlogin, | |||
body.mw-special-CreateAccount { | |||
min-height: 100vh !important; | |||
display: flex !important; | |||
flex-direction: column !important; | |||
} | |||
body.mw-special-Userlogin .vector-header-container, | |||
body.mw-special-CreateAccount .vector-header-container { | |||
flex: 0 0 auto; | |||
} | |||
/* Фон + повна ширина viewport (прибираємо Vector max-width центрування) */ | /* Фон + повна ширина viewport (прибираємо Vector max-width центрування) */ | ||
| Рядок 854: | Рядок 868: | ||
radial-gradient(circle at 85% 80%, rgba(248, 72, 64, 0.05), transparent 40%), | radial-gradient(circle at 85% 80%, rgba(248, 72, 64, 0.05), transparent 40%), | ||
#f7f9fc; | #f7f9fc; | ||
min-height: | flex: 1 1 auto !important; | ||
display: flex; | min-height: 0 !important; | ||
flex-direction: column; | display: flex !important; | ||
flex-direction: column !important; | |||
max-width: none !important; | max-width: none !important; | ||
width: 100% !important; | width: 100% !important; | ||
| Рядок 863: | Рядок 878: | ||
border: none !important; | border: none !important; | ||
} | } | ||
/* Inner — замінити Vector grid (з зарезервованою sidebar-колонкою) на flex column */ | /* Inner — замінити Vector grid (з зарезервованою sidebar-колонкою) на flex column, | ||
flex:1 щоб займало всю висоту в page-container, justify-center для вертикалі */ | |||
body.mw-special-Userlogin .mw-page-container-inner, | body.mw-special-Userlogin .mw-page-container-inner, | ||
body.mw-special-CreateAccount .mw-page-container-inner { | body.mw-special-CreateAccount .mw-page-container-inner { | ||
flex: 1; | flex: 1 1 auto !important; | ||
display: flex !important; | display: flex !important; | ||
flex-direction: column !important; | flex-direction: column !important; | ||
| Рядок 872: | Рядок 888: | ||
justify-content: center !important; | justify-content: center !important; | ||
padding-top: 0 !important; | padding-top: 0 !important; | ||
padding-bottom: 0 !important; | |||
grid-template-columns: 1fr !important; | grid-template-columns: 1fr !important; | ||
grid-template-areas: none !important; | grid-template-areas: none !important; | ||
| Рядок 902: | Рядок 919: | ||
align-items: center !important; | align-items: center !important; | ||
} | } | ||
/* Footer | /* Footer — фіксована висота в кінці flex column, не розтягується */ | ||
body.mw-special-Userlogin .mw-footer-container, | body.mw-special-Userlogin .mw-footer-container, | ||
body.mw-special-CreateAccount .mw-footer-container { | body.mw-special-CreateAccount .mw-footer-container { | ||
flex: 0 0 auto; | |||
margin-top: auto; | margin-top: auto; | ||
} | |||
/* Sitenotice між inner і footer — не повинен заважати */ | |||
body.mw-special-Userlogin .vector-sitenotice-container, | |||
body.mw-special-CreateAccount .vector-sitenotice-container { | |||
flex: 0 0 auto; | |||
} | } | ||
/* Прибрати "Мобільний вигляд" з футера */ | /* Прибрати "Мобільний вигляд" з футера */ | ||