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; } | |||
/* | /* Disable links in headers for sorting */ | ||
table.wikitable th a, | table.wikitable th a, | ||
table.wikitable th.headerSort a { | table.wikitable th.headerSort a { | ||
pointer-events: none !important; | pointer-events: none !important; | ||
cursor: pointer !important; | cursor: pointer !important; | ||
color: black !important; | color: black !important; | ||
text-decoration: none !important; | text-decoration: none !important; | ||
} | } | ||
/* Hide columns | /* Hide columns helpers */ | ||
.hide-Genre .col-genre, | .hide-Genre .col-genre, | ||
.hide-Platform .col-platform, | .hide-Platform .col-platform, | ||
| Line 30: | Line 22: | ||
} | } | ||
/* --- | /* --- FLEXBOX CHECKBOX SYSTEM (THE FIX) --- */ | ||
/* This | /* This container makes items flow left-to-right like text or tags */ | ||
.checkbox-grid { | .checkbox-grid { | ||
display: | display: flex !important; | ||
flex-wrap: wrap !important; | |||
gap: 8px !important; /* Clean space between boxes */ | |||
gap: | |||
width: 100%; | width: 100%; | ||
margin-top: 5px; | margin-top: 5px; | ||
} | } | ||
/* | /* 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: # | background: #f9f9f9; | ||
border: 1px solid # | border: 1px solid #ccc; | ||
padding: | padding: 6px 10px; | ||
border-radius: | 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; | overflow: hidden; | ||
white-space: nowrap; | |||
} | } | ||
/* Hover effect | /* Hover effect */ | ||
.checkbox-grid span:hover { | .checkbox-grid > span:hover { | ||
background: # | 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 */ | ||
.checkbox-grid br, | |||
.checkbox-grid | .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;
}
