Content added Content deleted
Eatyourglory (talk | contribs) No edit summary Tag: Reverted |
Eatyourglory (talk | contribs) (Fixed background by encoding it into base64) |
||
(5 intermediate revisions by the same user not shown) | |||
Line 2: | Line 2: | ||
/* CSS from https://miaruniverse.miraheze.org/wiki/MediaWiki:Vector.css */ |
/* CSS from https://miaruniverse.miraheze.org/wiki/MediaWiki:Vector.css */ |
||
/* |
|||
/*==================*/ |
|||
================== |
|||
/* root */ |
|||
root |
|||
/*==================*/ |
|||
================== |
|||
*/ |
|||
:root { |
:root { |
||
--bg: #1e0c1b; |
--bg: #1e0c1b; |
||
--text: #1e0c1b; |
|||
--primary: #990085; |
--primary: #990085; |
||
--secondary: #faebed; |
--secondary: #faebed; |
||
--accent: #FF7F67; |
--accent: #FF7F67; |
||
--accent-text: #94056e; |
|||
--accent-opacity: #ff7f6733; |
--accent-opacity: #ff7f6733; |
||
--shadow-vignette: inset 0 0 10em 1em var(--accent-opacity); |
--shadow-vignette: inset 0 0 10em 1em var(--accent-opacity); |
||
Line 19: | Line 22: | ||
--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-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); |
--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; |
|||
} |
} |
||
/*======================*/ |
|||
/* dark/light system */ |
|||
/*======================*/ |
|||
/* @media (prefers-color-scheme: dark) { |
|||
:root { |
|||
--bg: #1e0c1b; |
|||
--primary: #990085; |
|||
--text: #faebed; |
|||
--secondary: hsl(352, 05%, 25%); |
|||
--accent: #FF7F67; |
|||
/* |
|||
} |
|||
===================== |
|||
} |
|||
general design |
|||
===================== |
|||
*/ |
|||
/*.vector-feature-zebra-design-disabled html { |
|||
@media (prefers-color-scheme: light) { |
|||
background: repeat repeat url(https://grainy-gradients.vercel.app/noise.svg); |
|||
: |
height: 100%; |
||
}*/ |
|||
--bg: #1e0c1b; |
|||
--primary: #990085; |
|||
--text: #1e0c1b; |
|||
--secondary: #faebed; |
|||
--accent: #FF7F67; |
|||
} |
|||
} |
|||
*/ |
|||
html { |
html { |
||
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIj4KICAgIDxmaWx0ZXIgaWQ9Im5vaXNlIiB4PSIwIiB5PSIwIj4KICAgICAgPGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuNjUiIG51bU9jdGF2ZXM9IjMiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz4KICAgICAgPGZlQmxlbmQgbW9kZT0ic2NyZWVuIi8+CiAgICA8L2ZpbHRlcj4KICAgIDxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWx0ZXI9InVybCgjbm9pc2UpIiBvcGFjaXR5PSIwLjUiLz4KPC9zdmc+"); |
|||
color-scheme: dark light; |
|||
background-repeat: repeat; |
|||
} |
|||
/*==================*/ |
|||
/* general design */ |
|||
/*==================*/ |
|||
html, |
|||
body { |
|||
height: auto; |
height: auto; |
||
} |
|||
html { |
|||
background: repeat repeat url(https://grainy-gradients.vercel.app/noise.svg); |
|||
} |
} |
||
Line 87: | Line 70: | ||
} |
} |
||
.vector-feature-zebra-design-disabled body { |
|||
body { |
|||
position: relative; |
position: relative; |
||
box-shadow: var(--shadow-inside); |
box-shadow: var(--shadow-inside); |
||
Line 93: | Line 76: | ||
color: var(--text); |
color: var(--text); |
||
mix-blend-mode: multiply; |
mix-blend-mode: multiply; |
||
height: |
height: auto; |
||
} |
} |
||
Line 104: | Line 87: | ||
color: var(--text); |
color: var(--text); |
||
} |
} |
||
*>a { |
*>a { |
||
color: var(--accent); |
color: var(--accent-text); |
||
} |
} |
||
#vector-sticky-header { |
|||
opacity: 1; |
|||
box-shadow: var(--shadow-sticky); |
|||
.vector-feature-zebra-design-disabled .vector-dropdown .vector-dropdown-checkbox:checked ~ .vector-dropdown-content { |
|||
border-radius: .25em; |
|||
opacity: .75; |
|||
backdrop-filter: blur(1em); |
|||
} |
} |
||
.vector-sticky-header { |
|||
background-color: var(--secondary) !important; |
|||
.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) { |
|||
@supports (animation-timeline: scroll()) { |
|||
.vector-feature-zebra-design-disabled .vector-header-container { |
|||
border-radius:0; |
|||
animation: scroll-shadow linear both; |
|||
} |
|||
animation-timeline: scroll(); |
|||
} |
|||
animation-range: 0ex 5ex; |
|||
} |
|||
.vector-feature-zebra-design-disabled .skin--responsive .mw-page-container { |
|||
@keyframes scroll-shadow { |
|||
background-position: left -3em top; |
|||
from { |
|||
background-color: transparent; |
|||
} |
|||
.vector-feature-zebra-design-disabled .mw-content-container { |
|||
to { |
|||
margin-top: 3em; |
|||
box-shadow: var(--shadow-sticky); |
|||
padding-right: 1em; |
|||
padding-left: 1em; |
|||
} |
|||
border-radius: .25em; |
|||
} |
} |
||
.vector-feature-zebra-design-disabled .mw-sidebar { |
|||
/* |
|||
padding: 12px 19px 12px 9px; |
|||
.mw-header { |
|||
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; |
margin-top: 3em; |
||
border-radius: 0.25em; |
|||
} |
} |
||
*/ |
|||
.mw-header #mw-sidebar-button { |
|||
.vector-feature-zebra-design-disabled #vector-main-menu-pinned-container .vector-main-menu, .vector-feature-zebra-design-disabled .vector-header-container, .sidebar-toc, |
|||
margin-right: 0; |
|||
.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, |
|||
.mw-article-toolbar-container { |
|||
.sidebar-toc:after { |
|||
border-bottom: 1px solid transparent; |
|||
margin-left: 0.75em; |
|||
margin-top: 1.75em; |
|||
} |
} |
||
#vector-toc-collapsed-button { |
|||
background-color: transparent; |
|||
.vector-menu-tabs .mw-list-item.selected a:visited { |
|||
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 { |
|||
.mw-logo-icon { |
|||
background: none; |
|||
width: auto; |
|||
height: 128px; |
|||
} |
} |
||
.mw- |
.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); |
|||
} |
|||
#mw-sidebar-button, |
|||
.vector- |
.vector-feature-zebra-design-disabled .mw-footer { |
||
border-top: 0; |
|||
.vector-user-menu-overflow .vector-menu-content-list, |
|||
padding:1em; |
|||
#p-personal-label { |
|||
filter: invert(1); |
|||
} |
} |
||
.mw-footer li { |
|||
.vector-menu-checkbox:checked~.vector-menu-content { |
|||
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; |
border-radius: .25em; |
||
opacity: .75; |
|||
backdrop-filter: blur(1em); |
|||
} |
} |
||
.vector-menu-dropdown .vector-menu-content { |
|||
/* |
|||
transition-duration: 250ms; |
|||
============================= |
|||
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); |
|||
.vector-feature-zebra-design-disabled .mw-page-container { |
|||
background-position: left -3em top; |
|||
background-color: transparent; |
|||
scroll-behavior: smooth; |
|||
} |
} |
||
/* 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 |
|||
.mw-content-container { |
|||
grid-area: content; |
|||
#notice.box |
|||
padding-right: 1em; |
|||
{ |
|||
padding-left: 1em; |
|||
padding:1em; |
|||
border-radius: .25em; |
|||
display:flex; |
|||
justify-content: center; |
|||
} |
} |
||
#notice.divTableStub{ |
|||
.mw-sidebar { |
|||
position: relative; |
|||
box-sizing: border-box; |
|||
display: table; |
|||
padding: 12px 19px 12px 9px; |
|||
width: 2em; |
|||
background-image: none; |
|||
left:1em; |
|||
background-color: var(--secondary); |
|||
border-radius: .25em; |
|||
} |
} |
||
#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; |
|||
.mw-content-ltr .thumbcaption { |
|||
text-align: left; |
|||
display: none; |
|||
} |
} |
||
#notice.stubBar2 { |
|||
.vector-menu-checkbox:checked~.vector-menu-content, |
|||
content:''; |
|||
z-index:1; |
|||
.mw-sidebar, |
|||
position:relative; |
|||
.mw-footer-container { |
|||
display:table-cell; |
|||
box-shadow: var(--shadow-vignette), var(--shadow-outside); |
|||
width: 0.5em; |
|||
background: var(--secondary); |
|||
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; |
|||
} |
|||
.mw-footer { |
|||
border-top: 0; |
|||
#stub_text { |
|||
position:relative; |
|||
padding: 2em 0.5em; |
|||
margin: auto; |
|||
} |
} |
||
/*======================*/ |
|||
.mw-footer li { |
|||
/* Species infobox */ |
|||
color: var(--text); |
|||
/*======================*/ |
|||
.portable-infobox { |
|||
border-width: 0; |
|||
} |
} |
||
.portable-infobox.pi-theme-Species .pi-title { |
|||
.mw-footer-container { |
|||
background-color: #A3998F; |
|||
color: #090909; |
|||
border: 0.050em solid black; |
|||
border-bottom: 0; |
|||
text-align: center; |
|||
} |
|||
margin-top: 50px; |
|||
.portable-infobox.pi-theme-Species .pi-header { |
|||
padding-top: 0; |
|||
background-color: #8CA88A; |
|||
margin-bottom: 82px; |
|||
/*color: #e5e5e5;*/ |
|||
padding-bottom: 0; |
|||
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; |
|||
} |
|||
*/ |
Latest revision as of 07:32, 8 March 2024
/* 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;
}
*/