MediaWiki:Common.css

From AoW: Planetfall
Revision as of 09:07, 30 May 2020 by SolSys (talk | contribs) (Created page with "CSS placed here will be applied to all skins: RWD test: hide options: @media only screen and (max-width: 600px) { .hides {display: none;} } @media only scr...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

Note: After saving, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/* CSS placed here will be applied to all skins */


/* RWD test */
/* hide options */
@media only screen and (max-width: 600px) {
  .hides {display: none;}
}

@media only screen and (max-width: 1200px) {
  .hidem {display: none;}
}

@media only screen and (min-width: 1201px) {
  .hidel {display: none;}
}

/* Grid layout test */
* {
/*  box-sizing: border-box; */
}

/* grid container (large screen) */
.grid-container {
  display: grid;
  grid-template-areas: 
    'header header header header header header' 
    'left middle middle middle middle right' 
    'left middle2 middle2 middle2 middle2 right' 
    'left middle3 middle3 middle3 middle3 right' 
    'left footer footer footer footer footer';
} 

/* grid container (medium screen) */
@media only screen and (max-width: 1200px) {
  .grid-container  {
    grid-template-areas: 
    'header header header header header header' 
    'left middle middle middle middle middle ' 
    'left middle2 middle2 middle2 middle2 middle2 ' 
    'left middle3 middle3 middle3 middle3 middle3 ' 
    'left footer footer footer footer footer';
  }
}

/* grid container (small screen) */
@media only screen and (max-width: 600px) {
  .grid-container  {
    grid-template-areas: 
      'header header header header header header' 
      'middle middle middle middle middle middle' 
      'middle2 middle2 middle2 middle2 middle2 middle2' 
      'left left left left left left' 
      'middle3 middle3 middle3 middle3 middle3 middle3' 
      'footer footer footer footer footer footer';
  }
}

/* grid area location classes */
.header {
  grid-area: header;
}
.footer {
  grid-area: footer;
}
.left {
  grid-area: left;
}
.right {
  grid-area: right;
}
.middle {
  grid-area: middle;
}
.middle2 {
  grid-area: middle2;
}
.middle3 {
  grid-area: middle3;
}

.gridBG {
	background: #3c5a6e url(/images/a/ad/EU4_MainBG.jpg) repeat left center;
}