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