User:InkScarlet/FandomDesktop.css

/*
 * Hollow Knight Wiki (EN) - Version 1.0 (22.06.2021)
 * Skin créer par Utilisateur:Polymeric - CC-BY-SA et modifier par Utilisateur:InkScarley
 * Veuillez noter que ce skin a été créé spécifiquement pour
 * https://hollow-knight.fandom.com/ et que si vous souhaitez le copier,
 * que ce soit partiellement ou complètement, n'oubliez pas de créditer
 * et de citer son origine.
 * et de citer son origine.

/* TABLE DES MATIÈRES */ /*
 * Pour trouver une section spécifique du document, appuyez sur CTRL + F et,
 * dans la barre de recherche, écrivez le nom de la section à laquelle
 * vous voulez accéder. barre de recherche, écrivez le nom de la section dans
 * laquelle vous voulez vous diriger.
 * 1. Imports
 * 2. Fonts
 * 3. Global variables
 * 3.1. Themed variables
 * 3.1.1 Hidden Dreams
 * 3.1.2 The Grimm Troupe
 * 3.1.3 Godmaster
 * 3.1.4 Lifeblood
 * 3.1.5 Voidheart
 * 3.1.6 Lore
 * 3.1.7 Hollow Knight
 * 3.1.8 Silksong
 * 4. Infobox
 * 4.1. General styles
 * 4.2. Title cell
 * 4.3. Info cells
 * 4.4. Image section
 * 4.4. Themed styles
 * 4.4.1. Hidden Dreams
 * 4.4.2. The Grimm Troupe
 * 4.4.3. Godmaster
 * 4.4.4. Lifeblood
 * 4.4.5. Voidheart
 * 4.4.6. Lore
 * 4.4.7. Silksong
 * 5. General styles
 * 5.1. Header
 * 5.2. Body
 * 5.3. Footer
 * 6. Fixes and tweaks
 * 6. Fixes and tweaks

/* Imports */ @import '/load.php?mode=articles&articles=u:dev:MediaWiki:InterlanguageFlags.css&only=styles'; @import url(https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap);

/* Fonts */ @font-face { font-family: TrajanPro; src: local('TrajanPro-Regular'), url(https://vignette.wikia.nocookie.net/hollowknight/images/a/a7/TrajanPro-Regular.otf) format('opentype'); }

@font-face { font-family: TrajanPro; font-weight: bold; src: local('TrajanPro-Bold'), url(https://vignette.wikia.nocookie.net/hollowknight/images/a/a4/TrajanPro-Bold.otf) format('opentype'); }

/* Global variables. */
 * root {

--oasis-europa-horizontal-group-background-color: transparent; --theme-font-1: TrajanPro, 'Times New Roman', serif; --theme-font-2: Lato, Roboto, Arial, sans-serif --pi-headers-font: var(--theme-font-1); --pi-tabbers-font: var(--theme-font-1); --pi-buttons-font: var(--theme-font-1); --theme-body-font: var(--theme-font-2); --scrollbar-background-color: #464646; --scrollbar-corner-color: #121212; --theme-alert-color: #ef9a9a; --theme-alert-color--rgb: 239, 154, 154; --theme-alert-label: #121212; --theme-success-color: #a5d6a7; --theme-success-color--rgb: 165, 214, 167; --theme-success-label: #121212; --theme-message-color: #81d4fa; }

.portable-infobox { --pi-background: rgba(81, 90, 132, .4); --pi-border-color: var(--theme-accent-label-color); }

.wds-tabs, .wds-tabs__wrapper { --wds-tab-color: var(--theme-link-color); --wds-tab-color--hover: var(--wds-tab-color); }

/** Themed variables. **/ /*** Default theme. ***/ /**** .wiki-hollowknight { --theme-body-background-image: url(https://static.wikia.nocookie.net/hollowknight/images/8/8e/HK_Wiki_Bg.webp); --theme-border-color: #ccc; --theme-border-color--rgb: 204, 204, 204; --theme-header-background-color: #000; --theme-header-background-color--rgb: 0, 0, 0; --theme-header-background-image: url(https://static.wikia.nocookie.net/hollowknight/images/8/82/HK_Wiki_Header.webp); --theme-link-color--hover: #cfdded; --theme-link-color--hover-rgb: 207, 221, 237; }
 * Note: any colors for the normal theme should be changed through the Theme
 * Designer (except the links-on-hover color, which should be updated alongside
 * the theme designer). Do not use background or header images in there, use
 * the variables below instead.
 * Not having a value for --theme-link-color--hover-rgb will also break the
 * scrollbar's button colors.

/*** Rêves Cachés. ***/ .page-Rêves_Cachés, .page-Protecteur_Blanc, .page-Zote_le_Prince_Gris, .page-Hopping_Zoteling, .page-Winged_Zoteling, .page-Volatile_Zoteling, .page-Portail_des_Rêves { --theme-body-background-image: url(https://static.wikia.nocookie.net/hollowknight/images/2/2f/HK_Wiki_Bg-Hidden_Dreams.webp); --theme-border-color: #ce93d8; --theme-border-color--rgb: 207, 147, 216; /* Page background color. */ --theme-page-background-color: #311a47; /* var(--theme-page-background-color) + 8% var(--theme-link-color--rgb) */ /* Right rail background color. */ --theme-page-background-color--secondary: #44335c; /* var(--theme-page-background-color--secondary) + 16% var(--theme-link-color--rgb) */ /* Text and links colors. */ --theme-page-text-mix-color: #ce93d8; --theme-accent-label-color: #f3e5f5; --theme-link-color: #c078d2; --theme-link-color--rgb: 192, 120, 210; --theme-link-color--hover: #ce93d8; --theme-link-color--hover-rgb: 207, 147, 216; --theme-header-background-color: #6a498e; --theme-header-background-color--rgb: 106, 73, 142; --theme-header-background-image: url(https://static.wikia.nocookie.net/hollowknight/images/c/c1/HK_Wiki_Header-Hidden_Dreams.webp); }

/*** La Troupe Grimm. ***/ .page-La_Troupe_Grimm, .page-Grimm, .page-Nightmare_King, .page-Grimmkin_Novice, .page-Grimmkin_Master, .page-Grimmkin_Nightmare, .page-Brumm, .page-Brumm, .page-Divine, .page-Grimmsteed, .page-Nymm, .page-Grimmchild, .page-Dreamshield, .page-Sprintmaster, .page-Weaversong, .page-Carefree_Melody, .page-Unbreakable_Strength, .page-Unbreakable_Heart, .page-Unbreakable_Greed, .page-Path_of_Pain, .page-Seal_of_Binding, .page-Nightmare_King_Grimm { --theme-body-background-image: url(https://static.wikia.nocookie.net/hollowknight/images/0/07/HK_Wiki_Bg-The_Grimm_Troupe.webp); --theme-border-color: #ef9a9a; --theme-border-color--rgb: 239, 154, 154; --theme-page-background-color: #381720; --theme-page-background-color--secondary: #65303a; --theme-page-text-mix-color: #ef9a9a; --theme-accent-label-color: #ffebee; --theme-link-color: #ef6069; --theme-link-color--rgb: 239, 96, 106; --theme-link-color--hover: #ef9a9a; --theme-link-color--hover-rgb: 229, 43, 81; --theme-header-background-color: #ab1336; --theme-header-background-color--rgb: 171, 19, 54; --theme-header-background-image: url(https://static.wikia.nocookie.net/hollowknight/images/1/1a/HK_Wiki_Header-The_Grimm_Trouper.webp); }

/*** Chercheur de Dieux. ***/ .page-Chercheur_de_Dieux, .page-Brothers_Oro_Mato, .page-Fluke_Hermit, .page-Flukemunga, .page-Godseeker_Mode, .page-Great_Nailsage_Sly, .page-Hall_of_Gods, .page-Paintmaster_Sheo, .page-Pale_Lurker, .page-Pantheon_of_Hallownest, .page-Pantheon_of_the_Artist, .page-Pantheon_of_the_Knight, .page-Pantheon_of_the_Master, .page-Pantheon_of_the_Sage, .page-Pure_Vessel, .page-The_Eternal_Ordeal, .page-Eternal_Ordeal, .page-The_Godseeker, .page-Godseeker, .page-Void_Idol, .page-Weathered_Mask, .page-Godtuner, .page-Eternal_Ordeal, .page-Godhome, .page-Pantheons, .page-Sisters_of_Battle, .page-Winged_Nosk, .page-Absolute_Radiance { --theme-body-background-image: url(https://static.wikia.nocookie.net/hollowknight/images/5/5c/HK_Wiki_Bg-Godmaster.webp); --theme-border-color: #ffd29e; --theme-border-color--rgb: 255, 210, 158; --theme-page-background-color: #453b2e; --theme-page-background-color--secondary: #544737; --theme-page-text-mix-color: #FFe694; --theme-accent-label-color: #fffde7; --theme-link-color: #ccab78; --theme-link-color--rgb: 204, 171, 120; --theme-link-color--hover: #ffcd9d; --theme-link-color--hover-rgb: 255, 220, 157; --theme-header-background-color: #ba9056; --theme-header-background-color--rgb: 186, 144, 86; --theme-header-background-image: url(https://static.wikia.nocookie.net/hollowknight/images/f/fc/HK_Wiki_Header-Godmaster.webp); }

/*** Sang-de-vie. ***/ .page-Sang-de-vie, .page-Cocon_Sang-de-vie, .page-Chevalier_de_la_Ruche { --theme-body-background-image: url(https://static.wikia.nocookie.net/hollowknight/images/7/7c/HK_Wiki_Bg-Lifeblood.webp); --theme-border-color: #34bbfa; --theme-border-color: 199, 79, 98; --theme-page-background-color: #263b52; --theme-page-background-color--secondary: #3c566b; --theme-page-text-mix-color: #81d4fa; --theme-accent-label-color: #e1f5fe; --theme-link-color: #00a9ff; --theme-link-color--rgb: 0, 169, 255; --theme-link-color--hover: #81d4fa; --theme-link-color--hover-rgb: 129, 212, 250; --theme-header-background-color: #003554; --theme-header-background-color--rgb: 0, 53, 84; --theme-header-background-image: url(https://static.wikia.nocookie.net/hollowknight/images/e/ed/HK_Wiki_Header-Lifeblood.webp); }

/*** Édition Coeur-du-Vide. ***/ .page-Édition_Coeur-du-Vide { --theme-body-background-image: url(https://static.wikia.nocookie.net/hollowknight/images/f/f5/HK_Wiki_Bg-Voidheart.webp); --theme-border-color: #89a395; --theme-border-color--rgb: 137, 163, 149; --theme-page-background-color: #262926; --theme-page-background-color--secondary: #2f3634; --theme-page-text-mix-color: #eee; --theme-accent-label-color: #e1f5fe; --theme-link-color: #89a395; --theme-link-color--rgb: 137, 163, 149; --theme-link-color--hover: #b4d6c4; --theme-link-color--hover-rgb: 180, 214, 196; --theme-header-background-color: #000; --theme-header-background-color--rgb: 0, 0, 0; --theme-header-background-image: url(https://static.wikia.nocookie.net/hollowknight/images/5/5a/HK_Wiki_Header-Voidheart.webp); }

/*** Histoire. ***/ .page-Histoire_d’Hallownest, .page-Abyss_Creature, .page-Ancient_Civilisation, .page-Les_Abeilles, .page-Boon, .page-Dream_Realm, .page-Les_Rêveurs, .page-Ellina_la_Chroniqueuse, .page-Five_Great_Knights, .page-Les_Flukes, .page-Les_Fous, .page-Fungal_Tribe, .page-Les_Chercheurs_de_Dieux, .page-Hallownest, .page-Higher_Beings, .page-Infection, .page-Lord_Fool, .page-Mantis_Tribe, .page-Mosskin_Tribe, .page-Moth_Tribe, .page-Nest, .page-Le_Roi_Pâle, .page-Pharloom, .page-Snail_Shamans, .page-Soul_Sanctum_s_Scholars, .page-Grimm_Troupe_Lore, .page-Nightmare’s_Heart, .page-Vessels, .page-Void, .page-Void_Entity, .page-Les_Tisserands, .page-Les_Wyrms { --theme-body-background-image: url(https://static.wikia.nocookie.net/hollowknight/images/7/7a/HK_Wiki_Bg-Lore.webp); --theme-border-color: #e1eeFF; --theme-border-color--rgb: 255, 238, 255; --theme-page-background-color: #323c4d; --theme-page-background-color--secondary: #3e495e; --theme-page-text-mix-color: #92aadb; --theme-accent-label-color: #e2f1f8; --theme-link-color: #92aadb; --theme-link-color--rgb: 146,170,219; --theme-link-color--hover: #fff; --theme-link-color--hover-rgb: 255, 255, 255; --theme-header-background-color: #aebed6; --theme-header-background-color--rgb: 174, 190, 214; --theme-header-background-image: url(https://static.wikia.nocookie.net/hollowknight/images/d/d7/HK_Wiki_Header-Lore.webp); }

/*** Hollow Knight. ***/ .page-Hollow_Knight_Wiki, .page-Category_Additional_Content_Hollow_Knight { --theme-body-background-image: url(https://static.wikia.nocookie.net/hollowknight/images/a/a6/HK_Wiki_Bg-Hollow_Knight.webp); --theme-header-background-image: url(https://static.wikia.nocookie.net/hollowknight/images/2/2d/HK_Wiki_Header-Hollow_Knight.webp); }

/*** Hollow Knight: Silksong. ***/ .page-Silksong, .page-Additional_Content_Silksong, .page-Hollow_Knight_Silksong, .page-Zones_de_Pharloom, .page-Areas_Silksong, .page-Deep_Docks, .page-Greymoor, .page-Moss_Grotto, .page-Bonebottom, .page-NPCs_Silksong, .page-Ballow, .page-Church_Keeper, .page-Flea, .page-Forge-Daughter, .page-Garmond_and_Zaza, .page-Huntress, .page-Shakra, .page-Sherma, .page-Trobbio, .page-Category_Bosses_Silksong, .page-Bosses_Silksong, .page-Carmelita, .page-Lace, .page-Moss_Mother, .page-Sharpe, .page-Ennemis_Silksong, .page-Crawbug, .page-Dustroach, .page-Mask_Piece, .page-Rosary, .page-Rosaries, .page-Shell_Shards, .page-Soie, .page-Tool_Pouch, .page-Skills, .page-Bind, .page-Outils, .page-Lore_Tablets_Silksong, .page-Hornet_Silksong { --theme-body-background-image: url(https://static.wikia.nocookie.net/hollowknight/images/8/86/HK_Wiki_Bg-Silksong.webp); --theme-border-color: #ffab91; --theme-border-color--rgb: 255, 172, 145; --theme-page-background-color: #523020; --theme-page-background-color--secondary: #5c3c2f; --theme-page-text-mix-color: #6b4436; --theme-accent-label-color: #ffddc1; --theme-link-color: #FFa458; --theme-link-color--rgb: 255, 164, 88; --theme-link-color--hover: #ffab91; --theme-link-color--hover-rgb: 255, 172, 145; --theme-header-background-color: #742729; --theme-header-background-color--rgb: 116, 41, 39; --theme-header-background-image: url(https://static.wikia.nocookie.net/hollowknight/images/1/1a/HK_Wiki_Header-Silksong.webp); }

/* BACKGROUND OVERLAY - Useful to calculate skin colors.* .page__main::before, .right-rail-wrapper::before { background: rgba(var(--theme-link-color--rgb), .16); content: ''; display: block; height: 100%; inset: 0; position: absolute; width: 100%; } /**/

/* Infobox. */ /** General styles. **/ .portable-infobox.pi-background { background: var(--pi-background) top / cover no-repeat url(https://vignette.wikia.nocookie.net/hollowknight/images/3/38/Infobox_HK_Background.png); border-image: url(https://vignette.wikia.nocookie.net/hollowknight/images/3/31/Infobox_Bottom.png) 60% fill / 40px; border-radius: 7px; margin: 6px; padding-bottom: 10px; }

/** Title cell. **/ .portable-infobox .pi-title { border-image: url(https://images.wikia.nocookie.net/hollowknight/ru/images/7/75/Top_custom.png) 40% fill / 40px; font: 500 20px / 20px var(--pi-tabbers-font); padding: 12px 24px; }

/** Info cells. **/ .portable-infobox .pi-item-spacing:not(.pi-title), .pi-horizontal-group .pi-horizontal-group-item { border-image: linear-gradient(to right, #FFF0, var(--theme-accent-label-color), #FFF0) 47% 0%; padding: 10px; padding-top: 9px; }

/*** .pi-horizontal-group { border-collapse: initial; }
 * Removing left border and restoring top border's styles on horizontal
 * cells.

.pi-horizontal-group .pi-horizontal-group-item { border: none; border-image: linear-gradient(to right, #FFF0, var(--theme-accent-label-color), #FFF0) 47% 0%; border-top: 1px solid; }

.pi-horizontal-group .pi-horizontal-group-item:not(:first-child) { border-left: none; }

/** Image section. **/ /*** Tabbers. ***/ /**** .portable-infobox .wds-tabs__wrapper { padding: 0 24px; }
 * Adding padding to the tabbers menu so arrow the buttons don't appear
 * above/below the text.

/**** Changes cursor when hovering tabbers. ****/ .portable-infobox .wds-tabs__tab { cursor: pointer; }

/**** Horizontally centers all tabbers unless any arrow button is visible. ****/ .portable-infobox .wds-tabs__wrapper:not(.right-arrow-visible, .left-arrow-visible, .both-arrows-visible) .wds-tabs { justify-content: center; }

/**** Makes all tabbers' text bold. ****/ .portable-infobox .wds-tabs__tab-label { font-weight: bold; }

/**** General tabs' styles. ****/ .portable-infobox .wds-tabs__tab { color: var(--theme-link-color); font-family: var(--pi-tabbers-font); font-weight: bold; text-shadow: 0px 0px 7px #333; }

/**** Selected tabber. ****/ .portable-infobox .wds-is-current { border-bottom: 1px solid transparent; border-image: linear-gradient(to right, #FFF0, currentcolor, #FFF0) 47% 0%; box-shadow: none; color: var(--theme-accent-label-color); }

/**** Arrow buttons styles. ****/ /****** .portable-infobox .wds-tabs__arrow-left, .portable-infobox .wds-tabs__arrow-right { cursor: default; opacity: 0; transition: opacity 150ms; visibility: visible; width: 24px; }
 * This is to make the buttons smoothly dissapear when going to either limit
 * of the tab panel, instead of abruptly dissapearing. Here, we are removing
 * the previous hiding method that used 'visiility: hidden;' so we can use
 * the new hiding method that uses 'opacity: 0'. This allows for a smooth
 * transition, which the previous method did not.

/****** /******* Left arrow. *******/ .portable-infobox .wds-tabs__wrapper.left-arrow-visible .wds-tabs__arrow-left, /******* Right arrow. *******/ .portable-infobox .wds-tabs__wrapper.right-arrow-visible .wds-tabs__arrow-right, /******* Both arrows. *******/ .portable-infobox .wds-tabs__wrapper.both-arrows-visible .wds-tabs__arrow-left, .portable-infobox .wds-tabs__wrapper.both-arrows-visible .wds-tabs__arrow-right { opacity: 1; cursor: pointer; }
 * Now, we make the arrow buttons visible and actionable only when needed.

/***** Background styles. *****/ .portable-infobox .wds-tabs__arrow-left::before, .portable-infobox .wds-tabs__arrow-right::before { --pi-tabs__arrow-bg-opacity: .2; content: ''; height: 100%; position: absolute; transition: background-image 400ms; width: 100%; }

/***** Adding custom gradient backgrounds to both arrows. *****/ /****** Left arrow's background. ******/ .portable-infobox .wds-tabs__arrow-left::before { background-image: linear-gradient(to right, rgba(var(--theme-link-color--rgb), var(--pi-tabs__arrow-bg-opacity)) 0%,rgba(var(--theme-link-color--rgb), var(--pi-tabs__arrow-bg-opacity)) 20%,rgba(var(--theme-link-color--rgb), 0) 100%); }

/****** Right arrow's background. ******/ .portable-infobox .wds-tabs__arrow-right::before { background-image: linear-gradient(to left, rgba(var(--theme-link-color--rgb), var(--pi-tabs__arrow-bg-opacity)) 0%,rgba(var(--theme-link-color--rgb), var(--pi-tabs__arrow-bg-opacity)) 20%,rgba(var(--theme-link-color--rgb), 0) 100%); }

/***** /****** On hover. ******/ .portable-infobox .wds-tabs__arrow-left:hover::before, .portable-infobox .wds-tabs__arrow-right:hover::before { --pi-tabs__arrow-bg-opacity: .3; }
 * Changing background's opacity when on hover and when
 * focused/clicked/active.

/****** On focus/active/clicked state. ******/ .portable-infobox .wds-tabs__arrow-left:is(:focus, :active)::before, .portable-infobox .wds-tabs__arrow-right:is(:focus, :active)::before { --pi-tabs__arrow-bg-opacity: .38; }

/** Themed styles. **/ /*** Hidden Dreams. ***/ .portable-infobox.pi-theme-hidden.pi-background { --pi-background: rgb(97 101 140 / 20%); background-image: url(https://images.wikia.nocookie.net/hollowknight/ru/images/8/8c/Infoback3.png); }

/*** The Grimmm Troupe. ***/ .portable-infobox.pi-theme-grimm.pi-background { --pi-background: rgb(97 101 140 / 20%); background-image: url(https://images.wikia.nocookie.net/hollowknight/ru/images/f/fc/Infoback2.png); }

/*** Godmaster. ***/ .portable-infobox.pi-theme-godmaster.pi-background { --pi-background: rgb(61 66 113 / 20%); background-image: url(https://vignette.wikia.nocookie.net/hollowknight/images/f/f6/Infobox_Background_Godmaster.png); }

/*** Lifeblood. ***/ .portable-infobox.pi-theme-lifeblood.pi-background { --pi-background: rgb(60 129 194 10%); background-image: url(https://vignette.wikia.nocookie.net/hollowknight/images/f/ff/Infobox_Background_Lifeblood.png); }

/*** Voidheart. ***/ /**** (Credit goes to InkScarlet for the infbox background image). ****/ .portable-infobox.pi-theme-voidheart.pi-background { --pi-background: rgb(97 101 140 / 20%); background-image: url(https://static.wikia.nocookie.net/hollowknight/images/9/93/Infobox_Background_Édition_Coeur-du-Vide.png/revision/latest?cb=20201211200319&path-prefix=fr); }

/*** Lore. ***/ /**** (Credit goes to InkScarlet for the infbox background image). ****/ .portable-infobox.pi-theme-lore.pi-background { --pi-background: rgb(97 101 140 / 20%); background-image: url(https://vignette.wikia.nocookie.net/hollowknight/images/6/61/Infobox_Background_Lore.png); }

/*** Silksong. ***/ /**** (Credit goes to InkScarlet for the infbox background image). ****/ .portable-infobox.pi-theme-silksong.pi-background { --pi-background: rgb(97 101 140 / 20%); background-image: url(https://vignette.wikia.nocookie.net/hollowknight/images/7/7b/Infobox_Background_Hollow_Knight_Silksong.png/revision/latest?cb=20200719020901&path-prefix=fr); }

/* General styles. */ /** Making focus outline color-themed. **/ outline: 2px solid var(--theme-link-color); }
 * focus-visible {

a { color: var(--theme-link-color); transition: color .4s, text-shadow .4s; }

a:is(:hover, :focus) { color: var(--theme-link-color--hover); text-shadow: 0 0 5px var(--theme-link-color--hover); }

/** Selection color. **/
 * selection {

background-color: rgba(var(--theme-link-color--hover-rgb), .12); }

/** Scrollbar. **/ /*** Firefox scrollbar .***/
 * root {

scrollbar-color: rgba(var(--theme-link-color--hover-rgb), .7) var(--scrollbar-background-color); }


 * -webkit-scrollbar {

background-color: var(--scrollbar-background-color); }


 * -webkit-scrollbar-thumb {

background-color: rgba(var(--theme-link-color--hover-rgb), .45); }


 * -webkit-scrollbar-thumb:hover {

background-color: rgba(var(--theme-link-color--hover-rgb), .57); }


 * -webkit-scrollbar-thumb:active {

background-color: rgba(var(--theme-link-color--hover-rgb), .7); }


 * -webkit-scrollbar-corner {

background-color: var(--scrollbar-corner-color); }


 * -webkit-scrollbar-button {

background-position: center; background-size: 18px; }


 * -webkit-scrollbar-button:hover {

background-color: rgba(var(--theme-link-color--hover-rgb), .2); }


 * -webkit-scrollbar-button:active {

background-color: rgba(var(--theme-link-color--hover-rgb), .87); }

/***
 * Scrollbar icons. Serving the normal icons as images so those can be
 * cached, while the active ones are served as data-urls to "preload" them.

/**** Up. ****/
 * -webkit-scrollbar-button:vertical:decrement {

background-image: url(https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_arrow_drop_up_white_24px.svg); }


 * -webkit-scrollbar-button:vertical:decrement:active {

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24' fill='%23000'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M7 14l5-5 5 5z'/%3E%3C/svg%3E"); }

/**** Down. ****/
 * -webkit-scrollbar-button:vertical:increment {

background-image: url(https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_arrow_drop_down_white_24px.svg); }


 * -webkit-scrollbar-button:vertical:increment:active {

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24' fill='%23000'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); }

/**** Left. ****/
 * -webkit-scrollbar-button:horizontal:decrement {

background-image: url(https://static.wikia.nocookie.net/tobias-laboratory/images/5/5d/Arrow_left_dark.svg); }


 * -webkit-scrollbar-button:horizontal:decrement:active {

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24' fill='%23000'%3E%3Cpath d='M14 7l-5 5 5 5V7z'/%3E%3Cpath d='M24 0v24H0V0h24z' fill='none'/%3E%3C/svg%3E"); }

/**** Right. ****/
 * -webkit-scrollbar-button:horizontal:increment {

background-image: url(https://static.wikia.nocookie.net/tobias-laboratory/images/6/6d/Arrow_right_dark.svg); }


 * -webkit-scrollbar-button:horizontal:increment:active {

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24' fill='%23000'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3Cpath d='M0 24V0h24v24H0z' fill='none'/%3E%3C/svg%3E"); }

/** Adding background image. **/ .main-container { background: #000 center / cover fixed no-repeat var(--theme-body-background-image, url(https://static.wikia.nocookie.net/hollowknight/images/5/50/Wiki-background/revision/20210107210126)); }

/** Adding page glow. **/ .resizable-container { box-shadow: 0 4px 24px rgba(var(--theme-link-color--hover-rgb), .5); }

.page { font-family: var(--theme-body-font); margin-top: 0; }

/** Header. **/ .fandom-community-header__background { background: none; z-index: 0; }

.fandom-community-header__background::before { background: none; }

/*** Adds old banners. ***/ .fandom-community-header { background: rgba(var(--theme-header-background-color--rgb, 0, 0, 0), .38) right top / contain scroll no-repeat var(--theme-header-background-image, url(https://static.wikia.nocookie.net/hollowknight/images/0/0e/Community-header-background/revision/20210107165558)); box-shadow: 0 0 24px rgba(var(--theme-header-background-color--rgb, 0, 0, 0), .7); padding: 8.5px 0; position: relative; }

.fandom-community-header::before { --theme-header-gradient-start: 200px; --theme-header-gradient-end: 430px; background: linear-gradient(to right, rgba(var(--theme-header-background-color--rgb, 0, 0, 0), .5), rgba(var(--theme-header-background-color--rgb, 0, 0, 0), .5)), linear-gradient(to left, transparent var(--theme-header-gradient-start), var(--theme-header-background-color, #000) var(--theme-header-gradient-end)); content: ''; display: block; height: 100%; position: absolute; right: 0; top: 0; width: 100%; z-index: 0; }

/*** @media only screen and (min-width: 724px) and (max-width: 899px) { .fandom-community-header { padding-inline: 12px; } }
 * Responsive design - increases banner's padding size as the windows' width
 * increases too.

@media only screen and (min-width: 900px) and (max-width: 1279px) { .fandom-community-header { padding-inline: 24px; } }

@media only screen and (min-width: 1280px) { .fandom-community-header { padding: 26px 24px; } }

/*** .fandom-community-header__image, .fandom-community-header__top-container { z-index: 1; }
 * Puts wiki logo, title, and right buttons in front of the gradient
 * background.

/*** Dropdown. ***/ /**** Dropdown menu link on hover. ****/ .wds-dropdown__content .wds-list.wds-is-linked > li.wds-is-selected > a:not(.wds-button), .wds-dropdown__content .wds-list.wds-is-linked > li:hover > a:not(.wds-button) { color: var(--theme-link-color--hover); }

/** Body. **/ /*** Adding more contrast for readability. ***/ .mw-plusminus-pos { color: var(--theme-success-color); }

.mw-plusminus-neg { color: var(--theme-alert-color); }

/*** Usernames' colors. ***/ /**** Administrators. ****/ a[href='/wiki/User:TheEmbracedOne'], a[href='/wiki/User:Pauolo'], a[href='/wiki/User:Zigmatism'] { color: #ff6a00; font-weight: bold; }

/**** Moderators. ****/ a[href='/wiki/User:Sumwan'], a[href='/wiki/User:MolaMola7'] { color: #008fff; font-weight: bold; }

a[href='/wiki/User:ColdWhie'] { color: #0fa859; font-weight: bold; }

/**** Multi-Language Wiki Admins. ****/ a[href='/wiki/User:Stevenstl'], a[href='/wiki/User:Plume_de_Paon'], a[href='/wiki/User:AntiGravityMaster'], a[href='/wiki/User:WingdingAster0'] { color: #7e4b97; font-weight: bold; }

/**** I felt like adding myself in here. :) ****/ a[href='/wiki/User:Polymeric'] { color: #F48FB1;  font-weight: bold; }

a[href='/wiki/User:Polymeric']::after { content: '✨'; margin-inline-start: 2px; }

/*** Articles' bullet list style. ***/ .mw-parser-output ul { list-style-image: url(https://vignette.wikia.nocookie.net/hollowknight/images/9/9a/BulletPoint.png); }

/*** Headers' font. ***/ .page-header__title, .mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3, .mw-parser-output h4, .mw-parser-output h5, .mw-parser-output h6 { font-family: var(--pi-tabbers-font); padding: 0; }

/*** Gallery caption's color. ***/ .caption { color: rgba(var(--theme-page-text-color--rgb), .6); }

/*** Collapsible button. ***/ .dialogue-table.mw-collapsible > tbody > tr > td { display: flex; }

/**** Trigger link transition when interacting with parent element. ****/ .mw-collapsible-toggle:is(:hover, :focus, :focus-within) a { color: var(--theme-link-color--hover); text-shadow: 0 0 5px var(--theme-link-color--hover); }

/**** Adds image element. ****/ .mw-collapsible-toggle::before { content: ''; display: inline-block; filter: drop-shadow(0 0 5px #0000); height: 24px; vertical-align: middle; width: 24px; transition: filter .4s; }

/**** Hides the ' ] ' character. ****/ .mw-collapsible-toggle::after { display: none; }

/**** Text styles. ****/ .mw-collapsible-toggle .mw-collapsible-text { font: 500 18px / 18px var(--pi-buttons-font); vertical-align: bottom; }

.mw-collapsible-toggle .mw-collapsible-text:hover { text-decoration: none; }

/**** Arrow images' styles. ****/ .mw-collapsible-toggle:hover::before { filter: drop-shadow(0 0 5px var(--theme-link-color--hover)); }

.mw-collapsible-toggle-collapsed::before { background: transparent url(https://vignette.wikia.nocookie.net/hollowknight/images/2/20/Expandarrow.png) no-repeat center; }

.mw-collapsible-toggle-expanded::before { background: transparent url(https://vignette.wikia.nocookie.net/hollowknight/images/7/70/Collapsearrow.png) no-repeat center; }

.mw-collapsible-toggle-collapsed::before, .mw-collapsible-toggle-expanded::before { background-size: 24px; display: inline-block; margin-right: 6px; }

/** Footer. **/ /*** Boost page loading performance. ***/ content-visibility: auto; contain-intrinsic-size: 2222px; }
 * 1) mixed-content-footer {

/*** "Fan Feed" header. ***/ .mcf-header { color: var(--theme-body-text-color); }

/* Fixes and tweaks. */ /** Hiding default arrow icon from collapsible items in RecentChanges. **/ .mw-icon-arrow-expanded, .mw-collapsible-arrow.mw-collapsible-toggle-expanded { background-image: none; margin-right: 16px; }

/** Making global navigation bar's menus links visible on hover. **/ .global-navigation .wds-dropdown .wds-list a:hover, .global-navigation .wds-tab__content a:hover { color: #3a669b !important; }

.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame { background-color: transparent; width: 400px !important; }

.oo-ui-dialog-content { background-color: rgb(0 0 0 / 40%); box-shadow:0 0 8px #000; display: flex; flex-direction: column; position: relative; overflow: initial; }

.oo-ui-dialog-content::before { background: #0000 center top / contain scroll no-repeat url(https://static.wikia.nocookie.net/hollowknight/images/9/96/Dialogue_Top.png); content: ''; display: block; position: absolute; top: -18px; width: 100%; height: 26px; }

.oo-ui-dialog-content::after { background: #0000 center bottom / contain scroll no-repeat url(https://static.wikia.nocookie.net/hollowknight/images/c/c7/Dialogue_Bottom.png); content: ''; display: block; position: absolute; bottom: -10px; width: 100%; height: 16px; }

/** Fixing layout to add top nd bottom images. **/ .oo-ui-dialog-content > .oo-ui-window-head, .oo-ui-dialog-content > .oo-ui-window-body, .oo-ui-dialog-content > .oo-ui-window-foot, .oo-ui-panelLayout-expanded { position: relative; }

.oo-ui-messageDialog-content > .oo-ui-window-foot { margin-bottom: 16px; outline: 0; }

/** Buttons styling. **/ .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget { --theme-page-text-color: #ccc; --theme-page-text-color--hover: #fff; border: none; min-height: 12px; height: auto; }

/*** Creating pseudo-elements. ***/ /**** Gradient background. ****/ .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget::before, /**** Left and right arrows. ****/ .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget a::before, .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget a::after { content: ''; display: block; opacity: 0; position: absolute; }

/*** Adding gradient background. ***/ .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget::before { background: #0000 center / contain scroll no-repeat linear-gradient(to right, #0000 10%, rgba(255, 255, 255, .3) 30%,rgba(255, 255, 255, .3) 70%,#0000 90%); background-size: 0% 100%; color: var(--theme-page-text-color); filter: blur(1px); width: 100%; height: 100%; top: 0; left: 0; transition: background-size .1s, opacity .1s; }

/**** Showing it when hovering/focusing/activating the button. ****/ .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget:is(:hover, :focus, :focus-within, :active)::before, .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget:is(:hover, :focus, :focus-within, :active) a::before, .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget:is(:hover, :focus, :focus-within, :active) a::after { opacity: 1; }

.oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget:is(:hover, :focus, :focus-within, :active)::before { background-size: 100% 100%; }

.oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget:is(:hover, :focus, :focus-within, :active) a::before { transform: translateX(-12px); }

.oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget:is(:hover, :focus, :focus-within, :active) a::after { transform: translateX(12px); }

/*** Adding arrows. ***/ .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget a::before, .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget a::after { width: 36px; height: 36px; transition: opacity .1s, transform .2s; transform: translateX(0); top: -6px; }

/**** Left arrow. ****/ .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget a::before { background: #0000 center / contain scroll no-repeat url(https://static.wikia.nocookie.net/hollowknight/images/1/1a/Hk_left_arrow.png); left: 12px; }

/**** Right arrow. ****/ .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget a::after { background: #0000 center / contain scroll no-repeat url(https://static.wikia.nocookie.net/hollowknight/images/7/74/Hk_right_arrow.png); right: 12px; }

/** Text styles. **/ .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget a { color: var(--theme-page-text-color); font-family: var(--theme-font-1); position: relative; font-size: 18px; line-height: inherit; }

.oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget a:is(:hover, :focus, :focus-within, :active) { color: var(--theme-page-text-color--hover); text-shadow: none; }

.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-labelElement .oo-ui-labelElement-label { line-height: .8; vertical-align: text-bottom; }