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
Tags: Manual revert Reverted
No edit summary
Tag: Reverted
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
{{{info|add title=Add a new Game|edit title=Edit Game}}}


/* --- TABLE FIXES (Keep these) --- */
{{{for template|Game}}}
.fullwidth { width: 100% !important; }
<div style="max-width: 900px; margin: 0 auto; background: #fff; border: 1px solid #ccc; font-family: sans-serif; color: #333; font-size: 13px;">
.nowrap { white-space: nowrap; }


table.wikitable th a,
<div style="background: #2a4b8d; color: white; padding: 10px 15px;">
table.wikitable th.headerSort a {
  <span style="font-size: 1.2em; font-weight: bold;">Game Database Entry</span>
    pointer-events: none !important;
</div>
    cursor: pointer !important;
    color: black !important;
    text-decoration: none !important;
}


/* Hide columns helpers */
<div style="padding: 15px; background: #f9f9f9; border-bottom: 1px solid #ddd;">
.hide-Genre .col-genre,
  <div style="display: flex; gap: 15px; margin-bottom: 10px;">
.hide-Platform .col-platform,
    <div style="flex: 2;">
.hide-Mode .col-mode,
      '''Game Name:'''<br>
.hide-Players .col-players {
      {{{field|Name|input type=text|placeholder=Official Title|class=form-control|style=width:100%}}}
     display: none !important;
    </div>
}
     <div style="flex: 1;">
      '''Release Date:'''<br>
      {{{field|Release date|input type=datepicker|date format=dd.mm.yy}}}
    </div>
  </div>


/* --- 1. FORM INPUT FIXES (Series & Date) --- */
  <div style="display: flex; gap: 15px; margin-bottom: 10px;">
/* Force the Series Box (Token Field) to be full width */
     <div style="flex: 1;">
.select2-container {
      '''Developer:'''<br>{{{field|Developer|input type=text|autocomplete|size=20}}}
    width: 100% !important;
    </div>
    max-width: 100% !important;
     <div style="flex: 1;">
     box-sizing: border-box;
      '''Publisher:'''<br>{{{field|Publisher|input type=text|autocomplete|size=20}}}
}
     </div>
.select2-container .select2-selection--multiple {
     <div style="flex: 1;">
     min-height: 35px;
      '''Series:'''<br>{{{field|Series|input type=tokens|values from category=Series|placeholder=e.g. Half-Life|size=20}}}
     border: 1px solid #ccc !important;
     </div>
     border-radius: 3px !important;
  </div>
    background: #fff;
     padding: 4px;
}


/* Force the Date Picker to match standard inputs */
  <div style="display: flex; gap: 15px; align-items: flex-end;">
input.hasDatepicker {
     <div style="flex: 1;">
    width: 100% !important;
      '''Cover Image:'''<br>{{{field|Image|uploadable}}}
    box-sizing: border-box;  
     </div>
     height: 35px;
     <div style="flex: 1;">
     padding: 5px 8px;
      '''Version:'''<br>{{{field|Current version|input type=text|size=15}}}
     border: 1px solid #ccc;
     </div>
    border-radius: 3px;
  </div>
     font-family: sans-serif;
</div>
}


/* Force standard Text Inputs to look uniform */
<div style="padding: 15px; background: #ffffff; border-bottom: 1px solid #ddd;">
.game-form input[type="text"] {
  <div style="font-weight: bold; color: #2a4b8d; border-bottom: 1px solid #eee; padding-bottom: 2px; margin-bottom: 8px;">Gameplay & Genre</div>
    box-sizing: border-box;
    height: 35px;
    padding: 5px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
}


/* --- 2. CHECKBOX GRID (The "Invisible Comma" Fix) --- */
  <div style="margin-bottom: 12px;">
    <strong>Genre:</strong>
    <div class="checkbox-grid">
    {{{field|Genre|input type=checkboxes|values=Action, Adventure, MMO, Racing, RPG, Shooter, Simulation, Sports, Strategy|delimiter=}}}
    </div>
  </div>


.checkbox-grid {
  <div style="margin-bottom: 12px;">
    display: flex;
     <strong>Setting:</strong>
     flex-wrap: wrap;
     <div class="checkbox-grid">
     gap: 8px;
     {{{field|Setting|input type=checkboxes|values=Modern Era, Fantasy, Sci-Fi, Historical, Post-Apocalyptic|delimiter=}}}
     width: 100%;
     </div>
    margin-top: 5px;
  </div>
     /* MAGIC TRICK: Set font size to 0 to hide commas and spaces */
    font-size: 0 !important;
    line-height: 0;
}


/* Restore the font size for the actual checkbox box */
  <div>
.checkbox-grid .checkboxLabel {
     <strong>Modes:</strong>
     display: flex !important;
     <div class="checkbox-grid">
     align-items: center;
     {{{field|Has game mode|input type=checkboxes|values=Singleplayer, Multiplayer, Co-op|delimiter=}}}
     background: #fcfcfc;
     </div>
    border: 1px solid #ccc;
  </div>
    padding: 4px 8px;
</div>
    border-radius: 3px;
     height: 28px;
   
    /* RESTORE TEXT VISIBILITY */
    font-size: 13px !important;
    line-height: normal;


    /* FORCE EXACT WIDTH (The Grid Look) */
<div style="padding: 15px; background: #f9f9f9; border-bottom: 1px solid #ddd;">
    width: 150px;  
  <div style="font-weight: bold; color: #2a4b8d; border-bottom: 1px solid #eee; padding-bottom: 2px; margin-bottom: 8px;">Technical Specs</div>
    box-sizing: border-box;
}


.checkbox-grid .checkboxLabel:hover {
  <div style="margin-bottom: 12px;">
     background: #f0f8ff;
    <strong>Original Platforms:</strong>
    border-color: #3366cc;
     <div class="checkbox-grid" style="background: #fff; border: 1px solid #ddd; padding: 5px;">
    cursor: pointer;
      {{{field|Platform|input type=checkboxes|values=MS-DOS, Windows 95, Windows 98, Windows XP, Windows 7, Windows 10, Windows 11, Linux, Mac OS|delimiter=}}}
}
    </div>
  </div>


/* Hide line breaks */
  <div style="margin-bottom: 10px;">
.checkbox-grid br { display: none !important; }
    '''System Requirements:'''<br>
    {{{field|System requirements|input type=textarea|rows=2|style=width: 100%; box-sizing: border-box; font-family: monospace;}}}
  </div>
 
  <div>
    '''Multiplayer Tools:'''<br>
    {{{field|Multiplayer tools|input type=tokens|delimiter=;|size=50}}}
  </div>
</div>
 
<div style="padding: 15px; background: #ffffff;">
  <div style="display: flex; gap: 15px;">
    <div style="flex: 1;">
      '''Store Links:'''<br>{{{field|Store links|input type=text|size=50}}}
    </div>
    <div style="flex: 1;">
      '''Community Links:'''<br>{{{field|Community|input type=text|size=50}}}
    </div>
  </div>
</div>
 
<div style="padding: 10px 15px; background: #eee; border-top: 1px solid #ccc; text-align: right;">
  {{{standard input|save}}}
  <span style="margin-left: 10px;">{{{standard input|preview}}}</span>
  <span style="margin-left: 10px;">{{{standard input|cancel}}}</span>
</div>
 
</div>
{{{end template}}}

Revision as of 12:44, 10 February 2026

{{{info|add title=Add a new Game|edit title=Edit Game}}}

{{{for template|Game}}}
<div style="max-width: 900px; margin: 0 auto; background: #fff; border: 1px solid #ccc; font-family: sans-serif; color: #333; font-size: 13px;">

<div style="background: #2a4b8d; color: white; padding: 10px 15px;">
  <span style="font-size: 1.2em; font-weight: bold;">Game Database Entry</span>
</div>

<div style="padding: 15px; background: #f9f9f9; border-bottom: 1px solid #ddd;">
  <div style="display: flex; gap: 15px; margin-bottom: 10px;">
    <div style="flex: 2;">
      '''Game Name:'''<br>
      {{{field|Name|input type=text|placeholder=Official Title|class=form-control|style=width:100%}}}
    </div>
    <div style="flex: 1;">
      '''Release Date:'''<br>
      {{{field|Release date|input type=datepicker|date format=dd.mm.yy}}}
    </div>
  </div>

  <div style="display: flex; gap: 15px; margin-bottom: 10px;">
    <div style="flex: 1;">
      '''Developer:'''<br>{{{field|Developer|input type=text|autocomplete|size=20}}}
    </div>
    <div style="flex: 1;">
      '''Publisher:'''<br>{{{field|Publisher|input type=text|autocomplete|size=20}}}
    </div>
    <div style="flex: 1;">
      '''Series:'''<br>{{{field|Series|input type=tokens|values from category=Series|placeholder=e.g. Half-Life|size=20}}}
    </div>
  </div>

  <div style="display: flex; gap: 15px; align-items: flex-end;">
    <div style="flex: 1;">
      '''Cover Image:'''<br>{{{field|Image|uploadable}}}
    </div>
    <div style="flex: 1;">
       '''Version:'''<br>{{{field|Current version|input type=text|size=15}}}
    </div>
  </div>
</div>

<div style="padding: 15px; background: #ffffff; border-bottom: 1px solid #ddd;">
  <div style="font-weight: bold; color: #2a4b8d; border-bottom: 1px solid #eee; padding-bottom: 2px; margin-bottom: 8px;">Gameplay & Genre</div>

  <div style="margin-bottom: 12px;">
    <strong>Genre:</strong>
    <div class="checkbox-grid">
    {{{field|Genre|input type=checkboxes|values=Action, Adventure, MMO, Racing, RPG, Shooter, Simulation, Sports, Strategy|delimiter=}}}
    </div>
  </div>

  <div style="margin-bottom: 12px;">
    <strong>Setting:</strong>
    <div class="checkbox-grid">
    {{{field|Setting|input type=checkboxes|values=Modern Era, Fantasy, Sci-Fi, Historical, Post-Apocalyptic|delimiter=}}}
    </div>
  </div>

  <div>
    <strong>Modes:</strong>
    <div class="checkbox-grid">
    {{{field|Has game mode|input type=checkboxes|values=Singleplayer, Multiplayer, Co-op|delimiter=}}}
    </div>
  </div>
</div>

<div style="padding: 15px; background: #f9f9f9; border-bottom: 1px solid #ddd;">
  <div style="font-weight: bold; color: #2a4b8d; border-bottom: 1px solid #eee; padding-bottom: 2px; margin-bottom: 8px;">Technical Specs</div>

  <div style="margin-bottom: 12px;">
    <strong>Original Platforms:</strong>
    <div class="checkbox-grid" style="background: #fff; border: 1px solid #ddd; padding: 5px;">
      {{{field|Platform|input type=checkboxes|values=MS-DOS, Windows 95, Windows 98, Windows XP, Windows 7, Windows 10, Windows 11, Linux, Mac OS|delimiter=}}}
    </div>
  </div>

  <div style="margin-bottom: 10px;">
    '''System Requirements:'''<br>
    {{{field|System requirements|input type=textarea|rows=2|style=width: 100%; box-sizing: border-box; font-family: monospace;}}}
  </div>

  <div>
    '''Multiplayer Tools:'''<br>
    {{{field|Multiplayer tools|input type=tokens|delimiter=;|size=50}}}
  </div>
</div>

<div style="padding: 15px; background: #ffffff;">
  <div style="display: flex; gap: 15px;">
    <div style="flex: 1;">
      '''Store Links:'''<br>{{{field|Store links|input type=text|size=50}}}
    </div>
    <div style="flex: 1;">
      '''Community Links:'''<br>{{{field|Community|input type=text|size=50}}}
    </div>
  </div>
</div>

<div style="padding: 10px 15px; background: #eee; border-top: 1px solid #ccc; text-align: right;">
  {{{standard input|save}}} 
  <span style="margin-left: 10px;">{{{standard input|preview}}}</span> 
  <span style="margin-left: 10px;">{{{standard input|cancel}}}</span>
</div>

</div>
{{{end template}}}
Retrieved from "https://www.pcgamingshelter.eu/w/index.php?title=MediaWiki:Common.css&oldid=299"
Powered by MediaWiki
Powered by Semantic MediaWiki