From dce4d40fd87888e2ff756e24230c75ec61a86c51 Mon Sep 17 00:00:00 2001 From: Matthew McClure Date: Thu, 30 Apr 2015 22:04:33 -0700 Subject: [PATCH] adding back caption-settings styles. Closes #2104 --- src/css/_variables.scss | 2 +- src/css/components/_captions-settings.scss | 74 ++++++++++++++++++++++ src/css/video-js.scss | 1 + 3 files changed, 76 insertions(+), 1 deletion(-) create mode 100644 src/css/components/_captions-settings.scss diff --git a/src/css/_variables.scss b/src/css/_variables.scss index 8267ed0e32..80e28b1a71 100644 --- a/src/css/_variables.scss +++ b/src/css/_variables.scss @@ -5,7 +5,7 @@ $primary-bg: #000; $secondary-bg: lighten($primary-bg, 35%); $icon-font-family: 'VideoJS'; -$text-font-family: Arial, sans-serif; +$text-font-family: Arial, Helvetica, sans-serif; $base-font-size: 10px; $control-bar-bg: #2B333F; diff --git a/src/css/components/_captions-settings.scss b/src/css/components/_captions-settings.scss new file mode 100644 index 0000000000..0b9a3470b9 --- /dev/null +++ b/src/css/components/_captions-settings.scss @@ -0,0 +1,74 @@ +.vjs-caption-settings { + position: relative; + top: 1em; + background-color: $primary-bg; + opacity: 0.75; + color: $primary-text; + margin: 0 auto; + padding: 0.5em; + height: 15em; + font-family: $text-font-family; + font-size: 12px; + width: 40em; +} + +.vjs-caption-settings .vjs-tracksettings { + top: 0; + bottom: 2em; + left: 0; + right: 0; + position: absolute; + overflow: auto; +} + +.vjs-caption-settings .vjs-tracksettings-colors, +.vjs-caption-settings .vjs-tracksettings-font { + float: left; +} +.vjs-caption-settings .vjs-tracksettings-colors:after, +.vjs-caption-settings .vjs-tracksettings-font:after, +.vjs-caption-settings .vjs-tracksettings-controls:after { + clear: both; +} + +.vjs-caption-settings .vjs-tracksettings-controls { + position: absolute; + bottom: 1em; + right: 1em; +} + +.vjs-caption-settings .vjs-tracksetting { + margin: 5px; + padding: 3px; + min-height: 40px; +} +.vjs-caption-settings .vjs-tracksetting label { + display: block; + width: 100px; + margin-bottom: 5px; +} + +.vjs-caption-settings .vjs-tracksetting span { + display: inline; + margin-left: 5px; +} + +.vjs-caption-settings .vjs-tracksetting > div { + margin-bottom: 5px; + min-height: 20px; +} + +.vjs-caption-settings .vjs-tracksetting > div:last-child { + margin-bottom: 0; + padding-bottom: 0; + min-height: 0; +} + +.vjs-caption-settings label > input { + margin-right: 10px; +} + +.vjs-caption-settings input[type="button"] { + width: 40px; + height: 40px; +} diff --git a/src/css/video-js.scss b/src/css/video-js.scss index 8cff891c74..51af6ce606 100644 --- a/src/css/video-js.scss +++ b/src/css/video-js.scss @@ -23,3 +23,4 @@ @import "components/chapters"; @import "components/subtitles"; @import "components/adaptive"; +@import "components/captions-settings";