From 3eaf5662ec52d2e6528d2f9706897dd3ac61ff11 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Sat, 28 Mar 2026 10:10:16 +0900 Subject: [PATCH 01/19] move infobox styles --- stylesheets/commons/Infobox.scss | 42 ++++++++++++++++++++++++++ stylesheets/commons/Miscellaneous.scss | 42 -------------------------- 2 files changed, 42 insertions(+), 42 deletions(-) diff --git a/stylesheets/commons/Infobox.scss b/stylesheets/commons/Infobox.scss index 0e7bf6fe077..6092cb034fa 100644 --- a/stylesheets/commons/Infobox.scss +++ b/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; + } +} diff --git a/stylesheets/commons/Miscellaneous.scss b/stylesheets/commons/Miscellaneous.scss index 045fd4d3d9d..c846efd2e53 100644 --- a/stylesheets/commons/Miscellaneous.scss +++ b/stylesheets/commons/Miscellaneous.scss @@ -330,28 +330,6 @@ Author(s): FO-nTTaX } } -/******************************************************************************* -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; - } -} - /******************************************************************************* Template(s): LeagueIconSmall Author(s): FO-nTTaX @@ -1583,26 +1561,6 @@ tr.stats-row:nth-child( 2n+1 ) { } } -/******************************************************************************* -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): Legends of Runeterra region colors Author(s): Darkrai From 2da9fb6a11f2270c07c1587bbc1bff827e72940d Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Sat, 28 Mar 2026 10:10:43 +0900 Subject: [PATCH 02/19] move icon styles --- stylesheets/commons/Icons.scss | 40 ++++++++++++++++++++++++++ stylesheets/commons/Miscellaneous.scss | 40 -------------------------- 2 files changed, 40 insertions(+), 40 deletions(-) diff --git a/stylesheets/commons/Icons.scss b/stylesheets/commons/Icons.scss index a312c83d001..8e60c6a51aa 100644 --- a/stylesheets/commons/Icons.scss +++ b/stylesheets/commons/Icons.scss @@ -238,3 +238,43 @@ 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): 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; + } +} diff --git a/stylesheets/commons/Miscellaneous.scss b/stylesheets/commons/Miscellaneous.scss index c846efd2e53..5f7c822a504 100644 --- a/stylesheets/commons/Miscellaneous.scss +++ b/stylesheets/commons/Miscellaneous.scss @@ -1715,46 +1715,6 @@ Author(s): Rapture height: 29px; } -/******************************************************************************* -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(s): Responsive floats Author(s): FO-nTTaX From 0d2786bb355a77d8fada2899a5a1ae4d57e40fd1 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Sat, 28 Mar 2026 10:11:54 +0900 Subject: [PATCH 03/19] move image styles --- stylesheets/commons/Images.scss | 29 ++++++++++++++++++++++++++ stylesheets/commons/Miscellaneous.scss | 29 -------------------------- 2 files changed, 29 insertions(+), 29 deletions(-) diff --git a/stylesheets/commons/Images.scss b/stylesheets/commons/Images.scss index db63d596aa1..782db5e6ac1 100644 --- a/stylesheets/commons/Images.scss +++ b/stylesheets/commons/Images.scss @@ -60,3 +60,32 @@ div.thumbinner { .tright .thumbinner { min-width: 6.25rem; } + +/******************************************************************************* +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; +} diff --git a/stylesheets/commons/Miscellaneous.scss b/stylesheets/commons/Miscellaneous.scss index 5f7c822a504..0ae2c40b1e8 100644 --- a/stylesheets/commons/Miscellaneous.scss +++ b/stylesheets/commons/Miscellaneous.scss @@ -1937,35 +1937,6 @@ Author(s): Vogan, salle width: 160px; } -/******************************************************************************* -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; -} - /******************************************************************************* Template/Module: Recent games // Recent matches ( for new Bracket/Match System ) Author(s): hjpalpha From dff7d3f85faf97b4e6daf3400c940b4c4012f770 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Sat, 28 Mar 2026 10:12:41 +0900 Subject: [PATCH 04/19] move sadbox styles --- stylesheets/commons/Mainpage.scss | 24 ++++++++++++++++++++++++ stylesheets/commons/Miscellaneous.scss | 24 ------------------------ 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/stylesheets/commons/Mainpage.scss b/stylesheets/commons/Mainpage.scss index e3bad969567..448627c84eb 100644 --- a/stylesheets/commons/Mainpage.scss +++ b/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; + } + } +} diff --git a/stylesheets/commons/Miscellaneous.scss b/stylesheets/commons/Miscellaneous.scss index 0ae2c40b1e8..0dd07b3e585 100644 --- a/stylesheets/commons/Miscellaneous.scss +++ b/stylesheets/commons/Miscellaneous.scss @@ -1991,30 +1991,6 @@ Author(s): hjpalpha font-weight: bold; } -/******************************************************************************* -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; - } - } -} - /******************************************************************************* Template: LightModeDarkMode Use case: Display images, text, ... only in light or only in darkmode From c7f854a55d748a95efa3b2cdea05fee5b645f066 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Sat, 28 Mar 2026 14:34:36 +0900 Subject: [PATCH 05/19] move style for image without license --- stylesheets/commons/Images.scss | 9 +++++++++ stylesheets/commons/Miscellaneous.scss | 9 --------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/stylesheets/commons/Images.scss b/stylesheets/commons/Images.scss index 782db5e6ac1..10aee0731cb 100644 --- a/stylesheets/commons/Images.scss +++ b/stylesheets/commons/Images.scss @@ -61,6 +61,15 @@ div.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 diff --git a/stylesheets/commons/Miscellaneous.scss b/stylesheets/commons/Miscellaneous.scss index 0dd07b3e585..0f4af0201e1 100644 --- a/stylesheets/commons/Miscellaneous.scss +++ b/stylesheets/commons/Miscellaneous.scss @@ -8,15 +8,6 @@ Author(s): FO-nTTaX /* isolation: isolate; */ } -/******************************************************************************* -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): Documentation Author(s): FO-nTTaX From 1c3aa79c546ebe139d2cc04248fb9d7c3ae496c3 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Sat, 28 Mar 2026 14:35:23 +0900 Subject: [PATCH 06/19] move info-icon style --- stylesheets/commons/Icons.scss | 16 ++++++++++++++++ stylesheets/commons/Miscellaneous.scss | 16 ---------------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/stylesheets/commons/Icons.scss b/stylesheets/commons/Icons.scss index 8e60c6a51aa..2cf0566d339 100644 --- a/stylesheets/commons/Icons.scss +++ b/stylesheets/commons/Icons.scss @@ -239,6 +239,22 @@ https://liquipedia.net/commons/Infobox_Icons @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 diff --git a/stylesheets/commons/Miscellaneous.scss b/stylesheets/commons/Miscellaneous.scss index 0f4af0201e1..d150d7ca50d 100644 --- a/stylesheets/commons/Miscellaneous.scss +++ b/stylesheets/commons/Miscellaneous.scss @@ -55,22 +55,6 @@ Author(s): FO-nTTaX display: none; } -/******************************************************************************* -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): Flags Author(s): FO-nTTaX, salle From c1dad73ff2fef2c3e94fcb0102660a985bc95779 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Sat, 28 Mar 2026 14:37:13 +0900 Subject: [PATCH 07/19] move prizepooltable style --- stylesheets/commons/Miscellaneous.scss | 10 ---------- stylesheets/commons/Prizepooltable.scss | 5 +++++ 2 files changed, 5 insertions(+), 10 deletions(-) diff --git a/stylesheets/commons/Miscellaneous.scss b/stylesheets/commons/Miscellaneous.scss index d150d7ca50d..dbe7283787e 100644 --- a/stylesheets/commons/Miscellaneous.scss +++ b/stylesheets/commons/Miscellaneous.scss @@ -295,16 +295,6 @@ Author(s): FO-nTTaX font-size: 51px !important; } -/******************************************************************************* -Template(s): Prizepool Tables -Author(s): FO-nTTaX -*******************************************************************************/ -@media ( max-width: 767px ) { - .prizepooltable { - min-width: 100%; - } -} - /******************************************************************************* Template(s): LeagueIconSmall Author(s): FO-nTTaX diff --git a/stylesheets/commons/Prizepooltable.scss b/stylesheets/commons/Prizepooltable.scss index f67f229612b..d07a4286550 100644 --- a/stylesheets/commons/Prizepooltable.scss +++ b/stylesheets/commons/Prizepooltable.scss @@ -2,6 +2,11 @@ Template(s): Prize pool tables Author(s): FO-nTTaX *******************************************************************************/ +@media ( max-width: 767px ) { + .prizepooltable { + min-width: 100%; + } +} table.prizepooltable:not( .collapsed ) .prizepooltableshow, table.prizepooltable.collapsed .prizepooltablehide { From 070dab4b70bc7f363fc4fed7bdfbab0cf3570a04 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Sat, 28 Mar 2026 14:38:05 +0900 Subject: [PATCH 08/19] move warcraft race icon style --- stylesheets/commons/Faction.scss | 9 +++++++++ stylesheets/commons/Miscellaneous.scss | 9 --------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/stylesheets/commons/Faction.scss b/stylesheets/commons/Faction.scss index 0e00d8f9f00..2aabb5f9f8f 100644 --- a/stylesheets/commons/Faction.scss +++ b/stylesheets/commons/Faction.scss @@ -141,3 +141,12 @@ 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; +} diff --git a/stylesheets/commons/Miscellaneous.scss b/stylesheets/commons/Miscellaneous.scss index dbe7283787e..31dbc795ff6 100644 --- a/stylesheets/commons/Miscellaneous.scss +++ b/stylesheets/commons/Miscellaneous.scss @@ -339,15 +339,6 @@ span.icon-small.darkmode { } } -/******************************************************************************* -Template(s): Race icons on the Warcraft wiki -Author(s): FO-nTTaX -*******************************************************************************/ -.wiki-warcraft .race-icon-small img { - width: 19px; - height: 19px; -} - /******************************************************************************* Template(s): Timelines Author(s): FO-nTTaX From b0f4722b3c52987904ba91f6c4f04b4354c34f48 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Sat, 28 Mar 2026 14:40:59 +0900 Subject: [PATCH 09/19] move liquipedia links styles to separate stylesheet --- stylesheets/Main.scss | 1 + stylesheets/commons/LiquipediaLinks.scss | 109 ++++++++++++++++++++++ stylesheets/commons/Miscellaneous.scss | 110 ----------------------- 3 files changed, 110 insertions(+), 110 deletions(-) create mode 100644 stylesheets/commons/LiquipediaLinks.scss diff --git a/stylesheets/Main.scss b/stylesheets/Main.scss index 6b492cf170f..8de98f227e2 100644 --- a/stylesheets/Main.scss +++ b/stylesheets/Main.scss @@ -33,6 +33,7 @@ @use "commons/Matchseries"; @use "commons/MatchTable"; @use "commons/NavigationCard"; +@use "commons/LiquipediaLinks"; @use "commons/Miscellaneous"; @use "commons/BigMatch"; @use "commons/BootstrapVisibility"; diff --git a/stylesheets/commons/LiquipediaLinks.scss b/stylesheets/commons/LiquipediaLinks.scss new file mode 100644 index 00000000000..602de7d74a0 --- /dev/null +++ b/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; +} diff --git a/stylesheets/commons/Miscellaneous.scss b/stylesheets/commons/Miscellaneous.scss index 31dbc795ff6..c3d0f029488 100644 --- a/stylesheets/commons/Miscellaneous.scss +++ b/stylesheets/commons/Miscellaneous.scss @@ -131,116 +131,6 @@ Author(s): FO-nTTaX } } -/******************************************************************************* -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; -} - /******************************************************************************* Template(s): Box Author(s): FO-nTTaX From f15ac2de3f64e3c2885391cdfa894112b28f309e Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Sat, 28 Mar 2026 14:43:16 +0900 Subject: [PATCH 10/19] move timeline styles to separate stylesheet --- stylesheets/Main.scss | 1 + stylesheets/commons/Miscellaneous.scss | 109 ------------------------- stylesheets/commons/Timeline.scss | 108 ++++++++++++++++++++++++ 3 files changed, 109 insertions(+), 109 deletions(-) create mode 100644 stylesheets/commons/Timeline.scss diff --git a/stylesheets/Main.scss b/stylesheets/Main.scss index 8de98f227e2..4777ac74945 100644 --- a/stylesheets/Main.scss +++ b/stylesheets/Main.scss @@ -34,6 +34,7 @@ @use "commons/MatchTable"; @use "commons/NavigationCard"; @use "commons/LiquipediaLinks"; +@use "commons/Timeline"; @use "commons/Miscellaneous"; @use "commons/BigMatch"; @use "commons/BootstrapVisibility"; diff --git a/stylesheets/commons/Miscellaneous.scss b/stylesheets/commons/Miscellaneous.scss index c3d0f029488..0834d152106 100644 --- a/stylesheets/commons/Miscellaneous.scss +++ b/stylesheets/commons/Miscellaneous.scss @@ -229,115 +229,6 @@ span.icon-small.darkmode { } } -/******************************************************************************* -Template(s): Timelines -Author(s): FO-nTTaX -*******************************************************************************/ -.timeline { - border: 1px solid var( --table-border-color, #dddddd ); - vertical-align: middle; -} - -.timeline-inner { - overflow: hidden; -} - -.timeline-heading { - font-size: 200%; - text-align: center; - vertical-align: middle; - border-bottom: 1px solid var( --table-border-color, #dddddd ); -} - -.timeline-row { - vertical-align: middle; - - &:nth-of-type( 2n ) { - background-color: #eeeeee; - } - - > div { - vertical-align: middle; - display: inline-block; - position: relative; - height: 35px; - padding: 4px; - - &:nth-of-type( 1 ) { - width: 150px; - line-height: 27px; - font-weight: bold; - } - - &:nth-of-type( 2 ) { - width: calc( 100% - 150px ); - } - } -} - -.timeline-period { - position: absolute; - top: 5px; - height: 25px; - background-color: #bbbbbb; -} - -.timeline-lines { - display: flex; - justify-content: space-between; - padding-left: 150px; -} - -.timeline-line { - width: 0; - border-left: 1px solid var( --table-border-color, #333333 ); - opacity: 0.5; - height: 5000px; - margin-top: -5000px; - pointer-events: none; -} - -.timeline-footer { - display: flex; - justify-content: space-between; - height: 92px; - padding-left: 150px; - border-top: 1px solid var( --table-border-color, #dddddd ); - - &-date { - width: 24px; - - &-inner { - padding: 4px; - transform: rotate( 90deg ); - margin-top: 0; - } - } -} - -.timeline-header-sc { - padding: 0; - text-align: center; - margin: 0 0 0 0 !important; - float: right; - table-layout: fixed; -} - -.timeline-now-sc { - position: absolute; - height: 100%; - border-right: 1px dotted var( --table-border-color, #9a9a9a ); - width: 1px; -} - -.timeline-team-element-sc { - border: 1px solid #9a9a9a; - padding-top: 5px; - height: 40px; - background-color: var( --table-variant-background-color, #eeeeee ); - text-align: center; -} - /******************************************************************************* Template(s): Progress bars Author(s): FO-nTTaX diff --git a/stylesheets/commons/Timeline.scss b/stylesheets/commons/Timeline.scss new file mode 100644 index 00000000000..e9387bd09bf --- /dev/null +++ b/stylesheets/commons/Timeline.scss @@ -0,0 +1,108 @@ +/******************************************************************************* +Template(s): Timelines +Author(s): FO-nTTaX +*******************************************************************************/ +.timeline { + border: 1px solid var( --table-border-color, #dddddd ); + vertical-align: middle; +} + +.timeline-inner { + overflow: hidden; +} + +.timeline-heading { + font-size: 200%; + text-align: center; + vertical-align: middle; + border-bottom: 1px solid var( --table-border-color, #dddddd ); +} + +.timeline-row { + vertical-align: middle; + + &:nth-of-type( 2n ) { + background-color: #eeeeee; + } + + > div { + vertical-align: middle; + display: inline-block; + position: relative; + height: 35px; + padding: 4px; + + &:nth-of-type( 1 ) { + width: 150px; + line-height: 27px; + font-weight: bold; + } + + &:nth-of-type( 2 ) { + width: calc( 100% - 150px ); + } + } +} + +.timeline-period { + position: absolute; + top: 5px; + height: 25px; + background-color: #bbbbbb; +} + +.timeline-lines { + display: flex; + justify-content: space-between; + padding-left: 150px; +} + +.timeline-line { + width: 0; + border-left: 1px solid var( --table-border-color, #333333 ); + opacity: 0.5; + height: 5000px; + margin-top: -5000px; + pointer-events: none; +} + +.timeline-footer { + display: flex; + justify-content: space-between; + height: 92px; + padding-left: 150px; + border-top: 1px solid var( --table-border-color, #dddddd ); + + &-date { + width: 24px; + + &-inner { + padding: 4px; + transform: rotate( 90deg ); + margin-top: 0; + } + } +} + +.timeline-header-sc { + padding: 0; + text-align: center; + margin: 0 0 0 0 !important; + float: right; + table-layout: fixed; +} + +.timeline-now-sc { + position: absolute; + height: 100%; + border-right: 1px dotted var( --table-border-color, #9a9a9a ); + width: 1px; +} + +.timeline-team-element-sc { + border: 1px solid #9a9a9a; + padding-top: 5px; + height: 40px; + background-color: var( --table-variant-background-color, #eeeeee ); + text-align: center; +} From 22fe660a93ab4299aa305fee2f059f04d1243e24 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Sat, 28 Mar 2026 14:44:28 +0900 Subject: [PATCH 11/19] move spellcard styles to separate stylesheet --- stylesheets/Main.scss | 1 + stylesheets/commons/Miscellaneous.scss | 98 -------------------------- stylesheets/commons/SpellCard.scss | 97 +++++++++++++++++++++++++ 3 files changed, 98 insertions(+), 98 deletions(-) create mode 100644 stylesheets/commons/SpellCard.scss diff --git a/stylesheets/Main.scss b/stylesheets/Main.scss index 4777ac74945..bf145471998 100644 --- a/stylesheets/Main.scss +++ b/stylesheets/Main.scss @@ -35,6 +35,7 @@ @use "commons/NavigationCard"; @use "commons/LiquipediaLinks"; @use "commons/Timeline"; +@use "commons/SpellCard"; @use "commons/Miscellaneous"; @use "commons/BigMatch"; @use "commons/BootstrapVisibility"; diff --git a/stylesheets/commons/Miscellaneous.scss b/stylesheets/commons/Miscellaneous.scss index 0834d152106..44598a6df41 100644 --- a/stylesheets/commons/Miscellaneous.scss +++ b/stylesheets/commons/Miscellaneous.scss @@ -273,104 +273,6 @@ Author(s): FO-nTTaX } } -/******************************************************************************* -Template(s): SpellCard -Author(s): FO-nTTaX, Rapture -*******************************************************************************/ -.spellcard-wrapper { - display: flex; - flex-wrap: wrap; - margin: 10px 0; - - .hr { - height: 0.125rem; - } - - @media ( max-width: 600px ) { - display: block; - } -} - -.spellcard { - display: inline-block; - max-width: 550px; - clear: both; - border-width: 1px; - border-style: solid; - background-color: var( --clr-surface-2, #eeeeee ); - margin-right: 1em; - - @media ( max-width: 600px ) { - margin-right: 0; - max-width: none; - } - - @media ( min-width: 2560px ) { - /* spazer's test changes */ - /* Make spellcards wider for wide screens */ - max-width: 700px; - } -} - -.spellcard-description { - display: inline-block; - width: calc( 100% - 124px ); - border-width: 1px 0; - border-style: solid; - padding: 5px 0; - margin: 0 5px; - - @media ( max-width: 600px ) { - width: auto; - } -} - -.spellcard-infotable { - display: block; - clear: left; - vertical-align: top; - padding-bottom: 5px; - margin: 5px 5px 0 5px; - - th { - display: inline; - padding-right: 5px; - vertical-align: top; - white-space: nowrap; - } - - td { - display: inline-block; - vertical-align: top; - } -} - -.spellcard-interactions { - display: block; - vertical-align: top; - - th { - padding: 3px 5px 0 0; - vertical-align: top; - } - - td { - padding-top: 3px; - vertical-align: top; - } -} - -.spellcard-notes { - display: inline-block; - vertical-align: top; - flex: 1 0 400px; - padding-top: 5px; - - @media ( max-width: 600px ) { - flex: none; - } -} - /* Allow limiting of which header levels are shown in a TOC;
, for instance, will limit to showing ==headings== and ===headings=== but no further diff --git a/stylesheets/commons/SpellCard.scss b/stylesheets/commons/SpellCard.scss new file mode 100644 index 00000000000..3fa3d6f4f10 --- /dev/null +++ b/stylesheets/commons/SpellCard.scss @@ -0,0 +1,97 @@ +/******************************************************************************* +Template(s): SpellCard +Author(s): FO-nTTaX, Rapture +*******************************************************************************/ +.spellcard-wrapper { + display: flex; + flex-wrap: wrap; + margin: 10px 0; + + .hr { + height: 0.125rem; + } + + @media ( max-width: 600px ) { + display: block; + } +} + +.spellcard { + display: inline-block; + max-width: 550px; + clear: both; + border-width: 1px; + border-style: solid; + background-color: var( --clr-surface-2, #eeeeee ); + margin-right: 1em; + + @media ( max-width: 600px ) { + margin-right: 0; + max-width: none; + } + + @media ( min-width: 2560px ) { + /* spazer's test changes */ + /* Make spellcards wider for wide screens */ + max-width: 700px; + } +} + +.spellcard-description { + display: inline-block; + width: calc( 100% - 124px ); + border-width: 1px 0; + border-style: solid; + padding: 5px 0; + margin: 0 5px; + + @media ( max-width: 600px ) { + width: auto; + } +} + +.spellcard-infotable { + display: block; + clear: left; + vertical-align: top; + padding-bottom: 5px; + margin: 5px 5px 0 5px; + + th { + display: inline; + padding-right: 5px; + vertical-align: top; + white-space: nowrap; + } + + td { + display: inline-block; + vertical-align: top; + } +} + +.spellcard-interactions { + display: block; + vertical-align: top; + + th { + padding: 3px 5px 0 0; + vertical-align: top; + } + + td { + padding-top: 3px; + vertical-align: top; + } +} + +.spellcard-notes { + display: inline-block; + vertical-align: top; + flex: 1 0 400px; + padding-top: 5px; + + @media ( max-width: 600px ) { + flex: none; + } +} From 270b7611dcf79cbed68d8ec039e71c0795e4dd27 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Sat, 28 Mar 2026 14:46:50 +0900 Subject: [PATCH 12/19] remove smw specific styles --- stylesheets/commons/Miscellaneous.scss | 20 -------------------- 1 file changed, 20 deletions(-) diff --git a/stylesheets/commons/Miscellaneous.scss b/stylesheets/commons/Miscellaneous.scss index 44598a6df41..e6478e1fd5e 100644 --- a/stylesheets/commons/Miscellaneous.scss +++ b/stylesheets/commons/Miscellaneous.scss @@ -669,26 +669,6 @@ Author(s): Rapture } } -/******************************************************************************* -Template(s): SMW EventCalendar -Author(s): Inflicted -*******************************************************************************/ -.srf-eventcalendar img { - width: 18px; - vertical-align: top; - image-rendering: -webkit-optimize-contrast; - float: left; -} - -.srf-eventcalendar .fc-view-agendaDay .fc-event-title { - float: left; - margin-right: 2px; -} - -.srf-eventcalendar .fc-view-agendaDay span.srf-fc-description { - font-size: 80%; -} - /******************************************************************************* Template(s): Match history tables Author(s): Inflicted From cd018eb0350b7239d94ab06312e0c128f3fca88f Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Sat, 28 Mar 2026 14:48:18 +0900 Subject: [PATCH 13/19] move faction icon style --- stylesheets/commons/Faction.scss | 11 +++++++++++ stylesheets/commons/Miscellaneous.scss | 6 ------ 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/stylesheets/commons/Faction.scss b/stylesheets/commons/Faction.scss index 2aabb5f9f8f..aba97ab89bf 100644 --- a/stylesheets/commons/Faction.scss +++ b/stylesheets/commons/Faction.scss @@ -150,3 +150,14 @@ Author(s): FO-nTTaX 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; +} diff --git a/stylesheets/commons/Miscellaneous.scss b/stylesheets/commons/Miscellaneous.scss index e6478e1fd5e..4363afe92c2 100644 --- a/stylesheets/commons/Miscellaneous.scss +++ b/stylesheets/commons/Miscellaneous.scss @@ -873,12 +873,6 @@ img.player-role-icon[ alt="In-Game Leader" ] { image-rendering: -webkit-optimize-contrast; } -.faction img { - width: 18px; - height: 18px; - vertical-align: middle; - image-rendering: -webkit-optimize-contrast; -} /******************************************************************************* Template(s): Building settings table, Button translation Author(s): salle From 9f6a1d7bac526fcf13cfd04526ef1b0d9b8ed041 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Sat, 28 Mar 2026 14:50:02 +0900 Subject: [PATCH 14/19] move placement styles to separate stylesheet --- stylesheets/Main.scss | 1 + stylesheets/commons/Miscellaneous.scss | 97 -------------------------- stylesheets/commons/Placement.scss | 96 +++++++++++++++++++++++++ 3 files changed, 97 insertions(+), 97 deletions(-) create mode 100644 stylesheets/commons/Placement.scss diff --git a/stylesheets/Main.scss b/stylesheets/Main.scss index bf145471998..c88ee79ee58 100644 --- a/stylesheets/Main.scss +++ b/stylesheets/Main.scss @@ -36,6 +36,7 @@ @use "commons/LiquipediaLinks"; @use "commons/Timeline"; @use "commons/SpellCard"; +@use "commons/Placement"; @use "commons/Miscellaneous"; @use "commons/BigMatch"; @use "commons/BootstrapVisibility"; diff --git a/stylesheets/commons/Miscellaneous.scss b/stylesheets/commons/Miscellaneous.scss index 4363afe92c2..adb93b6cc70 100644 --- a/stylesheets/commons/Miscellaneous.scss +++ b/stylesheets/commons/Miscellaneous.scss @@ -890,103 +890,6 @@ kbd { font-family: "Open Sans", sans-serif; } -/******************************************************************************* -Template(s): Achievement Table Placement Numbers -Author(s): spazer, Lafungo -*******************************************************************************/ -.placement-text { - text-shadow: 1px 1px rgba( 64, 64, 64, 0.4 ), 1px -1px rgba( 64, 64, 64, 0.4 ), -1px -1px rgba( 64, 64, 64, 0.4 ), -1px 1px rgba( 64, 64, 64, 0.4 ); - font-weight: bold; - color: #ffffff; -} - -.placement-box { - display: flex; - justify-content: center; - align-items: center; - align-self: center; - border-radius: 0.25rem; - padding: 0 0.5rem; - min-width: 2.75rem; - height: 1.5rem; - font-size: 0.8125rem; - line-height: 1.25; -} - -.placement-1 { - background-color: var( --achievement-placement-1, #ffd739 ); //rgb( 255, 221, 60 ); -} - -.placement-2 { - background-color: var( --achievement-placement-2, #bebebe ); //rgb( 154, 154, 154 ); -} - -.placement-3 { - background-color: var( --achievement-placement-3, #bb8644 ); //rgb( 177, 132, 42 ); -} - -.placement-4 { - background-color: var( --achievement-placement-4, #f8996b ); -} - -.placement-5 { - background-color: var( --achievement-placement-5, #27a4a4 ); -} - -.placement-6 { - background-color: var( --achievement-placement-6, #1e7d7d ); -} - -.placement-lightblue { - background-color: var( --achievement-placement-lightblue, #007f99 ); -} - -.placement-blue { - background-color: var( --achievement-placement-blue, #166f82 ); -} - -.placement-darkblue { - background-color: var( --achievement-placement-darkblue, #2d606b ); -} - -.placement-darkgrey { - background-color: var( --achievement-placement-darkgrey, #445154 ); -} - -.placement-win { - background-color: var( --achievement-placement-win, #009e60 ); -} - -.placement-draw { - background-color: var( --achievement-placement-draw, #d2b48c ); -} - -.placement-lose { - background-color: var( --achievement-placement-lose, #dddddd ); -} - -.placement-up { - background-color: var( --achievement-placement-up, #89e069 ); -} - -.placement-stay { - background-color: var( --achievement-placement-stay, #fede68 ); -} - -.placement-down { - background-color: var( --achievement-placement-down, #ff6f6f ); -} - -.placement-dnp { - background-color: var( --achievement-placement-dnp, #d0d0d0 ); -} - -.green-check { - color: #00a901; - font-size: 14px; - vertical-align: middle; -} - /******************************************************************************* Template(s): Mobile LeagueCards Author(s): iMarbot diff --git a/stylesheets/commons/Placement.scss b/stylesheets/commons/Placement.scss new file mode 100644 index 00000000000..607ae73aa41 --- /dev/null +++ b/stylesheets/commons/Placement.scss @@ -0,0 +1,96 @@ +/******************************************************************************* +Template(s): Achievement Table Placement Numbers +Author(s): spazer, Lafungo +*******************************************************************************/ +.placement-text { + text-shadow: 1px 1px rgba( 64, 64, 64, 0.4 ), 1px -1px rgba( 64, 64, 64, 0.4 ), -1px -1px rgba( 64, 64, 64, 0.4 ), -1px 1px rgba( 64, 64, 64, 0.4 ); + font-weight: bold; + color: #ffffff; +} + +.placement-box { + display: flex; + justify-content: center; + align-items: center; + align-self: center; + border-radius: 0.25rem; + padding: 0 0.5rem; + min-width: 2.75rem; + height: 1.5rem; + font-size: 0.8125rem; + line-height: 1.25; +} + +.placement-1 { + background-color: var( --achievement-placement-1, #ffd739 ); //rgb( 255, 221, 60 ); +} + +.placement-2 { + background-color: var( --achievement-placement-2, #bebebe ); //rgb( 154, 154, 154 ); +} + +.placement-3 { + background-color: var( --achievement-placement-3, #bb8644 ); //rgb( 177, 132, 42 ); +} + +.placement-4 { + background-color: var( --achievement-placement-4, #f8996b ); +} + +.placement-5 { + background-color: var( --achievement-placement-5, #27a4a4 ); +} + +.placement-6 { + background-color: var( --achievement-placement-6, #1e7d7d ); +} + +.placement-lightblue { + background-color: var( --achievement-placement-lightblue, #007f99 ); +} + +.placement-blue { + background-color: var( --achievement-placement-blue, #166f82 ); +} + +.placement-darkblue { + background-color: var( --achievement-placement-darkblue, #2d606b ); +} + +.placement-darkgrey { + background-color: var( --achievement-placement-darkgrey, #445154 ); +} + +.placement-win { + background-color: var( --achievement-placement-win, #009e60 ); +} + +.placement-draw { + background-color: var( --achievement-placement-draw, #d2b48c ); +} + +.placement-lose { + background-color: var( --achievement-placement-lose, #dddddd ); +} + +.placement-up { + background-color: var( --achievement-placement-up, #89e069 ); +} + +.placement-stay { + background-color: var( --achievement-placement-stay, #fede68 ); +} + +.placement-down { + background-color: var( --achievement-placement-down, #ff6f6f ); +} + +.placement-dnp { + background-color: var( --achievement-placement-dnp, #d0d0d0 ); +} + +.green-check { + color: #00a901; + font-size: 14px; + vertical-align: middle; +} From 90f2e7e836aa6d7941538d02de6b2fc6f688837a Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Sat, 28 Mar 2026 14:51:20 +0900 Subject: [PATCH 15/19] move more icon styles --- stylesheets/commons/Icons.scss | 39 ++++++++++++++++++++++++++ stylesheets/commons/Miscellaneous.scss | 39 -------------------------- 2 files changed, 39 insertions(+), 39 deletions(-) diff --git a/stylesheets/commons/Icons.scss b/stylesheets/commons/Icons.scss index 2cf0566d339..de10d73bc44 100644 --- a/stylesheets/commons/Icons.scss +++ b/stylesheets/commons/Icons.scss @@ -294,3 +294,42 @@ Author(s): iMarbot 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 ); + } + } +} diff --git a/stylesheets/commons/Miscellaneous.scss b/stylesheets/commons/Miscellaneous.scss index adb93b6cc70..b5f0f6af697 100644 --- a/stylesheets/commons/Miscellaneous.scss +++ b/stylesheets/commons/Miscellaneous.scss @@ -1575,45 +1575,6 @@ Author(s): iMarbot } } -/******************************************************************************* -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 ); - } - } -} - /******************************************************************************* Template: Bans filter Author(s): trev From 04bca6886dc20dd41cf5567d8f0f25e0fe2d0cb8 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Sat, 28 Mar 2026 14:57:19 +0900 Subject: [PATCH 16/19] move statstable style --- stylesheets/commons/Miscellaneous.scss | 5 ----- stylesheets/commons/Statisticstable.scss | 1 + 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/stylesheets/commons/Miscellaneous.scss b/stylesheets/commons/Miscellaneous.scss index b5f0f6af697..edbca75276e 100644 --- a/stylesheets/commons/Miscellaneous.scss +++ b/stylesheets/commons/Miscellaneous.scss @@ -477,11 +477,6 @@ span.vodlink.darkmode { } } -/* random bits */ -.statstable { - white-space: nowrap; -} - /******************************************************************************* Template(s): Rumour row Author(s): Vogan diff --git a/stylesheets/commons/Statisticstable.scss b/stylesheets/commons/Statisticstable.scss index d8aa4255239..c28254c4e4c 100644 --- a/stylesheets/commons/Statisticstable.scss +++ b/stylesheets/commons/Statisticstable.scss @@ -4,6 +4,7 @@ Author(s): Clubfan *******************************************************************************/ .statstable { text-align: center; + white-space: nowrap; } .statstable .stats-map-row .stats-map-name { From 046925792285e17162829bbfa9fe4ecce1f637de Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Sat, 28 Mar 2026 14:59:59 +0900 Subject: [PATCH 17/19] remove unused style --- stylesheets/commons/Miscellaneous.scss | 104 ------------------------- 1 file changed, 104 deletions(-) diff --git a/stylesheets/commons/Miscellaneous.scss b/stylesheets/commons/Miscellaneous.scss index edbca75276e..b9eb32ef9e9 100644 --- a/stylesheets/commons/Miscellaneous.scss +++ b/stylesheets/commons/Miscellaneous.scss @@ -560,110 +560,6 @@ td.mbox-text { width: 100%; } -/******************************************************************************* -Template(s): Stand-in table -Author(s): Rapture -*******************************************************************************/ -.stand-in-card { - margin: 0 0 10px 0; - white-space: nowrap; - - > tbody { - > tr > th { - background-color: var( --clr-surface-4, #f5f5f5 ); - font-weight: bold; - padding: 5px; - - &.large-only[ colspan="1" ] { - display: none; - - @media screen and ( max-width: 750px ) { - display: table-cell; - } - } - - @media screen and ( max-width: 750px ) { - &.large-only[ colspan="10" ] { - display: none; - } - } - } - - > tr.Players { - display: table-row; - border-top: 1px solid #bbbbbb; - - @media screen and ( max-width: 750px ) { - display: block; - padding: 5px; - } - - > td { - display: table-cell; - line-height: 1.42857143; - padding: 5px; - - @media screen and ( max-width: 750px ) { - display: inline-block; - line-height: 1.42857143; - border: 0; - padding: 0; - - &.Player { - clear: left; - float: left; - padding: 0 5px 5px 0; - } - - &.PlayerName { - font-style: italic; - font-size: small; - float: left; - margin-top: 1px; - padding-bottom: 5px; - } - - &.PlayerTeam { - float: right; - } - - &.Tournaments { - display: block; - width: auto; - text-align: left; - padding: 5px 0 0 10px; - margin: 0 5px; - border-top: 1px solid var( --clr-border, #bbbbbb ); - clear: both; - } - } - - &.TeamPlayerIn { - padding: 2px 0 0 0; - } - - > .MobileStuff { - display: none; - - @media screen and ( max-width: 750px ) { - display: inline-block; - } - } - } - } - } - - @media screen and ( max-width: 750px ) { - width: 100% !important; - max-width: 425px; - border: 1px solid var( --clr-border, #bbbbbb ); - - > tbody > tr.HeaderRow { - display: none; - } - } -} - /******************************************************************************* Template(s): Match history tables Author(s): Inflicted From 50490250f54bb2a316daa3a4609c565196d8c37e Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Sat, 28 Mar 2026 15:05:16 +0900 Subject: [PATCH 18/19] remove duplicate styles --- stylesheets/commons/Miscellaneous.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/stylesheets/commons/Miscellaneous.scss b/stylesheets/commons/Miscellaneous.scss index b9eb32ef9e9..680778352ba 100644 --- a/stylesheets/commons/Miscellaneous.scss +++ b/stylesheets/commons/Miscellaneous.scss @@ -1048,11 +1048,6 @@ Author(s): iMarbot } } -.img-responsive img { - max-width: 100%; - height: auto; -} - .grouptable td.prizepooltabletoggle { text-align: center; } From 44fef23da2531da16afab9a5054d96b547030820 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Mon, 30 Mar 2026 10:40:45 +0900 Subject: [PATCH 19/19] remove unused styles --- stylesheets/commons/Miscellaneous.scss | 32 -------------------------- 1 file changed, 32 deletions(-) diff --git a/stylesheets/commons/Miscellaneous.scss b/stylesheets/commons/Miscellaneous.scss index 680778352ba..a55bfaae66d 100644 --- a/stylesheets/commons/Miscellaneous.scss +++ b/stylesheets/commons/Miscellaneous.scss @@ -622,20 +622,6 @@ Author(s): Ricci Template(s): Mobile Group Tables, Match Lists & Showmatches Author(s): iMarbot *******************************************************************************/ -@media ( min-width: 321px ) { - .grouptable-team-mobile, - .matchlist-team-mobile { - display: none; - } -} - -@media ( max-width: 320px ) { - .grouptable-team-full, - .matchlist-team-full { - display: none; - } -} - @media ( max-width: 435px ) { .table.table-bordered.grouptable, .wikitable.matchlist, @@ -651,24 +637,6 @@ Author(s): iMarbot } } -@media ( min-width: 431px ) { - .showmatch-team-mobile { - display: none; - } -} - -@media ( max-width: 435px ) { - .showmatch-team-full { - display: none; - } -} - -@media ( min-width: 300px ) { - .popover { - min-width: 275px; - } -} - /******************************************************************************* Template(s): Misc Mobile Improvements Author(s): iMarbot