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

MediaWiki:Common.css: Difference between revisions

From PC Gaming Shelter
← Older editNewer edit →
No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
Line 1: Line 1:
/* =========================================================
/* CSS placed here will be applied to all skins */
  PAGE FORMS – HARD RESET
  ========================================================= */


/* Remove table look completely */
/* --- TABLE FIXES --- */
.formtable,
.formtable tr,
.formtable td {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* Ensure PF respects outer layout */
/* Force tables to use 100% width when this class is used */
.forminput,
.fullwidth {
.formlabel {
    display: block !important;
     width: 100% !important;
     width: 100% !important;
}
}


/* Kill PF default spacing */
/* Optional: Prevent Game Mode from wrapping onto two lines */
.formtable {
.nowrap {
     margin-bottom: 6px !important;
     white-space: nowrap;
}
}


/* =========================================================
/* STRONG FIX: Disable links in ALL sortable table headers */
  INPUT NORMALIZATION (THIS IS THE IMPORTANT PART)
table.wikitable th a,
  ========================================================= */
table.wikitable th.headerSort a {
 
     pointer-events: none !important; /* Makes clicks pass through to the sort button */
.forminput input[type="text"],
     cursor: pointer !important;     /* Shows the hand cursor for sorting */
.forminput input[type="search"],
     color: black !important;         /* Forces text to look black, not blue */
.forminput input[type="date"],
     text-decoration: none !important; /* Removes the underline */
.forminput textarea,
.forminput select {
     width: 100% !important;
     min-width: 0 !important;
     box-sizing: border-box !important;
     padding: 4px 6px;
    font-size: 13px;
}
}


/* =========================================================
/* Hide columns based on the 'hide' parameter */
  DATEPICKER FIX (Release Date)
.hide-Genre .col-genre,
  ========================================================= */
.hide-Platform .col-platform,
 
.hide-Mode .col-mode,
/* Prevent calendar button from shrinking input */
.hide-Players .col-players {
.forminput input.hasDatepicker {
     display: none !important;
    width: 100% !important;
}
 
.forminput .ui-datepicker-trigger {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
}
 
/* Wrap date field correctly */
.forminput {
     position: relative;
}
}


/* =========================================================
/* --- NEW COMPACT CHECKBOX GRID --- */
  TOKEN INPUT FIX (Series, Multiplayer Tools)
/* This forces Page Forms checkboxes into a strict Excel-like grid */
  ========================================================= */


.forminput .pfTokens {
.checkbox-grid {
    width: 100% !important;
     display: grid;
    box-sizing: border-box !important;
     /* This creates columns that are min 140px wide but stretch to fill space */
     display: block !important;
     grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));  
}
     gap: 6px;  
 
.forminput .pfTokens input {
    width: 100% !important;
    min-width: 0 !important;
     box-sizing: border-box !important;
    border: none !important;
    outline: none;
}
 
/* Make tokens visually match text fields */
.forminput .pfTokens {
    border: 1px solid #aaa;
    border-radius: 3px;
    padding: 2px 4px;
    background: #fff;
}
 
/* =========================================================
  FILE UPLOAD FIX
  ========================================================= */
 
.forminput input[type="file"] {
    width: 100% !important;
    box-sizing: border-box !important;
}
 
/* =========================================================
  FLEX ROW SAFETY (THIS FIXES YOUR EXACT ISSUE)
  ========================================================= */
 
/* Ensure PF fields don't shrink in flex containers */
div[style*="display: flex"] .forminput {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
 
/* =========================================================
  CHECKBOX GRID (YOUR EXISTING SYSTEM, STABLE)
  ========================================================= */
 
.checkbox-grid > span {
    display: grid !important;
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
     gap: 8px !important;
     width: 100%;
     width: 100%;
    margin-top: 5px;
}
}


.checkbox-grid .checkboxLabel {
/* Style the individual checkbox items as clean boxes */
.checkbox-grid span {
     display: flex !important;
     display: flex !important;
     align-items: center;
     align-items: center;
     background: #f9f9f9;
     background: #fcfcfc;
     border: 1px solid #ccc;
     border: 1px solid #eee; /* Subtle border */
     padding: 6px 10px;
     padding: 4px 8px;
     border-radius: 4px;
     border-radius: 3px;
     height: 25px;
     font-size: 0.9em;
     font-size: 13px;
     height: 28px;       /* Force every item to be the exact same height */
     white-space: nowrap;
     white-space: nowrap; /* Prevent text from wrapping inside the box */
    overflow: hidden;
}
}


.checkbox-grid .checkboxLabel:hover {
/* Hover effect so users know where they are clicking */
     background: #fff;
.checkbox-grid span:hover {
     border-color: #2a4b8d;
     background: #f0f8ff;
     border-color: #3366cc;
     cursor: pointer;
     cursor: pointer;
}
}


/* CRITICAL FIX: Hide the invisible <br> tags Page Forms generates */
/* This removes the "staircase" effect and gaps */
.checkbox-grid br {
.checkbox-grid br {
     display: none !important;
     display: none !important;
}
/* =========================================================
  QUALITY OF LIFE
  ========================================================= */
/* Prevent weird label spacing */
.formlabel {
    margin-bottom: 3px;
    font-weight: bold;
}
/* Make everything predictable */
* {
    box-sizing: border-box;
}
}

Revision as of 13:08, 10 February 2026

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

/* --- TABLE FIXES --- */

/* Force tables to use 100% width when this class is used */
.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.headerSort a {
    pointer-events: none !important; /* Makes clicks pass through to the sort button */
    cursor: pointer !important;      /* Shows the hand cursor for sorting */
    color: black !important;         /* Forces text to look black, not blue */
    text-decoration: none !important; /* Removes the underline */
}

/* Hide columns based on the 'hide' parameter */
.hide-Genre .col-genre, 
.hide-Platform .col-platform, 
.hide-Mode .col-mode,
.hide-Players .col-players {
    display: none !important;
}

/* --- NEW COMPACT CHECKBOX GRID --- */
/* This forces Page Forms checkboxes into a strict Excel-like grid */

.checkbox-grid {
    display: grid;
    /* This creates columns that are min 140px wide but stretch to fill space */
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 
    gap: 6px; 
    width: 100%;
    margin-top: 5px;
}

/* Style the individual checkbox items as clean boxes */
.checkbox-grid span {
    display: flex !important;
    align-items: center;
    background: #fcfcfc;
    border: 1px solid #eee; /* Subtle border */
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 0.9em;
    height: 28px;       /* Force every item to be the exact same height */
    white-space: nowrap; /* Prevent text from wrapping inside the box */
    overflow: hidden;
}

/* Hover effect so users know where they are clicking */
.checkbox-grid span:hover {
    background: #f0f8ff;
    border-color: #3366cc;
    cursor: pointer;
}

/* CRITICAL FIX: Hide the invisible <br> tags Page Forms generates */
/* This removes the "staircase" effect and gaps */
.checkbox-grid br {
    display: none !important;
}
Retrieved from "https://www.pcgamingshelter.eu/w/index.php?title=MediaWiki:Common.css&oldid=313"
Powered by MediaWiki
Powered by Semantic MediaWiki