MediaWiki:Mobile.css

/* CSS placed here will affect users of the mobile site */
/* Fonts */

.nomobile {
    display: none;
}

/* Fonts */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff) format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxjqR_3kx9_hJXbbyU8S6IN0.woff) format('woff');
}

@font-face {
	font-family: 'OpenSans-Bold';
	src: local('OpenSans-Bold'), local('OpenSans-Bold'), url(/media/hydra/fonts/OpenSans-Bold.ttf) format('truetype');
}


/* Header and footer */
.header-container.header-chrome,
#mw-mf-page-center,
footer {
    background: #212121;
    color: white;
}

.client-js .toc-mobile {
    background-color: rgba(0, 0, 0, 0) !important;
    border: 1px solid #505050 !important;
}

.mw-ui-button,
.last-modified-bar #mw-mf-last-modified {
    background-color: rgba(0, 0, 0, 0);
    color: #e0e0e0;
}

.overlay-enabled, 
#content {
    background: url("https://dualuniverse.gamepedia.com/media/dualuniverse.gamepedia.com/7/75/Dualuniverse_dusk1_reverse.jpg") no-repeat fixed #000000;
    background-position: left top;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover; 
    color: white;
}

.overlay-content {
color:white;
}

a, 
div#content a.extiw,
div#content a.external {
    color: rgba(249, 236, 179, 0.9);
}

a:visited,
div#content a.extiw:visited,
div#content a.external:visited {
    color: rgba(209, 198, 150, 0.9);
}

a:hover,
div#content a.extiw:hover,
div#content a.external:hover {
    color: rgba(244, 179, 49, 0.9);
}

.thumb,
#content_wrapper .thumb,
li.gallerybox div.thumb {
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #505050;
}

.content {
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.6);  
}

.content table th {
    background-color: rgba(0, 0, 0, 0);
}

.content table td,
.content table th {
    border: none;
    padding: 3px;
}

.content table.wikitable {
    background-color: rgba(0, 0, 0, 0);
    margin: auto;
    margin-bottom: 1em;
}

.content table.wikitable > tr > th,
.content table.wikitable > tr > td,
.content table.wikitable > * > tr > th,
.content table.wikitable > * > tr > td {
    border: 1px solid #505050;
}

.content table.wikitable > tr > th,
.content table.wikitable > * > tr > th {
    background-color: #101010;
    padding: 3px;
}


/* preview, code */
pre, 
.mw-code {
    background-color: #282828;
    border-color: #505050;
}


/* hamburger menu */
#mw-mf-viewport,
nav {
    background: #212121 !important;
}

nav ul li {
    background: #181818 !important;
}

nav ul.hlist li {
    background: transparent !important;
}

nav ul li a.mw-ui-icon {
    filter: invert(100%);
}

nav ul li a {
    font-weight: bold;
}

nav ul.hlist li a {
    color: #F37F20 !important;
}

/* fix for 1.29 */
.notification-count {
   background: transparent;
}

footer .last-modified-bar {
  background: transparent;
}

ul.page-list {
  background-attachment: scroll;
  background-clip: border-box;
  background-color: black;
  background-image: none;
  background-origin: padding-box;
  background-position-x: 0;
  background-position-y: 0;
  background-repeat: repeat;
  background-size: auto auto;
  line-height: inherit;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  margin-left: 0;
}

.list-header {
  background-color: #202020;
  color: #72777d;
  font-weight: bold;
}

.page-list.side-list .list-thumb, .topic-title-list.side-list .list-thumb, .site-link-list.side-list .list-thumb {
  color: white;
  padding-bottom: 0.8em;
  padding-top: 0.8em;
}

/* editor */
.editor-overlay .wikitext-editor {
    color: #E0E0E0;
}

.editor-overlay .summary-request {
    color: #E0E0E0 !important;
}

.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame {
    background-color: rgba(0, 0, 0, 0.9) !important;
}

.ve-ui-mwSaveDialog-options {
    background-color: #212121 !important;
}

.overlay.editor-overlay,
.overlay-header-container,
.overlay-footer-container {
    background: #212121 !important;
}

.overlay-header h2 {
  color: white;
  display: table;
  font-size: 1em;
  width: 100%;
}

/* multiple fixes */
.oo-ui-buttonElement-framed.oo-ui-iconElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon,
.oo-ui-buttonElement-framed.oo-ui-iconElement.oo-ui-indicatorElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon,
.oo-ui-buttonElement.oo-ui-indicatorElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator,
.oo-ui-buttonElement.oo-ui-indicatorElement.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator,
.oo-ui-iconElement .oo-ui-iconElement-icon,
.oo-ui-iconElement.oo-ui-iconElement-icon {
    filter: invert(100%);
}

.mw-echo-ui-notificationItemWidget:hover,
.mw-echo-ui-notificationItemWidget-unread:hover {
    background-color: #181818;
}

.mw-echo-ui-notificationsInboxWidget-main-toolbar-affixed {
    background: #181818;
}

.mw-echo-ui-placeholderItemWidget {
    background-color: #1F1F1F;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
    background-color:#202020;
    color:#E0E0E0;
}

.oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-widget-enabled,
.oo-ui-popupToolGroup.oo-ui-widget-enabled,
.oo-ui-popupWidget-popup,
.oo-ui-popupToolGroup.oo-ui-widget-enabled.oo-ui-popupToolGroup-active {
    background: #202020;
}

.oo-ui-indicator-down,
.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-iconElement-icon {
    filter:invert(100%);
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background-color: transparent;
  border-bottom-color: #a2a9b1;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-image-outset: 0 0 0 0;
  border-image-repeat: stretch stretch;
  border-image-slice: 100% 100% 100% 100%;
  border-image-source: none;
  border-image-width: 1 1 1 1;
  border-left-color: #a2a9b1;
  border-left-style: solid;
  border-left-width: 1px;
  border-right-color: #a2a9b1;
  border-right-style: solid;
  border-right-width: 1px;
  border-top-color: #a2a9b1;
  border-top-style: solid;
  border-top-width: 1px;
  color: #222;
}

.oo-ui-toolbar-bar,
.ve-ui-targetWidget-toolbar {
  background: transparent !important;
  color: white !important;
}

.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel {
  color: white;
}

.oo-ui-listToolGroup.oo-ui-widget-disabled, 
.oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-title {
  color: orange;
}

.oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-widget-enabled:hover {
  background-color: orange !important;
}

.oo-ui-popupToolGroup .oo-ui-tool-link:hover {
 background-color: gray !important;
}

.mw-ui-icon-arrow::before {
    filter: invert(100%);
}

.oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
  background-color: #202020 !important;
  color:white;
  border: 1px solid #c8ccd1;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
  margin: 0 -1px;
  min-width: 16em;
}

.ve-init-mw-mobileArticleTarget-title {
  bottom: 0;
  color: white;
  background: #202020;
  left: 0;
  line-height: 3.164em;
  overflow: hidden;
  padding: 0 0.5em;
  position: absolute;
  right: 0;
  text-overflow: ellipsis;
  top: 0;
  white-space: nowrap;
}

.ve-init-mw-mobileArticleTarget-editTools > .oo-ui-toolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool {
  background: #202020 none repeat scroll 0 0;
  width: 100%;
}

.oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link .oo-ui-tool-title {
  color: white !important;
  transition: color 100ms ease 0s;
}

.oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover {
  background-color: #0271a8 !important;
}

.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title {
  color: white !important;
  padding-left: 0.5em;
}

.oo-ui-popupToolGroup.oo-ui-widget-enabled.oo-ui-popupToolGroup-active {
  background-color: orange !important;
  box-shadow: 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07) inset;
}

.oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled {
  background-color: lightblue !important;
}

.oo-ui-messageDialog-message {
  color: white;
  font-size: 1.1em;
  line-height: 1.4;
  text-align: left;
}

.oo-ui-fieldsetLayout.oo-ui-labelElement > .oo-ui-fieldsetLayout-header {
  box-sizing: border-box;
  color: white !important;
  display: inline-table;
  float: left;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  white-space: normal;
  width: 100%;
}

.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
  color: white;
}

.oo-ui-buttonElement-button {
  background-color: transparent;
}

.oo-ui-comboBoxInputWidget-dropdownButton.oo-ui-indicatorElement .oo-ui-buttonElement-button, 
.oo-ui-comboBoxInputWidget-dropdownButton.oo-ui-indicatorElement .oo-ui-buttonElement-button:focus {
  background-attachment: scroll;
  background-clip: border-box;
  background-color: black;
  background-image: none;
  background-origin: padding-box;
  background-position-x: 0;
  background-position-y: 0;
  background-repeat: repeat;
  background-size: auto auto;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
  background-color: #202020;
  border-bottom-color: #a2a9b1;
  border-left-color: #a2a9b1;
  border-right-color: #a2a9b1;
  border-top-color: #a2a9b1;
  color: #444;
}


/*****************************************************************/
/* this section governs the responsive 3 column main page layout */
/*****************************************************************/
.fpmain {
    width: 100%;
    overflow: hidden;
    z-index: 1;
}

.fpbanner {
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid #505050;
    box-shadow: 0 2px 5px #505050;
    color: #FFFFFF;
    margin: 0 5px 5px 5px;
    padding: 5px;
    min-height: 80px;
}

.fpbannertable {
    display: table;
    border: none;
    background: transparent;
    width: 100%; 
    min-height: 75px;
    margin: 0;
    padding: 5px;
}

.fpbannercell {
    display: table-cell; 
    text-align: center; 
    vertical-align: middle;
}

.fpbannerblock {
    border: none;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.75);
    font-size: 132%;
    width: 100%;
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
}

.fpmidsections {
    float: left;
    width: 100%;
    overflow: hidden;
}

.fpbox {
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid #505050;
    box-shadow: 0 2px 5px #505050;
    color: #FFFFFF;
    margin: 5px;
    padding: 5px;
    overflow: auto;
}

.fpbox .mainheading {
    border: none;
    border-bottom: 1px solid #505050;
    font-size: 150%;
    font-weight: bold;
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
    overflow: auto;
}

.fpbox .heading {
    border: none;
    border-bottom: 1px solid #505050;
    text-align: center;
    font-size: 132%;
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
    overflow: auto;
}

.fpmain .columns .leftcol {
    width: 100%;
    margin: 0;
    padding: 0;
}

.fpmain .columns .rightcol {
    width: 100%;
    margin: 0;
    padding: 0;
}

.fpsection1, .fpsection2, .fpsection3, .fpsection4 {
    float: left;
    clear: both; 
    width: 100%;
}

div.fp2columnonly, div.fp3columnonly {
    display: none; 
}

@media (min-width: 790px) {
  .fpsection1 {
    float: left;
    clear: none;
    width: 50%;
  }

  .fpmidsections {
    clear: none;
    float: right;
    width: 50%;
  }

  .fpsection4 {
    float: left;
    clear: none;
    width: 50%;
  }

  div.fp2columnonly {
    display: block; 
  }
}

@media (min-width: 990px) {
  .fpmain .columns .leftcol {
    float: left;
    width: 50%;
    margin: 0;
    padding: 0;
  }

  .fpmain .columns .rightcol {
    float: right;
    width: 50%;
    margin: 0;
    padding: 0;
  }
}

@media (min-width: 1390px) {
  .fpmidsections {
    clear: none;
    float: right;
    width: 66.667%;
  }

  .fpsection1 {
    clear: none;
    width: 33.333%;
  }

  .fpsection2 {
    clear: none;
    width: 50%;
  }

  .fpsection3 {
    clear: none;
    width: 50%;
  }
 
  .fpsection4 {
    clear: left;
    width: 33.333%;
  }

  div.fp2columnonly {
    display: none; 
  }

  div.fp3columnonly {
    display: block; 
  }
}

.fpbox.plain {
    background: transparent;
    border: none;
    box-shadow: none;
}

.fpimagelist ul {
    list-style-type: none;
    list-style-image: none;
}

.fpvideos {
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
}

.fpvideo {
    display: inline-block;
    margin: 0 5px;
}