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: responsive caption settings (#5534)

Browse Source 
When responsive mode is set, make the caption settings dialog be more responsive to the size of the player.
Make whitespace and sizing a bit more consistent across elements.
This commit is contained in:
Brandon Casey 2018-11-14 12:12:34 -05:00 committed by Gary Katsevman
parent ab0e29a431
commit b67fe271ba
1 changed files with 25 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,30 +26,36 @@
.vjs-text-track-settings .vjs-modal-dialog-content { .vjs-text-track-settings .vjs-modal-dialog-content {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr auto; grid-template-rows: 1fr;
// Flex and Grid for Firefox, IE, and Edge remove the bottom padding/margin in a container as size decreases
// so we add bottom padding/margin to the last item in the grid instead of here
// see https://stackoverflow.com/a/23754080
padding: 20px 24px 0px 24px;
} }
.vjs-text-track-settings .vjs-track-settings-colors { // see the comment for padding above
display: block; .vjs-track-settings-controls .vjs-default-button {
grid-column: 1; margin-bottom: 20px;
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 { .vjs-text-track-settings .vjs-track-settings-controls {
grid-column: 2; // make this take up both columns
grid-row: 2; grid-column: 1 / -1;
} }
// 1 column for small players
.vjs-layout-small .vjs-text-track-settings .vjs-modal-dialog-content ,
.vjs-layout-x-small .vjs-text-track-settings .vjs-modal-dialog-content,
.vjs-layout-tiny .vjs-text-track-settings .vjs-modal-dialog-content {
grid-template-columns: 1fr;
}
} }
// Form elements // Form elements
.vjs-track-setting > select { .vjs-track-setting > select {
margin-right: 5px; margin-right: 1em;
margin-bottom: 0.5em;
} }
.vjs-text-track-settings fieldset { .vjs-text-track-settings fieldset {
@ -62,6 +68,11 @@
display: inline-block; display: inline-block;
} }
// style the second select for text colors
.vjs-text-track-settings fieldset span > select {
max-width: 7.3em;
}
.vjs-text-track-settings legend { .vjs-text-track-settings legend {
color: $primary-foreground-color; color: $primary-foreground-color;
margin: 0 0 5px 0; margin: 0 0 5px 0;