UNPKG

settings-panel/theme/dragon.js

Version:

13.6 kBJavaScriptView Raw

1/**
* @module prama/theme/dragon
*
* Midragonlistic theme based off https://dribbble.com/guidorosso NIMA editor settings
*/
6'use strict';
7
8const px = require('add-px-to-style');
9const fonts = require('google-fonts');
10const color = require('tinycolor2');
11const interpolate = require('color-interpolate');
12const none = require('./none');
13
14module.exports = dragon;
15
16fonts.add({
'Roboto': 400
18});
19
20dragon.palette = ['black', 'white'];
21dragon.palette = ['#1b1b1b', '#f7f7f7'];
22
23dragon.fontSize = '12px';
24dragon.fontFamily = '"Roboto", sans-serif';
25dragon.labelWidth = '33.3%';
26dragon.inputHeight = 2;
27dragon.padding = 1/5;
28
29function dragon (opts) {
opts = opts || {};
31
let h = opts.inputHeight || dragon.inputHeight;
let labelWidth = opts.labelWidth || dragon.labelWidth;
let fontSize = opts.fontSize || dragon.fontSize;
let font = opts.fontFamily || dragon.fontFamily;
let padding = opts.padding || dragon.padding;
37
let palette = opts.palette || dragon.palette;
let pick = interpolate(palette);
40
let white = color(pick(1)).toString();
let light = color(pick(.65)).toString();
let notSoLight = color(pick(.45)).toString();
let gray = color(pick(.13)).toString();
let dark = color(pick(.07)).toString();
let black = color(pick(0)).toString();
47
return none({
fontSize: fontSize,
fontFamily: font,
inputHeight: h,
labelWidth: labelWidth,
palette: [white, black],
padding: padding
}) + `
:host {
color: ${light};
background: ${alpha(gray, .93)};
font-size: ${px('font-size', fontSize)};
font-family: ${font};
font-weight: 400;
padding: ${h*.5}em;
}
:host a {
text-decoration: none;
border-bottom: .15em solid ${alpha(white, .2)};
}
:host a:hover {
text-decoration: none;
border-bottom: .15em solid ${alpha(white, 1)};
}
72
.settings-panel-title {
text-transform: none;
font-weight: 400;
letter-spacing: .05ex;
color: ${white};
padding: ${h * 2 * padding / 1.333}em ${h * padding / 1.333 }em ${h * 4 * padding / 1.333}em;
}
80
.settings-panel-label {
}
83
/** Select style */
.settings-panel-select {
height: ${h}em;
background: none;
outline: none;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance:none;
appearance:none;
width: 100%;
padding-right: 1em;
margin-right: -1em;
color: ${white};
border-radius: 0;
box-shadow: 0 2px ${dark};
}
.settings-panel-select::-ms-expand {
display:none;
}
.settings-panel-select-triangle {
content: '';
border-right: .3em solid transparent;
border-left: .3em solid transparent;
line-height: 2em;
position: relative;
z-index: 1;
vertical-align: middle;
display: inline-block;
width: 0;
text-align: center;
pointer-events: none;
}
.settings-panel-select-triangle--down {
top: 0em;
left: .5em;
border-top: .3em solid ${white};
border-bottom: .0 transparent;
}
.settings-panel-select-triangle--up {
display: none;
}
.settings-panel-field--select:hover .settings-panel-select,
.settings-panel-select:focus {
box-shadow: 0 2px ${black};
}
130
/** Values */
.settings-panel-value {
color: ${white};
}
.settings-panel-value:hover,
.settings-panel-value:focus {
color: ${white};
}
139
/** Text */
.settings-panel-text,
.settings-panel-textarea {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance:none;
border: none;
height: ${h}em;
padding: 0;
background: none;
color: ${white};
width: 100%;
border-radius: 0;
box-shadow: 0 2px ${dark};
}
.settings-panel-textarea {
padding-top: .35em;
padding-left: 0;
}
159
.settings-panel-text:focus,
.settings-panel-textarea:focus,
.settings-panel-text:hover,
.settings-panel-textarea:hover {
outline: none;
color: ${white};
box-shadow: 0 2px ${black};
}
168
/** Color */
.settings-panel-color {
height: ${h*.7}em;
width: ${h*.7}em;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
}
.settings-panel-color-value {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance:none;
border: none;
background: none;
height: ${h}em;
color: ${white};
box-shadow: 0 2px ${dark};
padding-left: ${h}em;
width: 100%;
}
.settings-panel-color-value:hover,
.settings-panel-color-value:focus {
outline: none;
color: ${white};
box-shadow: 0 2px ${black};
}
196
197
/** Switch style */
.settings-panel-switch {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin-left: -1px;
}
.settings-panel-switch-input {
display: none;
}
.settings-panel-switch-label {
cursor: pointer;
min-height: ${h}em;
padding: 0 ${h/2}em;
margin: 0 2px 2px 0;
line-height: ${h*.999}em;
color: ${notSoLight};
border-radius: ${h}em;
}
.settings-panel-switch-label:hover {
color: ${white};
}
.settings-panel-switch-label:last-child {
margin-right: 0;
}
.settings-panel-switch-input:checked + .settings-panel-switch-label {
color: ${white};
box-shadow: 0 0 0 2px ${notSoLight};
}
.settings-panel-switch-input:checked + .settings-panel-switch-label:hover {
box-shadow: 0 0 0 2px ${white};
}
230
231
/** Checkbox */
.settings-panel-checkbox {
display: none;
}
.settings-panel-checkbox-label {
position: relative;
margin-top: ${h/6}em;
width: 100%;
color: ${notSoLight};
margin-bottom: ${h/6}em;
}
.settings-panel-checkbox-label:empty {
margin-left: -${h/4}em;
}
.settings-panel-checkbox-label:after {
content: 'x';
color: transparent;
position: absolute;
top: -${h*.125}em;
right: 0;
margin-left: ${h/4}em;
margin-top: 0;
width: ${h*1.8}em;
height: ${h*.85}em;
line-height: ${h*.9}em;
border-radius: ${h}em;
margin-bottom: 0;
background: ${dark};
}
.settings-panel-checkbox:hover + .settings-panel-checkbox-label:after,
.settings-panel-checkbox-label:hover:after {
background: ${black};
}
.settings-panel-checkbox-label:before {
content: '';
position: absolute;
border-radius: ${h}em;
width: ${h*.6}em;
height: ${h*.6}em;
top: 0;
right: ${h*1.05}em;
background: ${notSoLight};
transition: .1s ease-in;
z-index: 1;
}
.settings-panel-checkbox:checked + .settings-panel-checkbox-label:before {
transform: translateX(${h*.9}em);
background: ${white};
}
281
282
/** Button */
.settings-panel-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
outline: none;
padding: ${h*.125}em;
min-height: ${h}em;
line-height: ${h}em;
color: ${white};
border-radius: ${h}em;
background: none;
text-transform: uppercase;
font-size: .95em;
letter-spacing: .1ex;
box-shadow: inset 0 0 0 2px ${notSoLight};
}
.settings-panel-button:hover {
color: ${white};
box-shadow: 0 0 0 2px ${white};
}
.settings-panel-button:active {
color: ${white};
}
308
309
/** Sliders */
.settings-panel-range {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
color: ${dark};
border: 0;
}
.settings-panel-field--range:hover .settings-panel-range,
.settings-panel-range:focus {
color: ${black};
outline: none;
}
.settings-panel-range::-webkit-slider-runnable-track {
background: none;
height: 2px;
background: ${dark};
}
.settings-panel-field--range:hover .settings-panel-range::-webkit-slider-runnable-track,
.settings-panel-range:focus::-webkit-slider-runnable-track {
/**background: ${black};*/
}
.settings-panel-range::-moz-range-track {
background: none;
height: 2px;
color: transparent;
border: none;
outline: none;
background: ${dark};
}
.settings-panel-field--range:hover .settings-panel-range::-moz-range-track,
.settings-panel-range:focus::-moz-range-track {
background: ${black};
}
.settings-panel-range::-moz-range-progress {
background: ${notSoLight};
}
.settings-panel-field--range:hover .settings-panel-range::-moz-range-progress,
.settings-panel-range:focus::-moz-range-progress {
background: ${white};
}
.settings-panel-range::-ms-track {
height: 2px;
color: transparent;
border: none;
outline: none;
}
.settings-panel-range::-ms-fill-lower {
background: ${notSoLight};
}
.settings-panel-range::-ms-fill-upper {
background: ${black};
}
.settings-panel-field--range:hover .settings-panel-range::-ms-fill-lower,
.settings-panel-range:focus::-ms-fill-lower {
background: ${white};
}
368
@supports (--css: variables) {
.settings-panel-range {
	--active: ${notSoLight};
	--bg: ${dark};
	--track-background: linear-gradient(to right, var(--active) 0, var(--active) var(--value), var(--bg) 0) no-repeat;
}
.settings-panel-range::-webkit-slider-runnable-track {
	background: var(--track-background);
}
.settings-panel-range::-moz-range-track {
	background: var(--track-background);
}
.settings-panel-field--range:hover .settings-panel-range,
.settings-panel-range:focus {
	--bg: ${black};
	--active: ${white};
}
}
387
.settings-panel-range::-webkit-slider-thumb {
background: ${notSoLight};
height: ${h/2}em;
width: ${h/2}em;
border-radius: ${h/2}em;
margin-top: -${h/4}em;
border: 0;
position: relative;
top: 1px;
-webkit-appearance: none;
appearance: none;
}
.settings-panel-range:focus::-webkit-slider-thumb,
.settings-panel-range:hover::-webkit-slider-thumb,
.settings-panel-field--range:hover .settings-panel-range::-webkit-slider-thumb {
background: ${white};
}
.settings-panel-range::-moz-range-thumb {
background: ${notSoLight};
height: ${h/2}em;
width: ${h/2}em;
border-radius: ${h/2}em;
margin-top: -${h/4}em;
border: 0;
position: relative;
top: 1px;
-webkit-appearance: none;
-moz-appearance: none;
}
.settings-panel-range:focus::-moz-range-thumb,
.settings-panel-range:hover::-moz-range-thumb,
.settings-panel-field--range:hover .settings-panel-range::-moz-range-thumb {
background: ${white};
}
.settings-panel-range::-ms-thumb {
appearance: none;
outline: 0;
border: none;
position: relative;
top: 1px;
background: ${notSoLight};
width: ${h/2}em;
height: ${h/2}em;
border-radius: ${h/2}em;
cursor: pointer;
}
.settings-panel-range:focus::-ms-thumb,
.settings-panel-range:hover::-ms-thumb,
.settings-panel-field--range:hover .settings-panel-range::-ms-thumb {
background: ${white};
}
439
.settings-panel-range-value {
text-align: right;
padding: 0;
}
444
:host.settings-panel-orientation-top .settings-panel-range,
.settings-panel-orientation-top .settings-panel-range {
width: 100%;
}
:host.settings-panel-orientation-top .settings-panel-range + .settings-panel-value,
.settings-panel-orientation-top .settings-panel-range + .settings-panel-value {
position: absolute;
top: -${h*.8}em;
right: 0%;
text-align: right;
}
456
.settings-panel-field--color + .settings-panel-field--range,
.settings-panel-field--color + .settings-panel-field--interval,
.settings-panel-field--textarea + .settings-panel-field--range,
.settings-panel-field--textarea + .settings-panel-field--interval,
.settings-panel-field--text + .settings-panel-field--interval,
.settings-panel-field--text + .settings-panel-field--range {
margin-top: ${h/2.5}em;
}
465
466
/** Interval */
.settings-panel-interval {
background: none;
}
.settings-panel-interval:after {
content: '';
position: absolute;
width: 100%;
left: 0;
bottom: 0;
top: 0;
background: ${dark};
height: 2px;
margin-top: auto;
margin-bottom: auto;
}
.settings-panel-interval-handle {
position: absolute;
z-index: 1;
height: 2px;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
background: ${notSoLight};
}
.settings-panel-field--interval:hover .settings-panel-interval:after {
background: ${black};
}
.settings-panel-field--interval:hover .settings-panel-interval-handle {
background: ${white};
}
.settings-panel-field--interval:hover .settings-panel-value {
color: ${white};
}
.settings-panel-interval-value--right {
text-align: right;
}
.settings-panel-interval-handle:after {
content: '';
position: absolute;
right: -${h/4}em;
top: 0;
bottom: 0;
margin: auto;
height: ${h/2}em;
width: ${h/2}em;
border-radius: ${h/2}em;
background: inherit;
}
.settings-panel-interval-handle:before {
content: '';
position: absolute;
left: -${h/4}em;
top: 0;
bottom: 0;
margin: auto;
height: ${h/2}em;
width: ${h/2}em;
border-radius: ${h/2}em;
background: inherit;
}
529
.settings-panel-interval-dragging .settings-panel-interval-handle {
background: ${white};
}
533
534
/** Decorations */
:host hr {
border: none;
height: 0;
margin: ${h*.25}em 0;
opacity: .333;
border-bottom: 1px dotted ${notSoLight};
}
::-webkit-input-placeholder {
color: ${notSoLight};
}
::-moz-placeholder {
color: ${notSoLight};
}
:-ms-input-placeholder {
color: ${notSoLight};
}
:-moz-placeholder {
color: ${notSoLight};
}
555
::-moz-selection {
color: ${white};
background: ${gray};
}
::selection {
color: ${white};
background: ${gray};
}
.settings-panel-field--disabled {
opacity: .333;
pointer-events: none;
}
568`;
569
570
571}
572
573
574function alpha (c, value) {
return color(c).setAlpha(value).toString();
576}
577
\No newline at end of file

1	`/**`
2	`* @module prama/theme/dragon`
3	`*`
4	`* Midragonlistic theme based off https://dribbble.com/guidorosso NIMA editor settings`
5	`*/`
6	`'use strict';`
7
8	`const px = require('add-px-to-style');`
9	`const fonts = require('google-fonts');`
10	`const color = require('tinycolor2');`
11	`const interpolate = require('color-interpolate');`
12	`const none = require('./none');`
13
14	`module.exports = dragon;`
15
16	`fonts.add({`
17	`'Roboto': 400`
18	`});`
19
20	`dragon.palette = ['black', 'white'];`
21	`dragon.palette = ['#1b1b1b', '#f7f7f7'];`
22
23	`dragon.fontSize = '12px';`
24	`dragon.fontFamily = '"Roboto", sans-serif';`
25	`dragon.labelWidth = '33.3%';`
26	`dragon.inputHeight = 2;`
27	`dragon.padding = 1/5;`
28
29	`function dragon (opts) {`
30	`opts = opts \|\| {};`
31
32	`let h = opts.inputHeight \|\| dragon.inputHeight;`
33	`let labelWidth = opts.labelWidth \|\| dragon.labelWidth;`
34	`let fontSize = opts.fontSize \|\| dragon.fontSize;`
35	`let font = opts.fontFamily \|\| dragon.fontFamily;`
36	`let padding = opts.padding \|\| dragon.padding;`
37
38	`let palette = opts.palette \|\| dragon.palette;`
39	`let pick = interpolate(palette);`
40
41	`let white = color(pick(1)).toString();`
42	`let light = color(pick(.65)).toString();`
43	`let notSoLight = color(pick(.45)).toString();`
44	`let gray = color(pick(.13)).toString();`
45	`let dark = color(pick(.07)).toString();`
46	`let black = color(pick(0)).toString();`
47
48	`return none({`
49	`fontSize: fontSize,`
50	`fontFamily: font,`
51	`inputHeight: h,`
52	`labelWidth: labelWidth,`
53	`palette: [white, black],`
54	`padding: padding`
55	}) + `
56	`:host {`
57	`color: ${light};`
58	`background: ${alpha(gray, .93)};`
59	`font-size: ${px('font-size', fontSize)};`
60	`font-family: ${font};`
61	`font-weight: 400;`
62	`padding: ${h*.5}em;`
63	`}`
64	`:host a {`
65	`text-decoration: none;`
66	`border-bottom: .15em solid ${alpha(white, .2)};`
67	`}`
68	`:host a:hover {`
69	`text-decoration: none;`
70	`border-bottom: .15em solid ${alpha(white, 1)};`
71	`}`
72
73	`.settings-panel-title {`
74	`text-transform: none;`
75	`font-weight: 400;`
76	`letter-spacing: .05ex;`
77	`color: ${white};`
78	`padding: ${h * 2 * padding / 1.333}em ${h * padding / 1.333 }em ${h * 4 * padding / 1.333}em;`
79	`}`
80
81	`.settings-panel-label {`
82	`}`
83
84	`/** Select style */`
85	`.settings-panel-select {`
86	`height: ${h}em;`
87	`background: none;`
88	`outline: none;`
89	`border: none;`
90	`-webkit-appearance: none;`
91	`-moz-appearance: none;`
92	`-o-appearance:none;`
93	`appearance:none;`
94	`width: 100%;`
95	`padding-right: 1em;`
96	`margin-right: -1em;`
97	`color: ${white};`
98	`border-radius: 0;`
99	`box-shadow: 0 2px ${dark};`
100	`}`
101	`.settings-panel-select::-ms-expand {`
102	`display:none;`
103	`}`
104	`.settings-panel-select-triangle {`
105	`content: '';`
106	`border-right: .3em solid transparent;`
107	`border-left: .3em solid transparent;`
108	`line-height: 2em;`
109	`position: relative;`
110	`z-index: 1;`
111	`vertical-align: middle;`
112	`display: inline-block;`
113	`width: 0;`
114	`text-align: center;`
115	`pointer-events: none;`
116	`}`
117	`.settings-panel-select-triangle--down {`
118	`top: 0em;`
119	`left: .5em;`
120	`border-top: .3em solid ${white};`
121	`border-bottom: .0 transparent;`
122	`}`
123	`.settings-panel-select-triangle--up {`
124	`display: none;`
125	`}`
126	`.settings-panel-field--select:hover .settings-panel-select,`
127	`.settings-panel-select:focus {`
128	`box-shadow: 0 2px ${black};`
129	`}`
130
131	`/** Values */`
132	`.settings-panel-value {`
133	`color: ${white};`
134	`}`
135	`.settings-panel-value:hover,`
136	`.settings-panel-value:focus {`
137	`color: ${white};`
138	`}`
139
140	`/** Text */`
141	`.settings-panel-text,`
142	`.settings-panel-textarea {`
143	`-webkit-appearance: none;`
144	`-moz-appearance: none;`
145	`-o-appearance:none;`
146	`border: none;`
147	`height: ${h}em;`
148	`padding: 0;`
149	`background: none;`
150	`color: ${white};`
151	`width: 100%;`
152	`border-radius: 0;`
153	`box-shadow: 0 2px ${dark};`
154	`}`
155	`.settings-panel-textarea {`
156	`padding-top: .35em;`
157	`padding-left: 0;`
158	`}`
159
160	`.settings-panel-text:focus,`
161	`.settings-panel-textarea:focus,`
162	`.settings-panel-text:hover,`
163	`.settings-panel-textarea:hover {`
164	`outline: none;`
165	`color: ${white};`
166	`box-shadow: 0 2px ${black};`
167	`}`
168
169	`/** Color */`
170	`.settings-panel-color {`
171	`height: ${h*.7}em;`
172	`width: ${h*.7}em;`
173	`top: 0;`
174	`bottom: 0;`
175	`margin-top: auto;`
176	`margin-bottom: auto;`
177	`}`
178	`.settings-panel-color-value {`
179	`-webkit-appearance: none;`
180	`-moz-appearance: none;`
181	`-o-appearance:none;`
182	`border: none;`
183	`background: none;`
184	`height: ${h}em;`
185	`color: ${white};`
186	`box-shadow: 0 2px ${dark};`
187	`padding-left: ${h}em;`
188	`width: 100%;`
189	`}`
190	`.settings-panel-color-value:hover,`
191	`.settings-panel-color-value:focus {`
192	`outline: none;`
193	`color: ${white};`
194	`box-shadow: 0 2px ${black};`
195	`}`
196
197
198	`/** Switch style */`
199	`.settings-panel-switch {`
200	`-webkit-appearance: none;`
201	`-moz-appearance: none;`
202	`appearance: none;`
203	`margin-left: -1px;`
204	`}`
205	`.settings-panel-switch-input {`
206	`display: none;`
207	`}`
208	`.settings-panel-switch-label {`
209	`cursor: pointer;`
210	`min-height: ${h}em;`
211	`padding: 0 ${h/2}em;`
212	`margin: 0 2px 2px 0;`
213	`line-height: ${h*.999}em;`
214	`color: ${notSoLight};`
215	`border-radius: ${h}em;`
216	`}`
217	`.settings-panel-switch-label:hover {`
218	`color: ${white};`
219	`}`
220	`.settings-panel-switch-label:last-child {`
221	`margin-right: 0;`
222	`}`
223	`.settings-panel-switch-input:checked + .settings-panel-switch-label {`
224	`color: ${white};`
225	`box-shadow: 0 0 0 2px ${notSoLight};`
226	`}`
227	`.settings-panel-switch-input:checked + .settings-panel-switch-label:hover {`
228	`box-shadow: 0 0 0 2px ${white};`
229	`}`
230
231
232	`/** Checkbox */`
233	`.settings-panel-checkbox {`
234	`display: none;`
235	`}`
236	`.settings-panel-checkbox-label {`
237	`position: relative;`
238	`margin-top: ${h/6}em;`
239	`width: 100%;`
240	`color: ${notSoLight};`
241	`margin-bottom: ${h/6}em;`
242	`}`
243	`.settings-panel-checkbox-label:empty {`
244	`margin-left: -${h/4}em;`
245	`}`
246	`.settings-panel-checkbox-label:after {`
247	`content: 'x';`
248	`color: transparent;`
249	`position: absolute;`
250	`top: -${h*.125}em;`
251	`right: 0;`
252	`margin-left: ${h/4}em;`
253	`margin-top: 0;`
254	`width: ${h*1.8}em;`
255	`height: ${h*.85}em;`
256	`line-height: ${h*.9}em;`
257	`border-radius: ${h}em;`
258	`margin-bottom: 0;`
259	`background: ${dark};`
260	`}`
261	`.settings-panel-checkbox:hover + .settings-panel-checkbox-label:after,`
262	`.settings-panel-checkbox-label:hover:after {`
263	`background: ${black};`
264	`}`
265	`.settings-panel-checkbox-label:before {`
266	`content: '';`
267	`position: absolute;`
268	`border-radius: ${h}em;`
269	`width: ${h*.6}em;`
270	`height: ${h*.6}em;`
271	`top: 0;`
272	`right: ${h*1.05}em;`
273	`background: ${notSoLight};`
274	`transition: .1s ease-in;`
275	`z-index: 1;`
276	`}`
277	`.settings-panel-checkbox:checked + .settings-panel-checkbox-label:before {`
278	`transform: translateX(${h*.9}em);`
279	`background: ${white};`
280	`}`
281
282
283	`/** Button */`
284	`.settings-panel-button {`
285	`-webkit-appearance: none;`
286	`-moz-appearance: none;`
287	`appearance: none;`
288	`border: none;`
289	`outline: none;`
290	`padding: ${h*.125}em;`
291	`min-height: ${h}em;`
292	`line-height: ${h}em;`
293	`color: ${white};`
294	`border-radius: ${h}em;`
295	`background: none;`
296	`text-transform: uppercase;`
297	`font-size: .95em;`
298	`letter-spacing: .1ex;`
299	`box-shadow: inset 0 0 0 2px ${notSoLight};`
300	`}`
301	`.settings-panel-button:hover {`
302	`color: ${white};`
303	`box-shadow: 0 0 0 2px ${white};`
304	`}`
305	`.settings-panel-button:active {`
306	`color: ${white};`
307	`}`
308
309
310	`/** Sliders */`
311	`.settings-panel-range {`
312	`-webkit-appearance: none;`
313	`-moz-appearance: none;`
314	`appearance: none;`
315	`background: none;`
316	`color: ${dark};`
317	`border: 0;`
318	`}`
319	`.settings-panel-field--range:hover .settings-panel-range,`
320	`.settings-panel-range:focus {`
321	`color: ${black};`
322	`outline: none;`
323	`}`
324	`.settings-panel-range::-webkit-slider-runnable-track {`
325	`background: none;`
326	`height: 2px;`
327	`background: ${dark};`
328	`}`
329	`.settings-panel-field--range:hover .settings-panel-range::-webkit-slider-runnable-track,`
330	`.settings-panel-range:focus::-webkit-slider-runnable-track {`
331	`/*background: ${black};/`
332	`}`
333	`.settings-panel-range::-moz-range-track {`
334	`background: none;`
335	`height: 2px;`
336	`color: transparent;`
337	`border: none;`
338	`outline: none;`
339	`background: ${dark};`
340	`}`
341	`.settings-panel-field--range:hover .settings-panel-range::-moz-range-track,`
342	`.settings-panel-range:focus::-moz-range-track {`
343	`background: ${black};`
344	`}`
345	`.settings-panel-range::-moz-range-progress {`
346	`background: ${notSoLight};`
347	`}`
348	`.settings-panel-field--range:hover .settings-panel-range::-moz-range-progress,`
349	`.settings-panel-range:focus::-moz-range-progress {`
350	`background: ${white};`
351	`}`
352	`.settings-panel-range::-ms-track {`
353	`height: 2px;`
354	`color: transparent;`
355	`border: none;`
356	`outline: none;`
357	`}`
358	`.settings-panel-range::-ms-fill-lower {`
359	`background: ${notSoLight};`
360	`}`
361	`.settings-panel-range::-ms-fill-upper {`
362	`background: ${black};`
363	`}`
364	`.settings-panel-field--range:hover .settings-panel-range::-ms-fill-lower,`
365	`.settings-panel-range:focus::-ms-fill-lower {`
366	`background: ${white};`
367	`}`
368
369	`@supports (--css: variables) {`
370	`.settings-panel-range {`
371	`--active: ${notSoLight};`
372	`--bg: ${dark};`
373	`--track-background: linear-gradient(to right, var(--active) 0, var(--active) var(--value), var(--bg) 0) no-repeat;`
374	`}`
375	`.settings-panel-range::-webkit-slider-runnable-track {`
376	`background: var(--track-background);`
377	`}`
378	`.settings-panel-range::-moz-range-track {`
379	`background: var(--track-background);`
380	`}`
381	`.settings-panel-field--range:hover .settings-panel-range,`
382	`.settings-panel-range:focus {`
383	`--bg: ${black};`
384	`--active: ${white};`
385	`}`
386	`}`
387
388	`.settings-panel-range::-webkit-slider-thumb {`
389	`background: ${notSoLight};`
390	`height: ${h/2}em;`
391	`width: ${h/2}em;`
392	`border-radius: ${h/2}em;`
393	`margin-top: -${h/4}em;`
394	`border: 0;`
395	`position: relative;`
396	`top: 1px;`
397	`-webkit-appearance: none;`
398	`appearance: none;`
399	`}`
400	`.settings-panel-range:focus::-webkit-slider-thumb,`
401	`.settings-panel-range:hover::-webkit-slider-thumb,`
402	`.settings-panel-field--range:hover .settings-panel-range::-webkit-slider-thumb {`
403	`background: ${white};`
404	`}`
405	`.settings-panel-range::-moz-range-thumb {`
406	`background: ${notSoLight};`
407	`height: ${h/2}em;`
408	`width: ${h/2}em;`
409	`border-radius: ${h/2}em;`
410	`margin-top: -${h/4}em;`
411	`border: 0;`
412	`position: relative;`
413	`top: 1px;`
414	`-webkit-appearance: none;`
415	`-moz-appearance: none;`
416	`}`
417	`.settings-panel-range:focus::-moz-range-thumb,`
418	`.settings-panel-range:hover::-moz-range-thumb,`
419	`.settings-panel-field--range:hover .settings-panel-range::-moz-range-thumb {`
420	`background: ${white};`
421	`}`
422	`.settings-panel-range::-ms-thumb {`
423	`appearance: none;`
424	`outline: 0;`
425	`border: none;`
426	`position: relative;`
427	`top: 1px;`
428	`background: ${notSoLight};`
429	`width: ${h/2}em;`
430	`height: ${h/2}em;`
431	`border-radius: ${h/2}em;`
432	`cursor: pointer;`
433	`}`
434	`.settings-panel-range:focus::-ms-thumb,`
435	`.settings-panel-range:hover::-ms-thumb,`
436	`.settings-panel-field--range:hover .settings-panel-range::-ms-thumb {`
437	`background: ${white};`
438	`}`
439
440	`.settings-panel-range-value {`
441	`text-align: right;`
442	`padding: 0;`
443	`}`
444
445	`:host.settings-panel-orientation-top .settings-panel-range,`
446	`.settings-panel-orientation-top .settings-panel-range {`
447	`width: 100%;`
448	`}`
449	`:host.settings-panel-orientation-top .settings-panel-range + .settings-panel-value,`
450	`.settings-panel-orientation-top .settings-panel-range + .settings-panel-value {`
451	`position: absolute;`
452	`top: -${h*.8}em;`
453	`right: 0%;`
454	`text-align: right;`
455	`}`
456
457	`.settings-panel-field--color + .settings-panel-field--range,`
458	`.settings-panel-field--color + .settings-panel-field--interval,`
459	`.settings-panel-field--textarea + .settings-panel-field--range,`
460	`.settings-panel-field--textarea + .settings-panel-field--interval,`
461	`.settings-panel-field--text + .settings-panel-field--interval,`
462	`.settings-panel-field--text + .settings-panel-field--range {`
463	`margin-top: ${h/2.5}em;`
464	`}`
465
466
467	`/** Interval */`
468	`.settings-panel-interval {`
469	`background: none;`
470	`}`
471	`.settings-panel-interval:after {`
472	`content: '';`
473	`position: absolute;`
474	`width: 100%;`
475	`left: 0;`
476	`bottom: 0;`
477	`top: 0;`
478	`background: ${dark};`
479	`height: 2px;`
480	`margin-top: auto;`
481	`margin-bottom: auto;`
482	`}`
483	`.settings-panel-interval-handle {`
484	`position: absolute;`
485	`z-index: 1;`
486	`height: 2px;`
487	`top: 0;`
488	`bottom: 0;`
489	`margin-top: auto;`
490	`margin-bottom: auto;`
491	`background: ${notSoLight};`
492	`}`
493	`.settings-panel-field--interval:hover .settings-panel-interval:after {`
494	`background: ${black};`
495	`}`
496	`.settings-panel-field--interval:hover .settings-panel-interval-handle {`
497	`background: ${white};`
498	`}`
499	`.settings-panel-field--interval:hover .settings-panel-value {`
500	`color: ${white};`
501	`}`
502	`.settings-panel-interval-value--right {`
503	`text-align: right;`
504	`}`
505	`.settings-panel-interval-handle:after {`
506	`content: '';`
507	`position: absolute;`
508	`right: -${h/4}em;`
509	`top: 0;`
510	`bottom: 0;`
511	`margin: auto;`
512	`height: ${h/2}em;`
513	`width: ${h/2}em;`
514	`border-radius: ${h/2}em;`
515	`background: inherit;`
516	`}`
517	`.settings-panel-interval-handle:before {`
518	`content: '';`
519	`position: absolute;`
520	`left: -${h/4}em;`
521	`top: 0;`
522	`bottom: 0;`
523	`margin: auto;`
524	`height: ${h/2}em;`
525	`width: ${h/2}em;`
526	`border-radius: ${h/2}em;`
527	`background: inherit;`
528	`}`
529
530	`.settings-panel-interval-dragging .settings-panel-interval-handle {`
531	`background: ${white};`
532	`}`
533
534
535	`/** Decorations */`
536	`:host hr {`
537	`border: none;`
538	`height: 0;`
539	`margin: ${h*.25}em 0;`
540	`opacity: .333;`
541	`border-bottom: 1px dotted ${notSoLight};`
542	`}`
543	`::-webkit-input-placeholder {`
544	`color: ${notSoLight};`
545	`}`
546	`::-moz-placeholder {`
547	`color: ${notSoLight};`
548	`}`
549	`:-ms-input-placeholder {`
550	`color: ${notSoLight};`
551	`}`
552	`:-moz-placeholder {`
553	`color: ${notSoLight};`
554	`}`
555
556	`::-moz-selection {`
557	`color: ${white};`
558	`background: ${gray};`
559	`}`
560	`::selection {`
561	`color: ${white};`
562	`background: ${gray};`
563	`}`
564	`.settings-panel-field--disabled {`
565	`opacity: .333;`
566	`pointer-events: none;`
567	`}`
568	`;
569
570
571	`}`
572
573
574	`function alpha (c, value) {`
575	`return color(c).setAlpha(value).toString();`
576	`}`
577
\	No newline at end of file