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

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

Версія за 06:18, 23 травня 2026

4087 байтів додано , 23 травень

CreateAccount: 2-panel layout (form | benefits sidebar)

Admin

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

2206

редагувань

@@ Рядок 1584: / Рядок 1584: @@
    max-width: none !important;
    width: 100% !important;
+}
+/* ====================================================================
+   Special:CreateAccount — two-panel layout (form | benefits)
+   Картка benefits "Країнопедія створюється такими ж людьми як і Ви"
+   виноситься справа від форми
+   ==================================================================== */
+@media (min-width: 880px) {
+  /* .mw-body перестає бути карткою — стає прозорим wrapper-ом */
+  body.mw-special-CreateAccount .mw-body {
+    background: transparent !important;
+    box-shadow: none !important;
+    border-radius: 0 !important;
+    padding: 0 !important;
+    max-width: 880px !important;
+    width: calc(100% - 32px) !important;
+    overflow: visible !important;
+  }
+  body.mw-special-CreateAccount .mw-body::before {
+    content: none !important;
+  }
+  /* userloginForm — flex з двома картками */
+  body.mw-special-CreateAccount #userloginForm {
+    display: flex !important;
+    flex-direction: row !important;
+    gap: 24px !important;
+    align-items: stretch !important;
+    margin: 0 !important;
+  }
+  /* Ліва картка — сама форма */
+  body.mw-special-CreateAccount #userloginForm > form#userlogin2 {
+    flex: 1 1 480px;
+    background: #ffffff;
+    border-radius: 20px;
+    padding: 40px 32px 32px;
+    box-shadow:
+1px 2px rgba(26, 34, 64, 0.04),
+8px 32px rgba(26, 34, 64, 0.10);
+    position: relative;
+    overflow: hidden;
+    box-sizing: border-box;
+    margin: 0 !important;
+  }
+  body.mw-special-CreateAccount #userloginForm > form#userlogin2::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%);
+    z-index: 1;
+  }
+  /* Права картка — benefits (статистика + тагла́йн) */
+  body.mw-special-CreateAccount .mw-createacct-benefits-container {
+    flex: 0 1 320px;
+    background: #ffffff;
+    border-radius: 20px;
+    padding: 48px 28px 36px;
+    box-shadow:
+1px 2px rgba(26, 34, 64, 0.04),
+8px 32px rgba(26, 34, 64, 0.10);
+    position: relative;
+    overflow: hidden;
+    box-sizing: border-box;
+    text-align: center;
+    margin: 0 !important;
+    align-self: stretch;
+  }
+  body.mw-special-CreateAccount .mw-createacct-benefits-container::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg,
+      #f84840 0%, #f84840 25%,
+      #f8b020 25%, #f8b020 50%,
+      #1070b0 50%, #1070b0 75%,
+      #00b898 75%, #00b898 100%);
+    z-index: 1;
+  }
+  body.mw-special-CreateAccount .mw-createacct-benefits-container h2 {
+    font-family: "Manrope", sans-serif;
+    font-weight: 800;
+    font-size: 22px;
+    color: #1a2240;
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+    margin: 0 0 28px !important;
+    border-bottom: none !important;
+    padding: 0 !important;
+  }
+  body.mw-special-CreateAccount .mw-createacct-benefits-list {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+  body.mw-special-CreateAccount .mw-number-text {
+    display: block;
+    text-align: center;
+  }
+  body.mw-special-CreateAccount .mw-number-text h3 {
+    font-family: "Manrope", sans-serif;
+    font-weight: 800;
+    font-size: 40px;
+    color: #00b898;
+    line-height: 1;
+    margin: 0 0 4px !important;
+    border: none !important;
+    padding: 0 !important;
+  }
+  body.mw-special-CreateAccount .mw-number-text p {
+    font-family: "Manrope", sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    color: #6b7280;
+    margin: 0 !important;
+  }
+}
+/* Tablet/mobile — стак вертикально */
+@media (max-width: 879px) {
+  body.mw-special-CreateAccount #userloginForm {
+    display: block !important;
+  }
+  body.mw-special-CreateAccount .mw-createacct-benefits-container {
+    margin-top: 16px !important;
+  }
 }