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: Difference between revisions

MediaWiki interface page
Content added Content deleted
(disabled the pieces of code that make the wiki title disappear)
(updated css)
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);

:root {
height: 100%;
}*/
--bg: #1e0c1b;
--primary: #990085;
--text: #1e0c1b;
--secondary: #faebed;
--accent: #FF7F67;

}
}
*/


html {
html {
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"><filter id="noise" x="0" y="0"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/><feBlend mode="screen"/></filter><rect width="500" height="500" filter="url(%23noise)" opacity="0.5"/></svg>');
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: 100%;
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-sticky-header {
.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 {
box-shadow: none;
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 {
margin-top: 3em;
background-image: none;
background-color: var(--secondary);
border-radius: .25em;
}
}

*/

.mw-header #mw-sidebar-button {

margin-right: 0;

.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,
.mw-article-toolbar-container {
.sidebar-toc:after {
border-bottom: 1px solid transparent;
margin-left: 0.75em;
margin-top: 1.75em;
}
}


.vector-menu-tabs .mw-list-item.selected a,
#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 {
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);
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;
}



/*
/*
=============================
.mw-logo-icon {
notice warning for spoilers
margin-right: none;
=============================
width: auto;

height: 128px;


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


.mw-logo-container {
display: none;
}
}
/* 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);


#p-lang-btn-label>span.vector-menu-heading-label {
font-size: 0;
}
}
/* 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);


}


/*====================================
#mw-sidebar-button,
notice warning for various message
.vector-user-menu-more .vector-menu-content-list,
====================================*/
.vector-user-menu-overflow .vector-menu-content-list,

#p-personal-label {
/* stub notice
filter: invert(1);

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


#notice.divTableStub{
.vector-menu-checkbox:checked~.vector-menu-content {
position: relative;
border-radius: .25em;
display: table;
opacity: .75;
width: 2em;
backdrop-filter: blur(1em);
left:1em;
}
}


#notice.stubBar1 {
.vector-menu-dropdown .vector-menu-content {
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;



transition-duration: 250ms;
}
}


#notice.stubBar2 {
.skin--responsive .mw-page-container {
content:'';
background-position: left -3em top;
z-index:1;
background-color: transparent;
position:relative;
scroll-behavior: smooth;
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 {
.mw-content-container {
position:relative;
grid-area: content;
padding: 2em 0.5em;
margin: auto;
}


/*======================*/
padding-right: 1em;
/* Species infobox */
padding-left: 1em;
/*======================*/
border-radius: .25em;


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


.portable-infobox.pi-theme-Species .pi-title {
.mw-sidebar {
background-color: #A3998F;
box-sizing: border-box;
color: #090909;
padding: 12px 19px 12px 9px;
border: 0.050em solid black;
background-image: none;
border-bottom: 0;
background-color: var(--secondary);
text-align: center;
border-radius: .25em;
}
}




.portable-infobox.pi-theme-Species .pi-header {
.mw-content-ltr .thumbcaption {
background-color: #8CA88A;
text-align: left;
/*color: #e5e5e5;*/
display: none;
border-width: 0;
border: 0;
padding: 0.250em;
padding-left: 0.500em;
}
}



.vector-menu-checkbox:checked~.vector-menu-content,
.portable-infobox.pi-theme-Species .pi-data:first-child{
.mw-content-container,
/*border: 0.125em solid black;*/
.mw-sidebar,
border-width: 0;
.mw-footer-container {
padding: 0.625em 1em;
box-shadow: var(--shadow-vignette), var(--shadow-outside);
padding-left: 0.500em;
background: var(--secondary);
width: auto;
text-align: left;
}
}




.portable-infobox.pi-theme-Species .pi-data:last-child {
.mw-footer {
border-top: 0;
/*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;
}
}



.mw-footer li {
.portable-infobox.pi-theme-Species .pi-navigation {
color: var(--text);
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;
}
}


/*======================*/
.mw-footer-container {
/* character infobox */
/*======================*/



margin-top: 50px;
.portable-infobox.pi-theme-Character .pi-title {
padding-top: 0;
background-color: #87C5C5;
margin-bottom: 82px;
color: #2D2D2D;
padding-bottom: 0;
border-radius: .25em;
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;

}
*/

Revision as of 19:24, 7 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,<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"><filter id="noise" x="0" y="0"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/><feBlend mode="screen"/></filter><rect width="500" height="500" filter="url(%23noise)" opacity="0.5"/></svg>');
    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-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.