Merge pull request #659 from bitmovin/feature/improve-mobile-layout

Minor small screen layout improvements
bitmovin · Dec 20, 2024 · cbd3f61 · cbd3f61
2 parents 77d2044 + 74d33a9
commit cbd3f61
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 32 deletions.
diff --git a/src/scss/skin-modern/_skin.scss b/src/scss/skin-modern/_skin.scss
@@ -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;

diff --git a/src/scss/skin-super-modern/_skin-modern-smallscreen.scss b/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
-  }
 }
diff --git a/src/scss/skin-super-modern/_skin.scss b/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;

diff --git a/src/scss/skin-super-modern/components/_button.scss b/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;

diff --git a/src/scss/skin-super-modern/components/_label.scss b/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 {

diff --git a/src/scss/skin-super-modern/components/_settingspanel.scss b/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;