MediaWiki:Mobile.css

/* CSS placed here will affect users of the mobile site */ /* ==========================  Imports ==========================*/ @import 'https://fonts.googleapis.com/css?family=Anonymous+Pro|Arvo|Droid+Sans|Gentium+Basic|Josefin+Sans|Lato|Merriweather|Old+Standard+TT|Oswald|PT+Sans|Prociono|Quicksand|Classic+Comic|Raleway|Roboto+Slab|Rubik|Rubik+Mono+One|Space+Mono|Doppio+One|Titillium+Web|Varela+Round|Vollkorn|Bangers';

/* Navbox Mobile */ /* Only for desktop devices */ .nomobile { display:none; }

.tabber .tabbertab { border: none !important; }

/* MENU     */

margin: 0; padding: 0; }
 * 1) menu ul {

display: none; }
 * 1) menu .main-menu {

display: block; }
 * tm:checked + .main-menu {

display: none; }
 * 1) menu input[type="checkbox"],
 * 2) menu ul span.drop-icon {

border-style: solid; border-color: rgba(0, 0, 0, .05); }
 * 1) menu li,
 * 2) toggle-menu,
 * 3) menu .sub-menu {

border-width: 0 0 1px; }
 * 1) menu li,
 * 2) toggle-menu {

border: 2px solid #5e637f; background-color: #444; margin: 0 1em; box-shadow: 2px 2px 3px #434343; }
 * 1) menu .sub-menu {

border-width: 0; }
 * 1) menu .sub-menu li:last-child {

position: relative; display: block; color: white; text-shadow: 1px 1px 0 rgba(0, 0, 0, .125); }
 * 1) menu li,
 * 2) toggle-menu,
 * 3) menu a {

background-color: #8e94ba; display: inline-block; border: 2px solid #7f83a2; box-shadow: 1px 1px 2px #4c4f67; }
 * 1) menu,
 * 2) toggle-menu {

padding: 0.5em 1.5em; }
 * 1) toggle-menu,
 * 2) menu a {

background-color: #9da1c0; transition: all .125s ease-in-out; -webkit-transition: all .125s ease-in-out; font-family: Lato; }
 * 1) menu a {

background-color: #474e7a; color: #09c; }
 * 1) menu a:hover {

display: none; }
 * 1) menu .sub-menu {

display: block; }
 * 1) menu input[type="checkbox"]:checked + .sub-menu {

color: #db8ae2; }
 * 1) menu .sub-menu a:hover {

position: absolute; right: 1.5em; top: 1.25em; }
 * 1) toggle-menu .drop-icon,
 * 2) menu li label.drop-icon {

border-radius: 50%; width: 1em; height: 1em; text-align: center; background-color: rgba(0, 0, 0, .125); text-shadow: 0 0 0 transparent; color: rgba(255, 255, 255, .75); }
 * 1) menu label.drop-icon, #toggle-menu span.drop-icon {

line-height: 1; }
 * 1) menu .drop-icon {

@media only screen and (max-width: 64em) and (min-width: 52.01em) { #menu li { width: auto; }

#menu .sub-menu li { width: auto; } }

@media only screen and (min-width: 52em) { #menu .main-menu { display: block; }

#toggle-menu, #menu label.drop-icon { display: none; }

#menu ul span.drop-icon { display: inline-block; }

#menu li { float: left; border-width: 0 1px 0 0; }

#menu .sub-menu li { float: none; }

#menu .sub-menu { margin: 0; position: absolute; top: 100%; left: 0; width: 10em; white-space: nowrap; background-color: #595994; z-index: 3000; }

#menu .sub-menu, #menu input[type="checkbox"]:checked + .sub-menu { display: none; }

#menu .sub-menu li { border-width: 0 0 1px; }

#menu .sub-menu .sub-menu { top: 0; left: 100%; } #menu .smallmenu { font-size: 12px; } #menu .sub-menu .smallmenu { white-space: nowrap; width: auto; }

#menu li:hover > input[type="checkbox"] + .sub-menu { display: block; } }

.menuwrapper { position: relative !important; left: 0 !important; }

.ajaxpoll { max-width: 250px; margin-left: auto; margin-right: auto; }

.ajaxpoll .ajaxpoll-id-info { display: none; }

/* ==========================  Headings ==========================*/ .mw-body .firstHeading { font-family: 'Rubik',Tahoma,Trebuchet MS,sans-serif; font-weight: 400; font-size: 36px; color: #3a3a3a; } .mw-headline { font-family: 'Rubik',sans-serif; text-transform: uppercase; padding-top: 10px; font-weight: 500; letter-spacing: 2px; font-size: 1em; color: #3a3a3a; }

.mw-body-content { font-size: 15px; font-family: "Trebuchet MS"; }

.mw-body-content h2 { font-size: 28px; }

.mw-body-content h3 { font-size: 22px; }

.mw-body-content h4 { font-size: 20px; }

/*******************   Colors color: #ff0000; font-style: italic; }
 * 1) mw-content-text a.new {
 * 1) mw-content-text a.new {

color: #d10e7b; }
 * 1) mw-content-text a {

a, a:visited { color: #d10e7b; text-decoration: none; }

/***************************************/ /*              Hover                 */ /***************************************/ .show-when-hovering { display: none; } .hover-container:hover .show-when-hovering { display: inline; } .hover-container:hover .hide-when-hovering { display: none; } .fadeout img:hover { opacity:0; transition:none !important; -webkit-transition: none !important; } .fadeout img:active { opacity:0; transition:none !important; -webkit-transition: none !important; } body:not(.editor) .fadeout-container.fadeout-hide-bottom > .fadein { visibility: hidden; }

body:not(.editor) .fadeout-container.fadeout-hide-bottom > .fadeout:hover + .fadein { visibility: visible; }

.fadeout-container.img.lzyTrans { transition: none !important; -webkit-transition: none !important; }

/* Hover Box for switching the visibility of the selected item */ .hoverbox { display:inline-block; padding:0em; } .hoverbox .hoveritem { display:none; margin:0em; padding:0em; } .hoverbox .hoveritem.selected { display:inline-block; } .hoverbox:hover .hoveritem { display:inline-block; } .hoverbox:hover .hoveritem.selected { display:none; }

.customedit { background: url('https://static.jojowiki.com/images/d/d2/Edit.png') no-repeat; }

.customedit:hover { background: url('https://static.jojowiki.com/images/2/2f/Edit2.png') no-repeat; }

.edittab { background: url('https://static.jojowiki.com/images/0/0e/EditTab.png') no-repeat; }

.fadeinimg { opacity: 0.1; } .fadeinimg:hover { opacity: 1.0; }

.closerange tr > td { border: 2px #f88 solid; padding: 0.2em; } .longrange tr > td { border: 2px #c8f9bb solid; padding: 0.2em; } .autopilot tr > td { border: 2px #268BD2 solid; padding: 0.2em; } .rangeirrelevant tr > td { border: 2px #E3B52C solid; padding: 0.2em; }

div#nihongo span#jpn { display: inline; }

div#nihongo:hover span#jpn { display: none; }

div#nihongo span#romaji { display: none; }

div#nihongo:hover span#romaji { display: inline; }

span#hovertext span#outer { display: inline; }

span#hovertext:hover span#outer { display: none; }

span#hovertext span#hidden { display: none; }

span#hovertext:hover span#hidden { display: inline; }

div#hovertext span#outer { display: inline; }

div#hovertext:hover span#outer { display: none; }

div#hovertext span#hidden { display: none; }

div#hovertext:hover span#hidden { display: inline; }

.diamonds tr > td { border: 1px solid #aaaaaa; padding: 0.2em; }

.diamonds a { color: #df479c; }

/* Make collapsible table's link white/normal font */ .diamonds .mw-collapsible-toggle a { color: #ffffff; font-weight: normal; }

.diamonds tr > th { background-image:url('https://static.jojowiki.com/images/4/46/DiamondBG2.png') !important; background-size: 300px; background-position: center; background-blend-mode: soft-light; border: 1px solid #aaaaaa; }

.cquote tr > td { border: none !important; }

.cquote tr > th { border: none !important; }

/*Edit button */ .sprite.edit-pencil { background-position: 0 !important; background-image: url(https://static.jojowiki.com/images/4/46/DiamondBG2.png) !important; width: 52px !important; }

.mw-body .editsection { font-size: 0 !important; opacity: 0.5 !important; }

.mw-body .editsection:hover { opacity: 1 !important; }

.sprite.edit-pencil:hover { background-position: 0 !important; background-image: url(https://static.jojowiki.com/images/2/2f/Edit2.png) !important; }

/* Tooltips */ /* Main CSS class of the tooltip */ .main-tooltip { border: 1px solid #cac4b5; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); margin-bottom: 5px; padding: 2px 5px; background-color: #fbeecb; } /* Adds padding to the wrapper to make space for a shadow */ padding: 3px 7px 2px 3px; } /* Hides tooltips with redlinks, not yet loaded ones and elements containing tooltip contents for advanced tooltips */ .has-redlinks, .tooltip-loading, .advanced-tooltip .tooltip-contents { display: none; } .tooltips-init-complete { cursor: help; }
 * 1) tooltip-wrapper {

/**********************************/ /*           USERPAGES           */ /**********************************/ a[href$=":MetallicKaiser"] { color: #ff98ba !important; font-weight: bold !important; }

a[href$=":Vish"] { color: #496cd4 !important; font-weight: bold !important; } a[href$=":Paisley_Park"] { color: #df6295 !important; font-weight: bold !important; font-style: italic !important; } a[href$=":Nabu"] { color: #C0C0C0 !important; font-weight: bold !important; } a[href$=":The_Speedwagon_Foundation"] { color: #9a652e !important; font-weight: bold !important; font-style: italic !important; }

a[href$=":Morganstedmanms"] { color: #a481e4 !important; font-weight: bold !important; }

/**********************************/ /*           NAVBOXES            */ /**********************************/ .navbox { width: 100%; background: #000; margin: 1em auto; font-size: 93%; clear: both; padding: 2px; border-spacing: 0; border: 1px solid #AAA; } /* Merges navboxes that are directly under eachother */ .navbox + .navbox { margin-top: -11px; } .navbox .navbox-title { background: #ffcc68; color: #000; font-weight: bold; } .navbox .navbox-title a, .navbox .navbox-footer a { color: #000 !important; } .navbox .navbox-vde { float:left; width:65px; color:#fff; } .navbox .navbox-title-padright { padding-right: 65px; } .navbox .navbox-title-padleft { padding-left: 65px; } .navbox .navbox-subgroup { border-spacing: 0; width: 100%; } .navbox .navbox-gutter { height: 2px; } .navbox .navbox-subgroup .navbox-gutter { background: #000; } .navbox .navbox-section-row > td { padding: 0; height: 100%; } .navbox .navbox-section { width: 100%; border-spacing: 0; } .navbox .navbox-above, .navbox .navbox-below { background: #ffcc68; text-align: center; } .navbox .navbox-image { background: #000; text-align: center; } .navbox .navbox-group, .navbox .navbox-header { background: #ffcc68; color: #000; font-weight: bold; height: 100%; padding: 2px 4px; } .navbox .navbox-header-collapsible { padding-left: 65px; } .navbox .navbox-group { text-align: right; padding-right: 1em; min-width: 150px; } .navbox .navbox-group, .navbox .navbox-image-left { border-right: 2px solid #000; } .navbox-image-right { border-left: 2px solid #000; } .navbox .navbox-list { background: #faebb2; color: black; width: 100%; height: 100%; padding: 0; } .navbox .alt > .navbox-list { background: #F7F7F7; } .navbox .navbox-list div { padding: 0px 4px; } .navbox .navbox-list.no-group { text-align: center; padding-top: 2px; padding-bottom: 2px; } .navbox .mw-collapsible-toggle { width: 65px; }

.content table { margin: 0; }

@media (max-width: 720px) { .content table { display: table; } }

.header { background-color: #c4bfdc; background-image: url(/customizations/DiamondBG2.png); background-blend-mode: soft-light; background-position-x: center; }

.minerva-footer { background-color: #c4bfdc; }

.navigation-enabled #mw-mf-viewport { background-color: #c4bfdc; }

.header-container.header-chrome { background-color: #c4bfdc !important; background-image: url(/customizations/DiamondBG2.png); background-blend-mode: soft-light; background-position-x: center; }

.overlay.search-overlay .overlay-header { background-color: inherit !important; }

footer .last-modified-bar { background-color: #dbd9ef; }

.client-js .toc-mobile { background-color: #dbd9ef; }

.recentFeedNoLegend .mw-changeslist-legend { display: none; }

.parenttabs:hover { background-color:#cbc5c5 !important; }

.parenttabs:active { filter: grayscale; }

.parenttabs:active a { color: white !important; }

.parenttabs a { position: absolute; z-index: 10; width: 100%; height: 100%; left: 0; top: 20%; text-decoration: none; }

.parenttabs a.mw-selflink { color: white !important; }

.mw-gallery-packed-overlay li.gallerybox { width:100px!important; margin:0px!important; margin-top:0px!important; } .mw-gallery-packed-overlay .gallerybox div { width:100px !important; } .mw-gallery-packed-overlay .gallerybox .thumb a img { width:150px!important; height:150px!important } .mw-gallery-packed-overlay .gallerybox img { object-fit:cover!important; object-position:top }

ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper { max-height:45%; }

.containedGallery .gallerybox img { object-fit: contain !important; }

.mw-gallery-packed-overlay div.gallerytext { font-size: 60% !important; padding: 0 !important; margin-left: -8% !important; }

ul.gallery { padding-left: 0 !important; width: 100% !important; }

.header .branding-box h1 span, .header .branding-box a span { font-family: Bangers; }

.pre-content h1, .content h1 { font-family: Bangers !important; }

.content h2 { font-family: Rubik !important; }

.portable-infobox .pi-background { /* The background underneath the entire infobox. */   background-color: #F0F0F0; }

.portable-infobox .pi-secondary-background { /* The background behind headers and navigation. */   background: #c1bcd9; margin-left: 2px; margin-right: 2px; }

.portable-infobox .pi-title { color: #000; background-image:url('/customizations/DiamondBG2.png'); background: #c1bcd9; font-size: 20px; font-family: 'Lato'; text-align: center; letter-spacing: inherit; font-weight: bold; text-transform: none; border: 0px solid #F0F0F0; padding: 1px; }

.portable-infobox .pi-header { text-align: center; }

.header .search-box { padding-left: 15px; }

.content table { display: table !important; }

.whitelink a { color: white !important; }

.content .in-block { word-break: inherit; }

.mobilemain { width: 100% !important; }

.gradient { background: rgb(154,133,183); background: linear-gradient(180deg, rgba(154,133,183,1) 0%, rgba(70,81,130,1) 100%); }

.portable-infobox img.pi-image-thumbnail { width:100% }

@media (max-width:600px) { .charbox { width:67px; } .charstatus { font-size: 50% !important; } .charname { height: 67px; font-size: 70% !important; }

.charstand { font-size: 65% !important; } }

@media (max-width:600px) { .resizeImg .charicon img { height:67px !important; } }

@media (min-width:601px) { .charbox { width:100px; } .charname { height: 53px !important; } } @media (min-width:601px) { .resizeImg .charicon img { height:100px !important; } }

@media (max-width:800px) { .mw-gallery-packed .gallerybox { width:30% !important; } }