improve various margins, paddings and sizes to improve UX

bitmovin · Dec 4, 2024 · 9165ec2 · 9165ec2
1 parent 6579335
commit 9165ec2
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 29 deletions.
diff --git a/src/scss/skin-super-modern/components/_button.scss b/src/scss/skin-super-modern/components/_button.scss
@@ -7,7 +7,7 @@
   background-origin: content-box;
   background-position: center;
   background-repeat: no-repeat;
-  background-size: 1em;
+  background-size: 1.2em;
   border: 0;
   box-sizing: content-box;
   cursor: pointer;

diff --git a/src/scss/skin-super-modern/components/_controlbar.scss b/src/scss/skin-super-modern/components/_controlbar.scss
@@ -10,19 +10,23 @@
   background: linear-gradient(to bottom, $color-transparent, $color-background-bars);
   box-sizing: border-box;
   line-height: 1em;
-  padding: 0 .75em;
+  padding: 1em 1em .5em;
 
   .#{$prefix}-controlbar-top,
   .#{$prefix}-controlbar-bottom {
     > .#{$prefix}-container-wrapper {
       display: flex;
-      margin: .25em 0;
+      margin: .5em 0;
     }
   }
 
   .#{$prefix}-controlbar-top {
     .#{$prefix}-ui-label {
-      font-size: .6em;
+      font-size: .9em;
+    }
+
+    > .#{$prefix}-container-wrapper > * {
+      margin: 0 .5em;
     }
   }
 

diff --git a/src/scss/skin-super-modern/components/_playbacktimelabel.scss b/src/scss/skin-super-modern/components/_playbacktimelabel.scss
@@ -3,9 +3,9 @@
 .#{$prefix}-ui-playbacktimelabel {
   @extend %ui-label;
 
-  font-size: .8em;
-  font-weight: bold;
-  margin: 0 .5em;
+  //font-size: .8em;
+  font-weight: 500;
+  //margin: 0 .5em;
   text-transform: uppercase;
 
   &.#{$prefix}-ui-playbacktimelabel-live {

diff --git a/src/scss/skin-super-modern/components/_seekbar.scss b/src/scss/skin-super-modern/components/_seekbar.scss
@@ -1,7 +1,7 @@
 @import '../variables';
 @import '../mixins';
 
-$seekbar-height: .3em;
+$seekbar-height: .3125em;
 
 // sass-lint:disable no-vendor-prefixes
 %bar {
@@ -25,19 +25,19 @@ $seekbar-height: .3em;
   @include focusable;
 
   align-items: center;
-  display: flex;
+  font-size: 1em;
+  //display: flex;
   height: 1em;
-  justify-content: center;
-  margin: 0 .5em;
+  //justify-content: center;
+  //margin: 0 .5em;
   position: relative;
   width: 100%;
 
   $bar-inset: auto;
-
   .#{$prefix}-seekbar-playbackposition-marker {
     @extend %bar;
 
-    @include seekbar-position-marker($seekbar-height * 2.2);
+    @include seekbar-position-marker($seekbar-height * 3);
     background-color: $color-highlight;
     border-radius: 50%;
     box-shadow: 0 0 3px 0 transparentize($color: #000, $amount: .75);

diff --git a/src/scss/skin-super-modern/components/_seekbarlabel.scss b/src/scss/skin-super-modern/components/_seekbarlabel.scss
@@ -46,13 +46,13 @@
 
         .#{$prefix}-seekbar-label-time {
           display: block;
-          font-weight: bold;
+          font-weight: 500;
           line-height: .8em;
         }
 
         .#{$prefix}-seekbar-label-title {
           display: block;
-          font-weight: bold;
+          font-weight: 500;
           margin-bottom: .3em;
           white-space: normal;
         }

diff --git a/src/scss/skin-super-modern/components/_settingspanel.scss b/src/scss/skin-super-modern/components/_settingspanel.scss
@@ -18,7 +18,7 @@
   bottom: 3.5em;
   height: fit-content;
   max-height: 60%;
-  max-width: 200px;
+  //max-width: 200px;
   min-width: fit-content;
   overflow: hidden;
   overflow-y: auto;

diff --git a/src/scss/skin-super-modern/components/_settingspanelpage.scss b/src/scss/skin-super-modern/components/_settingspanelpage.scss
@@ -11,8 +11,8 @@
   .#{$prefix}-container-wrapper > * {
     &.#{$prefix}-ui-label {
       display: inline-block;
-      font-size: .6em;
-      font-weight: 600;
+      font-size: .8em;
+      font-weight: 500;
       margin: 0;
       text-align: justify;
       width: 45%;
@@ -74,8 +74,8 @@
   }
 
   .#{$prefix}-ui-settings-panel-item {
-    height: 20px;
-    padding: 0 .4em;
+    //height: 20px;
+    padding: .5em .7em;
     white-space: nowrap;
 
     &:hover {

diff --git a/src/scss/skin-super-modern/components/_titlebar.scss b/src/scss/skin-super-modern/components/_titlebar.scss
@@ -9,11 +9,11 @@
 
   background: linear-gradient(to top, $color-transparent, $color-background-bars);
   box-sizing: border-box;
-  padding: 0 .75em;
+  padding: .5em 1em 1em;
   pointer-events: none;
 
   > .#{$prefix}-container-wrapper {
-    padding: .75em 0;
+    padding: .5em;
     pointer-events: none;
 
     .#{$prefix}-label-metadata {
@@ -24,7 +24,7 @@
       cursor: default;
       display: block;
       font-size: 1.2em;
-      font-weight: bold;
+      font-weight: 500;
       text-shadow: 0 0 5px $color-black;
       white-space: normal;
     }

diff --git a/src/scss/skin-super-modern/components/_volumeslider.scss b/src/scss/skin-super-modern/components/_volumeslider.scss
@@ -5,13 +5,13 @@
 .#{$prefix}-ui-volumeslider {
   @extend %ui-seekbar;
 
-  .#{$prefix}-seekbar {
-    .#{$prefix}-seekbar-playbackposition-marker {
-      @include seekbar-position-marker($seekbar-height * 3 - .25em);
-      background-color: $color-highlight;
-      border: 0;
-    }
+  .#{$prefix}-seekbar-playbackposition-marker {
+    @include seekbar-position-marker($seekbar-height * 3 - .25em);
+    background-color: $color-highlight;
+    border: 0;
+  }
 
+  .#{$prefix}-seekbar {
     .#{$prefix}-seekbar-bufferlevel {
       display: none;
     }