From 480875da1a6c0ef032feb5cf94aa62bd78bdc06a Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Tue, 16 Jun 2026 10:06:17 +0900 Subject: [PATCH 1/3] nowrap --- stylesheets/commons/Miscellaneous.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/stylesheets/commons/Miscellaneous.scss b/stylesheets/commons/Miscellaneous.scss index 9b60fe62ad7..b6396c2544a 100644 --- a/stylesheets/commons/Miscellaneous.scss +++ b/stylesheets/commons/Miscellaneous.scss @@ -1324,6 +1324,7 @@ Author(s): spazer, Lafungo height: 1.5rem; font-size: 0.8125rem; line-height: 1.25; + white-space: nowrap; } $placement-colors: ( From fe29644e686716a62ec0d9698e9559de05d40983 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Tue, 16 Jun 2026 10:09:44 +0900 Subject: [PATCH 2/3] extract placement to separate stylesheet --- stylesheets/Main.scss | 1 + stylesheets/commons/Miscellaneous.scss | 62 -------------------------- stylesheets/commons/Placement.scss | 61 +++++++++++++++++++++++++ 3 files changed, 62 insertions(+), 62 deletions(-) create mode 100644 stylesheets/commons/Placement.scss diff --git a/stylesheets/Main.scss b/stylesheets/Main.scss index 8dda35a0607..78a6dd7e2b4 100644 --- a/stylesheets/Main.scss +++ b/stylesheets/Main.scss @@ -47,6 +47,7 @@ @use "commons/Navbox"; @use "commons/OpponentList"; @use "commons/Panels"; +@use "commons/Placement"; @use "commons/Prizepooltable"; @use "commons/Quote"; @use "commons/Selectall"; diff --git a/stylesheets/commons/Miscellaneous.scss b/stylesheets/commons/Miscellaneous.scss index b6396c2544a..6c7b00ded9a 100644 --- a/stylesheets/commons/Miscellaneous.scss +++ b/stylesheets/commons/Miscellaneous.scss @@ -1303,68 +1303,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; - white-space: nowrap; -} - -$placement-colors: ( - "1": ( var( --clr-semantic-gold-40 ), var( --clr-semantic-gold-30 ) ), - "2": ( var( --clr-semantic-silver-40 ) ), - "3": ( var( --clr-semantic-bronze-40 ), var( --clr-semantic-bronze-30 ) ), - "4": ( var( --clr-semantic-copper-40 ), var( --clr-semantic-copper-30 ) ), - "5": ( var( --clr-elm-40 ), var( --clr-elm-30 ) ), - "6": ( var( --clr-elm-30 ), var( --clr-elm-20 ) ), - "lightblue": ( var( --clr-elm-40 ), color-mix( in srgb, #000000 20%, var( --clr-elm-40 ) ) ), - "blue": ( var( --clr-elm-30 ), color-mix( in srgb, #000000 20%, var( --clr-elm-30 ) ) ), - "darkblue": ( var( --clr-elm-20 ), color-mix( in srgb, #000000 20%, var( --clr-elm-20 ) ) ), - "darkgrey": ( var( --clr-elm-10 ) ), - "win": ( var( --clr-semantic-positive-40 ), var( --clr-semantic-positive-20 ) ), - "draw": ( var( --clr-tuliptree-80 ), var( --clr-tuliptree-40 ) ), - "lose": ( var( --clr-secondary-80 ), var( --clr-secondary-25 ) ), - "up": ( var( --clr-atlantis-40 ), var( --clr-atlantis-30 ) ), - "stay": ( var( --clr-sun-40 ), var( --clr-sun-30 ) ), - "down": ( color-mix( in srgb, #ffffff 30%, var( --clr-semantic-negative-40 ) ), var( --clr-semantic-negative-30 ) ), - "dnp": ( var( --clr-moon-80 ), color-mix( in srgb, #000000 20%, var( --clr-moon-80 ) ) ), -); - -@each $name, $colors in $placement-colors { - .placement-#{$name} { - @if length( $colors ) == 2 { - .theme--light & { - background-color: nth( $colors, 1 ); - } - - .theme--dark & { - background-color: nth( $colors, 2 ); - } - } - - @else { - background-color: nth( $colors, 1 ); - } - } -} - .green-check { color: #00a901; font-size: 14px; diff --git a/stylesheets/commons/Placement.scss b/stylesheets/commons/Placement.scss new file mode 100644 index 00000000000..8ba9b121b23 --- /dev/null +++ b/stylesheets/commons/Placement.scss @@ -0,0 +1,61 @@ +/******************************************************************************* +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; + white-space: nowrap; +} + +$placement-colors: ( + "1": ( var( --clr-semantic-gold-40 ), var( --clr-semantic-gold-30 ) ), + "2": ( var( --clr-semantic-silver-40 ) ), + "3": ( var( --clr-semantic-bronze-40 ), var( --clr-semantic-bronze-30 ) ), + "4": ( var( --clr-semantic-copper-40 ), var( --clr-semantic-copper-30 ) ), + "5": ( var( --clr-elm-40 ), var( --clr-elm-30 ) ), + "6": ( var( --clr-elm-30 ), var( --clr-elm-20 ) ), + "lightblue": ( var( --clr-elm-40 ), color-mix( in srgb, #000000 20%, var( --clr-elm-40 ) ) ), + "blue": ( var( --clr-elm-30 ), color-mix( in srgb, #000000 20%, var( --clr-elm-30 ) ) ), + "darkblue": ( var( --clr-elm-20 ), color-mix( in srgb, #000000 20%, var( --clr-elm-20 ) ) ), + "darkgrey": ( var( --clr-elm-10 ) ), + "win": ( var( --clr-semantic-positive-40 ), var( --clr-semantic-positive-20 ) ), + "draw": ( var( --clr-tuliptree-80 ), var( --clr-tuliptree-40 ) ), + "lose": ( var( --clr-secondary-80 ), var( --clr-secondary-25 ) ), + "up": ( var( --clr-atlantis-40 ), var( --clr-atlantis-30 ) ), + "stay": ( var( --clr-sun-40 ), var( --clr-sun-30 ) ), + "down": ( color-mix( in srgb, #ffffff 30%, var( --clr-semantic-negative-40 ) ), var( --clr-semantic-negative-30 ) ), + "dnp": ( var( --clr-moon-80 ), color-mix( in srgb, #000000 20%, var( --clr-moon-80 ) ) ), +); + +@each $name, $colors in $placement-colors { + .placement-#{$name} { + @if length( $colors ) == 2 { + .theme--light & { + background-color: nth( $colors, 1 ); + } + + .theme--dark & { + background-color: nth( $colors, 2 ); + } + } + + @else { + background-color: nth( $colors, 1 ); + } + } +} From b45a874a8dc150464996d1f0858598c293ce1d07 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Tue, 16 Jun 2026 10:30:14 +0900 Subject: [PATCH 3/3] use mixin instead --- stylesheets/commons/Placement.scss | 52 +++++++++++++----------------- 1 file changed, 22 insertions(+), 30 deletions(-) diff --git a/stylesheets/commons/Placement.scss b/stylesheets/commons/Placement.scss index 8ba9b121b23..fcd9de530a2 100644 --- a/stylesheets/commons/Placement.scss +++ b/stylesheets/commons/Placement.scss @@ -22,40 +22,32 @@ Author(s): spazer, Lafungo white-space: nowrap; } -$placement-colors: ( - "1": ( var( --clr-semantic-gold-40 ), var( --clr-semantic-gold-30 ) ), - "2": ( var( --clr-semantic-silver-40 ) ), - "3": ( var( --clr-semantic-bronze-40 ), var( --clr-semantic-bronze-30 ) ), - "4": ( var( --clr-semantic-copper-40 ), var( --clr-semantic-copper-30 ) ), - "5": ( var( --clr-elm-40 ), var( --clr-elm-30 ) ), - "6": ( var( --clr-elm-30 ), var( --clr-elm-20 ) ), - "lightblue": ( var( --clr-elm-40 ), color-mix( in srgb, #000000 20%, var( --clr-elm-40 ) ) ), - "blue": ( var( --clr-elm-30 ), color-mix( in srgb, #000000 20%, var( --clr-elm-30 ) ) ), - "darkblue": ( var( --clr-elm-20 ), color-mix( in srgb, #000000 20%, var( --clr-elm-20 ) ) ), - "darkgrey": ( var( --clr-elm-10 ) ), - "win": ( var( --clr-semantic-positive-40 ), var( --clr-semantic-positive-20 ) ), - "draw": ( var( --clr-tuliptree-80 ), var( --clr-tuliptree-40 ) ), - "lose": ( var( --clr-secondary-80 ), var( --clr-secondary-25 ) ), - "up": ( var( --clr-atlantis-40 ), var( --clr-atlantis-30 ) ), - "stay": ( var( --clr-sun-40 ), var( --clr-sun-30 ) ), - "down": ( color-mix( in srgb, #ffffff 30%, var( --clr-semantic-negative-40 ) ), var( --clr-semantic-negative-30 ) ), - "dnp": ( var( --clr-moon-80 ), color-mix( in srgb, #000000 20%, var( --clr-moon-80 ) ) ), -); - -@each $name, $colors in $placement-colors { +@mixin placement-color($name, $lightmode-color, $darkmode-color: false) { .placement-#{$name} { - @if length( $colors ) == 2 { - .theme--light & { - background-color: nth( $colors, 1 ); - } + background-color: $lightmode-color; + @if $darkmode-color { .theme--dark & { - background-color: nth( $colors, 2 ); + background-color: $darkmode-color; } } - - @else { - background-color: nth( $colors, 1 ); - } } } + +@include placement-color( 1, var( --clr-semantic-gold-40 ), var( --clr-semantic-gold-30 ) ); +@include placement-color( 2, var( --clr-semantic-silver-40 ) ); +@include placement-color( 3, var( --clr-semantic-bronze-40 ), var( --clr-semantic-bronze-30 ) ); +@include placement-color( 4, var( --clr-semantic-copper-40 ), var( --clr-semantic-copper-30 ) ); +@include placement-color( 5, var( --clr-elm-40 ), var( --clr-elm-30 ) ); +@include placement-color( 6, var( --clr-elm-30 ), var( --clr-elm-20 ) ); +@include placement-color( "lightblue", var( --clr-elm-40 ), color-mix( in srgb, #000000 20%, var( --clr-elm-40 ) ) ); +@include placement-color( "blue", var( --clr-elm-30 ), color-mix( in srgb, #000000 20%, var( --clr-elm-30 ) ) ); +@include placement-color( "darkblue", var( --clr-elm-20 ), color-mix( in srgb, #000000 20%, var( --clr-elm-20 ) ) ); +@include placement-color( "darkgrey", var( --clr-elm-10 ) ); +@include placement-color( "win", var( --clr-semantic-positive-40 ), var( --clr-semantic-positive-20 ) ); +@include placement-color( "draw", var( --clr-tuliptree-80 ), var( --clr-tuliptree-40 ) ); +@include placement-color( "lose", var( --clr-secondary-80 ), var( --clr-secondary-25 ) ); +@include placement-color( "up", var( --clr-atlantis-40 ), var( --clr-atlantis-30 ) ); +@include placement-color( "stay", var( --clr-sun-40 ), var( --clr-sun-30 ) ); +@include placement-color( "down", color-mix( in srgb, #ffffff 30%, var( --clr-semantic-negative-40 ) ), var( --clr-semantic-negative-30 ) ); +@include placement-color( "dnp", var( --clr-moon-80 ), color-mix( in srgb, #000000 20%, var( --clr-moon-80 ) ) );