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: pvar(--embedForegroundColor);
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 {
55 text-transform: capitalize;
58 .vjs-settings-sub-menu-title {
60 font-weight: $font-semibold;
63 .vjs-settings-sub-menu-value {
82 .vjs-settings-panel-child {
85 align-items: flex-end;
99 > .vjs-settings-sub-menu {
100 transition: all $setting-transition-duration $setting-transition-easing;
104 text-transform: initial;
108 background-color: rgba(255, 255, 255, 0.2);
121 cursor: default !important;
122 background-color: inherit !important;
132 .vjs-settings-sub-menu-value::after {
133 @include chevron-right(9px, 2px);
139 > .vjs-settings-sub-menu {
144 font-weight: $font-semibold;
149 background-color: inherit;
150 padding: 8px 8px 13px 12px;
152 border-bottom: 1px solid grey;
156 @include chevron-left(9px, 2px);
163 background-color: inherit;
174 background-image: url('#{$assets-path}/player/images/tick-white.svg');
179 // Special captions case
180 // Bigger caption button
181 &.vjs-captions-button {
187 .vjs-menu-item-text {
189 text-transform: capitalize;