MediaWiki:Common.css

/*
 * Hollow Knight Wiki (EN) - Version 1.017 (04.11.2021)
 * Skin created by User:Polymeric - CC-BY-SA (22.06.2021)
 * Please, note that this skin was made specifically for
 * https://hollow-knight.fandom.com/ and that if you want to copy it, either
 * partially or completely, don't forget to give the corresponding credits and
 * cite its origin.
 * cite its origin.

/* TABLE OF CONTENTS */ /*
 * To find a specific section of the document, press CTRL + F and, in the
 * searchbar, write the name of the section that you want to jump in.
 * 1. Imports
 * 2. Fonts
 * 3. Global variables
 * 3.1. Dark theme
 * 3.2. Light theme
 * 4. Infobox
 * 4.1. General styles
 * 4.2. Title cell
 * 4.3. Info cells
 * 4.4. Image section
 * 4.5. Themed styles
 * 5. General styles
 * 5.1. Header
 * 5.2. Body
 * 5.3. Footer
 * 6. Fixes and tweaks
 * 7. Dialogs
 * 8. Templates and components
 * 9. User preferences
 * 9. User preferences

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

/* 2. Fonts. */ @font-face { font-display: swap; font-family: TrajanPro; font-style: normal; font-weight: 400; src: local('TrajanPro-Regular'), url(https://hollowknight.fandom.com/Special:Filepath/TrajanPro-Regular.otf) format('opentype'); }

@font-face { font-display: swap; font-family: TrajanPro; font-style: normal; font-weight: 700; src: local('TrajanPro-Bold'), url(https://hollowknight.fandom.com/Special:Filepath/TrajanPro-Bold.otf) format('opentype'); }

/* 3. Global variables. */ .wiki-hollowknight { --oasis-europa-horizontal-group-background-color: transparent; --theme-font-1: TrajanPro, 'Times New Roman', serif; --theme-font-2: Lato, Roboto, Arial, sans-serif; --theme-font-3: Perpetua, 'Times New Roman', 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); --theme-body-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Bg.webp); --theme-header-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Header.webp); }

/** 3.1. Dark theme. **/ .theme-fandomdesktop-dark { --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; --theme-selection-color-alpha: .12; /* % of selection's bg color opacity. */ /*** Default theme. ***/ /****  * 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. ****/ --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-link-color--hover: #cfdded; --theme-link-color--hover-rgb: 207, 221, 237; --theme-text-on-background: rgb(255, 255, 255); --theme-text-on-background--rgb: 255, 255, 255; --theme-text-primary-on-background: rgba(255, 255, 255, .87); --theme-text-secondary-on-background: rgba(255, 255, 255, .6); --theme-text-disabled-on-background: rgba(255, 255, 255, .38); --theme-text-on-background--inverse: rgb(0, 0, 0); --theme-text-on-background--inverse--rgb: 0, 0, 0; --theme-text-primary-on-background--inverse: rgba(0, 0, 0, .87); --theme-text-secondary-on-background--inverse: rgba(0, 0, 0, .6); --theme-text-disabled-on-background--inverse: rgba(0, 0, 0, .38); --theme-color__red: #ef9a9a; --theme-color__pink: #f48fb1; --theme-color__purple: #ce93d8; --theme-color__deep-purple: #b39ddb; --theme-color__indigo: #9fa8da; --theme-color__blue: #90caf9; --theme-color__light-blue: #81d4fa; --theme-color__cyan: #80deea; --theme-color__teal: #80cbc4; --theme-color__green: #a5d6a7; --theme-color__light-green: #c5e1a5; --theme-color__lime: #e6ee9c; --theme-color__yellow: #fff59d; --theme-color__amber: #ffe082; --theme-color__orange: #ffcc80; --theme-color__deep-orange: #ffab91; --theme-color__brown: #bcaaa4; --theme-color__grey: #eee; --theme-color__blue-grey: #b0bec5; }

.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. **/ /*** Hidden Dreams. ***/ .theme-fandomdesktop-dark:is(.page-Hidden_Dreams, .page-Category_Hidden_Dreams, .page-White_Defender, .page-Grey_Prince_Zote, .page-Hopping_Zoteling, .page-Winged_Zoteling, .page-Volatile_Zoteling, .page-Dreamgate) { --theme-body-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Bg-Hidden_Dreams.webp); --theme-border-color: #ce93d8; --theme-border-color--rgb: 207, 147, 216; /* Page background color. */ --theme-page-background-color: #272531; /* var(--theme-page-background-color) + 8% var(--theme-link-color--rgb) */ /* Right rail background color. */ --theme-page-background-color--secondary: #51495b; /* 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://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Header-Hidden_Dreams.webp); }

/*** The Grimm Troupe. ***/
 * is(.ns-0,

.ns-14).theme-fandomdesktop-dark:is([class*='Grimm'], .page-Nightmare_King, .page-Brumm, .page-Divine, .page-Nymm, .page-Dreamshield, .page-Sprintmaster, .page-Weaversong, .page-Carefree_Melody, .page-Path_of_Pain, .page-Seal_of_Binding) { --theme-body-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Bg-The_Grimm_Troupe.webp);  --theme-border-color: #ef9a9a;  --theme-border-color--rgb: 239, 154, 154;  --theme-page-background-color: #2b2328;  --theme-page-background-color--secondary: #59454a;  --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: #aa1327;  --theme-header-background-color--rgb: 170, 19, 39;  --theme-header-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Header-The_Grimm_Trouper.webp);  --theme-selection-color-alpha: .24; }

/*** Godmaster. ***/ .theme-fandomdesktop-dark:is(.page-Category_Godmaster, .page-Godmaster, .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://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Bg-Godmaster.webp); --theme-border-color: #fff59d; --theme-border-color--rgb: 255, 246, 157; --theme-page-background-color: #393933; --theme-page-background-color--secondary: #565750; --theme-page-text-mix-color: #fff59d; --theme-accent-label-color: #fffde7; --theme-link-color: #cdc686; --theme-link-color--rgb: 220, 206, 146; --theme-link-color--hover: #fff59d; --theme-link-color--hover-rgb: 255, 245, 157; --theme-header-background-color: #8f5b4b; --theme-header-background-color--rgb: 143, 92, 75; --theme-header-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Header-Godmaster.webp); }

/*** Lifeblood. ***/ .theme-fandomdesktop-dark:is(.page-Category_Lifeblood, .page-Hive_Knight) { --theme-body-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Bg-Lifeblood.webp); --theme-border-color: #81d4fa; --theme-border-color--rgb: 129, 212, 250; --theme-page-background-color: #182a34; --theme-page-background-color--secondary: #374853; --theme-page-text-mix-color: #81d4fa; --theme-accent-label-color: #e1f5fe; --theme-link-color: #31cee8; --theme-link-color--rgb: 49, 206, 232; --theme-link-color--hover: #81d4fa; --theme-link-color--hover-rgb: 129, 213, 250; --theme-header-background-color: #003c55; --theme-header-background-color--rgb: 0, 60, 85; --theme-header-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Header-Lifeblood.webp); }

/*** Voidheart. ***/ .theme-fandomdesktop-dark.page-Voidheart_Edition { --theme-body-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Bg-Voidheart.webp); --theme-border-color: #eee; --theme-border-color--rgb: 238, 238, 238; --theme-page-background-color: #212121; --theme-page-background-color--secondary: #424242; --theme-page-text-mix-color: #eee; --theme-accent-label-color: #e1f5fe; --theme-link-color: #bdbdbd; --theme-link-color--rgb: 189, 189, 189; --theme-link-color--hover: #eee; --theme-link-color--hover-rgb: 238, 238, 238; --theme-header-background-color: #000; --theme-header-background-color--rgb: 0, 0, 0; --theme-header-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Header-Voidheart.webp); }

/*** Lore. ***/ .theme-fandomdesktop-dark:is(.page-Category_Lore, .page-Abyss_Creature, .page-Ancient_Civilisation, .page-Bees, .page-Boon, .page-Dream_Realm, .page-Dreamers, .page-Ellina, .page-Five_Great_Knights, .page-Flukes, .page-Fools, .page-Godseekers, .page-Hallownest, .page-Higher_Beings, .page-Infection, .page-Lord_Fool, .page-Mantis_Tribe, .page-Mosskin_Tribe, .page-Moth_Tribe, .page-Pale_King, .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-Weavers, .page-Wyrms, .page-Vespa, .page-Unn, .page-Mushroom_Clan, .page-Spider_Tribe, .page-page-Hunter_s_Mark, .page-Seals) { --theme-body-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Bg-Lore.webp); --theme-border-color: #b0bec5; --theme-border-color--rgb: 176, 191, 197; --theme-page-background-color: #263238; --theme-page-background-color--secondary: #37474f; --theme-page-text-mix-color: #b0bec5; --theme-accent-label-color: #e2f1f8; --theme-link-color: #b0bec5; --theme-link-color--rgb: 176, 191, 197; --theme-link-color--hover: #fff; --theme-link-color--hover-rgb: 255, 255, 255; --theme-header-background-color: #000a12; --theme-header-background-color--rgb: 0, 10, 18; --theme-header-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Header-Lore.webp); }

/*** Hollow Knight. ***/
 * is(.ns-0,

.ns-14)[class*='Hollow_Knight']:not(.mainpage), /* Areas. */ .page-Abyss, .page-Ancient_Basin, .page-City_of_Tears, .page-Colosseum_of_Fools, .page-Crystal_Peak, .page-Deepnest, .page-Dirtmouth, .page-Fog_Canyon, .page-Forgotten_Crossroads, .page-Fungal_Wastes, .page-Godhome, .page-Greenpath, .page-Hive, .page-Howling_Cliffs, .page-Kingdom_s_Edge, .page-Queen_s_Gardens, .page-Resting_Grounds, .page-Royal_Waterways, .page-White_Palace, /* Combat. */ /** Enemies (order based on Hunter's Journal). **/ /*** Main game. ***/ .page-Crawlid, .page-Vengefly, .page-Vengefly_King, .page-Gruzzer, .page-Gruz_Mother, .page-Tiktik, .page-Aspid_Hunter, .page-Aspid_Mother, .page-Aspid_Hatchling, .page-Goam, .page-Wandering_Husk, .page-Husk_Hornhead, .page-Leaping_Husk, .page-Husk_Bully, .page-Husk_Warrior, .page-Husk_Guard, .page-Entombed_Husk, .page-False_Knight, .page-Maggot, .page-Menderbug, .page-Lifeseed, .page-Baldur, .page-Elder_Baldur, .page-Mosscreep, .page-Mossfly, .page-Mosskin, .page-Volatile_Mosskin, .page-Fool_Eater, .page-Squit, .page-Obble, .page-Gulka, .page-Maskfly, .page-Moss_Charger, .page-Massive_Moss_Charger, .page-Moss_Knight, .page-Mossy_Vagabond, .page-Durandoo, .page-Duranda, .page-Aluba, .page-Charged_Lumafly, .page-Uoma, .page-Ooma, .page-Uumuu, .page-Ambloom, .page-Fungling, .page-Fungoon, .page-Sporg, .page-Fungified_Husk, .page-Shrumeling, .page-Shrumal_Warrior, .page-Shrumal_Ogre, .page-Mantis_Youth, .page-Mantis_Warrior, .page-Mantis_Lords, .page-Husk_Centry, .page-Heavy_Sentry, .page-Winged_Sentry, .page-Lance_Sentry, .page-Mistake, .page-Folly, .page-Soul_Twister, .page-Soul_Warrior, .page-Soul_Master, .page-Soul_Tyrant, .page-Husk_Dandy, .page-Cowardly_Husk, .page-Gluttonous_Husk, .page-Gorgeous_Husk, .page-Great_Husk_Sentry, .page-Watcher_Knight, .page-Collector, .page-Belfly, .page-Pilflip, .page-Hwurmp, .page-Bluggsac, .page-Dung_Defender, .page-Flukefey, .page-Flukemon, .page-Flukemarm, .page-Shardmite, .page-Glimback, .page-Crystal_Hunter, .page-Crystal_Crawler, .page-Husk_Miner, .page-Crystallised_Husk, .page-Crystal_Guardian, .page-Furious_Vengefly, .page-Volatile_Gruzzer, .page-Violent_Husk, .page-Slobbering_Husk, .page-Dirtcarver, .page-Carver_Hatcher, .page-Garpede, .page-Corpse_Creeper, .page-Deepling, .page-Deephunter, .page-Little_Weaver, .page-Stalking_Devout, .page-Nosk, .page-Shadow_Creeper, .page-Lesser_Mawlek, .page-Mawlurk, .page-Brooding_Mawlek, .page-Lightseed, .page-Infected_Balloon, .page-Broken_Vessel, .page-Boofly, .page-Primal_Aspid, .page-Hopper, .page-Great_Hopper, .page-Grub_Mimic, .page-Hiveling, .page-Hive_Soldier, .page-Hive_Guardian, .page-Husk_Hive, .page-Spiny_Husk, .page-Loodle, .page-Mantis_Petra, .page-Mantis_Traitor, .page-Traitor_Lord, .page-Sharp_Baldur, .page-Armoured_Squit, .page-Battle_Obble, .page-Oblobbles, .page-Shielded_Fool, .page-Sturdy_Fool, .page-Winged_Fool, .page-Heavy_Fool, .page-Death_Loodle, .page-Volt_Twister, .page-Zote, .page-God_Tamer, .page-Xero, .page-Gorb, .page-Elder_Hu, .page-Marmu, .page-No_Eyes, .page-Galien, .page-Markoth, .page-Wingmould, .page-Royal_Retainer, .page-Kingsmould, .page-Sibling, .page-Void_Tendrils, .page-Hornet, .page-Hornet_Protector, .page-Hollow_Knight, .page-Radiance, .page-Shade, .page-Hunter_s_Mark, /*** No-entry enemies. ***/ .page-Enraged_Guardian, .page-Failed_Champion, .page-Fluke_Larva, .page-Hornet_Sentinel, .page-Lost_Kin, .page-Revek, /** NPCs. **/ .page-Salubra, .page-Jiji, .page-Iselda, .page-Leg_Eater, .page-Little_Fool, .page-Millibelle, .page-Nailsmith, .page-Lemm, .page-Sly, .page-Jinn, .page-Last_Stag, .page-Tuk, .page-Mato, .page-Oro, .page-Sheo, .page-Cloth, .page-Cornifer, .page-Mister_Mushroom, .page-Quirrel, .page-Tiso, .page-Bretta, .page-Dreamers, .page-Grey_Mourner, .page-Grubfather, .page-Seer, .page-Hunter, .page-Bardoon, .page-Distant_Villagers, .page-Dung_Defender, .page-Elderbug, .page-Emilitia, .page-Mask_Maker, .page-Midwife, .page-Moss_Prophet, .page-Myla, .page-Snail_Shaman, .page-Unnamed_Moth, .page-White_Lady, .page-Willoh, .page-Herrah, .page-Lurien, .page-Joni, .page-Monomon, .page-Marissa, .page-Thistlewind, .page-Traitors_Child, .page-Spirits, /* Game info. */ .page-Dream_Nail, .page-Knight, .page-Nail, .page-Steel_Soul_Mode, /* Charms. */ .page-Category_Charms, .page-Wayward_Compass, .page-Gathering_Swarm, .page-Stalwart_Shell, .page-Sould_Catcher, .page-Shaman_Stone, .page-Soul_Catcher, .page-Soul_Eater, .page-Dashmaster, .page-Grubsong, .page-Grubberfly_s_Elegy, .page-Fragile_Heart, .page-Fragile_Greed, .page-Fragile_Strength, .page-Spell_Twister, .page-Steady_Body, .page-Heavy_Blow, .page-Quick_Slash, .page-Longnail, .page-Mark_of_Pride, .page-Fury_of_the_Fallen, .page-Thorns_of_Agony, .page-Baldur_Shell, .page-Flukenest, .page-Defender_s_Crest, .page-Glowing_Womb, .page-Quick_Focus, .page-Deep_Focus, .page-Lifeblood_Heart, .page-Lifeblood_Core, .page-Joni_s_Blessing, .page-Hiveblood, .page-Spore_Shroom, .page-Sharp_Shadow, .page-Shape_of_Unn, .page-Nailmaster_s_Glory, .page-Dream_Wielder, .page-Kingsoul, .page-Void_Heart, /* Items. */ /** Keys. **/ .page-Lifeblood_Cocoon, .page-Soul, .page-Simple_Key, .page-Elegant_Key, .page-Love_Key, .page-Shopkeeper_s_Key, .page-City_Crest, .page-King_s_Brand, /** Exploration and quests. */ .page-Geo, .page-Tram_Pass, .page-Lumafly_Lantern, .page-Map_and_Quil, .page-Hunter_s_Journal, .page-Delicate_Flower, .page-Mask_Shard, .page-Vessel_Fragment, .page-Salubra_s_Blessing, .page-Pale_Ore, .page-Rancid_Egg, .page-Wanderer_s_Journal, .page-Hallownest_Seal, .page-King_s_Idol, .page-Arcane_Egg, /** Spells. **/ .page-Focus, .page-Vengeful_Spirit, .page-Desolate_Dive, .page-Howling_Wraiths, .page-Shade_Soul, .page-Descending_Dark, .page-Abyss_Shriek, /** Abilities. **/ .page-Mothwing_Cloak, .page-Mantis_Claw, .page-Crystal_Heart, .page-Monarch_Wings, .page-Isma_s_Tear, .page-Shade_Cloak, .page-Dream_Nail, .page-Awoken_Dream_Nail, .page-World_Sense, /** Nail arts. **/ .page-Cyclone_Slash, .page-Dash_Slash, .page-Great_Slash, /** Points of interest. **/ .page-Grub, .page-Hot_Spring, .page-Shade_Gate, .page-Soul_Totem, .page-Whispering_Root, /* Others. */ .page-Dream_Nail_Locations, .page-Delicate_Flower_Quest, .page-Trial_of_the_Warrior, .page-Trial_of_the_Conqueror, .page-Trial_of_the_Fool { --theme-body-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Bg-Hollow_Knight.webp); --theme-header-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Header-Hollow_Knight.webp); }

/*** Silksong. ***/
 * is(.ns-0,

.ns-14).theme-fandomdesktop-dark:is([class*='Silksong'], .page-Deep_Docks, .page-Greymoor, .page-Moss_Grotto, .page-Bonebottom, .page-Ballow, .page-Church_Keeper, .page-Flea, .page-Forge-Daughter, .page-Garmond_and_Zaza, .page-Huntress, .page-Shakra, .page-Sherma, .page-Trobbio, .page-Carmelita, .page-Lace, .page-Moss_Mother, .page-Sharpe, .page-Crawbug, .page-Dustroach, .page-Mask_Piece, .page-Rosary, .page-Rosaries, .page-Shell_Shards, .page-Silk, .page-Tool_Pouch, .page-Skills, .page-Bind, .page-Tools, .page-Marrow, .page-The_Citadel, .page-Grindle, .page-Caravan, .page-Seth, .page-Bell_Beast, .page-Last_Judge, .page-Druid_of_the_Moss_Temple, .page-Citadel, .page-Needle, .page-Quests) { --theme-body-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Bg-Silksong.webp);  --theme-border-color: #ffab91;  --theme-border-color--rgb: 255, 172, 145;  --theme-page-background-color: #2c2a27;  --theme-page-background-color--secondary: #5b5347;  --theme-page-text-mix-color: #ffab91;  --theme-accent-label-color: #ffddc1;  --theme-link-color: #feb556;  --theme-link-color--rgb: 254,  182, 86;  --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://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Header-Silksong.webp); }

/*** Toggles colors. ***/ .theme-fandomdesktop-dark, .theme-fandomdesktop-dark .wds-toggle__label { --wds-toggle-background-color: #9aa0a6; --wds-toggle-switch-color: #dadce0; --wds-toggle-background-color--checked: #4285f4; --wds-toggle-switch-color--checked: #8ab4f8; }

/**** Disabled. ****/ /***** Bar. *****/ .oo-ui-toggleSwitchWidget { background-color: var(--wds-toggle-background-color); }

/***** Knob. *****/ .oo-ui-toggleSwitchWidget-grip { background-color: var(--wds-toggle-switch-color); }

/**** Enabled. ****/ /***** Bar. *****/ .oo-ui-toggleSwitchWidget.oo-ui-toggleWidget-on { background-color: var(--wds-toggle-background-color--checked); }

/***** Knob. *****/ .oo-ui-toggleSwitchWidget.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip { background-color: var(--wds-toggle-switch-color--checked); }

/** 3.2. Light theme. **/ .theme-fandomdesktop-light { --scrollbar-background-color: #f1f1f1; --scrollbar-corner-color: #c0c0c0; --theme-accent-label-color: #3a3a3a; --theme-alert-color: #b71c1c; --theme-alert-color--rgb: 127, 0, 0; --theme-alert-label: #fff; --theme-success-color: #1b5e20; --theme-success-color--rgb: 0, 51, 1; --theme-success-label: #fff; --theme-message-color: #002f6c; --theme-selection-color-alpha: .24; /* % of selection's bg color opacity. */ /*** Default theme. ***/ --theme-body-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Bg.webp); --theme-border-color: #444; --theme-border-color--rgb: 68, 68, 68; --theme-header-background-color: #000; --theme-header-background-color--rgb: 0, 0, 0; --theme-header-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Header.webp); --theme-link-color--hover: #006064; --theme-link-color--hover-rgb: 0, 97, 100; --theme-page-background-color: #fff; --theme-page-background-color--rgb: 238, 238, 238; --theme-text-on-background: rgb(0, 0, 0); --theme-text-primary-on-background: rgba(0, 0, 0, .87); --theme-text-secondary-on-background: rgba(0, 0, 0, .6); --theme-text-disabled-on-background: rgba(0, 0, 0, .38); --theme-text-on-background--inverse: rgb(255, 255, 255); --theme-text-primary-on-background--inverse: rgba(255, 255, 255, .87); --theme-text-secondary-on-background--inverse: rgba(255, 255, 255, .6); --theme-text-disabled-on-background--inverse: rgba(255, 255, 255, .38); --theme-color__red: #f44330; --theme-color__pink: #e91e63; --theme-color__purple: #e91e63; --theme-color__deep-purple: #673ab7; --theme-color__indigo: #3f51b5; --theme-color__blue: #2196f3; --theme-color__light-blue: #03a9f4; --theme-color__cyan: #00bcd4; --theme-color__teal: #009688; --theme-color__green: #4caf50; --theme-color__light-green: #8bc34a; --theme-color__lime: #cddc39; --theme-color__yellow: #ffeb3b; --theme-color__amber: #ffc107; --theme-color__orange: #ff9800; --theme-color__deep-orange: #ff5722; --theme-color__brown: #795548; --theme-color__grey: #9e9e9e; --theme-color__blue-grey: #607d8b; }

.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. **/ .theme-fandomdesktop-light { --theme-accent-color: #000; }

/*** Hidden Dreams. ***/ .theme-fandomdesktop-light:is(.page-Hidden_Dreams, .page-Category_Hidden_Dreams, .page-White_Defender, .page-Grey_Prince_Zote, .page-Hopping_Zoteling, .page-Winged_Zoteling, .page-Volatile_Zoteling, .page-Dreamgate) { --theme-body-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Bg-Hidden_Dreams.webp); --theme-border-color: #4a148c; --theme-border-color--rgb: 74, 20, 140; --theme-page-background-color: #e4def2; --theme-page-background-color--secondary: #d9d4e8; --theme-page-text-mix-color: #ce93d8; --theme-accent-label-color: #12005e; --theme-link-color: #512da8; --theme-link-color--rgb: 82, 46, 168; --theme-link-color--hover: #140078; --theme-link-color--hover-rgb: 21, 0, 120; --theme-header-background-color: #6a498e; --theme-header-background-color--rgb: 106, 73, 142; --theme-header-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Header-Hidden_Dreams.webp); /* Infobox colors - the colors here are the same as dark theme's  * normal/hover links color. Updating these would mean updating those too. */ --pi-cta-color: #c078d2; --pi-cta-color--rgb: 192, 120, 210; --pi-cta-color--hover: #ce93d8; --pi-cta-color--hover-rgb: 207, 147, 216; }

/*** The Grimm Troupe. ***/
 * is(.ns-0,

.ns-14).theme-fandomdesktop-light:is([class*='Grimm'], .page-Nightmare_King, .page-Brumm, .page-Divine, .page-Nymm, .page-Dreamshield, .page-Sprintmaster, .page-Weaversong, .page-Carefree_Melody, .page-Path_of_Pain, .page-Seal_of_Binding) { --theme-body-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Bg-The_Grimm_Troupe.webp);  --theme-border-color: #7f0000;  --theme-border-color--rgb: 127, 0, 0;  --theme-page-background-color: #fde6e8;  --theme-page-background-color--secondary: #f3dcde;  --theme-page-text-mix-color: #7f0000;  --theme-accent-label-color: #7f0000;  --theme-link-color: #b71c1c;  --theme-link-color--rgb: 183, 28, 28;  --theme-link-color--hover: #7f0000;  --theme-link-color--hover-rgb: 127, 0, 0;  --theme-header-background-color: #aa1327;  --theme-header-background-color--rgb: 170, 19, 39;  --theme-header-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Header-The_Grimm_Trouper.webp);  --theme-selection-color-alpha: .24;  --pi-cta-color: #ef6069;  --pi-cta-color--rgb: 239, 96, 106;  --pi-cta-color--hover: #ef9a9a;  --pi-cta-color--hover-rgb: 229, 43, 81; }

/*** Godmaster. ***/ .theme-fandomdesktop-light:is(.page-Category_Godmaster, .page-Godmaster, .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://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Bg-Godmaster.webp); --theme-border-color: #3e3123; --theme-border-color--rgb: 62, 49, 35; --theme-page-background-color: #f0eee2; --theme-page-background-color--secondary: #e5e4d8; --theme-page-text-mix-color: #3e3123; --theme-accent-label-color: #1b0000; --theme-link-color: #9e8d49; --theme-link-color--rgb: 158, 141, 73; --theme-link-color--hover: #5d5037; --theme-link-color--hover-rgb: 93, 80, 55; --theme-header-background-color: #8f5b4b; --theme-header-background-color--rgb: 143, 92, 75; --theme-header-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Header-Godmaster.webp); --pi-cta-color: #cdc686; --pi-cta-color--rgb: 220, 206, 146; --pi-cta-color--hover: #fff59d; --pi-cta-color--hover-rgb: 255, 245, 157; }

/*** Lifeblood. ***/ .theme-fandomdesktop-light:is(.page-Category_Lifeblood, .page-Hive_Knight) { --theme-body-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Bg-Lifeblood.webp); --theme-border-color: #002f6c; --theme-border-color--rgb: 0, 47, 108; --theme-page-background-color: #d9dee8; --theme-page-background-color--secondary: #ccd4de; --theme-page-text-mix-color: #002f6c; --theme-accent-label-color: #002f6c; --theme-link-color: #01579b; --theme-link-color--rgb: 0, 47, 108; --theme-link-color--hover: #002f6c; --theme-link-color--hover-rgb: 0, 47, 108; --theme-header-background-color: #003c55; --theme-header-background-color--rgb: 0, 60, 85; --theme-header-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Header-Lifeblood.webp); --pi-cta-color: #00a9ff; --pi-cta-color--rgb: 0, 169, 255; --pi-cta-color--hover: #81d4fa; --pi-cta-color--hover-rgb: 129, 213, 250; }

/*** Voidheart. ***/ .theme-fandomdesktop-light.page-Voidheart_Edition { --theme-body-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Bg-Voidheart.webp); --theme-border-color: #212121; --theme-border-color--rgb: 238, 238, 238; --theme-page-background-color: #f5f5f5; --theme-page-background-color--secondary: #e0e0e0; --theme-page-text-mix-color: #212121; --theme-accent-label-color: #000; --theme-link-color: #212121; --theme-link-color--rgb: 33, 33, 33; --theme-link-color--hover: #424242; --theme-link-color--hover-rgb: 66, 66, 66; --theme-header-background-color: #000; --theme-header-background-color--rgb: 0, 0, 0; --theme-header-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Header-Voidheart.webp); --pi-cta-color: #bdbdbd; --pi-cta-color--rgb: 189, 189, 189; --pi-cta-color--hover: #eee; --pi-cta-color--hover-rgb: 238, 238, 238; }

/*** Lore. ***/ .theme-fandomdesktop-light:is(.page-Category_Lore, .page-Abyss_Creature, .page-Ancient_Civilisation, .page-Bees, .page-Boon, .page-Dream_Realm, .page-Dreamers, .page-Ellina, .page-Five_Great_Knights, .page-Flukes, .page-Fools, .page-Fungal_Tribe, .page-Godseekers, .page-Hallownest, .page-Higher_Beings, .page-Infection, .page-Lord_Fool, .page-Mantis_Tribe, .page-Mosskin_Tribe, .page-Moth_Tribe, .page-Pale_King, .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-Weavers, .page-Wyrms, .page-Vespa, .page-Unn, .page-Mushroom_Clan, .page-Spider_Tribe, .page-page-Hunter_s_Mark, .page-Seals) { --theme-body-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Bg-Lore.webp); --theme-border-color: #263238; --theme-border-color--rgb: 176, 191, 197; --theme-page-background-color: #eceff1; --theme-page-background-color--secondary: #cfd8dc; --theme-page-text-mix-color: #263238; --theme-accent-label-color: #000a12; --theme-link-color: #263238; --theme-link-color--rgb: 38, 51, 56; --theme-link-color--hover: #000a12; --theme-link-color--hover-rgb: 0, 10, 18; --theme-header-background-color: #000a12; --theme-header-background-color--rgb: 0, 10, 18; --theme-header-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Header-Lore.webp); --pi-cta-color: #b0bec5; --pi-cta-color--rgb: 176, 191, 197; --pi-cta-color--hover: #fff; --pi-cta-color--hover-rgb: 255, 255, 255; }

/*** Silksong. ***/
 * is(.ns-0,

.ns-14).theme-fandomdesktop-light:is([class*='Silksong'], .page-Deep_Docks, .page-Greymoor, .page-Moss_Grotto, .page-Bonebottom, .page-Ballow, .page-Church_Keeper, .page-Flea, .page-Forge-Daughter, .page-Garmond_and_Zaza, .page-Huntress, .page-Shakra, .page-Sherma, .page-Trobbio, .page-Carmelita, .page-Lace, .page-Moss_Mother, .page-Sharpe, .page-Crawbug, .page-Dustroach, .page-Mask_Piece, .page-Rosary, .page-Rosaries, .page-Shell_Shards, .page-Silk, .page-Tool_Pouch, .page-Skills, .page-Bind, .page-Tools, .page-The_Marrow, .page-The_Citadel, .page-Grindle, .page-Caravan, .page-Seth, .page-Bell_Beast, .page-Last_Judge, .page-Druid_of_the_Moss_Temple, .page-Citadel, .page-Needle, .page-Quests) { --theme-body-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Bg-Silksong.webp);  --theme-border-color: #bf360c;  --theme-border-color--rgb: 255, 172, 145;  --theme-page-background-color: #fbe9e7;  --theme-page-background-color--secondary: #ffddc1;  --theme-page-text-mix-color: #bf360c;  --theme-accent-label-color: #870000;  --theme-link-color: #bf360c;  --theme-link-color--rgb: 191, 55, 13;  --theme-link-color--hover: #870000;  --theme-link-color--hover-rgb: 135, 0, 0;  --theme-header-background-color: #742729;  --theme-header-background-color--rgb: 116, 41, 39;  --theme-header-background-image: url(https://hollowknight.fandom.com/Special:Filepath/HK_Wiki_Header-Silksong.webp);  --pi-cta-color: #feb556;  --pi-cta-color--rgb: 254,  182, 86;  --pi-cta-color--hover: #ffab91;  --pi-cta-color--hover-rgb: 255, 172, 145; }

/*** Toggles colors. ***/ .theme-fandomdesktop-light, .theme-fandomdesktop-light .wds-toggle__label { --wds-toggle-background-color: #bdc1c6; --wds-toggle-switch-color: #fff; --wds-toggle-background-color--checked: #185abc; --wds-toggle-switch-color--checked: #4285f4; }

/** Inverting white sprites' color for light theme. **/ .theme-fandomdesktop-light .darklight-img, .theme-fandomdesktop-light .hk-divider, .theme-fandomdesktop-light .ss-divider { filter: invert(1); }

/* 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%; } /**/

/* 4. Infobox. */ /** 4.1. General styles. **/ .page-content .portable-infobox.pi-background { background: var(--pi-background) top/cover no-repeat url(https://hollowknight.fandom.com/Special:Filepath/Infobox_HK_Background.png); border-image: url(https://hollowknight.fandom.com/Special:Filepath/Infobox_Bottom.png) 60% fill/40px; border-radius: 6px; margin: 6px; padding-bottom: 10px; }

/** 4.2. Title cell. **/ .page-content .portable-infobox .pi-title { border-image: url(https://hollowknight.fandom.com/ru/Special:Filepath/Top_custom.png) 40% fill/40px; font: 500 20px/20px var(--pi-tabbers-font); padding: 12px 24px; }

/** 4.3. Info cells. **/ .page-content .portable-infobox .pi-item-spacing:not(.pi-title), .page-content .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; }

/** 4.4. Image section. **/ .portable-infobox .pi-image { padding: 16px 8px; }

/*** 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-tabs__wrapper .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; }

/** 4.5. Themed styles. **/ /*** Hidden Dreams. ***/ .portable-infobox.pi-theme-hidden.pi-background { --pi-background: rgba(133, 97, 140, 0.2); background-image: url(https://hollowknight.fandom.com/ru/Special:Filepath/Infoback3.png); }

/*** The Grimmm Troupe. ***/ .portable-infobox.pi-theme-grimm.pi-background { --pi-background: rgba(140, 97, 97, .2); background-image: url(https://hollowknight.fandom.com/ru/Special:Filepath/Infoback2.png); }

/*** Godmaster. ***/ .portable-infobox.pi-theme-godmaster.pi-background { --pi-background: rgba(113, 112, 61, 0.2); background-image: url(https://hollowknight.fandom.com/Special:Filepath/Infobox_Background_Godmaster.png); }

/*** Lifeblood. ***/ .portable-infobox.pi-theme-lifeblood.pi-background { --pi-background: rgba(60, 129, 194, .1); background-image: url(https://hollowknight.fandom.com/Special:Filepath/Infobox_Background_Lifeblood.png); }

/*** Voidheart. ***/ /**** (Credit goes to InkScarlet for the infbox background image). ****/ .portable-infobox.pi-theme-voidheart.pi-background { --pi-background: rgba(97, 101, 140, .2); background-image: url(https://hollowknight.fandom.com/fr/Special:Filepath/Infobox_Background_Édition_Coeur-du-Vide.png); }

/*** Lore. ***/ /**** (Credit goes to InkScarlet for the infbox background image). ****/ .portable-infobox.pi-theme-lore.pi-background { --pi-background: rgba(97, 101, 140, .2); background-image: url(https://hollowknight.fandom.com/fr/Special:Filepath/Infobox_Background_Lore.png); }

/*** Silksong. ***/ /**** (Credit goes to InkScarlet for the infbox background image). ****/ .portable-infobox.pi-theme-silksong.pi-background { --pi-background: rgba(140, 120, 97, 0.2); background-image: url(https://hollowknight.fandom.com/fr/Special:Filepath/Infobox_Background_Hollow_Knight_Silksong.png); }

/*** Infobox - for light theme, colored text will be the same as on dark theme. ***/ .theme-fandomdesktop-light .portable-infobox { color: #fff; --theme-accent-label-color: #fff; }

.theme-fandomdesktop-light :is(.portable-infobox a, .pi-secondary-background, .portable-infobox .wds-tabs__tab, .portable-infobox .wds-is-current) { color: var(--pi-cta-color); }

.theme-fandomdesktop-light :is(.portable-infobox a, .pi-secondary-background, .portable-infobox .wds-tabs__tab, .portable-infobox .wds-is-current):hover { color: var(--pi-cta-color--hover); }

.theme-fandomdesktop-light .portable-infobox .wds-tabs__wrapper { --theme-link-color--rgb: var(--pi-cta-color--rgb); }

/**** The rest of sub-themes are missing because they don't change anything. ****/ /***** Hidden Dreams. *****/ .theme-fandomdesktop-light .portable-infobox.pi-theme-hidden.pi-background { --pi-background: hsl(234, 18%, 20%); }

/***** The Grimmm Troupe. *****/ .theme-fandomdesktop-light .portable-infobox.pi-theme-grimm.pi-background { --pi-background: hsl(0, 18%, 25%); }

/** Making quote template images to be white when inside the infobox. **/ .theme-fandomdesktop-light .portable-infobox .game-quote .darklight-img { filter: none; }

/** Removing duplicated bullet point from lists inside the infobox. **/ .pi-data-value ul li:before { content: none; }

/* 5. General styles. */ /** Allowing sticky elements to work. **/ body:not(.mainpage) .mw-parser-output { overflow: initial; }

/** 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 .25em var(--theme-link-color--hover); }

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

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

/** Scrollbar. **/ /*** Firefox scrollbar. ***/ html, body { 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); }

/***
 * Dark theme 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. ****/ .theme-fandomdesktop-dark::-webkit-scrollbar-button:vertical:decrement, .theme-fandomdesktop-dark *::-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); }

.theme-fandomdesktop-dark::-webkit-scrollbar-button:vertical:decrement:active, .theme-fandomdesktop-dark *::-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. ****/ .theme-fandomdesktop-dark::-webkit-scrollbar-button:vertical:increment, .theme-fandomdesktop-dark *::-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); }

.theme-fandomdesktop-dark::-webkit-scrollbar-button:vertical:increment:active, .theme-fandomdesktop-dark *::-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. ****/ .theme-fandomdesktop-dark::-webkit-scrollbar-button:horizontal:decrement, .theme-fandomdesktop-dark *::-webkit-scrollbar-button:horizontal:decrement { background-image: url(https://tobias-laboratory.fandom.com/Special:Filepath/Arrow_left_dark.svg); }

.theme-fandomdesktop-dark::-webkit-scrollbar-button:horizontal:decrement:active, .theme-fandomdesktop-dark *::-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. ****/ .theme-fandomdesktop-dark::-webkit-scrollbar-button:horizontal:increment, .theme-fandomdesktop-dark *::-webkit-scrollbar-button:horizontal:increment { background-image: url(https://tobias-laboratory.fandom.com/Special:Filepath/Arrow_right_dark.svg); }

.theme-fandomdesktop-dark::-webkit-scrollbar-button:horizontal:increment:active, .theme-fandomdesktop-dark *::-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"); }

/*** Light theme scrollbar icons. ***/ /**** Up. ****/ .theme-fandomdesktop-light::-webkit-scrollbar-button:vertical:decrement, .theme-fandomdesktop-light *::-webkit-scrollbar-button:vertical:decrement { background-image: url(https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_arrow_drop_up_black_24px.svg); }

.theme-fandomdesktop-light::-webkit-scrollbar-button:vertical:decrement:active, .theme-fandomdesktop-light *::-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='%23fff'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M7 14l5-5 5 5z'/%3E%3C/svg%3E"); }

/**** Down. ****/ .theme-fandomdesktop-light::-webkit-scrollbar-button:vertical:increment, .theme-fandomdesktop-light *::-webkit-scrollbar-button:vertical:increment { background-image: url(https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_arrow_drop_down_black_24px.svg); }

.theme-fandomdesktop-light::-webkit-scrollbar-button:vertical:increment:active, .theme-fandomdesktop-light *::-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='%23fff'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); }

/**** Left. ****/ .theme-fandomdesktop-light::-webkit-scrollbar-button:horizontal:decrement, .theme-fandomdesktop-light *::-webkit-scrollbar-button:horizontal:decrement { background-image: url(https://tobias-laboratory.fandom.com/Special:Filepath/Arrow_left_light.svg); }

.theme-fandomdesktop-light::-webkit-scrollbar-button:horizontal:decrement:active, .theme-fandomdesktop-light *::-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='%23fff'%3E%3Cpath d='M14 7l-5 5 5 5V7z'/%3E%3Cpath d='M24 0v24H0V0h24z' fill='none'/%3E%3C/svg%3E"); }

/**** Right. ****/ .theme-fandomdesktop-light::-webkit-scrollbar-button:horizontal:increment, .theme-fandomdesktop-light *::-webkit-scrollbar-button:horizontal:increment { background-image: url(https://tobias-laboratory.fandom.com/Special:Filepath/Arrow_right_light.svg); }

.theme-fandomdesktop-light::-webkit-scrollbar-button:horizontal:increment:active, .theme-fandomdesktop-light *::-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='%23fff'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3Cpath d='M0 24V0h24v24H0z' fill='none'/%3E%3C/svg%3E"); }

/** Make elements and text scallable depending on user's browser/OS preference. **/ /*** /**** 10px. ****/ .page-content sup { font-size: .625rem; }
 * This is an early implementaton of this feature, so it may not be 100% accurate.

/**** 12px. ****/ .ooui-theme-fandomooui .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .WikiaBarWrapper #my-tools-menu > li > :is(a, span), .oo-ui-buttonElement > .oo-ui-buttonElement-button, .wikia-gallery-caption-size-medium .lightbox-caption, .page-content .portable-infobox :is(p, .pi-font, .pi-data-label), .wikia-gallery-caption-size-medium .title, .WikiaBarWrapper .tools-menu > li > a, .recent-wiki-activity__timeago, .recent-wiki-activity__username, .toctogglespan .toctogglelabel, .WikiaBarWrapper .wikia-bar, .LightboxModal .see-full-size-link, .LightboxModal .video-views, .thumb .thumbcaption p, .wds-button, .pi-font { font-size: .75rem; }

.toc .toctitle h2 .wds-icon-tiny, .WikiaBarWrapper .wds-icon-tiny, .wds-list .navigation-item-icon { height: .75rem; min-width: .75rem; width: .75rem; }

.toc .toctitle h2 .wds-icon, .fandom-community-header__local-navigation .navigation-item-icon { margin-right: .375rem; }

.WikiaBarWrapper .tools > li > svg { margin-right: .25rem; }

.WikiaBarWrapper #my-tools-menu > li > :is(a, span) { padding: .625rem .313rem; }

.thumb .thumbcaption p { line-height: 1.25; }

.page-content .portable-infobox :is(p, .pi-font, .pi-data-label) { line-height: 1.75; }

/**** 14px. ****/ body, .page-content :is(p, section),
 * not(.global-navigation) .wds-list > li,

.wds-tabs__tab-label, .page-header__languages .wds-dropdown__toggle, .page-header__variants .wds-dropdown__toggle, .fandom-community-header__local-navigation .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-nested .wds-dropdown-level-nested__content .wds-list.wds-is-linked > li > a, .modalContent, .diff-addedline, .diff-deletedline, .diff-context { font-size: .875rem; }

.wds-tabs__tab-label { margin: 0 .75rem; }

@media only screen and (min-width: 1500px) { .page-content { font-size: .875rem; } }

/**** 16px. ****/ .rail-module__header, .rail-module h2, .page-content h4, .oo-ui-dialog { font-size: 1rem; }

/**** 18px. ****/ .page-content .portable-infobox .pi-title, .wds-collapsible-panel__header, .page-content h3 { font-size: 1.125rem; }

.WikiaBarWrapper .wds-icon-small, .activity-summary__help-link .wds-icon-small { height: 1.125rem; min-width: 1.125rem; width: 1.125rem; }

.WikiaBarWrapper .arrow .close-icon { padding: .125rem; }

/**** 24px. ****/ .rail-module .wds-icon { height: 1.5rem; min-width: 1.5rem; width: 1.5rem; }

.page-content h2 { font-size: 1.5rem; }

/**** 36px. ****/ .page-header__title, .page-content h1 { font-size: 2rem; }

/** Adding background image. **/ .main-container { background: #000 center/cover fixed no-repeat var(--theme-body-background-image, url(https://hollowknight.fandom.com/Special:Filepath/Wiki-background)); }

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

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

/** 5.1. Header. **/ /*** Hiding new baner. ***/ .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://hollowknight.fandom.com/Special:Filepath/Community-header-background)); 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 > :is(li.wds-is-selected, li:hover) > a:not(.wds-button) { color: var(--theme-link-color--hover); }

/** Hiding header in the editor. ***/
 * is(.action-edit,

.ve-active) .community-header-wrapper { display: none; }

/*** Moving the editor a bit more bellow. ***/
 * is(.action-edit,

.ve-active) .page { margin-top: 46px; }

/** .page-header__categories > :last-child { padding: 0; margin-block-end: 1em; }
 * Changing padding to margin, so the last category link doesn't look oddly
 * bigger when focused.

/** Fixing page box-shadow wrapping empty space. **/ .community-header-wrapper { margin-top: -26px; }

/** 5.2. Body. **/ /*** Adding quote styles to the element. ***/ q { font-style: italic; quotes: "“" "”" "‘" "’"; }

q::before { content: open-quote; }

q::after { content: close-quote; }

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

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

color: var(--theme-color__red) !important; }
 * 1) wpTextbox0 {

/*** 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: var(--theme-color__pink);  font-weight: bold; }

/*** Dialog curtains' z-index. ***/ .wds-dialog__curtain { z-index: 9; }

/*** Articles' bullet list style. ***/ /**** Dark theme. ****/ .theme-fandomdesktop-dark .mw-parser-output ul:not(.wds-tabs), /**** Light theme - overwrites bullet list icons to be white too. ****/ .theme-fandomdesktop-light .mw-parser-output .portable-infobox .pi-data-value ul { list-style-image: url(https://hollowknight.fandom.com/Special:Filepath/BulletPoint.png); }

/**** Light theme. ****/ .theme-fandomdesktop-light .mw-parser-output ul:not(.wds-tabs) { list-style-image: url(https://hollowknight.fandom.com/Special:Filepath/BulletPointBlack.png); }

/*** Responsive dividers. ***/ /**** Dark theme. ****/ .hk-divider { background: transparent center/contain scroll no-repeat url(https://hollowknight.fandom.com/Special:Filepath/Hr.png); border: 0; height: 54px; /* Max height that the background can get. It'll also stop it's                * width from incresing once it gets to that threshold. */ width: 100%; }

.ss-divider { background: transparent center/contain scroll no-repeat url(https://hollowknight.fandom.com/Special:Filepath/SS_Hr.png); border: 0; height: 41px; /* Max height that the background can get. It'll also stop it's                * width from incresing once it gets to that threshold. */ width: 100%; }

/*** Responsive centered images. ***/ .f-center { display: flex; justify-content: center; width: auto; }

/****
 * (For the light theme version, check the Light theme secion above in the
 * document).

/*** Headlines' font. ***/ .page-header__title, .portable-infobox .pi-header, .mw-parser-output :is(h1, h2, h3, h4, h5, h6):not(.pi-data-label, .pi-title) { font-family: var(--theme-font-1); padding: 0; }

/*** Infobox headlines. ***/ .page-content .pi-data-label { font-size: 12px; }

/**** Fixing not working on headines. ****/ center :is(h1, h2, h3, h4, h5, h6) { justify-content: center; }

/**** Removing bottom border from s if those are inside a table. ****/ .page-content table h2 { border: 0; }

/*** Gallery caption's color. ***/ /**** Dark theme. ****/ .theme-fandomdesktop-dark :is(.caption, .wikia-gallery-caption-below .lightbox-caption) { color: rgba(var(--theme-page-text-color--rgb), .6); }

/**** Light theme. ****/ .theme-fandomdesktop-light :is(.caption, .wikia-gallery-caption-below .lightbox-caption) { color: rgba(var(--theme-page-text-color--rgb), .82); }

/*** Collapsible button. ***/ /**** Places collapsible button to the left. ****/ .dialogue-table.mw-collapsible > tbody > :first-child > 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 .5rem #0000); height: 1.5rem; vertical-align: middle; width: 1.5rem; transition: filter .4s; }

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

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

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

/**** Arrow images' styles. ****/ .mw-collapsible-toggle:is(:hover,
 * focus)::before {

filter: drop-shadow(0 0 .5rem var(--theme-link-color--hover)); }

.mw-collapsible-toggle-collapsed::before { background: transparent no-repeat center; }

.mw-collapsible-toggle-expanded::before { background: transparent no-repeat center; }

/***** Dark theme. *****/ .theme-fandomdesktop-dark .mw-collapsible-toggle-collapsed::before { background-image: url(https://hollowknight.fandom.com/Special:Filepath/Expandarrow.png); }

.theme-fandomdesktop-dark .mw-collapsible-toggle-expanded::before { background-image: url(https://hollowknight.fandom.com/Special:Filepath/Collapsearrow.png); }

/***** Light theme. *****/ .theme-fandomdesktop-light .mw-collapsible-toggle-collapsed::before { background-image: url(https://hollowknight.fandom.com/Special:Filepath/Expandarrow_black.png); }

.theme-fandomdesktop-light .mw-collapsible-toggle-expanded::before { background-image: url(https://hollowknight.fandom.com/Special:Filepath/Collapsearrow_black.png); }

.mw-collapsible-toggle-collapsed::before, .mw-collapsible-toggle-expanded::before { background-size: 1.5rem; display: inline-block; margin-right: .375rem; }

/*** Gradient divider element. ****/ .gradient-divider { border-width: .063rem 0 0 0; border-image: linear-gradient(to right, #FFF0, var(--theme-accent-label-color), #FFF0) 47% 0% 1; width: 100%; }

/*** Quote template. ***/ .game-quote { font-family: 400 1rem/1.25 var(--theme-font-3); letter-spacing: 0.031em; margin: auto; padding: 20px 15px; max-width: 60ch; }

/**** Removing padding from the template if it's inside a infobox. ****/ .portable-infobox .game-quote { padding: 0; }

.quote-text, .quote-text p { font: 500 italic 1.25rem/2rem var(--theme-font-3); letter-spacing: .0125em; text-align: center; }

.quote-text p { margin-block-end: .5rem; }

.game-quote .author { font-style: initial; text-align: right; }

/**** Makes any divider used an 1px gradient with fixed vertical margin. ****/ .game-quote hr { border-image: linear-gradient(to right, #FFF0, var(--theme-accent-label-color), #FFF0) 47% 0% 1; border-width: 1px 0 0; margin: 1rem 0; }

/**** If there's a paragraph following the divider, remove it's margin. ****/
 * is(.page-content,

.game-quote) hr + p { margin: 0; }

/*** Template:TabbedDialogue. ***/ .dialogue-table { width: 100%; }

.dialogue-table .dialogue-table__inner { font-size: .875rem; text-align: left; width: 100%; }

.dialogue-table .td-title { background-color: rgba(0, 0, 0, .2); font-weight: 700; width: 22%; }

/*** Tables. ***/ /**** Improving background color. ****/ .article-table, .WikiaTable { background-color: rgba(var(--theme-page-dynamic-color-2--rgb),.08); }

/*** Template:HK Nav Charms and Template:HK Nav Enemies. ***/ background-color: rgba(var(--theme-page-dynamic-color-2--rgb),.08); font: 700 .875rem/2 var(--theme-font-2); margin: 2rem auto; width: 100%; }
 * 1) mw-collapsed-no-text_charms-nav,
 * 2) mw-collapsed-no-text_enemies-nav {

/**** Modifies the main header to have custom styling. ****/
 * is(#mw-collapsed-no-text_charms-nav,

background-color: rgba(var(--theme-page-dynamic-color-2--rgb),.12); font: 700 1.5rem/1.25 var(--theme-font-2); padding: 10px; text-align: center; }
 * 1) mw-collapsed-no-text_enemies-nav) tbody > :first-child th {

/**** The rest of headers will have no background, different padding and font. ****/
 * is(#mw-collapsed-no-text_charms-nav,

padding-block-start: .75em; font: 500 1.125rem/1.5 var(--theme-font-1); }
 * 1) mw-collapsed-no-text_enemies-nav) tbody > :not(:first-child) th {

/**** Removing useless margin from paragraphs. ****/
 * is(#mw-collapsed-no-text_charms-nav,

margin: 0; }
 * 1) mw-collapsed-no-text_enemies-nav) p {

/**** Changing margins from dividers. ****/
 * is(#mw-collapsed-no-text_charms-nav,

margin: .75rem 0; }
 * 1) mw-collapsed-no-text_enemies-nav) hr {

/*** Light theme primary buttons. ***/ /**** Making text white. ****/ .theme-fandomdesktop-light .wds-button { --wds-primary-button-label-color: var(--theme-text-on-background--inverse); }

.theme-fandomdesktop-light .page-content :is(.bodySearch, .commentbox, .createbox, .mw-movebox, .searchbox) .mw-ui-button { color: var(--theme-text-on-background--inverse); }

/*** Dark theme buttons. ***/ .theme-fandomdesktop-dark .page-content :is(.bodySearch, .commentbox, .createbox, .mw-movebox, .searchbox) .mw-ui-button { color: var(--theme-text-on-background); }

/** 5.3. Footer. **/ /*** .wds-collapsible-panel.page-footer__languages > .wds-collapsible-panel__content { margin-bottom: 12px; }
 * Languages collapsible panel - making design the consistent with the categories'
 * panel.

.page-footer__languages .wds-collapsible-panel__content a { border-color: var(--theme-border-color); }

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

/* 6. Fixes and tweaks. */ /** New HK DN Template format. **/ columns: 2; display: block; float: none; margin-bottom: 4px; }
 * 1) dn-collapsible .mw-collapsible-toggle {

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

/** Hides collapsible button text when needed. **/ font-size: 0; height: 1.25rem; }
 * 1) mw-collapsed-no-text .mw-collapsible-text {

/** Making global navigation bar's menus links visible on hover. **/ .global-navigation :is(.wds-dropdown .wds-list, .wds-tab__content) a:hover { color: var(--fandom-link-color--hover) !important; text-shadow: none !important; }

/* 7. Dialogs. */ /** Fixing dialogs' text color on light theme. **/ .theme-fandomdesktop-light .oo-ui-dialog-content { --theme-page-text-color: #fff; }

/* Dialog popups. */
 * root:not(.ve-active) .oo-ui-windowManager-modal > .oo-ui-dialog:not(#lastEdited-diff) > .oo-ui-window-frame {

width: 400px !important; max-height: calc(100vh - 480px) !important; }

/** Diff dialog layout fixes. **/ max-width: calc(100% - 96px); max-height: calc(100% - 84px); right: initial; bottom: initial; margin: 48px 48px 36px; }
 * 1) lastEdited-diff.oo-ui-dialog > .oo-ui-window-frame {

height: 100%; justify-content: space-between; position: absolute; }
 * 1) lastEdited-diff.oo-ui-dialog .oo-ui-dialog-content {

flex-basis: 96px; }
 * 1) lastEdited-diff.oo-ui-dialog .oo-ui-window-head {

flex-basis: 100%; }
 * 1) lastEdited-diff.oo-ui-dialog .oo-ui-window-body {

flex-basis: 48px; }
 * 1) lastEdited-diff.oo-ui-dialog .oo-ui-window-foot {

display: none; }
 * 1) lastEdited-diff.oo-ui-dialog .oo-ui-processDialog-actions-primary {

margin: 0; }
 * 1) lastEdited-diff.oo-ui-dialog .oo-ui-processDialog-location {

background-color: var(--theme-page-background-color); }
 * 1) lastEdited-diff.oo-ui-dialog .diff-context {

/** Adding dark background to diff lines so text is legible. **/ .theme-fandomdesktop-light #lastEdited-diff.oo-ui-dialog :is(.diff-context, .diff-deletedline, .diff-addedline) { background-color: #272531; }

/** Making WikiaBar text white so it's legible light theme. **/ .theme-fandomdesktop-light #WikiaBar { --theme-accent-label-color: #fff; }

.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame, .ooui-theme-fandomooui .mw-upload-bookletLayout-filePreview, .ooui-theme-fandomooui .oo-ui-windowManager-modal > .ve-ui-mwSaveDialog > .oo-ui-window-frame { background-color: transparent; }

.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 center/contain scroll no-repeat url(https://hollowknight.fandom.com/Special:Filepath/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://hollowknight.fandom.com/Special:Filepath/Dialogue_Bottom.png); content: ''; display: block; position: absolute; bottom: -10px; width: 100%; height: 16px; }

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

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

/*** Removing extra background on "switch" button. ***/ .oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:is(:hover, :focus, :focus-within, :active), .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:is(:hover, :focus, :focus-within, :active) { background: transparent; }

/*** 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://hollowknight.fandom.com/Special:Filepath/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://hollowknight.fandom.com/Special:Filepath/Hk_right_arrow.png); right: 12px; }

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

/** Header. **/ .oo-ui-processDialog-content :is(.oo-ui-window-head, .oo-ui-window-foot) { outline: none; }

.oo-ui-processDialog-content .oo-ui-window-head { border-bottom: 1px solid transparent; border-image: linear-gradient(to right, #FFF0, currentcolor, #FFF0) 47% 0%; padding-top: 24px; }

.oo-ui-processDialog-content .oo-ui-window-foot { border-top: 1px solid transparent; border-image: linear-gradient(to right, #FFF0, currentcolor, #FFF0) 47% 0%; }

/** "Save changes" button. **/ .oo-ui-processDialog-actions-primary { border: 0; border-left: 1px solid; border-image: linear-gradient(to bottom, #FFF0, currentcolor, #FFF0) 1 47% 0%; }

/** Buttons right border. **/ .oo-ui-processDialog-actions-safe .oo-ui-buttonElement-button, border: 0; border-right: 1px solid; border-image: linear-gradient(to bottom, #FFF0, currentcolor, #FFF0) 1 47% 0%; }
 * 1) lastEdited-diff.oo-ui-dialog .oo-ui-processDialog-actions-other .oo-ui-buttonElement-button {

.oo-ui-messageDialog-title, .oo-ui-processDialog-title { display: inline-block; font: 500 1.25rem/1 var(--theme-font-1); margin-block: 12px; }

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

/** Visual editor - Media settings modal. **/ .oo-ui-processDialog-content::before { height: 64px; top: -42px; }

.oo-ui-processDialog-content::after { height: 36px; bottom: -24px; }

/** Text field - Adding border and fixing layout. **/ .ve-ui-targetWidget .ve-ui-surface :is(.ve-ce-attachedRootNode, .ve-ui-surface-placeholder) { padding: 16px 10px; }

.ve-ui-targetWidget .ve-ui-surface p { font-size: 14px; padding: 0; }

.oo-ui-processDialog-content .ve-ce-surface .ve-ce-documentNode { border: 1px solid var(--theme-border-color); padding: 10px; transition: border-color 300ms, border-width 300ms, box-shadow 300ms; }

.oo-ui-processDialog-content [contenteditable="true"]:is(:hover, :focus) { border-color: var(--theme-link-color); }

.oo-ui-processDialog-content [contenteditable="true"]:focus { box-shadow: inset 0 0 0 1px var(--theme-link-color); }

/*** Fixing general layout. ***/ .oo-ui-menuLayout-expanded, .oo-ui-menuLayout-expanded > :is(.oo-ui-menuLayout-menu, .oo-ui-menuLayout-content) { position: relative; }

/*** Adding specific height to show again contents. ***/ .oo-ui-searchWidget { height: clamp(200px, 50vh, 1080px); }

.oo-ui-indexLayout.oo-ui-menuLayout.oo-ui-menuLayout-expanded > .oo-ui-menuLayout-content { top: 0; overflow: auto; }

.oo-ui-dialog-content > .oo-ui-window-body { overflow: auto; height: clamp(100px, 50vh, 1080px); }

/**** "Are you sure you want to save?" edit dialog. ****/ .action-edit .oo-ui-dialog-content > .oo-ui-window-body { height: 150px; }

/* 8. Templates and components. */ /** Templates. **/ /*** Advices/warnings/messaging templates. ***/ /**** Layout. ****/ .message-card { align-items: center; border-bottom: 1px solid; display: flex; margin: .75rem 0; padding: 1rem 2rem; width: auto; }

.message-card p { margin: 0; }

.message-card .image-container { display: flex; justify-content: center; }

.message-card .text-container { display: flex; flex-direction: column; hyphens: auto; }

.message-card .image { margin-right: 1.625rem; }

.message-card .title { font-weight: 600; }

/**** Advice template colors. ****/ /***** Dark theme. *****/ .theme-fandomdesktop-dark #disclaimer-advice { background-color: rgba(255, 235, 59, .08); border-bottom-color: #fff59d; }

/***** Light theme. *****/ .theme-fandomdesktop-light #disclaimer-advice { background-color: rgba(251, 192, 45, .16); border-bottom-color: #fbc02d; }

/**** Delete template colors. ****/ /***** Dark theme. *****/ .theme-fandomdesktop-dark #disclaimer-delete { background-color: rgba(239, 154, 154, .08); border-bottom-color: #ef9a9a; }

/***** Light theme. *****/ .theme-fandomdesktop-light #disclaimer-delete { background-color: rgba(211, 47, 47, .12); border-bottom-color: #d32f2f; }

/*** Godmaster boss table. ***/ background: rgba(0, 0, 0, 0.2); border: 2px solid rgb(255, 245, 157); box-shadow: inset 0 0 6px 6px rgb(255 245 157/20%), inset 0 0 8px 8px rgb(255 245 157/14%), inset 0 0 10px 10px rgb(255 245 157/12%); padding: 24px; width: 100%; }
 * 1) gm-boss-table {

margin: 0; }
 * 1) gm-boss-table p {

margin-bottom: 8px; }
 * 1) gm-boss-table .gm-boss--title {

text-align: center; }
 * 1) gm-boss-table .gm-boss-epithet {

color: #cdc686; }
 * 1) gm-boss-table .gm-boss--title {

/**** Light theme. ****/ .theme-fandomdesktop-light #gm-boss-table { background-color: rgba(0, 0, 0, .87); color: var(--theme-text-primary-on-background--inverse); }

/*** Tabbed Dialogue. ***/ .dialogue-table .dialogue-condition { background-color: rgba(0, 0, 0, .2); font-weight: 700; }

.page-content .typography p { margin: 0; }

.page-content .typography--headline1 { display: block; font: 300 5.25rem/5.75rem var(--theme-font-1); letter-spacing: -.015625em }

.page-content .typography--headline2 { display: block; font: 300 3.75rem/1 var(--theme-font-1); letter-spacing: -.0083333333em; }

.page-content .typography--headline3 { display: block; font: 400 3rem/3.125rem var(--theme-font-1); letter-spacing: normal; }

.page-content .typography--headline4 { display: block; font: 400 2.125rem/2.5rem var(--theme-font-1); letter-spacing: .0073529412em; }

.page-content .typography--headline5 { display: block; font: 400 1.5rem/2rem var(--theme-font-1); letter-spacing: normal; }

.page-content .typography--headline6 { display: block; font: 500 1.25rem/2rem var(--theme-font-1); letter-spacing: .0125em; }

.page-content .typography--subtitle1 { font: 400 1rem/1.75rem var(--theme-font-2); letter-spacing: .009375em; }

.page-content .typography--subtitle2 { font: 500 .875rem/1.375rem var(--theme-font-2); letter-spacing: .0071428571em; }

.page-content .typography--body1 { font: 400 1rem/1.5rem var(--theme-font-2); letter-spacing: .03125em; }

.page-content .typography--body2 { font: 400 .875rem/1.25rem var(--theme-font-2); letter-spacing: .0178571429em; }

.page-content .typography--caption { font: 400 .75rem/1.25rem var(--theme-font-2); letter-spacing: .0333333333em; }

.page-content .typography--button { font: 500 .875rem/2.25rem var(--theme-font-2); letter-spacing: .0892857143em; text-transform: uppercase; }

.page-content .typography--overline { display: block; font: 500 .75rem/2rem var(--theme-font-2); letter-spacing: .1666666667em; text-transform: uppercase; }

.page-content .typography--footnote { display: block; font: 400 .75rem/1.25rem var(--theme-font-2); letter-spacing: normal; }

/**** Classes de utilidad. ****/ .page-content .typography--on-background { color: var(--theme-text-on-background); }

.page-content .typography--primary { color: var(--theme-text-primary-on-background); }

.page-content .typography--secondary { color: var(--theme-text-secondary-on-background); }

.page-content .typography--disabled { color: var(--theme-text-disabled-on-background); }

.page-content .typography--on-background--inverse { color: var(--theme-text-on-background--inverse); }

.page-content .typography--primary--inverse { color: var(--theme-text-primary-on-background--inverse); }

.page-content .typography--secondary--inverse { color: var(--theme-text-secondary-on-background--inverse); }

.page-content .typography--disabled--inverse { color: var(--theme-text-disabled-on-background--inverse); }

.page-content .h-c__red { color: var(--theme-color__red); }

.page-content .h-c__pink { color: var(--theme-color__pink); }

.page-content .h-c__purple { color: var(--theme-color__purple); }

.page-content .h-c__deep-purple { color: var(--theme-color__deep-purple); }

.page-content .h-c__indigo { color: var(--theme-color__indigo); }

.page-content .h-c__blue { color: var(--theme-color__blue); }

.page-content .h-c__light-blue { color: var(--theme-color__light-blue); }

.page-content .h-c__cyan { color: var(--theme-color__cyan); }

.page-content .h-c__teal { color: var(--theme-color__teal); }

.page-content .h-c__green { color: var(--theme-color__green); }

.page-content .h-c__light-green { color: var(--theme-color__light-green); }

.page-content .h-c__lime { color: var(--theme-color__lime); }

.page-content .h-c__yellow { color: var(--theme-color__yellow); }

.page-content .h-c__amber { color: var(--theme-color__amber); }

.page-content .h-c__orange { color: var(--theme-color__orange); }

.page-content .h-c__deep-orange { color: var(--theme-color__deep-orange); }

.page-content .h-c__brown { color: var(--theme-color__brown); }

.page-content .h-c__grey { color: var(--theme-color__grey); }

.page-content .h-c__blue-grey { color: var(--theme-color__blue-grey); }

.page-content .typography--smooth-text { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }

.page-content .typography--ellipsis-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.page-content .typography--ellipsis-text--flex { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fd-hide { display: none !important; }

/*** Grid layout. ***/ @supports (display: grid) { .glue-grid { display: grid; gap: 16px; grid-gap: 16px; grid-template-columns: repeat(12, minmax(5px, 1fr)); max-width: 2280px; }

.glue-grid .glue-grid__col--span-0 { display: none; }

.glue-grid .glue-grid__col--span-1 { grid-column-end: span 1; }

.glue-grid .glue-grid__col--span-1 .glue-grid { grid-template-columns: repeat(1, minmax(5px, 1fr)); }

.glue-grid .glue-grid__col--span-2 { grid-column-end: span 2; }

.glue-grid .glue-grid__col--span-2 .glue-grid { grid-template-columns: repeat(2, minmax(5px, 1fr)); }

.glue-grid .glue-grid__col--span-3 { grid-column-end: span 3; }

.glue-grid .glue-grid__col--span-3 .glue-grid { grid-template-columns: repeat(3, minmax(5px, 1fr)); }

.glue-grid .glue-grid__col--span-4 { grid-column-end: span 4; }

.glue-grid .glue-grid__col--span-4 .glue-grid { grid-template-columns: repeat(4, minmax(5px, 1fr)); }

.glue-grid .glue-grid__col--span-5 { grid-column-end: span 5; }

.glue-grid .glue-grid__col--span-5 .glue-grid { grid-template-columns: repeat(5, minmax(5px, 1fr)); }

.glue-grid .glue-grid__col--span-6 { grid-column-end: span 6; }

.glue-grid .glue-grid__col--span-6 .glue-grid { grid-template-columns: repeat(6, minmax(5px, 1fr)); }

.glue-grid .glue-grid__col--span-7 { grid-column-end: span 7; }

.glue-grid .glue-grid__col--span-7 .glue-grid { grid-template-columns: repeat(7, minmax(5px, 1fr)); }

.glue-grid .glue-grid__col--span-8 { grid-column-end: span 8; }

.glue-grid .glue-grid__col--span-8 .glue-grid { grid-template-columns: repeat(8, minmax(5px, 1fr)); }

.glue-grid .glue-grid__col--span-9 { grid-column-end: span 9; }

.glue-grid .glue-grid__col--span-9 .glue-grid { grid-template-columns: repeat(9, minmax(5px, 1fr)); }

.glue-grid .glue-grid__col--span-10 { grid-column-end: span 10; }

.glue-grid .glue-grid__col--span-10 .glue-grid { grid-template-columns: repeat(10, minmax(5px, 1fr)); }

.glue-grid .glue-grid__col--span-11 { grid-column-end: span 11; }

.glue-grid .glue-grid__col--span-11 .glue-grid { grid-template-columns: repeat(11, minmax(5px, 1fr)); }

.glue-grid .glue-grid__col--span-12 { grid-column-end: span 12; }

.glue-grid .glue-grid__col--span-12 .glue-grid { grid-template-columns: repeat(12, minmax(5px, 1fr)); }

.glue-grid .glue-grid__col--align-top { align-self: start; }

.glue-grid .glue-grid__col--align-middle { align-self: center; }

.glue-grid .glue-grid__col--align-bottom { align-self: end; }

.glue-grid--align-left { margin-right: auto; margin-left: 0; }

.glue-grid--align-right { margin-right: 0; margin-left: auto; }

.glue-grid--align-center { margin: 0 auto; }

@media only screen and (min-width: 600px) and (max-width: 799px) { .glue-grid { gap: 24px; grid-gap: 24px; } }

@media only screen and (min-width: 800px) and (max-width: 904px) { .glue-grid { gap: 32px; grid-gap: 32px; } }

@media only screen and (min-width: 905px) and (max-width: 1239px) { .glue-grid { gap: 36px; grid-gap: 36px; } }

@media only screen and (min-width: 1240px) and (max-width: 1440px) { .glue-grid { gap: 40px; grid-gap: 40px; } }

@media only screen and (min-width: 1441px) { .glue-grid { gap: 48px; grid-gap: 48px; } } }

/*** Acordiones. ***/ /**** Layout y colores base. ****/ .mat-accordion { --accordion-background-color: #202124; --accordion-border-color: #5f6368; --accordion-header-background-color: #202124; --accordion-header-background-color--hover: rgba(255, 255, 255, .06); --accordion-link-color: #8ab4f8; --accordion-link-list-background-color: rgba(255, 255, 255, .03); --accordion-link-list-background-color--hover: rgba(255, 255, 255, .08); --accordion-text-header-background-color--active: #3c4043; align-items: flex-start; border-radius: 0.5rem; display: flex; flex: 100%; flex-direction: column; margin: 2.625rem 0 0; }

/***** Estilos de enlaces. *****/ .mat-accordion.list-accordion tr:last-child a, .mat-accordion.list-accordion tr:last-child a:is(:hover, :focus), .mat-accordion .mw-collapsible-toggle:is(:hover, :focus, :focus-within) a { color: var(--accordion-link-color); text-shadow: none; }

/***** Layout de acordiones de diálogo/lista. *****/ .mat-accordion .dialogue-table { display: flex; justify-content: flex-start; width: 100%; }

.mat-accordion .dialogue-table :is(tbody, tr, td) { display: inherit; width: 100%; justify-content: stretch; padding: 0; }

.mat-accordion .dialogue-table tbody { flex-direction: column; }

/***** Acordión de diálogo - estilos de encabezados. *****/ .mat-accordion .dialogue-table .mw-collapsible-toggle-default { background-color: var(--theme-page-background-color);/*var(--accordion-link-list-background-color)*/ position: relative; width: 100%; }

.mat-accordion .dialogue-table .mw-collapsible-toggle-default::before { display: none; }

/***** .mat-accordion .dialogue-table .mw-collapsible-toggle-default::after, .mat-accordion .dialogue-table .mw-collapsible-toggle-collapsed::after, .mat-accordion .dialogue-table .mw-collapsible-toggle-expanded::after { color: var(--accordion-link-color); content: ''; display: inline-block; height: 1.25rem; position: absolute; right: 1.75rem; top: 1rem; width: 1.25rem; }
 * Añade pseudo-elemento para ambos tipos de acordiones, así después podemos
 * añadir los botones de flechas dentro de estos.

/***** Acordión de diálogo - más estilos de encabezados. *****/ .mat-accordion .dialogue-table .mw-collapsible-toggle-default .mw-collapsible-text { color: var(--theme-text-primary-on-background); display: flex; font: 500 0.875rem/1.25rem var(--theme-font-2); padding: 1rem 3.25rem 1rem 4rem; text-decoration: none; }

.mat-accordion .dialogue-table :is(.mw-collapsible-toggle-collapsed, .mw-collapsible-toggle-expanded) { outline: 0; }

.mat-accordion .dialogue-table .mw-collapsible-toggle-collapsed:is(:hover, :focus) { background-color: var(--accordion-header-background-color--hover); }

/***** Añade iconos de flechas dentro de los pseudo-elementos creados anteriormente. *****/ /****** Cerrado / flecha hacia abajo. ******/ .mat-accordion .dialogue-table .mw-collapsible-toggle-default::after, .mat-accordion .dialogue-table .mw-collapsible-toggle-collapsed::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224px%22%20fill%3D%22%238ab4f8%22%3E%3Cpath%20d%3D%22M0%200h24v24H0V0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M7.41%208.59L12%2013.17l4.59-4.58L18%2010l-6%206-6-6%201.41-1.41z%22%2F%3E%3C%2Fsvg%3E"); }

/****** Abierto / flecha hacia arriba. ******/ .mat-accordion .dialogue-table .mw-collapsible-toggle-expanded::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224px%22%20fill%3D%22%238ab4f8%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M7.41%2015.41L12%2010.83l4.59%204.58L18%2014l-6-6-6%206z%22%2F%3E%3C%2Fsvg%3E"); }

/***** Añade borde exterior a todo el Acordión de Lista. *****/ .mat-accordion.list-accordion { border: thin solid var(--accordion-border-color); }

/***** Acordión de Lista - arregla bordes del primero de la lista. *****/ .mat-accordion.list-accordion .dialogue-table:first-child .mw-collapsible-toggle-default { border-top: none; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; }

/***** Acordión de Lista - arregla bordes del último de la lista. *****/ .mat-accordion.list-accordion .dialogue-table:last-child .mw-collapsible-toggle-default { border-bottom: none; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }

.mat-accordion.list-accordion .dialogue-table:last-child tr:last-child { border: none; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }

/***** Añade bordes a cada encabezado de la lista. *****/ .mat-accordion.list-accordion .mw-collapsible-toggle-default { border-bottom: thin solid var(--accordion-border-color); }

.mat-accordion.list-accordion tr:last-child { background-color: var(--accordion-link-list-background-color); border-bottom: thin solid var(--accordion-border-color); }

.mat-accordion.list-accordion tr:last-child ul { margin: 10px 0; width: 100%; }

.mat-accordion.list-accordion tr:last-child li { color: var(--theme-text-on-background); line-height: 0.875rem; list-style-type: none; margin: 0; }

.mat-accordion.list-accordion tr:last-child a { display: block; font-weight: 400; padding: 0.625rem 4rem; text-decoration: none; }

/***** Acordión de Lista - estilos de interactividad del encabezado. *****/ .mat-accordion.list-accordion tr:last-child a:is(:hover, :focus) { background-color: var(--accordion-link-list-background-color--hover); outline: none; }

.mat-accordion.text-accordion .mw-collapsible-toggle-default { border-top: 0.0625rem solid var(--accordion-border-color); z-index: 1; }

.mat-accordion.text-accordion .mw-collapsible-toggle-default .mw-collapsible-text { color: var(--accordion-link-color); font: normal 1rem/1.5rem var(--theme-font-2); padding: 1rem 3.125rem 1rem 1rem; }

.mat-accordion.text-accordion .mw-collapsible-toggle-default .mw-collapsible-text:active { background-color: var(--accordion-text-header-background-color--active); }

.mat-accordion.text-accordion tr:last-child td { flex-direction: column; padding: 0.0625rem 1.625rem 1.1875rem 2.125rem; position: relative; }

.mat-accordion.text-accordion tr:last-child td::before { background-color: var(--accordion-border-color); content: ''; height: 100%; left: 1.125rem; position: absolute; top: -1.1875rem; width: 0.125rem; z-index: 0; }

.mat-accordion.text-accordion tr:last-child p { margin: 0.25rem 0 0.75rem; line-height: 1.25rem; }

/***** Configuraciones del tema claro. *****/ .theme-fandomdesktop-light .mat-accordion { --accordion-border-color: #dadce0; --accordion-header-background-color: #fff; --accordion-header-background-color--hover: #efefef; --accordion-link-color: #3367d6; --accordion-link-list-background-color: #e8f0fe; --accordion-link-list-background-color--hover: #d2e3fc; --accordion-text-header-background-color--active: #f1f3f4; }

/****** Iconos de flechas - cambiando colores para que sean el azul del tema claro. ******/ .theme-fandomdesktop-light .mat-accordion .dialogue-table .mw-collapsible-toggle-default::after, .theme-fandomdesktop-light .mat-accordion .dialogue-table .mw-collapsible-toggle-collapsed::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224px%22%20fill%3D%22%233367d6%22%3E%3Cpath%20d%3D%22M0%200h24v24H0V0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M7.41%208.59L12%2013.17l4.59-4.58L18%2010l-6%206-6-6%201.41-1.41z%22%2F%3E%3C%2Fsvg%3E"); }

.theme-fandomdesktop-light .mat-accordion .dialogue-table .mw-collapsible-toggle-expanded::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224px%22%20fill%3D%22%233367d6%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M7.41%2015.41L12%2010.83l4.59%204.58L18%2014l-6-6-6%206z%22%2F%3E%3C%2Fsvg%3E"); }

/*** Share FAB. ***/ /**** FAB button positioning. ****/ .component-link-dropdown .wds-dropdown { border-radius: 50%; position: fixed; bottom: 40px; right: 40px; width: 56px; height: 56px; z-index: 1; }

/**** FAB styles. ****/ .component-link-dropdown .wds-dropdown__toggle { background-color: #3c4043; color: #9aa0a6; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 14px; width: inherit; height: inherit; }

/**** Dropdown with shadow - custom shadow. ****/ .component-link-dropdown .wds-has-shadow { box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%); }

/**** Dropdown styles. ****/ .component-link-dropdown .wds-dropdown__content { min-width: 180px; padding: 0; transform: translate(calc(-100% + 30px), -100%); padding-bottom: 12px; }

/**** Items' styles. ****/ .component-link-dropdown .wds-dropdown__item { align-items: center; cursor: pointer; display: flex; margin: 0 !important; position: relative; }

.component-link-dropdown .wds-dropdown__item p { line-height: inherit; }

/**** Making dropdown items cover the whole width of the menu. ****/ .component-link-dropdown .wds-dropdown__content .wds-list.wds-is-linked > li > a:not(.wds-button), .component-link-dropdown .wds-dropdown__content .wds-list.wds-is-linked > li > .no-link { width: 100%; }

/***** Removing text shadow/glow on hover on any of those elements. *****/ .component-link-dropdown .wds-dropdown__content .wds-list.wds-is-linked > li > a:not(.wds-button):is(:hover, :focus) { background-color: transparent; text-shadow: none; }

/***** Making interactive items behave as links. *****/ .component-link-dropdown .wds-dropdown__content .wds-list.wds-is-linked > .wds-dropdown__item:not(.not-interactive):is(:hover, :focus) { background-color: var(--wds-dropdown-linked-item-background-color); transition: background-color .3s; }

/***** Making all items have the same padding. *****/ .component-link-dropdown .wds-dropdown__content .wds-list.wds-is-linked > li > a:not(.wds-button), .component-link-dropdown .wds-list.wds-is-linked > li > .no-link { padding: 12px 8px; }

/***** Hidding bubble arrow. *****/ .component-link-dropdown .wds-dropdown:not(.wds-is-touch-device):not(.wds-is-not-hoverable):hover:not(.wds-no-chevron):after { display: none; }

/***** position:absolute allows the link-on-hover background to be full-width. *****/ .component-link-dropdown .wds-dropdown__item .list-icon { position: absolute; left: 8px; }

/***** Padding for list items which have an icon on it. *****/ .component-link-dropdown .wds-dropdown__content .wds-list.wds-is-linked > li > .list-icon ~ *, .component-link-dropdown .wds-dropdown__content .wds-list.wds-is-linked > li > .list-icon ~ a:not(.wds-button) { padding-left: calc((8px * 2) + 24px); }

/**** Dialog footer's border. ****/ border-image: linear-gradient(to right, #FFF0, var(--theme-accent-label-color), #FFF0) 47% 0% 1; }
 * 1) mw-customcollapsible-ShareDialog .wds-dialog__actions {

/*** Achievements collapsible buttons. ***/ .achievements-list { position: relative; }

.achievements-list:is(#pc-xbox-a-list, float: none;  position: absolute;  right: 0;  top: -40px; }
 * 1) hd-a-list,
 * 2) grimm-a-list,
 * 3) gm-a-list) .mw-collapsible-toggle {

.achievements-list#ps4-a-list .mw-collapsible-toggle { float: none; position: absolute; right: 0; top: -104px; }

/**** "Fixing" a small positioning issue with the first button. ****/ .achievements-list#pc-xbox-a-list .mw-collapsible-toggle-expanded { top: -49px; }

/*** Link to section. ***/ /**** Fixing new-line bug on tables. ****/ .mw-header-link { display: inline-block; float: none !important; }

.article-table .mw-headline { display: flex; }

/**** Button re-design. ****/ /***** Updating opacity when on hover. *****/
 * is(h1,

h2, h3, h4, h5, h6):hover .mw-header-link { opacity: .6 !important; }

/***** Hiding old image. *****/ .mw-header-link img { display: inline-block; visibility: hidden; }

/***** Useful for re-designing the button (see bellow). *****/ .mw-header-link a { filter: none; margin-inline-start: .5rem; position: relative; }

/***** Creating button element. ****/ .mw-header-link a::after { background: center no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23FFFFFF'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E"); content: ''; height: 24px; left: 0; position: absolute; top: 0; transition: filter .4s; width: 24px; }

/***** Light theme version. *****/ .theme-fandomdesktop-light .mw-header-link a::after { filter: invert(1); }

/***** Adding shadow when hovering the icon. *****/ .theme-fandomdesktop-dark .mw-headline .mw-header-link:is(:hover,
 * focus) a::after {

filter: drop-shadow(0 0 .25rem var(--theme-text-on-background)); opacity: 1; }

/****** Light theme version. ******/ .theme-fandomdesktop-light .mw-headline .mw-header-link:is(:hover,
 * focus) a::after {

filter: invert(1) drop-shadow(0 0 .25rem var(--theme-text-on-background)); opacity: 1; }

/*** Template:HK CP Header. ***/ .hk-cp-header { display: block; font-family: var(--theme-font-1); margin-block-start: 1em; text-align: center; width: 100%; }

/*** clip: rect(1px, 1px, 1px, 1px); overflow: hidden; position: absolute; }
 * TOC - Just like the "Jump to Content" button, it will be invisible unless
 * you TAB through any of its links.
 * toc:not(:focus-within) {
 * toc:not(:focus-within) {

/*** Removing custom list markers. ***/ list-style: none; }
 * 1) toc ul {

/*** "Snackbar" design for notifications. ***/ /**** Layout. ****/ .postedit-container, .wds-banner-notification__container { align-items: center; bottom: 32px; cursor: pointer; display: flex; font-size: initial; /*height: 48px;*/ justify-content: flex-start; left: 72px; margin: 8px; max-width: 672px; pointer-events: none; position: fixed; right: 0; top: unset; z-index: 5000; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

/**** Inner layout. ****/ .postedit-container .postedit, .wds-banner-notification { align-items: center; background-color: var(--theme-link-dynamic-color-2); border: 0; border-radius: 4px; box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12); color: var(--theme-text-primary-on-background); display: flex; left: unset; margin: 0; max-width: 672px; opacity: 1; padding: 0; position: relative; top: unset; transform: none; transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1); }

/**** Exclusive to notifications. ****/ /***** Removes the 'check' icon at the start of the notificaiton. *****/ .wds-banner-notification__icon { display: none; }

/***** Close button styling. *****/ .wds-banner-notification__close { border: 0; margin-inline-end: 8px; pointer-events: initial; }

/**** Exclusive 'Saved edit' notification styling. ****/ /***** Adds 'ripple' effect element. *****/ .postedit-container .postedit::before { background-color: var(--theme-text-on-background); border-radius: 50%; content: ''; height: 36px; opacity: 0; right: 9px; position: absolute; top: 6px; transition: opacity 75ms linear; width: 36px; }

/****** Adds 'ripple' interactivity effect on hover and focus/active. ******/ .postedit-container .postedit:hover::before { opacity: 0.08; }

.postedit-container .postedit:is(:focus, :active)::before { opacity: 0.24; }

/***** Adds and pseudo 'close' button element. *****/ .postedit-container .postedit::after { background: none; border-radius: 50%; content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18px' viewBox='0 0 24 24' width='18px' fill='%23fff'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E"); cursor: pointer; display: flex; margin: 0 8px; opacity: 1; padding: 8px; pointer-events: initial; height: 36px; width: 36px; position: relative; right: 0; top: 1px; }

/***** Removes checkmark icon. *****/ .postedit-icon-checkmark { background-image: none; }

.postedit-icon { padding: 0; line-height: 1; }

/***** Text styles. *****/ .postedit-content, .wds-banner-notification__text { border: 0; font: 400 0.875rem/1.25rem var(--theme-font-2); letter-spacing: 0.0178571429em; flex-grow: 1; line-height: 20px; padding: 14px 16px; }

/*** Introduction notification layout fix. ***/ display: flex; }
 * 1) localNotice {

margin-inline-start: 16px; }
 * 1) localNotice p {

.sitenotice::before { background-color: var(--theme-border-color); }

/**** Makes Hornet image smaller on the notification card. ****/ .notifications-placeholder :is(.article-media-placeholder, .thumbimage) { height: 150px; object-fit: contain; width: 120px; }

/*** Design announcement blog. ***/ /**** Modifying images to have rounded corners and be fluid-width. ****/ .blog-image { align-items: center; display: flex; justify-content: center; width: 100%; }

.blog-image :is(p, .thumb) { align-items: inherit; display: inherit; flex-direction: column; justify-content: inherit; margin: 0; width: inherit !important; }

.blog-image img { border-radius: 32px; object-fit: contain; width: inherit; }

.blog-image .image { width: 100%; }

.blog-image .caption { font: 400 .75rem/1.25rem var(--theme-font-2); letter-spacing: .0333333333em; }

/**** Rail images (the ones displayed at the sides). ****/ .blog-rail-image { width: inherit; height: 100%; }

/**** Hero image. ****/ .hero-image { aspect-ratio: 16/9; margin: 72px auto; width: 100%; max-width: 1440px; }

.blog-image .thumbimage { height: auto; }

/**** Custom slideshows. ****/ /***** Making the slideshow almost full-width. *****/ .blog-slideshow { width: 100%; }

.blog-slideshow .wikia-slideshow-wrapper { width: inherit !important; }

.blog-slideshow .wikia-slideshow-images { aspect-ratio: 16/9; width: 100% !important; height: auto !important; }

.blog-slideshow .thumbimage { width: auto !important; height: 100% !important; }

/* 9. User preferences. */ /** Disabling all motions if the user's browser/OS is configured to do so. **/ @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-delay: -1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; background-attachment: initial !important; scroll-behavior: auto !important; transition-duration: 0s !important; transition-delay: 0s !important; } }