3 @import './_player-variables';
5 $setting-transition-duration: 0.15s;
6 $setting-transition-easing: ease-out;
8 /* Sass for videojs-settings-menu */
13 @include disable-outline;
18 .vjs-icon-placeholder {
19 display: inline-block;
22 vertical-align: middle;
23 background: url('#{$assets-path}/player/images/settings.svg') no-repeat;
24 background-size: contain;
32 .vjs-settings-sub-menu-title {
34 text-transform: initial;
37 .vjs-settings-dialog {
41 color: $primary-foreground-color;
42 opacity: $primary-foreground-opacity;
44 font-size: $font-size !important;
49 transition: width $setting-transition-duration $setting-transition-easing, height $setting-transition-duration $setting-transition-easing;
51 .vjs-settings-sub-menu-value,
52 .vjs-settings-sub-menu-title {
57 .vjs-settings-sub-menu-title {
59 font-weight: $font-semibold;
62 .vjs-settings-sub-menu-value {
81 .vjs-settings-panel-child {
84 align-items: flex-end;
98 > .vjs-settings-sub-menu {
99 transition: all $setting-transition-duration $setting-transition-easing;
103 text-transform: initial;
107 background-color: rgba(255, 255, 255, 0.2);
120 cursor: default !important;
121 background-color: inherit !important;
131 .vjs-settings-sub-menu-value::after {
132 @include chevron-right(9px, 2px);
138 > .vjs-settings-sub-menu {
143 font-weight: $font-semibold;
149 background-color: inherit;
150 padding: 8px 8px 13px 8px;
152 border-bottom: 1px solid grey;
155 @include chevron-left(9px, 2px);
162 background-color: inherit;
173 background-image: url('#{$assets-path}/player/images/tick.svg');