2206
редагувань
MediaWiki:Common.css: відмінності між версіями
login: красивий редизайн Special:UserLogin і CreateAccount
Admin (обговорення | внесок) (sticky-header: сховати дублі іконок talk і watch) |
Admin (обговорення | внесок) (login: красивий редизайн Special:UserLogin і CreateAccount) |
||
| Рядок 841: | Рядок 841: | ||
display: block; | display: block; | ||
white-space: nowrap; | white-space: nowrap; | ||
} | |||
/* ==================================================================== | |||
Special:UserLogin / Special:CreateAccount — beautiful auth pages | |||
==================================================================== */ | |||
/* М'який сірий фон сторінки */ | |||
body.mw-special-Userlogin .mw-page-container, | |||
body.mw-special-CreateAccount .mw-page-container { | |||
background: #f7f9fc; | |||
} | |||
/* Прибрати page-toolbar і tools-dropdown на сторінках авторизації */ | |||
body.mw-special-Userlogin .vector-page-toolbar, | |||
body.mw-special-Userlogin .vector-page-titlebar-toc, | |||
body.mw-special-CreateAccount .vector-page-toolbar, | |||
body.mw-special-CreateAccount .vector-page-titlebar-toc { | |||
display: none !important; | |||
} | |||
/* Heading — Manrope, центровано, без border */ | |||
body.mw-special-Userlogin .firstHeading, | |||
body.mw-special-CreateAccount .firstHeading { | |||
font-family: "Manrope", sans-serif; | |||
font-weight: 700; | |||
font-size: 32px; | |||
text-align: center; | |||
border: none; | |||
margin: 32px auto 24px; | |||
max-width: 440px; | |||
letter-spacing: -0.01em; | |||
color: #1a2240; | |||
} | |||
/* Центрувати весь контент-блок, обмежити ширину */ | |||
body.mw-special-Userlogin #mw-content-text, | |||
body.mw-special-CreateAccount #mw-content-text { | |||
max-width: 440px; | |||
margin: 0 auto; | |||
padding: 0 16px; | |||
} | |||
/* Форму в білу карточку з м'якою тінню */ | |||
body.mw-special-Userlogin #userloginForm, | |||
body.mw-special-CreateAccount #userloginForm { | |||
background: #ffffff; | |||
border-radius: 16px; | |||
padding: 32px; | |||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 20px rgba(26, 34, 64, 0.08); | |||
} | |||
body.mw-special-Userlogin #userloginForm form, | |||
body.mw-special-CreateAccount #userloginForm form { | |||
margin: 0; | |||
} | |||
/* Spacing для полів */ | |||
body.mw-special-Userlogin .mw-htmlform-field-HTMLTextField, | |||
body.mw-special-CreateAccount .mw-htmlform-field-HTMLTextField { | |||
margin-bottom: 16px; | |||
} | |||
/* Лейбли — компактні, приглушені */ | |||
body.mw-special-Userlogin .mw-htmlform-field-HTMLTextField > label, | |||
body.mw-special-CreateAccount .mw-htmlform-field-HTMLTextField > label { | |||
display: block; | |||
font-size: 13px; | |||
font-weight: 600; | |||
color: #4a5568; | |||
margin-bottom: 6px; | |||
font-family: "Manrope", sans-serif; | |||
} | |||
/* Інпути — pill-style, soft fill, focus → білий + темний бордер */ | |||
body.mw-special-Userlogin .cdx-text-input__input, | |||
body.mw-special-CreateAccount .cdx-text-input__input { | |||
background: #f4f6fa !important; | |||
border: 1px solid transparent !important; | |||
border-radius: 10px !important; | |||
padding: 12px 14px !important; | |||
font-size: 15px !important; | |||
width: 100% !important; | |||
box-sizing: border-box !important; | |||
box-shadow: none !important; | |||
transition: border-color 0.15s, background 0.15s !important; | |||
font-family: "Manrope", sans-serif !important; | |||
} | |||
body.mw-special-Userlogin .cdx-text-input__input:focus, | |||
body.mw-special-CreateAccount .cdx-text-input__input:focus { | |||
background: #ffffff !important; | |||
border-color: #1a2240 !important; | |||
outline: none !important; | |||
box-shadow: none !important; | |||
} | |||
/* Checkbox "Запам'ятати мене" */ | |||
body.mw-special-Userlogin .mw-userlogin-rememberme { | |||
margin: 4px 0 20px; | |||
} | |||
body.mw-special-Userlogin .cdx-checkbox__label { | |||
font-size: 14px; | |||
font-family: "Manrope", sans-serif; | |||
color: #4a5568; | |||
} | |||
/* Submit "Вхід" / "Створити обліковий запис" — коралова CTA */ | |||
body.mw-special-Userlogin #wpLoginAttempt, | |||
body.mw-special-CreateAccount #wpCreateaccount, | |||
body.mw-special-CreateAccount button.mw-htmlform-submit { | |||
background: #f84840 !important; | |||
border-color: #f84840 !important; | |||
color: #ffffff !important; | |||
border-radius: 10px !important; | |||
padding: 12px 24px !important; | |||
font-weight: 700 !important; | |||
width: 100% !important; | |||
font-size: 15px !important; | |||
font-family: "Manrope", sans-serif !important; | |||
box-shadow: 0 2px 8px rgba(248, 72, 64, 0.25) !important; | |||
transition: background 0.15s, box-shadow 0.15s !important; | |||
margin-top: 4px; | |||
} | |||
body.mw-special-Userlogin #wpLoginAttempt:hover, | |||
body.mw-special-CreateAccount #wpCreateaccount:hover { | |||
background: #e63a32 !important; | |||
border-color: #e63a32 !important; | |||
box-shadow: 0 4px 12px rgba(248, 72, 64, 0.35) !important; | |||
} | |||
/* Допоміжні лінки ("Допомога з входу", "Забули пароль") — центровано, маленькі */ | |||
body.mw-special-Userlogin .mw-userlogin-help, | |||
body.mw-special-Userlogin .mw-form-related-link-container, | |||
body.mw-special-CreateAccount .mw-form-related-link-container { | |||
text-align: center !important; | |||
font-size: 13px; | |||
margin-top: 12px; | |||
} | |||
body.mw-special-Userlogin .mw-userlogin-help a, | |||
body.mw-special-Userlogin .mw-form-related-link-container a, | |||
body.mw-special-CreateAccount .mw-form-related-link-container a { | |||
color: #4a5568; | |||
text-decoration: none; | |||
} | |||
body.mw-special-Userlogin .mw-userlogin-help a:hover, | |||
body.mw-special-Userlogin .mw-form-related-link-container a:hover { | |||
color: #1a2240; | |||
text-decoration: underline; | |||
} | |||
/* "Немає облікового запису?" — окрема карточка нижче, ghost-кнопка */ | |||
body.mw-special-Userlogin #mw-createaccount-cta { | |||
margin: 24px 0 0 !important; | |||
padding: 20px 24px !important; | |||
background: #ffffff; | |||
border-radius: 16px; | |||
text-align: center; | |||
font-size: 14px; | |||
color: #4a5568; | |||
font-family: "Manrope", sans-serif; | |||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 20px rgba(26, 34, 64, 0.08); | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 12px; | |||
flex-wrap: wrap; | |||
} | |||
body.mw-special-Userlogin #mw-createaccount-join { | |||
background: transparent !important; | |||
border: 1px solid #1a2240 !important; | |||
color: #1a2240 !important; | |||
border-radius: 8px !important; | |||
padding: 8px 18px !important; | |||
font-weight: 600 !important; | |||
font-size: 14px !important; | |||
font-family: "Manrope", sans-serif !important; | |||
transition: background 0.15s, color 0.15s !important; | |||
text-decoration: none !important; | |||
} | |||
body.mw-special-Userlogin #mw-createaccount-join:hover { | |||
background: #1a2240 !important; | |||
color: #ffffff !important; | |||
} | |||
/* Прибрати сірі силуети людей знизу (фоновий help-icon) */ | |||
body.mw-special-Userlogin .mw-userlogin-help-icon, | |||
body.mw-special-Userlogin #userloginprompt::before, | |||
body.mw-special-Userlogin .mw-ui-container > .mw-userlogin-help-icon { | |||
display: none !important; | |||
} | |||
/* Mobile — менші відступи в карточці */ | |||
@media screen and (max-width: 480px) { | |||
body.mw-special-Userlogin #userloginForm, | |||
body.mw-special-CreateAccount #userloginForm { | |||
padding: 24px 20px; | |||
} | |||
body.mw-special-Userlogin .firstHeading, | |||
body.mw-special-CreateAccount .firstHeading { | |||
font-size: 26px; | |||
margin-top: 16px; | |||
} | |||
} | } | ||