PC Gaming Shelter
An archive dedicated to preserving PC Gaming history and more

MediaWiki:Common.css: Difference between revisions

From PC Gaming Shelter
No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
Line 2: Line 2:


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


/* Force tables to use 100% width when this class is used */
/* Disable links in headers for sorting */
.fullwidth {
    width: 100% !important;
}
 
/* Optional: Prevent Game Mode from wrapping onto two lines */
.nowrap {
    white-space: nowrap;
}
 
/* STRONG FIX: Disable links in ALL sortable table headers */
table.wikitable th a,
table.wikitable th a,
table.wikitable th.headerSort a {
table.wikitable th.headerSort a {
     pointer-events: none !important; /* Makes clicks pass through to the sort button */
     pointer-events: none !important;
     cursor: pointer !important;     /* Shows the hand cursor for sorting */
     cursor: pointer !important;
     color: black !important;         /* Forces text to look black, not blue */
     color: black !important;
     text-decoration: none !important; /* Removes the underline */
     text-decoration: none !important;
}
}


/* Hide columns based on the 'hide' parameter */
/* Hide columns helpers */
.hide-Genre .col-genre,  
.hide-Genre .col-genre,  
.hide-Platform .col-platform,  
.hide-Platform .col-platform,  
Line 30: Line 22:
}
}


/* --- NEW COMPACT CHECKBOX GRID --- */
/* --- FLEXBOX CHECKBOX SYSTEM (THE FIX) --- */
/* This forces Page Forms checkboxes into a strict Excel-like grid */
/* This container makes items flow left-to-right like text or tags */
 
.checkbox-grid {
.checkbox-grid {
     display: grid;
     display: flex !important;
     /* This creates columns that are min 140px wide but stretch to fill space */
     flex-wrap: wrap !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));  
     gap: 8px !important;       /* Clean space between boxes */
     gap: 6px;  
     width: 100%;
     width: 100%;
     margin-top: 5px;
     margin-top: 5px;
}
}


/* Style the individual checkbox items as clean boxes */
/* The individual checkbox box */
.checkbox-grid span {
.checkbox-grid > span {
     display: flex !important;
     display: inline-flex !important; /* Force items to be inline blocks */
     align-items: center;
     align-items: center;
     background: #fcfcfc;
     background: #f9f9f9;
     border: 1px solid #eee; /* Subtle border */
     border: 1px solid #ccc;
     padding: 4px 8px;
     padding: 6px 10px;
     border-radius: 3px;
     border-radius: 4px;
     font-size: 0.9em;
      
     height: 28px;       /* Force every item to be the exact same height */
    /* Alignment Logic: */
     white-space: nowrap; /* Prevent text from wrapping inside the box */
    flex: 1 0 160px; /* Grow to fill space, but never shrink below 160px */
     max-width: 250px; /* Don't get too wide on huge screens */
     height: 30px; /* Fixed height for perfect alignment */
     overflow: hidden;
     overflow: hidden;
    white-space: nowrap;
}
}


/* Hover effect so users know where they are clicking */
/* Hover effect */
.checkbox-grid span:hover {
.checkbox-grid > span:hover {
     background: #f0f8ff;
     background: #fff;
     border-color: #3366cc;
     border-color: #3366cc;
     cursor: pointer;
     cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
}


/* CRITICAL FIX: Hide the invisible <br> tags Page Forms generates */
/* Fix for Page Forms invisible BR tags */
/* This removes the "staircase" effect and gaps */
.checkbox-grid br,
.checkbox-grid br {
.checkbox-grid p {
     display: none !important;
     display: none !important;
}
}

Revision as of 13:08, 10 February 2026

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

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

/* Disable links in headers for sorting */
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;
}

/* --- FLEXBOX CHECKBOX SYSTEM (THE FIX) --- */
/* This container makes items flow left-to-right like text or tags */
.checkbox-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;       /* Clean space between boxes */
    width: 100%;
    margin-top: 5px;
}

/* The individual checkbox box */
.checkbox-grid > span {
    display: inline-flex !important; /* Force items to be inline blocks */
    align-items: center;
    background: #f9f9f9;
    border: 1px solid #ccc;
    padding: 6px 10px;
    border-radius: 4px;
    
    /* Alignment Logic: */
    flex: 1 0 160px; /* Grow to fill space, but never shrink below 160px */
    max-width: 250px; /* Don't get too wide on huge screens */
    height: 30px; /* Fixed height for perfect alignment */
    overflow: hidden;
    white-space: nowrap;
}

/* Hover effect */
.checkbox-grid > span:hover {
    background: #fff;
    border-color: #3366cc;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Fix for Page Forms invisible BR tags */
.checkbox-grid br, 
.checkbox-grid p {
    display: none !important;
}