diff --git a/stylesheets/commons/Colours.scss b/stylesheets/commons/Colours.scss index ff7329e0417..269236548aa 100644 --- a/stylesheets/commons/Colours.scss +++ b/stylesheets/commons/Colours.scss @@ -756,22 +756,32 @@ ul.nav-tabs li.game-wiiu, /* Standings position / placement colors */ -.theme--light { - --position-byeup-color: #8046a3; - --position-seedup-color: #006bd4; - --position-up-color: var( --clr-semantic-positive-30 ); - --position-stayup-color: #094e09; +:root { + --position-byeup-color: #9641c9; + --position-seedup-color: #0572dd; + --position-up-color: #008a00; + --position-stayup-color: #005a00; --position-stay-color: #966f00; - --position-staydown-color: #d4400f; - --position-down-color: var( --clr-semantic-negative-40 ); + --position-staydown-color: #c85000; + --position-down-color: #d02626; +} + +.theme--light { + --position-byeup-background-color: #f7e9ff; + --position-seedup-background-color: #d9ecff; + --position-up-background-color: #d5f7d5; + --position-stayup-background-color: #ebffeb; + --position-stay-background-color: #fff7df; + --position-staydown-background-color: #ffe7d9; + --position-down-background-color: #ffe9e9; } .theme--dark { - --position-byeup-color: #cc9fe7; - --position-seedup-color: #a9caeb; - --position-up-color: #65a765; - --position-stayup-color: #b6f8b6; - --position-stay-color: #e5c976; - --position-staydown-color: #f2a288; - --position-down-color: #fc6868; + --position-byeup-background-color: #3a1f4b; + --position-seedup-background-color: #15385b; + --position-up-background-color: #053b05; + --position-stayup-background-color: #052f05; + --position-stay-background-color: #413106; + --position-staydown-background-color: #441e05; + --position-down-background-color: #3f1212; } diff --git a/stylesheets/commons/Label.scss b/stylesheets/commons/Label.scss index 7d20ee36f66..1984bbeef80 100644 --- a/stylesheets/commons/Label.scss +++ b/stylesheets/commons/Label.scss @@ -115,10 +115,6 @@ --placement-text-color: var( --clr-secondary-100 ); - .theme--dark & { - --placement-text-color: var( --clr-secondary-9 ); - } - &:not( [ data-placement-type ] ) { --placement-solid-color: var( --clr-on-surface-light-primary-4 ); --placement-text-color: var( --clr-secondary-25 ); @@ -132,7 +128,11 @@ &[ data-label-type="placement-minimum" ] { color: var( --placement-solid-color ); background-color: hsl( from var( --placement-solid-color ) h s l / 0.08 ); - box-shadow: 0 0 0 calc( var( --label-scale ) * 0.0125rem ) var( --placement-solid-color ) inset; + box-shadow: 0 0 0 calc( var( --label-scale ) * 0.0625rem ) var( --placement-solid-color ) inset; + + .theme--dark & { + color: var( --placement-text-color ); + } } &[ data-placement-type="byeup" ] { diff --git a/stylesheets/commons/Standings.scss b/stylesheets/commons/Standings.scss index c65827c5a5c..f3fbc96568a 100644 --- a/stylesheets/commons/Standings.scss +++ b/stylesheets/commons/Standings.scss @@ -3,6 +3,14 @@ tr[ data-position-status ] { position: relative; + &:not( :last-child ) { + border-bottom: 1px solid var( --clr-on-surface-light-primary-8 ); + + .theme--dark & { + border-bottom: 1px solid var( --clr-on-surface-dark-primary-8 ); + } + } + &::after { content: ""; position: absolute; @@ -40,6 +48,52 @@ &[ data-position-status="down" ] { --placement-row-color: var( --position-down-color ); } + + &:has( > :first-child > .label--placement[ data-placement-type ] ) { + > :nth-child( -n + 2 ), + &:has( > :nth-child( 2 ) > .standings-position-indicator ) > :nth-child( 3 ) { + background-color: var( --placement-confirmed-color ); + } + + &:hover { + > :nth-child( -n + 2 ), + &:has( > :nth-child( 2 ) > .standings-position-indicator ) > :nth-child( 3 ) { + background-color: hsl( from var( --placement-confirmed-color ) h s calc( l * 0.9 ) ); + + .theme--dark & { + background-color: hsl( from var( --placement-confirmed-color ) h s calc( l * 1.25 ) ); + } + } + } + } + + &:has( > :first-child > .label--placement[ data-placement-type="byeup" ] ) { + --placement-confirmed-color: var( --position-byeup-background-color ); + } + + &:has( > :first-child > .label--placement[ data-placement-type="seedup" ] ) { + --placement-confirmed-color: var( --position-seedup-background-color ); + } + + &:has( > :first-child > .label--placement[ data-placement-type="up" ] ) { + --placement-confirmed-color: var( --position-up-background-color ); + } + + &:has( > :first-child > .label--placement[ data-placement-type="stayup" ] ) { + --placement-confirmed-color: var( --position-stayup-background-color ); + } + + &:has( > :first-child > .label--placement[ data-placement-type="stay" ] ) { + --placement-confirmed-color: var( --position-stay-background-color ); + } + + &:has( > :first-child > .label--placement[ data-placement-type="staydown" ] ) { + --placement-confirmed-color: var( --position-staydown-background-color ); + } + + &:has( > :first-child > .label--placement[ data-placement-type="down" ] ) { + --placement-confirmed-color: var( --position-down-background-color ); + } } }