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; border: #000; color: #423232; }

.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: #613f71; --global-secondary-color: #281a2f; --global-tertiary-color: #c380db; --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/c/c6/BackgroundSIO.png); background-repeat: no-repeat; background-color: #0d0b0e }

/* Color & other looks */ h1, h2, h3, h4, h5, h6 {color: #fff}

.mw-body {border:1px solid var(--global-color) !important} .headers {background-color: #2b1f30 !IMPORTANT;}

.mw-body, .parsoid-body { background-color: #0e0b0f; color: #b7b7b7 }

a, a:visited, div#mw-panel a:visited, div#mw-panel a {color:var(--global-tertiary-color) !IMPORTANT} a.new {color:#ff5656 !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}

pre, .mw-code { color: #fff; background-color: #0c0c0c; border: 1px solid #393939; }

.mw-specialpage-summary div img { filter: hue-rotate(65deg) brightness(70%) }

.mw-specialpage-summary > div { border: solid 3px var(--global-color) !IMPORTANT } /* Tuke, change the color as you wish */ .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle, a.oo-ui-buttonElement-button, a.oo-ui-buttonElement-button, .mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget { border: 0px !IMPORTANT; background-color: #171717 !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, table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td { background-color: #000 }

table.wikitable, table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td { border: 1px solid #1b1b1b; background-color: #0e0b0f }

table.statueslist tbody tr th, table.statueslist h3 { background: #281a2f; }

table.statueslist td, table.statueslist th { color: #ccc; }

.mw-body .firstHeading, .mw-body h1, .mw-body-content h1, .mw-body-content h2, .mw-body-content h3, .mainheader { color: #ccc }

.toc, .mw-warning, .toccolours, div.thumbinner, html .thumbimage, .catlinks, .tabtoc li.selected, .tabtoc li, .tabcontainer { border: 1px solid #292929; background-color: #0e0b0f; }

table.wikitable, table.statueslist { color:black }

.border-collapse { color: black }

table.wikitable, table.statueslist { color:#ccc }

.mw-body .firstHeading { display: none } .mw-editform .editOptions { color:#ccc; background-color:#0e0b0f; border-color:#0e0b0f } .mw-editform #wpTextbox1 { color:#ccc; background-color:#0e0b0f; border-color:#2a222d }

.oo-ui-textInputWidget.oo-ui-widget-enabled input, .oo-ui-textInputWidget.oo-ui-widget-enabled textarea { color:#ccc; background-color:#0e0b0f; border-color:#2a222d }

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

color: #ccc; }
 * 1) simpleSearch input {

.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 #1b1b1b !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; }

/* Search Tabs */ .mw-search-profile-tabs { background-color: #0e0b0f; margin-top: 1em; border: 1px solid #0e0b0f; border-radius: 2px; } /* Upload Page */ code { color: #ccc; background-color: #0e0b0f; border: 1px solid #383838; }

border: 1px solid #1d1d1d; background-color: #0e0b0f; } /* File Gallery */ li.gallerybox div.thumb { border: 1px solid #363338; background-color: #0e0b0f; } /* History View improvements */ border: 0px solid #fff; }   background-color: #221c26; color: #cbcbcb; border: 1px dashed #414141; } /* Writing color changes /* .tool.oo-ui-buttonElement-frameless.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon { background-color: white; } .wikiEditor-ui .wikiEditor-ui-view { border: 1px solid #281a2f; } .wikiEditor-ui-toolbar background-image: linear-gradient(#281a2f 0,#281a2f 32px); } .wikiEditor-ui-toolbar .group { border-right: 1px solid #281a2f; } .wikiEditor-ui .wikiEditor-ui-top { position: relative; border-bottom: 1px solid #0d0b0e; }
 * 1) filetoc {
 * 1) pagehistory li {
 * 1) pagehistory li.selected {