Skip to content

Commit

Permalink
Create legacy mep styles to support older versions of the Media plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
@swashbuck
swashbuck committed Aug 15, 2024
1 parent d1e99b9 commit f7d3c1b
Showing 1 changed file with 293 additions and 0 deletions.
293 changes: 293 additions & 0 deletions less/plugins/adapt-contrib-media/mep-legacy.less
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}

0 comments on commit f7d3c1b

Please sign in to comment.