MediaWiki:Vector.css

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

/* Global color variable */
 * root {

--global-color: #b154b1; --global-secondary-color: #e6b0e6; --global-tertiary-color: # }

/* 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);}

/* 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-color) !IMPORTANT} a.new {color:#ad4e4e !IMPORTANT}

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

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

.zoom img { width: 77px !IMPORTANT; height: 77px !IMPORTANT;}

.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-secondary-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)} 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 {

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 {


 * 1) n-Stardust-Shooters-Wiki {filter: hue-rotate(114deg) saturate(54%) brightness(117%);}

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

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

/* On a phone */ @media screen and (max-width: 450px) { body {zoom:50%} div#content {padding-top:50px; margin-right:-1px !important;} #mw-page-base {height:45px !IMPORTANT} #p-search {margin-left:5px !IMPORTANT} #mw-navigation {min-width: 620px !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}