@mmcc added back the captions settings styles. closes #2112

CHANGELOG.md

@@ -22,6 +22,7 @@ CHANGELOG
 * @bc-bbay rename onEvent methods to handleEvent ([view](https://github.com/videojs/video.js/pull/2093))
 * @dmlap added an error message if techOrder is not in options ([view](https://github.com/videojs/video.js/pull/2097))
 * @dconnolly exported the missing videojs.plugin function ([view](https://github.com/videojs/video.js/pull/2103))
+* @mmcc added back the captions settings styles ([view](https://github.com/videojs/video.js/pull/2112))
 
 --------------------
 

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;

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;
+}

src/css/components/_text-track.scss

@@ -1,10 +1,10 @@
 .video-js .vjs-text-track-display {
-  text-align: center;
   position: absolute;
-  bottom: 4em;
-  /* Leave padding on left and right */
-  left: 1em;
-  right: 1em;
+  bottom: 3em;
+  left: 0;
+  right: 0;
+  top: 0;
+  pointer-events: none;
 }
 
 /* Move captions down when controls aren't being shown */

src/css/video-js.scss

@@ -23,3 +23,4 @@
 @import "components/chapters";
 @import "components/subtitles";
 @import "components/adaptive";
+@import "components/captions-settings";