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 5: Line 5:
.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) --- */
/* --- RIGID CHECKBOX GRID (The Fix) --- */
/* This container makes items flow left-to-right like text or tags */
.checkbox-grid {
.checkbox-grid {
     display: flex !important;
     display: flex !important;
     flex-wrap: wrap !important;
     flex-wrap: wrap !important;
     gap: 8px !important;       /* Clean space between boxes */
     gap: 5px !important; /* Tighter gap */
     width: 100%;
     width: 100%;
     margin-top: 5px;
     margin-top: 5px;
}
}


/* The individual checkbox box */
/* The individual checkbox item */
.checkbox-grid > span {
.checkbox-grid span {
     display: inline-flex !important; /* Force items to be inline blocks */
     display: inline-flex !important;
     align-items: center;
     align-items: center;
    background: #f9f9f9;
    border: 1px solid #ccc;
    padding: 6px 10px;
    border-radius: 4px;
      
      
     /* Alignment Logic: */
     /* FORCE EXACT WIDTH: This aligns the columns */
     flex: 1 0 160px; /* Grow to fill space, but never shrink below 160px */
     flex: 0 0 160px !important;  
     max-width: 250px; /* Don't get too wide on huge screens */
    width: 160px !important;
     height: 30px; /* Fixed height for perfect alignment */
     max-width: 160px !important;
 
    height: 28px; /* Consistent height */
     background: #ffffff;
    border: 1px solid #dcdcdc;
    padding: 0 8px;
    border-radius: 3px;
    font-size: 13px;
    box-sizing: border-box; /* vital for alignment */
    white-space: nowrap;
     overflow: hidden;
     overflow: hidden;
    white-space: nowrap;
}
}


/* Hover effect */
/* Hover effect */
.checkbox-grid > span:hover {
.checkbox-grid span:hover {
     background: #fff;
     background: #f0f8ff;
     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 */
/* Kill the invisible line breaks */
.checkbox-grid br,  
.checkbox-grid br,  
.checkbox-grid p {
.checkbox-grid p {
     display: none !important;
     display: none !important;
}
}

Revision as of 12:20, 10 February 2026

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

/* --- TABLE FIXES --- */
.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;
}

/* --- RIGID CHECKBOX GRID (The Fix) --- */
.checkbox-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important; /* Tighter gap */
    width: 100%;
    margin-top: 5px;
}

/* The individual checkbox item */
.checkbox-grid span {
    display: inline-flex !important;
    align-items: center;
    
    /* FORCE EXACT WIDTH: This aligns the columns */
    flex: 0 0 160px !important; 
    width: 160px !important;
    max-width: 160px !important;

    height: 28px; /* Consistent height */
    background: #ffffff;
    border: 1px solid #dcdcdc;
    padding: 0 8px;
    border-radius: 3px;
    font-size: 13px;
    box-sizing: border-box; /* vital for alignment */
    white-space: nowrap;
    overflow: hidden;
}

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

/* Kill the invisible line breaks */
.checkbox-grid br, 
.checkbox-grid p {
    display: none !important;
}