Template:CreateHub/styles.css: Difference between revisions

← Older edit Newer edit →

@@ Line 8: / Line 8: @@
 /* =========================================
-    LAYOUT FIXES (The "Ghost" Method)
+    THE FIX: RECURSIVE FLEX LAYOUT
     ========================================= */
-/* 1. The Form becomes the master Flex container */
+/* 1. Hide the Line Break <br> */
-.creation-row form {
+.creation-row br {
+  display: none !important;
+}
+/* 2. Force the Form AND any immediate children (p, div) to be Flex Rows.
+   This handles the nesting: Form -> Paragraph -> Inputs */
+.creation-row form,
+.creation-row form > p,
+.creation-row form > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
-   gap: 15px !important; /* Space between input and button */
+  /* Kill the indentation */
    margin: 0 !important;
    padding: 0 !important;
+  /* Space between items */
+  gap: 15px !important;
 }
-/* 2. CRITICAL: Make the <p> invisible to the layout.
+/* 3. Handle the Blank Page wrapper specifically
-   'display: contents' makes the browser treat the children of <p>
+   (InputBox adds an extra div that needs to behave) */
-   as if they were direct children of <form>. This kills margins/padding automatically. */
-.creation-row p {
-  display: contents !important;
-}
-/* 3. Hide the <br> line break */
-.creation-row br {
-  display: none !important;
-}
-/* 4. Fix for the Blank Page (InputBox) wrapper */
 .creation-row .mw-inputbox-centered {
+  display: flex !important;
+  align-items: center !important;
+  width: auto !important;
    margin: 0 !important;
-  width: auto !important;
 }
 /* =========================================
-    INPUT & BUTTON SIZING
+    VISUALS: INPUTS & BUTTONS
     ========================================= */
+/* Shared Sizing & Reset */
 .creation-row input[type="text"],
 .creation-row input[type="submit"],
@@ Line 49: / Line 54: @@
    font-family: sans-serif !important;
    font-size: 14px !important;
-   margin: 0 !important;
+   margin: 0 !important; /* Remove individual margins so gap handles spacing */
 }
-/* =========================================
+/* --- TEXT BOX (Left) --- */
-   TEXT BOX (Left)
-   ========================================= */
 .creation-row input[type="text"] {
    width: 260px !important;
@@ Line 66: / Line 69: @@
 }
+/* Focus State */
 .creation-row input[type="text"]:focus {
    border-color: #3366cc !important;
@@ Line 71: / Line 75: @@
 }
-/* =========================================
+/* --- BUTTON (Right) --- */
-   BUTTON (Right)
-   ========================================= */
 .creation-row input[type="submit"],
 .creation-row button {
    width: 260px !important;
-   /* White Background, Black Border */
+   /* Theme: White Background, Black Border */
    background: #fff !important;
    background-color: #fff !important;
-   background-image: none !important;
+   background-image: none !important; /* Removes default gradient */
    border: 1.5px solid #000 !important;
@@ Line 87: / Line 89: @@
    color: #000 !important;
-   font-weight: 700 !important;
+   font-weight: 700 !important; /* Bold */
    cursor: pointer !important;
@@ Line 95: / Line 97: @@
 }
-/* NEW HOVER STYLE: Light Grey */
+/* HOVER STATE: Light Grey */
 .creation-row input[type="submit"]:hover,
 .creation-row button:hover {
    background-color: #f2f2f2 !important; /* Light Grey */
-   color: #000 !important; /* Text stays black */
+   color: #000 !important;
    border-color: #000 !important;
 }