]>
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; | |
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; | |
16f7022b | 35 | text-transform: capitalize; |
2a19a1e4 C |
36 | } |
37 | ||
38 | .vjs-settings-sub-menu-title { | |
27bc9586 | 39 | text-align: start; |
2a19a1e4 C |
40 | font-weight: $font-semibold; |
41 | } | |
42 | ||
43 | .vjs-settings-sub-menu-value { | |
44 | width: 100%; | |
27bc9586 | 45 | text-align: end; |
2a19a1e4 C |
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 { | |
c4082b8b C |
83 | font-size: 1em; |
84 | text-transform: initial; | |
2a19a1e4 C |
85 | |
86 | &:hover { | |
c4082b8b | 87 | cursor: pointer; |
2a19a1e4 C |
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 | } | |
2a19a1e4 | 98 | |
c4082b8b C |
99 | &.disabled { |
100 | opacity: 0.5; | |
101 | cursor: default !important; | |
102 | background-color: inherit !important; | |
2a19a1e4 C |
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 | ||
27bc9586 | 115 | @include margin-left(5px); |
2a19a1e4 C |
116 | } |
117 | } | |
118 | ||
119 | > .vjs-settings-sub-menu { | |
5f31aaa3 | 120 | min-width: 80px; |
2a19a1e4 C |
121 | |
122 | .vjs-menu-item { | |
123 | outline: 0; | |
124 | font-weight: $font-semibold; | |
27bc9586 | 125 | text-align: end; |
16f7022b | 126 | padding: 5px 8px; |
2a19a1e4 C |
127 | |
128 | &.vjs-back-button { | |
16f7022b | 129 | padding: 8px 8px 13px 12px; |
2a19a1e4 | 130 | margin-bottom: 5px; |
931d3430 | 131 | border-bottom: 1px solid #808080; |
27bc9586 | 132 | text-align: start; |
2a19a1e4 C |
133 | |
134 | &::before { | |
135 | @include chevron-left(9px, 2px); | |
136 | ||
27bc9586 | 137 | @include margin-right(5px); |
2a19a1e4 C |
138 | } |
139 | } | |
140 | ||
141 | &.vjs-selected { | |
142 | background-color: inherit; | |
143 | color: inherit; | |
144 | position: relative; | |
145 | ||
04868c13 C |
146 | &:focus { |
147 | background-color: rgba(115, 133, 159, 0.5); | |
148 | } | |
149 | ||
2a19a1e4 C |
150 | &::before { |
151 | @include icon(15px); | |
152 | ||
153 | position: absolute; | |
154 | left: 8px; | |
155 | content: ' '; | |
156 | margin-top: 1px; | |
fe05c3ac | 157 | background-image: url('#{$assets-path}/player/images/tick-white.svg'); |
2a19a1e4 C |
158 | } |
159 | } | |
160 | } | |
16f7022b C |
161 | |
162 | // Special captions case | |
163 | // Bigger caption button | |
164 | &.vjs-captions-button { | |
165 | width: 200px; | |
166 | ||
167 | .vjs-menu-item { | |
27bc9586 | 168 | text-align: start; |
16f7022b C |
169 | |
170 | .vjs-menu-item-text { | |
27bc9586 | 171 | @include margin-left(25px); |
16f7022b C |
172 | text-transform: capitalize; |
173 | } | |
174 | } | |
175 | } | |
176 | ||
177 | .vjs-menu { | |
178 | width: inherit; | |
179 | } | |
2a19a1e4 C |
180 | } |
181 | } | |
182 | } | |
fe05c3ac | 183 | } |