MediaWiki:Vector.css

From Diamond Records Wiki
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;
}