MediaWiki:Common.css

/* CSS placed here will be applied to all skins */ @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lato&display=swap'); @import url('https://fonts.googleapis.com/css?family=Rubik&display=swap'); /* Adding the Barlow, Barlow Semi Condensed and Barlow Condensed font families */ @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); /* Adding Inter and Manrope font families */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');

/* ==== START of custom code made from Pignu: This comment is here only to remind me where I'm editing stuff ==== */


 * root {

scroll-behavior: smooth; /* Colors Palette */ --Accent-Light: #c01641; /* Bright Maroon */ --Accent-Normal: #921131; /* Antique Ruby */ --Accent-Dark: #720d27; /* Claret */ --PrimaryL-Light: #2d2d39; /* Raisin Black (Light) */ --PrimaryL-Normal: #212129; /* Raisin Black (Normal) */ --PrimaryN: #141416; /* Eerie Black */ --PrimaryD-Normal: #0C0D0F; /* Rich Black FOGRA 39 (Normal) */ --PrimaryD-Dark: #050506; /* Rich Black FOGRA 39 (Dark) */ --menus-cover-bg: #0b0c0ecc; --shadow: #00000033; /* Gradients */ --RaisinBlack-gradient: linear-gradient(#2d2d39, #212129); --AntiqueRuby-gradient: linear-gradient(#c01641, #921131); /* Page Parts Sizes*/ --header-height: 3rem; --sidebar-width: 18rem; }

/* === START: SCROLLBAR STYLING === */ /* General scrollbar styling (Webkit and Blink browsers) */
 * -webkit-scrollbar {

width: 1.1rem; }


 * -webkit-scrollbar,
 * -webkit-scrollbar-corner,
 * -webkit-scrollbar-track,

background: transparent; }
 * 1) mw-site-navigation ::-webkit-scrollbar,
 * 2) mw-site-navigation ::-webkit-scrollbar-corner,
 * 3) mw-site-navigation ::-webkit-scrollbar-track {


 * -webkit-scrollbar-thumb {

background: var(--Accent-Normal); }


 * -webkit-scrollbar-thumb:hover {

background: var(--Accent-Dark); }


 * -webkit-scrollbar-thumb,
 * -webkit-scrollbar-thumb:hover {

border: 0.3rem solid transparent; border-radius: 0.6rem; background-clip: padding-box; }

/* General scrollbar styling (Firefox) */ scrollbar-width: thin; scrollbar-color: var(--Accent-Normal) transparent; }

/* NAV scrollbar styling (Webkit and Blink browsers) */ width: 0.5rem; }
 * 1) mw-site-navigation ::-webkit-scrollbar {

background: var(--RaisinBlack-gradient); }
 * 1) mw-site-navigation ::-webkit-scrollbar-thumb {

background: var(--AntiqueRuby-gradient); }
 * 1) mw-site-navigation ::-webkit-scrollbar-thumb:hover {

border: 0.15rem solid transparent; border-radius: 0.6rem; background-clip: padding-box; }
 * 1) mw-site-navigation ::-webkit-scrollbar-thumb,
 * 2) mw-site-navigation ::-webkit-scrollbar-thumb:hover {

/* NAV scrollbar styling (Firefox) */ scrollbar-width: thin; scrollbar-color: var(--PrimaryL-Normal) transparent; } /* === END: SCROLLBAR STYLING === */
 * 1) mw-site-navigation * {

/* === START: PAGE LAYOUT === */ body { font-family: 'Lato', sans-serif; background: var(--PrimaryD-Normal); }

height: 100vh; display: flex; flex-direction: column; }
 * 1) mw-wrapper {

background: var(--menus-cover-bg); backdrop-filter: blur(5px); opacity: unset; }
 * 1) menus-cover {

background-image: none; /*background-position: initial;*/ /*background-size: initial;*/ /*background-repeat: initial;*/ /*background-attachment: initial;*/ background-color: transparent; border: none; flex: 1 0 auto; }
 * 1) mw-content-container {

font-family: 'Roboto Condensed', sans-serif; background: var(--RaisinBlack-gradient); box-shadow: 0px 0.1rem 0.3rem var(--shadow); }
 * 1) mw-header-container {

flex-shrink: 0; }
 * 1) mw-footer-container {

@media screen and (max-width: 850px) { #site-navigation > .sidebar-inner { top: 4rem; left: 15vw; right: 15vw; margin: 0 !important; /* Remember to remove important when no more needed */ border: solid 1px #222225; padding: 2em !important; /* Remember to remove important when no more needed */ background: var(--PrimaryN); box-shadow: 0 0.3rem 1rem 0.3rem var(--shadow); } }

@media screen and (min-width: 851px) { #mw-wrapper { position: fixed; top: 0; overflow: auto; width: 100vw; height: calc(100vh - var(--header-height)); margin-top: var(--header-height); background-color: var(--PrimaryD-Normal); scroll-behavior: smooth; }	#mw-content-container { margin: 0 !important; /* Remember to remove this important when no more needed*/ }	#mw-header-container { min-height: var(--header-height); } }

@media screen and (min-width: 1100px) { #mw-content-container { padding-bottom: 1.5rem; } } /*Pignu's Quick fix: Remeber to fix properly later*/ @media screen and (max-width: 850px) { #mw-related-navigation { display: none !important; } } @media screen and (max-width: 1099px) { #site-navigation h2 { background-image: url(https://static.miraheze.org/pgrwiki/7/79/Icon-BurgerMenu-White.svg); } }

/* START: NAV STYLING */ font: 200 1rem 'Roboto Condensed', sans-serif; color: white; background: var(--PrimaryN); }
 * 1) mw-site-navigation {

max-height: 100%; margin: 0 !important; padding: 0 !important; display: flex; flex-flow: column; }
 * 1) site-navigation {

padding-bottom : 1rem; overflow: auto; }
 * 1) site-navigation .sidebar-inner {

margin-bottom: 0.7rem !important; }
 * 1) site-navigation > div > div > div {

width: max-content; margin: 0.25em auto; padding: 0 0 0 0.3em; border: none; font: 300 1.1em 'Roboto', sans-serif; letter-spacing: 0.3em; text-transform: uppercase; text-align: center; }
 * 1) mw-site-navigation .sidebar-chunk h3 {

padding: 0 1em !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(14ch, 1fr)); gap: 0.5em; }
 * 1) mw-site-navigation ul {

/* Styling NAV menu items */ padding: 0 !important; background: linear-gradient(#2d2d39, #212129); text-align: center; transition: transform 450ms ease-out, box-shadow 450ms ease-out; }
 * 1) mw-site-navigation li {

/* Styling NAV menu items on hover */ z-index: 1; transform: scale(1.05); box-shadow: 0 0.1rem 0.3rem 0.3rem #00000033; background: linear-gradient(#c01641, #921131); transition: transform 100ms ease-in 50ms, box-shadow 100ms ease-in 50ms; }
 * 1) mw-site-navigation	li:hover,
 * 2) mw-site-navigation	li:focus-within {

/* Styling NAV menu link */ display: block; color: white !important; padding: 0.4em; }
 * 1) mw-site-navigation .sidebar-inner a {

/* Media queries for defining different style based on screen sizes */ @media screen and (min-width: 1100px) { #mw-site-navigation { position: fixed; left: 0; top: var(--header-height); /* z-index: 95; */ width: var(--sidebar-width); height: calc(100vh - var(--header-height)); box-shadow: 0.1rem 0 0.5rem var(--shadow); padding: 0; display: grid; grid-template-rows: min-content minmax(0, 1fr) min-content; justify-content: unset; }	#p-logo { width: 100%; height: calc(var(--sidebar-width) * 0.45); margin: 1rem 0; }	#p-logo a { width: 100%; height: 100%; margin: 0; background-size: contain; background-position: center; background-repeat: no-repeat; } }

@media screen and (min-width: 1100px) and (max-width: 1339px) { #mw-site-navigation { transform: translateX(calc(3rem - var(--sidebar-width))); transition: transform 500ms ease 500ms; }	#mw-site-navigation::before{ content:'Navigation'; position: absolute; right: 0; width: 3rem; margin: 2rem 0.75rem; writing-mode: vertical-rl; letter-spacing: 0.3em; font: 400 1.3em 'Roboto', sans-serif; text-transform: uppercase; transition: opacity 250ms ease 500ms; }	#p-logo, #site-navigation { transform: translateX(-3rem); opacity: 0; transition: transform 500ms ease 500ms, opacity 500ms ease 500ms; }	#mw-site-navigation:hover, #mw-site-navigation:focus-within, #mw-site-navigation:hover :is(#p-logo, #site-navigation), #mw-site-navigation:focus-within :is(#p-logo, #site-navigation) { transform: translateX(0); } 	#mw-site-navigation:hover :is(#p-logo, #site-navigation), #mw-site-navigation:focus-within :is(#p-logo, #site-navigation) { opacity: 1; }	#mw-site-navigation:hover::before, #mw-site-navigation:focus-within::before { opacity: 0; } }

/* END: NAV STYLING */

/* START: Utility class */ .width-max-container[class="width-max-container"] { max-width: 100%; height: auto; } /* END: Utility class */

/* START: Character Secret Template Styles*/ .character-secret-wrapper * { all: unset; }

.character-secret-wrapper { display: grid; /*grid-template-columns: repeat(auto-fit, minmax(min(50ch, 100%), 1fr));*/ gap: 1rem 2rem; font-family: "Roboto Condensed", sans-serif; font-size: 1rem; }

@media (min-width: 1700px) { .character-secret-wrapper { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(6, auto); grid-auto-flow: column; } }

.character-secret { display: flex; flex-flow: column; gap: 2px; }

.secret-header { margin: 0 !important; padding: 0.4rem; border-radius: 3px 3px 0 0; font-size: 1.25rem !important; font-weight: 600 !important; line-height: 1 !important; text-align: center; color: white !important; background-color: #921131; } .secret-text { padding: 0.5em 1em; border-radius: 0 0 3px 3px; flex-grow: 1; color: #c0c3d0; background-color: #212129; } /* END: Character Secret Template Styles*/

/* START: FAQ Template */ .faq-container * { margin: 0; }

.faq-container { margin: 1rem 0; display: grid; font-family: "Roboto", sans-serif; }

.faq-container div { color: hsl(245 15% 80%) !important; }

.faq { display: grid; gap: 2px; }

.question { position: relative; padding: 0.7rem; padding-right: 1rem; border-radius: 3px 3px 0 0; display: flex; align-items: flex-start; gap: 1rem; font-size: 1.2rem; font-weight: 600; background-color: #730d26 !important; }

.question-img { outline: 3px solid hsl(345deg 80% 18%); border-radius: 3px; aspect-ratio: 1; background-color: white; }

.question > div:first-of-type { flex-shrink: 0; }

.question > p { place-self: center; color: hsl(245 15% 90%) !important; }

.question::before, .question::after { --size1: 1rem; --position: 3rem; content: ""; position: absolute; right: var(--position); bottom: calc(var(--size1) * -1 + 0.5px); display: block; width: var(--size1); aspect-ratio: 1; clip-path: polygon(0% 0%, 50% 100%, 100% 0%); background-color: #730d26; }

.question::before { --size2: calc(var(--size1) + 4px); right: calc(var(--position) - 2px); bottom: calc(var(--size2) * -1); width: var(--size2); background-color: #141416; }

.answer { padding: 1rem; padding-top: 1.5rem; border-radius: 0 0 3px 3px; font-size: 1rem; background-color: #323242 !important; } /* END: FAQ Template */

/* --END of custom code made from Pignu: This comment is here only to remind me where I'm editing stuff-- */

.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6, .mw-body udt { font-family: 'Lato', sans-serif !important; }

font-size: 1.4em !important; padding: 0 0.5em !important; font-family: "roboto condensed"; }
 * 1) p-logo-text a.long {

font-size: 1.05em !important; width: inherit !important; background: white; background: rgba(255, 255, 255, 0.9) !important; } /*Fixing glitch when width is set to tablet size.*/ @media (min-width: 851px) and (max-width: 1099px) { #mw-content { margin-top: 0; }   #mw-header-hack .color-bar { display: none; }   #mw-header-nav-hack { display: none; } }   background: #152942; }
 * 1) mw-content {
 * 1) mw-footer-container {

.color-middle, .color-right, .color-left { background: #3366cc; }

.sidebar-chunk { background: white; background: rgba(248, 250, 255, 0.9) !important; }

.grid-container { display: grid; grid-auto-columns: 1fr; }

.filter-button-selected, .filter-button-selected:hover { background: #ccc; }

/** Spoiler CSS **/ .spoiler-text { filter: blur(5px); transition-property: -webkit-filter; transition-duration: .4s; }

.spoiler-text:hover, .spoiler-text:focus { filter: blur(0px); }

.spoiler-img { filter: blur(15px); transition-property: -webkit-filter; transition-duration: .4s; }

.spoiler-img:hover, .spoiler-img:focus { filter: blur(0px); }

/** Card CSS **/ .card { box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2); margin: 0.5em; padding: 1em; border-radius: 8px; }

.card-header { font-size: 1.2em; font-weight: bold; margin-bottom: 0.5em; background: linear-gradient(45deg, #b9ecff, transparent); padding: 0.25em .5em; }

.card table { width: 100%; border: none; }

.card table th { text-align: left; border: none; border-bottom: 1px solid #ccc; }

.card table td { text-align: right; border: none; border-bottom: 1px solid #ccc; }

table.half th, table.half td { width: 50%; }

.card table tr:last-of-type td, .card table tr:last-of-type th { border: none; }

/** Responsive Image **/ .res-img img { width: 100%; height: auto; }

/* CSS For No History Tabber (Template:Tab) */ .no-history-tabber-panel .oo-ui-optionWidget { color: black; font-family: Verdana, sans-serif; font-size: 12px; font-weight: 700; padding: 3px .5em; }

.no-history-tabber-panel .oo-ui-optionWidget:hover { background-color: #e4e4e4 !important; }

.no-history-tabber-panel .oo-ui-optionWidget.oo-ui-widget-enabled { border: 1px solid #e0e0e0; }

.no-history-tabber-panel .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected { border: 1px solid black; cursor: pointer; }

.no-history-tabber-panel .oo-ui-tabOptionWidget .oo-ui-labelElement-label { border: 0 !important; margin: 0; padding: 0; line-height: normal; }

.no-history-tabber-panel .oo-ui-tabSelectWidget-framed { background-color: inherit; }

.no-history-tabber-panel .oo-ui-optionWidget { color: black; font-family: 'Lato', sans-serif !important; font-size: 14px; font-weight: 700; padding: 3px .5em; background: linear-gradient(to right, #d7e9fb 50%, white 50%); background-size: 200% 100%; background-position: right bottom; transition: all .25s ease-out; }

.no-history-tabber-panel .oo-ui-optionWidget:hover { background-position: left bottom; }

.no-history-tabber-panel .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected { border: 1px solid #000; }

/* End of No History Tabber CSS*/

/** Unit icon CSS **/ .icon-template { display: inline-block; text-align: center; padding: 3px; }

/** Cargo Tables **/ .cargoTable thead tr { background: #e2f2ff !important; border: 1px solid #d4d4d4; }

/** Notice Templates **/ .page-notice { padding: 0.25em 1em; background: #eee; margin: auto; max-width: 600px; border: 1px solid lightgray; border-left: 8px solid gray; }

/** Template:Page header **/ background-color: #b9ecff; border: 1px solid skyblue; display: grid; grid-template-columns: repeat(3, 1fr); padding: 1em; }
 * 1) page-header {

grid-row: 1; text-align: left; align-self: center; }
 * 1) page-header-left {

grid-row: 1; text-align: right; align-self: center; }
 * 1) page-header-right {

grid-row: 1; text-align: center; font-weight: bold; font-size: 1.4em; }
 * 1) page-header-center {

font-size: 0.7em; }
 * 1) page-subheader-center {

/** Template:Info grid **/ .info-grid { display: grid; grid-auto-columns: 1fr; grid-gap: 0.5em; }

.info-grid-image { grid-row: 1; grid-column-start: 1; grid-column-end: 8; text-align: center; padding: 1em; margin: auto; }

.info-grid-image img { width: 100%; height: auto; }

.info-grid-general { grid-row: 1; text-align: center; grid-column-start: 8; grid-column-end: 13; padding: 1em; }

.info-grid-general .wikitable { width: 100%; }

@media screen and (max-width: 768px) { .info-grid-image { grid-row: 1; grid-column-start: 1; grid-column-end: 13; }

.info-grid-general { grid-row: 2; grid-column-start: 1; grid-column-end: 13; } }

/* One-sided navigation menu */ /* One-sided navigation menu */ @media (min-width: 1340px) { #mw-content-block { display: grid; grid-template-rows: max-content; width: 70%; }

#mw-content { width:100%; },   #content-bottom-stuff { margin-left: 14em; }

#mw-content-wrapper { grid-row-start: 1; grid-row-end: 99; grid-column: 1; order: unset; }

/*End of reformat*/ #mw-related-navigation { grid-row: 2; grid-column: 1; width: 14em; padding: 0 1em 0 0; order: unset; }

div.color-middle { margin-right: 0; } }

/*Change Link Hover behavior*/ @keyframes linkHover { /*This is what sets the animation for hover link*/ to { color : white; } } a:hover { text-decoration : none; /*	color: #757575 !important; */ -moz-animation : linkHover 0.3s forwards; -webkit-animation : linkHover 0.3s forwards; animation : linkHover 0.3s forwards; }

/*Changing small screen bg from white to black*/ @media (max-width: 850px) { #mw-content-block { background: inherit; } }

/* Re-aligning bottom logos */ padding-right: 1em; }
 * 1) footer {

/***************************************************************************/ /****************************- Custom Elements -****************************/ /***************************************************************************/

.mw-editsection { display: none; }

/**- Top Bar Colour -**/ color: white; }
 * 1) mw-header-container div {

color: white; width : max-content; }	font-family : "roboto condensed"; }
 * 1) mw-header-container #p-banner {
 * 1) mw-header-container #personal h2 {

filter: invert(100%); }
 * 1) pt-notifications-alert .oo-ui-icon-bell {

filter: invert(100%); }
 * 1) pt-notifications-notice .oo-ui-icon-tray {

color: black; }
 * 1) pt-notifications-alert .mw-echo-notifications-badge::after,
 * 2) pt-notifications-notice .mw-echo-notifications-badge::after {

div.color-left { background-color: #C2185E; }

div.color-middle, div.color-right { background-color: white; }

color: black; }
 * 1) p-personal-label {

display: flex; }
 * 1) mw-content-block {

order: 2; margin-top: 1.5rem; /*  margin-right: 1em; margin-left: 2em; */ } }	width : 100%; }   width: 100%; -webkit-box-sizing : border-box; -moz-box-sizing : border-box; box-sizing : border-box; }
 * 1) mw-content-wrapper {
 * 1) mw-wrapper {
 * 1) mw-content-wrapper ,#mw-content {

order: 3; width: 100%; flex: 0 0 225px; }
 * 1) mw-related-navigation {

@media only screen and (min-width: 1340px) {

#mw-content, #content-bottom-stuff { margin-left: 0; } }

/*- BG IMG OR Color --*/

color: #fcfcfc; background-color: transparent !important; }
 * 1) mw-content-container .sidebar-chunk {

/*this part has the main content container bg colour--*/ /*--add 0.7 after rgb colours to add transparency--*/ color: #fcfcfc; /*   background: linear-gradient(#921131 0,#141416 7rem) !important;*/ background: #141416 !important; }
 * 1) mw-content-container #mw-content {

border: none; font-family: "roboto condensed"; }
 * 1) mw-content {

color: #c0c3d0; background-color: transparent /*!important*/; }
 * 1) mw-content div {

font-family:"roboto condensed" !important; }
 * 1) mw-content h1,
 * 2) mw-content h2,
 * 3) mw-content h3,
 * 4) mw-content h4,
 * 5) mw-content h5,
 * 6) mw-content h6 {

display: none; }
 * 1) site-tools {

display: none; }
 * 1) p-navigation {

border: none; }
 * 1) mw-site-navigation .sidebar-chunk {

/*************************************************************************/ /* Custom article and header /*************************************************************************/

.custom-article_1 { margin-left: 5px; margin-right: 5px; display: flex; text-align: justify; }

.custom-article_1 .floatnone { padding-bottom: 10px; }

.custom-article_1 .ca_L { margin-right: 20px; width: auto; }

.custom-article_1 .ca_R { margin-right: 20px; width: auto; }

.custom-article_1 .ca_L-w50 { margin-right: 20px; width: 50%; }

.custom-article_1 .ca_R-w30 { margin-left: 20px; width: 30%; }

.custom-article_1 .ca_R-w35 { margin-left: 20px; width: 35%; }

.custom-article_1 .ca_R-w40 { margin-left: 20px; width: 40%; }

.custom-article_1 .ca_R-w45 { margin-left: 20px; width: 45%; }

.custom-article_1 .ca_R-w50 { margin-left: 20px; width: 50%; }

.custom-article_1 .ca_R-w55 { margin-left: 20px; width: 55%; }

.custom-article_1 .ca_R-w60 { margin-left: 20px; width: 60%; }

.custom-article_1 .ca_R-w65 { margin-left: 20px; width: 65%; }

.custom-article_1 .ca_R-w70 { margin-left: 20px; width: 70%; }

.custom_header_article { font-family: helvetica; }

.custom_header_article h2 { font-family: "roboto condensed"; margin-top: -5px; font-weight: 900; font-size: 24px; border-bottom: 0px solid var(--theme-border-color); }

.custom_header_article .page-content h2 { border-bottom: 0px solid var(--theme-border-color); }

/***************************************************************************/

.mw-underline-always a { color: red; }

.mw-underline-always a:visited { color: #ad410e; }

width: 40%; margin: auto; }
 * 1) searchform {

display: none; }
 * 1) mw-header-hack {

/*Search Bar Styling*/ border: none; box-shadow: none; }	background: #0C0D0F; color: white; border-radius: 0; }
 * 1) mw-header-container #simpleSearch {
 * 1) mw-header-container #searchInput {

display: none; }
 * 1) ca-ve-edit {

display: none; }
 * 1) ca-viewsource {

display: none; } /* Change mobile icons to white. ...reverted. wait for grey icon */ /*#ca-history a { background-image: url(https://static.miraheze.org/pgrwiki/b/b8/Icon-Clock-White.svg); }	background-image: url(https://static.miraheze.org/pgrwiki/5/54/Icon-SettingsCog-White.svg); }	background-image: url("https://static.miraheze.org/pgrwiki/0/02/White-SearchIcon.svg"); margin : auto; } */
 * 1) ca-cargo-purge {
 * 1) ca-more span {
 * 1) searchform #searchButton {

/*End of Search Bar Styling*/

color: #f72058; text-shadow: 1px 1px 1px #0f0104; display: inline-block; }
 * 1) mw-content a,
 * 2) mw-content a:visited {

/* -- Striped Table STRIPES - */ .striped_row tr:nth-child(even) { background-color: rgba(9, 9, 10, 0.3); }

/***************************************************************************/

mw-footer-container { background: transparent !important; }

/* - */ /* --: Custom grid for enemy pages:- */

.infobox_custom2 { display: grid; grid-template-columns: 0.2fr 2.2fr 2.4fr 0.2fr; grid-template-rows: 0.7fr 1.1fr 0.7fr 1.7fr 0.3fr; grid-auto-columns: 1fr; gap: 0px 0px; grid-auto-flow: row; grid-template-areas: "Left-space Enemy-image Enemy-image Right-space" "Left-space Enemy-image Enemy-image Right-space" "Left-space Enemy-specs Enemy-specs Right-space" "Left-space Enemy-description Enemy-description Right-space" "Left-space Enemy-traits Enemy-traits Right-space"; }

.Enemy-image { display: grid; /* grid-template-columns: 1fr 1fr 1fr; */ grid-template-columns: 0 1fr 0; /*Fix for enemy name >1 words*/ grid-template-rows: 0.2fr 0.8fr 0.8fr; gap: 0px 0px; grid-auto-flow: row; grid-template-areas: "Image-space-tLeft Enemy-name Image-space-tRight" "Image-space-center Image-space-center Image-space-center" "Image-space-center Image-space-center Image-space-center"; grid-area: Enemy-image; }

.Enemy-name { grid-area: Enemy-name; }

.Image-space-tLeft { grid-area: Image-space-tLeft; }

.Image-space-tRight { grid-area: Image-space-tRight; }

.Image-space-center { grid-area: Image-space-center; }

.Enemy-specs { grid-area: Enemy-specs; }

.Enemy-description { grid-area: Enemy-description; }

.Enemy-traits { grid-area: Enemy-traits; }

.Left-space { grid-area: Left-space; }

.Right-space { grid-area: Right-space; }

/* -: End of custom grid :-- */ /**Custom wikitable used on the Enemies page**/

table.wikitable-custom1 { text-align: center; border-collapse: collapse; table-layout:fixed; } table.wikitable-custom1 th { height: 40px; background-color: #2D2A2A; font-weight: normal; font-size: 17px; border: #0A0001 5px solid; } table.wikitable-custom1 td { height: 200px; border: #0A0001 3px solid; border-top: 1px solid #fff; } table.wikitable-custom1 tfoot td { font-size: 11px; border: #0A0001 3px solid; } table.wikitable-custom1 tbody td { background: url('https://static.miraheze.org/pgrwiki/9/91/Wiki-Background-EnemyCellDark.png'); background-position: center; height: 200px; width: 200px; z-index: 1; border: #0A0001 3px solid; } table.wikitable-custom1 tbody:hover td:hover { filter: invert(15%); } .enemyIcon { size: 120px; position: center; z-index: 2; } .enemyIconBackground { background: url('https://static.miraheze.org/pgrwiki/0/00/Wiki-Background-EnemyCellNew.png'); background-position: center; height: 200px; width: 200px; z-index: 1; } .enemyIconBackground:hover { filter: invert(80%); } span.fontWhite a { color: white; }

/* -: End of custom table :- */ /* --: Horizontal sidescrolling gallery :--- */

.shop-scroller { width: auto; height: 250px; white-space: nowrap; overflow-x: scroll; overflow-y: hidden; background-color: #FAFCE9 !important; }

.shop-scroller > div { display: inline-block; width: 150px; height: 190px; margin: 20px; text-align: center; color: #0A0001 !important; }

/* -: End of shop scroller :- */

/***************************************************************************/

/* -- top menu - */

margin-top: 0.4em !important; background-color: #28282a; }
 * 1) searchInput-container {

height: 1.4rem; }
 * 1) searchInput {

height: 1.6rem; }
 * 1) searchButton {

font-family: "roboto condensed" !important; }
 * 1) p-banner {

margin-top: 0.1rem; } /* -- end of top menu - */
 * 1) p-logo-text {

/* main content layout  */

display: none; }
 * 1) p-namespaces {

color: white !important; text-align: center; border-bottom: solid 2px #fff; }
 * 1) firstHeading {

.mw-parser-output { /*margin-top: 2em;*/ }

/*---*/

/*Editor Markup Color Change*/

/*Keywords and Storage, Formerly Blue : */ color: #2196F3; } /*Constants, Formerly green :*/ color: #558B2F; } /*Numbers, Numeric Constants. Formerly blue :*/ color: #2196F3; } /*Functions, Formerly dark-blue : */ color: #7E57C2; } /*Bare Tags, Formerly reddish-brown : */ color: #F4511E; } /*Strings, Formerly green : */ color: #43A047; } /*Class Names, Formerly unstyled */ color: #F57C00; } /*Blocked Texts*/ .ace_marker-layer .ace_selection { background: rgba(255, 255, 255, 0.2) !important; } /* -- Left side menu -- */
 * 1) editform .ace-tm .ace_storage, .ace-tm .ace_keyword {
 * 1) editform .ace-tm .ace_support.ace_constant {
 * 1) editform .ace-tm .ace_constant.ace_numeric {
 * 1) editform .ace-tm .ace_support.ace_function {
 * 1) editform .ace-tm .ace_constant {
 * 1) editform .ace-tm .ace_string {
 * 1) editform .ace-tm .ace_variable {

margin-left: 1.6em; margin-top: -0.8em !important; }
 * 1) p-Characters {

padding-bottom: 10px !important; } display: none; } .sidebar-inner { background-color: #141416; }
 * 1) p-managewiki-sidebar-header ul {
 * 1) p-addthis {

/* */

.wikitable tbody tr th, .sortable.wikitable tr th{ color:white; background-color:#921131; } .wikitable tbody tr td, .sortable.wikitable tr td{ color:white; background-color:#212129; } .wikitable tbody th, .wikitable tbody td, .sortable.wikitable th { border:1px solid black; }

.wikitable { border-width: 1px 1px 0em; border-color: initial; }

/* - override default tabs skins - */

ul.tabbernav { font-family:"roboto condensed" !important; }

ul.tabbernav li a { background-color: #212129; }

ul.tabbernav li a:hover { background-color: #921131; }

color: white; text-shadow: 2px 2px 1px #36363C; background-color: #7B7B88; border: 0.5px solid #CCC7C1; }
 * 1) mw-content ul.tabbernav .tabberactive a {

border: 0.5px solid black; }
 * 1) mw-content ul.tabbernav a {

color: #aaa8c0; }
 * 1) mw-content ul.tabbernav li a:visited {

/* Removing subpages backbutton */
 * 1) contentSub {display:none}

margin-top : 0.5rem !important; } /*Change sidebar width*/
 * 1) site-navigation .sidebar-inner #p-Gray_Ravens{

@media (max-width : 850px) { #mw-site-navigation { width : 0; }	#mw-content-wrapper { width : 100%; } } /*Change tabber styling*/ .tabber .tabbernav { border-bottom : none; font-size : 1rem !important; font-weight : bold; } .tabber .tabbernav li a { padding : 3px 0.8rem !important; } .tabber .tabbertab { border : none; } .tabber .tabberactive a { text-shadow : none !important; color : #121212 !important; border-color : black !important; background : #BDBDC5 !important; } .tabber .tabberactive a:hover { color : #921131 !important; }

/*Change Gallery and thumb styling*/ ul.gallery { margin: 2px !important; padding: 2px !important; display: flex !important; flex-flow: row wrap !important; gap: 0.5em 1em !important; justify-content: center !important; }

.mw-body li.gallerybox div.thumb { border: solid #2c2c30; border-width: 1px; }

/*Fix position of Page Header and its action buttons*/ display: flex; margin: 0 auto; align-content: center; width: max-content; font-size : 0.8rem; flex-direction : row-reverse; }	border-bottom : none; margin-bottom : 0; }	margin-top : 0 !important; }	text-transform: capitalize; }	padding-left : 0; } /*shrinking the footer*/ margin: 0; }	margin: 0; }	margin: 0; }	margin: 0; }	color : grey; background : black; font-size : 0.7rem; }	color : darkgrey; }
 * 1) mw-page-header-links {
 * 1) firstHeading {
 * 1) bodyContentOuter {
 * 1) ca-edit {
 * 1) ca-edit a {
 * 1) mw-footer li {
 * 1) footer-info {
 * 1) footer-places {
 * 1) footer-icons {
 * 1) mw-footer-container {
 * 1) mw-footer-container a {

/*Change default Tabs styling*/ .tabs-label { font-size : 1rem !important; font-weight : bold; padding : 3px 0.8rem !important; border-radius : 0 !important; color : #f72058; background-color: #212129; border-color : black; } .tabs-label:hover { color : white; background-color : #921131; } .tabs .tabs-container { border : none; } .tabs-tabbox > .tabs-input:checked + .tabs-label, .tabs-input-0:checked + .tabs-input-1 + .tabs-label { text-shadow : none !important; color : #121212 !important; border-color : black !important; background : #BDBDC5 !important; } .tabs-tabbox > .tabs-input:checked:hover + .tabs-label{ color : #921131 !important; } .tabs-tabbox > .tabs-input + .tabs-input + .tabs-label { margin-left : 0.4rem; }

/* -- KILL ME PLZ FUXKING MASSIVE ONE -- */


 * 1) infobox-character {display: grid;grid-template-columns: 1.4fr 2fr;grid-template-rows: 1fr;gap: 0px 0px;grid-auto-flow: row;grid-template-areas: "left""right";}#infobox-character .left img:hover {height: auto;width: auto;}#infobox-character div {color: white !important;}#v_line {background-color: black;width: 1px;height: 100%;}#h_line {background-color: black;width: 100%;height: 1px;}.left {display: grid;grid-template-columns: 1fr;grid-template-rows: 0.4fr 0.15fr 0.25fr 0.25fr 0.fr;gap: 0px 0px;grid-template-areas: "profile" "icon" "information" "speciality" "element";width: 100%;float: left;background-color: #212129 !important;}.left #header {grid-area: header;color: white;background-color: #921131;text-align: center;font-weight: bold;}.left #content {grid-area: content;text-align: start;}.left .profile {grid-area: profile;}.left .profile .center {padding-bottom: 0.8em;background-color: #0F0F12 !important;}.left .profile .center img {margin-bottom: -0.68em;}.left .icon {grid-area: icon;display: flex;max-height: 82px !important;margin: auto;}.left .icon img {margin: 10px 7px 10px 7px;border: 1px solid black;background-color: #0F0F12;}.left .icon .a {order: 1;}.left .icon .b {order: 2;}.left .icon .c {order: 3;}.left .information {grid-area: information;grid-template-columns: 1fr;grid-template-rows: 0fr 1fr;gap: 0px 0px;grid-template-areas: "header" "content";}.left .speciality {grid-area: speciality;grid-template-columns: 1fr;grid-template-rows: 1fr 1fr;gap: 0px 0px;grid-template-areas: "header" "content";}.left .element {grid-area: element;grid-template-columns: 1fr;grid-template-rows: 1fr 1fr;gap: 0px 0px;grid-template-areas: "header" "content";}.left .information #content, .left .speciality #content, .left .element #content {margin-left: 1em;margin-right: 1em;margin-top: 0.4em;margin-bottom: 0.4em;}#infobox-character .right {border-left: 2px solid #0F0F12;background-color: #212129;}.right #header {grid-area: header;text-align: start;font-weight: bold;}.right #content {grid-area: content;text-align: start;}#infobox-character .tabs-content.tabs-content-1 {width: 100%;}.right .data {display: grid;grid-template-columns: 1fr;grid-template-rows: 0.2fr 0.4fr 1px 4em;gap: 0px 0px;grid-auto-flow: row;grid-template-areas: "top" "middle" "h_line" "bottom";padding: 1em;}.data .top {grid-area: 1 / 1 / 2 / 2;display: grid;grid-template-columns: 1fr max-content 1fr;grid-template-rows: 1fr 1fr;gap: 0px 0px;grid-auto-flow: row;padding-bottom: 1em;padding-top: 1em;}.data .name {grid-area: 1 / 2 / 2 / 3;text-align: center;align-self: end;text-transform: uppercase;font-weight: bolder;}.data .frame {grid-area: 2 / 2 / 3 / 3;background-color: #212129 !important;align-self: center;vertical-align: middle;padding-left: 10px;padding-right: 10px;z-index: 2;}.data .horizontal-line {grid-area: 2 / 1 / 3 / 4;align-self: center;background-color: #babfc0 !important;width: 100% !important;height: 1px;z-index: 1;}.data .middle {grid-area: 2 / 1 / 3 / 2;display: grid;grid-template-columns: 50% 1px auto;grid-template-rows: 2fr;gap: 0px 0px;grid-auto-flow: row;grid-template-areas: "biography v_line stat";padding-top: 5px;padding-bottom: 1em;height: 350px;}.data .biography {grid-area: biography;}.data #v_line {grid-area: v_line;background-color: var(--character_infobox-h_line, #babfc0);}.data .stat {grid-area: stat;}.data #h_line {grid-area: h_line;background-color: var(--character_infobox-v_line, #babfc0);margin-top: 0.6em;}.data .bottom {grid-area: 3 / 1 / 4 / 2;margin-top: 5px;}.data .information {grid-area: 3 / 1 / 4 / 2;padding-top: 2.4em !important;}.right .biography {grid-area: biography;display: grid;grid-template-columns: 1fr;grid-template-rows: repeat(6, 1fr);gap: 7px 0px;grid-auto-flow: row;grid-template-areas: "service" "psychological" "activation" "height" "weight" "vital-fluid";width: 300;}.biography .service {grid-area: service;grid-template-columns: 1fr;grid-template-rows: 1fr 1fr;gap: 1px 0px;grid-template-areas: "header" "content";}.biography .psychological {grid-area: psychological;grid-template-columns: 1fr;grid-template-rows: 1fr 1fr;gap: 1px 0px;grid-template-areas: "header" "content";}.biography .activation {grid-area: activation;grid-template-columns: 1fr;grid-template-rows: 1fr 1fr;gap: 1px 0px;grid-template-areas: "header" "content";}.biography .height {grid-area: height;grid-template-columns: 1fr;grid-template-rows: 1fr 1fr;gap: 1px 0px;grid-template-areas: "header" "content";}.biography .weight {grid-area: weight;grid-template-columns: 1fr;grid-template-rows: 1fr 1fr;gap: 1px 0px;grid-template-areas: "header" "content";}.biography .vital-fluid {grid-area: vital-fluid;grid-template-columns: 1fr;grid-template-rows: 1fr 1fr;gap: 1px 0px;grid-template-areas: "header" "content";}.right .information {grid-area: information;display: grid;grid-template-columns: repeat(6, 1fr);grid-template-rows: 1fr;grid-auto-columns: 1fr;gap: 0px 10px;grid-template-areas: "rank class archetype signature-weapon army gift";justify-content: space-evenly;padding-top: 4px;}.right .information #content, .right .information #header {text-align: center;}.right .information #content img {margin-top: 5px;width: 60px !important;height: 60px !important;margin-bottom: 5px;}.right .information .rank #content img {margin-top: 5px;width: 80px !important;height: 60px !important;margin-bottom: 5px;}.right .information #text {text-align: center;}.information .rank {grid-area: rank;display: grid;grid-template-columns: 1fr;grid-template-rows: calc(fit-content+4px) 1fr;gap: 0px 0px;grid-template-areas: "header" "content";}.information .class {grid-area: class;display: grid;grid-template-columns: 1fr;grid-template-rows: calc(fit-content+4px) 1fr;gap: 0px 0px;grid-template-areas: "header" "content";}.information .archetype {grid-area: archetype;display: grid;grid-template-columns: 1fr;grid-template-rows: calc(fit-content+4px) 1fr;gap: 0px 0px;grid-template-areas: "header" "content";}.information .signature-weapon {grid-area: signature-weapon;display: grid;grid-template-columns: 1fr;grid-template-rows: calc(fit-content+4px) 1fr;gap: 0px 0px;grid-template-areas: "header" "content";}.information .army {grid-area: army;display: grid;grid-template-columns: 1fr;grid-template-rows: calc(fit-content+4px) 1fr;gap: 0px 0px;grid-template-areas: "header" "content";}.information .gift {grid-area: gift;display: grid;grid-template-columns: 1fr;grid-template-rows: calc(fit-content+4px) 1fr;gap: 0px 0px;grid-template-areas: "header" "content";}.right .stat {;grid-area: stat;display: grid;grid-template-columns: 1fr;grid-template-rows: min-content 1fr min-content;gap: 10px 0px;grid-auto-flow: row;grid-template-areas: "top" "graph" "table";padding-left: 1em;margin-top: -2em;}.right .table #content, .right .table #header {text-align: center;}.right .table #content, .right .table #header {text-align: center;}.stat .top {grid-area: top;display: grid;grid-template-columns: min-content;grid-template-rows: min-content min-content;gap: 0px 0px;grid-auto-flow: row;grid-template-areas: "header" "content";padding-top: 1.8em;}.stat .graph img {max-width: none !important;}.stat .graph {grid-area: graph;grid-area: top;display: grid;grid-template-columns: min-content;grid-template-rows: min-content min-content;gap: 0px 0px;grid-auto-flow: row;grid-template-areas: "header""content";object-position: 50% 50%;}.graph img {width: 225px !important;height: 225px !important;padding-left: 1em;padding-top: 4.6em;}.stat .table {display: grid;grid-template-columns: repeat(4, 1fr);grid-template-rows: 1fr;gap: 0px 5px;grid-auto-flow: row;grid-template-areas: "HP DEF ATK CRIT";grid-area: table;}.stat .HP {display: grid;grid-template-columns: 1fr;grid-template-rows: repeat(2, 1fr);gap: 0px 0px;grid-auto-flow: row;grid-template-areas: "header" "content";grid-area: HP;}.stat .DEF {display: grid;grid-template-columns: 1fr;grid-template-rows: repeat(2, 1fr);gap: 0px 0px;grid-auto-flow: row;grid-template-areas: "header" "content";grid-area: DEF;}.stat .ATK {display: grid;grid-template-columns: 1fr;grid-template-rows: repeat(2, 1fr);gap: 0px 0px;grid-auto-flow: row;grid-template-areas: "header" "content";grid-area: ATK;}.stat .CRIT {display: grid;grid-template-columns: 1fr;grid-template-rows: repeat(2, 1fr);gap: 0px 0px;grid-auto-flow: row;grid-template-areas: "header" "content";grid-area: CRIT;}.stat .DEF {display: grid;grid-template-columns: 1fr;grid-template-rows: repeat(2, 1fr);gap: 0px 0px;grid-auto-flow: row;grid-template-areas: "header""content";grid-area: DEF;}.stat .ATK {display: grid;grid-template-columns: 1fr;grid-template-rows: repeat(2, 1fr);gap: 0px 0px;grid-auto-flow: row;grid-template-areas: "header""content";grid-area: ATK;}.stat .CRIT {display: grid;grid-template-columns: 1fr;grid-template-rows: repeat(2, 1fr);gap: 0px 0px;grid-auto-flow: row;grid-template-areas: "header""content";grid-area: CRIT;}@media screen and (min-width:851px) and (max-width: 1366px) {#mw-content {width: 95% !important;}#mw-content-block {width: 80% !important;margin-left: 8em;}.left .icon {grid-area: icon;display: flex;padding-left: 0.75em;padding-right: 1em;}.right .information #content img {height: 50px !important;}.right .information .rank #content img {height: 50px !important;}.right .graph img {margin-left: -2.4em !important;}} @media only screen and (min-width: 1920px) {#infobox-character .right .stat {width: initial;}}#infobox-character .left .profile {display: flex;align-items: end;background-color: #0F0F12;border-bottom: 1px solid black !important;}

/* -- MASSIVE 2 : DIALOGUE -- */

.dialogue { display: grid; min-height: 60px; width: 90%; margin-bottom: 7px; margin-left: auto; margin-right: auto; background-color: rgba(11,12,14,0.25); }

.dialogue#narrator { display: grid; align-content: center; justify-content: center; background-color: red; color: white; }

.dialogue#character { display: grid; grid-template-columns: min-content 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0px 0px; grid-template-areas: "image content content" "image content content";

align-content: center; justify-content: center; } .dialogue#character .image { grid-area: image;

display: inherit; } .dialogue#character .content { grid-area: content; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 0px 0px; grid-auto-flow: row; grid-template-areas: "title" "text" "text";

display: inherit; } .dialogue#character .content .title { grid-area: title;

display: inherit; font-size: 15px; font-weight: bold; text-transform: uppercase; align-content: center; } .dialogue#character .content .text { grid-area: text;

display: inherit; justify-content: center; align-content: center; color: white; }

/* --*/

/* -- CUSTOM classes for skill table --- */

.custom-tab_1 { font-family: "Roboto Condensed"; } .custom-tab_1 .tabber { /* IS THIS REALLY NEEDED? */	display: flex; flex-wrap: wrap; } .custom-tab_1 .tabber .tabbertab { padding: initial; border: none; } .custom-tab_1 .tabbertab { width: 100% !important; } .custom-tab_1 .tabbernav { margin-top: 0.5rem; padding: 0; display: flex; gap: 0.375rem; overflow: auto; overflow: overlay; } .custom-tab_1 ::-webkit-scrollbar { width: 3px; height: 3px; } .custom-tab_1 ::-webkit-scrollbar-thumb { border: 0; background: #ffffff33; } .custom-tab_1 .tabbernav li { flex-shrink: 0; /* color: #fff; width: fit-content; */ } .custom-tab_1 .tabbernav .tabberactive a { color: #fff !important; background: #09090b !important; /* white-space: nowrap; */ border-bottom: initial !important; } .custom-tab_1 .tabbernav li a { border-right: none !important; color: #fff !important; cursor: pointer; line-height: 1.5; background: #921131; font-size: 18px; font-weight: 700; letter-spacing: 0.3px; margin: 0; border-bottom: initial !important; border-left: none !important; border-top: none !important; border-radius: 3px 3px 0 0; } .custom-tab_1 .tabbertab .content-table { background-color: #09090b !important; } .custom_full_width img { width: 100%; height: 100%; } .custom-table_1 { font-family: tahoma; } .custom-table_1 p { line-height: 1.4; margin: 0.6rem 0 0.4rem; } .custom-table_1 tr,td { padding-left: 20px; padding-right: 20px; } .custom-table_1 .custom-table_th { font-family: "Roboto Condensed"; font-size:26px;padding-left:20px } .custom-table_1 tr { font-size: 16px; line-height: 1.4; } .custom-table_1 .fix_align_middle { margin-top: 1.8em !important; margin: auto; } .custom-table_1 .fix_align_middle img { margin-top: -1.8em } .custom-table_th p { font-weight: 900; line-height: 1.2; color: #fff; } .custom-table_1 td { color: #c0c3d0; } .custom-tab_1 .tabbernav li a:hover { background-color: #db1948; transition: 0.3s; } .custom-table_1 td { padding-bottom: 0.6em; font-family: "roboto condensed"; }

/* --*/

/*Fixing Mobile Header*/ @media screen and (max-width :851px) { #personal-extra { position: absolute; top: 0.6rem; right: 3rem; }   #searchform { padding: 0 2rem; font-size: 1rem; width : unset; max-width : 20rem; }

} /*Inverting colors on important buttons so the icons become white*/ text-shadow : none !important; color : #08dfa7 !important; filter : invert(1); }	color : black !important; }	filter : invert(1); }	filter : invert(1); color : black; }	filter : invert(1); display: none; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { background-color: #fff; border-color: #fff; color: #dc2757; }
 * 1) p-views .mw-portlet-body a {
 * 1) p-views .mw-portlet-body a:hover {
 * 1) searchButton {
 * 1) personal h2 {
 * 1) ca-more {

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover { background-color: #fff; border-color: #fff; color: #dc2757; }

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { background-color: #dc2757; border-color: #dc2757; color: #fff; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover { background-color: #dc2757; border-color: #dc2757; color: #fff; }

/*Shrink page edit tools icons to match text size*/ @media screen and (min-width : 852px){ #mw-page-header-links a { background-size : 1rem; background-position : left center; } }

/* -- character icon hover color -- */ .character_icon_div a:hover { background-color: #921131 !important; transition: 0.3s; } /*---*/ /*Video Embed Styling : Iframe*/ iframe { width : 100% !important; height : 480px !important; }

@media screen and (min-width : 1100px) { height : 100%; }
 * 1) mw-site-navigation .sidebar-inner {

width : 100% !important; margin : 0; }	margin-left: 0; width: 70%; margin: 0 auto !important; padding-left: 5rem; } }
 * 1) mw-content-block {
 * 1) mw-footer {

/*Adaptive sidebar sizing*/ @media screen and (min-width : 1100px) and (max-width : 1365px){ #mw-content-container { margin-left : 15rem; margin-right : 5rem; }   #mw-content-block { width : 100%; max-width : 850px; margin : 0 auto; } } @media screen and (min-width : 1366px) and (max-width : 1919px) { #mw-content-container { margin-left : 17rem; margin-right : 6rem; }   #mw-content-block { max-width : unset; width : unset !important; margin : 0 20rem; } } @media screen and (min-width : 1920px) and (max-width : 2559px) {

#mw-content-container { margin-left : 22rem; margin-right : 8rem; }   #mw-content-block { max-width : 1200px; width : 100% !important; margin : 0 auto; } } @media screen and (min-width : 2560px) and (max-width : 3839px) { #mw-site-navigation { width : 28rem; }   #mw-content-container { margin-left : 28rem; margin-right : 9rem; }   #mw-content-block { max-width : 1500px; width : 100%; margin : 0 auto; } } @media screen and (min-width : 3840px) { #mw-site-navigation { width : 40rem; }	#mw-site-navigation .sidebar-inner>div h3 { font-size : 2rem !important; }   #mw-content-container { margin-left : 40rem; margin-right : 14rem; }   #mw-content-block { max-width : 2100px; width : 100%; margin : 0 auto; } }

/*to make specific links white*/ /*.whitelink a { color: white !important}*/ .whitelink a:visited { color: white !important; }

/*Code Editor Toolbar Adjustments*/ .wikiEditor-ui-toolbar { background: var(--RaisinBlack-gradient) !important; }   display: none; } span.tab.tab-advanced { display:none; } span.tab.tab-characters { display:none; } span.tab.tab-help { display:none; } /* -- fix right side bar -- */
 * 1) editpage-copywarn {

/* #mw-content { margin-left: -5rem; } this break the layout especially for mobile */

font-family: "roboto condensed"; background:#141416; position:fixed; right:0; width:15%; margin-top:1.5em; margin-right:1em; font-size: 1.2em; } border:none; } border-bottom:none; }
 * 1) mw-related-navigation {
 * 1) mw-related-navigation #page-tools,
 * 2) mw-related-navigation #catlinks-sidebar {
 * 1) mw-related-navigation .sidebar-chunk h3 {

margin-bottom: 1em; }
 * 1) mw-related-navigation .sidebar-chunk .mw-portlet-body {

margin-top: 0.2em !important; }
 * 1) page-tools {

margin-top: -1.2em !important; }
 * 1) catlinks-sidebar {

@media screen and (min-width :1930px) { #mw-related-navigation { width:288px; } }

/* -- custom level header -- */

color: #FF6549; }
 * 1) mw-content h1,
 * 2) mw-content h2,
 * 3) mw-content h3,
 * 4) mw-content h4,
 * 5) mw-content h5 {

border-bottom: none; }
 * 1) mw-content h1::after {

border-bottom: none; }
 * 1) mw-content h2::after {

/* -- media viewer layout -- */

.mw-mmv-image-wrapper { height: 100vh; }

.mw-mmv-post-image.mw-mmv-ttf-ellipsis-container { display: none; }

.mw-mmv-overlay { background-color: #000000e6; backdrop-filter: blur(5px); }

button.mw-mmv-close { color: red; }

.mw-mmv-final-image.png { background: none !important; }

/* -- go to top -- */

position: fixed; bottom: 0; right: 0; margin-right: 2em; margin-bottom: -3.6em; }
 * 1) go_to_top\" {

@media screen and (min-width:1367px) and (max-width :1920px) { #go_to_top\" img {       width: 150px;        margin-right: 2em;        margin-bottom: -9em;    } }

@media screen and (max-width :1366px) { #go_to_top\" img {       width: 125px;        margin-right: 2em;        margin-bottom: -10.1em;    } }

/*Add brighten on hover effect on screenshot template images*/ @keyframes imageHover { to { filter : brightness(1.15); } } .mw-body .single-image-container img:hover { -moz-animation : imageHover 0.3s forwards; -webkit-animation : imageHover 0.3s forwards; animation : imageHover 0.3s forwards; }	display : none; } /* to not exceed the screen width */ .no-overflow { max-width:100%; height:auto; }
 * 1) mw-related-navigation {

/* -- hide translate menu -- */

.mw-pt-languages.noprint { display: none; }

.mw-pt-translate-header.noprint.nomobile { display: none; }

/* -- hide cookie warnign container -- */ .mw-cookiewarning-container { display: none; }

/* -- hide history for non staff -- */ display: none; } /* -- Sitenotice CSS -- */ .mw-dismissable-notice { background: #212129 !important; border: solid #eaecf0; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; /*padding: 1em;*/ border-radius: 5px !important; }
 * 1) ca-history {

/* -- Changed BG color for ReplaceText Extension --*/ form:not(.oo-ui-layout) fieldset { background-color: black; } li#pt-mytalk { display: none; }   background: var(--RaisinBlack-gradient); }   color: white; }   filter: invert(1); color: #cc9933; }   color: #cc9933; }   filter: invert(1); color: black !important; } .tools-inline li.selected { border-bottom-color: white; } .tool.oo-ui-buttonElement-frameless.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon { filter: hue-rotate(85deg); } .tool-button, .tool.oo-ui-buttonElement-frameless.oo-ui-iconElement > .oo-ui-buttonElement-button { filter: invert(1); } .mw-ui-button:not(:disabled) { background-color: #f72058; border: none; } form:not(.oo-ui-layout) button, form:not(.oo-ui-layout) input[type='submit'] { background-color: #f72058; border: none; } form:not(.oo-ui-layout) button, form:not(.oo-ui-layout) input[type='submit']:hover { background-color: #f72058; border: none; } /*.oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header, .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field { display: none; } .oo-ui-panelLayout-padded.oo-ui-panelLayout-framed { border: none; margin: 0; padding: 0; } .mw-htmlform-field-HTMLMultiSelectField.oo-ui-fieldLayout, .mw-htmlform-ooui .htmlform-tip, .mw-htmlform-ooui .mw-htmlform-submit-buttons { margin: 0; text-align: center; }   background-color: black !important; } .oo-ui-fieldsetLayout.oo-ui-iconElement > .oo-ui-fieldsetLayout-header, .oo-ui-fieldsetLayout.oo-ui-labelElement > .oo-ui-fieldsetLayout-header { display: none; } .oo-ui-panelLayout-padded.oo-ui-panelLayout-framed { margin: 0; border: none; /*text-align: center;*/ }
 * 1) personal .dropdown {
 * 1) personal .dropdown h3 {
 * 1) pt-uls .uls-trigger {
 * 1) pt-uls .uls-trigger :hover {
 * 1) mw-indicator-mw-helplink a {
 * 1) msupload-dropzone {

background-color: #ffffff0f; padding: 3px; border-radius: 100%; border-style: solid; border: 3px double white; }
 * 1) profile-image img {

/* character icon rarity */ .character_icon_div_B img { background-image:linear-gradient(to bottom,#162E65,#0A1631); }

.character_icon_div_A img { background-image:linear-gradient(to bottom,#7D3F77,#491D45); }

.character_icon_div_S img { background-image:linear-gradient(to bottom,#D84F21,#872A0B); }

.character_icon_div_TS img { background-image:linear-gradient(to bottom,#BD6100,#6D3800); }

.character_icon_div_A img:hover { background-image:linear-gradient(to top, #730D26, #400715); transition:0.3s; } .character_icon_div_B img:hover { background-image:linear-gradient(to top, #730D26, #400715); transition:0.3s; } .character_icon_div_S img:hover { background-image:linear-gradient(to top, #730D26, #400715); transition:0.3s; } .character_icon_div_TS img:hover { background-image:linear-gradient(to top, #730D26, #400715); transition:0.3s; } @media screen and (min-width: 851px) display:none; } @media screen and (max-width: 850px) display: none; } @media screen and (max-width: 850px) display: none; } @media screen and (max-width: 850px) display: none width: 0px; height: 0px; } .mw-collapsibleFieldsetLayout.mw-collapsible.mw-collapsed .mw-collapsible-toggle .oo-ui-icon-expand { filter: invert(1); } .mw-ui-icon-before span { color: white; font-weight: normal; } .mw-mmv-filepage-buttons .mw-mmv-view-config .mw-ui-icon:before { filter: invert(1); } .mw-mmv-filepage-buttons .mw-mmv-view-expanded .mw-ui-icon:before { filter: invert(1); }
 * 1) personal .dropdown:after {
 * 1) catlinks div {
 * 1) user-tools h2, .sidebar-chunk h2 {
 * 1) user-tools h2:after, .sidebar-chunk h2:after {

/* CSS for Audio buttons */

.audio-button { width: 18px; height: 18px; background-color: #f72058; border: none; border-radius: 5px; background-image: url('https://static.miraheze.org/pgrwiki/f/fd/OggPlayer-Play.png'); display: inline-block; background-size: 18px auto; } .audio-button.playing, .audio-button:hover, .audio-button-parent:hover > .click-parent { background-color: #f72058 !important; } .audio-button.playing { background-image: url('https://static.miraheze.org/pgrwiki/d/d2/OggPlayer-Stop.png'); background-size: 18px auto; } .audio-button.no-audio { background-color: #f72058; background-size: 18px auto; background-image: url('https://static.miraheze.org/pgrwiki/6/6f/OggPlayer-Mute.png'); }

.audio-button>*{ display: none; }

/*@keyframes wiggle { 0% {transform: rotate(0deg);} 25% {transform: rotate(10deg);} 75% {transform: rotate(-20deg);} }*/

/* Audio Button CSS End */

/* Re-design search suggestion bar */ .suggestions .suggestions-special { background-color: #212129; color: white; } .suggestions-special .special-label { color: white; background-color: #212129; } .suggestions .suggestions-result { background-color: #212129; color: white; } .suggestions-special .special-query { color: white; } /* END of Re-design search suggestion bar */

border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
 * 1) mw-content-container #mw-content {

li#t-whatlinkshere.mw-list-item a { color: #f353b3; } li#t-recentchangeslinked.mw-list-item a { color: #f353b3; } li#t-print.mw-list-item a { color: #f353b3; } li#t-permalink.mw-list-item a { color: #f353b3; } li#t-info.mw-list-item a { color: #f353b3; } li#t-pagelog.mw-list-item a { color: #f353b3; } li#ca-delete.mw-list-item a { color: #f353b3; } li#ca-move.mw-list-item a { color: #f353b3; } li#ca-protect.mw-list-item a { color: #f353b3; }

li#t-whatlinkshere.mw-list-item a:hover { color: #f353b3 !important; } li#t-recentchangeslinked.mw-list-item a:hover { color: #f353b3 !important; } li#t-print.mw-list-item a:hover { color: #f353b3 !important; } li#t-permalink.mw-list-item a:hover { color: #f353b3- !important; } li#t-info.mw-list-item a:hover { color: #f353b3 !important; } li#t-pagelog.mw-list-item a:hover { color: #f353b3 !important; } li#ca-delete.mw-list-item a:hover { color: #f353b3 !important; } li#ca-move.mw-list-item a:hover { color: #f353b3 !important; } li#ca-protect.mw-list-item a:hover { color: #f353b3 !important; } /* Temporarily removed site notices*/ .mw-dismissable-notice { display: none !important; }

/* Design Donate pop up*/ .mw-ui-button:not(:disabled) { display: none; } .frb-message-inner { border-left: 6px solid #f72058; } .frb-greeting { margin-bottom: -2.4em; } .frb-message-inner { border-left: 5px solid #f72058 !important; }