Template:CreateHub/styles.css: Difference between revisions

← Older edit Newer edit →

@@ Line 8: / Line 8: @@
 /* =========================================
-    LAYOUT NORMALIZATION (The Fix)
+    THE NUCLEAR OPTION
     ========================================= */
-/* 1. Kill the line break that PageForms inserts */
+/* 1. Force the row to Flex */
+.creation-row {
+  display: flex !important;
+  align-items: center !important;
+}
+/* 2. Target EVERYTHING inside the creation row form.
+   The '*' selector means "I don't care if you are a <p>, <div>, or <form>".
+   We strip all margins and padding from the wrappers.
+*/
+.creation-row form,
+.creation-row form > * {
+  margin: 0 !important;
+  padding: 0 !important;
+  display: flex !important; /* Forces nested wrappers to behave like rows */
+  align-items: center !important;
+  gap: 15px !important; /* Ensures the gap persists through wrappers */
+}
+/* 3. Hide the <br> explicitly */
 .creation-row br {
    display: none !important;
 }
-/* 2. Force every wrapper (Form, Paragraph, Div) to align items horizontally.
+/* 4. Reset the Blank Page wrapper so it plays nice with the rule above */
-   We target everything to ensure we catch PageForms (<p>) and InputBox (<div>) */
-.creation-row form,
-.creation-row form p,
 .creation-row .mw-inputbox-centered {
-  display: flex !important;
-  flex-direction: row !important;
-  align-items: center !important;
-  justify-content: flex-start !important;
-  gap: 15px !important; /* Space between text box and button */
-  /* CRITICAL: Remove browser default margins to fix indentation */
-  margin: 0 !important;
-  padding: 0 !important;
    width: auto !important;
 }
 /* =========================================
-    INPUT SIZING (Shared)
+    INPUTS & BUTTONS (The Visuals)
     ========================================= */
-/* Target specific input types to avoid affecting hidden inputs */
+/* We target the inputs specifically to give them their shape back,
+   overriding the 'display: flex' we set on the containers above */
 .creation-row input[type="text"],
 .creation-row input[type="submit"],
 .creation-row button {
+  display: block !important; /* Behaves like a solid box */
+  height: 40px !important;
    box-sizing: border-box !important;
-  height: 40px !important;
    font-family: sans-serif !important;
    font-size: 14px !important;
    margin: 0 !important;
-  vertical-align: middle !important;
 }
-/* =========================================
+/* --- Text Box --- */
-   TEXT BOX STYLE (Left)
-   ========================================= */
 .creation-row input[type="text"] {
    width: 260px !important;
@@ Line 62: / Line 69: @@
 }
-/* Focus State */
 .creation-row input[type="text"]:focus {
    border-color: #3366cc !important;
@@ Line 68: / Line 74: @@
 }
-/* =========================================
+/* --- Button --- */
-   BUTTON STYLE (Right)
-   ========================================= */
 .creation-row input[type="submit"],
 .creation-row button {
    width: 260px !important;
-  /* Force White/Black Theme */
    background: #fff !important;
    background-color: #fff !important;
-   background-image: none !important; /* Removes gradients */
+   background-image: none !important;
    border: 1.5px solid #000 !important;
@@ Line 86: / Line 88: @@
    font-weight: 700 !important;
    cursor: pointer !important;
-   padding: 0 10px !important;
+   box-shadow: none !important;
+  text-shadow: none !important;
-  text-shadow: none !important;
-  box-shadow: none !important;
    transition: all 0.2s ease !important;
 }
-/* Hover State */
 .creation-row input[type="submit"]:hover,
 .creation-row button:hover {