--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/default/assets/scss/components/_media.scss	Sat May 31 09:21:51 2025 +0800
@@ -0,0 +1,127 @@
+// main: ../style.scss
+
+/* Media Elements
+========================*/
+.mejs__container {
+  max-width: 100%;
+  width: 100% !important;
+  font-family: $font-family-base;
+  &.mejs__video {
+    background: none;
+  }
+}
+
+.mejs__overlay {
+  width: 100% !important;
+}
+
+.mejs__mediaelement * {
+  width: 100% !important;
+  max-width: 100%;
+}
+
+.mejs__overlay-button {
+  background: none;
+  color: #fff;
+  @include size(rem(60));
+  &:before {
+    content: '\e99e';
+    font-family: 'feather';
+    font-size: rem(60);
+    line-height: rem(60);
+  }
+}
+
+.video {
+  max-width: 100%;
+}
+
+.no-control-onstart.mejs__video--playing {
+  .mejs__controls {
+    display: block;
+  }
+}
+
+.no-controls-onstart:not(.mejs__video--playing) {
+  .mejs__controls {
+    display: none;
+  }
+}
+
+.mejs__container.style-2 {
+  .mejs__controls {
+    background: $headings-color;
+  }
+  .mejs__time-rail {
+    @include position(absolute, -7px 0 null);
+    width: 100% !important;
+    height: 3px;
+    margin: 0;
+    padding: 0;
+  }
+  .mejs__time-buffering, .mejs__time-current, .mejs__time-float, .mejs__time-float-corner, .mejs__time-float-current, .mejs__time-hovered, .mejs__time-loaded, .mejs__time-marker, .mejs__time-total {
+    height: 3px;
+  }
+  .mejs__time-total { background: #fff }
+  .mejs__time-loaded { background: rgba($color-scheme, .4) }
+  .mejs__time-current { background: $color-scheme }
+  .mejs__time-hovered { background: darken($color-scheme, 10%) }
+  .mejs__time-float,
+  .mejs__time-handle {
+    display: none !important;
+  }
+  .mejs__volume-button,
+  .mejs__playpause-button,
+  .mejs__fullscreen-button {
+    > button { 
+      background: none;
+      &::before {
+        font-family: 'Material Icons';
+        vertical-align: middle;
+        text-rendering: optimizeLegibility;
+        font-feature-settings: 'liga';
+        font-size: rem(24);
+        @include size(1em);
+        color: #fff;
+      }
+    }
+  }
+  .mejs__fullscreen-button {
+    float: right;
+    > button::before {
+      content: 'fullscreen';
+    }
+    &.mejs__unfullscreen > button::before {
+      content: 'fullscreen_exit';
+    }
+  }
+  .mejs__playpause-button {
+    &.mejs__play > button::before {
+      content: 'play_arrow';
+    }
+    &.mejs__pause > button::before {
+      content: 'pause';
+    }
+  }
+  .mejs__volume-button {
+    padding-left: 0;
+    padding-right: 0;
+    > button::before {
+      content: 'volume_up';
+    }
+    &.mejs__unmute > button::before {
+      content: 'volume_off';
+    }
+  }
+  .mejs__overlay-button:before {
+    font-family: 'Material Icons';
+    content: 'play_arrow';
+  }
+  .mejs__duration-container {
+    opacity: 0.5;
+    &:before {
+      content: '\002f ';
+      margin-right: .5em;
+    }
+  }
+}