MediaWiki:Fandomdesktop.css

From Tower Defense Simulator Wiki
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* IMPORTS */
@import url("/load.php?mode=articles&only=styles&articles=u:dev:MediaWiki:BalancedCategories.css|u:dev:MediaWiki:BalancedSlider.css|u:dev:MediaWiki:BalancedBloglists.css|u:dev:MediaWiki:MinifiedLeftTabs.css|MediaWiki:SlantedToggles.css|MediaWiki:UpdateLog.css|MediaWiki:MainPage.css|MediaWiki:UpgradeNarrators.css");

.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: UniSans !important;
}

/* list styles */
:is(.page-content, #Wall.Thread .message .msg-body) {
	/* depth 2: list inside list = circle */
	:is(ul, ol) ul { list-style-type: circle; }
	/* depth 3: list inside list inside list = square */
	:is(ul, ol) :is(ul, ol) ul { list-style-type: square; }
}

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

/* INFOBOX */
:root { --InfoboxBorder: rgb(var(--theme-accent-color--rgb), .5); }

.portable-infobox {
	width: 300px;
	border: 0;
	border-radius: 0;
	--pi-background: var(--BasicBackground);
	--pi-secondary-background: var(--WikiAccentPrimary);
	border-radius: var(--BorderRadius);

	hr {
		background: var(--InfoboxBorder);
	}

	.pi-title {
		position: relative;
		border-top-left-radius: 25px;
		font-family: UniSans;
		font-weight: normal
	}

	audio {
		width: 300px !important;
	}

	.pi-item-spacing {
		padding: 8px 10px;
	}

	.pi-item:has(.thumb.mw-halign-center) {
		justify-content: center;
	}

	.wds-tabs__wrapper:has(.wds-tabs__tab:only-child) {
		display: none;
	}

	.wds-tab__content > .pi-data:first-child {
		border-top-width: 0;
	}

	:is(.pi-image-collection.wds-tabber, .pi-panel.wds-tabber) > .wds-tabs__wrapper {
		padding: 6px 8px;
		background: var(--WikiAccentSecondary);
		font-family: UniSans;

		.wds-tabs {
			justify-content: safe center;

			.wds-tabs__tab {
				color: #FFF;
				transition: .75s;

				&:hover {
					background-color: color-mix(in oklch, var(--WikiAccentTertiary), transparent 75%);
					transition: .5s;
				}

				&.wds-is-current {
					background-color: var(--WikiAccentTertiary);
					box-shadow: none;
					transition: .75s;
				}
			}
		}
	}

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

	:is(.wds-tabs__arrow-right, .wds-tabs__arrow-left) .wds-icon {
		fill: white
	}
}

/* RIGHT RAIL MODS */
.right-rail-wrapper {
	.rail-module {
		padding-bottom: 0;
		border: 8px solid transparent;
		border-radius: 6px;
		transition: 0.2s ease;
		transition-property: border, background;

		&:hover {
			border-color: rgb(211 211 211 / .2) !important;
			background: rgb(211 211 211 / .5);

			.theme-fandomdesktop-dark & {
				border-color: color-mix(in hsl, var(--BasicBackgroundDark), transparent 0%) !important;
				background: color-mix(in hsl, var(--BasicBackgroundDark), transparent 10%);
			}
		}
	}

	> :last-child > .rail-module:last-child {
		border-bottom: 8px solid transparent;
		margin-bottom: 1.75em;
	}
}

.recent-images-module {
	.wds-widget-frame {
		background: transparent;
	}

	.wds-widget-frame {
		padding: 0;
	}

	.alice-carousel {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25em;

		> div:first-child {
			width: 100%;
		}
	}

	.alice-carousel__prev-btn,
	.alice-carousel__next-btn {
		position: static;
		flex: 1;

		&:empty {
			display: none;
		}
	}

	.alice-carousel__arrow {
		position: static;
		width: 100%;
		transform: none;
	}

	.alice-carousel__prev-btn-item svg { transform: rotate(90deg); }
	.alice-carousel__next-btn-item svg { transform: rotate(-90deg); }

	.wds-widget-frame .alice-carousel__arrow {
		background: var(--BlueThemePrimary);

		&:hover {
			background: var(--BlueThemePrimaryHover);
		}
	}

	.alice-carousel__prev-btn .alice-carousel__arrow {
		border-radius: var(--BorderRadius) 0;
	}

	.alice-carousel__next-btn .alice-carousel__arrow {
		border-radius: 0 0 25px;
	}

	.alice-carousel::after {
		background: var(--BlueThemePrimary);
		flex: 1;
		text-align: center;
		color: #888;
		line-height: 24px;
	}

	.alice-carousel:has(.alice-carousel__prev-btn:empty + .alice-carousel__next-btn) {
		flex-direction: row-reverse;
		&::after {
			content: "Start";
			border-radius: 25px 0 0;
		}
	}

	.alice-carousel:has(.alice-carousel__prev-btn + .alice-carousel__next-btn:empty) {
		&::after {
			content: "End";
			border-radius: 0 0 25px;
		}
	}

	@media only screen and (max-width: 768px) {
		.alice-carousel::after {
			display: none;
		}
	}
}

/* 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;
	
	hr {
		background: linear-gradient(to right, #0000, black, #0000);
	}
}

/* Fandom widget colors */
.wds-widget-frame__header .wds-widget-frame__title {
	--wds-midlight-color: rgb(var(--theme-link-color--rgb), .1);
	background-image: linear-gradient(to top,var(--wds-midlight-color, rgb(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: var(--BorderRadius);
	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;
	position: relative;
	transition: .4s ease;

	.mw-collapsible-toggle {
		--theme-page-text-color: white;
	}

	&:has(.mw-collapsible-toggle):hover {
		background: var(--PrimaryColourHover);
	}

	button.mw-collapsible-toggle {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		.mw-collapsible-text {
			float: right;
			margin-right: 5px;
			font-size: 20px;
			transition: .4s ease;
			text-decoration: none !important;
		}
	}

	&:hover .mw-collapsible-toggle .mw-collapsible-text {
		color: var(--theme-link-color--hover)
	}

	.mw-collapsible-toggle-default {
		&::before, &::after {
			content: '';
		}
	}

	a {
		color: white;
	}
}
@media only screen and (max-width:1024px) {
	table.mw-collapsible:has(.navbox-header):last-child {
		margin-bottom: 1px;
	}
}

.navbox-label-wide,
.navbox-label-narrow {
	padding: 4px;
	background-color: var(--PrimaryColour);
	color: white;

	a {
		color: white;
	}
}
.navbox-label-wide {
	width: 20%;
}

.navbox-label-narrow {
	width: 15%;
}

.navbox-data {
	text-align: left;
	color: black;

	.theme-fandomdesktop-dark & {
		color: white;
	}
}

/* Upgrades */
.upgrade-body {
	flex-direction: initial;
	flex-wrap: wrap;
	/* for a list of possible narrates, see [[MediaWiki:UpgradeNarrators.css]] */

	&::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);
	}
}

.upgrade-info-content.upgrade-list {
	gap: 10px;
}

.upgrade-list > div {
	width: calc(50% - 5px);
}

.upgrade-image-wrapper {
	height: fit-content;
}

/* Styles for things that use "box" */
/* Boxes */
div.box {
	display: flow-root;
}

.box hr {
	background: var(--PrimaryColour);
}

.angled-header {
	line-height: 1.5em !important;
	text-align: center;
	font: 22px UniSans;
	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);
}

/* Pseudo 3d */
.pseudo-3d-viewport {
	position: relative;
	left: 1.5em;
	cursor: ew-resize;
	width: 270px;
	height: 270px;
	overflow: hidden;

	&.pseudoxd {
		left: 0;
		.pi-item:has(&) { justify-content: center; }

		img {
			width: 500%;
			height: 500%;
			max-width: none;
			display: block;
		}
	}
}

.pi-item:has(> .pi-data-value > .pseudo-3d-viewport) {
	background: url('https://static.wikia.nocookie.net/tower-defense-sim/images/0/05/DefaultDynamicBackground.png/revision/latest?cb=20260305163943') center / cover;
}

.pi-item:has(> .pi-data-value > .pseudo-3d-viewport)::after {
	border-radius: var(--BorderRadius);
	padding: .2em 1.25em;
}


/* TABLE OF CONTENTS */
.toc {
	border: 2px solid var(--BlueThemeSecondary);
	border-radius: var(--BorderRadius);
	margin: 10px auto 10px 0;

	.toctitle {
		background: var(--BlueThemePrimary);
		border-bottom: 2px solid var(--BlueThemeSecondary);
		border-top-left-radius: 23px;
	}

	.toctogglecheckbox:checked + .toctitle {
		border-bottom-right-radius: 23px;
	}

	> ul {
		border-bottom-right-radius: 23px;
	}

	ul li a:hover {
		background-color:var(--BasicBackgroundDark)
	}
}

.sticky-toc.toc {
	border: 2px solid var(--BlueThemeSecondary);
	background: var(--BasicBackground);

	.toctitle {
		border-top-left-radius: 0;

		.wds-icon {
			fill: var(--BlueThemeSecondary);
			opacity: 1;
		}
	}
}

.toctogglecheckbox {
	&:checked~.toctitle {
		border-bottom: none;
	}

	&:checked + .toctitle .toctogglelabel:after {
		content:'▼'
	}

	&:not(:checked) + .toctitle .toctogglelabel:after {
		content:'▲'
	}

	&:focus + .toctitle .toctogglelabel {
		text-decoration: none;
		outline: none;
	}
}

.toc ul, .sticky-toc.toc > ul:before, .sticky-toc.toc > ul:after {
	background-color: var(--BasicBackground);
}

.toctogglelabel {
	background: var(--BlueThemeSecondary);
	padding: 3px 4px;
	border-radius: 5px;
	color: white !important;
	transition: .3s !important;

	&:hover {
		background: var(--BlueThemeSecondaryHover);
	}
}

.toctogglespan::before,
.toctogglespan::after {
	content: "";
}

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

	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;

	a {
		color: #FFF;
	}

	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;

	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 */
.row-image {
	margin: 5px;
}

.row-info {
	width: calc(100% - 135px);
	margin: 5px;
}

/* ROBLOX CONTAINERS */
.roblox-box,
.roblox-image,
.roblox-info {
	width: 175px;
}

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

	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;

	&.no-top-border {
		border-top-width: 1px;
	}

	th, td {
		padding: 5px;
		text-align: center;
		width: 33%;
		border: 1px solid var(--theme-border-color);
	}

	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;

	th {
		background: var(--PrimaryColour);
		color: white;
	}

	th, td {
		border: 2px solid color-mix(in hsl, var(--PrimaryColour), white 20%);
		padding: 5px;
	}
}


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

	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: .5em auto;
	text-align: center;
	width: max-content;

	td, th {
		padding: 5px 15px !important;
	}
}

.pad-5,
.pad-5 :is(td, th),
.pad-td-5 td,
.pad-th-5 th {
	padding: 5px !important;
}

.pad-10,
.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);

	&: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;

	:is(strong, a) {
		font-size: 18px;
		font-weight: bold;
		color: var(--theme-page-text-color);

		&:first-child {
			border-top-left-radius: 25px;

			.tds-tab {
				border-top-left-radius: 25px;
				border-left: 2px solid var(--BlueThemeSecondary);
			}
		}

		&:last-child {
			border-bottom-right-radius: 25px;

			.tds-tab {
				border-bottom-right-radius: 25px;
				border-right: 2px solid var(--BlueThemeSecondary);
			}
		}
	}

	a {
		text-decoration: none;

		&:hover span {
			text-decoration: underline;
		}
	}
}

.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: flex-start;
}

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;

	&:hover {
		background: var(--RedThemePrimaryHover);
		border-color: var(--RedThemeSecondaryHover) !important;
	}
}
.tab-icon {
	font-size: 26px;
	margin-right: 10px;
}

/* Styles for Template:Quote */
.quote-container {
	width: fit-content;
	min-width: 350px;
	max-width: 474px;

	.wds-tabber {
		overflow: visible;
	}

	.wds-tabs__wrapper {
		overflow: hidden;
	}

	&r:has(.wds-tabs) {
		max-width: 100%;

		.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: var(--BorderRadius);
	z-index: 0;
	margin-bottom: 10px;
	word-break: break-word;

	dd {
		margin-right: 24px;
	}
}

.quote-image {
	position: absolute;
	left: 5px;
	top: 5px;
	z-index: -1;

	.theme-fandomdesktop-dark & {
		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-collapsible {
		.mw-collapsible-toggle {
			display: none;
		}

		.mw-collapsible-content {
			display: block !important;
		}
	}

	hr {
		background: var(--BlueThemeSecondary);
	}
}

.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: var(--BorderRadius);
	text-align: center;
	padding: 0.5em;
	margin-bottom: 5px !important;
	line-height: 1.5;
}

/* DEV TABBER */
.dev-tabber {
	&.wds-tabber { overflow: initial; }

	.wds-tabs__wrapper {
		display: flex;
		flex-wrap: wrap;
		border-bottom: 0;
	}

	.wds-tabs__tab {
		background: var(--WikiAccentPrimary);
		margin: 4px;
		border-radius: 5px;
		transition: background 0.75s;

		&:hover {
			background: var(--WikiAccentSecondary);
		}

		&.wds-is-current {
			background: var(--WikiAccentTertiary);
			color: white;
			box-shadow: none;
			transition: background 0.75s;
			cursor: default;

			> .wds-tabs__tab-label a {
				cursor: default;
			}
		}
	}

	.wds-tabs__tab-label {
		margin: 0 6px;
		height: 30px;
		color: #F2F2F2;
	}

	.wds-tab__content {
		/* Double tabber border */
		> .wds-tabber > .wds-tabs__wrapper {
			border-top:1px solid var(--WikiAccentSecondary);
		}

		/* Last paragraph no longer has a margin below it + exceptions */
		p:last-child {
			margin-bottom: 0;
		}

		.box-content p:last-child {
			margin-bottom: 24px;
		}

		/* fix for a very specific issue on the soundtrack page */
		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;

			.theme-fandomdesktop-dark & {
				color: #FFFF00;
			}
		}

		&[data-hash^="Platinum"] {
			color: #4CA194;

			.theme-fandomdesktop-dark & {
				color: #BDFBF2;
			}
		}
	}
	.dev-tabber {
		.wds-tabs__tab {
			&[data-hash^="Golden"] {
				background-color: #7C5E03;

				&:hover {
					background-color: #957104;
				}

				&.wds-is-current {
					background-color: #AE8404;
				}
			}
			&[data-hash^="Platinum"] {
				background-color: #4c889a;

				&:hover {
					background-color: #5497AB;
				}

				&.wds-is-current {
					background-color: #65A1B3;
				}
			}
		}
	}
}

/* CONTAINERCOLUMN */
.ContainerColumn {
	box-shadow: 0 0 10px rgb(0 0 0 / .2);
	margin: 0 0 10px;
	padding: 0;
	overflow: hidden;
	border-bottom-right-radius: 25px;

	.theme-fandomdesktop-dark & {
		box-shadow: 0 0 10px rgb(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;

	&.Green {
		border-left-color: #00FF44;
	}

	&.Orange {
		border-left-color: #FF9D00;
	}

	&.Red {
		border-left-color: #870000;
	}

	.dev-tabber .wds-tabs__tab {
		background: color-mix(in hsl, var(--BasicBackgroundDark), black 5%);

		&:hover {
			background: color-mix(in hsl, var(--BasicBackgroundDark), black 10%);
		}

		&.wds-is-current {
			background: color-mix(in hsl, var(--BasicBackgroundDark), black 15%);
		}

		.wds-tabs__tab-label {
			color: var(--theme-page-text-color);
		}
	}

	.theme-fandomdesktop-dark & .dev-tabber .wds-tabs__tab {
		background: color-mix(in hsl, var(--BasicBackgroundDark), white 5%);

		&:hover {
			background: color-mix(in hsl, var(--BasicBackgroundDark), white 10%);
		}

		&.wds-is-current {
			background: color-mix(in hsl, var(--BasicBackgroundDark), white 15%);
		}
	}
}

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

	&.is-active {
		border-bottom: 0;
		opacity: 1;
	}

	&:not(.is-active):hover {
		opacity: 0.95;
	}

	a {
		display: block;
		padding: 12px;
		text-transform: uppercase;
		font-weight: 700;
		text-decoration: none;
	}

	&.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 */
.tag-wiki_contributor {
	background-color: #68C8B7 !important;

	.theme-fandomdesktop-dark & {
		background-color: #02705C !important;
	}
}

.tag-contributor_of_the_week {
	background-color: #F1C40F !important;

	.theme-fandomdesktop-dark & {
		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);
		}

		.wds-dropdown-level-nested .wds-dropdown-level-nested__content:not(:has(li.wds-dropdown-level-nested)) {
			border-radius: 0 0 25px;
		}
	}
	.wds-dropdown__content {
		border-radius: var(--BorderRadius);
	}

	.wds-dropdown__content:has(.wds-dropdown-level-nested) {
		border-bottom-right-radius: 0px;
	}
}

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

		&:last-child > a:not(.wds-button) {
			border-bottom-right-radius: 15px;
		}
	}

	/* TODO: LATER */
	&: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;
	}

	&: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 */
.entity-content {
	/* pre in comments */
	pre code {
		background-color: var(--BasicBackgroundDark) !important;
	}

	/* Read more button */
	.read-more {
		background: var(--BasicBackground) !important;
		transition: .3s !important;

		&:hover {
			background: var(--BasicBackgroundDark) !important;
		}
	}
}

/* CSS background */
.mw-content-ltr.mw-highlight-lines pre {
	box-shadow: inset 2.75em 0 0 var(--BasicBackgroundDark);
	overflow: auto;
	white-space: pre;
	.linenos {
		background: var(--BasicBackgroundDark);
	}
}

/* Fix for shadows */
.page-content {
	overflow-x: visible;
}

/* Link preview */
.npage-preview {
	animation: preview .2s linear;
	border-width: 2px;
	border-color: var(--BlueThemeSecondary);
	background: var(--BasicBackground);
	border-radius: var(--BorderRadius);

	.theme-fandomdesktop-dark & {
		background: var(--BlueThemePrimary);
	}

	div {
		text-align: left
	}
}

@keyframes preview {
	0% { opacity: 0; transform: translateY(15px) }
	100% { opacity: 1; transform: translateY(0) }
}

/* Search adjustments */
.page-content .unified-search__community__content {
	background: var(--BasicBackground)
}

.paginator-page {
	transition: .3s;

	&:hover {
		background-color: rgb(var(--theme-accent-color--rgb), .3);
	}
}

/* Category adjustments */
#content .category-page__trending-page-title {
	background: color-mix(in hsl, var(--PrimaryColour), transparent 40%);

	&:hover {
		background: color-mix(in hsl, var(--PrimaryColour), transparent 75%);
	}

	.theme-fandomdesktop-dark & {
		background: color-mix(in hsl,var(--PrimaryColour), transparent 50%);

		&:hover {
			background: color-mix(in hsl,var(--PrimaryColour), transparent 75%);
		}
	}
}

#content .category-page__alphabet-shortcut {
	&:after {
		color: var(--theme-page-text-color);
	}

	&.is-active a {
		padding: 0px 5px;
		border-radius: 3px;
	}
}

@media only screen and (min-width: 1500px) {
	#content .category-page__trending-page {
		max-width:none;
		flex:1 1 12em;
	}
}

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

:is(.interactive-maps, .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: var(--BorderRadius);

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

/* msupload file upload text color fix */
#msupload-list .file .file-warning {
	color: var(--theme-page-text-color);
}

#msupload-div a {
	color: var(--theme-link-color);
}

/* Font weight for wiki name */
.fandom-community-header__community-name {
	font-weight: 700 !important;
}

/* Nicer broken icons for dark mode */
.theme-fandomdesktop-dark img[src*="NoProductIcon.png"] {
  filter: invert(0.65)
}

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

	&:hover {
		opacity: 1;
	}
}

/* Stretched tabbers */
.tabber-stretch > .dev-tabber {
	> .wds-tabs__wrapper > .wds-tabs {
		width: 90%;
		margin: 0 auto;

		> .wds-tabs__tab {
			flex: auto;
			text-align: center;

			> .wds-tabs__tab-label a {
				color: #FFF;
				font-weight: 700;
				font-size: 16px;

				&:hover {
					color: #FFF;
				}
			}
		}
	}
}

/* Max tabber width */
.tabber-w-175 .wds-tabber, .tabber-w-175 .wds-tabs__wrapper {
	max-width: 175px;
}

/* clear */
.clear-both {
	clear: both;
}

.rootpage-Special_Community .wds-avatar a[href*="Gabonnie"] .wds-avatar__badge,
body[class*="_Gabonnie"][class*="rootpage-"] .mastrightsbadge { display: none; }
.wds-avatar:has(a[href*="Gabonnie"]) .wds-avatar__badge svg path {
	.theme-fandomdesktop-dark & {
		--maintenance1: #ffff75;
		--maintenance2: black;
  }

	fill: var(--maintenance1, black) !important;

	&:last-child {
		fill: var(--maintenance2, #ffff75) !important;
		rotate: 36deg;
		transform-origin: center;
	}
}

.pi-item[data-source|="music"] {
	&:has(.wds-tabs__wrapper) { padding-top: 0; }
	.wds-tabs__wrapper		 { justify-content: center; }
}

.rail-img {
	inset: 0;
	background: url('https://images.wikia.com/tower-defense-sim/images/7/7d/RailModuler.png') no-repeat left center;
	background-size: contain;
	mask-image: linear-gradient(to top, transparent 5%, black);
	position: absolute;
}

[data-add-rail-module-page|="Template:RailModule"] { display: none;    }
[data-add-rail-module-page="Template:RailModule"]  { display: inherit; }
Retrieved from "https://tds.wiki/w/MediaWiki:Fandomdesktop.css?oldid=147362"