Template:CreateHub/styles.css: Difference between revisions

← Older edit Newer edit →

@@ Line 8: / Line 8: @@
 /* =========================================
-    LAYOUT FIXES (The Critical Part)
+    LAYOUT FIXES (The "Flattening")
     ========================================= */
-/* 1. Target the FORM itself */
+/* 1. Reset the Form */
 .creation-row form {
    display: flex !important;
-   flex-direction: row !important;
+   flex-direction: row !important; /* Force side-by-side */
    align-items: center !important;
    margin: 0 !important;
+  padding: 0 !important;
+  border: none !important;
 }
-/* 2. CRITICAL FIX: PageForms wraps inputs in a <p> tag.
+/* 2. CRITICAL: Unwrap the PageForms Paragraph
-   We must make this <p> a flex container too, or the items will stack. */
+   PageForms puts inputs inside a <p>. We turn that <p> into a flex container
+   and kill its margins to fix the "weird" indentation.
+*/
 .creation-row form p {
    display: flex !important;
@@ Line 26: / Line 30: @@
    align-items: center !important;
    gap: 15px !important; /* Space between input and button */
-   margin: 0 !important;
+   margin: 0 !important; /* Removes the indentation */
    padding: 0 !important;
-   width: 100%;
+   width: auto !important;
 }
-/* 3. Hide the <br> tag that PageForms inserts */
+/* 3. Hide the line break <br> PageForms inserts */
 .creation-row br {
    display: none !important;
 }
-/* 4. Fix for the Blank Page wrapper (InputBox) */
+/* 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;
    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 STYLING (Shared)
+    INPUT & BUTTON VISUALS (Shared)
     ========================================= */
+/* Target specific inputs to avoid hitting hidden fields */
 .creation-row input[type="text"],
 .creation-row input[type="submit"],
@@ Line 62: / Line 62: @@
 }
-/* Text Box (Left) */
+/* --- Text Box (Left) --- */
 .creation-row input[type="text"] {
    width: 260px !important;
@@ Line 74: / Line 74: @@
 }
+/* Focus State */
 .creation-row input[type="text"]:focus {
    border-color: #3366cc !important;
@@ Line 79: / Line 80: @@
 }
-/* Button (Right) */
+/* --- Button (Right) --- */
 .creation-row input[type="submit"],
 .creation-row button {
    width: 260px !important;
+  /* Force White/Black Theme */
    background: #fff !important;
    background-color: #fff !important;
@@ Line 99: / Line 102: @@
 }
+/* Hover State */
 .creation-row input[type="submit"]:hover,
 .creation-row button:hover {