build the ui according to the design

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

@@ -44,7 +44,7 @@
   .#{$prefix}-ui-hugeplaybacktogglebutton,
   .#{$prefix}-ui-smallcenteredplaybacktogglebutton {
     .#{$prefix}-image {
-      background-size: 3em;
+      background-size: 2.5em;
     }
   }
 

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: 1.1em;
+  background-size: 1em;
   border: 0;
   box-sizing: content-box;
   cursor: pointer;

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

@@ -16,18 +16,14 @@
   .#{$prefix}-controlbar-bottom {
     > .#{$prefix}-container-wrapper {
       display: flex;
-      margin: .5em 0;
+      margin: .25em 0;
     }
   }
 
   .#{$prefix}-controlbar-top {
     .#{$prefix}-ui-label {
       font-size: .6em;
     }
-
-    > .#{$prefix}-container-wrapper > * {
-      margin: 0 .5em;
-    }
   }
 
   .#{$prefix}-controlbar-bottom {

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

@@ -3,6 +3,9 @@
 .#{$prefix}-ui-playbacktimelabel {
   @extend %ui-label;
 
+  font-size: .8em;
+  font-weight: bold;
+  margin: 0 .5em;
   text-transform: uppercase;
 
   &.#{$prefix}-ui-playbacktimelabel-live {

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

@@ -1,38 +1,62 @@
 @import '../variables';
 @import '../mixins';
 
-$seekbar-height: .3125em;
+$seekbar-height: .3em;
+
+// sass-lint:disable no-vendor-prefixes
+%bar {
+  -webkit-transform-origin: 0 0; // required for Android 4.4 WebView
+  bottom: 0;
+  box-sizing: border-box;
+  height: $seekbar-height;
+  left: 0;
+  margin: auto;
+  position: absolute;
+  right: auto;
+  top: 0;
+  transform-origin: 0 0;
+  width: 100%;
+}
 
 %ui-seekbar {
   @extend %ui-component;
 
   @include hidden;
   @include focusable;
 
-  cursor: pointer;
-  font-size: 1em;
+  align-items: center;
+  display: flex;
   height: 1em;
+  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);
+    background-color: $color-highlight;
+    border-radius: 50%;
+    box-shadow: 0 0 3px 0 transparentize($color: #000, $amount: .75);
+  }
+
   .#{$prefix}-seekbar {
+    @extend %ui-component;
 
-    // sass-lint:disable no-vendor-prefixes
-    %bar {
-      -webkit-transform-origin: 0 0; // required for Android 4.4 WebView
-      bottom: 0;
-      box-sizing: border-box;
-      height: $seekbar-height;
-      left: 0;
-      margin: auto;
-      position: absolute;
-      right: auto;
-      top: 0;
-      transform-origin: 0 0;
-      width: 100%;
-    }
+    @include hidden;
+    @include focusable;
+
+    border-radius: 1em;
+    cursor: pointer;
+    font-size: 1em;
+    height: $seekbar-height;
+    margin: calc((1em - $seekbar-height) / 2) 0;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
 
     .#{$prefix}-seekbar-backdrop {
       @extend %bar;
@@ -43,7 +67,7 @@ $seekbar-height: .3125em;
 
     .#{$prefix}-seekbar-bufferlevel {
       @extend %bar;
-      background-color: $color-primary;
+      background-color: transparentize($color-secondary, .3);
       margin: $bar-inset 0;
       transition: .3s linear, .3s linear;
       transition-property: transform;
@@ -63,29 +87,19 @@ $seekbar-height: .3125em;
       transition-property: transform;
     }
 
-    .#{$prefix}-seekbar-playbackposition-marker {
-      @extend %bar;
-      @include seekbar-position-marker($seekbar-height * 3);
-
-      background-color: transparentize($color-highlight, .5);
-      border: solid $color-highlight .1875em;
-      border-radius: 50%;
-    }
-
     .#{$prefix}-seekbar-markers {
       @extend %bar;
 
       $marker-width: 2px;
-
-      height: $seekbar-height * 3 - .375em;
+      height: $seekbar-height;
 
       > .#{$prefix}-seekbar-marker {
         @extend %bar;
 
         background-color: $color-primary;
         height: 100%;
         text-align: center;
-        transition-duration: 1s;
+        transition-duration: .1s;
         transition-property: transform;
         transition-timing-function: linear;
         width: $marker-width;

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

@@ -7,7 +7,7 @@
 
   bottom: 100%;
   left: 0;
-  margin-bottom: 1em;
+  margin-bottom: .75em;
   pointer-events: none;
   position: absolute;
   text-align: center;
@@ -24,29 +24,15 @@
   }
 
   .#{$prefix}-seekbar-label-inner {
-    border-bottom: .2em solid $color-primary;
-
-    // bottom arrow from http://www.cssarrowplease.com/
-    &::after {
-      border: solid transparent;
-      border-color: transparent;
-      border-top-color: $color-primary;
-      border-width: .5em;
-      content: ' ';
-      height: 0;
-      left: 50%;
-      margin-left: -.5em;
-      pointer-events: none;
-      position: absolute;
-      top: 100%;
-      width: 0;
-    }
+    border: solid $color-primary .0625em;
+    border-radius: .5em;
+    overflow: hidden;
 
     > .#{$prefix}-container-wrapper {
       position: relative;
 
       .#{$prefix}-seekbar-thumbnail {
-        width: 6em;
+        width: 7em;
       }
 
       .#{$prefix}-seekbar-label-metadata {
@@ -60,11 +46,13 @@
 
         .#{$prefix}-seekbar-label-time {
           display: block;
+          font-weight: bold;
           line-height: .8em;
         }
 
         .#{$prefix}-seekbar-label-title {
           display: block;
+          font-weight: bold;
           margin-bottom: .3em;
           white-space: normal;
         }

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

@@ -9,12 +9,12 @@
   }
 
   &.#{$prefix}-subtitles-on {
-    background-size: 1.5em;
     background-image: url('../../assets/skin-super-modern/images/subtitles-on.svg');
+    background-size: 1.5em;
   }
 
   &.#{$prefix}-subtitles-off {
-    background-size: 1.5em;
     background-image: url('../../assets/skin-super-modern/images/subtitles-off.svg');
+    background-size: 1.5em;
   }
 }

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

@@ -13,7 +13,7 @@
   pointer-events: none;
 
   > .#{$prefix}-container-wrapper {
-    padding: .5em 0;
+    padding: .75em 0;
     pointer-events: none;
 
     .#{$prefix}-label-metadata {

src/ts/components/seekbar.ts

@@ -29,6 +29,12 @@ export interface SeekBarConfig extends ComponentConfig {
    * Bar will be vertical instead of horizontal if set to true.
    */
   vertical?: boolean;
+  /**
+   * If set to true the seekBarPlaybackPositionMarker will be rendered
+   * directly inside the ??? element. Necessary when using the super-modern-ui skin
+   * Default: false
+   */
+  renderSeekBarPlaybackPositionMarkerInOuterSeekBar?: boolean;
   /**
    * The interval in milliseconds in which the playback position on the seek bar will be updated. The shorter the
    * interval, the smoother it looks and the more resource intense it is. The update interval will be kept as steady
@@ -158,6 +164,7 @@ export class SeekBar extends Component<SeekBarConfig> {
       snappingRange: 1,
       enableSeekPreview: true,
       snappingEnabled: true,
+      renderSeekBarPlaybackPositionMarkerInOuterSeekBar: false,
     }, this.config);
 
     this.label = this.config.label;
@@ -690,7 +697,11 @@ export class SeekBar extends Component<SeekBarConfig> {
     this.seekBarMarkersContainer = seekBarChapterMarkersContainer;
 
     seekBar.append(this.seekBarBackdrop, this.seekBarBufferPosition, this.seekBarSeekPosition,
-      this.seekBarPlaybackPosition, this.seekBarMarkersContainer, this.seekBarPlaybackPositionMarker);
+      this.seekBarPlaybackPosition, this.seekBarMarkersContainer);
+
+    if (!this.config.renderSeekBarPlaybackPositionMarkerInOuterSeekBar) {
+      seekBar.append(this.seekBarPlaybackPositionMarker);
+    }
 
     let seeking = false;
 
@@ -729,12 +740,14 @@ export class SeekBar extends Component<SeekBarConfig> {
       this.onSeekedEvent(targetPercentage);
     };
 
+    let domElementToListen: DOM = this.config.renderSeekBarPlaybackPositionMarkerInOuterSeekBar ? seekBarContainer : seekBar;
+
     // A seek always start with a touchstart or mousedown directly on the seekbar.
     // To track a mouse seek also outside the seekbar (for touch events this works automatically),
     // so the user does not need to take care that the mouse always stays on the seekbar, we attach the mousemove
     // and mouseup handlers to the whole document. A seek is triggered when the user lifts the mouse key.
     // A seek mouse gesture is thus basically a click with a long time frame between down and up events.
-    seekBar.on('touchstart mousedown', (e: MouseEvent | TouchEvent) => {
+    domElementToListen.on('touchstart mousedown', (e: MouseEvent | TouchEvent) => {
       let isTouchEvent = BrowserUtils.isTouchSupported && this.isTouchEvent(e);
 
       // Prevent selection of DOM elements (also prevents mousedown if current event is touchstart)
@@ -756,7 +769,7 @@ export class SeekBar extends Component<SeekBarConfig> {
     });
 
     // Display seek target indicator when mouse hovers or finger slides over seekbar
-    seekBar.on('touchmove mousemove', (e: MouseEvent | TouchEvent) => {
+    domElementToListen.on('touchmove mousemove', (e: MouseEvent | TouchEvent) => {
       e.preventDefault();
 
       if (seeking) {
@@ -774,7 +787,7 @@ export class SeekBar extends Component<SeekBarConfig> {
     });
 
     // Hide seek target indicator when mouse or finger leaves seekbar
-    seekBar.on('touchend mouseleave', (e: MouseEvent | TouchEvent) => {
+    domElementToListen.on('touchend mouseleave', (e: MouseEvent | TouchEvent) => {
       e.preventDefault();
 
       this.setSeekPosition(0);
@@ -790,6 +803,10 @@ export class SeekBar extends Component<SeekBarConfig> {
       seekBarContainer.append(this.label.getDomElement());
     }
 
+    if (this.config.renderSeekBarPlaybackPositionMarkerInOuterSeekBar) {
+      seekBarContainer.append(seekBarPlaybackPositionMarker);
+    }
+
     return seekBarContainer;
   }
 

src/ts/uifactory.ts

@@ -509,7 +509,7 @@ export function superModernMobileUI() {
             timeLabelMode: PlaybackTimeLabelMode.CurrentTime,
             hideInLivePlayback: true,
           }),
-          new SeekBar({ label: new SeekBarLabel() }),
+          new SeekBar({ label: new SeekBarLabel(), renderSeekBarPlaybackPositionMarkerInOuterSeekBar: true }),
           new PlaybackTimeLabel({
             timeLabelMode: PlaybackTimeLabelMode.TotalTime,
             cssClasses: ['text-right'],