diff options
Diffstat (limited to 'src/less')
-rw-r--r-- | src/less/base.less | 2 | ||||
-rw-r--r-- | src/less/components/badges.less | 1 | ||||
-rw-r--r-- | src/less/components/captions.less | 3 | ||||
-rw-r--r-- | src/less/lib/mixins.less | 11 | ||||
-rw-r--r-- | src/less/settings.less | 3 |
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%); |