chore: move styles in Misc to relevant stylesheets

stylesheets/Main.scss

@@ -33,6 +33,10 @@
 @use "commons/Matchseries";
 @use "commons/MatchTable";
 @use "commons/NavigationCard";
+@use "commons/LiquipediaLinks";
+@use "commons/Timeline";
+@use "commons/SpellCard";
+@use "commons/Placement";
 @use "commons/Miscellaneous";
 @use "commons/BigMatch";
 @use "commons/BootstrapVisibility";

stylesheets/commons/Faction.scss

@@ -141,3 +141,23 @@ Author(s): hjpalpha
 		background: var( --clr-forest-20, #d1ffcc ) !important;
 	}
 }
+
+/*******************************************************************************
+Template(s): Race icons on the Warcraft wiki
+Author(s): FO-nTTaX
+*******************************************************************************/
+.wiki-warcraft .race-icon-small img {
+	width: 19px;
+	height: 19px;
+}
+
+/*******************************************************************************
+Template(s): Player Faction Icons
+Author(s): salle
+*******************************************************************************/
+.faction img {
+	width: 18px;
+	height: 18px;
+	vertical-align: middle;
+	image-rendering: -webkit-optimize-contrast;
+}

stylesheets/commons/Icons.scss

@@ -238,3 +238,98 @@ https://liquipedia.net/commons/Infobox_Icons
 	@include icon-make-image( zhangyutv, "//liquipedia.net/commons/images/c/cf/InfoboxIcon_ZhangyuTV.png" );
 	@include icon-make-image( zhanqitv, "//liquipedia.net/commons/images/b/b0/InfoboxIcon_ZhanqiTV.png" );
 }
+
+/*******************************************************************************
+Template(s): info-icon
+Author(s): FO-nTTaX
+*******************************************************************************/
+.info-icon {
+	cursor: pointer;
+	height: 12px;
+	width: 12px;
+	background-image: url( data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cdefs%3E%3Cstyle%3E.c%7Bfill%3A%23616161%7D.i%7Bfill%3A%23fff%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ccircle%20class%3D%22c%22%20cx%3D%226%22%20cy%3D%226%22%20r%3D%226%22%2F%3E%3Crect%20class%3D%22i%22%20x%3D%225%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3Cpolygon%20class%3D%22i%22%20points%3D%224%205%204%206%205%206%205%209%204%209%204%2010%208%2010%208%209%207%209%207%205%204%205%22%2F%3E%3C%2Fsvg%3E );
+	background-size: contain;
+	background-repeat: no-repeat;
+	background-color: transparent;
+	image-rendering: -webkit-optimize-contrast;
+	display: inline-block;
+}
+
+/*******************************************************************************
+Template(s): 16px Icons
+Author(s): iMarbot
+*******************************************************************************/
+.icon-16px {
+	vertical-align: middle;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	min-height: 16px;
+	min-width: 16px;
+}
+
+.icon-16px img {
+	max-width: 16px;
+	max-height: 16px;
+	height: auto;
+	width: auto;
+}
+
+.icon-16px a {
+	display: contents;
+}
+
+/* dark mode support */
+.icon-16px.darkmode {
+	display: none;
+}
+
+[ data-darkreader-scheme="dark" ],
+.theme--dark {
+	.icon-16px.lightmode {
+		display: none;
+	}
+
+	.icon-16px.darkmode {
+		display: inline-flex;
+	}
+}
+
+/*******************************************************************************
+Template: Darkmode 32px icons
+Author(s): iMarbot
+*******************************************************************************/
+[ data-darkreader-scheme="dark" ],
+.theme--dark {
+	& .vodlink img,
+	.group-table-header-right img {
+		&[ src*="VOD_Icon" ],
+		&[ src*="Match_Info_Stats" ],
+		&[ src*="/Trial.png" ],
+		&[ src*="/Substitution.png" ],
+		&[ src*="Reviews32" ],
+		&[ src*="Preview_Icon32" ],
+		&[ src*="LiveReport32" ],
+		&[ src*="Interview32" ],
+		&[ src*="Highlights_Icon32" ],
+		&[ src*="Captain_Icon" ],
+		&[ src*="Recap_Icon" ] {
+			filter: invert( 1 );
+		}
+	}
+
+	& img[ src*="Vod.svg" ],
+	& img[ src*="Vod-" ] {
+		/* Changes the color of the VOD icon to Secondary 80 ( B3B3B3 ) */
+		filter: invert( 79% ) sepia( 1% ) saturate( 0% ) hue-rotate( 121deg ) brightness( 93% ) contrast( 85% );
+	}
+
+	& img.player-role-icon,
+	.rts-team-list-icon-tag img {
+		&[ src*="/Trial.png" ],
+		&[ src*="/Substitution.png" ],
+		&[ src*="Captain_Icon" ] {
+			filter: invert( 1 );
+		}
+	}
+}

stylesheets/commons/Images.scss

@@ -60,3 +60,41 @@ div.thumbinner {
 .tright .thumbinner {
 	min-width: 6.25rem;
 }
+
+/*******************************************************************************
+Template(s): Images without license information
+Author(s): FO-nTTaX
+*******************************************************************************/
+.logged-in img.image-license-issue {
+	border: 5px solid #ff0000 !important;
+	box-sizing: border-box !important;
+}
+
+/*******************************************************************************
+Template(s): Darkmode images on file pages
+Author(s): FO-nTTaX, iMarbot
+*******************************************************************************/
+html:not( [ data-darkreader-scheme="dark" ] ):not( .theme--dark ) {
+	#file img[ src*="darkmode" ]:not( :hover ),
+	.searchResultImage img[ src*="darkmode" ],
+	.gallerybox img[ src*="darkmode" ] {
+		background-color: #272727;
+	}
+}
+
+#file img[ src*="lightmode" ]:not( :hover ),
+.searchResultImage img[ src*="lightmode" ],
+.gallerybox img[ src*="lightmode" ] {
+	@at-root [ data-darkreader-scheme="dark" ] & {
+		background-color: #808080;
+	}
+
+	@at-root .theme--dark & {
+		background-color: #d8d8d8;
+	}
+}
+
+.filehistory a img[ src*="darkmode" ],
+#file img[ src*="darkmode" ]:hover {
+	background: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAHElEQVQY02MUZoAADijNxIAG6CPAArP/x8C6AwCutQE9GsmfRAAAAABJRU5ErkJggg== ) repeat;
+}

stylesheets/commons/Infobox.scss

@@ -444,3 +444,45 @@ Author(s): iMarbot
 		padding: 15px 15px 0;
 	}
 }
+
+/*******************************************************************************
+Template(s): InfoboxIconSmall
+Author(s): iMarbot
+*******************************************************************************/
+.infobox-icon-small img {
+	max-width: 20px;
+	max-height: 20px;
+	vertical-align: top;
+}
+
+.infobox-icon-small .team-template-image img {
+	max-width: unset;
+	max-height: unset;
+}
+
+.infobox-icon-small span.league-icon-small-image {
+	width: 20px;
+	height: 20px;
+}
+
+/*******************************************************************************
+Template(s): Upcoming and ongoing games of
+Author(s): FO-nTTaX
+*******************************************************************************/
+.infobox-upcoming-ongoing-matches {
+	width: 100%;
+
+	@media ( min-width: 601px ) {
+		float: right;
+		clear: right;
+		max-width: 300px;
+		margin: 0 0 10px 10px;
+	}
+
+	#{&}-header {
+		font-size: 130%;
+		font-weight: bold;
+		text-align: center;
+		padding: 2px;
+	}
+}

stylesheets/commons/LiquipediaLinks.scss

@@ -0,0 +1,109 @@
+/*******************************************************************************
+Template(s): Liquipedia links
+Author(s): FO-nTTaX, Elysienna
+*******************************************************************************/
+@keyframes badgePopAnimation {
+	0% {
+		transform: scale( 0 );
+	}
+
+	50% {
+		transform: scale( 1.2 );
+	}
+
+	100% {
+		transform: scale( 1 );
+	}
+}
+
+@keyframes badgeTooltipAnimation {
+	0% {
+		transform: translateX( 97% );
+		opacity: 0;
+	}
+
+	20% {
+		transform: translateX( 100% );
+		opacity: 1;
+	}
+
+	90% {
+		transform: translateX( 100% );
+		opacity: 1;
+	}
+
+	99% {
+		transform: translateX( 97% );
+		opacity: 0;
+	}
+
+	100% {
+		visibility: hidden;
+		pointer-events: none;
+	}
+}
+
+.liquipedia-links-badge {
+	position: absolute;
+	top: 0.0625rem;
+	padding: 0.125rem 0.25rem;
+	right: 0;
+	font-size: 0.75rem;
+	display: flex;
+	animation-name: badgePopAnimation;
+	animation-delay: 1s;
+	animation-duration: 0.4s;
+	animation-fill-mode: forwards;
+	transform: scale( 0 );
+	border-radius: 0.5rem;
+
+	&--tooltip {
+		background-color: #ffffff;
+		position: absolute;
+		color: var( --clr-secondary-39 );
+		border-radius: 0.25rem;
+		font-size: 0.75rem;
+		font-family: "Open Sans", sans-serif;
+		font-weight: bold;
+		padding: 0.125rem 0.25rem;
+		top: 0.0625rem;
+		right: -0.5rem;
+		z-index: 1;
+		opacity: 0;
+		box-shadow: 0 0 0.625rem 0 rgba( 0, 0, 0, 0.5 );
+		animation-name: badgePopAnimation;
+		animation-delay: 2s;
+		animation-duration: 4s;
+		animation-fill-mode: forwards;
+		line-height: 1.2;
+
+		@media screen and ( max-width: 767px ) {
+			width: 30vw;
+			white-space: normal;
+		}
+
+		&::before {
+			content: "";
+			position: absolute;
+			top: 0.25rem;
+			left: -0.3125rem;
+			width: 0;
+			height: 0;
+			border-top: 4px solid transparent;
+			border-bottom: 4px solid transparent;
+			border-right: 5px solid var( --clr-primary-100 );
+		}
+	}
+
+	&-mobile {
+		position: relative;
+		top: -5px;
+		padding: 2px 4px;
+		left: 0;
+		margin-right: 3px;
+	}
+}
+
+.menu-italic {
+	font-style: italic;
+}

stylesheets/commons/Mainpage.scss

@@ -769,3 +769,27 @@ Author(s): FO-nTTaX
 #images-taken-on-this-day img[ src*="darkmode" ] {
 	background-color: #272727;
 }
+
+/*******************************************************************************
+Template: Sad box for main page
+Author(s): FO-nTTaX
+*******************************************************************************/
+.sadbox {
+	border: 1px solid #000000;
+	color: #ffffff;
+	font-size: 18px;
+	text-align: center;
+	border-radius: 0.5rem;
+	overflow: hidden;
+
+	a {
+		background-color: #464646;
+		color: #ffffff !important;
+		display: block;
+		padding: 10px;
+
+		&:hover {
+			background-color: #232323;
+		}
+	}
+}