diff options
Diffstat (limited to 'src/less/components')
-rw-r--r-- | src/less/components/captions.less | 4 | ||||
-rw-r--r-- | src/less/components/control.less (renamed from src/less/components/buttons.less) | 12 | ||||
-rw-r--r-- | src/less/components/controls.less | 2 | ||||
-rw-r--r-- | src/less/components/times.less | 12 | ||||
-rw-r--r-- | src/less/components/volume.less | 5 |
5 files changed, 16 insertions, 19 deletions
diff --git a/src/less/components/captions.less b/src/less/components/captions.less index ad0fc79f..605d7e49 100644 --- a/src/less/components/captions.less +++ b/src/less/components/captions.less @@ -39,12 +39,12 @@ display: none; } - @media (min-width: @plyr-bp-screen-sm) { + @media @plyr-mq-sm { padding: (@plyr-control-spacing * 2); font-size: @plyr-font-size-captions-base; } - @media (min-width: @plyr-bp-screen-md) { + @media @plyr-mq-md { font-size: @plyr-font-size-captions-medium; } } diff --git a/src/less/components/buttons.less b/src/less/components/control.less index 8c775d73..48b73e0f 100644 --- a/src/less/components/buttons.less +++ b/src/less/components/control.less @@ -1,13 +1,15 @@ +// -------------------------------------------------------------- +// Control buttons +// -------------------------------------------------------------- + .plyr__control { position: relative; - display: inline-block; flex-shrink: 0; overflow: visible; // IE11 - vertical-align: middle; padding: @plyr-control-padding; border: 0; background: transparent; - border-radius: 3px; + border-radius: @plyr-control-radius; cursor: pointer; transition: all 0.3s ease; color: inherit; @@ -66,7 +68,7 @@ svg { position: relative; - left: 2px; + left: 2px; // Offset to make the play button look right width: @plyr-control-icon-size-large; height: @plyr-control-icon-size-large; } @@ -78,7 +80,7 @@ } .plyr--full-ui.plyr--video .plyr__control--overlaid { - display: inline-block; + display: block; } .plyr--playing .plyr__control--overlaid { diff --git a/src/less/components/controls.less b/src/less/components/controls.less index fe257224..fb66e869 100644 --- a/src/less/components/controls.less +++ b/src/less/components/controls.less @@ -30,7 +30,7 @@ margin-left: (@plyr-control-spacing / 2); } - @media (min-width: @plyr-bp-screen-sm) { + @media @plyr-mq-sm { > .plyr__control, .plyr__progress, .plyr__time, diff --git a/src/less/components/times.less b/src/less/components/times.less index 29b06aa0..09a55702 100644 --- a/src/less/components/times.less +++ b/src/less/components/times.less @@ -3,24 +3,20 @@ // -------------------------------------------------------------- .plyr__time { - display: inline-block; - vertical-align: middle; font-size: @plyr-font-size-time; } // Media duration hidden on small screens .plyr__time + .plyr__time { - display: none; - - @media (min-width: @plyr-bp-screen-md) { - display: inline-block; - } - // Add a slash in before &::before { content: '\2044'; margin-right: @plyr-control-spacing; } + + @media @plyr-mq-sm-max { + display: none; + } } .plyr--video .plyr__time { diff --git a/src/less/components/volume.less b/src/less/components/volume.less index 1c9054b7..bb5a49ba 100644 --- a/src/less/components/volume.less +++ b/src/less/components/volume.less @@ -11,12 +11,11 @@ z-index: 2; } - @media (min-width: @plyr-bp-screen-sm) { - display: block; + @media @plyr-mq-sm { max-width: 50px; } - @media (min-width: @plyr-bp-screen-md) { + @media @plyr-mq-md { max-width: 80px; } } |