MediaWiki:Vector.css
Jump to navigation
Jump to search
Note: After saving, 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: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/* 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;
}
#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}
#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%;
}
#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 {
background-position: 0 0;
color: white !IMPORTANT;
text-decoration: none;
}
#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 {
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%;
}
/* 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;
}
#n-Stardust-Shooters-Wiki {filter: hue-rotate(125deg) saturate(69%) brightness(116%);}
#left-navigation, #right-navigation {
margin-top: 2em
}
#left-navigation li, #right-navigation li {
margin-right: 4px;
}
#ca-unwatch span, #ca-watch span {
padding: unset;
}
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}
#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;
}
#simpleSearch input {
color: #ccc;
}
.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 */
#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;
}
#filetoc {
border: 1px solid #1d1d1d;
background-color: #0e0b0f;
}
/* File Gallery */
li.gallerybox div.thumb {
border: 1px solid #363338;
background-color: #0e0b0f;
}
/* History View improvements */
#pagehistory li {
border: 0px solid #fff;
}
#pagehistory li.selected {
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;
}