web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2024-11-28 08:58:46 +02:00
Code Releases Activity

feat: Use CSS grid for Caption Settings dialog to begin making it more responsive (#4997)

Browse Source 
If CSS Grid is available, the Captions Settings Dialog will use it for the layout to begin making it more responsive.
It will fallback to the current layout method if CSS Grid isn't available.
This commit is contained in:
Kevin Reynolds 2018-03-13 15:17:18 -04:00 committed by Gary Katsevman
parent e833d3e3de
commit d2f63ad364
1 changed files with 30 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/css/components/_captions-settings.scss
View File

@ -21,7 +21,37 @@
vertical-align: bottom;
}
// code that will only run if CSS Grid is supported by the browser
@supports (display: grid) {
.vjs-text-track-settings .vjs-modal-dialog-content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr auto;
}
.vjs-text-track-settings .vjs-track-settings-colors {
display: block;
grid-column: 1;
grid-row: 1;
}
.vjs-text-track-settings .vjs-track-settings-font {
grid-column: 2;
grid-row: 1;
}
.vjs-text-track-settings .vjs-track-settings-controls {
grid-column: 2;
grid-row: 2;
}
}
// Form elements
.vjs-track-setting > select {
margin-right: 5px;
}
.vjs-text-track-settings fieldset {
margin: 5px;
padding: 3px;
@ -30,7 +60,6 @@
.vjs-text-track-settings fieldset span {
display: inline-block;
margin-left: 5px;
}
.vjs-text-track-settings legend {