Display: Add custom styles for mediaelementjs - refs BT#21580

assets/css/scss/index.scss

@@ -78,3 +78,5 @@
 @import "userreluser";
 @import 'social';
 @import 'skill';
+
+@import "libs/mediaelementjs/styles";

assets/css/scss/libs/mediaelementjs/_styles.scss

@@ -0,0 +1,91 @@
+.mejs {
+  &__container {
+    @apply bg-transparent rounded-lg
+      focus:outline-none drop-shadow-lg;
+
+    video {
+      @apply rounded-lg;
+    }
+  }
+
+  &__overlay {
+    @apply bg-support-3 rounded-lg;
+
+    &-loading {
+
+      &-bg-img {
+        @apply text-white;
+
+        svg {
+          @apply fill-current;
+        }
+      }
+    }
+
+    &-play {
+    }
+
+    &-button {
+      @apply text-white;
+
+      svg {
+        @apply fill-current;
+      }
+    }
+  }
+
+  &__controls {
+    &:not([style*="display: none"]) {
+      @apply bg-none bg-white border border-gray-30 rounded-b-lg;
+
+      button {
+        @apply text-gray-90;
+      }
+      svg {
+        @apply fill-current;
+      }
+    }
+  }
+
+  &__currenttime,
+  &__duration {
+    @apply text-gray-90;
+  }
+
+  &__time-total,
+  &__time-buffering,
+  &__time-loaded {
+    @apply bg-gray-30 rounded-lg overflow-hidden;
+  }
+
+  &__time-hovered {
+    @apply bg-gray-5 rounded-lg;
+  }
+
+  &__time-current {
+    @apply bg-primary rounded-none;
+  }
+
+  &__time-handle-content {
+    @apply border-support-3;
+  }
+
+  &__volume {
+    &-button > &-slider {
+      @apply bg-white;
+    }
+
+    &-total {
+      @apply bg-gray-90 border-gray-90;
+    }
+
+    &-current,
+    &-handle {
+      @apply bg-gray-90;
+    }
+
+    &-handle {
+      @apply border-gray-90;
+    }
+  }
+}