MediaWiki:Mobile.css: Difference between revisions

Latest revision as of 14:57, 8 June 2025

/* All CSS here will be loaded for users of the mobile site */
/* Citizen fixes */
/* Dark Mode fixes */
.skin-citizen-dark .citizen-header {
  background-color: #2b2b2b;
  border: unset;
}
.skin-citizen-dark .citizen-footer {
  background: unset;
  border: unset;
}
.skin-citizen-dark .spoiler-text {
  background: rgba(246, 246, 246, 0.23);
}
.skin-citizen-dark table.ambox {
  background: rgba(151, 144, 144, 0.3);
}

/* Use full-width */
body {
    --width-layout: 100vw;
}

/* Hide "From Portal Wiki" */
body #siteSub {
    display: none;
}

/* Body */
body.ns-0 #siteSub {
  display: none;
}

/* Left sidebar */
.citizen-header {
  background-color: #f6f6f6;
  border-right: 1px solid #a7d7f9;
}

/* Wiki logo */
.mw-logo.citizen-header__button {
  background-image: url(https://i1.theportalwiki.net/img/thumb/6/6a/VWN_P.png/80px-VWN_P.png);
  background-size: 40px;
  background-repeat: no-repeat;
  background-position: center;
}
.mw-logo.citizen-header__button > img {
  display: none;
}

/* Footer */
.citizen-footer {
  padding-bottom: 0;
  margin-bottom: 0;
  background-color: #f6f6f6;
  border-top: 1px solid #a7d7f9;
}
.citizen-footer .citizen-footer__content {
  align-items: center;
  align-content: center;
  justify-content: space-evenly;
}
.citizen-footer .citizen-footer__content #footer-places {
  column-count: 2;
  gap: 0;
}
.citizen-footer .citizen-footer__bottom {
  border: initial;
}
.citizen-footer .mw-logo-wordmark {
  display: none;
}

/* Images */
/*
 * Disable hover zoom effect
 * Source: https://theapplewiki.com/wiki/MediaWiki:Citizen.css
 */
.citizen-body a.image:hover:not(.lazy):not(.new) > img,
figure[typeof~="mw:File"] > a:first-child:hover:not(.lazy):not(.new) img,
figure[typeof~="mw:File/Frameless"] > a:first-child:hover:not(.lazy):not(.new) img,
figure[typeof~="mw:File/Thumb"] > a:first-child:hover:not(.lazy):not(.new) img,
figure[typeof~="mw:File/Frame"] > a:first-child:hover:not(.lazy):not(.new) img,
figure[typeof~="mw:File"] > a:first-child:hover:not(.lazy):not(.new) source,
figure[typeof~="mw:File/Frameless"] > a:first-child:hover:not(.lazy):not(.new) source,
figure[typeof~="mw:File/Thumb"] > a:first-child:hover:not(.lazy):not(.new) source,
figure[typeof~="mw:File/Frame"] > a:first-child:hover:not(.lazy):not(.new) source,
.fullImageLink > a:hover > img {
  transform: initial;
}

/* Page fixes */
/* Main Page styling */
.page-Main_Page .mw-side,
.page-Main_Page .firstHeading {
  display: none;
}
.page-Main_Page .citizen-body-header--sticky h1#firstHeading {
  display: block;
}
.page-Main_Page .citizen-body-container {
  grid-template-areas: "content" "header" "footer";
}

.mp-content-table {
  width: 100%;
  background: #fefeff;
  border: 1px solid #9999cc;
  margin: 0.5em 0;
}
.mp-content-table ul > li a.external.text,
.mp-content-table ul > li > b > a {
  white-space: nowrap;
}

.mp-content-header {
  font-size: 140%;
  padding: 0.5em 0;
  background: #c0dfff;
  border: none;
  border-bottom: 1px solid #9999cc;
}

.mp-content-body {
  padding: 0.5em;
}

.mp-sectionblock {
  background: url(https://i2.theportalwiki.net/img/3/35/Main_Page_gradient.png) repeat-x bottom;
}

.mp-content-header-alt,
.mp-title-gradient {
  background: url(https://i2.theportalwiki.net/img/9/95/Main_page_header_gradient.png) repeat-x;
  padding-top: 0;
  padding-bottom: 0;
}

.mp-content-header-alt {
  font-size: 140%;
  font-weight: bold;
  border: none;
  border-bottom: 1px solid #9999cc;
  text-align: left;
  color: #000;
  padding-left: 0.75em;
  margin: -0.5em -0.5em 0;
}

/* Audio links */
a.internal[href$=".mp3"], a.internal[href$=".wav"], a.internal[href$=".ogg"] {
  background: url("https://i2.theportalwiki.net/img/4/46/Icon_external_link_wav.png") center right no-repeat;
  padding-right: 16px;
}

/* wikitable/prettytable */
table.wikitable, table.prettytable {
  background: #fefeff;
  border: 1px #9999cc solid;
}
table.wikitable th,
table.wikitable td, table.prettytable th,
table.prettytable td {
  background-color: #fefeff;
  white-space: inherit;
  border: 1px solid #a2a9b1;
  padding: 0.2em 0.4em;
}
table.wikitable th, table.prettytable th {
  text-align: center;
  white-space: inherit;
}
table.wikitable caption, table.prettytable caption {
  margin-left: inherit;
  margin-right: inherit;
  font-weight: bold;
}
table.wikitable .subheader, table.prettytable .subheader {
  color: black;
  background: #c9dcff;
  text-align: left;
}
table.wikitable .header, table.prettytable .header {
  color: black;
  background-color: #c9dcff;
}
table.wikitable .border, table.prettytable .border {
  border: 1px #9999cc solid;
}
table.wikitable .borderless, table.prettytable .borderless {
  border: 0px;
}
table.wikitable .borderless td,
table.wikitable .borderless th, table.prettytable .borderless td,
table.prettytable .borderless th {
  border: 0px;
}
table.wikitable code, table.prettytable code {
  background-color: transparent;
}

/* Template fixes */
/* Spoilers */
.spoiler-inline {
  color: transparent !important;
  background-color: black !important;
  pointer-events: none;
}
.spoiler-inline a {
  color: transparent !important;
  background-color: black !important;
}
.spoiler-inline a.image {
  display: none !important;
}
.spoiler-inline a.internal {
  background: none;
  padding-right: 0px;
}

.spoiler-text {
  background: rgba(246, 246, 246, 0.54);
}

/* Ambox styling */
table.ambox {
  border: 1px solid #9999cc;
  background: #fbfbfb;
  margin: 0 10%;
}
table.ambox + table.ambox {
  margin-top: -1px;
}
table.ambox .ambox-image {
  padding: 2px 0 2px 0.5em;
}
table.ambox .ambox-text {
  padding: 0.25em 0.5em;
}
table.ambox th.ambox-text,
table.ambox td.ambox-text {
  border: none;
  padding: 0.25em 0.9em;
  width: 100%;
}
table.ambox td.ambox-image {
  border: none;
  padding: 2px 0 2px 0.9em;
  text-align: center;
}
table.ambox td.ambox-image2 {
  border: none;
  padding: 2px 0.9em 2px 0;
  text-align: center;
}
table.ambox td.ambox-empty-cell {
  border: none;
  padding: 0;
  width: 1px;
}
table.ambox-notice,
table.ambox td.ambox-notice {
  border-left: 10px solid #1e90ff;
}
table.ambox-notice-2,
table.ambox td.ambox-notice-2 {
  border-left: 10px solid #3f6180;
}
table.ambox-delete, table.ambox-serious {
  background: #fee;
  border: 1px solid #bb7070;
}
table.ambox td.ambox-delete,
table.ambox td.ambox-serious {
  border-left: 10px solid #b22222;
}
table.ambox-content,
table.ambox td.ambox-content {
  border-left: 10px solid #f28500;
}
table.ambox-style,
table.ambox td.ambox-style {
  border-left: 10px solid #ffcc00;
}
table.ambox-images,
table.ambox td.ambox-images {
  border-left: 10px solid #000000;
}
table.ambox-protection,
table.ambox td.ambox-protection {
  border-left: 10px solid #bba;
}
table.ambox-good,
table.ambox td.ambox-good {
  border-left: 10px solid #73d216;
}

/* Backpack item styling */
.quality-unique {
  color: #ffd700;
}

.quality-vintage {
  color: #476291;
}

.quality-genuine {
  color: #4d7455;
}

/* Infobox styling */
.infobox {
  background: #ffffff;
  width: 256px;
  float: right;
  clear: right;
  margin: 0.5em 0 1em 0.5em;
  border: 1px solid black;
  padding: 2px;
}
.infobox .section {
  background: #c0dfff;
  color: black;
  font-weight: bold;
  font-size: 1.2em;
  text-align: center;
  padding: 3px;
  clear: both;
}
.infobox hr {
  margin: 1px;
}

/* Test Chamber styling */
.testchamber {
  background: url(https://i2.theportalwiki.net/img/c/c7/Test_Chamber_Infobox_middle.png) repeat-y;
  display: block;
  float: right;
  margin: 1em 0 1em 16px;
}
.testchamber.dirty {
  background: url(https://i2.theportalwiki.net/img/f/fd/Test_Chamber_Infobox_dirty_middle.png) repeat-y;
}
.testchamber.dirty .testchamber-header {
  background: url(https://i2.theportalwiki.net/img/7/71/Test_Chamber_Infobox_dirty_top.png) no-repeat;
}
.testchamber.dirty .testchamber-footer {
  background: url(https://i1.theportalwiki.net/img/4/4d/Test_Chamber_Infobox_dirty_bottom.png) no-repeat;
}
.testchamber .testchamber-header {
  background: url(https://i2.theportalwiki.net/img/8/84/Test_Chamber_Infobox_top.png) no-repeat;
  width: 326px;
  height: 46px;
  margin-bottom: 24px;
}
.testchamber .testchamber-footer {
  background: url(https://i2.theportalwiki.net/img/9/91/Test_Chamber_Infobox_bottom.png) no-repeat;
  width: 326px;
  height: 46px;
  margin-top: 24px;
}
.testchamber .testchamber-valvetitle {
  display: block;
  font-style: italic;
  font-size: 1em;
}
.testchamber .testchamber-content {
  margin-left: 48px;
  margin-right: 12px;
  margin-top: -32px;
}
.testchamber hr {
  width: 264px;
  color: #000000 !important;
  background-color: #000000 !important;
  height: 2px !important;
  margin: 0.5em 0;
}
.testchamber code {
  background-color: transparent !important;
}
.testchamber .testchamber-meter {
  background: url(https://i2.theportalwiki.net/img/f/fc/Chamber_progress.png) repeat-x;
}
.testchamber .testchamber-progress {
  clear: both;
  margin-top: 6px;
}
.testchamber .testchamber-screenshot {
  margin-bottom: 4px;
  margin-top: 7px;
}
.testchamber .testchamber-icons {
  margin-left: -3px;
  margin-right: -3px;
  margin-bottom: -3px;
}
.testchamber .testchamber-icons img {
  margin: 3px;
}
.testchamber.testchamber-off, .testchamber.testchamber-off .testchamber-header, .testchamber.testchamber-off .testchamber-footer {
  background-position: -326px 0px !important;
}
.testchamber.testchamber-display1-off .testchamber-display1, .testchamber.testchamber-display2-off .testchamber-display2 {
  opacity: 0;
}

/* Old Aperture Test Chamber styling */
.old-aperture-infobox {
  width: 250px;
  height: 709px;
  float: right;
  clear: right;
  margin: 0.5em 0 1em 0.5em;
  border: 1px solid black;
  position: relative;
  background: url(https://i1.theportalwiki.net/img/0/07/OldApertureNav_Background.png) top left no-repeat;
}
.old-aperture-infobox .old-aperture-location,
.old-aperture-infobox .old-aperture-mapname {
  display: block;
  position: absolute;
}
.old-aperture-infobox .old-aperture-mapname {
  color: #f9f9f9;
  bottom: 2px;
  right: 2px;
}
.old-aperture-infobox .old-aperture-location-active .old-aperture-inactive {
  display: none;
}
.old-aperture-infobox .old-aperture-location-inactive .old-aperture-active {
  display: none;
}