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
No edit summary
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; }
Line 21: Line 21:
}
}


/* --- RIGID CHECKBOX GRID (The Fix) --- */
/* --- FIXED CHECKBOX GRID --- */
.checkbox-grid {
 
     display: flex !important;
/* 1. Set up the grid on the wrapper span generated by Page Forms */
     flex-wrap: wrap !important;
.checkbox-grid > span {
     gap: 5px !important; /* Tighter gap */
     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%;
     width: 100%;
    margin-top: 5px;
}
}


/* The individual checkbox item */
/* 2. Style the individual items (The Checkbox + Text) */
.checkbox-grid span {
.checkbox-grid .checkboxLabel {
     display: inline-flex !important;
     display: flex !important;
     align-items: center;
     align-items: center;
   
     background: #f9f9f9;
    /* FORCE EXACT WIDTH: This aligns the columns */
     border: 1px solid #ccc;
    flex: 0 0 160px !important;
     padding: 6px 10px;
    width: 160px !important;
     border-radius: 4px;
    max-width: 160px !important;
    height: 25px;
 
    height: 28px; /* Consistent height */
     background: #ffffff;
     border: 1px solid #dcdcdc;
     padding: 0 8px;
     border-radius: 3px;
     font-size: 13px;
     font-size: 13px;
    box-sizing: border-box; /* vital for alignment */
     white-space: nowrap;
     white-space: nowrap;
     overflow: hidden;
     overflow: hidden;
}
}


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


/* Kill the invisible line breaks */
/* 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 12:22, 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;
}