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