1 @use '_variables' as *;
3 @use './_player-variables' as *;
5 $setting-transition-duration: 0.15s;
6 $setting-transition-easing: ease-out;
8 /* Sass for videojs-settings-menu */
12 .vjs-settings-sub-menu-title {
14 text-transform: initial;
17 .vjs-settings-dialog {
21 color: pvar(--embedForegroundColor);
22 opacity: $primary-foreground-opacity;
24 font-size: $font-size !important;
30 transition: width $setting-transition-duration $setting-transition-easing, height $setting-transition-duration $setting-transition-easing;
32 .vjs-settings-sub-menu-value,
33 .vjs-settings-sub-menu-title {
36 text-transform: capitalize;
39 .vjs-settings-sub-menu-title {
41 font-weight: $font-semibold;
44 .vjs-settings-sub-menu-value {
63 .vjs-settings-panel-child {
66 align-items: flex-end;
80 > .vjs-settings-sub-menu {
81 transition: all $setting-transition-duration $setting-transition-easing;
85 text-transform: initial;
89 background-color: rgba(255, 255, 255, 0.2);
102 cursor: default !important;
103 background-color: inherit !important;
113 .vjs-settings-sub-menu-value::after {
114 @include chevron-right(9px, 2px);
116 @include margin-left(5px);
120 > .vjs-settings-sub-menu {
125 font-weight: $font-semibold;
130 padding: 8px 8px 13px 12px;
132 border-bottom: 1px solid #808080;
136 @include chevron-left(9px, 2px);
138 @include margin-right(5px);
143 background-color: inherit;
148 background-color: rgba(115, 133, 159, 0.5);
158 background-image: url('#{$assets-path}/player/images/tick-white.svg');
163 // Special captions case
164 // Bigger caption button
165 &.vjs-captions-button {
171 .vjs-menu-item-text {
172 @include margin-left(25px);
173 text-transform: capitalize;