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: Manual revert
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */


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


/* Disable links in headers for sorting */
table.wikitable th a,
table.wikitable th a,
table.wikitable th.headerSort a {
table.wikitable th.headerSort a {
Line 22: Line 21:
}
}


/* --- FLEXBOX CHECKBOX SYSTEM (THE FIX) --- */
/* --- FIXED CHECKBOX GRID --- */
/* This container makes items flow left-to-right like text or tags */
 
.checkbox-grid {
/* 1. Set up the grid on the wrapper span generated by Page Forms */
     display: flex !important;
.checkbox-grid > span {
     flex-wrap: wrap !important;
     display: grid !important;
     gap: 8px !important;       /* Clean space between boxes */
     /* Create nice even columns, min 150px wide */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;  
     gap: 8px !important;
     width: 100%;
     width: 100%;
    margin-top: 5px;
}
}


/* The individual checkbox box */
/* 2. Style the individual items (The Checkbox + Text) */
.checkbox-grid > span {
.checkbox-grid .checkboxLabel {
     display: inline-flex !important; /* Force items to be inline blocks */
     display: flex !important;
     align-items: center;
     align-items: center;
     background: #f9f9f9;
     background: #f9f9f9;
Line 40: Line 40:
     padding: 6px 10px;
     padding: 6px 10px;
     border-radius: 4px;
     border-radius: 4px;
      
     height: 25px;
    /* Alignment Logic: */
     font-size: 13px;
    flex: 1 0 160px; /* Grow to fill space, but never shrink below 160px */
     white-space: nowrap;
     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 */
/* 3. Hover Effect */
.checkbox-grid > span:hover {
.checkbox-grid .checkboxLabel:hover {
     background: #fff;
     background: #fff;
     border-color: #3366cc;
     border-color: #3366cc;
     cursor: pointer;
     cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
}


/* Fix for Page Forms invisible BR tags */
/* 4. Hide invisible <br> tags and delimiters that break layout */
.checkbox-grid br,
.checkbox-grid br {
.checkbox-grid p {
     display: none !important;
     display: none !important;
}
}

Revision as of 13:09, 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;
}