MediaWiki:Vector.css

/* JoJo Diamond Records Wiki's customized Vector theme */

/* Font */ @import url('https://fonts.googleapis.com/css?family=Open+Sans');

.mw-body h1, .mw-body-content h1, .mw-body-content h2, .mw-body-content h3, .mainheader { font-family: 'Open Sans','Linux Libertine','Georgia','Times',serif; }

.mw-body h1, .mw-body-content h1 { font-size: 2em; }

.mw-body-content h3, .mw-body-content h4 { font-weight: normal; font-size: 25px; }

/* Global color variable */
 * root {

--global-color: #b07fc5; --global-secondary-color: #dec8e6; --global-tertiary-color: #b377d1; --global-user-admin: #a1e44c; }


 * 1) OpenGraph {display:none}

/* Animations */ @keyframes scale { from {transform: scale(1);} to { transform: scale(1.7); }} @keyframes reversescale { from {transform: scale(1.7);} to { transform: scale(1); }}

div#mw-panel {position: fixed;}

.mw-wiki-logo {background-image: url(//images.shoutwiki.com/jojodiamondrecords/b/ba/JoJoDRLogo.png);} body {background-image: url(//images.shoutwiki.com/jojodiamondrecords/2/26/Background.png); background-attachment: fixed;}

/* Color & other looks */ .mw-body {border:1px solid var(--global-color) !important} .headers {background-color:var(--global-color) !important}

a, a:visited, div#mw-panel a:visited, div#mw-panel a {color:var(--global-tertiary-color) !IMPORTANT} a.new {color:#ad4e4e !IMPORTANT}

table.ambox {margin: 0px 10%;}

.centered {width:100%} .centered img {display:block; margin:0 auto} .schedule {position: relative; font-size: 10px;} .schedule a.external {background-image:none !IMPORTANT; padding-right:0 !IMPORTANT}

.gashaFrame { pointer-events: none; border-image: url(//images.shoutwiki.com/jojodiamondrecords/3/3b/Frame2cut.png) 34 round !important; border: 19px solid transparent; width: 369px; height: 173px; z-index: 9; position: relative; top: -206px; margin: 0 auto; }

.parent div.zoom img {position: relative;}

.zoom img { width: 77px !IMPORTANT; height: 77px !IMPORTANT; image-rendering: -webkit-optimize-contrast;}

.parent:hover {z-index: 2;}

.parent div.zoom img {animation: reversescale .2s ease-in-out forwards;}

.parent:hover div.zoom img { z-index:3; animation: scale .2s ease-in-out forwards; image-rendering: -webkit-optimize-contrast; }

div.vectorTabs, div.vectorTabs span, div.vectorTabs ul li, div.vectorTabs li.selected, #catlinks li::before, #ca-edit li::before, #p-cactions-label, div.vectorTabs ul {background-image:none}

div.header-container {float:left;width:553px}

div.vectorTabs span {background:linear-gradient(#ffffff, var(--global-color))} table.wikitable > tr > th, table.wikitable > * > tr > th {background-color:var(--global-secondary-color)} table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td {border:1px solid var(--global-secondary-color)} table.wikitable, table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td {border:1px solid #dec8e6;} div#content {border:1px solid var(--global-secondary-color) !important}

div#content {margin-right:15px !important; min-width: 600px !important}
 * 1) mw-page-base {background:rgba(0,0,0,0) !IMPORTANT}

div#mw-panel div.portal div.body ul li a:hover { background-position: 0 0; color: white !IMPORTANT; text-decoration: none; }

div#mw-panel div.portal div.body ul li a { padding: 10px 15px; background-image: linear-gradient(to left, var(--global-secondary-color), var(--global-secondary-color) 50%, var(--global-color) 50%, var(--global-color)); display: block; transition: all .75s ease; transform-origin: right; background-position: 97% 0; background-size: 200% 100%; }

background-position: 0 0; color: white !IMPORTANT; text-decoration: none; }
 * 1) ca-nstab-main a:hover, #ca-talk a:hover, #ca-view a:hover, #ca-edit a:hover, #ca-history a:hover, #ca-watch span:hover, #ca-unwatch span:hover, #ca-nstab-special a:hover, #ca-nstab-image a:hover, #ca-nstab-category a:hover, #ca-nstab-help a:hover, #ca-nstab-template a:hover, #ca-nstab-mediawiki a:hover, #p-cactions:hover, #p-cactions:hover span, #ca-viewsource a:hover, #ca-nstab-user a:hover, #ca-addsection a:hover, #ca-nstab-module a:hover {

padding: 8px 12px; background-image: linear-gradient(to top,var(--global-secondary-color),var(--global-secondary-color) 50%,var(--global-color) 50%,var(--global-color)); display: block; transition: all .75s ease; transform-origin: top; background-position: 0% 90%; background-size: 100% 200%; }
 * 1) ca-nstab-main a, #ca-talk a, #ca-view a, #ca-edit a, #ca-history a, #ca-watch span, #ca-unwatch span, #ca-nstab-template a, #ca-nstab-special a, #ca-nstab-category a, #ca-nstab-image a, #ca-nstab-help a, #ca-nstab-mediawiki a, #p-cactions, #ca-viewsource a, #ca-nstab-user a, #ca-addsection a, #ca-nstab-module a {

/* Admin Colors */ .mw-userlink[title="User:DioJoestar"], .mw-userlink[title="User:Tuke."], .mw-userlink[title="User:Plaub"] { color: var(--global-user-admin) !important; font-weight: bold; }


 * 1) n-Stardust-Shooters-Wiki {filter: hue-rotate(125deg) saturate(69%) brightness(116%);}

margin-top: 2em }
 * 1) left-navigation, #right-navigation {

margin-right: 4px; }
 * 1) left-navigation li, #right-navigation li {

padding: unset; }
 * 1) ca-unwatch span, #ca-watch span {

div#mw-head div.vectorMenu h3 { height: 1.5em; padding: 0; margin: 0; background-image:none; }

div.vectorMenu h3 span { display: unset; padding-left: 0; margin-right: 0; color: var(--global-color); }

div#simpleSearch {border:0;margin-top:0}
 * 1) searchform {margin-top: 0 !IMPORTANT;}

div#simpleSearch #searchInput { background: var(--global-secondary-color); border-top: 4px solid var(--global-color); padding: 10px; }

div#simpleSearch #searchButton { margin-top: 8px; }

.ifmobile {display:none !IMPORTANT}

@media screen and (max-width: 1360px) { .clearContent {display:block !IMPORTANT} }

@media screen and (max-width: 1899px) { div.header-container {width:50% !IMPORTANT} }

@media screen and (max-width: 1346px) { div.header-container {width:100% !IMPORTANT} }

@media screen and (max-width: 1346px) and (orientation: landscape) { div.header-container {width:50% !IMPORTANT;} }

@media screen and (max-width: 1910px) { .tabcontainer {width:65% !IMPORTANT;} }

@media screen and (max-width: 1850px) { .tabcontainer {width:61% !IMPORTANT;} }

@media screen and (max-width: 1660px) { .tabcontainer {width:59% !IMPORTANT;} }

@media screen and (max-width: 1605px) { .tabcontainer {width:54% !IMPORTANT;} }

@media screen and (max-width: 1455px) { .tabcontainer {width:48% !IMPORTANT;} }

@media screen and (max-width: 1300px) { .tabcontainer {width:45% !IMPORTANT;} }

@media screen and (max-width: 1024px) { div.header-container {width:100% !IMPORTANT;} .tabcontainer {width:100% !IMPORTANT;} }

/* Fix default CSS when mobile */ @media screen and (max-width: 720px) { div#mw-head {position: absolute !IMPORTANT; margin: 0 !IMPORTANT} div#simpleSearch {margin: 0 !important;width: 55vw} div#p-search {margin-right: 10px; width: unset !IMPORTANT} div#mw-navigation div#mw-panel .portal {width: unset} div#mw-panel li a { padding: 17px 0 17px 0; display: block; background-color: #f8f9fa; text-align: center; font-size: 25px; border: 1px solid var(--global-color) !important; }	div#mw-panel li a:hover {text-decoration: none;} div#simpleSearch #searchInput {IMPORTANT;height: 40px;} #p-search {position: relative !IMPORTANT; float: right !IMPORTANT; top:2.5em !IMPORTANT} .infobox {margin: 0px auto !IMPORTANT; float: unset !IMPORTANT;} }

/* On a phone */ @media screen and (max-width: 450px) { body {zoom:50%} div#content {padding-top:50px; margin-right:-1px !important; margin-top: 35px !IMPORTANT;} #mw-page-base {height:45px !IMPORTANT} #p-search {margin-left:5px !IMPORTANT} #mw-navigation {min-width: 620px !IMPORTANT} .ifmobile {display:block !IMPORTANT} .tabcontainer.jstabs {width: 94% !IMPORTANT;} }

/* Nav Menu at bottom Landscape */ @media screen and (max-width: 812px) (orientation: landscape) { body {zoom:50% !IMPORTANT} div#content {padding-top:50px; margin-right:0px !important;} .ifmobile {display:block !IMPORTANT} .nomobile {display:none !IMPORTANT} .ifmobilemedal {width:100% !IMPORTANT;margin: 0 auto !IMPORTANT;float: unset !IMPORTANT;} #mw-page-base {height:45px !IMPORTANT} #p-search {margin-left:5px !IMPORTANT} div#mw-panel li a { padding: 17px 0 17px 0; display: block; background-color: #f8f9fa; text-align: center; max-width: 790px !IMPORTANT; font-size: 25px; border: 1px solid var(--global-main-color) !important; }	div#mw-panel li a:hover {text-decoration: none;} #mw-navigation {min-width: 620px !IMPORTANT} div#mw-panel #p-logo + div.portal div.body {margin: 0 !IMPORTANT} }

table.statueslist {background-color: #fff !IMPORTANT;} table.statueslist {color: #4d5763 !IMPORTANT;} table.statueslist tbody tr th, table.statueslist h3 {background: #444 !IMPORTANT; color: white !IMPORTANT;} table.statueslist td, table.statueslist th {border: 1px solid #e5e3da !IMPORTANT;} table.statueslist h3 {padding-top:0}

/* Remove Ads */
 * 1) vector-leaderboard-ad, #column-google, #aswift_2_expand, #aswift_1_expand, #aswift_3_expand, #p-ads-left, #google_ads_frame1, #google_ads_frame2, #google_ads_frame3, #aswift_2_anchor, #column-google, #aswift_3_anchor, #aswift_1_anchor, #p-ShoutWiki_messages, div.vectorMenu h3 a {display:none !IMPORTANT}

/* Test */ .tabtoc, .tabcontainer {clear: unset !IMPORTANT;} .tabtoc {padding-bottom: 30px !IMPORTANT;}

.header-container h2 { text-align: center; }