MediaWiki:Vector.css

From Project Arrhythmia Wiki
Jump to navigation Jump to search

Note: After publishing, 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: Press Ctrl-F5.
/* All CSS here will be loaded for users of the Vector skin */

:root {
    --theme-body-dynamic-color-1: #fff;
    --theme-body-dynamic-color-1--rgb: 255,255,255;
    --theme-body-dynamic-color-2: #e6e6e6;
    --theme-body-dynamic-color-2--rgb: 230,230,230;
    --theme-page-dynamic-color-1: #fff;
    --theme-page-dynamic-color-1--rgb: 255,255,255;
    --theme-page-dynamic-color-1--inverted: #000;
    --theme-page-dynamic-color-1--inverted--rgb: 0,0,0;
    --theme-page-dynamic-color-2: #e6e6e6;
    --theme-page-dynamic-color-2--rgb: 230,230,230;
    --theme-sticky-nav-dynamic-color-1: #fff;
    --theme-sticky-nav-dynamic-color-1--rgb: 255,255,255;
    --theme-sticky-nav-dynamic-color-2: #e6e6e6;
    --theme-sticky-nav-dynamic-color-2--rgb: 230,230,230;
    --theme-link-dynamic-color-1: #000;
    --theme-link-dynamic-color-1--rgb: 0,0,0;
    --theme-link-dynamic-color-2: #3a3a3a;
    --theme-link-dynamic-color-2--rgb: 58,58,58;
    --theme-accent-dynamic-color-1: #000;
    --theme-accent-dynamic-color-1--rgb: 0,0,0;
    --theme-accent-dynamic-color-2: #3a3a3a;
    --theme-accent-dynamic-color-2--rgb: 58,58,58;
    --theme-body-background-color: #212121;
    --theme-body-background-color--rgb: 33,33,33;
    --theme-body-background-image: url(https://projectarrhythmia.wiki.gg/images/9/9a/Site-background-dark.png);
    --theme-body-text-color: #fff;
    --theme-body-text-color--rgb: 255,255,255;
    --theme-body-text-color--hover: #cccccc;
    --theme-sticky-nav-background-color: #0f1010;
    --theme-sticky-nav-background-color--rgb: 15,16,16;
    --theme-sticky-nav-text-color: #fff;
    --theme-sticky-nav-text-color--hover: #cccccc;
    --theme-page-background-color: #393939;
    --theme-page-background-color--rgb: 57,57,57;
    --theme-page-background-color--secondary: #575757;
    --theme-page-background-color--secondary--rgb: 87,87,87;
    --theme-page-text-color: #e6e6e6;
    --theme-page-text-color--rgb: 230,230,230;
    --theme-page-text-color--hover: #b3b3b3;
    --theme-page-text-mix-color: #909090;
    --theme-page-text-mix-color-95: #424242;
    --theme-page-accent-mix-color: #9c9c9c;
    --theme-page-headings-font: 'Rubik';
    --theme-link-color: #4faee0;
    --theme-link-color--rgb: 79,174,224;
    --theme-link-color--hover: #a5d5ef;
    --theme-link-label-color: #000;
    --theme-accent-color: #ffffff;
    --theme-accent-color--rgb: 255,255,255;
    --theme-accent-color--hover: #cccccc;
    --theme-accent-label-color: #000;
    --theme-border-color: #646464;
    --theme-border-color--rgb: 100,100,100;
    --theme-alert-color: #fe2b44;
    --theme-alert-color--rgb: 254,43,68;
    --theme-alert-color--hover: #fe909d;
    --theme-alert-color--secondary: #fe8694;
    --theme-alert-label: #000;
    --theme-warning-color: #cf721c;
    --theme-warning-color--rgb: 207,114,28;
    --theme-warning-color--secondary: #e79b54;
    --theme-warning-label: #000;
    --theme-success-color: #109d3f;
    --theme-success-color--rgb: 16,157,63;
    --theme-success-color--secondary: #14c64f;
    --theme-success-label: #000;
    --theme-message-color: #bd69ae;
    --theme-message-label: #000;
    --theme-community-header-color: #ffffff;
    --theme-community-header-color--hover: #cccccc;
    --theme-background-image-opacity: 100%;
    --theme-page-text-opacity-factor: 0.7;
    --theme-body-text-opacity-factor: 0.7;
    --theme-pa-box-background: rgba(255,255,255,0.05);
    --theme-pa-box-background-hover: rgba(255, 255, 255, 1);
}

body {
	background-color: #202020;
	color: #fff;
	background-image: linear-gradient(#2020208f,#202020),url(https://projectarrhythmia.wiki.gg/images/9/9a/Site-background-dark.png);
    background-size: 825px 500px, 825px 447px;
    background-repeat: repeat-x;
}
table { display: table; }

#mw-page-base { background: none; }

div#content { 
	background-color: #2c2c2c; 
	color: #e9e9e9;
	border-color: #ef4667;
}

h1, h2, h3, h4, h5, h6 { 
	color: #e9e9e9;
}

#p-logo a { background-size: contain; }

.mp-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 15px;
}

.mp-left {
	flex: 4;
}

.mp-right {
	flex: 1 275px;
}

.slideshow div { text-align:center; }
.slideshow div > a { 
	display:block;
	margin-bottom: 10px;
}

pre, code, .mw-code { filter: invert(1); }

.mw-editform #wpTextbox1,
.ace-tm {
    background-color: #202020;
    color: #fff;
}

.ace-tm .ace_gutter {
    background: #303030;
}

.ace-tm .ace_gutter-active-line {
    background-color: #484848;
}

.ace-tm .ace_cursor {
    color: #fff;
}
.ace-tm .ace_storage, .ace-tm .ace_keyword,
.ace-tm .ace_constant.ace_numeric { color: #aaaae1; }
	
.mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited,
a:visited,
.vector-menu-portal .vector-menu-content li a:visited {
    color: #7467ff;
}
a,
.mw-parser-output a.external,
.vector-menu-portal .vector-menu-content li a,
.vector-menu-tabs li a,
.vector-menu-dropdown .mw-list-item a {
    color: #4289ff;
}
.vector-menu-dropdown .vector-menu-heading,
.vector-menu-tabs .selected a, .vector-menu-tabs .selected a:visited { color: #fff; }
.vector-menu-dropdown .vector-menu-heading:after { filter:invert(1); }
.editOptions {
    background-color: #3c3c3c;
    color: #fff;
}

#footer-info li,
.vector-menu-portal .vector-menu-heading { color: #fff; }

.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading { background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#ef4667 100%); }
.vector-menu-dropdown, .vector-menu-tabs li { background-image: linear-gradient(to top,#ef4667 0,#3e3e3e 3px,#202020 100%); }
.vector-menu-tabs .selected {
    background-image: linear-gradient(to top,#2c2c2c,#3e3e3e);
}

.vector-menu-dropdown .vector-menu-content {
    background-color: #3e3e3e;
    border-color: #232323;
}
.toc, .toccolours,
#mw-searchoptions,
.mw-changeslist-legend, .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend,
.catlinks { background-color: #232323; }
#searchInput {
    background-color: rgb(255 255 255 / 8%);
}

ul {
	list-style-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="13"><circle cx="2.5" cy="9" r="2.5" fill="#fff"/></svg>');
}

/*Wiki CSS IS BACK FOR MORE with VECTOR!*/
/*Apply PA Button style to...actual buttons*/
.mw-ui-button {
font-family: 'Inconsolata';
    background-color: var(--theme-pa-box-background);
    border: 0px;
}
.mw-ui-button:hover {
	background-color:rgba(255, 255, 255, 1);
	color:rgba(0, 0, 0, 1);
}

/*Make level select template look like PA buttons.*/
.PAHoverButton:hover {
	background-color:rgba(255, 255, 255, 1);
	color:rgba(0, 0, 0, 1);
}
/*make those headers look like PA's menu.*/
.mw-headline{
	font-family:Inconsolata;
	text-transform:uppercase;
	border-bottom:none; 
}

.skin-vector h2 > span.mw-headline {
	color:#111111;
	background-color:#f2f2f2;
	width:100%;
	padding-left: 5px;
	padding-right: 5px;
	border-bottom:none;
}
/*infoboxes are cool.*/
aside.portable-infobox > h2
{
	font-family:Inconsolata;
	text-transform:uppercase;
}
/*sliders go brr */

.fandom-slider__nav{
background-color:rgba(66, 66, 66, 0.5);
}

/*Gallerys are cool.*/
.skin-vector .lightbox-caption{
	color:rgba(224, 224, 224, 0.75);
}
/*slightly bigger text with indentation for <blockquote>*/
blockquote{
    text-indent:20px;
    font-size: 110%;
}
/*Make level select template look like PA buttons.*/
.PAHoverButton:hover {
	background-color:rgba(255, 255, 255, 1);
	color:rgba(0, 0, 0, 1);
}
/*make those headers look like PA's menu.*/
.mw-headline{
	font-family:Inconsolata;
	text-transform:uppercase;
	border-bottom:none; 
}

.skin-vector h2 > span.mw-headline {
	color:#111111;
	background-color:#f2f2f2;
	width:100%;
	padding-left: 5px;
	border-bottom:none;
}

/*infoboxes are cool.*/
aside.portable-infobox > h2
{
	font-family:Inconsolata;
	text-transform:uppercase;
}
/*sliders go brr */

.fandom-slider__nav{
background-color:rgba(66, 66, 66, 0.5);
}
/* SIDE PANEL SHENANIGANS */
/*Replace the pink gradient lines with dashed white ones*/
.vector-menu-portal .vector-menu-heading{
	background-image: none;
    border-bottom: 2px dashed white;
}
/* Making the side panel look more like the PA menu.*/
#mw-panel{
	font-family:Inconsolata;
}
#mw-panel > .mw-portlet > .vector-menu-content > li.mw-list-item
{
	text-transform:uppercase;
	color:#f2f2f2;
	width:100%;
	padding-left: 5px;
	border-bottom:none;
} 
#mw-panel > .mw-portlet > .vector-menu-content > li.mw-list-item:hover{
	background-color:#f2f2f2;
	color:#111111;;
}
/* Make the headings on the side navigation look cool */
.vector-menu-heading{
	text-align: left;
    font-weight: bold;
    font-size: 110%;
    border-bottom: 2px dashed white;
}
/* oops this messes up the more tab */
#p-cactions-label{
	border-bottom:none;
}
/*Now make them look cooler (more like the menu, with text color and background colors)*/
.vector-menu-portal .vector-menu-content li {
	color: #fafafa;
	background-color: var(--theme-pa-box-background);
	padding-left: 5px;
}
.vector-menu-portal .vector-menu-content li:hover {
	    color: black;
	    background-color:#fafafa;
}
.vector-menu-portal .vector-menu-content li a{
	color:inherit;
}
.vector-menu-portal .vector-menu-content li a:visited{
	color:inherit;
}
/* Inconsolata on top heading */
#firstHeading{
	font-family:Inconsolata;
	font-weight:bold;
}
/*gallerys are cool.*/
.skin-vector .lightbox-caption{
	color:rgba(224, 224, 224, 0.75);
}
/*slightly bigger text with indentation for <blockquote>*/
blockquote{
    text-indent:20px;
    font-size: 110%;
}

/*Shadows on certain images. Use a <span> with the proper class to get this on any images you'd like.*/
span.shadowimg > a.image > img {
	    filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.5));
}
span.shadowimg > a > img {
	    filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.5));
}
/***uhh not sure what to name this section yet tbh***/
/*Make text showing changes in revisions visible*/
.diffchange {
	color:black;
}
/***MAIN PAGE***/
/*Main Page Header*/
.mp-header{
	font-size:22px; 
	font-weight:bold; 
	font-family:inconsolata;
	border-bottom:2px dashed white;
	width: 100%;
}
/*Main page box outline*/
.mp-box {
    padding: 7px;
    margin: 7px;
}

.mp-background {
    background-color: var(--theme-pa-box-background);
}

.mp-biglink {
    width: fit-content;
    padding: 9px;
    margin: 2px;
    color: #fafafa;
    background-color: var(--theme-pa-box-background);
    padding-left: 9px;
    font-family: inconsolata;
    font-weight: bold;
}
.mp-biglink:hover {
    background-color: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 1);
}

/*Markers, temporary*/
body.skin-vector .marker { background-color: #545050 !important; }

.portable-infobox {
    --pi-background: var(--theme-page-background-color);
    --pi-secondary-background: var(--theme-accent-color);
    --pi-secondary-background--label: var(--theme-accent-label-color);
    --pi-border-color: rgba(var(--theme-accent-color--rgb),0.5);
}

.pi-background {
    background-color: var(--pi-background);
}

.pi-secondary-background {
    background: var(--pi-secondary-background);
    color: var(--pi-secondary-background--label);
}

li.gallerybox div.thumb {
    border-color: rgba(255,255,255,0.00);
    background-color: var(--theme-pa-box-background);
}

.mwe-math-fallback-image-inline { filter: invert(1); }

.tabber__tab, .tabber__tab:visited { color: #c1c1c1; }
.tabber__tab--active, .tabber__tab--active:visited { color: #fff; }
Retrieved from "https://projectarrhythmia.wiki.gg/index.php?title=MediaWiki:Vector.css&oldid=11011"