Template:CreateHub/styles.css: Difference between revisions

← Older edit Newer edit →

@@ Line 8: / Line 8: @@
 /* =========================================
-    LAYOUT FIXES (The "Flattening")
+    LAYOUT NORMALIZATION (The Fix)
     ========================================= */
-/* 1. Reset the Form */
+/* 1. Kill the line break that PageForms inserts */
-.creation-row form {
+.creation-row br {
-   display: flex !important;
+   display: none !important;
-  flex-direction: row !important; /* Force side-by-side */
-  align-items: center !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  border: none !important;
 }
-/* 2. CRITICAL: Unwrap the PageForms Paragraph
+/* 2. Force every wrapper (Form, Paragraph, Div) to align items horizontally.
-    PageForms puts inputs inside a <p>. We turn that <p> into a flex container
+    We target everything to ensure we catch PageForms (<p>) and InputBox (<div>) */
-   and kill its margins to fix the "weird" indentation.
+.creation-row form,
-*/
+.creation-row form p,
-.creation-row form p {
+.creation-row .mw-inputbox-centered {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
-   gap: 15px !important; /* Space between input and button */
+  justify-content: flex-start !important;
-   margin: 0 !important; /* Removes the indentation */
+   gap: 15px !important; /* Space between text box and button */
-   padding: 0 !important;
-  width: auto !important;
+   /* CRITICAL: Remove browser default margins to fix indentation */
-}
-/* 3. Hide the line break <br> PageForms inserts */
-.creation-row br {
-  display: none !important;
-}
-/* 4. Fix for Blank Page (InputBox) wrapper */
-/* This ensures the bottom input aligns with the top ones */
-.creation-row .mw-inputbox-centered {
    margin: 0 !important;
    padding: 0 !important;
@@ Line 49: / Line 34: @@
 /* =========================================
-    INPUT & BUTTON VISUALS (Shared)
+    INPUT SIZING (Shared)
     ========================================= */
-/* Target specific inputs to avoid hitting hidden fields */
+/* Target specific input types to avoid affecting hidden inputs */
 .creation-row input[type="text"],
 .creation-row input[type="submit"],
 .creation-row button {
+  box-sizing: border-box !important;
    height: 40px !important;
-  box-sizing: border-box !important;
    font-family: sans-serif !important;
    font-size: 14px !important;
    margin: 0 !important;
+  vertical-align: middle !important;
 }
-/* --- Text Box (Left) --- */
+/* =========================================
+   TEXT BOX STYLE (Left)
+   ========================================= */
 .creation-row input[type="text"] {
    width: 260px !important;
@@ Line 80: / Line 68: @@
 }
-/* --- Button (Right) --- */
+/* =========================================
+   BUTTON STYLE (Right)
+   ========================================= */
 .creation-row input[type="submit"],
 .creation-row button {
@@ Line 88: / Line 78: @@
    background: #fff !important;
    background-color: #fff !important;
-   background-image: none !important;
+   background-image: none !important; /* Removes gradients */
    border: 1.5px solid #000 !important;
@@ Line 96: / Line 86: @@
    font-weight: 700 !important;
    cursor: pointer !important;
+  padding: 0 10px !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
 }