MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
Content deleted Content added
imported>Mentin123 No edit summary |
imported>Gabonnie [IPE-NEXT] Quick edit |
||
| (48 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
/* |
|||
/* IMPORTS */ |
|||
* Common.css # Central loader [[MediaWiki:Common.css]] |
|||
@import url("/load.php?mode=articles&only=styles&articles=u:dev:MediaWiki:BalancedComments.css|u:dev:MediaWiki:BalancedCategories.css|u:dev:MediaWiki:BalancedSlider.css|u:dev:MediaWiki:BalancedBloglists.css|u:dev:MediaWiki:MinifiedLeftTabs/code.css|MediaWiki:Colors.css|MediaWiki:SlantedToggles.css|MediaWiki:UpdateLog.css|MediaWiki:MainPage.css|u:alterego:MediaWiki:EgoIcons.css"); |
|||
* ├─ Shared.css # Styling on all platforms [[MediaWiki:Shared.css]] |
|||
* │ ├─ BalancedComments.css # Comment styling [[w:c:dev:MediaWiki:BalancedComments.css]] |
|||
@import url('https://fonts.googleapis.com/css?family=Raleway|Source Sans Pro|Open Sans|Roboto'); |
|||
* │ ├─ Colors.css # Variables (mostly colors) [[MediaWiki:Colors.css]] |
|||
@font-face { |
|||
* │ ├─ EgoIcons.css # Egostrap Icons library [[w:c:alterego:MediaWiki:EgoIcons.css]] |
|||
font-family: 'Uni Sans Heavy'; |
|||
* │ ├─ Tooltip.css # For [[Template:Tooltip]] [[MediaWiki:Tooltip.css]] |
|||
src: |
|||
* │ └─ Utils.css # CSS utilities [[MediaWiki:Utils.css]] |
|||
url('https://static.wikia.nocookie.net/alter-ego/images/3/31/Uni_Sans_Heavy.woff2') format('woff2'), |
|||
* ├─ Fandomdesktop.css # Desktop only styling [[MediaWiki:Fandomdesktop.css]] |
|||
url('https://static.wikia.nocookie.net/abd-stand-archive/images/d/d6/Uni_Sans_Heavy.ttf') format('truetype'); |
|||
* │ ├─ BalancedBloglists.css # Bloglist styling [[w:c:dev:MediaWiki:BalancedBloglists.css]] |
|||
} |
|||
* │ ├─ BalancedCategories.css # Category styling [[w:c:dev:MediaWiki:BalancedCategories.css]] |
|||
* │ ├─ BalancedSlider.css # Slider styling [[w:c:dev:MediaWiki:BalancedSlider.css]] |
|||
/* BASIC CHANGES */ |
|||
* │ ├─ MainPage.css # Main page layout [[MediaWiki:MainPage.css]] |
|||
/* Fonts */ |
|||
* │ ├─ MinifiedLeftTabs.css # Minified Left Tabs [[w:c:dev:MediaWiki:MinifiedLeftTabs.css]] |
|||
body, .category-gallery-item .snippet .text, a.wikia-button, .wikia-single-button a, .wikia-menu-button, input, .button, button, select { |
|||
* │ ├─ SlantedToggles.css # Slanted toggles UI [[MediaWiki:SlantedToggles.css]] |
|||
font-family: Roboto !important; |
|||
* │ ├─ UpdateLog.css # Update log styling [[MediaWiki:UpdateLog.css]] |
|||
} |
|||
* │ └─ UpgradeNarrators.css # Upgrade box images [[MediaWiki:UpgradeNarrators.css]] |
|||
* │─ FandomMobile.css # Mobile only styling [[MediaWiki:FandomMobile.css]] |
|||
.unisans { |
|||
* │ ├─ MobileMainPage.css # Mobile main page layout [[MediaWiki:MobileMainPage.css]] |
|||
font-family: Uni Sans Heavy, sans-serif; |
|||
* │ ├─ MobileSlantedToggles.css # Mobile slanted toggles [[MediaWiki:MobileSlantedToggles.css]] |
|||
} |
|||
* │ └─ MobileUpdateLog.css # Mobile update log [[MediaWiki:MobileUpdateLog.css]] |
|||
* └─ Group-autoconfirmed.css # Autoconfirmed users only [[MediaWiki:Group-autoconfirmed.css]] |
|||
.mainheader, .mainpageheader, .tableheader, .upgradeheader, .galleryheader, .sectionheader { |
|||
*/ |
|||
font-family: Source Sans Pro, Raleway, Rubik, sans-serif; |
|||
@import "/load.php?articles=MediaWiki:Shared.css&only=styles&mode=articles"; |
|||
} |
|||
h1, h2, h3, h4, |
|||
.fandom-community-header__community-name, |
|||
.community-page-header-welcome-message, |
|||
.community-page-module-section-title, |
|||
.community-page-todo-list-module-header, |
|||
.community-page-cards-module-header { |
|||
font-family: Uni Sans Heavy !important; |
|||
font-weight: normal !important; |
|||
} |
|||
/* list styles */ |
|||
.page-content :is(ul ul ul, ol ul ul, ul ol ul, ol ol ul), #content :is(ul ul ul, ol ul ul, ul ol ul, ol ol ul), #Wall.Thread .message .msg-body :is(ul ul ul, ol ul ul, ul ol ul, ol ol ul) { |
|||
list-style-type: square; |
|||
} |
|||
.page-content :is(ul ul, ol ul), #Wall.Thread .message .msg-body :is(ul ul, ol ul) { |
|||
list-style-type: circle; |
|||
} |
|||
.toc ul { |
|||
list-style: none !important; |
|||
} |
|||
/* Collapsible colors */ |
|||
.theme-fandomdesktop-light .navbox-header .mw-collapsible-toggle .mw-collapsible-text { |
|||
--theme-link-color: #8AC5F8; |
|||
--theme-link-color--hover: #97CEFC; |
|||
} |
|||
.theme-fandomdesktop-light .mw-collapsible:has(.mw-collapsible-toggle + .sectionheader) .mw-collapsible-toggle { |
|||
--theme-link-color: #8AC5F8; |
|||
--theme-link-color--hover: #97CEFC; |
|||
--theme-page-text-color: #FFF; |
|||
} |
|||
/* hr */ |
|||
hr { |
|||
border: 0; |
|||
height: 2px; |
|||
background: linear-gradient(to right, #0000, black, #0000); |
|||
} |
|||
.theme-fandomdesktop-dark hr { |
|||
background: linear-gradient(to right, #FFF0, white, #FFF0); |
|||
} |
|||
/* INFOBOX */ |
|||
:root { |
|||
--InfoboxBorder: rgba(var(--theme-accent-color--rgb),0.5); |
|||
} |
|||
.portable-infobox hr { |
|||
background: var(--InfoboxBorder); |
|||
} |
|||
/* General Styles */ |
|||
.portable-infobox { |
|||
width: 300px; |
|||
border: 0; |
|||
border-radius: 0; |
|||
--pi-background: var(--BasicBackground); |
|||
--pi-secondary-background: var(--WikiAccentPrimary); |
|||
border-radius: 25px 0 25px; |
|||
} |
|||
/* Title */ |
|||
.portable-infobox .pi-title { |
|||
position: relative; |
|||
border-top-left-radius: 25px; |
|||
font-family: Uni Sans Heavy; |
|||
font-weight: normal |
|||
} |
|||
.pi-title > b { |
|||
font-weight: normal |
|||
} |
|||
/* Audio width */ |
|||
.portable-infobox audio { |
|||
width: 300px !important; |
|||
} |
|||
/* Infobox item spacing */ |
|||
.portable-infobox .pi-item-spacing { |
|||
padding: 8px 10px; |
|||
} |
|||
/* Centered audio */ |
|||
.pi-item:has(.thumb.mw-halign-center) { |
|||
justify-content: center; |
|||
} |
|||
/* Infobox tabs */ |
|||
.portable-infobox .wds-tabs__wrapper:has(.wds-tabs__tab:only-child) { |
|||
display: none; |
|||
} |
|||
.portable-infobox .wds-tab__content > .pi-data:first-child { |
|||
border-top-width: 0; |
|||
} |
|||
:is(.portable-infobox .pi-image-collection.wds-tabber, .portable-infobox .pi-panel.wds-tabber) .wds-tabs__wrapper .wds-tabs { |
|||
justify-content: safe center; |
|||
} |
|||
.portable-infobox :is(.pi-image-collection.wds-tabber, .pi-panel.wds-tabber) > .wds-tabs__wrapper { |
|||
padding: 6px 8px; |
|||
background: var(--WikiAccentSecondary); |
|||
font-family: Source Sans Pro, Raleway, Roboto, sans-serif; |
|||
} |
|||
.portable-infobox :is(.pi-image-collection.wds-tabber, .pi-panel.wds-tabber) > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab { |
|||
color: #FFF; |
|||
transition: .75s; |
|||
} |
|||
.portable-infobox :is(.wds-tabs__arrow-right, .wds-tabs__arrow-left) .wds-icon { |
|||
fill: white |
|||
} |
|||
.portable-infobox :is(.pi-image-collection.wds-tabber, .pi-panel.wds-tabber) > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab:hover { |
|||
background-color: color-mix(in oklch, var(--WikiAccentTertiary), transparent 75%); |
|||
transition: .5s; |
|||
} |
|||
.portable-infobox :is(.pi-image-collection.wds-tabber, .pi-panel.wds-tabber) > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab.wds-is-current { |
|||
background-color: var(--WikiAccentTertiary); |
|||
box-shadow: none; |
|||
transition: .75s; |
|||
} |
|||
.portable-infobox .pi-panel.wds-tabber .pi-image-collection.wds-tabber > .wds-tabs__wrapper { |
|||
padding-top: 0; |
|||
} |
|||
.pi-panel:has(.pi-image-thumbnail) + .pi-item { |
|||
border-top-width: 0; |
|||
} |
|||
/* RIGHT RAIL MODS */ |
|||
.right-rail-wrapper .rail-module { |
|||
border: 8px solid transparent; |
|||
border-radius: 6px; |
|||
transition: 0.2s ease; |
|||
transition-property: border, background; |
|||
} |
|||
.right-rail-wrapper > :last-child > .rail-module:last-child { |
|||
border-bottom: 8px solid transparent; |
|||
} |
|||
.WikiaRail .rail-module:hover { |
|||
border-color: rgba(211, 211, 211, 0.2) !important; |
|||
background: rgba(211, 211, 211, 0.5); |
|||
} |
|||
.theme-fandomdesktop-dark .WikiaRail .rail-module:hover { |
|||
border-color: color-mix(in hsl, var(--BasicBackgroundDark), transparent 0%) !important; |
|||
background: color-mix(in hsl, var(--BasicBackgroundDark), transparent 10%); |
|||
} |
|||
/* Medal pop up */ |
|||
.theme-fandomdesktop-dark .badgetooltiparrow { |
|||
border-color: var(--theme-page-background-color) !important; |
|||
border-left-color: transparent !important; |
|||
border-right-color: transparent !important; |
|||
} |
|||
.theme-fandomdesktop-dark .badgetooltipwindow { |
|||
color: var(--theme-page-text-color) !important; |
|||
border-color: var(--theme-page-background-color) !important; |
|||
background: var(--BasicBackground) !important; |
|||
} |
|||
.theme-fandomdesktop-dark .badgetooltipwindow hr { |
|||
background: linear-gradient(to right, #0000, black, #0000); |
|||
} |
|||
/* Fandom widget colors */ |
|||
.wds-widget-frame__header .wds-widget-frame__title { |
|||
--wds-midlight-color: rgba(var(--theme-link-color--rgb),0.1); |
|||
background-image: linear-gradient(to top,var(--wds-midlight-color,rgba(var(--theme-accent-color--rgb),.15)) 54%,#0000 54%,#0000 100%); |
|||
margin-right: -3px; |
|||
padding-right: 3px; |
|||
} |
|||
.right-rail-wrapper { |
|||
--widget-link-color--hover: var(--theme-link-color--hover); |
|||
--widget-link-color: var(--theme-link-color); |
|||
--fandom-global-nav-panel-background-color: var(--BlueThemePrimary); |
|||
--widget-border-color--light: var(--BlueThemePrimary); |
|||
} |
|||
/* NAVIGATIONAL HEADERS */ |
|||
.mainheader { |
|||
font-size: 40px; |
|||
} |
|||
.mainpageheader { |
|||
font-size: 22px; |
|||
text-align: center; |
|||
} |
|||
.tableheader { |
|||
font-size: 22px; |
|||
color: #FFF; |
|||
background: var(--PrimaryColour); |
|||
border-radius: 25px 0; |
|||
line-height: 1.5; |
|||
} |
|||
.upgradeheader { |
|||
font-size: 18px; |
|||
} |
|||
.galleryheader { |
|||
font-size: 20px; |
|||
} |
|||
.sectionheader { |
|||
font-size: 20px; |
|||
text-align: center; |
|||
padding: 5px; |
|||
color: var(--TextColour); |
|||
background: var(--PrimaryColour); |
|||
border-top-left-radius: 25px; |
|||
} |
|||
.mw-collapsible-toggle + .sectionheader { |
|||
border-bottom-right-radius: 25px; |
|||
} |
|||
.mw-collapsible-toggle-expanded + .sectionheader { |
|||
border-bottom-right-radius: 0; |
|||
} |
|||
/* NAVBOX, ABILITY & UPGRADE */ |
|||
/* Angled NavBox */ |
|||
.anglednavbox { |
|||
background: var(--PrimaryColour); |
|||
color: #FFF; |
|||
border-top-left-radius: 25px; |
|||
} |
|||
/* Navbox */ |
|||
.tds-navbox { |
|||
width: 100%; |
|||
text-align: center; |
|||
} |
|||
.navbox-header { |
|||
padding: 4px; |
|||
background-color: var(--PrimaryColour); |
|||
text-align: center; |
|||
color: white; |
|||
} |
|||
.navbox-header .mw-collapsible-toggle { |
|||
--theme-page-text-color: white; |
|||
} |
|||
.navbox-header { |
|||
position: relative; |
|||
transition: .4s ease; |
|||
} |
|||
.navbox-header:has(.mw-collapsible-toggle):hover { |
|||
background: var(--PrimaryColourHover); |
|||
} |
|||
.navbox-header button.mw-collapsible-toggle { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
@media only screen and (max-width:1024px) { |
|||
table.mw-collapsible:has(.navbox-header):last-child { |
|||
margin-bottom: 1px; |
|||
} |
|||
} |
|||
.navbox-header .mw-collapsible-toggle .mw-collapsible-text { |
|||
float: right; |
|||
margin-right: 5px; |
|||
font-size: 20px; |
|||
transition: .4s ease; |
|||
text-decoration: none !important; |
|||
} |
|||
.navbox-header:hover .mw-collapsible-toggle .mw-collapsible-text { |
|||
color: var(--theme-link-color--hover) |
|||
} |
|||
.navbox-header .mw-collapsible-toggle-default::before, |
|||
.navbox-header .mw-collapsible-toggle-default::after { |
|||
content: ''; |
|||
} |
|||
.navbox-label-wide, |
|||
.navbox-label-narrow { |
|||
padding: 4px; |
|||
background-color: var(--PrimaryColour); |
|||
color: white; |
|||
} |
|||
:is(.navbox-label-wide, .navbox-label-narrow, .navbox-header) a { |
|||
color: white; |
|||
} |
|||
.navbox-label-wide { |
|||
width: 20%; |
|||
} |
|||
.navbox-label-narrow { |
|||
width: 15%; |
|||
} |
|||
.navbox-data { |
|||
text-align: left; |
|||
color: black |
|||
} |
|||
.theme-fandomdesktop-dark .navbox-data { |
|||
color: white; |
|||
} |
|||
/* Upgrades */ |
|||
.upgrade-header { |
|||
border-top-left-radius: 25px; |
|||
background: var(--PrimaryColour); |
|||
border-bottom: 2px solid var(--BlueThemeSecondary); |
|||
display: flex; |
|||
align-items: center; |
|||
padding: .75em; |
|||
text-align: center; |
|||
position: relative; |
|||
z-index: 2; |
|||
} |
|||
.upgrade-header-inner { |
|||
flex: 1 1 auto; |
|||
line-height: 1; |
|||
} |
|||
.upgrade-title { |
|||
font-size: 1.5em; |
|||
color: white; /* idk if there's any theme that will have issues with this but for now it seems fine in both dark and light mode */ |
|||
margin-left: .25em; |
|||
} |
|||
.upgrade-subtitle { |
|||
font-size: .625em; |
|||
color: white; |
|||
margin-top: .35em; |
|||
font-family: Roboto; |
|||
} |
|||
.upgrade-subtitle:empty { |
|||
display: none; |
|||
} |
|||
.upgrade-body { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
padding: .5em; |
|||
background-color: var(--BasicBackground); |
|||
position: relative; |
|||
border-radius: 0 0 25px 0; |
|||
--narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/f/fe/VoidCasterSpellCast.png/revision/latest?cb=20250301142738); |
|||
&::after { |
|||
content: ''; |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 0; |
|||
width: min(256px,13.5rem); |
|||
aspect-ratio: 1; |
|||
background-image: var(--narrate); |
|||
background-size: contain; |
|||
background-repeat: no-repeat; |
|||
background-position: bottom right; |
|||
opacity: .35; |
|||
pointer-events: none; |
|||
z-index: 1; |
|||
border-bottom-right-radius: 25px; |
|||
} |
|||
&.narrator-150::after { |
|||
width: min(256px,10.5rem); |
|||
} |
|||
&.jaxe::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/7/72/JaxeAggressive.png/revision/latest?cb=20211211165943); width: min(256px,12.5rem) } |
|||
&.ajstriker::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/4/42/AJConcern.png/revision/latest?cb=20210508144217) } |
|||
&.necromancer::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/f/f1/NecromancerLevel2.png) } |
|||
&.executioner::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/5/5b/EclipseExecutionerStoreRender.png) } |
|||
&.assassin::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/e/e0/AssassinUpgrade4.png) } |
|||
&.cowboy::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/3/3f/CowboyAdRender.png) } |
|||
&.fireworktech::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/5/54/FireworkTechnicianLevel1.png) } |
|||
&.narrator::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/d/d0/NarratorRender.png) } |
|||
&.group::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/a/a1/MatchmakingRender.png) } |
|||
&.vigilanteelectroshocker::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/7/72/VigilanteElectroshockerRender.png) } |
|||
&.riftwalker::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/2/2f/RiftWalkerEasyRender.png) } |
|||
&.spotlighttech::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/d/d5/SpotlightTechLevel1.png) } |
|||
&.umbra::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/7/7a/UmbraTaunt.png) } |
|||
&.medic::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/4/41/MedicUpg3.png) } |
|||
&.commando::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/d/d5/CommandoLevel2.png) } |
|||
&.toxicgunner::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/3/38/KimGunner.png) } |
|||
&.hacker::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/d/d8/HackerUpgrade3.png) } |
|||
&.freezer::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/0/06/Freezer_Upgrade_3.png) } |
|||
&.rocketeer::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/5/56/RocketeerLevel3.png) } |
|||
&.swarmer::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/4/4d/SwarmerReworkUpgrade3.png) } |
|||
&.harvester::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/c/c5/HarvesterUpgrade3.png) } |
|||
&.cryomancer::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/c/c6/CryomancerLevel3.png) } |
|||
&.biologist::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/f/f5/BiologistUpgradeIcon2.png) } |
|||
&.minigunner::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/a/ab/MiniLevel4.png) } |
|||
&.eclipsecommander::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/a/aa/Eclipse_Commander.png) } |
|||
&.bloxycommander::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/0/08/BloxyRender.png) } |
|||
&.piratewarden::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/a/a8/PirateWardenRender.png) } |
|||
&.nullcommander::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/1/1d/NullCommanderHardMatchmakingRender.png) } |
|||
&.brute::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/a/aa/MatchmakingBruteRender.png) } |
|||
&.gravedigger::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/1/11/MatchmakingGraveDiggerRender.png) } |
|||
&.patientzero::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/1/1b/PatientZeroIntermediateMatchmakingRender.png) } |
|||
&.moltenwarlord::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/c/cb/MoltenWardlordMatchmakingRender.png) } |
|||
&.fallenking::after { --narrate: url(https://static.wikia.nocookie.net/tower-defense-sim/images/3/3f/MatchmakingFallenKingRender.png) } |
|||
&.hide::after { --narrate: } |
|||
} |
|||
.upgrade-body-has-image { |
|||
gap: 0.5em; |
|||
} |
|||
.upgrade-info-wrapper { |
|||
flex: 1 1 0%; |
|||
display: flex; |
|||
z-index: 2; |
|||
} |
|||
.upgrade-info-content { |
|||
width: 100%; |
|||
margin-bottom: 0; |
|||
background: var(--BlueThemePrimary); |
|||
padding: 0.5em; |
|||
border: 3px solid var(--BlueThemeSecondary); |
|||
border-radius: 25px 0; |
|||
text-align: center; |
|||
align-content: center; |
|||
.mw-collapsible-toggle { |
|||
line-height: 1.35; |
|||
} |
|||
p, span { |
|||
font-size: .85em; |
|||
} |
|||
p { |
|||
margin-top: 0; |
|||
margin-bottom: 0; |
|||
+ p { |
|||
margin-top: 0; |
|||
} |
|||
} |
|||
} |
|||
.upgrade-image-wrapper { |
|||
border: 3px solid var(--BlueThemeSecondary); |
|||
overflow: hidden; |
|||
border-radius: 1em; |
|||
background: var(--BlueThemePrimary); |
|||
height: fit-content; |
|||
z-index: 2; |
|||
} |
|||
/* Styles for things that use "box" */ |
|||
.box-content.DYKbox { |
|||
padding: 10px; |
|||
line-height: 1.25; |
|||
} |
|||
.DYKbox { |
|||
z-index: 3; |
|||
} |
|||
.DYKbox-table { |
|||
position: relative; |
|||
} |
|||
.DYKbox-image { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
opacity: 0.2; |
|||
z-index: 2; |
|||
pointer-events: none; |
|||
mask-image: linear-gradient(to top, transparent 13%, black); |
|||
} |
|||
/* Boxes */ |
|||
div.box { |
|||
display: flow-root; |
|||
} |
|||
.box hr { |
|||
background: var(--PrimaryColour); |
|||
} |
|||
.angled-header { |
|||
line-height: 30px !important; |
|||
text-align: center; |
|||
font: 22px source sans pro; |
|||
color: #FFF; |
|||
background: var(--PrimaryColour); |
|||
border-top-left-radius: 25px; |
|||
padding: 1px; |
|||
} |
|||
.box-content { |
|||
color: var(--theme-page-text-color); |
|||
text-align: center; |
|||
padding: 1px; |
|||
border: 4px ridge var(--PrimaryColour); |
|||
border-right-style: groove; |
|||
border-bottom-style: groove; |
|||
} |
|||
.box-list, .box-ability { |
|||
width: 100%; |
|||
max-width: 700px; |
|||
margin: 0 auto; |
|||
padding: 5px; |
|||
line-height: 20px; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
} |
|||
.box-list > div { |
|||
width: 50%; |
|||
padding: 5px; |
|||
} |
|||
.box-list > div:nth-child(odd):last-child { |
|||
width: 100%; |
|||
} |
|||
.box-ability div { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 5px; |
|||
} |
|||
.box-ability > div:nth-child(odd) { |
|||
width: 125px; |
|||
} |
|||
.box-ability > div:nth-child(even) { |
|||
width: calc(100% - 125px); |
|||
} |
|||
/* TABLE OF CONTENTS */ |
|||
.toc { |
|||
border: 2px solid var(--BlueThemeSecondary); |
|||
border-radius: 25px 0 25px; |
|||
margin: 10px auto 10px 0; |
|||
} |
|||
.sticky-toc.toc { |
|||
border: 2px solid var(--BlueThemeSecondary); |
|||
background: var(--BasicBackground); |
|||
} |
|||
.sticky-toc.toc .toctitle .wds-icon { |
|||
fill: var(--BlueThemeSecondary); |
|||
opacity: 1; |
|||
} |
|||
.toc .toctitle { |
|||
background: var(--BlueThemePrimary); |
|||
border-bottom: 2px solid var(--BlueThemeSecondary); |
|||
border-top-left-radius: 23px; |
|||
} |
|||
.toc .toctogglecheckbox:checked + .toctitle { |
|||
border-bottom-right-radius: 23px; |
|||
} |
|||
.sticky-toc .toctitle { |
|||
border-top-left-radius: 0; |
|||
} |
|||
.toctogglecheckbox:checked~.toctitle { |
|||
border-bottom: none; |
|||
} |
|||
.toc ul, .sticky-toc.toc > ul:before, .sticky-toc.toc > ul:after { |
|||
background-color: var(--BasicBackground); |
|||
} |
|||
.toc > ul { |
|||
border-bottom-right-radius: 23px; |
|||
} |
|||
.toc ul li a:hover { |
|||
background-color:var(--BasicBackgroundDark) |
|||
} |
|||
.toctogglecheckbox:checked + .toctitle .toctogglelabel:after { |
|||
content:'▼' |
|||
} |
|||
.toctogglecheckbox:not(:checked) + .toctitle .toctogglelabel:after { |
|||
content:'▲' |
|||
} |
|||
.toctogglelabel { |
|||
background: var(--BlueThemeSecondary); |
|||
padding: 3px 4px; |
|||
border-radius: 5px; |
|||
color: white !important; |
|||
transition: .3s !important; |
|||
} |
|||
.toctogglelabel:hover { |
|||
background: var(--BlueThemeSecondaryHover); |
|||
} |
|||
.toctogglespan::before, |
|||
.toctogglespan::after { |
|||
content: ""; |
|||
} |
|||
.toctogglecheckbox:focus + .toctitle .toctogglelabel { |
|||
text-decoration: none; |
|||
outline: none; |
|||
} |
|||
/* right aligned table of contents */ |
|||
.right-toc #toc { |
|||
float: right; |
|||
margin-left: 12px; |
|||
} |
|||
/* scrollable table of contents */ |
|||
.scroll-toc > #toc > ul { |
|||
max-height: var(--toc-max-height); |
|||
overflow: auto; |
|||
} |
|||
.scroll-toc .toc, .scroll-toc .toc .toctogglecheckbox:checked + .toctitle { |
|||
border-bottom-right-radius: 0; |
|||
} |
|||
/* sticky table of contents only */ |
|||
.shadow-toc .toc { |
|||
display: none; |
|||
} |
|||
/* CHALLENGE MAP BOXES */ |
|||
.challenge-box { |
|||
display: flex; |
|||
width: 750px; |
|||
margin: 0 auto; |
|||
align-items: center; |
|||
} |
|||
.challenge-box a { |
|||
color: #FFF; |
|||
} |
|||
.challenge-info { |
|||
width: 500px; |
|||
background: var(--BasicBackground); |
|||
border-radius: 25px 10px 25px; |
|||
margin: 0 auto; |
|||
} |
|||
.challenge-description { |
|||
padding: 5px; |
|||
text-align: center; |
|||
} |
|||
.challenge-header { |
|||
padding: 2px 4px; |
|||
font-size: 22px; |
|||
background: var(--PrimaryColour); |
|||
text-align: center; |
|||
color: #FFF; |
|||
border-top-left-radius: 25px; |
|||
} |
|||
.reward-row { |
|||
display: flex; |
|||
justify-content: center; |
|||
flex-wrap: wrap; |
|||
} |
|||
.reward-box { |
|||
display: flex; |
|||
align-items: flex-end; |
|||
justify-content: center; |
|||
position: relative; |
|||
width: 100px; |
|||
height: 100px; |
|||
margin: 5px; |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
background: var(--BasicBackgroundDark); |
|||
border-radius: 15px 5px 15px;; |
|||
z-index: 1; |
|||
text-shadow: 0 0 1.5px black, 0 0 1.5px black, 0 0 1.5px black, 0 0 1.5px black, 0 0 1.5px black; |
|||
color: #FFF; |
|||
} |
|||
.reward-box a { |
|||
color: #FFF; |
|||
} |
|||
.reward-box img { |
|||
position: absolute; |
|||
left: 5px; |
|||
top: 5px; |
|||
z-index: -1; |
|||
} |
|||
.season-box .reward-row.text-row .reward-box, .playtime-box .reward-row.text-row .reward-box, .reward-row.text-row .reward-box { |
|||
height: auto; |
|||
display: grid; |
|||
align-items: center; |
|||
padding: 5px; |
|||
} |
|||
.reward-row.text-row img { |
|||
position: initial |
|||
} |
|||
.challenge-map { |
|||
margin: auto; |
|||
} |
|||
.challenge-map img { |
|||
border-radius: 25px; |
|||
} |
|||
@media only screen and (max-width:876px) { |
|||
.challenge-box { |
|||
flex-direction: column-reverse; |
|||
width: 500px; |
|||
} |
|||
.challenge-info { |
|||
margin-top: 10px; |
|||
} |
|||
} |
|||
/* INFORMATION BOXES */ |
|||
.information-row { |
|||
display: flex; |
|||
} |
|||
.row-image { |
|||
display: flex; |
|||
align-items: center; |
|||
background: var(--BasicBackgroundDark); |
|||
border-radius: 15px 5px 15px; |
|||
margin: 5px; |
|||
} |
|||
.information-box .reward-box { |
|||
width: 125px; |
|||
height: 125px; |
|||
background: transparent; |
|||
margin: 0; |
|||
} |
|||
.row-info { |
|||
width: calc(100% - 135px); |
|||
margin: 5px; |
|||
font-size: 16px; |
|||
background: var(--BasicBackgroundDark); |
|||
border-radius: 15px 5px 15px; |
|||
} |
|||
.info-box-text { |
|||
height: 125px; |
|||
overflow: auto; |
|||
border-radius: 15px 5px 15px; |
|||
} |
|||
/* ROBLOX CONTAINERS */ |
|||
.roblox-row { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: center; |
|||
} |
|||
.roblox-box { |
|||
margin: 2px 8px; |
|||
width: 175px; |
|||
} |
|||
.roblox-image { |
|||
background: var(--BasicBackground); |
|||
width: 175px; |
|||
border-radius: 8px; |
|||
} |
|||
.roblox-image img { |
|||
border-radius: 8px; |
|||
} |
|||
.roblox-info { |
|||
text-align: center; |
|||
width: 175px; |
|||
font-weight: bold; |
|||
} |
|||
/* SCROLLBOX */ |
|||
.desktop-scroll-box, .scroll-box { |
|||
overflow: auto; |
|||
width: 100%; |
|||
height: 400px; |
|||
border: 1px solid var(--BasicBackgroundDark); |
|||
padding: 0.5em; |
|||
margin: 3px 0; |
|||
scrollbar-width: thin; |
|||
resize: vertical; |
|||
} |
|||
:is(.scroll-box, .desktop-scroll-box) h3 { |
|||
margin-top: 0; |
|||
} |
|||
/* TABLES */ |
|||
/* Styles for the mode debut templates */ |
|||
.succession-table { |
|||
width: 90%; |
|||
max-width: 950px; |
|||
text-align: center; |
|||
color: var(--theme-page-text-color); |
|||
margin: 0 auto; |
|||
border-width: 8px 1px 1px 1px; |
|||
border-style: solid; |
|||
border-collapse: collapse; |
|||
} |
|||
.succession-table.no-top-border { |
|||
border-top-width: 1px; |
|||
} |
|||
.succession-table :is(th, td) { |
|||
padding: 5px; |
|||
text-align: center; |
|||
width: 33%; |
|||
border: 1px solid var(--theme-border-color); |
|||
} |
|||
.succession-table th { |
|||
padding: 8px; |
|||
background-color: var(--theme-page-background-color--secondary); |
|||
} |
|||
.debut-big { |
|||
font-size: 20px; |
|||
} |
|||
.debut-small { |
|||
font-size: 12px; |
|||
} |
|||
/* Wiki themed table */ |
|||
.tds-table { |
|||
border: 2px solid color-mix(in hsl, var(--PrimaryColour), white 20%); |
|||
border-collapse: collapse; |
|||
} |
|||
.tds-table th { |
|||
background: var(--PrimaryColour); |
|||
color: white; |
|||
} |
|||
.tds-table :is(th, td) { |
|||
border: 2px solid color-mix(in hsl, var(--PrimaryColour), white 20%); |
|||
padding: 5px; |
|||
} |
|||
/* wikitable styling */ |
|||
.wikitable, .succession-table { |
|||
--theme-border-color: color-mix(in hsl, var(--BlueThemePrimary), black 35%); |
|||
--theme-page-background-color--secondary: var(--BlueThemePrimary); |
|||
--theme-page-background-color: transparent; |
|||
} |
|||
.theme-fandomdesktop-dark :is(.wikitable, .succession-table) { |
|||
--theme-border-color: var(--BlueThemeSecondary); |
|||
--theme-page-background-color--secondary: var(--BlueThemePrimary); |
|||
} |
|||
/* article-table and other similar table color styling */ |
|||
.article-table, .gallery-table, .gallery-table-title { |
|||
background: color-mix(in oklch, var(--PrimaryColour), transparent 95%); |
|||
--theme-border-color: color-mix(in oklch, var(--PrimaryColour), transparent 65%) !important; |
|||
} |
|||
:is(.article-table, .gallery-table, .gallery-table-title) th { |
|||
background: color-mix(in oklch, var(--PrimaryColour), transparent 75%); |
|||
} |
|||
/* Gallery table */ |
|||
table:is(.gallery-table, .gallery-table-title) { |
|||
border-collapse: collapse; |
|||
border: 1px solid var(--theme-border-color); |
|||
text-align: center; |
|||
} |
|||
table.gallery-table, .table-wide-inner:has(.gallery-table) { |
|||
margin: 0 auto; |
|||
width: 95%; |
|||
} |
|||
.table-wide:has(.gallery-table):before { |
|||
right: 2.5%; |
|||
} |
|||
.overflowbugytable.gallery-table:last-of-type { |
|||
margin: 0 auto 1em; |
|||
} |
|||
table.gallery-table-title { |
|||
margin: 1em auto; |
|||
width: 200px; |
|||
} |
|||
.gallery-table :is(th, td), .gallery-table-title th { |
|||
border: 1px solid var(--theme-border-color); |
|||
padding: 5px; |
|||
} |
|||
/* Skin gallery hr */ |
|||
hr.gallery-hr { |
|||
background: linear-gradient(to right,#0000, color-mix(in oklch, var(--PrimaryColour), transparent 65%) , #0000); |
|||
} |
|||
/* Table utilities */ |
|||
.stats-table { |
|||
margin: 1em auto; |
|||
text-align: center; |
|||
width: max-content; |
|||
} |
|||
.stats-table :is(td, th) { |
|||
padding: 5px 15px !important; |
|||
} |
|||
.pad-5 :is(td, th), |
|||
.pad-td-5 td, |
|||
.pad-th-5 th { |
|||
padding: 5px !important; |
|||
} |
|||
.pad-10 :is(td, th), |
|||
.pad-td-10 td, |
|||
.pad-th-10 th { |
|||
padding: 10px !important; |
|||
} |
|||
.overflow-box, .overflowbugy { |
|||
max-width: 100%; |
|||
overflow: auto; |
|||
} |
|||
/* Table Yes/No/Neutral */ |
|||
.yes-table { |
|||
background: green; |
|||
color: #FFF; |
|||
} |
|||
.no-table { |
|||
background: #D60000; |
|||
color: #FFF; |
|||
} |
|||
.neutral-table { |
|||
background: #F09B00; |
|||
color: #FFF; |
|||
} |
|||
/* Link colors */ |
|||
:is(.yes-table, .neutral-table, .no-table) a { |
|||
color: var(--WikiLinkDark); |
|||
} |
|||
:is(.yes-table, .neutral-table, .no-table) a:hover { |
|||
color: var(--WikiLinkDarkHover); |
|||
} |
|||
/* Border collapse */ |
|||
.empty-table, .light-table { |
|||
border-collapse: collapse; |
|||
} |
|||
/* TOP PAGE TEMPLATES */ |
|||
/* Tabs styles */ |
|||
.tds-tab-container { |
|||
display: flex; |
|||
justify-content: safe center; |
|||
overflow-x: auto; |
|||
} |
|||
.tds-tab-container :is(strong, a) { |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
color: var(--theme-page-text-color) |
|||
} |
|||
.tds-tab { |
|||
background: var(--BlueThemePrimary); |
|||
padding: 6px 24px; |
|||
border-top: 2px solid var(--BlueThemeSecondary); |
|||
border-bottom: 2px solid var(--BlueThemeSecondary); |
|||
transition: .5s; |
|||
display: flex; |
|||
white-space: nowrap; |
|||
align-items: center; |
|||
} |
|||
a:not(.new) .tds-tab:hover { |
|||
color: var(--theme-link-color); |
|||
background: var(--BlueThemePrimaryHover); |
|||
border-color: var(--BlueThemeSecondaryHover); |
|||
transition: .5s; |
|||
} |
|||
.mw-selflink .tds-tab { |
|||
color: var(--theme-link-color); |
|||
background: var(--BlueThemePrimaryActive); |
|||
border-color: var(--BlueThemeSecondaryActive) !important; |
|||
pointer-events: none; |
|||
} |
|||
:is(a, span).new .tds-tab { |
|||
background: var(--RedThemePrimary); |
|||
border-color: var(--RedThemeSecondary) !important; |
|||
} |
|||
:is(a, span).new .tds-tab:hover { |
|||
background: var(--RedThemePrimaryHover); |
|||
border-color: var(--RedThemeSecondaryHover) !important; |
|||
} |
|||
.tds-tab-container :is(strong, a):first-child .tds-tab { |
|||
border-top-left-radius: 25px; |
|||
border-left: 2px solid var(--BlueThemeSecondary); |
|||
} |
|||
.tds-tab-container :is(strong, a):last-child .tds-tab { |
|||
border-bottom-right-radius: 25px; |
|||
border-right: 2px solid var(--BlueThemeSecondary); |
|||
} |
|||
.tds-tab-container :is(strong, a):first-child { |
|||
border-top-left-radius: 25px; |
|||
} |
|||
.tds-tab-container :is(strong, a):last-child { |
|||
border-bottom-right-radius: 25px; |
|||
} |
|||
/* Type selector */ |
|||
.tower-type { |
|||
display: flex; |
|||
justify-content: safe center; |
|||
margin-bottom: 5px; |
|||
} |
|||
.tower-type :is(a, strong) { |
|||
color: var(--theme-page-text-color); |
|||
font-size: 12px; |
|||
font-weight: bold; |
|||
padding: 3px 10px; |
|||
transition: .5s; |
|||
} |
|||
.tower-type :is(a, strong):first-child { |
|||
background: var(--BlueThemePrimary); |
|||
border: 1px solid var(--BlueThemeSecondary); |
|||
border-right: 0; |
|||
border-top-left-radius: 18px; |
|||
} |
|||
.tower-type a:hover:first-child { |
|||
background: var(--BlueThemePrimaryHover); |
|||
border-color: var(--BlueThemeSecondaryHover); |
|||
transition: .5s; |
|||
} |
|||
.tower-type :is(a, strong):last-child { |
|||
background: var(--YellowThemePrimary); |
|||
border: 1px solid var(--YellowThemeSecondary); |
|||
border-left: 0; |
|||
border-bottom-right-radius: 18px; |
|||
} |
|||
.tower-type a:hover:last-child { |
|||
background: var(--YellowThemePrimaryHover); |
|||
border-color: var(--YellowThemeSecondaryHover); |
|||
transition: .5s; |
|||
} |
|||
.tower-type strong:first-child { |
|||
background: var(--BlueThemePrimaryActive); |
|||
border-color: var(--BlueThemeSecondaryActive); |
|||
} |
|||
.tower-type strong:last-child { |
|||
color: #613F1B; |
|||
background: var(--YellowThemePrimaryActive); |
|||
border-color: var(--YellowThemeSecondaryActive); |
|||
} |
|||
.theme-fandomdesktop-dark .tower-type strong:last-child { |
|||
color: #F1D1AC; |
|||
} |
|||
/* Tab icons */ |
|||
.tab-article { |
|||
background-image: url('https://static.wikia.nocookie.net/tower-defense-sim/images/1/18/ArticleIcon.png/revision/latest/scale-to-width-down/30?cb=20200704184553'); |
|||
height: 30px; |
|||
width: 30px; |
|||
margin-right: 10px; |
|||
} |
|||
.tab-gallery { |
|||
background-image: url('https://static.wikia.nocookie.net/tower-defense-sim/images/b/b3/FileIcon.png/revision/latest/scale-to-width-down/30?cb=20200704184600'); |
|||
height: 30px; |
|||
width: 30px; |
|||
margin-right: 10px; |
|||
} |
|||
.tab-history { |
|||
background-image: url('https://static.wikia.nocookie.net/tower-defense-sim/images/4/4d/HistoryIcon.png/revision/latest/scale-to-width-down/30?cb=20220126151445'); |
|||
height: 30px; |
|||
width: 30px; |
|||
margin-right: 10px; |
|||
} |
|||
.tab-sale { |
|||
background-image: url('https://static.wikia.nocookie.net/tower-defense-sim/images/4/4a/SaleIcon.png/revision/latest/scale-to-width-down/30?cb=20200704184553'); |
|||
height: 30px; |
|||
width: 30px; |
|||
margin-right: 10px; |
|||
} |
|||
.tab-story { |
|||
background-image: url('https://static.wikia.nocookie.net/tower-defense-sim/images/3/32/StoryIcon.png/revision/latest/scale-to-width-down/30?cb=20200704184600'); |
|||
height: 30px; |
|||
width: 30px; |
|||
margin-right: 10px; |
|||
} |
|||
.tab-stats { |
|||
background-image: url('https://static.wikia.nocookie.net/tower-defense-sim/images/2/2f/AdvancedStatsIcon.png/revision/latest/scale-to-width-down/30?cb=20220126151445'); |
|||
height: 30px; |
|||
width: 30px; |
|||
margin-right: 10px; |
|||
} |
|||
.tab-question { |
|||
background-image: url('https://static.wikia.nocookie.net/tower-defense-sim/images/c/cb/QuestionIcon.png/revision/latest/scale-to-width-down/30?cb=20220126151445'); |
|||
height: 30px; |
|||
width: 30px; |
|||
margin-right: 10px; |
|||
} |
|||
/* Styles for Template:Quote */ |
|||
.quote-container { |
|||
width: fit-content; |
|||
min-width: 350px; |
|||
max-width: 474px; |
|||
} |
|||
.quote-container .wds-tabber { |
|||
overflow: visible; |
|||
} |
|||
.quote-container .wds-tabs__wrapper { |
|||
overflow: hidden; |
|||
} |
|||
.quote-container:has(.wds-tabs) { |
|||
max-width: 100%; |
|||
} |
|||
.quote-container:has(.wds-tabs) .wds-tab__content { |
|||
width:fit-content; |
|||
min-width:350px; |
|||
max-width:450px |
|||
} |
|||
.quote { |
|||
position: relative; |
|||
display: flow-root; |
|||
background-color: var(--BlueThemePrimary); |
|||
border: 2px solid var(--BlueThemeSecondary); |
|||
padding: 3px 5px 3px 0; |
|||
border-radius: 25px 0 25px; |
|||
z-index: 0; |
|||
margin-bottom: 10px; |
|||
word-break: break-word; |
|||
} |
|||
.quote dd { |
|||
margin-right: 24px; |
|||
} |
|||
.quote-image { |
|||
position: absolute; |
|||
left: 5px; |
|||
top: 5px; |
|||
z-index: -1; |
|||
} |
|||
.theme-fandomdesktop-dark .quote-image { |
|||
opacity: 0.25; |
|||
} |
|||
.tabber .quote:last-of-type { |
|||
margin-bottom: 0px; |
|||
} |
|||
/* Notice template theming */ |
|||
.notice { |
|||
background: var(--BlueThemePrimary); |
|||
border-left: 9px solid var(--theme-accent-color); |
|||
width: 90%; |
|||
margin: 5px auto; |
|||
padding: 3px 8px; |
|||
} |
|||
.notice .notice-collapsible .mw-collapsible-toggle { |
|||
display: none; |
|||
} |
|||
.notice .notice-collapsible .mw-collapsible-content { |
|||
display: block !important; |
|||
} |
|||
.section-notice { |
|||
width: fit-content; |
|||
border-left-width: 6px; |
|||
margin: 4px auto; |
|||
padding: 2px 4px; |
|||
font-size: 15px; |
|||
} |
|||
/* Top template bubbles */ |
|||
.bubble-box { |
|||
background: var(--BlueThemePrimary); |
|||
border: 2px solid var(--BlueThemeSecondary); |
|||
border-radius: 25px 0 25px; |
|||
text-align: center; |
|||
padding: 0.5em; |
|||
margin-bottom: 5px !important; |
|||
line-height: 1.5; |
|||
} |
|||
/* Bubbles & notices */ |
|||
.notice hr { |
|||
background: var(--BlueThemeSecondary); |
|||
} |
|||
hr.themed-hr { |
|||
background: var(--BlueThemePrimary); |
|||
} |
|||
/* DEV TABBER */ |
|||
.dev-tabber.wds-tabber { |
|||
overflow: initial; |
|||
} |
|||
.dev-tabber .wds-tabs__wrapper { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
border-bottom: 0; |
|||
} |
|||
.dev-tabber .wds-tabs__tab { |
|||
background: var(--WikiAccentPrimary); |
|||
margin: 4px; |
|||
border-radius: 5px; |
|||
transition: background 0.75s; |
|||
} |
|||
.dev-tabber .wds-tabs__tab:hover { |
|||
background: var(--WikiAccentSecondary); |
|||
} |
|||
.dev-tabber .wds-tabs__tab.wds-is-current { |
|||
background: var(--WikiAccentTertiary); |
|||
color: #FFF; |
|||
box-shadow: none; |
|||
transition: background 0.75s; |
|||
cursor: default; |
|||
} |
|||
.dev-tabber .wds-tabs__tab-label { |
|||
margin: 0 6px; |
|||
height: 30px; |
|||
color: #F2F2F2; |
|||
} |
|||
.dev-tabber .wds-tabs__tab.wds-is-current > .wds-tabs__tab-label a { |
|||
cursor: default; |
|||
} |
|||
/* Double tabber border */ |
|||
.dev-tabber .wds-tab__content > .wds-tabber > .wds-tabs__wrapper { |
|||
border-top:1px solid var(--WikiAccentSecondary); |
|||
} |
|||
/* Last paragraph no longer has a margin below it + exceptions */ |
|||
.dev-tabber .wds-tab__content p:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
.dev-tabber .wds-tab__content .box-content p:last-child { |
|||
margin-bottom: 24px; |
|||
} |
|||
/* fix for a very specific issue on the soundtrack page */ |
|||
.dev-tabber .wds-tab__content pre:first-child:has(.video) { |
|||
background: transparent; |
|||
border-width: 0; |
|||
padding: 0; |
|||
white-space: collapse; |
|||
} |
|||
/* Tabber style for regular/golden/platinum tower history and rof bug pages | Colored links for skins */ |
|||
.tower-tabber .wds-tabs__tab.wds-is-current[data-hash*="Golden"] { |
|||
color: #8C8C04; |
|||
} |
|||
.tower-tabber .wds-tabs__tab.wds-is-current[data-hash*="Platinum"] { |
|||
color: #4CA194; |
|||
} |
|||
.theme-fandomdesktop-dark :is(.tower-tabber .wds-tabs__tab.wds-is-current[data-hash*="Golden"]) { |
|||
color: #FFFF00; |
|||
} |
|||
.theme-fandomdesktop-dark .tower-tabber .wds-tabs__tab.wds-is-current[data-hash*="Platinum"] { |
|||
color: #BDFBF2; |
|||
} |
|||
/* CONTAINERCOLUMN */ |
|||
.ContainerColumn { |
|||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); |
|||
margin: 0 0 10px; |
|||
padding: 0; |
|||
overflow: hidden; |
|||
border-bottom-right-radius: 25px; |
|||
} |
|||
.theme-fandomdesktop-dark .ContainerColumn { |
|||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); |
|||
} |
|||
/* BASIC BACKGROUND */ |
|||
.BasicBackground { |
|||
background: var(--BasicBackground); |
|||
border-left: 8px solid var(--theme-accent-color); |
|||
margin-bottom: 8px; |
|||
padding: 6px; |
|||
border-top-right-radius: 25px; |
|||
} |
|||
/* tabs */ |
|||
.BasicBackground .dev-tabber .wds-tabs__tab .wds-tabs__tab-label { |
|||
color: var(--theme-page-text-color); |
|||
} |
|||
.BasicBackground .dev-tabber .wds-tabs__tab { |
|||
background: color-mix(in hsl, var(--BasicBackgroundDark), black 5%); |
|||
} |
|||
.BasicBackground .dev-tabber .wds-tabs__tab:hover { |
|||
background: color-mix(in hsl, var(--BasicBackgroundDark), black 10%); |
|||
} |
|||
.BasicBackground .dev-tabber .wds-tabs__tab.wds-is-current { |
|||
background: color-mix(in hsl, var(--BasicBackgroundDark), black 15%); |
|||
} |
|||
.theme-fandomdesktop-dark .BasicBackground .dev-tabber .wds-tabs__tab { |
|||
background: color-mix(in hsl, var(--BasicBackgroundDark), white 5%); |
|||
} |
|||
.theme-fandomdesktop-dark .BasicBackground .dev-tabber .wds-tabs__tab:hover { |
|||
background: color-mix(in hsl, var(--BasicBackgroundDark), white 10%); |
|||
} |
|||
.theme-fandomdesktop-dark .BasicBackground .dev-tabber .wds-tabs__tab.wds-is-current { |
|||
background: color-mix(in hsl, var(--BasicBackgroundDark), white 15%); |
|||
} |
|||
/* Colors for policy pages */ |
|||
.BasicBackground.Green { |
|||
border-left-color: #00FF44; |
|||
} |
|||
.BasicBackground.Orange { |
|||
border-left-color: #FF9D00; |
|||
} |
|||
.BasicBackground.Red { |
|||
border-left-color: #870000; |
|||
} |
|||
/* ACHIEVEMENT BOX */ |
|||
.achievement-box { |
|||
background: var(--BasicBackground); |
|||
padding: 5px 5px 5px 10px; |
|||
margin: 4px auto; |
|||
border-radius: 3px; |
|||
border-top-right-radius: 25px; |
|||
border-left: 6px solid var(--BasicBackgroundDark); |
|||
display: flow-root; |
|||
} |
|||
/* PROFILE PAGE */ |
|||
/* Profile page tabs */ |
|||
#userProfileApp .user-profile-navigation { |
|||
border-bottom: 0; |
|||
} |
|||
body.skin-fandomdesktop #userProfileApp .user-profile-navigation__link { |
|||
padding: 0px; |
|||
flex: auto; |
|||
text-align: center; |
|||
background: var(--BlueThemePrimary); |
|||
transition: .35s; |
|||
opacity: 0.75; |
|||
} |
|||
body.skin-fandomdesktop #userProfileApp .user-profile-navigation__link.is-active { |
|||
border-bottom: 0; |
|||
opacity: 1; |
|||
} |
|||
body.skin-fandomdesktop #userProfileApp .user-profile-navigation__link:not(.is-active):hover { |
|||
opacity: 0.95; |
|||
} |
|||
body.skin-fandomdesktop #userProfileApp .user-profile-navigation__link a { |
|||
display: block; |
|||
padding: 12px; |
|||
text-transform: uppercase; |
|||
font-weight: 700; |
|||
text-decoration: none; |
|||
} |
|||
#userProfileApp .user-profile-navigation__link.is-active a { |
|||
color: inherit; |
|||
} |
|||
/* Edit profile button */ |
|||
#userProfileApp .wds-button.wds-is-secondary { |
|||
border: 0; |
|||
background: var(--BlueThemePrimary); |
|||
padding: 10px 18px; |
|||
} |
|||
/* Tag colors on mastheads */ |
|||
.theme-fandomdesktop-light .tag-wiki_contributor { |
|||
background-color: #68C8B7 !important; |
|||
} |
|||
.theme-fandomdesktop-dark .tag-wiki_contributor { |
|||
background-color: #02705C !important; |
|||
} |
|||
.theme-fandomdesktop-light .tag-contributor_of_the_week { |
|||
background-color: #F1C40F !important; |
|||
} |
|||
.theme-fandomdesktop-dark .tag-contributor_of_the_week { |
|||
background-color: #8F7304 !important; |
|||
} |
|||
#userProfileApp .user-identity-header__tag { |
|||
background: var(--BlueThemePrimary); |
|||
} |
|||
/* TOP NAVIGATION */ |
|||
.fandom-community-header__local-navigation .wds-dropdown__content .wds-list.wds-is-linked > li > a > svg:not(.navigation-item-icon) { |
|||
fill: var(--BlueThemeSecondary); |
|||
} |
|||
.fandom-community-header__local-navigation .wds-dropdown__content { |
|||
border-radius: 25px 0 25px; |
|||
} |
|||
.fandom-community-header__local-navigation .wds-dropdown__content:has(.wds-dropdown-level-nested) { |
|||
border-bottom-right-radius: 0px; |
|||
} |
|||
.wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-nested .wds-dropdown-level-nested__content:not(:has(li.wds-dropdown-level-nested)) { |
|||
border-radius: 0 0 25px; |
|||
} |
|||
.fandom-community-header__local-navigation .wds-dropdown__content > .wds-list.wds-is-linked > li:first-child > a:not(.wds-button) { |
|||
border-top-left-radius: 15px; |
|||
} |
|||
.fandom-community-header__local-navigation .wds-dropdown__content > .wds-list.wds-is-linked > li:last-child > a:not(.wds-button) { |
|||
border-bottom-right-radius: 15px; |
|||
} |
|||
.fandom-community-header__local-navigation .wds-dropdown__content:has(.wds-dropdown-level-nested) > .wds-list.wds-is-linked > li:last-child > a:not(.wds-button) { |
|||
border-bottom-right-radius: 0; |
|||
} |
|||
.wds-dropdown-level-nested__content > .wds-list.wds-is-linked > li:last-child > a:not(.wds-button) { |
|||
border-bottom-right-radius: 15px; |
|||
} |
|||
.wds-dropdown-level-nested__content:has(.wds-dropdown-level-nested) > .wds-list.wds-is-linked > li:last-child > a:not(.wds-button) { |
|||
border-bottom-right-radius: 0; |
|||
} |
|||
/* SMALL CHANGES/FIXES */ |
|||
/* pre in comments */ |
|||
.entity-content pre code { |
|||
background-color: var(--BasicBackgroundDark) !important; |
|||
} |
|||
/* Read more button */ |
|||
.entity-content .read-more { |
|||
background: var(--BasicBackground) !important; |
|||
transition: .3s !important; |
|||
} |
|||
.entity-content .read-more:hover { |
|||
background: var(--BasicBackgroundDark) !important; |
|||
} |
|||
/* CSS background */ |
|||
.mw-content-ltr.mw-highlight-lines pre { |
|||
box-shadow: inset 2.75em 0 0 var(--BasicBackgroundDark); |
|||
} |
|||
/* Fix for shadows */ |
|||
.page-content { |
|||
overflow-x: visible; |
|||
} |
|||
/* Link preview */ |
|||
.npage-preview div { |
|||
text-align: left |
|||
} |
|||
.npage-preview { |
|||
animation: preview .2s linear; |
|||
} |
|||
@keyframes preview { |
|||
0% { opacity: 0; transform: translateY(15px) } |
|||
100% { opacity: 1; transform: translateY(0) } |
|||
} |
|||
.npage-preview { |
|||
border-width: 2px; |
|||
border-color: var(--BlueThemeSecondary); |
|||
background: var(--BasicBackground); |
|||
border-radius: 25px 0 25px; |
|||
} |
|||
.theme-fandomdesktop-dark .npage-preview { |
|||
background: var(--BlueThemePrimary); |
|||
} |
|||
/* Search adjustments */ |
|||
.page-content .unified-search__community__content { |
|||
background: var(--BasicBackground) |
|||
} |
|||
.paginator-page { |
|||
transition: .3s; |
|||
} |
|||
.paginator-page:hover { |
|||
background-color: rgba(var(--theme-accent-color--rgb), 0.3); |
|||
} |
|||
/* Category adjustments */ |
|||
.theme-fandomdesktop-light #content .category-page__trending-page-title { |
|||
background: color-mix(in hsl, var(--PrimaryColour), transparent 40%); |
|||
} |
|||
.theme-fandomdesktop-light #content .category-page__trending-page-title:hover { |
|||
background: color-mix(in hsl, var(--PrimaryColour), transparent 75%); |
|||
} |
|||
.theme-fandomdesktop-dark #content .category-page__trending-page-title { |
|||
background: color-mix(in hsl,var(--PrimaryColour), transparent 50%); |
|||
} |
|||
.theme-fandomdesktop-dark #content .category-page__trending-page-title:hover { |
|||
background: color-mix(in hsl,var(--PrimaryColour), transparent 75%); |
|||
} |
|||
#content .category-page__alphabet-shortcut:after { |
|||
color: var(--theme-page-text-color); |
|||
} |
|||
#content .category-page__alphabet-shortcut.is-active a { |
|||
padding: 0px 5px; |
|||
border-radius: 3px; |
|||
} |
|||
/* Slightly improved look for interactive maps */ |
|||
.interactive-maps-container { |
|||
background: var(--BasicBackgroundDark); |
|||
border-color: var(--BasicBackground); |
|||
--transcluded-map-width: auto; /* Fix for interactive maps not shrinking when infobox would move it down */ |
|||
} |
|||
.interactive-maps .leaflet-container, |
|||
.interactive-map-editor .leaflet-container { |
|||
background-color: var(--BasicBackground); |
|||
} |
|||
.EmptyPreview-module_emptyPreview__KGs4b { |
|||
background: color-mix(in oklch, var(--PrimaryColour), black 55%) !important; |
|||
} |
|||
.mw-content-ltr.mw-parser-output .interactive-maps-container + p { |
|||
display: none; |
|||
} |
|||
/* Page history */ |
|||
.theme-fandomdesktop-dark #pagehistory li.selected { |
|||
outline: 1px dashed color-mix(in hsl, var(--BasicBackground), white 30%); |
|||
} |
|||
/* Image thumb info icon */ |
|||
.thumb.show-info-icon .info-icon { |
|||
background-color: color-mix(in hsl, var(--BlueThemePrimary), transparent 40%); |
|||
} |
|||
/* Lightbox */ |
|||
.blackout { |
|||
background: color-mix(in oklch, var(--PrimaryColour), black 55%); |
|||
} |
|||
/* Community page card design change */ |
|||
.community-page-cards-module .community-page-card-module { |
|||
border-radius: 25px 0 25px; |
|||
} |
|||
.community-page-cards-module .community-page-card-module .community-page-card-module-header { |
|||
background: var(--PrimaryColour); |
|||
border-top-left-radius: 25px; |
|||
} |
|||
/* Fix for not all tabs appearing in preview while source editing */ |
|||
.ve-ui-overlay-global .wds-tabs { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
} |
|||
/* Nicer broken icons for dark mode */ |
|||
.theme-fandomdesktop-dark img[src*="NoProductIcon.png"] { |
|||
filter: invert(0.65) |
|||
} |
|||
/* UTILITY CLASSES */ |
|||
/*Aligns text and files for both desktop and mobile*/ |
|||
.align-center { |
|||
text-align: center; |
|||
} |
|||
img.align-center { |
|||
margin: 0 auto; |
|||
} |
|||
.align-center th, .article-table th.align-center { |
|||
text-align: center !important; |
|||
} |
|||
.align-right { |
|||
text-align: right; |
|||
} |
|||
.align-right th, .article-table th.align-right { |
|||
text-align: right !important; |
|||
} |
|||
/* Image visibility */ |
|||
.theme-fandomdesktop-light .invertimage-light, |
|||
.theme-fandomdesktop-dark .invertimage { |
|||
filter:invert(1); |
|||
} |
|||
/* Image shadows */ |
|||
.theme-fandomdesktop-light :is(.image-shadow, .image-shadow-light) img, .theme-fandomdesktop-light img:is(.image-shadow, .image-shadow-light) { |
|||
filter: drop-shadow(0 0 0.075rem #000); |
|||
} |
|||
.theme-fandomdesktop-dark :is(.image-shadow, .image-shadow-dark) img, .theme-fandomdesktop-dark img:is(.image-shadow, .image-shadow-dark) { |
|||
filter: drop-shadow(0 0 0.075rem #FFF); |
|||
} |
|||
/* Prevents parts of the page from appearing on desktop */ |
|||
.mobile-only, .link-preview { |
|||
display: none; |
|||
} |
|||
/* link preview text */ |
|||
p:has(.link-preview:only-child) { |
|||
margin: 0; |
|||
} |
|||
/* Hoverimage */ |
|||
.hoverimage img { |
|||
opacity: .8; |
|||
transition: opacity .2s ease-in-out; |
|||
} |
|||
.hoverimage img:hover { |
|||
opacity: 1; |
|||
} |
|||
/* Stretched tabbers */ |
|||
.tabber-stretch .dev-tabber .wds-tabs__tab-label a { |
|||
color: #FFF; |
|||
font-weight: 700; |
|||
font-size: 16px; |
|||
} |
|||
.tabber-stretch .dev-tabber .wds-tabs__tab-label a:hover { |
|||
color: #FFF; |
|||
} |
|||
.tabber-stretch .dev-tabber .wds-tabs { |
|||
width: 90%; |
|||
margin: 0 auto; |
|||
} |
|||
.tabber-stretch .dev-tabber .wds-tabs__tab { |
|||
flex: auto; |
|||
text-align: center; |
|||
} |
|||
/* Max tabber width */ |
|||
.tabber-w-175 .wds-tabber, .tabber-w-175 .wds-tabs__wrapper { |
|||
max-width: 175px; |
|||
} |
|||
/* clear */ |
|||
.clear-both { |
|||
clear: both; |
|||
} |
|||
Latest revision as of 10:54, 1 July 2026
/*
* Common.css # Central loader [[MediaWiki:Common.css]]
* ├─ Shared.css # Styling on all platforms [[MediaWiki:Shared.css]]
* │ ├─ BalancedComments.css # Comment styling [[w:c:dev:MediaWiki:BalancedComments.css]]
* │ ├─ Colors.css # Variables (mostly colors) [[MediaWiki:Colors.css]]
* │ ├─ EgoIcons.css # Egostrap Icons library [[w:c:alterego:MediaWiki:EgoIcons.css]]
* │ ├─ Tooltip.css # For [[Template:Tooltip]] [[MediaWiki:Tooltip.css]]
* │ └─ Utils.css # CSS utilities [[MediaWiki:Utils.css]]
* ├─ Fandomdesktop.css # Desktop only styling [[MediaWiki:Fandomdesktop.css]]
* │ ├─ BalancedBloglists.css # Bloglist styling [[w:c:dev:MediaWiki:BalancedBloglists.css]]
* │ ├─ BalancedCategories.css # Category styling [[w:c:dev:MediaWiki:BalancedCategories.css]]
* │ ├─ BalancedSlider.css # Slider styling [[w:c:dev:MediaWiki:BalancedSlider.css]]
* │ ├─ MainPage.css # Main page layout [[MediaWiki:MainPage.css]]
* │ ├─ MinifiedLeftTabs.css # Minified Left Tabs [[w:c:dev:MediaWiki:MinifiedLeftTabs.css]]
* │ ├─ SlantedToggles.css # Slanted toggles UI [[MediaWiki:SlantedToggles.css]]
* │ ├─ UpdateLog.css # Update log styling [[MediaWiki:UpdateLog.css]]
* │ └─ UpgradeNarrators.css # Upgrade box images [[MediaWiki:UpgradeNarrators.css]]
* │─ FandomMobile.css # Mobile only styling [[MediaWiki:FandomMobile.css]]
* │ ├─ MobileMainPage.css # Mobile main page layout [[MediaWiki:MobileMainPage.css]]
* │ ├─ MobileSlantedToggles.css # Mobile slanted toggles [[MediaWiki:MobileSlantedToggles.css]]
* │ └─ MobileUpdateLog.css # Mobile update log [[MediaWiki:MobileUpdateLog.css]]
* └─ Group-autoconfirmed.css # Autoconfirmed users only [[MediaWiki:Group-autoconfirmed.css]]
*/
@import "/load.php?articles=MediaWiki:Shared.css&only=styles&mode=articles";