From f7d3c1b5b0559dffd7fb437497af480ea62e3a1f Mon Sep 17 00:00:00 2001
From: Brad Simpson <brad.simpson@kineo.com>
Date: Thu, 15 Aug 2024 11:09:38 -0600
Subject: [PATCH] Create legacy mep styles to support older versions of the
 Media plugin

---
 .../adapt-contrib-media/mep-legacy.less       | 293 ++++++++++++++++++
 1 file changed, 293 insertions(+)
 create mode 100644 less/plugins/adapt-contrib-media/mep-legacy.less

diff --git a/less/plugins/adapt-contrib-media/mep-legacy.less b/less/plugins/adapt-contrib-media/mep-legacy.less
new file mode 100644
index 00000000..17945eaf
--- /dev/null
+++ b/less/plugins/adapt-contrib-media/mep-legacy.less
@@ -0,0 +1,293 @@
+// Overrides for mejs player
+// --------------------------------------------------
+@mejs-color: @black;
+@mejs-color-inverted: @white;
+
+@mejs-icon: @white;
+
+@mejs-time-current: @white;
+@mejs-time-loaded: darken(@white, 25%);
+@mejs-time-total: darken(@white, 50%);
+
+@mejs-controls-height: 2rem;
+@mejs-time-rail-height: 0.5rem;
+@mejs-margin: 0.5rem;
+
+@mejs-time-size: 0.75rem;
+
+@mejs-time-float-size: 0.75rem;
+@mejs-time-float-width: 2rem;
+
+@mejs-cc-size: 0.75rem;
+
+.mejs-container {
+  // Play icon override
+  // --------------------------------------------------
+  .mejs-overlay {
+    .mejs-overlay-button {
+      .transform(translate(-50%,-50%));
+      height: (@icon-size * 2) + @icon-padding;
+      width: (@icon-size * 2) + @icon-padding;
+      margin: 0;
+      padding: @icon-padding / 2;
+      background: none;
+      box-shadow: 0 0 0 3px @white;
+      border-radius: 50%;
+      color: @white;
+      opacity: .75;
+
+      @media (min-width: @device-width-small) {
+        height: (@icon-size * 3) + @icon-padding;
+        width: (@icon-size * 3) + @icon-padding;
+      }
+    }
+
+    .invert-play-icon & .mejs-overlay-button {
+      color: @black;
+      box-shadow: 0 0 0 3px @black;
+    }
+
+    .no-touch &:hover .mejs-overlay-button {
+      background-position: 0 0;
+      opacity: 1;
+      .transition(opacity @duration ease-in);
+    }
+
+    .icon {
+      .icon-video-play;
+    }
+
+    .icon:before {
+      font-size: @icon-size * 2;
+
+      @media (min-width: @device-width-small) {
+        font-size: @icon-size * 3;
+      }
+    }
+  }
+
+  // Colour overrides
+  // --------------------------------------------------
+  .mejs-controls {
+    background: none;
+    background-color: @mejs-color;
+  }
+
+  .mejs-controls .mejs-time,
+  .mejs-controls .mejs-captions-button .mejs-captions-selector ul li {
+    color: @mejs-color-inverted;
+  }
+
+  .mejs-controls .mejs-button button {
+    color: @mejs-icon;
+  }
+
+  .mejs-controls .mejs-time-rail .mejs-time-total,
+  .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total {
+    background: none;
+    background-color: @mejs-time-total;
+  }
+
+  .mejs-controls .mejs-time-rail .mejs-time-loaded {
+    background: none;
+    background-color: @mejs-time-loaded;
+  }
+
+  .mejs-controls .mejs-time-rail .mejs-time-current,
+  .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current {
+    background: none;
+    background-color: @mejs-time-current;
+  }
+
+  .mejs-controls .mejs-captions-button .mejs-captions-selector,
+  .mejs-controls .mejs-volume-button .mejs-volume-slider {
+    background: none;
+    background-color: @mejs-color;
+  }
+
+  .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle {
+    background: none;
+    background-color: @mejs-time-current;
+  }
+
+  // Icon overrides
+  // Icon classes must be defined in core/fonts/vanilla or
+  // a custom font must be set up in the theme
+  // --------------------------------------------------
+  .mejs-controls .mejs-play button {
+    .icon-video-play;
+  }
+
+  .mejs-controls .mejs-pause button {
+    .icon-video-pause;
+  }
+
+  .mejs-controls .mejs-fullscreen-button button {
+    .icon-video-fullscreen;
+  }
+
+  .mejs-controls .mejs-unfullscreen button {
+    .icon-video-exit-fullscreen;
+  }
+
+  .mejs-controls .mejs-mute button {
+    .icon-sound;
+  }
+
+  .mejs-controls .mejs-unmute button {
+    .icon-sound-mute;
+  }
+
+  .mejs-controls .mejs-captions-button button {
+    .icon-video-captions-off-2;
+  }
+
+  .mejs-controls .mejs-captions-enabled button {
+    .icon-video-captions;
+  }
+
+  // Player controls
+  // --------------------------------------------------
+  .mejs-controls {
+    height: @mejs-controls-height;
+  }
+
+  .mejs-controls .mejs-time-rail {
+    height: @mejs-time-rail-height;
+    margin: ((@mejs-controls-height - @mejs-time-rail-height) / 2) @mejs-margin;
+    padding: 0;
+  }
+
+  .mejs-controls .mejs-time-rail span {
+    height: @mejs-time-rail-height;
+  }
+
+  .mejs-controls .mejs-time-rail .mejs-time-total {
+    height: @mejs-time-rail-height;
+    margin: 0;
+  }
+
+  .mejs-controls .mejs-time {
+    height: @mejs-time-size;
+    margin: ((@mejs-time-size / 2) + (@mejs-margin / 2)) @mejs-margin;
+    padding: 0;
+    font-size: @mejs-time-size;
+    line-height: 1;
+  }
+
+  // Button icon style overrides
+  // --------------------------------------------------
+  .mejs-controls .mejs-button {
+    height: @icon-size;
+    width: @icon-size;
+    margin: @mejs-margin / 2;
+  }
+
+  .mejs-controls .mejs-button button {
+    .icon;
+    height: @icon-size;
+    width: @icon-size;
+    margin: 0;
+    background: none;
+  }
+
+  // Current time pop float on time rail hover
+  // --------------------------------------------------
+  .mejs-controls .mejs-time-rail .mejs-time-float {
+    top: -1.5rem;
+    height: calc(~'@{mejs-time-float-size} + 2px');
+    width: calc(~'@{mejs-time-float-width} + 2px');
+    margin-left: -@mejs-time-float-width / 2;
+    background: none;
+    background-color: @white;
+    color: @black;
+    border-color: @black;
+  }
+
+  .mejs-controls .mejs-time-rail .mejs-time-float-current {
+    height: @mejs-time-float-size;
+    width: @mejs-time-float-width;
+    margin: 0;
+    font-size: @mejs-time-float-size;
+    line-height: 1;
+  }
+
+  .mejs-controls .mejs-time-rail .mejs-time-float-corner {
+    top: @mejs-time-float-width / 2;
+    left: @mejs-time-float-width / 2;
+    .transform(translate(-50%,-50%));
+    border-color: @white transparent transparent transparent;
+  }
+
+  .mejs-controls .mejs-time-rail span {
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+  }
+
+  // Closed captions pop up selector
+  // --------------------------------------------------
+  .mejs-controls .mejs-captions-button .mejs-captions-selector {
+    bottom: @mejs-controls-height - @mejs-margin;
+    left: -@mejs-margin / 2;
+    right: auto;
+    width: 6rem;
+    height: 6.5rem;
+    padding: @mejs-margin;
+    overflow-y: scroll;
+    font-size: @mejs-cc-size;
+    line-height: 1;
+  }
+
+  .mejs-controls .mejs-captions-button .mejs-captions-selector ul li {
+    display: flex;
+    align-items: center;
+    margin: 0;
+    padding: @mejs-margin / 2;
+  }
+
+  .mejs-controls .mejs-captions-button .mejs-captions-selector ul li input {
+    margin: 0;
+    float: none;
+  }
+
+  .mejs-controls .mejs-captions-button .mejs-captions-selector ul li label {
+    float: none;
+    width: auto;
+    margin-left: @mejs-margin;
+    padding: 0;
+    font-size: @mejs-cc-size;
+    line-height: 1;
+  }
+
+  // Closed captions
+  // --------------------------------------------------
+  .mejs-captions-layer {
+    font-size: @body-size;
+    line-height: @body-line-height;
+    color: inherit;
+  }
+
+  .mejs-captions-position-hover {
+    bottom: @mejs-controls-height + @mejs-time-rail-height;
+  }
+
+  .mejs-captions-text {
+    padding: 0.25rem;
+    background: none;
+    background-color: @black;
+    color: @white;
+  }
+}
+
+// Offset player controls
+// --------------------------------------------------
+.offset-media-controls {
+  .media__widget {
+    padding-bottom: @mejs-controls-height;
+  }
+
+  .mejs-video:not(.mejs-container-fullscreen) .mejs-controls {
+    bottom: -@mejs-controls-height;
+  }
+}