Minor small screen layout improvements

src/scss/skin-modern/_skin.scss

@@ -1,4 +1,4 @@
 @import 'variables';
 .#{$prefix}-ui-skin-modern {
   @import 'mixins';
   @import 'components/component';
@@ -51,7 +51,7 @@
   @import 'skin-smallscreen';
   @import 'skin-tv';
 
-  .#{$prefix}-ui-uicontainer {
+  &.#{$prefix}-ui-uicontainer {
     color: $color-primary;
     font-family: $font-family;
     font-size: $font-size;
@@ -59,7 +59,7 @@
     user-select: none;
 
     &.#{$prefix}-player-state-idle {
       .#{$prefix}-ui-controlbar,
       .#{$prefix}-ui-titlebar,
       .#{$prefix}-ui-hugeplaybacktogglebutton {
         display: none;
@@ -67,7 +67,7 @@
     }
 
     &.#{$prefix}-player-state-finished {
       .#{$prefix}-ui-controlbar,
       .#{$prefix}-ui-hugeplaybacktogglebutton {
         display: none;
       }

src/scss/skin-super-modern/_skin-modern-smallscreen.scss

@@ -63,36 +63,12 @@
 
   // Adjustments for screen width x <= 400
   &.#{$prefix}-layout-max-width-400 {
-    .#{$prefix}-ui-settings-panel,
-    .#{$prefix}-ui-hugeplaybacktogglebutton,
-    .#{$prefix}-ui-smallcenteredplaybacktogglebutton,
-    .#{$prefix}-ui-hugereplaybutton,
-    .#{$prefix}-ui-errormessage-overlay,
-    .#{$prefix}-ui-buffering-overlay,
-    .#{$prefix}-ui-subtitle-overlay,
-    .#{$prefix}-ui-cast-status-overlay {
-      font-size: .6em;
+    .#{$prefix}-ui-settings-panel {
+      left: 1em;
+      right: 1em;
+      margin-top: 3.5em;
+      max-height: calc(100% - 3.5em - 3.5em);
+      width: unset;
     }
   }
-
-  // Adjustments for screen width 400 < x <= 600
-  &.#{$prefix}-layout-max-width-600 {
-    .#{$prefix}-ui-settings-panel,
-    .#{$prefix}-ui-hugeplaybacktogglebutton,
-    .#{$prefix}-ui-smallcenteredplaybacktogglebutton,
-    .#{$prefix}-ui-hugereplaybutton,
-    .#{$prefix}-ui-errormessage-overlay,
-    .#{$prefix}-ui-buffering-overlay,
-    .#{$prefix}-ui-subtitle-overlay,
-    .#{$prefix}-ui-cast-status-overlay {
-      font-size: .8em;
-    }
-  }
-
-  // Adjustments for screen width x <= 600
-  // sass-lint:disable no-empty-rulesets
-  &.#{$prefix}-layout-max-width-400,
-  &.#{$prefix}-layout-max-width-600 {
-    // none yet
-  }
 }

src/scss/skin-super-modern/_skin.scss

@@ -56,7 +56,7 @@
   @import 'skin-tv';
 
   // sass-lint:disable nesting-depth
-  .#{$prefix}-ui-uicontainer {
+  &.#{$prefix}-ui-uicontainer {
     color: $color-primary;
     font-family: $font-family;
     font-size: $font-size;

src/scss/skin-super-modern/components/_button.scss

@@ -16,6 +16,7 @@
   min-width: 1.5em;
   padding: .25em;
   transition: transform .15s ease;
+  -webkit-tap-highlight-color: transparent;
 
   .#{$prefix}-label {
     color: $color-primary;

src/scss/skin-super-modern/components/_label.scss

@@ -7,6 +7,7 @@
 
   cursor: default;
   white-space: nowrap;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .#{$prefix}-ui-label {

src/scss/skin-super-modern/components/_settingspanel.scss

@@ -13,9 +13,11 @@
 
   $background-color: transparentize($color-background-menu, .15);
 
+  backdrop-filter: blur(10px);
   background-color: $background-color;
   border-radius: 4px;
   bottom: 3.5em;
+  box-shadow: 0 0 3px 0 transparentize($color: #000, $amount: .75);
   height: fit-content;
   max-height: 60%;
   min-width: fit-content;

src/scss/skin-super-modern/components/_touch-control-overlay.scss

@@ -1,12 +1,7 @@
 @import '../variables';
 @import '../mixins';
 
-// sass-lint:disable no-vendor-prefixes
 %opacity-transition {
-  -moz-transition: opacity .25s ease;
-  -ms-transition: opacity .25s ease;
-  -o-transition: opacity .25s ease;
-  -webkit-transition: opacity .25s ease;
   transition:  opacity .25s ease-out;
 }