Toggle menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.
This wiki has had no edits or log actions made within the last 45 days and has been automatically marked as inactive. If you would like to prevent this wiki from being closed, please start showing signs of activity here. If there are no signs of this wiki being used within the next 15 days, this wiki will be closed in accordance to the Dormancy Policy (which all wiki founders accept when requesting a wiki). If this wiki is closed and no one reopens it 135 days from now, this wiki will become eligible for deletion. Note: If you are a bureaucrat, you can go to Special:ManageWiki and uncheck "inactive" yourself.

MediaWiki:Vector.css

MediaWiki interface page
Revision as of 07:32, 8 March 2024 by Eatyourglory (talk | contribs) (Fixed background by encoding it into base64)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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 */
/* CSS from https://miaruniverse.miraheze.org/wiki/MediaWiki:Vector.css */

/*
==================
		root		
==================
*/

:root {
    --bg: #1e0c1b;
    --text: #1e0c1b;
    --primary: #990085;
    --secondary: #faebed;
    --accent: #FF7F67;
    --accent-text: #94056e;
    --accent-opacity: #ff7f6733;
    --shadow-vignette: inset 0 0 10em 1em var(--accent-opacity);
    --shadow-sticky: 0px 1em 1em -1em var(--accent), 0px 2em 2em -2em var(--primary);
    --shadow-inside: inset 0px 1em 1em -1em var(--accent), inset 0px 2em 2em -2em var(--primary);
    --shadow-outside: 0 0 2px 3px var(--accent), 0px 0 1em 0.25em var(--accent), 0px 0 2em 0.5em var(--primary);
    --shadow-scrollbar-thumb: inset 0px 0 5px 0px var(--accent), inset 0px 0 5px 2px var(--primary), 0px 0 10px 2px var(--accent), 0px 0 10px 4px var(--primary);
    --shadow-scrollbar-track: inset 0px 0 4px 1px var(--accent), inset 0px 0 5px 3px var(--primary);
    --mix: rgb(255, 255, 255);
    --contrast: color-mix(in lab, currentColor 15%, var(--mix));
    --warning-contrast: color-mix(in lab, currentColor 50%, var(--mix));
    --notice-text-alert: #bd1713;
    --notice-text-comic: #905c13;
    --notice-text-novel: #454545;
    --notice-text-game: #41510c;
}


/*
=====================
	general design	
=====================
*/

/*.vector-feature-zebra-design-disabled html {
    background: repeat repeat url(https://grainy-gradients.vercel.app/noise.svg);
    height: 100%;
}*/

html {
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIj4KICAgIDxmaWx0ZXIgaWQ9Im5vaXNlIiB4PSIwIiB5PSIwIj4KICAgICAgPGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuNjUiIG51bU9jdGF2ZXM9IjMiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz4KICAgICAgPGZlQmxlbmQgbW9kZT0ic2NyZWVuIi8+CiAgICA8L2ZpbHRlcj4KICAgIDxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWx0ZXI9InVybCgjbm9pc2UpIiBvcGFjaXR5PSIwLjUiLz4KPC9zdmc+");
    background-repeat: repeat;

    height: auto;
}

html::-webkit-scrollbar {
    width: 12px;
    background-color: var(--text);
}

html::-webkit-scrollbar-thumb {
    border-radius: 10px;
    border: var(--bg) 1px solid;
    box-shadow: var(--shadow-scrollbar-thumb);
    background-color: var(--bg);
}


html::-webkit-scrollbar-track {
    -webkit-box-shadow: var(--shadow-scrollbar-track);
    border-radius: 10px;
    border: var(--accent) 1px solid;
    background-color: var(--bg);
}

.vector-feature-zebra-design-disabled body {
    position: relative;
    box-shadow: var(--shadow-inside);
    background: var(--bg);
    color: var(--text);
    mix-blend-mode: multiply;
    height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text);
}

*>a {
    color: var(--accent-text);
}


.vector-feature-zebra-design-disabled .vector-dropdown .vector-dropdown-checkbox:checked ~ .vector-dropdown-content {
	border-radius: .25em;
    opacity: .75;
    backdrop-filter: blur(1em);
}





.vector-feature-zebra-design-disabled .vector-header-container {
    border-bottom-left-radius: 0.25em;
    border-bottom-right-radius: 0.25em;
}

@media screen and (max-width: 1596px) {
	.vector-feature-zebra-design-disabled .vector-header-container {
    border-radius:0;
	}
}

.vector-feature-zebra-design-disabled .skin--responsive .mw-page-container {
    background-position: left -3em top;
    background-color: transparent;
    
}

.vector-feature-zebra-design-disabled .mw-content-container {
	margin-top: 3em;
    padding-right: 1em;
    padding-left: 1em;
    border-radius: .25em;
}

.vector-feature-zebra-design-disabled .mw-sidebar {
    padding: 12px 19px 12px 9px;
    background-image: none;
    background-color: var(--secondary);
    border-radius: .25em;
}


.vector-feature-zebra-design-disabled #vector-main-menu-pinned-container .vector-main-menu {
    margin-top: 3em;
    border-radius: 0.25em;
}


.vector-feature-zebra-design-disabled #vector-main-menu-pinned-container .vector-main-menu, .vector-feature-zebra-design-disabled .vector-header-container, .sidebar-toc,
.vector-menu-checkbox:checked~.vector-menu-content,
.mw-content-container,
.mw-sidebar,
.mw-footer-container {
    box-shadow: var(--shadow-vignette), var(--shadow-outside);
    background: var(--secondary);
}

.sidebar-toc,
.sidebar-toc:after {
    margin-left: 0.75em;
    margin-top: 1.75em;
}

 #vector-toc-collapsed-button {
    background-color: transparent;
    border: none;
    border-radius: 0.5em;
    box-shadow: inset 0px 0px 5px var(--warning-contrast), 0px 0px 8px var(--warning-contrast);
}

.vector-toc-not-collapsed .sidebar-toc:after {
    background: none;
}

.client-js .vector-toc-collapsed .mw-table-of-contents-container .sidebar-toc {
    top: calc(36px + 24px);
    border: none;
}


.vector-page-toolbar-container {
    box-shadow: none;
}

#catlinks.catlinks {
    color: var(--text);
    border: none;
    border-radius: 0.5em;
    box-shadow: 0 0 16px 2px var(--warning-contrast), inset 0px 0px 16px 0px var(--warning-contrast);
}


.vector-feature-zebra-design-disabled .mw-footer {
    border-top: 0;
	padding:1em;
}

.mw-footer li {
    color: var(--text);
}

.vector-feature-zebra-design-disabled .mw-footer-container {
    margin-top: 3em;
    padding-top: 1em;
    margin-bottom: 2em;
    padding-bottom: 1em;
    border-radius: .25em;
}


/*
=============================
 notice warning for spoilers 
=============================



/* Alert Notice 
.spoiler_alert {
	color: var(--notice-text-alert);
    font-size: 95%;
    text-align:center;
    width: 38em;
    margin: auto;
    margin-top: 2em;
    margin-bottom: 2em;
    padding-top: 2.375em;
    padding: 2em;
    padding-bottom: 2.375em;
   /*border: 0.050em #FF0000 solid;*/
    border-collapse: collapse;
    background-color: var(--contrast);
	-moz-border-radius: 0.500em;
	-webkit-border-radius: 0.500em;
	border-radius: 0.500em;
	box-shadow: 0 0 20px 0px, inset 0px 0px 40px 6px var(--warning-contrast);

}
/* Comic Notice 
.spoiler_comic {
	color: var(--notice-text-comic);
    font-size: 95%;
    text-align:center;
    width: 38em;
    margin: auto;
    margin-top: 2em;
    margin-bottom: 2em;
    padding-top: 2.375em;
    padding: 2em;
    padding-bottom: 2.375em;
    /*border: 0.050em #CD7002 solid;*/
    border-collapse: collapse;
    background-color: var(--contrast);
	-moz-border-radius: 0.500em;
	-webkit-border-radius: 0.500em;
	border-radius: 0.500em;
	box-shadow: 0 0 20px 0px, inset 0px 0px 40px 6px var(--warning-contrast);

}
/* Novel Notice 
 .spoiler_novel {
 	color:	var(--notice-text-novel);
    font-size: 95%;
    text-align:center;
    width: 38em;
    margin: auto;
    margin-top: 2em;
    margin-bottom: 2em;
    padding-top: 2.375em;
    padding: 2em;
    padding-bottom: 2.375em;
    /*border: 0.050em #8A8A8A solid;*/
    border-collapse: collapse;
    background-color: var(--contrast);
	-moz-border-radius: 0.500em;
	-webkit-border-radius: 0.500em;
	border-radius: 0.500em;
	box-shadow: 0 0 20px 0px, inset 0px 0px 40px 6px var(--warning-contrast);

}
/* Game Notice 
 .spoiler_game {
 	color: var(--notice-text-game);
    font-size: 95%;
    text-align:center;
    width: 38em;
    margin: auto;
    margin-top: 2em;
    margin-bottom: 2em;
    padding-top: 2.375em;
    padding:2em;
    padding-bottom: 2.375em;
    /*border: 0.050em #4B5137 solid;
    border-collapse: collapse;
    background-color: var(--contrast);
	-moz-border-radius: 0.500em;
	-webkit-border-radius: 0.500em;
	border-radius: 0.500em;
	box-shadow: 0 0 20px 0px, inset 0px 0px 40px 6px var(--warning-contrast);

}

/*====================================
 notice warning for various message 
====================================*/

/* stub notice 

 #notice.box
{
  padding:1em;
  display:flex;
  justify-content: center;
}

 #notice.divTableStub{
	position: relative;
	display: table;
	width: 2em;
	left:1em;
}

 #notice.stubBar1 {
    content: '';
    z-index: 0;
    position: relative;
    background: linear-gradient(to bottom, black, var(--secondary));
    display: table-cell;
    width: 0.5em;
    border-top-left-radius: 0.5em;
    border-bottom-left-radius: 0.5em;


}

 #notice.stubBar2 {
  content:'';
  z-index:1;
  position:relative;
  display:table-cell;
  width: 0.5em;
  left:-1em;
  background: linear-gradient(to bottom, black, var(--secondary));
  border-top-left-radius:0.5em;
  border-bottom-left-radius:0.5em;
  box-shadow: 0px 0px 15px var(--warning-contrast);
  
}

#notice.stub {
	content:'';
	margin-left:1em;
	z-index:0;
	display: table-cell;
	left:-1em;
	position:relative;
background-color: var(--contrast);
    box-shadow: inset 0 0 20px var(--warning-contrast), 0px 0px 15px var(--warning-contrast);
    border-radius: 0em .5em .5em 0em;
}



#stub_text {
	position:relative;
    padding: 2em 0.5em;
    margin: auto;
}

/*======================*/
/*	Species infobox		*/
/*======================*/


.portable-infobox {
	border-width: 0;
}

 .portable-infobox.pi-theme-Species .pi-title {
	background-color: #A3998F;
	color: #090909;
	border: 0.050em solid black;
	border-bottom: 0;
	text-align: center;
}


.portable-infobox.pi-theme-Species .pi-header {
	background-color: #8CA88A;
	/*color: #e5e5e5;*/
	border-width: 0;
	border: 0;
	padding: 0.250em;
	padding-left: 0.500em;
}


.portable-infobox.pi-theme-Species .pi-data:first-child{
	/*border: 0.125em solid black;*/
	border-width: 0;
	padding: 0.625em 1em;
	padding-left: 0.500em;
	width: auto;
	text-align: left;
}


 .portable-infobox.pi-theme-Species .pi-data:last-child {
	/*border-right: 0.125em solid black;*/
	border-width: 0;
	padding: 0.625em 1em;
	padding-right:0.500em;
	width: auto;
	text-align: right;
}

 .portable-infobox.pi-theme-Species .pi-data:nth-child(even) {
	border-width: 0;
	background-color: #F2F2F2;
	width: auto;
	text-align: left;
}
 .portable-infobox.pi-theme-Species .pi-data:nth-child(odd) {
	border-width: 0;
	background-color: #E5E5E5;
	width: auto;
	text-align: left;
}


.portable-infobox.pi-theme-Species .pi-navigation {
	background: #A3998F;
	color: #090909;
	text-align: right;
	padding-right: 0.500em;
	border-spacing: 0;
	-moz-border-radius: 0 0 0.500em 0.500em;
	-webkit-border-radius: 0 0 0.500em 0.500em;
	border-radius: 0 0 0.500em 0.500em;
	border: 0.050em solid black;
	border-top: 0;
}

/*======================*/
/*	character infobox	*/
/*======================*/


 .portable-infobox.pi-theme-Character .pi-title {
	background-color: #87C5C5;
	color: #2D2D2D;
	border: 0.050em solid black;
	border-bottom: 0;
	text-align: center;
}
 .portable-infobox.pi-theme-Character .pi-header {
	background-color: #8F8AA8;
	/*	color: #e5e5e5;*/
	border: 0;
	padding: 0.250em;
	padding-left: 0.500em;
}
 .portable-infobox.pi-theme-Character .pi-data:first-child{
/*	border: 0.125em solid black;*/
	border-width: 0;
	padding: 0.625em 1em;
	padding-left: 0.500em;
	width: auto;
	text-align: left;
}
 .portable-infobox.pi-theme-Character .pi-data:last-child {
/*	border-right: 0.125em solid black;*/
	border-width: 0;
	padding: 0.625em 1em;
	padding-right:0.500em;
	width: auto;
	text-align: right;
}
 .portable-infobox.pi-theme-Character .pi-data:nth-child(even) {
	border-width: 0;
	background-color: #F2F2F2;
	width: auto;
	text-align: left;
}
.portable-infobox.pi-theme-Character .pi-data:nth-child(odd) {
	border-width: 0;
	background-color: #E5E5E5;
	width: auto;
	text-align: left;
}
 .portable-infobox.pi-theme-Character .pi-navigation {
	background: #87C5C5;
	color: #2D2D2D;
	text-align: right;
	padding-right: 0.500em;
	border-spacing: 0;
	-moz-border-radius: 0 0 0.500em 0.500em;
	-webkit-border-radius: 0 0 0.500em 0.500em;
	border-radius: 0 0 0.500em 0.500em;
	border: 0.050em solid black;
	border-top: 0;
}



/*===============================*/
/* Tabber design for light theme */
/*===============================*/


/*species theme of tabber*/

.Species {
    display: flex;
}

.Species .tabber__tab {
    display: inline-flex;
    align-items: center;
    padding: 0.5em 0.75em;
	color: white;
	background: #8ca88a;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 0.35em 0.35em 0 0 !important;
    border-top: 0.1em solid black !important;
    border-left: 0.1em solid black !important;
    border-right: 0.1em solid black !important;
}

.tabber__tab:hover {

	background-color: white !important;
    -moz-border-radius:0.35em 0.35em 0 0 !important;
    -webkit-border-radius: 0.35em 0.35em 0 0 !important;
    border-radius:0.35em 0.35em 0 0 !important;
    border:1px solid black !important;
    border-bottom: 0 solid !important;
    color: black !important;
}

.tabber__tab[aria-selected='true'], .tabber__tab[aria-selected='true']:visited {
    color: black;
    background: #a3998f;
}

.Species .tabber__indicator {
    border-radius: 2px;
    margin-top: -2px;
    background: none;
    block-size: 2px;
    inline-size: 0;
}


/*
===================
 eras icons design 
===================

#bodyContent>div.mw-body-subheader>div.mw-indicators {
    float: left;
    position: static;
    margin-top: 0.25em;
}

#mw-indicator-eraicon>div>a>img {
    height: 1.2em;
    width: auto;

}
*/
Cookies help us deliver our services. By using our services, you agree to our use of cookies.