MediaWiki:Mobile.css

From the Combine OverWiki, the original Half-Life and Portal wiki
Jump to: navigation, 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 affect users of the mobile site */

/* Stripes background */
.infoboxheading, .infoboxsubheading, .article-template,
.errorbox, .warningbox, .successbox,
.alertbox, .alertbox2, .alertbox3, .alertbox4,
.navtempsec, .navtemp th {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAyCAYAAAB70nrOAAAAkUlEQVR4AdWMSwrCQBQEO9Fo1PgXjZ/7X3PkNb2ojQewoaDqMYwkfZTBEzi8GTNDCb70OgcOL5M9C7zUnIAneHiY7G6w2w/XNXiX4J0NdmqtqSgX4mgShyKufYGXmhCTEDuT2BZxbQr+MSJGIdYmsSriGgr+wRiEWJrEoogn8EeP6MUwia6wMwoh7GIUDvLHhy9BWxckqkJhEwAAAABJRU5ErkJggg==') !important;
  background-repeat: repeat-x !important;
}

/*
 * Main page
 */

#mf-home > tbody > tr {
  display: block;
}

#mf-home > tbody > tr > td {
  display: block;
}

#main-page-bubbles {
  font-size: 60%;
  table-layout: fixed;
}

.mainpageblock {
  margin-bottom: .8em;
  padding: .5em;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABACAMAAABMUIWcAAAAVFBMVEXIyMj////IyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjN8byXAAAAHHRSTlMAAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaKunIwQAAAMxJREFUeAGtytlugzAYROFTbLODWUKX9v3fs6BEhBEXvyz5u5wzKOY/Nefuvyp3n37UlLnHbxVz9y+Vu4+fagRl9JFNDKhhw+gbj4tb3zeM/mA99ah+PWD0FaOvLE+3vrxg9IX50KG6+cS0a1Ht9IbRJ2K89XiF0SMNqhkVRm8Sez2oOrX3KrVXnapAe6tSe9moMnMPtQqpvVKpnVJ5lMfoJeHKoVwIGD1g9IA/3bo/YHSP0T3uqUAV7gWjO4zuKHa3foHRC4xe8GEwD/+Gujn8M+UftQAAAABJRU5ErkJggg==') !important;
  background-repeat: repeat-x !important;
  background-color: #f0f0f0;
  border: solid 1px #999;
}

.mf-section-0 .mw-ui-icon-element {
  display: none
}

.page-Main_Page .mf-section-0 {
  display: flex;
  flex-direction: column !important;
  padding-top: 10px;
}

/*
 * Infobox
 */

.infobox { 
  position: relative;
  float: right;
  clear: right;
  /* Margins from the recent changes legend, relative to the smaller font size */
  margin-bottom: 0.5em;
  width: 100% !important;
  border: 1px solid #999999;
  font-size: smaller;
  line-height: 1.5;
}

.infoboxtable {
  width: 100%;
  display: table !important;
}

.infoboximage { 
  padding: 0;
  text-align: center;
}

.infoboxheading {
  font-size: larger;
  font-weight: bold;
  color: white;
}

.infoboxsubheading {
  text-align: left;
  font-weight: normal;
}

.infoboxlabel {
  vertical-align: top;
  width: 30% !important;
}

.infoboxcell {
  vertical-align: top;
}

.infoboxcell p, .infoboxcell ul {
  margin-top: 0;
  margin-bottom: 0;
}

/* For TimedMediaHandler, not used anymore - the player has weird vertical positioning that moves it 2px up */
/*.infoboxsound .mediaContainer {
  margin: 2px auto 0;
} */

.infoboxsound {
  text-align: center;
}

.infobox .plainlinks, .infobox .plainlinks a {
  color: white;
}

.infoboxcell .mw-collapsible ul li div {
  display: inline;
}

.infoboxcell .mw-collapsible br {
    display: none;
}

/*
 * Alert box
 */

.alertbox {
  width: 100%;
  border: 1px solid #d9d9d9;
  font-size: 9pt;
}

.alertbox2, .alertbox3 {
  width: 100% !important;
  border: 1px solid #d9d9d9;
  font-size: 9pt;
}

.alertbox, .alertbox4 {
  background-color: #cfebff;
}

.alertbox2, .alertbox3 {
  background-color: #d3ffd3;
}

.alertbox, .alertbox2 {
  font-size: x-small;
}

.alertbox th, .alertbox2 th {
  width: 100%;
  text-align: left;
}

.alertbox4 {
  margin-bottom: .8em;
  padding: .5em;
  border: solid 1px #d9d9d9;
}

/*
 * Navigation template and similar things
 */

.tableholder, .navtemp {
  background-color: #f9f9f9;
  border: 1px solid #aaa;
  padding: 5px;
}

.navtemp, .fileinfo {
  width: 100%;
}

.navtemp {
  font-size: smaller;
}

.fileinfo {
  font-size: small;
}

.navtemp th {
  color: white;
  padding: 3px 7px;
}

.navtemp th a {
  color: white;
}

.navtemp th .selflink {
  font-weight: bold; /* Not bolder so it's not too bold on category pages */
}

.navtemp td, .fileinfo {
  background-color: #e8e8e8;
}

.navtemp td {
  padding-left: 3px;
  padding-right: 3px;
}

.navtemp td.navtempsec, .fileinfo td.fileinfosec { /* .navtempsec doesn't have enough priority */
  font-weight: bold;
  white-space: nowrap;
}

.navtemp td.navtempsec {
  padding-left: 5px;
  padding-right: 5px;
}

.fileinfo td.fileinfosec {
  padding-left: 3px;
  padding-right: 3px;
  text-align: right;
}

.navtemptoggle {
  display: inline-block;
  float: right;
  font-weight: normal;
  width: 4em; /* Prevent the header from moving to the left/right when toggling */
  text-align: right;
}

.navtempshow, .navtemphide {
  cursor: pointer;
}

.navtempshow, .navtempcoll .navtemphide, .navtempcoll tr {
  display: none;
}

.navtempcoll .navtempshow {
  display: inline;
}

.navtempcoll tr:first-child {
  display: table-row;
}

/*
 * Indicator
 */

.mobile-indicator {
  margin-left: 5px;
  margin-bottom: 5px;
  margin-top: 5px;
  display: flex;
  flex-direction: row-reverse;
}

/*
 * Element order
 */

.mf-section-0 {
  display: flex;
  flex-direction: column;
}

.mobile-indicators {
  display: flex;
  justify-content: flex-end;
  order: 1;
}

.alertbox2 {
  order: 2;
}

.alertbox {
  order: 3;
}

.mf-section-0 .quote {
  order: 4;
}

.mf-section-0 > p:nth-child(4) {
  order: 5;
}

.mf-section-0 > p:nth-child(5) {
  order: 6;
}

.mf-section-0 > p:nth-child(6) {
  order: 7;
}

.mf-section-0 > p:nth-child(7) {
  order: 8;
}

.mf-section-0 > p:nth-child(8) {
  order: 9;
}

.infobox, .lab_infobox {
  order: 10;
}

/*
 * Short article management tags
 */

.alertbox tr:nth-child(2), :not(.mainpageblock) > .alertbox2 tr:nth-child(2) {
  display: none;
}

.alertbox td, :not(.mainpageblock) > .alertbox2 td {
  display: none;
}

/*
 * Bullet points
 */

.content ul {
  margin: 0.3em 0 0 1em;
  list-style: disc inside;
}

/* VWN template formatting */

.vwn-img {
  width: 50px;
}

/* Audio player size */

.audioplayer img {
  width: 50px;
  height: 50px;
  object-fit: cover;
}

/*
 * Gallery
 */

.gallery {
  text-align: center;
  margin: 0 auto !important;
}

/*
 * Disable Template:Columns
 */

.va-columns {
  display: inline;
}

/*
 * Disambigs
 */

.disambig-body {
  display: inline !important;
}

/* Grey background class for galleries */

.greybackground li.gallerybox div.thumb div a img {
  background-color: #808080;
  padding: 5px;
}

.merged-galleries {
  display: flex;
  justify-content:center;
  flex-direction: row;
  flex-wrap: wrap;
}

.merged-galleries .gallery {
  margin: 0px !important;
}