MediaWiki:Common.css: Difference between revisions

Revision as of 13:00, 10 February 2026

/* CSS placed here will be applied to all skins */

/* --- TABLE FIXES (Keep these) --- */
.fullwidth { width: 100% !important; }
.nowrap { white-space: nowrap; }

table.wikitable th a,
table.wikitable th.headerSort a {
    pointer-events: none !important;
    cursor: pointer !important;
    color: black !important;
    text-decoration: none !important;
}

/* Hide columns helpers */
.hide-Genre .col-genre, 
.hide-Platform .col-platform, 
.hide-Mode .col-mode,
.hide-Players .col-players {
    display: none !important;
}

/* --- FIXED CHECKBOX GRID --- */

/* 1. Set up the grid on the wrapper span generated by Page Forms */
.checkbox-grid > span {
    display: grid !important;
    /* Create nice even columns, min 150px wide */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; 
    gap: 8px !important;
    width: 100%;
}

/* 2. Style the individual items (The Checkbox + Text) */
.checkbox-grid .checkboxLabel {
    display: flex !important;
    align-items: center;
    background: #f9f9f9;
    border: 1px solid #ccc;
    padding: 6px 10px;
    border-radius: 4px;
    height: 25px;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
}

/* 3. Hover Effect */
.checkbox-grid .checkboxLabel:hover {
    background: #fff;
    border-color: #3366cc;
    cursor: pointer;
}

/* 4. Hide invisible <br> tags and delimiters that break layout */
.checkbox-grid br {
    display: none !important;
}

@@ Line 21: / Line 21: @@
 }
-/* --- FORM INPUT FIXES (Fixes strange widths) --- */
+/* --- FIXED CHECKBOX GRID --- */
-/* 1. Force Text Inputs, Date Pickers, and Selects to be 100% Width */
+/* 1. Set up the grid on the wrapper span generated by Page Forms */
-.game-form input[type="text"],
+.checkbox-grid > span {
-.game-form input.hasDatepicker,
+     display: grid !important;
-.game-form .pf-form-field input {
+     /* Create nice even columns, min 150px wide */
-     width: 100% !important;
+     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
-     box-sizing: border-box !important;
+     gap: 8px !important;
-    height: 36px !important;
-    padding: 6px 10px !important;
-    border: 1px solid #ccc !important;
-    border-radius: 4px !important;
-    font-family: sans-serif !important;
-    font-size: 13px !important;
-    box-shadow: none !important;
-    margin: 0 !important;
-}
-/* 2. Fix the Series Token Box (Select2) */
-.select2-container {
-     width: 100% !important;
-    display: block !important;
-}
-.select2-container .select2-selection--multiple {
-    min-height: 36px !important;
-    border: 1px solid #ccc !important;
-    border-radius: 4px !important;
-     background: #fff;
-    padding: 4px !important;
-}
-/* --- CHECKBOX GRID (The Crash-Free, Aligned Fix) --- */
-/* 1. The Container: Hide the commas by setting font-size to 0 */
-.checkbox-grid {
-    display: block;
      width: 100%;
-    font-size: 0 !important; /* Hides the commas */
-    line-height: 0 !important;
-    margin-top: 5px;
 }
-/* 2. The Items: Restore them as visible blocks */
+/* 2. Style the individual items (The Checkbox + Text) */
-.checkbox-grid span {
+.checkbox-grid .checkboxLabel {
-     display: inline-block !important; /* Sits items side-by-side */
+     display: flex !important;
-     vertical-align: top;
+     align-items: center;
+     background: #f9f9f9;
-    /* WIDTH: 32% creates 3 columns */
+     border: 1px solid #ccc;
-    width: 32%;
+    padding: 6px 10px;
+     border-radius: 4px;
-    margin-right: 1%;
+     height: 25px;
-    margin-bottom: 8px;
+     font-size: 13px;
+     white-space: nowrap;
-    /* RESTORE TEXT VISIBILITY (Critical!) */
+    overflow: hidden;
-    font-size: 13px !important;
-    line-height: normal !important;
-    /* Box Styling */
-     background: #fcfcfc;
-     border: 1px solid #ddd;
-     border-radius: 3px;
-     padding: 6px 8px;
-     box-sizing: border-box;
-     white-space: normal !important; /* Allow wrapping */
 }
-/* 3. The Labels inside */
+/* 3. Hover Effect */
-.checkbox-grid label {
+.checkbox-grid .checkboxLabel:hover {
-    margin-left: 5px;
+     background: #fff;
-    cursor: pointer;
-    font-weight: normal;
-    display: inline; /* Ensure label sits next to checkbox */
-}
-/* 4. Hover Effect */
-.checkbox-grid span:hover {
-     background: #f0f8ff;
      border-color: #3366cc;
      cursor: pointer;
 }
-/* 5. Hide line breaks */
+/* 4. Hide invisible <br> tags and delimiters that break layout */
-.checkbox-grid br { display: none !important; }
+.checkbox-grid br {
+     display: none !important;
-/* --- FIX INPUT BOX ALIGNMENT --- */
-/* Target both standard Text inputs and the Datepicker inside our form */
-.game-form input[type="text"],
-.game-form input.hasDatepicker {
-     /* 1. Force exact same height */
-    height: 38px !important;
-    /* 2. Force exact same width logic */
-    width: 100% !important;
-    box-sizing: border-box !important; /* Critical: Includes padding in width */
-    /* 3. Match visual style */
-    padding: 6px 10px !important;
-    border: 1px solid #ccc !important;
-    border-radius: 4px !important;
-    margin: 0 !important;
-    font-family: sans-serif !important;
-    font-size: 13px !important;
-    line-height: normal !important;
-    box-shadow: none !important;
 }