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