aboutsummaryrefslogtreecommitdiffstats
path: root/src/less/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/less/components')
-rw-r--r--src/less/components/captions.less4
-rw-r--r--src/less/components/control.less (renamed from src/less/components/buttons.less)12
-rw-r--r--src/less/components/controls.less2
-rw-r--r--src/less/components/times.less12
-rw-r--r--src/less/components/volume.less5
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;
}
}