Template:CreateHub/styles.css: Difference between revisions

← Older edit Newer edit →

@@ Line 8: / Line 8: @@
 /* =========================================
-    LAYOUT FIXES (The "Nuclear" Option)
+    LAYOUT FIXES (The Critical Part)
     ========================================= */
-/* 1. Force the form to behave as a row */
+/* 1. Target the FORM itself */
 .creation-row form {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
-  gap: 15px !important;
    margin: 0 !important;
 }
-/* 2. CRITICAL: PageForms often wraps inputs in <p> tags.
+/* 2. CRITICAL FIX: PageForms wraps inputs in a <p> tag.
-    'display: contents' makes the <p> invisible to the layout,
+    We must make this <p> a flex container too, or the items will stack. */
-   so the inputs inside it sit side-by-side. */
+.creation-row form p {
-.creation-row p {
+   display: flex !important;
-   display: contents !important;
+  flex-direction: row !important;
+  align-items: center !important;
+  gap: 15px !important; /* Space between input and button */
+  margin: 0 !important;
+  padding: 0 !important;
+  width: 100%;
 }
-/* 3. CRITICAL: Hide the line breaks PageForms inserts */
+/* 3. Hide the <br> tag that PageForms inserts */
 .creation-row br {
    display: none !important;
 }
-/* 4. Fix for InputBox wrapper (Blank Page) */
+/* 4. Fix for the Blank Page wrapper (InputBox) */
 .creation-row .mw-inputbox-centered {
    width: auto !important;
    margin: 0 !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 15px !important;
+}
+/* InputBox sometimes puts the form inside the centered div */
+.creation-row .mw-inputbox-centered form {
+    gap: 15px !important;
 }
 /* =========================================
-    INPUT & BUTTON SIZING
+    INPUT & BUTTON STYLING (Shared)
     ========================================= */
 .creation-row input[type="text"],
@@ Line 47: / Line 59: @@
    font-family: sans-serif !important;
    font-size: 14px !important;
-   margin: 0 !important; /* Remove default margins to ensure alignment */
+   margin: 0 !important;
 }
-/* =========================================
+/* Text Box (Left) */
-   TEXT INPUT (Left Side)
-   ========================================= */
 .creation-row input[type="text"] {
    width: 260px !important;
@@ Line 69: / Line 79: @@
 }
-/* =========================================
+/* Button (Right) */
-   BUTTON (Right Side)
-   ========================================= */
-/* We target 'button' too, just in case PageForms switches tags */
 .creation-row input[type="submit"],
 .creation-row button {
    width: 260px !important;
-  /* FORCE WHITE & BLACK STYLE */
    background: #fff !important;
    background-color: #fff !important;
-   background-image: none !important; /* Removes the grey gradient seen in your screenshot */
+   background-image: none !important;
    border: 1.5px solid #000 !important;
@@ Line 94: / Line 99: @@
 }
-/* Hover Effect */
 .creation-row input[type="submit"]:hover,
 .creation-row button:hover {