MediaWiki:Mobile.css
Jump to navigation
Jump to search
Note: After publishing, 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 / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* All CSS here will be loaded for users of the mobile site */
/* josefin-sans-regular - latin */
@font-face {
font-family: 'Josefin Sans';
font-style: normal;
font-weight: 400;
src: url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-regular.svg#JosefinSans') format('svg'); /* Legacy iOS */
}
/* josefin-sans-500 - latin */
@font-face {
font-family: 'Josefin Sans';
font-style: normal;
font-weight: 500;
src: url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-500.eot'); /* IE9 Compat Modes */
src: local(''),
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-500.woff') format('woff'), /* Modern Browsers */
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-500.svg#JosefinSans') format('svg'); /* Legacy iOS */
}
/* josefin-sans-600 - latin */
@font-face {
font-family: 'Josefin Sans';
font-style: normal;
font-weight: 600;
src: url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-600.eot'); /* IE9 Compat Modes */
src: local(''),
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-600.woff') format('woff'), /* Modern Browsers */
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-600.svg#JosefinSans') format('svg'); /* Legacy iOS */
}
/* josefin-sans-700 - latin */
@font-face {
font-family: 'Josefin Sans';
font-style: normal;
font-weight: 700;
src: url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-700.eot'); /* IE9 Compat Modes */
src: local(''),
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-700.woff') format('woff'), /* Modern Browsers */
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-700.svg#JosefinSans') format('svg'); /* Legacy iOS */
}
/* josefin-sans-italic - latin */
@font-face {
font-family: 'Josefin Sans';
font-style: italic;
font-weight: 400;
src: url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-italic.eot'); /* IE9 Compat Modes */
src: local(''),
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-italic.woff') format('woff'), /* Modern Browsers */
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-italic.svg#JosefinSans') format('svg'); /* Legacy iOS */
}
/* josefin-sans-700italic - latin */
@font-face {
font-family: 'Josefin Sans';
font-style: italic;
font-weight: 700;
src: url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-700italic.eot'); /* IE9 Compat Modes */
src: local(''),
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-700italic.woff') format('woff'), /* Modern Browsers */
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('/resources/dreamlightvalley/fonts/josefin-sans-v25-latin-700italic.svg#JosefinSans') format('svg'); /* Legacy iOS */
}
/* 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;
}
/* Color Swatch Template */
div.color-swatch {
display: inline-block;
border-radius: 5px;
width: 17px;
box-shadow: 0px 1px rgb(0 0 0 / 28%);
height: 17px;
border: solid 1px #9393ed;
padding: 2px;
margin: 0 2px -6px;
}
/* Linked Gallery Alignment */
ul.linked-gallery {
text-align: left;
}
li#customgallerybox {
text-align:center;
}
ul.clothesgallery li.gallerybox div.thumb, ul.furnituregallery li.gallerybox div.thumb, ul.linked-gallery li.gallerybox div.thumb {
border: 2px solid #a1b3f3;
background-color: #5359b98a;
border-radius: 10px;
}
/* Navbox */
#navbox {
margin:auto;
width:100%;
display: table;
border: 1px solid #2a2f8b;
padding: 5px;
border-radius:11px;
clear: both;
margin-top: 15px;
font-size:88%;
}
th.furniture-disney {
width: 150px;
}
#navbox-subtable {
width: 100%;
margin-top: 1px;
display: table;
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;
margin-left: 20px !important;
max-width:400px;
}
#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;
}
td#mainpage_menu p {
margin: 0.5em 00;
}
td#mainpage_menu dl {
margin: 0.5em 0 0.5em 1.5em;
}
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;
}
span#headericon img {
margin-top: -7px;
width:29px;
height: auto;
}
span#headericon a.image {
pointer-events: none;
cursor: default;
}
/* 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;
}
.itemCount, .dutyVersion, .dutyIcon {
text-align: center;
}
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#tag-collection {
background: white;
}
div#tag-collection a, div#tag-collection a.visited, div#tag-collection a.new {
color: #354569;
}
/* Clothing Body Type Widget */
div.infobox-image-wrap {
max-width:300px;
margin: auto;
text-align: center;
position: relative;
}
div.infobox-image-wrap input { display: none; }
div.infobox-image-wrap input + label { display: inline-block }
div.infobox-image-wrap input ~ .tab { display: none }
#tab1:checked ~ .tab.content1,
#tab2:checked ~ .tab.content2 { display: block; }
label#tab2 {
margin-top: 41px;
}
div.infobox-image-wrap input + label {
right: -15px;
position: absolute;
cursor: pointer;
}
div.infobox-image-wrap input + label img {
opacity: 0.3;
}
div.infobox-image-wrap input:checked + label img {
opacity: 1;
}
div#ListThumb img {
}
/* Gallery */
ul.clothesgallery, ul.furnituregallery {
text-align:center;
margin: 10px 0;
}
ul.clothesgallery li.gallerybox, ul.furnituregallery li.gallerybox, ul.linked-gallery li.gallerybox {
max-width: 150px;
margin: auto;
}
ul.clothesgallery, ul.furnituregallery, ul.linked-gallery {
padding-left: 0px;
}
/* Custom Gallery Template */
div#customgallery img {
display:inline-block;
}
div#customgalleryimg {
margin:auto;
height: 150px;
position: relative;
}
div.gallerycorner {
position:absolute;
top: 0px;
left: 0px;
width: 47px !important;
height: 47px;
background: linear-gradient(to bottom right, #a1b3f3 50%, transparent 50%);
border-top-left-radius: 8px;
z-index: 1;
}
div.galleryicon {
height: 22px;
width: 22px;
margin-top: 2px;
text-align:left;
}
div#gallerypremium {
background: url("/images/thumb/f/f8/Premium_Shop.png/22px-Premium_Shop.png");
}
div#galleryevent {
background: url("/images/thumb/3/36/Menu_Icon_Events.png/22px-Menu_Icon_Events.png");
}
div.gallerycorner {
margin:auto;
height: 150px;
position: relative;
}
li#customgallerybox {
width: 155px;
vertical-align: top;
display: inline-block;
}
span#galleryhelper {
display:inline-block;
height: 100%;
vertical-align:middle;
}
@media screen and (max-width: 864px) {
body.page-Premium_Shop div.floatright {
float: none;
text-align:center;
}
}
@media screen and (max-width: 720px) {
table#infobox {
display: inline-table;
max-width: none;
}
}
#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;
}
/* Ads Styling */
div#siteNotice {
font-size:0;
}
div.responsiveadtop_desktop {
width: 100%;
text-align: center;
height: 100%;
margin: auto;
background-color: rgb(255 255 255 / 32%);
}
div.responsiveadbottom {
width: 100%;
text-align:center;
height: 100%;
margin: auto;
background-color: rgb(255 255 255 / 12%);
}
/* Infobox Language Table */
span.languagetitle {
color: white;
text-shadow: 0px 2px black;
}
table.languagetable {
margin:auto;
text-align: left;
font-size:75%;
line-height: 1.5em;
border-spacing: 0px;
}
div.languagecell {
border: 1px solid #8f93dd;
padding: 0.2em;
background-color: #dfdff8;
color: black;
text-shadow: none;
}
td.languagesection {
text-align: center;
background-color: #5c62b8 !important;
border-color: #2a2f8b !important;
vertical-align: top;
padding:5px;
}
div.flag {
width: 14px;
height: 9px;
float: left;
margin: 3px 3px 0 15px;
}
div#flag-fr {
background-image: url("/resources/dreamlightvalley/flags/french.png");
}
div#flag-it {
background-image: url("/resources/dreamlightvalley/flags/italian.png");
}
div#flag-de {
background-image: url("/resources/dreamlightvalley/flags/german.png");
}
div#flag-es {
background-image: url("/resources/dreamlightvalley/flags/spanish.png");
}
div#flag-ja {
background-image: url("/resources/dreamlightvalley/flags/japanese.png");
}
div#flag-zh {
background-image: url("/resources/dreamlightvalley/flags/simplified-chinese.png");
}
@media screen and (max-width: 1000px) {
div#siteNotice {
margin:0 -8px;
}
}
@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;
}
}