MediaWiki:Mobile.css

From JoJo's Bizarre Encyclopedia - JoJo Wiki
Revision as of 20:12, 14 July 2020 by Paisley Park (talk | contribs)
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;
}
Retrieved from "http://jojowiki.com/index.php?title=MediaWiki:Mobile.css&oldid=412485"