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.
/* CSS placed here will affect users of the mobile site */
html, body {
background-image: none !important;
}
.overlay-enabled, #content {
background: url(https://static.jojowiki.com/images/customizations/Jojobg.png);
}
/* Navbox Mobile */
/* Only for desktop devices */
.nomobile {
display:none;
}
.tabber .tabbertab {
border: none !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;
color: #3a3a3a;
}
.mw-headline {
font-family: 'Rubik',sans-serif;
text-transform: uppercase;
padding-top: 10px;
font-weight: 500;
letter-spacing: 2px;
color: #3a3a3a;
}
.mw-body-content {
font-family: "Trebuchet MS";
}
/*******************
Colors
*******************/
#mw-content-text a.new {
color: #ff0000;
font-style: italic;
}
#mw-content-text a {
color: #d10e7b;
}
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;
}
.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;
}
.diamond {
background-image:url('https://static.jojowiki.com/images/customizations/DiamondBG.png') !important;
background-position: center;
background-blend-mode: soft-light;
}
.diamond2 {
background-image:url('https://static.jojowiki.com/images/customizations/DiamondBG.png') !important;
background-position: center;
background-blend-mode: soft-light;
}
.diamondgradient {
background-image:linear-gradient(rgba(234, 90, 232, 0.52), rgba(116, 21, 205, 0.52)), url('https://static.jojowiki.com/images/customizations/DiamondBG.png') !important;
background-position: center;
background-blend-mode: multiply;
}
.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/customizations/DiamondBG.png') !important;
background-position: center;
background-blend-mode: soft-light;
border: 1px solid #aaaaaa;
}
.cquote tr > td {
border: none !important;
}
.cquote tr > th {
border: none !important;
}
/**********************************/
/* 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: 85%;
clear: both;
padding: 2px;
border-spacing: 0;
border: 3px solid #000;
line-height: 18px;
}
.navbox a {
color: #51045d !important;
}
/* Merges navboxes that are directly under eachother */
.navbox + .navbox {
margin-top: -11px;
}
.navbox .navbox-title {
background: #9da1c0;
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: #c7d2ff;
text-align: center;
}
.navbox .navbox-image {
background: #000;
text-align: center;
}
.navbox .navbox-group,
.navbox .navbox-header {
background: #a7a5de;
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;
}
.navbox .navbox-group,
.navbox .navbox-image-left {
border-right: 2px solid #000;
}
.navbox-image-right {
border-left: 2px solid #000;
}
.navbox .navbox-list {
background: #c7d2ff;
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 !important;
}
@media (max-width: 720px) {
.content table {
display: table;
}
}
.header {
background-color: #c4bfdc;
background-image: url(https://static.jojowiki.com/images/customizations/DiamondBG.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(https://static.jojowiki.com/images/customizations/DiamondBG.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: 0;
text-decoration: none;
}
.parenttabs a.mw-selflink {
color: white !important;
}
@media (max-width:450px) {
.parenttabs {
font-size: 80% !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: 'Rubik',Tahoma,Trebuchet MS,sans-serif;
}
.pre-content h1, .content h1 {
font-family: 'Rubik',Tahoma,Trebuchet MS,sans-serif!important;
font-size: 1.45em !important;
font-weight: bold !important;
text-align: center !important;
}
.content h2 {
font-family: Rubik !important;
}
.portable-infobox .pi-background {
/* The background underneath the entire infobox. */
background-color: #F0F0F0;
}
.portable-infobox .pi-data-value .image img {
margin-left: auto;
margin-right: auto;
display: block;
}
.portable-infobox .pi-secondary-background {
/* The background behind headers and navigation. */
background: #c1bcd9;
}
.portable-infobox.pi-theme-statinfo {
float:unset !important;
margin-left:-5px;
border: none;
border-radius: unset;
}
.portable-infobox .pi-title {
color: #000;
background-image:url('https://static.jojowiki.com/images/customizations/DiamondBG.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;
font-family: 'Rubik';
}
.header .search-box {
padding-left: 15px;
}
.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: 40% !important;
}
.charname {
height: 45px !important;
padding-bottom: 15% !important;
font-size: 75% !important;
line-height: 1.3 !important;
}
.charstand {
font-size: 65% !important;
}
}
.noshadow .charicon img {
box-shadow:none !important;
}
.castImg .image img, .castImg .image-lazy-loaded {
max-width: 80px !important;
max-height: 80px !important;
}
@media (max-width:600px) {
.resizeImg .charicon img {
height:67px !important;
width: auto;
}
.resizeImg .fadeout img {
height:67px !important;
width: 67px !important;
}
.resizeImg .fadein img {
height:67px !important;
width: 67px !important;
}
}
.resizeImg2 img {
max-height: 67px;
width: auto !important;
max-width: 67px;
}
@media (min-width:601px) {
.charbox {
width:100px;
}
.charname {
line-height:1.5 !important;
padding:5% 0 !important;
height:60px !important
}
}
@media (min-width:601px) {
.resizeImg .charicon img {
height:100px !important;
width: auto;
}
}
@media (max-width:800px) {
.mw-gallery-packed .gallerybox {
width:30% !important;
}
}
.chariconbg .diamond {
background-image: none !important;
}
/* Comments */
.full {
width: auto;
}
.reply {
width: auto;
}
.f-message {
width: auto;
}
.r-message {
width: auto;
}
textarea#comment {
max-width: 300px;
}
.pppfullbox {
zoom: 85%;
}
.skin-minerva .portable-infobox {
font-size: 90%;
box-shadow: 0px 0px 7px #c5c5c5;
}
.skin-minerva .portable-infobox .pi-item-spacing {
padding: 0;
}
.skin-minerva .portable-infobox .pi-data .pi-data-label {
padding-left: 5px;
}
.portable-infobox a > img {
max-width:unset !important;
width: 100%;
}
.portable-infobox.pi-theme-PhantomBlood .pi-title, .portable-infobox.pi-theme-PhantomBlood .pi-header {
background: #3055A1;
color: white;
}
.portable-infobox.pi-theme-BattleTendency .pi-title, .portable-infobox.pi-theme-BattleTendency .pi-header {
background: #952F58;
color: white;
}
.portable-infobox.pi-theme-StardustCrusaders .pi-title, .portable-infobox.pi-theme-StardustCrusaders .pi-header {
background: #1b3f95;
color: white;
}
.portable-infobox.pi-theme-DiamondIsUnbreakable .pi-title, .portable-infobox.pi-theme-DiamondIsUnbreakable .pi-header {
background: #78a4cd;
color: white;
}
.portable-infobox.pi-theme-VentoAureo .pi-title, .portable-infobox.pi-theme-VentoAureo .pi-header {
background: #E15FB6;
color: white;
}
.portable-infobox.pi-theme-StoneOcean .pi-title, .portable-infobox.pi-theme-StoneOcean .pi-header {
background: #842D85;
color: white;
}
.portable-infobox.pi-theme-SteelBallRun .pi-title, .portable-infobox.pi-theme-SteelBallRun .pi-header {
background: #D4813D;
color: white;
}
.portable-infobox.pi-theme-JoJolion .pi-title, .portable-infobox.pi-theme-JoJolion .pi-header {
background: #53A599;
color: white;
}
.portable-infobox.pi-theme-OneShot .pi-title, .portable-infobox.pi-theme-OneShot .pi-header {
background: #0068B8;
color: white;
}
.portable-infobox.pi-theme-Jorge .pi-title, .portable-infobox.pi-theme-Jorge .pi-header {
background: #49885d;
color: white;
}
.portable-infobox.pi-theme-Baoh .pi-title, .portable-infobox.pi-theme-Baoh .pi-header {
background: #4b8ac4;
color: white;
}
.portable-infobox.pi-theme-Irene .pi-title, .portable-infobox.pi-theme-Irene .pi-header {
background: #D58C00;
color: white;
}
.charstand a {
color: white !important;
}
/* Logos */
.page-Phantom_Blood .page-heading {
background-image:url(https://static.jojowiki.com/images/b/b4/Phantom_Blood_Logo.png);
height: 75px;
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
.page-Phantom_Blood .page-heading i {
display: none !important;
}
.page-Battle_Tendency .page-heading {
background-image:url(https://static.jojowiki.com/images/6/60/Battle_Tendency_Logo.png);
height: 70px;
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
.page-Battle_Tendency .page-heading i {
display: none !important;
}
.page-Stardust_Crusaders .page-heading {
background-image:url(https://static.jojowiki.com/images/b/b6/Stardust_Crusaders_Logo.png);
height: 60px;
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
.page-Stardust_Crusaders .page-heading i {
display: none !important;
}
.page-Diamond_is_Unbreakable .page-heading {
background-image:url(https://static.jojowiki.com/images/8/8c/Diamond_is_Unbreakable_Logo.png);
height: 60px;
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
.page-Diamond_is_Unbreakable .page-heading i {
display: none !important;
}
.page-Vento_Aureo .page-heading {
background-image:url(https://static.jojowiki.com/images/3/30/Vento_Aureo_Logo.png);
height: 75px;
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
.page-Vento_Aureo .page-heading i {
display: none !important;
}
.page-Stone_Ocean .page-heading {
background-image:url(https://static.jojowiki.com/images/7/79/Stone_Ocean_Logo.png);
height: 75px;
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
.page-Stone_Ocean .page-heading i {
display: none !important;
}
.page-Steel_Ball_Run .page-heading {
background-image:url(https://static.jojowiki.com/images/d/d9/Steel_Ball_Run_Logo.png);
height: 75px;
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
.page-Steel_Ball_Run .page-heading i {
display: none !important;
}
.page-JoJolion .page-heading {
background-image:url(https://static.jojowiki.com/images/5/59/JoJolion_Logo.png);
height: 75px;
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
.page-JoJolion .page-heading i {
display: none !important;
}
.mnimage {
display: block !important;
}
.mncolumn2 {
display: table-row;
}
.popup {
border-bottom: 1px dotted;
position: relative;
}
.popup .title {
position: absolute;
top: 20px;
background: silver;
padding: 4px;
left: 0;
white-space: nowrap;
}
.tb {
display: table !important;
}
.frontbuttons {
width: 100px !important;
}
.imagebox {
width: 100px !important;
font-size: 70%;
}
.imageboxb {
height: 80px !important;
}
.frontbuttons img {
width: 100px;
height: 100px;
}
/* FONTS */
/* bangers-regular - vietnamese_latin-ext_latin */
@font-face {
font-family: 'Bangers';
font-style: normal;
font-weight: 400;
src: local('Bangers Regular'), local('Bangers-Regular'),
url('../fonts/bangers-v12-vietnamese_latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/bangers-v12-vietnamese_latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
font-display: swap;
}
/* lato-regular - latin-ext_latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'),
url('../fonts/lato-v16-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/lato-v16-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
font-display: swap;
}
/* quicksand-regular - vietnamese_latin-ext_latin */
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 400;
src: local(''),
url('../fonts/quicksand-v20-vietnamese_latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/quicksand-v20-vietnamese_latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
font-display: swap;
}
/* raleway-regular - latin-ext_latin */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: local('Raleway'), local('Raleway-Regular'),
url('../fonts/raleway-v14-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/raleway-v14-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
font-display: swap;
}
/* roboto-slab-regular - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
@font-face {
font-family: 'Roboto Slab';
font-style: normal;
font-weight: 400;
src: local(''),
url('../fonts/roboto-slab-v11-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/roboto-slab-v11-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
font-display: swap;
}
/* rubik-regular - latin-ext_latin_hebrew_cyrillic */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
src: local('Rubik'), local('Rubik-Regular'),
url('../fonts/rubik-v9-latin-ext_latin_hebrew_cyrillic-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/rubik-v9-latin-ext_latin_hebrew_cyrillic-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
font-display: swap;
}
.tabs.tabs-tabbox {
display: contents !important;
}