]>
Commit | Line | Data |
---|---|---|
8cbc40b2 C |
1 | @use '_variables' as *; |
2 | @use '_mixins' as *; | |
3 | @use './_player-variables' as *; | |
2a19a1e4 C |
4 | |
5 | $setting-transition-duration: 0.15s; | |
6 | $setting-transition-easing: ease-out; | |
7 | ||
8 | /* Sass for videojs-settings-menu */ | |
9 | ||
10 | .video-js { | |
11 | ||
2a19a1e4 C |
12 | .vjs-settings-sub-menu-title { |
13 | width: 4em; | |
14 | text-transform: initial; | |
15 | } | |
16 | ||
17 | .vjs-settings-dialog { | |
18 | position: absolute; | |
19 | right: .5em; | |
20 | bottom: 3.5em; | |
e66883b3 | 21 | color: pvar(--embedForegroundColor); |
2a19a1e4 C |
22 | opacity: $primary-foreground-opacity; |
23 | margin: 0 auto; | |
24 | font-size: $font-size !important; | |
f1a0555a | 25 | z-index: 100; |
2a19a1e4 C |
26 | |
27 | width: auto; | |
28 | overflow: hidden; | |
29 | ||
30 | transition: width $setting-transition-duration $setting-transition-easing, height $setting-transition-duration $setting-transition-easing; | |
31 | ||
32 | .vjs-settings-sub-menu-value, | |
33 | .vjs-settings-sub-menu-title { | |
34 | display: table-cell; | |
35 | padding: 0 5px; | |
16f7022b | 36 | text-transform: capitalize; |
2a19a1e4 C |
37 | } |
38 | ||
39 | .vjs-settings-sub-menu-title { | |
27bc9586 | 40 | text-align: start; |
2a19a1e4 C |
41 | font-weight: $font-semibold; |
42 | } | |
43 | ||
44 | .vjs-settings-sub-menu-value { | |
45 | width: 100%; | |
27bc9586 | 46 | text-align: end; |
2a19a1e4 C |
47 | |
48 | small { | |
49 | font-size: 0.85em; | |
50 | opacity: 0.8; | |
51 | } | |
52 | } | |
53 | ||
54 | .vjs-settings-panel { | |
55 | position: absolute; | |
56 | bottom: 0; | |
57 | right: 0; | |
58 | overflow-y: auto; | |
59 | overflow-x: hidden; | |
60 | border-radius: 1px; | |
61 | } | |
62 | ||
63 | .vjs-settings-panel-child { | |
64 | display: flex; | |
65 | ||
66 | align-items: flex-end; | |
67 | white-space: nowrap; | |
68 | ||
69 | &:focus, | |
70 | &:active { | |
71 | outline: none; | |
72 | } | |
73 | ||
74 | > .vjs-menu { | |
75 | flex: 1; | |
76 | min-width: 200px; | |
77 | } | |
78 | ||
79 | > .vjs-menu, | |
80 | > .vjs-settings-sub-menu { | |
81 | transition: all $setting-transition-duration $setting-transition-easing; | |
82 | ||
83 | .vjs-menu-item { | |
c4082b8b C |
84 | font-size: 1em; |
85 | text-transform: initial; | |
2a19a1e4 C |
86 | |
87 | &:hover { | |
c4082b8b | 88 | cursor: pointer; |
2a19a1e4 C |
89 | background-color: rgba(255, 255, 255, 0.2); |
90 | } | |
91 | ||
92 | &:first-child { | |
93 | margin-top: 5px; | |
94 | } | |
95 | ||
96 | &:last-child { | |
97 | margin-bottom: 5px; | |
98 | } | |
2a19a1e4 | 99 | |
c4082b8b C |
100 | &.disabled { |
101 | opacity: 0.5; | |
102 | cursor: default !important; | |
103 | background-color: inherit !important; | |
2a19a1e4 C |
104 | } |
105 | } | |
106 | } | |
107 | ||
108 | > .vjs-menu { | |
109 | .vjs-menu-item { | |
110 | padding: 8px 16px; | |
111 | } | |
112 | ||
113 | .vjs-settings-sub-menu-value::after { | |
114 | @include chevron-right(9px, 2px); | |
115 | ||
27bc9586 | 116 | @include margin-left(5px); |
2a19a1e4 C |
117 | } |
118 | } | |
119 | ||
120 | > .vjs-settings-sub-menu { | |
5f31aaa3 | 121 | min-width: 80px; |
2a19a1e4 C |
122 | |
123 | .vjs-menu-item { | |
124 | outline: 0; | |
125 | font-weight: $font-semibold; | |
27bc9586 | 126 | text-align: end; |
16f7022b | 127 | padding: 5px 8px; |
2a19a1e4 C |
128 | |
129 | &.vjs-back-button { | |
16f7022b | 130 | padding: 8px 8px 13px 12px; |
2a19a1e4 | 131 | margin-bottom: 5px; |
931d3430 | 132 | border-bottom: 1px solid #808080; |
27bc9586 | 133 | text-align: start; |
2a19a1e4 C |
134 | |
135 | &::before { | |
136 | @include chevron-left(9px, 2px); | |
137 | ||
27bc9586 | 138 | @include margin-right(5px); |
2a19a1e4 C |
139 | } |
140 | } | |
141 | ||
142 | &.vjs-selected { | |
143 | background-color: inherit; | |
144 | color: inherit; | |
145 | position: relative; | |
146 | ||
04868c13 C |
147 | &:focus { |
148 | background-color: rgba(115, 133, 159, 0.5); | |
149 | } | |
150 | ||
2a19a1e4 C |
151 | &::before { |
152 | @include icon(15px); | |
153 | ||
154 | position: absolute; | |
155 | left: 8px; | |
156 | content: ' '; | |
157 | margin-top: 1px; | |
fe05c3ac | 158 | background-image: url('#{$assets-path}/player/images/tick-white.svg'); |
2a19a1e4 C |
159 | } |
160 | } | |
161 | } | |
16f7022b C |
162 | |
163 | // Special captions case | |
164 | // Bigger caption button | |
165 | &.vjs-captions-button { | |
166 | width: 200px; | |
167 | ||
168 | .vjs-menu-item { | |
27bc9586 | 169 | text-align: start; |
16f7022b C |
170 | |
171 | .vjs-menu-item-text { | |
27bc9586 | 172 | @include margin-left(25px); |
16f7022b C |
173 | text-transform: capitalize; |
174 | } | |
175 | } | |
176 | } | |
177 | ||
178 | .vjs-menu { | |
179 | width: inherit; | |
180 | } | |
2a19a1e4 C |
181 | } |
182 | } | |
183 | } | |
fe05c3ac | 184 | } |