From 3e0a91141822758094b2cbd5f0ecdd8ce4142b5f Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 26 May 2018 13:37:10 +1000 Subject: WIP --- src/sass/components/captions.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/sass/components/captions.scss') diff --git a/src/sass/components/captions.scss b/src/sass/components/captions.scss index 9dfc2be8..66f34199 100644 --- a/src/sass/components/captions.scss +++ b/src/sass/components/captions.scss @@ -10,7 +10,7 @@ .plyr__captions { animation: plyr-fade-in 0.3s ease; bottom: 0; - color: $plyr-captions-color; + color: var(--plyr-captions-text-color); display: none; font-size: $plyr-font-size-captions-small; left: 0; @@ -22,7 +22,7 @@ width: 100%; span { - background: $plyr-captions-bg; + background: var(--plyr-captions-background); border-radius: 2px; box-decoration-break: clone; line-height: 185%; -- cgit v1.2.3 From 996075decc6e8c0f0c5059dccea21b16020eb78b Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 11 Apr 2019 20:50:20 +1000 Subject: More work on variable usage --- src/sass/components/captions.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'src/sass/components/captions.scss') diff --git a/src/sass/components/captions.scss b/src/sass/components/captions.scss index b8e2d771..d7951b96 100644 --- a/src/sass/components/captions.scss +++ b/src/sass/components/captions.scss @@ -56,4 +56,3 @@ .plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions { transform: translateY(-($plyr-control-spacing * 4)); } - -- cgit v1.2.3 From 502d5977d79148957828cbf313b7ef4c9f31973f Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 11 Apr 2020 16:23:14 +1000 Subject: Converted to 2 space indentation --- src/sass/components/captions.scss | 76 +++++++++++++++++++-------------------- 1 file changed, 37 insertions(+), 39 deletions(-) (limited to 'src/sass/components/captions.scss') diff --git a/src/sass/components/captions.scss b/src/sass/components/captions.scss index 85899ef3..eb3c9389 100644 --- a/src/sass/components/captions.scss +++ b/src/sass/components/captions.scss @@ -4,57 +4,55 @@ // Hide default captions .plyr--full-ui ::-webkit-media-text-track-container { - display: none; + display: none; } .plyr__captions { - animation: plyr-fade-in 0.3s ease; - bottom: 0; - display: none; - font-size: $plyr-font-size-captions-small; - left: 0; - padding: $plyr-control-spacing; - position: absolute; - text-align: center; - transition: transform 0.4s ease-in-out; - width: 100%; - - .plyr__caption { - background: $plyr-captions-background; - background: var(--plyr-captions-background, $plyr-captions-background); - border-radius: 2px; - box-decoration-break: clone; - color: $plyr-captions-text-color; - color: var(--plyr-captions-text-color, $plyr-captions-text-color); - line-height: 185%; - padding: 0.2em 0.5em; - white-space: pre-wrap; - - // Firefox adds a
when using getCueAsHTML() - div { - display: inline; - } + animation: plyr-fade-in 0.3s ease; + bottom: 0; + display: none; + font-size: $plyr-font-size-captions-small; + left: 0; + padding: $plyr-control-spacing; + position: absolute; + text-align: center; + transition: transform 0.4s ease-in-out; + width: 100%; + + .plyr__caption { + background: $plyr-captions-background; + border-radius: 2px; + box-decoration-break: clone; + color: $plyr-captions-text-color; + line-height: 185%; + padding: 0.2em 0.5em; + white-space: pre-wrap; + + // Firefox adds a
when using getCueAsHTML() + div { + display: inline; } + } - span:empty { - display: none; - } + span:empty { + display: none; + } - @media (min-width: $plyr-bp-sm) { - font-size: $plyr-font-size-captions-base; - padding: ($plyr-control-spacing * 2); - } + @media (min-width: $plyr-bp-sm) { + font-size: $plyr-font-size-captions-base; + padding: calc(#{$plyr-control-spacing} * 2); + } - @media (min-width: $plyr-bp-md) { - font-size: $plyr-font-size-captions-medium; - } + @media (min-width: $plyr-bp-md) { + font-size: $plyr-font-size-captions-medium; + } } .plyr--captions-active .plyr__captions { - display: block; + display: block; } // If the lower controls are shown and not empty .plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions { - transform: translateY(-($plyr-control-spacing * 4)); + transform: translateY(calc(#{$plyr-control-spacing} * -4)); } -- cgit v1.2.3 From a97008aeebb19678e5183e7c934e60729857e11b Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Fri, 24 Apr 2020 00:14:50 +1000 Subject: More work on custom properties and documentation --- src/sass/components/captions.scss | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) (limited to 'src/sass/components/captions.scss') diff --git a/src/sass/components/captions.scss b/src/sass/components/captions.scss index eb3c9389..2acab086 100644 --- a/src/sass/components/captions.scss +++ b/src/sass/components/captions.scss @@ -19,21 +19,6 @@ transition: transform 0.4s ease-in-out; width: 100%; - .plyr__caption { - background: $plyr-captions-background; - border-radius: 2px; - box-decoration-break: clone; - color: $plyr-captions-text-color; - line-height: 185%; - padding: 0.2em 0.5em; - white-space: pre-wrap; - - // Firefox adds a
when using getCueAsHTML() - div { - display: inline; - } - } - span:empty { display: none; } @@ -56,3 +41,18 @@ .plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions { transform: translateY(calc(#{$plyr-control-spacing} * -4)); } + +.plyr__caption { + background: $plyr-captions-background; + border-radius: 2px; + box-decoration-break: clone; + color: $plyr-captions-text-color; + line-height: 185%; + padding: 0.2em 0.5em; + white-space: pre-wrap; + + // Firefox adds a
when using getCueAsHTML() + div { + display: inline; + } +} -- cgit v1.2.3