2206
редагувань
MediaWiki:Common.css: відмінності між версіями
auth: header bar full-width + content centered; fix 2-panel flex parent
Admin (обговорення | внесок) (CreateAccount: 2-panel layout (form | benefits sidebar)) |
Admin (обговорення | внесок) (auth: header bar full-width + content centered; fix 2-panel flex parent) |
||
| Рядок 1568: | Рядок 1568: | ||
/* ==================================================================== | /* ==================================================================== | ||
Special:UserLogin / Special:CreateAccount — | Special:UserLogin / Special:CreateAccount — header | ||
Бар хедера на всю ширину viewport, але контент центровано | |||
в межах звичайної Vector ширини | |||
==================================================================== */ | ==================================================================== */ | ||
body.mw-special-Userlogin .vector-header-container, | body.mw-special-Userlogin .vector-header-container, | ||
| Рядок 1576: | Рядок 1577: | ||
min-width: 0 !important; | min-width: 0 !important; | ||
width: 100% !important; | width: 100% !important; | ||
padding-left: | padding-left: 0 !important; | ||
padding-right: | padding-right: 0 !important; | ||
align-self: auto !important; | |||
} | } | ||
body.mw-special-Userlogin .mw-header, | body.mw-special-Userlogin .mw-header, | ||
body.mw-special-CreateAccount .mw-header { | body.mw-special-CreateAccount .mw-header { | ||
max-width: | max-width: 99.75em !important; | ||
min-width: 31.25em !important; | |||
margin-left: auto !important; | |||
margin-right: auto !important; | |||
padding-left: 24px !important; | |||
padding-right: 24px !important; | |||
width: 100% !important; | width: 100% !important; | ||
box-sizing: border-box !important; | |||
} | } | ||
/* ==================================================================== | /* ==================================================================== | ||
Special:CreateAccount — two-panel layout (form | benefits) | Special:CreateAccount — two-panel layout (form | benefits sidebar) | ||
ВАЖЛИВО: benefits-блок є SIBLING #userloginForm всередині .mw-ui-container, | |||
а не дитиною #userloginForm. Тому flex ставимо на .mw-ui-container. | |||
==================================================================== */ | ==================================================================== */ | ||
@media (min-width: 880px) { | @media (min-width: 880px) { | ||
/* .mw-body | /* .mw-body — прозорий wrapper, картки на дітях */ | ||
body.mw-special-CreateAccount .mw-body { | body.mw-special-CreateAccount .mw-body { | ||
background: transparent !important; | background: transparent !important; | ||
| Рядок 1605: | Рядок 1613: | ||
} | } | ||
/* | /* Спільний flex-родитель для двох карток */ | ||
body.mw-special-CreateAccount | body.mw-special-CreateAccount .mw-ui-container { | ||
display: flex !important; | display: flex !important; | ||
flex-direction: row !important; | flex-direction: row !important; | ||
gap: 24px !important; | gap: 24px !important; | ||
align-items: stretch !important; | align-items: stretch !important; | ||
width: 100% !important; | |||
max-width: none !important; | |||
} | } | ||
/* Ліва картка — | /* === Ліва картка — #userloginForm wrapper з формою === */ | ||
body.mw-special-CreateAccount #userloginForm | body.mw-special-CreateAccount #userloginForm { | ||
flex: 1 1 480px; | flex: 1 1 480px; | ||
background: #ffffff; | background: #ffffff !important; | ||
border-radius: 20px; | border-radius: 20px !important; | ||
padding: 40px 32px 32px; | padding: 40px 32px 32px !important; | ||
box-shadow: | box-shadow: | ||
0 1px 2px rgba(26, 34, 64, 0.04), | 0 1px 2px rgba(26, 34, 64, 0.04), | ||
0 8px 32px rgba(26, 34, 64, 0.10); | 0 8px 32px rgba(26, 34, 64, 0.10) !important; | ||
position: relative; | position: relative !important; | ||
overflow: hidden; | overflow: hidden !important; | ||
box-sizing: border-box; | box-sizing: border-box !important; | ||
margin: 0 !important; | margin: 0 !important; | ||
} | } | ||
body.mw-special-CreateAccount #userloginForm | body.mw-special-CreateAccount #userloginForm::before { | ||
content: ""; | content: ""; | ||
position: absolute; | position: absolute; | ||
| Рядок 1643: | Рядок 1652: | ||
} | } | ||
/* Права картка — benefits | /* === Права картка — benefits-блок === */ | ||
body.mw-special-CreateAccount .mw-createacct-benefits-container { | body.mw-special-CreateAccount .mw-createacct-benefits-container { | ||
flex: 0 1 320px; | flex: 0 1 320px; | ||
background: #ffffff; | background: #ffffff !important; | ||
border-radius: 20px; | border-radius: 20px !important; | ||
padding: 48px 28px 36px; | padding: 48px 28px 36px !important; | ||
box-shadow: | box-shadow: | ||
0 1px 2px rgba(26, 34, 64, 0.04), | 0 1px 2px rgba(26, 34, 64, 0.04), | ||
0 8px 32px rgba(26, 34, 64, 0.10); | 0 8px 32px rgba(26, 34, 64, 0.10) !important; | ||
position: relative; | position: relative !important; | ||
overflow: hidden; | overflow: hidden !important; | ||
box-sizing: border-box; | box-sizing: border-box !important; | ||
text-align: center; | text-align: center !important; | ||
margin: 0 !important; | margin: 0 !important; | ||
align-self: stretch; | align-self: stretch; | ||
| Рядок 1714: | Рядок 1723: | ||
/* Tablet/mobile — стак вертикально */ | /* Tablet/mobile — стак вертикально */ | ||
@media (max-width: 879px) { | @media (max-width: 879px) { | ||
body.mw-special-CreateAccount | body.mw-special-CreateAccount .mw-ui-container { | ||
display: block !important; | display: block !important; | ||
} | } | ||