aboutsummaryrefslogtreecommitdiffstats
path: root/src/less
diff options
context:
space:
mode:
Diffstat (limited to 'src/less')
-rw-r--r--src/less/base.less2
-rw-r--r--src/less/components/badges.less1
-rw-r--r--src/less/components/captions.less3
-rw-r--r--src/less/lib/mixins.less11
-rw-r--r--src/less/settings.less3
5 files changed, 18 insertions, 2 deletions
diff --git a/src/less/base.less b/src/less/base.less
index c6272e11..c4158186 100644
--- a/src/less/base.less
+++ b/src/less/base.less
@@ -9,8 +9,10 @@
min-width: 200px;
font-family: @plyr-font-family;
font-weight: @plyr-font-weight-normal;
+ line-height: @plyr-line-height;
direction: ltr;
text-shadow: none;
+ .plyr-font-smoothing(off);
// Media elements
video,
diff --git a/src/less/components/badges.less b/src/less/components/badges.less
index 37ed2af4..398cb56d 100644
--- a/src/less/components/badges.less
+++ b/src/less/components/badges.less
@@ -8,4 +8,5 @@
background: @plyr-menu-color;
color: @plyr-menu-bg;
font-size: @plyr-font-size-tiny;
+ .plyr-font-smoothing(on);
}
diff --git a/src/less/components/captions.less b/src/less/components/captions.less
index d2058a13..084bbf03 100644
--- a/src/less/components/captions.less
+++ b/src/less/components/captions.less
@@ -15,10 +15,11 @@
width: 100%;
padding: @plyr-control-spacing;
transform: translateY(-(@plyr-control-spacing * 4));
- transition: transform 0.3s ease;
+ transition: transform 0.4s ease-in-out;
color: @plyr-captions-color;
font-size: @plyr-font-size-captions-small;
text-align: center;
+ .plyr-font-smoothing(on);
span {
border-radius: 2px;
diff --git a/src/less/lib/mixins.less b/src/less/lib/mixins.less
index 333f6afe..22ffed9d 100644
--- a/src/less/lib/mixins.less
+++ b/src/less/lib/mixins.less
@@ -3,6 +3,17 @@
// https://github.com/sampotts/plyr
// ==========================================================================
+// Font smoothing
+// ---------------------------------------
+.plyr-font-smoothing(@mode: on) when(@mode = on) {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+}
+.plyr-font-smoothing(@mode: on) when(@mode = off) {
+ -moz-osx-font-smoothing: auto;
+ -webkit-font-smoothing: subpixel-antialiased;
+}
+
// <input type="range"> styling
.plyr-range-track() {
height: @plyr-range-track-height;
diff --git a/src/less/settings.less b/src/less/settings.less
index e1b3f64b..cc5b870e 100644
--- a/src/less/settings.less
+++ b/src/less/settings.less
@@ -12,12 +12,13 @@
@plyr-color-main: #1aafff;
// Font
-@plyr-font-family: inherit; //Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
+@plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
@plyr-font-size-base: 16px;
@plyr-font-size-small: 14px;
@plyr-font-size-tiny: 10px;
@plyr-font-weight-normal: 500;
@plyr-font-weight-bold: 600;
+@plyr-line-height: 1.7;
// Captions
@plyr-captions-bg: fade(#000, 80%);