From 14fe73d800f863823066bd18d2efaaac9c65577d Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Sun, 1 Mar 2026 12:29:24 +0900 Subject: [PATCH 1/7] use for loop over recursive call --- stylesheets/commons/Crosstable.scss | 24 ++++++++++-------------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/stylesheets/commons/Crosstable.scss b/stylesheets/commons/Crosstable.scss index b6e20be8522..273054c9951 100644 --- a/stylesheets/commons/Crosstable.scss +++ b/stylesheets/commons/Crosstable.scss @@ -55,36 +55,32 @@ $crosstable-red: var( --table-red-background-color, #fbdfdf ); } @mixin crosstable-col($id, $max) { - @if $id <= $max { - $idp1: $id + 1; - .crosstable.crosstable-col-#{$idp1} td:nth-child(#{$id}) { + @for $i from $id through $max { + $idp1: $i + 1; + .crosstable.crosstable-col-#{$idp1} td:nth-child(#{$i}) { @include crosstable-row-left(); } - .crosstable.crosstable-col-#{$id} td:nth-child(#{$idp1}) { + .crosstable.crosstable-col-#{$i} td:nth-child(#{$idp1}) { @include crosstable-row-right(); } - .crosstable.crosstable-col-#{$id} td:nth-child(#{$id}) { + .crosstable.crosstable-col-#{$i} td:nth-child(#{$i}) { @include crosstable-row-standard(); } - - @include crosstable-col($id + 1, $max); } } @mixin crosstable-row($id, $max) { - @if $id <= $max { - $idp1: $id + 1; - .crosstable.crosstable-row-#{$idp1} tr:nth-child(#{$id}) td { + @for $i from $id through $max { + $idp1: $i + 1; + .crosstable.crosstable-row-#{$idp1} tr:nth-child(#{$i}) td { @include crosstable-row-over(); } - .crosstable.crosstable-row-#{$id} tr:nth-child(#{$idp1}) td { + .crosstable.crosstable-row-#{$i} tr:nth-child(#{$idp1}) td { @include crosstable-row-under(); } - .crosstable.crosstable-row-#{$id} tr:nth-child(#{$id}) td { + .crosstable.crosstable-row-#{$i} tr:nth-child(#{$i}) td { @include crosstable-row-standard(); } - - @include crosstable-row($id + 1, $max); } } From 951de78ad37f320963295ad7c8c5b92c4c9f6d10 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Sun, 1 Mar 2026 12:33:19 +0900 Subject: [PATCH 2/7] clean up vendor prefix variants of box-shadow it's baseline since 2015, so should be safe to kick entirely --- stylesheets/commons/Crosstable.scss | 20 -------------------- 1 file changed, 20 deletions(-) diff --git a/stylesheets/commons/Crosstable.scss b/stylesheets/commons/Crosstable.scss index 273054c9951..4cf1df5e482 100644 --- a/stylesheets/commons/Crosstable.scss +++ b/stylesheets/commons/Crosstable.scss @@ -11,8 +11,6 @@ $crosstable-red: var( --table-red-background-color, #fbdfdf ); .crosstable[ class*="crosstable-row-" ] td, .crosstable[ class*="crosstable-col-" ] td { opacity: 0.5; - -moz-box-shadow: inset 0 0 10px -7px rgba( 0, 0, 0, 1 ), inset 0 0 10px -7px rgba( 0, 0, 0, 1 ); - -webkit-box-shadow: inset 0 0 10px -7px rgba( 0, 0, 0, 1 ), inset 0 0 10px -7px rgba( 0, 0, 0, 1 ); box-shadow: inset 0 0 10px -7px rgba( 0, 0, 0, 1 ), inset 0 0 10px -7px rgba( 0, 0, 0, 1 ); background-color: var( --table-background-color, #ffffff ); background-clip: padding-box; @@ -24,33 +22,23 @@ $crosstable-red: var( --table-red-background-color, #fbdfdf ); } @mixin crosstable-row-over() { - -moz-box-shadow: inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 -10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ); - -webkit-box-shadow: inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 -10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ); box-shadow: inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 -10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ); } @mixin crosstable-row-under() { - -moz-box-shadow: inset 0 10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ); - -webkit-box-shadow: inset 0 10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ); box-shadow: inset 0 10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ); } @mixin crosstable-row-left() { - -moz-box-shadow: inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset -10px 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ); - -webkit-box-shadow: inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset -10px 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ); box-shadow: inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset -10px 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ); } @mixin crosstable-row-right() { - -moz-box-shadow: inset 10px 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ); - -webkit-box-shadow: inset 10px 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ); box-shadow: inset 10px 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ); } @mixin crosstable-row-standard() { opacity: 1 !important; - -moz-box-shadow: unset !important; - -webkit-box-shadow: unset !important; box-shadow: unset !important; } @@ -87,26 +75,18 @@ $crosstable-red: var( --table-red-background-color, #fbdfdf ); @include crosstable-shadows($crosstable-size); .crosstable .crosstable-top-left { - -moz-box-shadow: inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset -10px -10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ) !important; - -webkit-box-shadow: inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset -10px -10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ) !important; box-shadow: inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset -10px -10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ) !important; } .crosstable .crosstable-top-right { - -moz-box-shadow: inset 10px 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 -10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ) !important; - -webkit-box-shadow: inset 10px 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 -10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ) !important; box-shadow: inset 10px 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 -10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ) !important; } .crosstable .crosstable-bottom-left { - -moz-box-shadow: inset 0 10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset -10px 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ) !important; - -webkit-box-shadow: inset 0 10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset -10px 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ) !important; box-shadow: inset 0 10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset -10px 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ) !important; } .crosstable .crosstable-bottom-right { - -moz-box-shadow: inset 10px 10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ) !important; - -webkit-box-shadow: inset 10px 10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ) !important; box-shadow: inset 10px 10px 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ), inset 0 0 10px -7px var( --crosstable-box-shadow-color, rgba( 0, 0, 0, 1 ) ) !important; } From 5b5fb556606da849ceffb22488a8611c6e37fea3 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Sun, 1 Mar 2026 15:07:03 +0900 Subject: [PATCH 3/7] further cleanup --- stylesheets/commons/Crosstable.scss | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/stylesheets/commons/Crosstable.scss b/stylesheets/commons/Crosstable.scss index 4cf1df5e482..bd6911c4299 100644 --- a/stylesheets/commons/Crosstable.scss +++ b/stylesheets/commons/Crosstable.scss @@ -17,8 +17,8 @@ $crosstable-red: var( --table-red-background-color, #fbdfdf ); } @mixin crosstable-shadows($size) { - @include crosstable-col(1, $size); - @include crosstable-row(1, $size); + @include crosstable-col($size); + @include crosstable-row($size); } @mixin crosstable-row-over() { @@ -42,13 +42,12 @@ $crosstable-red: var( --table-red-background-color, #fbdfdf ); box-shadow: unset !important; } -@mixin crosstable-col($id, $max) { - @for $i from $id through $max { - $idp1: $i + 1; - .crosstable.crosstable-col-#{$idp1} td:nth-child(#{$i}) { +@mixin crosstable-col($max) { + @for $i from 1 through $max { + .crosstable.crosstable-col-#{$i + 1} td:nth-child(#{$i}) { @include crosstable-row-left(); } - .crosstable.crosstable-col-#{$i} td:nth-child(#{$idp1}) { + .crosstable.crosstable-col-#{$i} td:nth-child(#{$i + 1}) { @include crosstable-row-right(); } .crosstable.crosstable-col-#{$i} td:nth-child(#{$i}) { @@ -57,13 +56,12 @@ $crosstable-red: var( --table-red-background-color, #fbdfdf ); } } -@mixin crosstable-row($id, $max) { - @for $i from $id through $max { - $idp1: $i + 1; - .crosstable.crosstable-row-#{$idp1} tr:nth-child(#{$i}) td { +@mixin crosstable-row($max) { + @for $i from 1 through $max { + .crosstable.crosstable-row-#{$i + 1} tr:nth-child(#{$i}) td { @include crosstable-row-over(); } - .crosstable.crosstable-row-#{$i} tr:nth-child(#{$idp1}) td { + .crosstable.crosstable-row-#{$i} tr:nth-child(#{$i + 1}) td { @include crosstable-row-under(); } .crosstable.crosstable-row-#{$i} tr:nth-child(#{$i}) td { From 87848151ad726ec37ebbf65171c4b68c5394bcb7 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Sun, 1 Mar 2026 15:13:16 +0900 Subject: [PATCH 4/7] more for loop --- stylesheets/commons/Crosstable.scss | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/stylesheets/commons/Crosstable.scss b/stylesheets/commons/Crosstable.scss index bd6911c4299..100c9f89292 100644 --- a/stylesheets/commons/Crosstable.scss +++ b/stylesheets/commons/Crosstable.scss @@ -89,22 +89,16 @@ $crosstable-red: var( --table-red-background-color, #fbdfdf ); } @mixin crosstable($min, $max) { - @include crosstable-outer($min, $max, $min); -} - -@mixin crosstable-outer($min, $max, $current) { - @if $current <= $max { - @include crosstable-inner($min, $max, $min, $current); - @include crosstable-outer($min, $max, $current + 1); + @for $current from $min through $max { + @include crosstable-inner($min, $max, $current); } } -@mixin crosstable-inner($min, $max, $current, $outer) { - @if $current <= $max { +@mixin crosstable-inner($min, $max, $outer) { + @for $current from $min through $max { @include crosstable-gray($current, $outer); @include crosstable-green($current, $outer); @include crosstable-red($current, $outer); - @include crosstable-inner($min, $max, $current + 1, $outer); } } From 6145cbcc54e3db675b2570134cdafb02fc4592f3 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Sun, 1 Mar 2026 15:22:03 +0900 Subject: [PATCH 5/7] merge into single mixin --- stylesheets/commons/Crosstable.scss | 22 ++++++---------------- 1 file changed, 6 insertions(+), 16 deletions(-) diff --git a/stylesheets/commons/Crosstable.scss b/stylesheets/commons/Crosstable.scss index 100c9f89292..1e73277f0ef 100644 --- a/stylesheets/commons/Crosstable.scss +++ b/stylesheets/commons/Crosstable.scss @@ -96,31 +96,21 @@ $crosstable-red: var( --table-red-background-color, #fbdfdf ); @mixin crosstable-inner($min, $max, $outer) { @for $current from $min through $max { - @include crosstable-gray($current, $outer); - @include crosstable-green($current, $outer); - @include crosstable-red($current, $outer); + @include crosstable-color($current, $outer); } } -@mixin crosstable-gray($s1, $s2) { - @if $s1 == $s2 { - td.crosstable-bgc-r#{$s1}-r#{$s2} { +@mixin crosstable-color($s1, $s2) { + td.crosstable-bgc-r#{$s1}-r#{$s2} { + @if $s1 == $s2 { background-color: $crosstable-yellow; } - } -} -@mixin crosstable-green($s1, $s2) { - @if $s1 > $s2 { - td.crosstable-bgc-r#{$s1}-r#{$s2} { + @else if $s1 > $s2 { background-color: $crosstable-green; } - } -} -@mixin crosstable-red($s1, $s2) { - @if $s1 < $s2 { - td.crosstable-bgc-r#{$s1}-r#{$s2} { + @else if $s1 < $s2 { background-color: $crosstable-red; } } From 1dd83e9ef05ba96c6e0d7426f07d85e1a295d411 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Sun, 1 Mar 2026 15:27:27 +0900 Subject: [PATCH 6/7] remove tautology --- stylesheets/commons/Crosstable.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stylesheets/commons/Crosstable.scss b/stylesheets/commons/Crosstable.scss index 1e73277f0ef..1dcdcebbdcb 100644 --- a/stylesheets/commons/Crosstable.scss +++ b/stylesheets/commons/Crosstable.scss @@ -110,7 +110,7 @@ $crosstable-red: var( --table-red-background-color, #fbdfdf ); background-color: $crosstable-green; } - @else if $s1 < $s2 { + @else { background-color: $crosstable-red; } } From eb473a23967e11724cc906ec811a8ab968933e54 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Sun, 1 Mar 2026 15:32:13 +0900 Subject: [PATCH 7/7] little bit of nesting --- stylesheets/commons/Crosstable.scss | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/stylesheets/commons/Crosstable.scss b/stylesheets/commons/Crosstable.scss index 1dcdcebbdcb..901624699c7 100644 --- a/stylesheets/commons/Crosstable.scss +++ b/stylesheets/commons/Crosstable.scss @@ -177,24 +177,24 @@ $crosstable-red: var( --table-red-background-color, #fbdfdf ); text-align: center; } -.crosstable .crosstable-tr { - height: 30px; -} - .crosstable { text-align: center; margin: 0; line-height: 14px; -} -.crosstable th, -.crosstable td { - padding: 1px; -} + .crosstable-tr { + height: 30px; + } + + th, + td { + padding: 1px; + } -/* fix for i icon in crosstables */ -.crosstable .bracket-game .icon { - margin-top: 2px !important; - margin-right: -6px !important; - opacity: 0.6; + /* fix for i icon in crosstables */ + .bracket-game .icon { + margin-top: 2px !important; + margin-right: -6px !important; + opacity: 0.6; + } }