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;
29 transition: width $setting-transition-duration $setting-transition-easing, height $setting-transition-duration $setting-transition-easing;
31 .vjs-settings-sub-menu-value,
32 .vjs-settings-sub-menu-title {
35 text-transform: capitalize;
38 .vjs-settings-sub-menu-title {
40 font-weight: $font-semibold;
43 .vjs-settings-sub-menu-value {
62 .vjs-settings-panel-child {
65 align-items: flex-end;
79 > .vjs-settings-sub-menu {
80 transition: all $setting-transition-duration $setting-transition-easing;
84 text-transform: initial;
88 background-color: rgba(255, 255, 255, 0.2);
101 cursor: default !important;
102 background-color: inherit !important;
112 .vjs-settings-sub-menu-value::after {
113 @include chevron-right(9px, 2px);
115 @include margin-left(5px);
119 > .vjs-settings-sub-menu {
124 font-weight: $font-semibold;
129 padding: 8px 8px 13px 12px;
131 border-bottom: 1px solid #808080;
135 @include chevron-left(9px, 2px);
137 @include margin-right(5px);
142 background-color: inherit;
147 background-color: rgba(115, 133, 159, 0.5);
157 background-image: url('#{$assets-path}/player/images/tick-white.svg');
162 // Special captions case
163 // Bigger caption button
164 &.vjs-captions-button {
170 .vjs-menu-item-text {
171 @include margin-left(25px);
172 text-transform: capitalize;