UNPKG

7.94 kBCSSView Raw
1.settings-panel {
2 position: relative;
3 -webkit-user-select: none;
4 -moz-user-select: none;
5 -ms-user-select: none;
6 user-select: none;
7 cursor: default;
8 text-align: left;
9 box-sizing: border-box;
10 font-family: sans-serif;
11 font-size: 1rem;
12 width: 32em;
13 max-width: 100%;
14 padding: 1em;
15}
16
17.settings-panel [hidden] {
18 display: none!important;
19}
20
21.settings-panel * {
22 box-sizing: border-box;
23}
24
25.settings-panel svg {
26 fill: currentColor;
27 max-width: 100%;
28 max-height: 100%;
29 display: inline-block;
30}
31
32.settings-panel input,
33.settings-panel button,
34.settings-panel textarea,
35.settings-panel select {
36 font-family: inherit;
37 font-size: inherit;
38}
39
40.settings-panel textarea {
41 max-height: 8em;
42}
43
44
45.settings-panel a {
46 color: inherit;
47 text-decoration: none;
48}
49
50/** Basic layout */
51.settings-panel-field {
52 position: relative;
53 padding: .25em;
54 display: table;
55 width: 100%;
56}
57.settings-panel-field:last-child {
58 margin-bottom: 0;
59}
60.settings-panel-label {
61 left: 0;
62 display: table-cell;
63 line-height: 1.2;
64 vertical-align: baseline;
65 padding-top: 0;
66 max-width: 100%;
67}
68.settings-panel-input {
69 display: table-cell;
70 vertical-align: baseline;
71 position: relative;
72 white-space: nowrap;
73}
74
75.settings-panel-orientation-left .settings-panel-label {
76 width: 9em;
77 padding-right: .5em;
78}
79.settings-panel-orientation-right .settings-panel-label {
80 display: block;
81 margin-right: 0;
82 float: right;
83 width: 9em;
84 padding-top: .4em;
85 padding-left: .5em;
86}
87.settings-panel-orientation-right .settings-panel-label + .settings-panel-input {
88 display: block;
89 width: calc(100% - 9em);
90}
91.settings-panel-orientation-top .settings-panel-label {
92 display: block;
93 width: 100%;
94 margin-right: 0;
95 padding-top: 0;
96 line-height: 1.5;
97}
98.settings-panel-orientation-top .settings-panel-label + .settings-panel-input {
99 display: block;
100 width: 100%;
101 padding: 0;
102}
103.settings-panel-orientation-bottom .settings-panel-label {
104 display: block;
105 width: 100%;
106 margin-right: 0;
107 padding: 0;
108 line-height: 1.5;
109 border-top: 2.5em solid transparent;
110}
111.settings-panel-orientation-bottom .settings-panel-label + .settings-panel-input {
112 width: 100%;
113 position: absolute;
114 top: 0;
115}
116
117.settings-panel-orientation-left > .settings-panel-label {
118 width: 9em;
119 display: table-cell;
120}
121
122.settings-panel-title {
123 font-size: 1.6em;
124 line-height: 1.25;
125 margin-top: 0;
126 margin-bottom: 0;
127 padding: .25em .25em;
128 text-align: center;
129}
130.settings-panel--collapsible .settings-panel-title {
131 cursor: pointer;
132}
133.settings-panel--collapsed > *:not(.settings-panel-title) {
134 display: none!important;
135}
136
137
138/** Button */
139.settings-panel-field--button {
140 display: inline-block;
141}
142.settings-panel-field--button .settings-panel-input {
143 display: block;
144 text-align: center;
145}
146.settings-panel-button {
147 vertical-align: baseline;
148 line-height: 1;
149 min-height: 2em;
150 padding: .2em 1em;
151 width: 100%;
152 cursor: pointer;
153}
154
155
156/** Default text and alike style */
157.settings-panel-text {
158 height: 2em;
159 width: 100%;
160 vertical-align: baseline;
161}
162.settings-panel-textarea {
163 width: 100%;
164 display: block;
165 vertical-align: top; /* allowable as we use autoheight */
166 min-height: 2em;
167}
168
169/** Checkbox style */
170.settings-panel-field--checkbox .settings-panel-input {
171 line-height: 2em;
172}
173.settings-panel-checkbox-group {
174 border: none;
175 -webkit-appearance: none;
176 -moz-appearance: none;
177 -o-appearance: none;
178 appearance: none;
179 margin: 0;
180 padding: 0;
181 white-space: normal;
182}
183.settings-panel-checkbox {
184 display: inline-block;
185 vertical-align: middle;
186 width: 1.2em;
187 height: 1.2em;
188 line-height: 1.2em;
189 margin: -.15em .25em 0 0;
190}
191.settings-panel-checkbox-label {
192 display: inline-block;
193 vertical-align: baseline;
194 -webkit-user-select: none;
195 -moz-user-select: none;
196 -ms-user-select: none;
197 user-select: none;
198 line-height: 1.2;
199 margin-right: 1em;
200}
201.settings-panel-checkbox-group .settings-panel-checkbox-label:last-child {
202 margin-right: 0;
203}
204
205
206/** Color picker style */
207.settings-panel-color {
208 position: relative;
209 width: 2em;
210 height: 2em;
211 position: absolute;
212 top: 0;
213 bottom: 0;
214 margin: auto;
215}
216.settings-panel-color-value {
217 width: 100%;
218 height: 2em;
219 padding: 0 0 0 2.5em;
220}
221.settings-panel .Scp {
222 -webkit-user-select: none;
223 -moz-user-select: none;
224 -ms-user-select: none;
225 user-select: none;
226 position: absolute;
227 z-index: 10;
228 cursor: pointer;
229 bottom: -120px;
230}
231.settings-panel .Scp-saturation {
232 position: relative;
233 width: calc(100% - 25px);
234 height: 100%;
235 background: linear-gradient(to right, #fff 0%, #f00 100%);
236 float: left;
237}
238.settings-panel .Scp-brightness {
239 width: 100%;
240 height: 100%;
241 background: linear-gradient(to top, #000 0%, rgba(255,255,255,0) 100%);
242}
243.settings-panel .Scp-sbSelector {
244 border: 1px solid;
245 position: absolute;
246 width: 14px;
247 height: 14px;
248 background: #fff;
249 border-radius: 10px;
250 top: -7px;
251 left: -7px;
252 box-sizing: border-box;
253 z-index: 10;
254}
255.settings-panel .Scp-hue {
256 width: 20px;
257 height: 100%;
258 position: relative;
259 float: left;
260 background: linear-gradient(to bottom, #f00 0%, #f0f 17%, #00f 34%, #0ff 50%, #0f0 67%, #ff0 84%, #f00 100%);
261}
262.settings-panel .Scp-hSelector {
263 position: absolute;
264 background: #fff;
265 border-bottom: 1px solid #000;
266 right: -3px;
267 width: 10px;
268 height: 2px;
269}
270
271
272
273/** Interval style */
274.settings-panel-interval {
275 position: relative;
276 -webkit-appearance: none;
277 display: inline-block;
278 vertical-align: top;
279 height: 2em;
280 margin: 0px 0;
281 width: 70%;
282 background: #ddd;
283 cursor: ew-resize;
284 -webkit-touch-callout: none;
285 -webkit-user-select: none;
286 -khtml-user-select: none;
287 -moz-user-select: none;
288 -ms-user-select: none;
289 user-select: none;
290}
291.settings-panel-interval-handle {
292 background: #7a4;
293 position: absolute;
294 top: 0;
295 bottom: 0;
296 min-width: 1px;
297}
298.settings-panel.settings-panel-interval-dragging * {
299 -webkit-touch-callout: none !important;
300 -webkit-user-select: none !important;
301 -khtml-user-select: none !important;
302 -moz-user-select: none !important;
303 -ms-user-select: none !important;
304 user-select: none !important;
305
306 cursor: ew-resize !important;
307}
308
309.settings-panel-interval + .settings-panel-value {
310 right: 0;
311 padding-left: .5em;
312}
313
314
315
316/** Select style */
317.settings-panel-select {
318 display: inline-block;
319 width: 100%;
320 height: 2em;
321 vertical-align: baseline;
322}
323
324/** Value style */
325.settings-panel-value {
326 -webkit-appearance: none;
327 -moz-appearance: none;
328 -o-appearance: none;
329 appearance: none;
330 min-width: 3em;
331 padding: 0 0 0 0em;
332 display: inline-block;
333 vertical-align: baseline;
334 cursor: text;
335 height: 2em;
336 border: none;
337 border-radius: 0;
338 outline: none;
339 font-family: inherit;
340 background: none;
341 color: inherit;
342 width: 15%;
343}
344.settings-panel-value:focus {
345 outline: 0;
346 box-shadow: 0;
347}
348.settings-panel-value-tip {
349 display: none;
350}
351
352/** Range style */
353.settings-panel-range {
354 width: 85%;
355 padding: 0;
356 margin: 0px 0;
357 height: 2em;
358 vertical-align: top;
359}
360.settings-panel-range + .settings-panel-value {
361 padding-left: .5em;
362 width: 15%;
363}
364
365.settings-panel-switch {
366 -webkit-appearance: none;
367 -moz-appearance: none;
368 appearance: none;
369 border: none;
370 display: block;
371 vertical-align: baseline;
372 padding: 0;
373 margin: 0;
374 line-height: 2em;
375}
376.settings-panel-switch-input {
377 margin: 0;
378 vertical-align: middle;
379 width: 1.2em;
380 height: 1.2em;
381 cursor: pointer;
382 margin-right: .25em;
383}
384.settings-panel-switch-label {
385 display: inline-block;
386 vertical-align: baseline;
387 line-height: 1.2;
388 margin-right: 1em;
389}
390
391
392.settings-panel hr {
393 border: none;
394 height: 0;
395 margin: .5em 0;
396 border-bottom: 1px dotted;
397}
398
399.settings-panel-field--disabled {
400 opacity: .5;
401 pointer-events: none;
402}
\No newline at end of file