refactor: Opt into new mixed declaration behavior

* see https://sass-lang.com/documentation/breaking-changes/mixed-decls/ Signed-off-by: eXhumer <[email protected]>
eXhumer · Aug 21, 2024 · 7c9b3ed · 7c9b3ed
1 parent e84f939
commit 7c9b3ed
Show file tree

Hide file tree

Showing 17 changed files with 124 additions and 78 deletions.
diff --git a/src/Player/React/Skin/SkinModern/_mixins.scss b/src/Player/React/Skin/SkinModern/_mixins.scss
@@ -11,9 +11,11 @@
 }
 
 @mixin hidden-animated($duration: $animation-duration) {
-  opacity: 1;
-  transition: hidden-animated-transition($duration);
-  visibility: visible;
+  & {
+    opacity: 1;
+    transition: hidden-animated-transition($duration);
+    visibility: visible;
+  }
 
   &.#{$prefix}-hidden {
     opacity: 0;
@@ -58,7 +60,9 @@
 
   @include hidden-animated($duration);
 
-  transition: $transitions-string;
+  & {
+    transition: $transitions-string;
+  }
 }
 
 // Cover the whole parent element
@@ -73,16 +77,20 @@
 
 // Align to parent's bottom
 @mixin layout-align-bottom {
-  bottom: 0;
-  position: absolute;
-  width: 100%;
+  & {
+    bottom: 0;
+    position: absolute;
+    width: 100%;
+  }
 }
 
 // Align to parent's top
 @mixin layout-align-top {
-  position: absolute;
-  top: 0;
-  width: 100%;
+  & {
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
 }
 
 // H/V center items in the middle of the overlay

diff --git a/src/Player/React/Skin/SkinModern/_skin-smallscreen.scss b/src/Player/React/Skin/SkinModern/_skin-smallscreen.scss
@@ -8,7 +8,9 @@
     @include layout-cover;
     @include layout-center-children-in-container;
 
-    display: flex;
+    & {
+      display: flex;
+    }
 
     .#{$prefix}-ui-settings-panel-page {
       min-width: 15em;
@@ -129,9 +131,11 @@
         > * {
           @include hidden; // Add hidden here too, else it is overwritten by display: table-cell
 
-          display: table-cell;
-          vertical-align: middle;
-          width: 1em;
+          & {
+            display: table-cell;
+            vertical-align: middle;
+            width: 1em;
+          }
         }
 
         .#{$prefix}-label-metadata-title {

diff --git a/src/Player/React/Skin/SkinModern/components/_bufferingoverlay.scss b/src/Player/React/Skin/SkinModern/components/_bufferingoverlay.scss
@@ -18,7 +18,9 @@
   @include layout-cover;
   @include hidden-animated($animation-duration * 2);
 
-  background-color: $color-background-highlight;
+  & {
+    background-color: $color-background-highlight;
+  }
 
   > .#{$prefix}-container-wrapper {
     padding: 3em;
@@ -62,12 +64,14 @@
       }
     }
 
-    animation: #{$prefix}-fancy $buffering-animation-duration ease-in infinite;
-    background: url('../Asset/SkinModern/images/loader.svg') no-repeat center;
-    display: inline-block;
-    height: 2em;
-    margin: .2em;
-    width: 2em;
+    & {
+      animation: #{$prefix}-fancy $buffering-animation-duration ease-in infinite;
+      background: url('../Asset/SkinModern/images/loader.svg') no-repeat center;
+      display: inline-block;
+      height: 2em;
+      margin: .2em;
+      width: 2em;
+    }
 
     @for $i from 1 through 3 {
       &:nth-child(#{$i}) {

diff --git a/src/Player/React/Skin/SkinModern/components/_caststatusoverlay.scss b/src/Player/React/Skin/SkinModern/components/_caststatusoverlay.scss
@@ -6,8 +6,10 @@
   @include layout-cover;
   @include hidden-animated;
 
-  background: $color-background url('../Asset/SkinModern/images/chromecast.svg') center no-repeat;
-  background-size: 7em 7em;
+  & {
+    background: $color-background url('../Asset/SkinModern/images/chromecast.svg') center no-repeat;
+    background-size: 7em 7em;
+  }
 
   .#{$prefix}-ui-cast-status-label {
     color: $color-primary;

diff --git a/src/Player/React/Skin/SkinModern/components/_closebutton.scss b/src/Player/React/Skin/SkinModern/components/_closebutton.scss
@@ -22,7 +22,9 @@
     }
   }
 
-  background-image: url('../Asset/SkinModern/images/close.svg');
+  & {
+    background-image: url('../Asset/SkinModern/images/close.svg');
+  }
 
   &:hover {
     @include svg-icon-shadow;

diff --git a/src/Player/React/Skin/SkinModern/components/_controlbar.scss b/src/Player/React/Skin/SkinModern/components/_controlbar.scss
@@ -6,10 +6,12 @@
   @include hidden-animated-focusable;
   @include layout-align-bottom;
 
-  background: linear-gradient(to bottom, $color-transparent, $color-background-bars);
-  box-sizing: border-box;
-  line-height: 1em;
-  padding: 1em 1em .5em;
+  & {
+    background: linear-gradient(to bottom, $color-transparent, $color-background-bars);
+    box-sizing: border-box;
+    line-height: 1em;
+    padding: 1em 1em .5em;
+  }
 
   .#{$prefix}-controlbar-top,
   .#{$prefix}-controlbar-bottom {
@@ -54,8 +56,10 @@
         > * {
           @include hidden; // Add hidden here too, else it is overwritten by display: table-cell
 
-          display: table-cell;
-          vertical-align: middle;
+          & {
+            display: table-cell;
+            vertical-align: middle;
+          }
         }
 
         .#{$prefix}-ui-volumeslider {

diff --git a/src/Player/React/Skin/SkinModern/components/_errormessageoverlay.scss b/src/Player/React/Skin/SkinModern/components/_errormessageoverlay.scss
@@ -6,8 +6,10 @@
   @include layout-cover;
   @include hidden;
 
-  background-color: $color-background;
-  pointer-events: none;
+  & {
+    background-color: $color-background;
+    pointer-events: none;
+  }
 
   .#{$prefix}-ui-errormessage-label {
     color: $color-primary;

diff --git a/src/Player/React/Skin/SkinModern/components/_hugeplaybacktogglebutton.scss b/src/Player/React/Skin/SkinModern/components/_hugeplaybacktogglebutton.scss
@@ -38,11 +38,13 @@
     }
   }
 
-  cursor: default;
-  height: 8em;
-  outline: none;
-  overflow: hidden; // hide overflow from scale animation
-  width: 8em;
+  & {
+    cursor: default;
+    height: 8em;
+    outline: none;
+    overflow: hidden; // hide overflow from scale animation
+    width: 8em;
+  }
 
   .#{$prefix}-image {
     background-image: url('../Asset/SkinModern/images/play_big.svg');

diff --git a/src/Player/React/Skin/SkinModern/components/_label.scss b/src/Player/React/Skin/SkinModern/components/_label.scss
@@ -4,8 +4,10 @@
   @extend %ui-component;
   @include hidden;
 
-  cursor: default;
-  white-space: nowrap;
+  & {
+    cursor: default;
+    white-space: nowrap;
+  }
 }
 
 .#{$prefix}-ui-label {

diff --git a/src/Player/React/Skin/SkinModern/components/_recommendationoverlay.scss b/src/Player/React/Skin/SkinModern/components/_recommendationoverlay.scss
@@ -7,7 +7,9 @@
   @include layout-center-children-in-container;
   @include hidden-animated($animation-duration * 2);
 
-  background-color: $color-background-highlight;
+  & {
+    background-color: $color-background-highlight;
+  }
 
   > .#{$prefix}-container-wrapper {
     padding: 3em;

diff --git a/src/Player/React/Skin/SkinModern/components/_seekbar.scss b/src/Player/React/Skin/SkinModern/components/_seekbar.scss
@@ -9,11 +9,13 @@ $seekbar-height: .3125em;
   @include hidden;
   @include focusable;
 
-  cursor: pointer;
-  font-size: 1em;
-  height: 1em;
-  position: relative;
-  width: 100%;
+  & {
+    cursor: pointer;
+    font-size: 1em;
+    height: 1em;
+    position: relative;
+    width: 100%;
+  }
 
   $bar-inset: auto;
 

diff --git a/src/Player/React/Skin/SkinModern/components/_seekbarlabel.scss b/src/Player/React/Skin/SkinModern/components/_seekbarlabel.scss
@@ -4,12 +4,14 @@
   @extend %ui-container;
   @include hidden-animated;
 
-  bottom: 100%;
-  left: 0;
-  margin-bottom: 1em;
-  pointer-events: none;
-  position: absolute;
-  text-align: center;
+  & {
+    bottom: 100%;
+    left: 0;
+    margin-bottom: 1em;
+    pointer-events: none;
+    position: absolute;
+    text-align: center;
+  }
 
   // Center container on left edge to get it centered over timeline position
   %center-on-left-edge {

diff --git a/src/Player/React/Skin/SkinModern/components/_selectbox.scss b/src/Player/React/Skin/SkinModern/components/_selectbox.scss
@@ -5,12 +5,14 @@
   @extend %ui-component;
   @include focusable;
 
-  background-color: transparent;
-  border: 0;
-  color: $color-highlight;
-  cursor: pointer;
-  font-size: .8em;
-  padding: .3em;
+  & {
+    background-color: transparent;
+    border: 0;
+    color: $color-highlight;
+    cursor: pointer;
+    font-size: .8em;
+    padding: .3em;
+  }
 
   option {
     color: $color-secondary;

diff --git a/src/Player/React/Skin/SkinModern/components/_settingspanel.scss b/src/Player/React/Skin/SkinModern/components/_settingspanel.scss
@@ -13,12 +13,14 @@
 
   $background-color: color.adjust($color-background, $alpha: .15);
 
-  background-color: $background-color;
-  bottom: 5em;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  right: 2em;
+  & {
+    background-color: $background-color;
+    bottom: 5em;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    right: 2em;
+  }
 
   > .#{$prefix}-container-wrapper {
     margin: .5em;

diff --git a/src/Player/React/Skin/SkinModern/components/_subtitleoverlay.scss b/src/Player/React/Skin/SkinModern/components/_subtitleoverlay.scss
@@ -6,12 +6,14 @@
     @extend %ui-container;
     @include hidden;
 
-    font-size: 1.2em;
-    pointer-events: none;
-    position: absolute;
-    text-align: center;
-    inset: 0;
-    transition: bottom $animation-duration-short ease-out;
+    & {
+      font-size: 1.2em;
+      pointer-events: none;
+      position: absolute;
+      text-align: center;
+      inset: 0;
+      transition: bottom $animation-duration-short ease-out;
+    }
 
     * {
       // This aims to prevent possibly conflicting style definitions inherited

diff --git a/src/Player/React/Skin/SkinModern/components/_titlebar.scss b/src/Player/React/Skin/SkinModern/components/_titlebar.scss
@@ -7,10 +7,12 @@
   @include hidden-animated-focusable;
   @include layout-align-top;
 
-  background: linear-gradient(to top, $color-transparent, $color-background-bars);
-  box-sizing: border-box;
-  padding: .5em 1em 1em;
-  pointer-events: none;
+  & {
+    background: linear-gradient(to top, $color-transparent, $color-background-bars);
+    box-sizing: border-box;
+    padding: .5em 1em 1em;
+    pointer-events: none;
+  }
 
   > .#{$prefix}-container-wrapper {
     padding: .5em;

diff --git a/src/Player/React/Skin/SkinModern/components/_volumecontrolbutton.scss b/src/Player/React/Skin/SkinModern/components/_volumecontrolbutton.scss
@@ -10,11 +10,13 @@
   .#{$prefix}-ui-volumeslider {
     @include animate-slide-in-from-bottom(6em, $animation-duration-short);
 
-    background-color: $color-background;
-    bottom: 100%;
-    height: 6em;
-    position: absolute;
-    width: 1.5em;
+    & {
+      background-color: $color-background;
+      bottom: 100%;
+      height: 6em;
+      position: absolute;
+      width: 1.5em;
+    }
 
     .#{$prefix}-seekbar {
       height: auto;