From dde7223dd8a731939a97e147c4864416260721d5 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Wed, 21 Jan 2026 14:35:21 +0900 Subject: [PATCH 01/24] nest brkts-opponent-entry-left --- stylesheets/commons/Brackets.scss | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/stylesheets/commons/Brackets.scss b/stylesheets/commons/Brackets.scss index 7c99735235e..6ac0b3fb137 100644 --- a/stylesheets/commons/Brackets.scss +++ b/stylesheets/commons/Brackets.scss @@ -199,17 +199,17 @@ display: flex; flex: 1 1; min-width: 0; -} -.brkts-opponent-entry-left > * { - flex: 1 1; - margin-left: 4px; - min-width: 0; -} + > * { + flex: 1 1; + margin-left: 4px; + min-width: 0; + } -.brkts-opponent-entry-left > .block-team { - gap: 2px; - margin-left: 0; + > .block-team { + gap: 2px; + margin-left: 0; + } } .brkts-opponent-entry .team-template-image-icon, From 9fae716798f2a5aba1da72447b9c8152dc343889 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Wed, 21 Jan 2026 14:37:48 +0900 Subject: [PATCH 02/24] nest brkts-opponent-entry --- stylesheets/commons/Brackets.scss | 138 +++++++++++++++--------------- 1 file changed, 70 insertions(+), 68 deletions(-) diff --git a/stylesheets/commons/Brackets.scss b/stylesheets/commons/Brackets.scss index 6ac0b3fb137..092a17d31ae 100644 --- a/stylesheets/commons/Brackets.scss +++ b/stylesheets/commons/Brackets.scss @@ -171,93 +171,95 @@ font-size: 11px; line-height: 1.55; position: relative; -} - -.brkts-opponent-entry:first-child { - margin-top: -1px; -} -.brkts-opponent-entry.brkts-opponent-entry-last { - margin-bottom: -1px; -} - -.brkts-opponent-win { - font-weight: bold; -} + &:first-child { + margin-top: -1px; + } -.brkts-opponent-entry.brkts-opponent-hover { - transition: 0.5s; - transition-property: border-color; -} + &.brkts-opponent-entry-last { + margin-bottom: -1px; + } -.brkts-opponent-entry.brkts-opponent-hover-active { - border-color: transparent; -} + &.brkts-opponent-hover { + transition: 0.5s; + transition-property: border-color; -.brkts-opponent-entry-left { - align-items: center; - display: flex; - flex: 1 1; - min-width: 0; + &-active { + border-color: transparent; + } + } - > * { + &-left { + align-items: center; + display: flex; flex: 1 1; - margin-left: 4px; min-width: 0; - } - > .block-team { - gap: 2px; - margin-left: 0; + > * { + flex: 1 1; + margin-left: 4px; + min-width: 0; + } + + > .block-team { + gap: 2px; + margin-left: 0; + } } -} -.brkts-opponent-entry .team-template-image-icon, -.brkts-opponent-entry .team-template-image-legacy { - display: inline-flex; - justify-content: center; - height: 18px; -} + .team-template-image-icon, + .team-template-image-legacy { + display: inline-flex; + justify-content: center; + height: 18px; -.brkts-opponent-entry .visible-xs .team-template-image-icon, -.brkts-opponent-entry .visible-xs .team-template-image-legacy { - height: 12px; -} + img, + i { + align-self: center; + } + } -.brkts-opponent-entry .team-template-image-icon img, -.brkts-opponent-entry .team-template-image-legacy img, -.brkts-opponent-entry .team-template-image-icon i, -.brkts-opponent-entry .team-template-image-legacy i { - align-self: center; -} + .visible-xs { + .team-template-image-icon, + .team-template-image-legacy { + height: 12px; + } -.brkts-opponent-entry .hidden-xs img { - max-height: 18px; - max-width: 44px; -} + img { + max-height: 12px; + max-width: 30px; + } -.brkts-opponent-entry .hidden-xs .team-template-image-icon { - height: 18px; - width: 44px; -} + .team-template-image-icon { + height: 12px; + width: 30px; + } -.brkts-opponent-entry .visible-xs img { - max-height: 12px; - max-width: 30px; -} + > .name { + margin-left: -1px; + } + } -.brkts-opponent-entry .visible-xs .team-template-image-icon { - height: 12px; - width: 30px; -} + .hidden-xs { + img { + max-height: 18px; + max-width: 44px; + } -.brkts-opponent-entry .visible-xs > .name { - margin-left: -1px; + .team-template-image-icon { + height: 18px; + width: 44px; + } + } + + .brkts-opponent-block-literal { + padding-left: 3px; + color: var( --clr-on-background, #373737 ); + } } -.brkts-opponent-entry .brkts-opponent-block-literal { - padding-left: 3px; - color: var( --clr-on-background, #373737 ); +.brkts-opponent-win { + font-weight: bold; } .brkts-opponent-win .flag + .name { From 6ff87441b9e41fe38a6f5dd304fab9bbb670eb50 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Wed, 21 Jan 2026 14:45:02 +0900 Subject: [PATCH 03/24] nest flipped rule --- stylesheets/commons/Brackets.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/stylesheets/commons/Brackets.scss b/stylesheets/commons/Brackets.scss index 092a17d31ae..6d9d096311a 100644 --- a/stylesheets/commons/Brackets.scss +++ b/stylesheets/commons/Brackets.scss @@ -20,11 +20,10 @@ .brkts-opponent-block-literal { font-style: italic; padding-right: 2px; -} -.block-literal.flipped, -.brkts-opponent-block-literal.flipped { - text-align: right; + &.flipped { + text-align: right; + } } .block-literal > .name { From dea0c29c2c77b9b0396eb209eb6a6fa736f8ca5e Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Wed, 21 Jan 2026 14:48:08 +0900 Subject: [PATCH 04/24] nest remaining opponententry rules --- stylesheets/commons/Brackets.scss | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/stylesheets/commons/Brackets.scss b/stylesheets/commons/Brackets.scss index 6d9d096311a..2e57a3f6e56 100644 --- a/stylesheets/commons/Brackets.scss +++ b/stylesheets/commons/Brackets.scss @@ -255,23 +255,23 @@ padding-left: 3px; color: var( --clr-on-background, #373737 ); } + + @media ( max-width: 768px ) { + .block-player > .flag { + display: none; + } + } } .brkts-opponent-win { font-weight: bold; -} -.brkts-opponent-win .flag + .name { - margin-left: -1px; -} - -.brkts-opponent-win .block-team > .name { - margin-left: -1px; -} + .flag + .name { + margin-left: -1px; + } -@media ( max-width: 768px ) { - .brkts-opponent-entry .block-player > .flag { - display: none; + .block-team > .name { + margin-left: -1px; } } From 98a4a0362cdd3a5fd42064ba12bd35e48eefbdee Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Wed, 21 Jan 2026 14:52:38 +0900 Subject: [PATCH 05/24] nest matchlist cell rules --- stylesheets/commons/Brackets.scss | 64 +++++++++++++++---------------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/stylesheets/commons/Brackets.scss b/stylesheets/commons/Brackets.scss index 2e57a3f6e56..cf1c5d24db6 100644 --- a/stylesheets/commons/Brackets.scss +++ b/stylesheets/commons/Brackets.scss @@ -376,49 +376,49 @@ padding: 5px; transition: 0.5s; transition-property: box-shadow, border-color; -} -.brkts-matchlist-cell:first-child { - border-left: 0; -} + &:first-child { + border-left: 0; + } -.brkts-matchlist-cell:nth-child( 1 ), -.brkts-matchlist-cell:nth-child( 2 ) { - border-right: 1px solid var( --table-border-color, #bbbbbb ); -} + &:nth-child( 1 ), + &:nth-child( 2 ) { + border-right: 1px solid var( --table-border-color, #bbbbbb ); + } -.brkts-matchlist-cell:nth-child( 4 ), -.brkts-matchlist-cell:nth-child( 5 ) { - border-left: 1px solid var( --table-border-color, #bbbbbb ); -} + &:nth-child( 4 ), + &:nth-child( 5 ) { + border-left: 1px solid var( --table-border-color, #bbbbbb ); + } -.brkts-hover > .brkts-matchlist-cell { - box-shadow: inset 0 6px 8px -5px rgba( 0, 0, 0, 0.4 ), inset 0 -6px 8px -5px rgba( 0, 0, 0, 0.4 ); + .brkts-hover > & { + box-shadow: inset 0 6px 8px -5px rgba( 0, 0, 0, 0.4 ), inset 0 -6px 8px -5px rgba( 0, 0, 0, 0.4 ); - .theme--dark & { - box-shadow: inset 0 6px 8px -5px rgba( 255, 255, 255, 0.4 ), inset 0 -6px 8px -5px rgba( 255, 255, 255, 0.4 ); + .theme--dark & { + box-shadow: inset 0 6px 8px -5px rgba( 255, 255, 255, 0.4 ), inset 0 -6px 8px -5px rgba( 255, 255, 255, 0.4 ); + } } -} -.brkts-matchlist-cell.brkts-opponent-hover-active { - border-color: transparent; -} + &.brkts-opponent-hover-active { + border-color: transparent; -.brkts-matchlist-cell.brkts-opponent-hover-active:nth-child( 1 )::after, -.brkts-matchlist-cell.brkts-opponent-hover-active:nth-child( 4 )::after { - box-shadow: -1px 0 2px rgba( 0, 0, 0, 0.7 ), 0 1px 2px rgba( 0, 0, 0, 0.7 ), 0 -1px 2px rgba( 0, 0, 0, 0.7 ); + &:nth-child( 1 )::after, + &:nth-child( 4 )::after { + box-shadow: -1px 0 2px rgba( 0, 0, 0, 0.7 ), 0 1px 2px rgba( 0, 0, 0, 0.7 ), 0 -1px 2px rgba( 0, 0, 0, 0.7 ); - .theme--dark & { - box-shadow: -1px 0 2px rgba( 255, 255, 255, 0.7 ), 0 1px 2px rgba( 255, 255, 255, 0.7 ), 0 -1px 2px rgba( 255, 255, 255, 0.7 ); - } -} + .theme--dark & { + box-shadow: -1px 0 2px rgba( 255, 255, 255, 0.7 ), 0 1px 2px rgba( 255, 255, 255, 0.7 ), 0 -1px 2px rgba( 255, 255, 255, 0.7 ); + } + } -.brkts-matchlist-cell.brkts-opponent-hover-active:nth-child( 2 )::after, -.brkts-matchlist-cell.brkts-opponent-hover-active:nth-child( 5 )::after { - box-shadow: 1px 0 2px rgba( 0, 0, 0, 0.7 ), 0 1px 2px rgba( 0, 0, 0, 0.7 ), 0 -1px 2px rgba( 0, 0, 0, 0.7 ); + &:nth-child( 2 )::after, + &:nth-child( 5 )::after { + box-shadow: 1px 0 2px rgba( 0, 0, 0, 0.7 ), 0 1px 2px rgba( 0, 0, 0, 0.7 ), 0 -1px 2px rgba( 0, 0, 0, 0.7 ); - .theme--dark & { - box-shadow: 1px 0 2px rgba( 255, 255, 255, 0.7 ), 0 1px 2px rgba( 255, 255, 255, 0.7 ), 0 -1px 2px rgba( 255, 255, 255, 0.7 ); + .theme--dark & { + box-shadow: 1px 0 2px rgba( 255, 255, 255, 0.7 ), 0 1px 2px rgba( 255, 255, 255, 0.7 ), 0 -1px 2px rgba( 255, 255, 255, 0.7 ); + } + } } } From 7cc7a8b79154b7ca2caaf7120fc83ecf2c727820 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Wed, 21 Jan 2026 14:54:29 +0900 Subject: [PATCH 06/24] nest matchlist winner slot rules --- stylesheets/commons/Brackets.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/stylesheets/commons/Brackets.scss b/stylesheets/commons/Brackets.scss index cf1c5d24db6..990d3777380 100644 --- a/stylesheets/commons/Brackets.scss +++ b/stylesheets/commons/Brackets.scss @@ -433,18 +433,18 @@ min-width: 0; } -.theme--dark .brkts-matchlist-slot-winner { - background-color: var( --table-green-background-color, #ddf4dd ); - box-shadow: inset 0 0 0 2px var( --table-green-border-color, transparent ); -} - .brkts-matchlist-slot-winner { font-weight: bold; background-color: #ddf4dd; -} -.brkts-matchlist-slot-winner .flag + .name { - margin-left: -1px; + .theme--dark & { + background-color: var( --table-green-background-color, #ddf4dd ); + box-shadow: inset 0 0 0 2px var( --table-green-border-color, transparent ); + } + + .flag + .name { + margin-left: -1px; + } } .brkts-matchlist .brkts-opponent-block-literal { From 69311c942b32d898c71049796fdb7e99bb469e60 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Thu, 22 Jan 2026 09:46:30 +0900 Subject: [PATCH 07/24] nest block-player rules --- stylesheets/commons/Brackets.scss | 46 +++++++++++++++---------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/stylesheets/commons/Brackets.scss b/stylesheets/commons/Brackets.scss index 990d3777380..a24cd7c48f3 100644 --- a/stylesheets/commons/Brackets.scss +++ b/stylesheets/commons/Brackets.scss @@ -1020,37 +1020,37 @@ div.brkts-popup-body-element-thumbs { .block-player { display: flex; align-items: center; -} -.block-player.has-team { - width: 100%; -} + &.has-team { + width: 100%; + } -.block-players-wrapper { - width: 100%; -} + &.flipped { + flex-direction: row-reverse; -.block-player.flipped { - flex-direction: row-reverse; -} + > .name { + text-align: right; + } -.block-player > .name { - flex: 1 1; - min-width: 0; -} + > .flag { + margin-left: 4px; + margin-right: 0; + } + } -.block-player.flipped > .name { - text-align: right; -} + & > .name { + flex: 1 1; + min-width: 0; + } -.block-player > .flag { - margin-right: 4px; - flex: 0 0; + > .flag { + margin-right: 4px; + flex: 0 0; + } } -.block-player.flipped > .flag { - margin-left: 4px; - margin-right: 0; +.block-players-wrapper { + width: 100%; } .note { From 3836cb0a023df70890be5e1a7f6ad0be7f84d7a0 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Thu, 22 Jan 2026 09:51:16 +0900 Subject: [PATCH 08/24] nest block-team rules --- stylesheets/commons/Brackets.scss | 46 ++++++++++++++----------------- 1 file changed, 21 insertions(+), 25 deletions(-) diff --git a/stylesheets/commons/Brackets.scss b/stylesheets/commons/Brackets.scss index a24cd7c48f3..d1601ea9e06 100644 --- a/stylesheets/commons/Brackets.scss +++ b/stylesheets/commons/Brackets.scss @@ -1064,41 +1064,37 @@ div.brkts-popup-body-element-thumbs { display: flex; gap: 4px; width: 100%; -} -@media ( max-width: 768px ) { - .block-team { + @media ( max-width: 768px ) { gap: 2px; } -} -.block-team > .name { - flex: 1 1; - min-width: 0; -} + > .name { + flex: 1 1; + min-width: 0; + } -.block-team > .team-template-team-icon { - display: contents; - flex: 0 0; -} + > .team-template-team-icon { + display: contents; + flex: 0 0; -@supports not ( display: contents ) { - .block-team > .team-template-team-icon { - display: block; + @supports not ( display: contents ) { + display: block; + } } -} -.block-team.flipped { - flex-direction: row-reverse; -} + &.flipped { + flex-direction: row-reverse; -.block-team.flipped > .name { - text-align: right; -} + > .name { + text-align: right; + } + } -.block-team-hide-link { - cursor: default; - pointer-events: none; + &-hide-link { + cursor: default; + pointer-events: none; + } } @media ( max-width: 767px ) { From 3a1912ae8257b99ebc68eb6382dc599cee49f933 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Thu, 22 Jan 2026 09:52:42 +0900 Subject: [PATCH 09/24] nest champion icon rules --- stylesheets/commons/Brackets.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/stylesheets/commons/Brackets.scss b/stylesheets/commons/Brackets.scss index d1601ea9e06..e2f730b0f63 100644 --- a/stylesheets/commons/Brackets.scss +++ b/stylesheets/commons/Brackets.scss @@ -994,12 +994,12 @@ div.brkts-popup-body-element-thumbs { .brkts-champion-icon img { object-fit: cover; -} -@media ( hover: hover ) { - .brkts-champion-icon img:hover { - transform: scale( 2 ) translateY( 0.0625rem ); // added 1px to Y-center the image - object-fit: contain; + @media ( hover: hover ) { + &:hover { + transform: scale( 2 ) translateY( 0.0625rem ); // added 1px to Y-center the image + object-fit: contain; + } } } From c5d175df6afa164a5a92fa823b5f98fa0877c49e Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Thu, 22 Jan 2026 09:52:57 +0900 Subject: [PATCH 10/24] nest popup side shade rules --- stylesheets/commons/Brackets.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/stylesheets/commons/Brackets.scss b/stylesheets/commons/Brackets.scss index e2f730b0f63..20bba01fda0 100644 --- a/stylesheets/commons/Brackets.scss +++ b/stylesheets/commons/Brackets.scss @@ -1006,11 +1006,11 @@ div.brkts-popup-body-element-thumbs { .brkts-popup-side-shade-out { opacity: 0.5; padding-left: 4px; -} -.brkts-popup-side-shade-out-flipped { - opacity: 0.5; - padding-right: 4px; + &-flipped { + opacity: 0.5; + padding-right: 4px; + } } /** From ed131757aa5b37500d7f1aea8664c523847df744 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Thu, 22 Jan 2026 10:02:16 +0900 Subject: [PATCH 11/24] cleanup mapveto rules --- stylesheets/commons/Brackets.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/stylesheets/commons/Brackets.scss b/stylesheets/commons/Brackets.scss index 20bba01fda0..96db71adecb 100644 --- a/stylesheets/commons/Brackets.scss +++ b/stylesheets/commons/Brackets.scss @@ -874,7 +874,7 @@ div.brkts-popup-body-element-thumbs { } } - .brkts-popup-mapveto-vetotype { + #{&}-vetotype { font-weight: bold; color: var( --clr-primary-100 ); border: 0; @@ -884,7 +884,7 @@ div.brkts-popup-body-element-thumbs { padding: 0 0.5rem; } - .brkts-popup-mapveto-pick { + #{&}-pick { .theme--light & { background-color: var( --clr-semantic-positive-40, #27a527 ) !important; } @@ -894,7 +894,7 @@ div.brkts-popup-body-element-thumbs { } } - .brkts-popup-mapveto-ban { + #{&}-ban { .theme--light & { background-color: var( --clr-semantic-negative-40, #b81414 ) !important; } @@ -904,15 +904,15 @@ div.brkts-popup-body-element-thumbs { } } - .brkts-popup-mapveto-defaultban { + #{&}-defaultban { background-color: var( --clr-sapphire-background-color, #c4c5d3 ) !important; } - .brkts-popup-mapveto-decider { + #{&}-decider { background-color: var( --clr-sun-10, #332b00 ) !important; } - .brkts-popup-mapveto-protect { + #{&}-protect { background-color: var( --clr-vividviolet-background-color, #f1d2fa ) !important; } } From 31ed1ba0ca97c7b00b11b6e4697cc274d0c1b501 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Thu, 22 Jan 2026 10:02:44 +0900 Subject: [PATCH 12/24] nest sidewins rules --- stylesheets/commons/Brackets.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/stylesheets/commons/Brackets.scss b/stylesheets/commons/Brackets.scss index 96db71adecb..6e9bca47d23 100644 --- a/stylesheets/commons/Brackets.scss +++ b/stylesheets/commons/Brackets.scss @@ -928,15 +928,15 @@ div.brkts-popup-body-element-thumbs { line-height: 11px; width: 10px; font-weight: 800; -} -.brkts-popup-body-match-sidewins-icon { - width: 24px; + &-icon { + width: 24px; - & img { - [ data-darkreader-scheme="dark" ] &, - .theme--dark & { - filter: invert( 1 ); + img { + [ data-darkreader-scheme="dark" ] &, + .theme--dark & { + filter: invert( 1 ); + } } } } From 3eb3b0cfd67d05eb283ec23030aa04129d9caaf7 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Thu, 22 Jan 2026 10:04:03 +0900 Subject: [PATCH 13/24] nest hover rules --- stylesheets/commons/Brackets.scss | 34 +++++++++++++++---------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/stylesheets/commons/Brackets.scss b/stylesheets/commons/Brackets.scss index 6e9bca47d23..b424723a4e8 100644 --- a/stylesheets/commons/Brackets.scss +++ b/stylesheets/commons/Brackets.scss @@ -1105,26 +1105,26 @@ div.brkts-popup-body-element-thumbs { div.brkts-opponent-hover { position: relative; -} -div.brkts-opponent-hover::after { - content: ""; - height: 100%; - left: 0; - pointer-events: none; - position: absolute; - top: 0; - transition: 0.5s; - transition-property: box-shadow; - width: 100%; - z-index: 5; -} + &::after { + content: ""; + height: 100%; + left: 0; + pointer-events: none; + position: absolute; + top: 0; + transition: 0.5s; + transition-property: box-shadow; + width: 100%; + z-index: 5; + } -div.brkts-opponent-hover-active::after { - box-shadow: -1px 0 2px rgba( 0, 0, 0, 0.7 ), 1px 0 2px rgba( 0, 0, 0, 0.7 ), 0 -1px 2px rgba( 0, 0, 0, 0.7 ), 0 1px 2px rgba( 0, 0, 0, 0.7 ); + &-active::after { + box-shadow: -1px 0 2px rgba( 0, 0, 0, 0.7 ), 1px 0 2px rgba( 0, 0, 0, 0.7 ), 0 -1px 2px rgba( 0, 0, 0, 0.7 ), 0 1px 2px rgba( 0, 0, 0, 0.7 ); - .theme--dark & { - box-shadow: -1px 0 2px rgba( 255, 255, 255, 0.7 ), 1px 0 2px rgba( 255, 255, 255, 0.7 ), 0 -1px 2px rgba( 255, 255, 255, 0.7 ), 0 1px 2px rgba( 255, 255, 255, 0.7 ); + .theme--dark & { + box-shadow: -1px 0 2px rgba( 255, 255, 255, 0.7 ), 1px 0 2px rgba( 255, 255, 255, 0.7 ), 0 -1px 2px rgba( 255, 255, 255, 0.7 ), 0 1px 2px rgba( 255, 255, 255, 0.7 ); + } } } From a9d145358b0e73d18f1c6e43caf06fc6813b9d99 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Thu, 22 Jan 2026 10:07:50 +0900 Subject: [PATCH 14/24] clean up bracket designer rules --- stylesheets/commons/Brackets.scss | 38 +++++++++++++++---------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/stylesheets/commons/Brackets.scss b/stylesheets/commons/Brackets.scss index b424723a4e8..28089bc990b 100644 --- a/stylesheets/commons/Brackets.scss +++ b/stylesheets/commons/Brackets.scss @@ -1134,10 +1134,10 @@ div.brkts-opponent-hover { .brkts-designer { margin-bottom: 40px; -} -.brkts-designer > * { - margin: 10px 0; + > * { + margin: 10px 0; + } } .brkts-designer-template-code { @@ -1145,11 +1145,11 @@ div.brkts-opponent-hover { resize: none; width: 100%; display: none !important; -} -.user-is-sysop .brkts-designer-template-code, -.user-is-reviewer .brkts-designer-template-code { - display: unset !important; + .user-is-sysop &, + .user-is-reviewer & { + display: unset !important; + } } .brkts-designer-bracket-name-row { @@ -1158,10 +1158,10 @@ div.brkts-opponent-hover { .brkts-designer-action-row > button { margin-left: 10px; -} -.brkts-designer-action-row > button:first-child { - margin-left: 0; + &:first-child { + margin-left: 0; + } } .brkts-designer-bracket-name { @@ -1179,15 +1179,15 @@ div.brkts-opponent-hover { margin-top: 10px; padding: 10px; width: 400px; -} -.brkts-designer-import-bracket > input { - flex: 1 1; - min-width: 0; -} + > input { + flex: 1 1; + min-width: 0; + } -.brkts-designer-import-bracket > button { - margin-left: 10px; + > button { + margin-left: 10px; + } } .brkts-designer-match-row { @@ -1196,7 +1196,7 @@ div.brkts-opponent-hover { height: 22px; } -.brkts-designer-small-button.brkts-designer-small-button.brkts-designer-small-button { +.brkts-designer-small-button { background-color: #e0e0e0; border: solid 1px #c0c0c0; display: block; @@ -1214,7 +1214,7 @@ div.brkts-opponent-hover { grid-gap: 4px 10px; } -.brkts-designer-gallery-entry.brkts-designer-gallery-entry.brkts-designer-gallery-entry { +.brkts-designer-gallery-entry { font-size: 0.9rem; } From e82aa30fc3411a48f37ab3d34a552747b84b6cef Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Thu, 22 Jan 2026 10:10:26 +0900 Subject: [PATCH 15/24] clean up bracket generator rules --- stylesheets/commons/Brackets.scss | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/stylesheets/commons/Brackets.scss b/stylesheets/commons/Brackets.scss index 28089bc990b..147058cb5a2 100644 --- a/stylesheets/commons/Brackets.scss +++ b/stylesheets/commons/Brackets.scss @@ -1230,11 +1230,11 @@ div.brkts-opponent-hover { .brkts-template-container-button-wrapper { margin-bottom: 10px; -} -.brkts-template-container-button-wrapper > * { - display: inline-block; - margin-right: 10px; + > * { + display: inline-block; + margin-right: 10px; + } } .brkts-dropdown-wrapper { @@ -1246,20 +1246,20 @@ div.brkts-opponent-hover { position: absolute; background: #cfcfcf; min-width: 150px; -} -.brkts-dropdown-show { - display: block; -} + &-show { + display: block; + } -.brkts-dropdown > * { - padding: 12px 16px; - text-decoration: none; - cursor: pointer; -} + > * { + padding: 12px 16px; + text-decoration: none; + cursor: pointer; -.brkts-dropdown > *:hover { - background: rgba( 0, 0, 0, 0.1 ); + &:hover { + background: rgba( 0, 0, 0, 0.1 ); + } + } } /** From 1c3d7cb562e432ea17ddc5fc7ac2400a63223a71 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Thu, 22 Jan 2026 10:13:22 +0900 Subject: [PATCH 16/24] clean up button-link styles --- stylesheets/commons/Brackets.scss | 52 +++++++++++++++---------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/stylesheets/commons/Brackets.scss b/stylesheets/commons/Brackets.scss index 147058cb5a2..3a8abb8ff94 100644 --- a/stylesheets/commons/Brackets.scss +++ b/stylesheets/commons/Brackets.scss @@ -1334,38 +1334,38 @@ div.brkts-opponent-hover { user-select: none; vertical-align: middle; white-space: nowrap; -} -.button-link:visited, -.button-link:visited:hover { - color: #212529; -} + &:visited, + &:visited:hover { + color: #212529; + } -.button-link:hover, -.button-link:focus { - background-color: #d3d3d3; - border-color: #cdcdcd; - text-decoration: none; -} + &:hover, + &:focus { + background-color: #d3d3d3; + border-color: #cdcdcd; + text-decoration: none; + } -.button-link:focus { - box-shadow: 0 0 0 0 rgba( 200, 201, 202, 0.5 ); - outline: 0; -} + &:focus { + box-shadow: 0 0 0 0 rgba( 200, 201, 202, 0.5 ); + outline: 0; + } -.button-link.disabled { - background-color: #e6e6e6; - border-color: #e6e6e6; - opacity: 0.65; -} + &.disabled { + background-color: #e6e6e6; + border-color: #e6e6e6; + opacity: 0.65; + } -.button-link:not( .disabled ) { - cursor: pointer; -} + &:not( .disabled ) { + cursor: pointer; + } -.button-link:active:not( .disabled ) { - background-color: #cdcdcd; - border-color: #c6c6c6; + &:active:not( .disabled ) { + background-color: #cdcdcd; + border-color: #c6c6c6; + } } /** From 1baa7d0bfe638a75744e9bd1a9da916bdbd942c0 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Thu, 22 Jan 2026 10:13:58 +0900 Subject: [PATCH 17/24] clean up match page button style --- stylesheets/commons/Brackets.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/stylesheets/commons/Brackets.scss b/stylesheets/commons/Brackets.scss index 3a8abb8ff94..b950eb576bb 100644 --- a/stylesheets/commons/Brackets.scss +++ b/stylesheets/commons/Brackets.scss @@ -1375,14 +1375,14 @@ div.brkts-opponent-hover { .bracket-popup-wrapper div.matchpage-button { padding: 5px 10px 10px 10px; align-items: center; -} -.bracket-popup-wrapper div.matchpage-button button { - width: 100%; - font-size: 100%; - font-weight: bold; - background-color: #426ccf; - color: #ffffff; + button { + width: 100%; + font-size: 100%; + font-weight: bold; + background-color: #426ccf; + color: #ffffff; + } } /** From 77afc8ebfff431c6f2db574b277786ad9ea88dcd Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Thu, 22 Jan 2026 10:15:31 +0900 Subject: [PATCH 18/24] clean up faction/race styles --- stylesheets/commons/Brackets.scss | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/stylesheets/commons/Brackets.scss b/stylesheets/commons/Brackets.scss index b950eb576bb..6b27f6f1434 100644 --- a/stylesheets/commons/Brackets.scss +++ b/stylesheets/commons/Brackets.scss @@ -1283,19 +1283,19 @@ div.brkts-opponent-hover { .starcraft-block-archon { display: flex; align-items: center; -} -.starcraft-block-archon.flipped { - flex-direction: row-reverse; -} + &.flipped { + flex-direction: row-reverse; + } -.starcraft-block-archon-race { - flex: 0 0; - padding: 0 2px 0 0; -} + &-race { + flex: 0 0; + padding: 0 2px 0 0; + } -.flipped > .starcraft-block-archon-race { - padding: 0 0 0 2px; + .flipped > & { + padding: 0 0 0 2px; + } } .starcraft-block-archon-players { From 0675af000064795183c1bd45aca5e9b0c416f6de Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Thu, 22 Jan 2026 10:17:20 +0900 Subject: [PATCH 19/24] clean up footer styles --- stylesheets/commons/Brackets.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/stylesheets/commons/Brackets.scss b/stylesheets/commons/Brackets.scss index 6b27f6f1434..15a607aec55 100644 --- a/stylesheets/commons/Brackets.scss +++ b/stylesheets/commons/Brackets.scss @@ -705,11 +705,10 @@ div.brkts-popup-body-element-thumbs { padding: 0.25rem 0; flex-basis: 100%; text-align: center; -} -.brkts-popup-footer a img, -.brkts-popup-comment a img { - background-color: transparent; + a img { + background-color: transparent; + } } .brkts-summary-opponent-roster { From c75ae06d2edefd6306515ff9e5b70426d0857d20 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Thu, 22 Jan 2026 10:20:16 +0900 Subject: [PATCH 20/24] clean up header opponent styles --- stylesheets/commons/Brackets.scss | 66 ++++++++++++++++--------------- 1 file changed, 34 insertions(+), 32 deletions(-) diff --git a/stylesheets/commons/Brackets.scss b/stylesheets/commons/Brackets.scss index 15a607aec55..1450de5c68c 100644 --- a/stylesheets/commons/Brackets.scss +++ b/stylesheets/commons/Brackets.scss @@ -740,44 +740,46 @@ div.brkts-popup-body-element-thumbs { .brkts-popup-header-opponent { width: 43%; -} -.brkts-popup-header-opponent-left { - display: flex; - justify-content: flex-end; -} + &-left { + display: flex; + justify-content: flex-end; + } -.brkts-popup-header-opponent-right { - display: flex; - justify-content: flex-start; -} + &-right { + display: flex; + justify-content: flex-start; + } -.brkts-popup-header-opponent-score-left { - border-right: 1px solid #aaaaaa; - width: 1.75rem; - justify-content: center; - align-items: center; - display: flex; - padding: 0 0.25rem; -} + &-score { + &-left { + border-right: 1px solid #aaaaaa; + width: 1.75rem; + justify-content: center; + align-items: center; + display: flex; + padding: 0 0.25rem; + } -.brkts-popup-header-opponent-score-right { - border-left: 1px solid #aaaaaa; - width: 1.75rem; - justify-content: center; - align-items: center; - display: flex; - padding: 0 0.25rem; -} + &-right { + border-left: 1px solid #aaaaaa; + width: 1.75rem; + justify-content: center; + align-items: center; + display: flex; + padding: 0 0.25rem; + } + } -.brkts-popup-header-opponent.brkts-popup-header-opponent img { - max-height: 20px; - max-width: 48px; -} + img { + max-height: 20px; + max-width: 48px; + } -.brkts-popup-header-opponent .team-template-image-icon { - height: 20px; - width: 48px; + .team-template-image-icon { + height: 20px; + width: 48px; + } } /** From 4985e4a0e4eb0351c4138cb48517c4d8bd7e02a8 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Thu, 22 Jan 2026 10:27:17 +0900 Subject: [PATCH 21/24] fix race rule --- stylesheets/commons/Brackets.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/stylesheets/commons/Brackets.scss b/stylesheets/commons/Brackets.scss index 1450de5c68c..bd4010e407c 100644 --- a/stylesheets/commons/Brackets.scss +++ b/stylesheets/commons/Brackets.scss @@ -1292,10 +1292,10 @@ div.brkts-opponent-hover { &-race { flex: 0 0; padding: 0 2px 0 0; - } - .flipped > & { - padding: 0 0 0 2px; + .flipped > & { + padding: 0 0 0 2px; + } } } From 737ecb1f0a8c8a263c90de77aa98650cc9fa38cb Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Thu, 22 Jan 2026 10:29:18 +0900 Subject: [PATCH 22/24] clean up race player rule --- stylesheets/commons/Brackets.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/stylesheets/commons/Brackets.scss b/stylesheets/commons/Brackets.scss index bd4010e407c..d1464332dcf 100644 --- a/stylesheets/commons/Brackets.scss +++ b/stylesheets/commons/Brackets.scss @@ -1297,11 +1297,11 @@ div.brkts-opponent-hover { padding: 0 0 0 2px; } } -} -.starcraft-block-archon-players { - flex: 1 1; - min-width: 0; + &-players { + flex: 1 1; + min-width: 0; + } } /** From be651e2ac0c5296c6bae248f4b446e43ee08f116 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Thu, 22 Jan 2026 10:32:23 +0900 Subject: [PATCH 23/24] clean up brkts-match style --- stylesheets/commons/Brackets.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/stylesheets/commons/Brackets.scss b/stylesheets/commons/Brackets.scss index d1464332dcf..aad13ddff4f 100644 --- a/stylesheets/commons/Brackets.scss +++ b/stylesheets/commons/Brackets.scss @@ -119,15 +119,15 @@ border: 1px solid var( --brackets-border-color, #aaaaaa ); position: relative; color: var( --clr-on-background ); -} -.brkts-match.brkts-hover { - box-shadow: 0 0 2px rgba( 0, 0, 0, 0.5 ); - border: 1px solid rgba( 0, 0, 0, 0.5 ); + &.brkts-hover { + box-shadow: 0 0 2px rgba( 0, 0, 0, 0.5 ); + border: 1px solid rgba( 0, 0, 0, 0.5 ); - .theme--dark & { - box-shadow: 0 0 2px rgba( 255, 255, 255, 0.5 ); - border: 1px solid rgba( 255, 255, 255, 0.5 ); + .theme--dark & { + box-shadow: 0 0 2px rgba( 255, 255, 255, 0.5 ); + border: 1px solid rgba( 255, 255, 255, 0.5 ); + } } } From 3ee9a2f3c21632597e11e2d3b193a0ff83b4bd85 Mon Sep 17 00:00:00 2001 From: ElectricalBoy <15651807+ElectricalBoy@users.noreply.github.com> Date: Thu, 22 Jan 2026 10:38:02 +0900 Subject: [PATCH 24/24] replace hardcoded colors with css vars --- stylesheets/commons/Brackets.scss | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/stylesheets/commons/Brackets.scss b/stylesheets/commons/Brackets.scss index aad13ddff4f..42ca4e4e629 100644 --- a/stylesheets/commons/Brackets.scss +++ b/stylesheets/commons/Brackets.scss @@ -392,10 +392,10 @@ } .brkts-hover > & { - box-shadow: inset 0 6px 8px -5px rgba( 0, 0, 0, 0.4 ), inset 0 -6px 8px -5px rgba( 0, 0, 0, 0.4 ); + box-shadow: inset 0 6px 8px -5px var( --clr-on-surface-light-primary-40 ), inset 0 -6px 8px -5px var( --clr-on-surface-light-primary-40 ); .theme--dark & { - box-shadow: inset 0 6px 8px -5px rgba( 255, 255, 255, 0.4 ), inset 0 -6px 8px -5px rgba( 255, 255, 255, 0.4 ); + box-shadow: inset 0 6px 8px -5px var( --clr-on-surface-dark-primary-40 ), inset 0 -6px 8px -5px var( --clr-on-surface-dark-primary-40 ); } } @@ -465,7 +465,7 @@ .brkts-popup.brkts-match-info-popup { border-radius: 0.5rem; - box-shadow: 0 0.0625rem 0.25rem 0 rgba( 0, 0, 0, 0.12 ); + box-shadow: 0 0.0625rem 0.25rem 0 var( --clr-on-surface-light-primary-12 ); position: absolute; z-index: 19; @@ -498,7 +498,7 @@ font-size: 0.6875rem; padding: 0.5rem; gap: 0.5rem; - border: 0.0625rem solid rgba( 0, 0, 0, 0.08 ); + border: 0.0625rem solid var( --clr-on-surface-light-primary-8 ); .theme--light & { background-color: #ffffff; @@ -506,7 +506,7 @@ .theme--dark & { background-color: var( --clr-secondary-16 ); - border-color: rgba( 255, 255, 255, 0.08 ); + border-color: var( --clr-on-surface-dark-primary-8 ); } @media ( min-width: 769px ) { @@ -628,7 +628,7 @@ div.brkts-popup-body-element-thumbs { @media ( hover: hover ) { &:hover { height: unset; - box-shadow: 0 0.0625rem 0.25rem 0 rgba( 0, 0, 0, 0.12 ); + box-shadow: 0 0.0625rem 0.25rem 0 var( --clr-on-surface-light-primary-12 ); outline: 0.0625rem solid #ffffff; outline-offset: -0.0625rem; background-color: var( --clr-background ); @@ -655,11 +655,11 @@ div.brkts-popup-body-element-thumbs { .brkts-popup-body-element:nth-of-type( even ) { .theme--light & { - background-color: rgba( 0, 0, 0, 0.04 ); + background-color: var( --clr-on-surface-light-primary-4 ); } .theme--dark & { - background-color: rgba( 255, 255, 255, 0.04 ); + background-color: var( --clr-on-surface-dark-primary-4 ); } } @@ -792,12 +792,12 @@ div.brkts-popup-body-element-thumbs { padding: 0.25rem; .theme--light & { - background-color: rgba( 0, 0, 0, 0.04 ); + background-color: var( --clr-on-surface-light-primary-4 ); color: var( --clr-secondary-25 ); } .theme--dark & { - background-color: rgba( 255, 255, 255, 0.04 ); + background-color: var( --clr-on-surface-dark-primary-4 ); color: #ffffff; } @@ -837,7 +837,7 @@ div.brkts-popup-body-element-thumbs { &:hover { height: unset; border: 0.0625rem solid #ffffff; - box-shadow: 0 0.0625rem 0.25rem 0 rgba( 0, 0, 0, 0.12 ); + box-shadow: 0 0.0625rem 0.25rem 0 var( --clr-on-surface-light-primary-12 ); } } } @@ -850,11 +850,11 @@ div.brkts-popup-body-element-thumbs { tr:nth-child( odd ):not( :first-child ) { .theme--light & { - background-color: rgba( 0, 0, 0, 0.04 ); + background-color: var( --clr-on-surface-light-primary-4 ); } .theme--dark & { - background-color: rgba( 255, 255, 255, 0.04 ); + background-color: var( --clr-on-surface-dark-primary-4 ); } } }