MediaWiki:Mobile.css: Difference between revisions

Revision as of 10:01, 16 November 2022

/* All CSS here will be loaded for users of the mobile site */

/* Top Bar */

.header-container.header-chrome {
   background-color: none;
}

.minerva-header .branding-box {
   display: none;
}

.mw-ui-background-icon-search {
   background-image: none;
}

.minerva-header .search-box {
   margin-right: 35px;
   width: 100%;
   max-width: 100%;
}

.minerva-header .branding-box {
   display: initial;
   margin-right: 25px;
}

.minerva-header .branding-box img {
   width: 100% !important;
   height: auto !important;
}

.minerva-search-form {
   width: 0;
}

/* Body Styling */
body {
    background: url("/resources/dreamlightvalley/background.jpg") no-repeat fixed top center / cover;
    font-family: Josefin Sans, sans-serif;
}


#content { 
   background-color: #ccceffe8;
   margin: 8px;
}

#bodyContent hr {
    border-bottom: 1px solid #aaa;
    border-top: none;
}

#searchInput {
    padding: 7px;
}

li#ca-watch {
   display:none;
}

pre {
    background-color: white;
}

.client-js .collapsible-heading {
    border-bottom: solid 1px #aaa !important;
}

#mainmenutable {
   display: table;
}

#footer {
    background: rgba(0,0,0,0.8) none repeat scroll 0% 0%;
    color: #8c8c8c;
    margin-top: 20px;
    border-top: none !important;
    color: #C2C8CF;
}

.toc-mobile {
   background-color: rgba(255,255,255,0.58) !important;
}

.mw-footer li {
  color:#9fa5ff;
}

.mw-footer a {
  color:#c0c3f7;
}

.overlay .overlay-content {
    background-color:white;
}

.overlay-header-container {
   background: #8dc4e5;
}

.overlay.visible {
   background: none;
}

img {
   max-width:100%;
   height: auto;
}

#mw-mf-page-center, .animations #mw-mf-page-center {
  background-color:transparent !important;
}

a.minerva__tab.new {
   color: #3366cc !important;
}

/* Navbox */
#navbox {
   margin:auto;
   width:80%;
   border: 1px solid #2a2f8b;
   padding: 5px; 
   border-radius:11px;
   clear: both;
   margin-top: 15px;
   font-size:88%;
}

#navbox-subtable {
   width: 100%;
   margin-top: 1px;
   margin-bottom: 1px;
}

#navbox-collapse-head {
   background-color: #5c62b8;
   text-align: center;
   border-color: #2a2f8b;
   box-shadow: 0px 1px rgba(0,0,0,0.3);
   color: white;
   text-shadow: 0px 2px black;
   font-size:115%;
}

#navbox-collapse-head a {
   color: white;
}

#navbox-collapse-subhead {
   padding-left: 80px;
}

th#navbox-label img {
   margin-top: -7px;
}

/* Table Styling */
table.wikitable {
  background-color: transparent;
  border-collapse: separate;
  border: none;
  display:block;
}
table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td {
   border: 1px solid #8f93dd !important;
   padding: 0.2em;
   background-color: #ffffff82 !important;
}

table.wikitable > tr > th, table.wikitable > * > tr > th {
   background-color: #5c62b8 !important;
   text-align: center;
   border-color: #2a2f8b !important;
   box-shadow: 0px 1px rgba(0, 0, 0, 0.3);
   color: white;
   text-shadow: 0px 2px black;
}

table.wikitable > tr > th a, table.wikitable > * > tr > th a {
   color:white;
}

table.wikitable img {
   max-width:none;
}

#cellstretch {
   width:100%;
}

#cellcenter {
   text-align:center;
}

/* Infobox Styling */

table#infobox {
   float:right !important;
}

#infoboxtable {
   margin-bottom: 0px;
   min-width: 350px;
   max-width:100%;
   margin-top: 0;
   margin-left: 15px;
}

table#infobox th {
   font-size: 21px;
}

td#infobox-label {
   background-color: #5c62b8 !important;
   border-color: #2a2f8b !important;
   box-shadow: 0px 1px rgba(0,0,0,0.3);
   color: white;
   text-shadow: 0px 2px black;  
   vertical-align: top;
   min-width: 99px;
}

td#infobox-detail p, table#infobox p {
   margin:0;
}

td#infobox-separator {
   text-align:center;
   background-color: #5c62b8 !important;
   border-color: #2a2f8b !important;
   box-shadow: 0px 1px rgba(0,0,0,0.3);
   color: white;
   text-shadow: 0px 2px black;  
   vertical-align: top;
}

td#infobox-image {
   text-align: center;
   height: 175px;
}

td#infobox-image p {
   margin: 0.5em 0;
}

div#navbox-stars {
   font-size: 24px;
   margin-top: -7px;
   margin-bottom: -10px;
   text-align: center;
}

div#navbox-stars span {
   color: yellow;
   text-shadow: 0 0px 5px black;
}

#infobox-universe {
    text-align: right;
    background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(142,146,167,1) 25%, rgba(142,146,167,1) 100%, rgba(0,0,0,0) 100%);
    margin: 5px -3px 15px;
    float: right;
    color: white;
    padding: 1px 10px 1px 25px;
    font-size: 14px;
    min-width: 30%;
}

#infobox-universe img {
    margin-bottom: 3px;
}

div#infobox-universe a, div#infobox-universe a.visited, div#infobox-universe a.new, div#infobox-universe a.active  {
    color: white;
}

/* Main Page */

body.page-Dreamlight_Valley_Wiki .mw-body .firstHeading {
    display: none;
}

td#main-logo img {
    max-width: 100%;
    height: auto;
}

table#main-menu td {
   vertical-align: top;
}

div.mainmenu-section {
   float: left;
}

div.mainmenu-wrap {
   width: 100%;
}

div#mainmenu-single {
   width: 25%;
}

div#mainmenu-double {
   width: 50%;
}

td#mainpage_menu {
   background-color: transparent !important;
   border: none !important;
}

table#main-menu {
   width: 100%;
   margin:0;
   display: inline-table;
}

/* Templates */

span#nametemplate img {
   margin-top: -7px;
}

span#name-space {
   display:inline-block;
   text-align:center; 
   width:20px;
}

td#time-table-left-text {
   text-align:left;
}

td#time-table-active {
   font-weight: bold;
}

td#time-table-inactive {
   color: #b1b1b1;
}

/* Dialogue */

td#dialogue-text {
   font-style: italic;
}

/* Fish Pools */
span#pool-gold {
    font-weight: bold;
    color: #b18303;
}

span#pool-blue {
    font-weight: bold;
    color: #4444f3;
}

span#pool-white {
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 5px black;
}

div#memorygallery {
   margin:auto;
   text-align:center;
}

#brokenmemory {
   margin-top: -169px;
}

div#memorywrap {
   display:inline-grid;
}

div#memorywrap:hover ~ #brokenmemory {
   display: none;
}

table#schedule_table td {
   white-space: nowrap;
}

td#cell_eat {
   background-color: #a6e59f;
   text-align: center;
   font-size: 13px;
}

td#cell_sleep {
   background-color: #aaafff;
   text-align: center;
   font-size: 13px;
}

/* Alert Template */

table.alert {
    margin: auto;
    max-width: 700px;
    background-color: #ffffff7a;
    padding: 5px;
    border-radius: 30px;
    border: solid #2d308d7d;
    box-shadow: 0px 5px 3px #00000030;
}

table.alert img {
    margin: 15px;
    margin-right: 65px;
}

/* Tag Template */
div.tag-box {
    background: #757cdc;
    display: inline-block;
    border-radius: 8px;
    padding: 3px 8px 0px 8px;
    font-size: 13px;
    color: white;
    font-weight: 500;
    margin: 1px;
}

div.tag-box a, div.tag-box a.visited, div.tag-box a.new {
    color: white;
}

div#tag-room {
    background: #354569;
}

div#ListThumb img {

}

/* Gallery */

ul.clothesgallery, ul.furnituregallery {
    text-align:center;
}

ul.clothesgallery li.gallerybox div.thumb, ul.furnituregallery li.gallerybox div.thumb {
    border: 2px solid #a1b3f3;
    background-color: #5359b98a;
    border-radius: 10px;
}

ul.clothesgallery li.gallerybox, ul.furnituregallery li.gallerybox {
    max-width: 150px;
    margin: auto;
}

ul.clothesgallery, ul.furnituregallery {
    padding-left: 0px;
}

@media screen and (max-width: 720px) {
    table#infobox {
        display: inline-table;
    }
}


#mw-mf-page-left ul li a  {
    background: #dfdff8;
}

#main-menu-input:checked ~ #mw-mf-page-left {
    background: #bdbef1;
}

.header-container, .header-container.header-chrome {
    background: #a0a4ff;
}

@media screen and (max-width: 675px) {
    div#mainmenu-double, div#mainmenu-single {
       width: 100%;
    }
}

@media screen and (max-width: 625px) {
    .minerva-search-form {
       margin-right: 35px;
    }
}