MediaWiki:Common.css

/* CSS placed here will be applied to all skins */

/* ===Imports=== */ @import url("/load.php?mode=articles&only=styles&articles=u:dev:MediaWiki:BalancedCategories.css|u:dev:MediaWiki:BalancedComments.css|u:dev:MediaWiki:BalancedSearch.css|u:dev:MediaWiki:BalancedPageBottom.css|u:dev:MediaWiki:BalancedProfile.css"); @import url('https://fonts.googleapis.com/css2?family=Castoro:ital@0;1&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Overpass:wght@700&display=swap'); @import url('https://fawni.github.io/addons/DiscordFont.css');

/* ===General=== */ .page { border-top: 4px solid #bb0001; border-radius: 4px; }

html:not(.ve-activated) .page.has-right-rail .page__main, .page__main { border-radius: 0; }

/* ===Header=== */ .fandom-community-header__community-name, .page-header__title, .mw-headline { font: 'Overpass', sans-serif !important; }

.mw-headline { font-weight: bold; background: linear-gradient(to top, rgba(var(--theme-link-color--rgb), 0.2) 55%, transparent 55%, transparent 100%) }

/* Novigation Dropdown */ .wds-dropdown__content .wds-list.wds-is-linked li:hover > a svg.wds-dropdown-chevron { transform: rotate(90deg); } .wds-tabs .wds-icon { transition: 0.2s ease-in-out; } .wds-icon-tiny { transition: transform 0.2s; }

/* ===Mainpage Design=== */ .main-header { background-color: #ff000029; border: 2px solid #bb0001; text-align: center; padding: 16px 16px 8px 16px; border-radius: 10px 10px 0 0; font: 1.5rem 'Overpass', sans-serif; }

.main-body { background-color: #21233b; text-align: center; padding: 25px; border-radius: 0 0 10px 10px; margin-bottom: 20px }

.theme-fandomdesktop-dark .main-body { background-color: #21233b }

.theme-fandomdesktop-light .main-body { background-color: #eee }

.main-bg-img { background-size: cover; }

.theme-fandomdesktop-dark .main-bg-img { background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://static.wikia.nocookie.net/to-be-a-power-in-the-shadows/images/0/08/Site-background-dark/revision/latest?cb=20230111061120"); }

.theme-fandomdesktop-light .main-bg-img { background-image: linear-gradient(rgba(238, 238, 238, 0.7),rgba(238, 238, 238, 0.7)), url("https://static.wikia.nocookie.net/to-be-a-power-in-the-shadows/images/0/08/Site-background-dark/revision/latest?cb=20230111061120") }

.discord-bg-img { height: 100%; font: 2rem 'Discord' }

.main-body.discord-bg-img { padding: 0; }

.discord-bg-img a img { width: 100%; height: 100%; object-fit: cover }

.discord-bg-img a { position: relative; float: left }

.discord-bg-img a:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(0, 0, 0, 0.7), rgba(61, 22, 39, 0.3)); transition: 0.2s ease-in-out }

.discord-bg-img:hover > a:before { opacity: .8 }

.main-second-header { overflow: hidden; padding: 5px } .main-second-header > span { position: relative; display: inline-block; font: 1.2rem 'Overpass', sans-serif } .main-second-header > span:before, .main-second-header > span:after{ content: ''; position: absolute; top: 50%; border-bottom: 2px solid #bb0001; width: 100vw; margin: 0 20px } .main-second-header > span:before { right: 100% }

.main-cover { width: 150px; margin: 0 15px 30px }

.main-cover p { margin: 0 }

.main-cover p a img { height: 100%; width: 100%; border: 2px solid #bb0001; border-radius: 5px 5px 0 0; border-bottom: none; aspect-ratio: 5 / 7 }

.main-cover p a img:hover { opacity: .7 }

.main-cover-caption { border-radius: 0 0 5px 5px; background-color: #ff000029; font-weight: 600; font-size: 12px; border: 2px solid #bb0001 }

.theme-fandomdesktop-dark .main-cover-caption a  { color: white }

.theme-fandomdesktop-light .main-cover-caption a { color: black }

.animangafooter { padding: 0.5rem !important; border: 2px solid #bb0001 !important; border-radius: 10px }

.theme-fandomdesktop-dark .animangafooter { background-color: #21233b }

.theme-fandomdesktop-light .animangafooter { background-color: #eee }

/* ===Infobox Design=== */ .portable-infobox { border: 1px solid var(--pi-secondary-background); border-radius: 5px; margin-right: 1px; }

.portable-infobox .pi-title { border-radius: 5px 5px 0 0; }

.theme-fandomdesktop-dark div.pi-item:nth-child(odd), .theme-fandomdesktop-dark .pi-horizontal-group-item { background-color: #14162f80; }

.theme-fandomdesktop-dark div.pi-item:nth-child(even) { background-color: #292b4680; }

.theme-fandomdesktop-dark .portable-infobox .wds-tabs { background-color: #292b4680; }

.theme-fandomdesktop-light div.pi-item:nth-child(odd), .theme-fandomdesktop-light .pi-horizontal-group-item { background-color: #dedede; }

.theme-fandomdesktop-light div.pi-item:nth-child(even) { background-color: #eee; }

.theme-fandomdesktop-light .portable-infobox .wds-tabs { background-color: #eee; }

.portable-infobox .pi-data { transition: 0.1s ease-in-out; }

.theme-fandomdesktop-dark .portable-infobox .pi-data:hover, .theme-fandomdesktop-dark .portable-infobox .pi-horizontal-group:hover { background-color: #2a182b !important; }

.theme-fandomdesktop-light .portable-infobox .pi-data:hover, .theme-fandomdesktop-light .portable-infobox .pi-horizontal-group:hover { background-color: #ffe4e4 !important; }

/* ===Character Icons=== */ .character-container { display: flex; }

.main-page-characters { display: inline-block; margin: 10px; }

.main-page-characters p { margin: 0 0 6px; }

.main-page-characters p a img { display: block; height: 100px; width: 100px; border: 2px #bb0001 solid; border-radius: 25px; transition: 0.2s ease-in-out; }

.main-page-characters p a img:hover { opacity: .7 }

.main-page-caption { width: 100px; text-align: center; border-radius: 10px; background-color: #ff000029; font-weight: 600; font-size: 12px; border: 2px solid #bb0001; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px 0 4px }

.theme-fandomdesktop-dark .main-page-caption a  { color: white }

.theme-fandomdesktop-light .main-page-caption a { color: black }

/* ===Article Design=== */ .theme-fandomdesktop-dark .toc { background-color: #292b4680; }

.theme-fandomdesktop-light .toc { background-color: #eee; }

.article-tabs { display: flex; width: 100%; margin: 5px 0; gap: 5px }

.article-tab-div { width: 100%; }

.article-tab a, .article-tab.selected-tab strong { display: block; width: 100%; padding: 10px 40px 7px; background-color: #ff000029; border: 2px solid #bb0001; border-radius: 10px; text-align: center; font: 1rem 'Overpass', sans-serif; transition: 0.2s ease-in-out }

.theme-fandomdesktop-dark .article-tab a { color: white; }

.theme-fandomdesktop-light .article-tab a { color: black; }

.selected-tab strong { text-decoration: underline; }

.theme-fandomdesktop-dark .selected-tab strong, .theme-fandomdesktop-dark .article-tab a:hover { background-color: #ff1a1a }

.theme-fandomdesktop-light .selected-tab strong, .theme-fandomdesktop-light .article-tab a:hover { background-color: #ff4b4b; }

/* ===User Design=== */ a[href$=":1kbyte"], a[href$="/1kbyte"] { color: #C29DFD !important; }

/* ===Back To Top Button=== */ background-color: #bb000180 !important; outline: 2px solid #bb0001; }   background-color: red !important; }
 * 1) BackToTopBtn div {
 * 1) BackToTopBtn div:hover {

/* ===Spoiler Blur=== */ /* Source: https://dev.fandom.com/wiki/SpoilerBlur */ .spoilerblur { filter: blur(4.5px); /* fallback if for some reason browsers can't parse floating point */ filter: blur(5px); transition: filter .1s linear,opacity .1s linear,text-shadow .1s linear; } .spoilerblur:is(:hover, :focus, :focus-within, :active) { filter: blur(0px); text-shadow: 0 0 0 transparent; }

/* This part is candidate for complete removal, as it is not clear why it is  needed (see talk page of the documentation page). But for now it is just excluded from affecting direct childs of  elements, since otherwise it causes misaligning of the bullet or number.

/* NEEDED: See https://community.fandom.com/f/p/4400000000003375796 */
 * not(li) > .spoilerblur {

display: unset; }

/* ===Experimental Changes=== */