MediaWiki:Mobile.css

/* CSS placed here will affect users of the mobile site */ /* BASE */ /* Governs the general color of the text and background image */ body { background: black; }

.animations #mw-mf-page-center { background: url(https://images.wikia.com/sunlesssea_gamepedia/images/thumb/1/13/SS_BG.jpg/800px-SS_BG.jpg) no-repeat fixed center top / cover rgba(0,0,0,1); color: white; }

.nomobile { display: none; }

/* HEADER */ .header-container.header-chrome, background: rgba(33, 33, 33, 0.8); }
 * 1) mw-mf-page-center {

.notification-count { background: transparent; }

/* BODY */ /* Leave transparent if background if solid color, otherwise tweak black opacity to make text visible */ border-top: 0px solid #cccccc; background: rgba(0,0,0,0.5) !important; }
 * 1) content {

.overlay-enabled { border-top: 0px solid #cccccc; background: rgba(0,0,0,1) !important; }

/* FOOTER */ /* Background should match opacity of #content */ footer { border-top: solid 1px #c8ccd1; background: rgba(0, 0, 0, 0.5); }

footer .last-modified-bar { border-bottom: solid 1px #c8ccd1; background-color: transparent; color: #505050; }

/* Fix to display properly with links of similar color */ footer .last-modified-bar.active { background-color: rgba(0, 175, 137, 0.5); }

/* LINKS */ /* Minimal code to affect all non-new links; notification ensures the default color always displays */ a:not(.new) { text-decoration: none; color: #c0f3ea !important; }

.notification-count .circle span { color: #fff !important; }

/* UI STYLING */ /* Default values for HydraDark */ .content table.wikitable > tr > th, .content table.wikitable > * > tr > th { background-color: rgba(248, 249, 250, 0.35); }

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

.client-js .toc-mobile { background-color: transparent !important; border-color: #505050; }

.mw-ui-button { background-color: transparent; color: inherit; border: 1px solid #fff; }

.content .thumb { border: 1px solid rgba(255, 255, 255, 0.5); padding: 3px; color: white; }

li.gallerybox div.thumb { border: 1px solid #c8ccd1; background-color: transparent; }

.mw-ui-button.mw-ui-progressive:active, .mw-ui-button.mw-ui-constructive:active, .mw-ui-button.mw-ui-progressive.is-on, .mw-ui-button.mw-ui-constructive.is-on, .mw-ui-button.mw-ui-progressive.mw-ui-checked, .mw-ui-button.mw-ui-constructive.mw-ui-checked { background-color: rgba(115, 115, 115, 0.33); border-color: white; }

.mw-mf-user, .list-header, .page-list.side-list .list-thumb, .topic-title-list.side-list .list-thumb, .site-link-list.side-list .list-thumb { background-color: inherit; color: inherit;

}

/* Section arrows */

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

/* Hambahgah menu */

nav { background: #212121 !important; }
 * 1) mw-mf-viewport,

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; }

/* EDITOR OVERLAY */

/* Search */

.search-overlay { background: rgba(0, 0, 0, 0.9) !important; }

.search-overlay .results, .search-overlay .search-feedback { background-color: #212121 !important; }

.list-thumb.list-thumb-none { background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2056%2056%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M0%200h56v56H0z%22%2F%3E%3Cpath%20fill%3D%22%23E0E0E0%22%20d%3D%22M36.4%2013.5H17.8v24.9c0%201.4.9%202.3%202.3%202.3h18.7v-25c.1-1.4-1-2.2-2.4-2.2zM30.2%2017h5.1v6.4h-5.1V17zm-8.8%200h6v1.8h-6V17zm0%204.6h6v1.8h-6v-1.8zm0%2015.5v-1.8h13.8v1.8H21.4zm13.8-4.5H21.4v-1.8h13.8v1.8zm0-4.7H21.4v-1.8h13.8v1.8z%22%2F%3E%3C%2Fsvg%3E) !important; }

.page-summary h2, .page-summary h3 { color: #F37F20 !important; }

/* VE Overlay */

.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; } /* Editor Overlay */

.editor-overlay-ve .overlay-content .surface { overflow: hidden; color: white; }

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

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

/********************* /* Front page styles * /*********************/ .fpbox { border-radius: 5px; border: 1px solid #79c2d1; border-radius: 4px 4px 4px 4px; box-shadow: 0 0.1em 0.75em #c0e0ec; background: transparent; color: inherit; margin: 5px; padding: 5px; }

.fpbox .welcome { border-bottom: 1px solid #505050; background: transparent; /* color: #e0e0e0; */ font-size: 150%; text-transform: uppercase; text-align: center; margin: 0 0 10px 0; padding: 0 0 5px 0; }

.fpbox .heading { border-bottom: 1px solid #505050; background: transparent; /* color: #e0e0e0; */ font-size: 132%; font-variant: small-caps; margin: 0 0 10px 0; padding: 0 0 5px 0; }

.fpbox .heading .smalllink { color: #3674b3; font-weight: bold; font-size: 75%; }

.fpbox .body { overflow: hidden; }

.fpbox hr { border: none; border-bottom: 2px solid #505050; }

.fpplainbox { padding: 5px 8px 10px 8px; margin: 0 5px 10px 5px; vertical-align: top; }

.fpmain .columns { overflow: hidden; }

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

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

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

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

.fplinks { display: flex; flex-flow: row wrap; justify-content: center; margin: -2px -3px; }

.fplinks .linkslabel { border-bottom: 2px solid #505050; margin: 6px 3px 0 3px; flex: 0 0 100%; }

.fplink { display: flex; align-items: stretch; justify-content: stretch; flex: 0 0 100%; padding: 2px 3px; box-sizing: border-box; }

@media (min-width: 400px) { .fplink { flex: 0 0 50%; } }

.fplink.wide { flex: 0 0 100%; }

.fplink .box { background: transparent; /*    background-color: #000000; background-image: -moz-linear-gradient(center top, #151515 0%, #000000 100%); background-image:-webkit-gradient(linear, center top, left bottom, color-stop(0%,#151515), color-stop(100%,#000000)); background-image:-webkit-linear-gradient(top, #151515 0%, #000000 100%); background-image:-o-linear-gradient(top, #151515 0%, #000000 100%); background-image:-ms-linear-gradient(top, #151515 0%, #000000 100%); background-image: linear-gradient(to bottom, #151515 0%, #000000 100%); */ border: 2px solid #505050; border-radius: 2px; box-shadow: 0 0 0 2px #505050 inset; /* color: #e0e0e0; */ display: flex; flex-flow: column nowrap; font-weight: bold; align-items: stretch; justify-content: stretch; text-transform: uppercase; flex-grow: 1; min-height: 4em; }

.fplink.image { justify-content: flex-start; }

.fplink.image .box { min-height: 70px; }

.fplink.image .box .image { display: flex; flex-grow: 1; min-height: 70px; }

.fplink.image .image a { min-height: 70px; }

.fplink.image .box .image img { max-width: 100% !important; width: auto !important; max-height: 70px !important; }

.fplink.image .image { font-size: 75%; }

.fplink .link { display: flex; align-items: stretch; justify-content: stretch; flex-grow: 1; }

.fplink a { display: flex; align-items: center; justify-content: center; flex-grow: 1; }

.fplink.image .link a { border-top: 2px solid #505050; background: #ddddb7 !important; }

.fpvideos { margin: 0 auto; overflow: hidden; text-align: center; max-width: 480px; }

.fpvideo { position: relative; padding-top: 25px; padding-bottom: 56.25%; height: 0; }

.fpvideo iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.fpbox .bigmobilelinks .rightcol { padding: 0.25em 0 0 0; }

@media (min-width: 400px) { .fpbox .bigmobilelinks .rightcol { padding: 0; } }

.fpbox .bigmobilelinks ul, .fpbox .bigmobilelinks .leftcol ul, .fpbox .bigmobilelinks .rightcol ul { list-style: none; margin: 0; padding: 0 15px; }

.fpbox .bigmobilelinks ul ul, div#content .fpbox .bigmobilelinks .leftcol ul ul, div#content .fpbox .bigmobilelinks .rightcol ul ul { list-style: none; padding: 0.25em 1em 0 1em; }

.fpbox .bigmobilelinks ul li div { display: flex; align-items: center; justify-content: center; background: rgba(128, 128, 128, 0.1); min-height: 4em; margin: 0.25em 0; padding: 0; }

.fpbox .bigmobilelinks a { display: flex; align-items: center; justify-content: center; background: rgba(128, 128, 128, 0.2); min-height: 4em; margin: 0.25em 0; padding: 0; }

div.cpbox div.feature { width:unset !important; }

/* Classes permitting setting of alignment on mobile only or differently on desktop and mobile */ /* (See .desktopleft, .desktopcenter, .desktopright in MediaWiki:Common.css for the desktop equivalents */ .mobileleft { text-align: left; }

.mobilecenter { text-align: center; }

.mobileright { text-align: right; }