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

h2 .mw-headline { 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; }

/* ===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 {

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