MediaWiki:Common.css: відмінності між версіями

MediaWiki:Common.css (переглянути вихідний код)

Версія за 17:06, 16 травня 2026

1502 байти додано , 16 травень

login v2: 4-color top stripe, інтегрований createaccount footer, gradient bg, краще дихання

Admin

Бюрократи, Адміністратори інтерфейсу, Адміністратори

2206

редагувань

@@ Рядок 844: / Рядок 844: @@
 /* ====================================================================
-    Special:UserLogin / Special:CreateAccount — beautiful auth pages
+    Special:UserLogin / Special:CreateAccount — beautiful auth pages v2
     ==================================================================== */
-/* М'який сірий фон сторінки */
+/* Фон сторінки з ледь помітним gradient від брендових кольорів */
 body.mw-special-Userlogin .mw-page-container,
 body.mw-special-CreateAccount .mw-page-container {
-   background: #f7f9fc;
+   background:
+    radial-gradient(circle at 15% 20%, rgba(0, 184, 152, 0.06), transparent 40%),
+    radial-gradient(circle at 85% 80%, rgba(248, 72, 64, 0.05), transparent 40%),
+    #f7f9fc;
+  min-height: 100vh;
 }
@@ Рядок 865: / Рядок 869: @@
 body.mw-special-CreateAccount .firstHeading {
    font-family: "Manrope", sans-serif;
-   font-weight: 700;
+   font-weight: 800;
-   font-size: 32px;
+   font-size: 28px;
    text-align: center;
    border: none;
-   margin: 32px auto 24px;
+   margin: 56px auto 8px;
-   max-width: 440px;
+   max-width: 420px;
-   letter-spacing: -0.01em;
+   letter-spacing: -0.02em;
    color: #1a2240;
+  line-height: 1.15;
+}
+/* Сабтайтл під заголовком */
+body.mw-special-Userlogin .firstHeading::after,
+body.mw-special-CreateAccount .firstHeading::after {
+  content: "Wiki для українців за кордоном";
+  display: block;
+  font-size: 14px;
+  font-weight: 400;
+  color: #6b7280;
+  margin-top: 8px;
+  letter-spacing: 0;
 }
@@ Рядок 878: / Рядок 894: @@
 body.mw-special-Userlogin #mw-content-text,
 body.mw-special-CreateAccount #mw-content-text {
-   max-width: 440px;
+   max-width: 420px;
    margin: 0 auto;
-   padding: 0 16px;
+   padding: 0 16px 80px;
 }
-/* Форму в білу карточку з м'якою тінню */
+/* Форму в білу карточку з кольоровим топ-акцентом і м'якою тінню */
 body.mw-special-Userlogin #userloginForm,
 body.mw-special-CreateAccount #userloginForm {
    background: #ffffff;
-   border-radius: 16px;
+   border-radius: 20px;
-   padding: 32px;
+   padding: 40px 32px 32px;
-   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 20px rgba(26, 34, 64, 0.08);
+   box-shadow:
+1px 2px rgba(26, 34, 64, 0.04),
+8px 32px rgba(26, 34, 64, 0.10);
+  position: relative;
+  overflow: hidden;
+  margin-top: 32px;
+}
+/* 4-кольорова смуга зверху карточки (бренд-акцент) */
+body.mw-special-Userlogin #userloginForm::before,
+body.mw-special-CreateAccount #userloginForm::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg,
+    #00b898 0%, #00b898 25%,
+    #1070b0 25%, #1070b0 50%,
+    #f8b020 50%, #f8b020 75%,
+    #f84840 75%, #f84840 100%);
 }
 body.mw-special-Userlogin #userloginForm form,
@@ Рядок 937: / Рядок 973: @@
 /* Checkbox "Запам'ятати мене" */
 body.mw-special-Userlogin .mw-userlogin-rememberme {
-   margin: 4px 0 20px;
+   margin: 8px 0 24px;
 }
 body.mw-special-Userlogin .cdx-checkbox__label {
@@ Рядок 943: / Рядок 979: @@
    font-family: "Manrope", sans-serif;
    color: #4a5568;
+  padding-left: 4px;
 }
@@ Рядок 969: / Рядок 1006: @@
 }
-/* Допоміжні лінки ("Допомога з входу", "Забули пароль") — центровано, маленькі */
+/* Допоміжні лінки ("Допомога з входу", "Забули пароль") — центровано */
 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;
+   font-size: 14px;
-   margin-top: 12px;
+   margin-top: 16px;
 }
 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;
+   color: #1070b0;
    text-decoration: none;
+  font-weight: 500;
 }
 body.mw-special-Userlogin .mw-userlogin-help a:hover,
@@ Рядок 987: / Рядок 1025: @@
    color: #1a2240;
    text-decoration: underline;
+}
+/* "Допомога з входу" — приховаємо як external/непотрібне посилання */
+body.mw-special-Userlogin .mw-userlogin-help {
+  display: none;
 }
-/* "Немає облікового запису?" — окрема карточка нижче, ghost-кнопка */
+/* "Немає облікового запису?" — footer-секція форми, з top-розділювачем
+   (не нестед-карточка, а інтегрована частина форми) */
 body.mw-special-Userlogin #mw-createaccount-cta {
-   margin: 24px 0 0 !important;
+   margin: 24px -32px -32px !important;
-   padding: 20px 24px !important;
+   padding: 24px 32px !important;
-   background: #ffffff;
+   background: #f9fafc;
-   border-radius: 16px;
+   border-radius: 0;
+  border-top: 1px solid #eef0f4;
    text-align: center;
    font-size: 14px;
-   color: #4a5568;
+   color: #6b7280;
    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;
+   gap: 8px;
    flex-wrap: wrap;
+  box-shadow: none;
 }
 body.mw-special-Userlogin #mw-createaccount-join {
    background: transparent !important;
-   border: 1px solid #1a2240 !important;
+   border: none !important;
-   color: #1a2240 !important;
+   color: #1070b0 !important;
-   border-radius: 8px !important;
+   border-radius: 0 !important;
-   padding: 8px 18px !important;
+   padding: 0 !important;
-   font-weight: 600 !important;
+   font-weight: 700 !important;
    font-size: 14px !important;
    font-family: "Manrope", sans-serif !important;
-  transition: background 0.15s, color 0.15s !important;
    text-decoration: none !important;
+  box-shadow: none !important;
+  transition: color 0.15s !important;
 }
 body.mw-special-Userlogin #mw-createaccount-join:hover {
-   background: #1a2240 !important;
+   background: transparent !important;
-   color: #ffffff !important;
+   color: #f84840 !important;
+  text-decoration: underline !important;
 }