@stanko/ctrls 0.1.4 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/ctrls/ctrl-dual-range.d.ts +2 -0
- package/dist/ctrls/ctrl-dual-range.js +26 -22
- package/dist/ctrls/ctrl-range.d.ts +2 -0
- package/dist/ctrls/ctrl-range.js +9 -3
- package/dist/ctrls.css +8 -5
- package/dist/ctrls.css.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -375,8 +375,8 @@ Thank you for stopping by! If you end up using Ctrls, please let me know, I woul
|
|
|
375
375
|
|
|
376
376
|
* [ ] Allow users to pass a custom PRNG lib
|
|
377
377
|
* [ ] Hash storage - check if there is an instance using hash storage already
|
|
378
|
-
* [x] Add title which collapses the controls
|
|
379
378
|
* [ ] Storage - local storage
|
|
379
|
+
* [x] Add title which collapses the controls
|
|
380
380
|
* [x] Prefix input names' with `ctrl_${id}_${name}` to avoid collisions
|
|
381
381
|
* [x] Demo - stop animation when not in viewport
|
|
382
382
|
* [x] Demo - favicon and metadata
|
|
@@ -24,6 +24,7 @@ export declare class DualRangeCtrl implements Ctrl<DualRangeValue> {
|
|
|
24
24
|
minInput: HTMLInputElement;
|
|
25
25
|
maxInput: HTMLInputElement;
|
|
26
26
|
dualRange: DualRangeInput;
|
|
27
|
+
valueSpan: HTMLSpanElement;
|
|
27
28
|
constructor(config: CtrlTypeRegistry["dual-range"]["config"], onChange: CtrlChangeHandler<DualRangeValue>, onInput: CtrlChangeHandler<DualRangeValue>);
|
|
28
29
|
parse: (string: string) => {
|
|
29
30
|
min: number;
|
|
@@ -40,6 +41,7 @@ export declare class DualRangeCtrl implements Ctrl<DualRangeValue> {
|
|
|
40
41
|
valueToString: (value?: DualRangeValue) => string;
|
|
41
42
|
buildUI: () => {
|
|
42
43
|
element: HTMLDivElement;
|
|
44
|
+
valueSpan: HTMLSpanElement;
|
|
43
45
|
minInput: HTMLInputElement;
|
|
44
46
|
maxInput: HTMLInputElement;
|
|
45
47
|
};
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import random from "../utils/random";
|
|
2
2
|
import DualRangeInput from "@stanko/dual-range-input";
|
|
3
3
|
import { roundToStep } from "../utils/round-to-step";
|
|
4
|
-
// TODO
|
|
5
|
-
// Add a span with the current value
|
|
6
4
|
export class DualRangeCtrl {
|
|
7
5
|
constructor(config, onChange, onInput) {
|
|
8
6
|
this.type = "dual-range";
|
|
@@ -30,39 +28,38 @@ export class DualRangeCtrl {
|
|
|
30
28
|
};
|
|
31
29
|
this.buildUI = () => {
|
|
32
30
|
const { min, max, step, value } = this;
|
|
33
|
-
const
|
|
34
|
-
minInput.setAttribute("type", "range");
|
|
35
|
-
minInput.setAttribute("min", min.toString());
|
|
36
|
-
minInput.setAttribute("max", max.toString());
|
|
37
|
-
minInput.setAttribute("step", step.toString());
|
|
38
|
-
minInput.setAttribute("value", value.min.toString());
|
|
39
|
-
minInput.addEventListener("input", () => {
|
|
31
|
+
const changeHandler = () => {
|
|
40
32
|
this.value = {
|
|
41
33
|
min: parseFloat(minInput.value),
|
|
42
34
|
max: parseFloat(maxInput.value),
|
|
43
35
|
};
|
|
44
|
-
this.
|
|
45
|
-
|
|
46
|
-
|
|
36
|
+
this.update(this.value);
|
|
37
|
+
this.onChange(this.name, this.value);
|
|
38
|
+
};
|
|
39
|
+
const inputHandler = () => {
|
|
47
40
|
this.value = {
|
|
48
41
|
min: parseFloat(minInput.value),
|
|
49
42
|
max: parseFloat(maxInput.value),
|
|
50
43
|
};
|
|
51
|
-
this.
|
|
52
|
-
|
|
44
|
+
this.update(this.value);
|
|
45
|
+
this.onInput(this.name, this.value);
|
|
46
|
+
};
|
|
47
|
+
const minInput = document.createElement("input");
|
|
48
|
+
minInput.setAttribute("type", "range");
|
|
49
|
+
minInput.setAttribute("min", min.toString());
|
|
50
|
+
minInput.setAttribute("max", max.toString());
|
|
51
|
+
minInput.setAttribute("step", step.toString());
|
|
52
|
+
minInput.setAttribute("value", value.min.toString());
|
|
53
|
+
minInput.addEventListener("input", inputHandler);
|
|
54
|
+
minInput.addEventListener("change", changeHandler);
|
|
53
55
|
const maxInput = document.createElement("input");
|
|
54
56
|
maxInput.setAttribute("type", "range");
|
|
55
57
|
maxInput.setAttribute("min", min.toString());
|
|
56
58
|
maxInput.setAttribute("max", max.toString());
|
|
57
59
|
maxInput.setAttribute("step", step.toString());
|
|
58
60
|
maxInput.setAttribute("value", value.max.toString());
|
|
59
|
-
maxInput.addEventListener("
|
|
60
|
-
|
|
61
|
-
min: parseFloat(minInput.value),
|
|
62
|
-
max: parseFloat(maxInput.value),
|
|
63
|
-
};
|
|
64
|
-
this.onChange(this.name, this.value);
|
|
65
|
-
});
|
|
61
|
+
maxInput.addEventListener("input", inputHandler);
|
|
62
|
+
maxInput.addEventListener("change", changeHandler);
|
|
66
63
|
const inputWrapper = document.createElement("div");
|
|
67
64
|
inputWrapper.classList.add("dual-range-input");
|
|
68
65
|
inputWrapper.appendChild(minInput);
|
|
@@ -73,12 +70,16 @@ export class DualRangeCtrl {
|
|
|
73
70
|
const label = document.createElement("span");
|
|
74
71
|
label.textContent = this.label;
|
|
75
72
|
label.classList.add("ctrls__control-label");
|
|
73
|
+
const valueSpan = document.createElement("span");
|
|
74
|
+
valueSpan.classList.add("ctrls__control-value");
|
|
75
|
+
label.appendChild(valueSpan);
|
|
76
76
|
const element = document.createElement("div");
|
|
77
77
|
element.classList.add("ctrls__control", "ctrls__control--dual-range");
|
|
78
78
|
element.appendChild(label);
|
|
79
79
|
element.appendChild(right);
|
|
80
80
|
return {
|
|
81
81
|
element,
|
|
82
|
+
valueSpan,
|
|
82
83
|
minInput,
|
|
83
84
|
maxInput,
|
|
84
85
|
};
|
|
@@ -88,6 +89,7 @@ export class DualRangeCtrl {
|
|
|
88
89
|
this.value = value;
|
|
89
90
|
this.minInput.setAttribute("max", max.toString());
|
|
90
91
|
this.maxInput.setAttribute("min", min.toString());
|
|
92
|
+
this.valueSpan.textContent = ` (${min}, ${max})`;
|
|
91
93
|
this.minInput.value = value.min.toString();
|
|
92
94
|
this.maxInput.value = value.max.toString();
|
|
93
95
|
this.dualRange.update();
|
|
@@ -104,10 +106,12 @@ export class DualRangeCtrl {
|
|
|
104
106
|
this.isRandomizationDisabled = config.isRandomizationDisabled || false;
|
|
105
107
|
this.onChange = onChange;
|
|
106
108
|
this.onInput = onInput;
|
|
107
|
-
const { minInput, maxInput, element } = this.buildUI();
|
|
109
|
+
const { minInput, maxInput, element, valueSpan } = this.buildUI();
|
|
108
110
|
this.minInput = minInput;
|
|
109
111
|
this.maxInput = maxInput;
|
|
110
112
|
this.element = element;
|
|
113
|
+
this.valueSpan = valueSpan;
|
|
111
114
|
this.dualRange = new DualRangeInput(this.minInput, this.maxInput);
|
|
115
|
+
this.update(this.value);
|
|
112
116
|
}
|
|
113
117
|
}
|
|
@@ -12,6 +12,7 @@ export declare class RangeCtrl implements Ctrl<number> {
|
|
|
12
12
|
step: number;
|
|
13
13
|
element: HTMLElement;
|
|
14
14
|
input: HTMLInputElement;
|
|
15
|
+
valueSpan: HTMLSpanElement;
|
|
15
16
|
constructor(config: CtrlTypeRegistry["range"]["config"], onChange: CtrlChangeHandler<number>, onInput: CtrlChangeHandler<number>);
|
|
16
17
|
parse: (string: string) => number;
|
|
17
18
|
getRandomValue: () => number;
|
|
@@ -20,6 +21,7 @@ export declare class RangeCtrl implements Ctrl<number> {
|
|
|
20
21
|
buildUI: () => {
|
|
21
22
|
element: HTMLLabelElement;
|
|
22
23
|
input: HTMLInputElement;
|
|
24
|
+
valueSpan: HTMLSpanElement;
|
|
23
25
|
};
|
|
24
26
|
update: (value: number) => void;
|
|
25
27
|
}
|
package/dist/ctrls/ctrl-range.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import random from "../utils/random";
|
|
2
2
|
import { roundToStep } from "../utils/round-to-step";
|
|
3
|
-
// TODO
|
|
4
|
-
// Add a span with the current value
|
|
5
3
|
export class RangeCtrl {
|
|
6
4
|
constructor(config, onChange, onInput) {
|
|
7
5
|
this.type = "range";
|
|
@@ -30,10 +28,12 @@ export class RangeCtrl {
|
|
|
30
28
|
input.setAttribute("value", value.toString());
|
|
31
29
|
input.addEventListener("input", () => {
|
|
32
30
|
this.value = this.parse(input.value);
|
|
31
|
+
this.update(this.value);
|
|
33
32
|
this.onInput(this.name, this.value);
|
|
34
33
|
});
|
|
35
34
|
input.addEventListener("change", () => {
|
|
36
35
|
this.value = this.parse(input.value);
|
|
36
|
+
this.update(this.value);
|
|
37
37
|
this.onChange(this.name, this.value);
|
|
38
38
|
});
|
|
39
39
|
input.addEventListener("input", () => {
|
|
@@ -47,6 +47,9 @@ export class RangeCtrl {
|
|
|
47
47
|
const label = document.createElement("span");
|
|
48
48
|
label.textContent = this.label;
|
|
49
49
|
label.classList.add("ctrls__control-label");
|
|
50
|
+
const valueSpan = document.createElement("span");
|
|
51
|
+
valueSpan.classList.add("ctrls__control-value");
|
|
52
|
+
label.appendChild(valueSpan);
|
|
50
53
|
const element = document.createElement("label");
|
|
51
54
|
element.classList.add("ctrls__control", "ctrls__control--range");
|
|
52
55
|
element.appendChild(label);
|
|
@@ -54,12 +57,14 @@ export class RangeCtrl {
|
|
|
54
57
|
return {
|
|
55
58
|
element,
|
|
56
59
|
input,
|
|
60
|
+
valueSpan,
|
|
57
61
|
};
|
|
58
62
|
};
|
|
59
63
|
this.update = (value) => {
|
|
60
64
|
const { min, max } = this;
|
|
61
65
|
this.value = value;
|
|
62
66
|
this.input.value = value.toString();
|
|
67
|
+
this.valueSpan.textContent = ` (${value})`;
|
|
63
68
|
const percentage = ((this.value - min) / (max - min)) * 100;
|
|
64
69
|
this.element.style.setProperty("--gradient-position", `${percentage.toFixed(2)}%`);
|
|
65
70
|
};
|
|
@@ -75,8 +80,9 @@ export class RangeCtrl {
|
|
|
75
80
|
config.defaultValue === undefined
|
|
76
81
|
? this.getDefaultValue()
|
|
77
82
|
: config.defaultValue;
|
|
78
|
-
const { input, element } = this.buildUI();
|
|
83
|
+
const { input, element, valueSpan } = this.buildUI();
|
|
79
84
|
this.input = input;
|
|
85
|
+
this.valueSpan = valueSpan;
|
|
80
86
|
this.element = element;
|
|
81
87
|
this.update(this.value);
|
|
82
88
|
}
|
package/dist/ctrls.css
CHANGED
|
@@ -173,6 +173,7 @@
|
|
|
173
173
|
--ctrls-label-width: 5rem;
|
|
174
174
|
--ctrls-width: 22rem;
|
|
175
175
|
--ctrls-font-size: 0.75rem;
|
|
176
|
+
--ctrls-value-font-size: 0.6875rem;
|
|
176
177
|
--ctrls-c: 0.25;
|
|
177
178
|
--ctrls-h: 245;
|
|
178
179
|
--ctrls-theme: oklch(0.65 var(--ctrls-c) var(--ctrls-h));
|
|
@@ -303,9 +304,10 @@
|
|
|
303
304
|
.ctrls__title {
|
|
304
305
|
background: none;
|
|
305
306
|
border: none;
|
|
307
|
+
display: block;
|
|
308
|
+
width: 100%;
|
|
306
309
|
font-weight: bold;
|
|
307
310
|
letter-spacing: -0.025em;
|
|
308
|
-
width: 100%;
|
|
309
311
|
padding: 0.375rem 0.5rem;
|
|
310
312
|
cursor: pointer;
|
|
311
313
|
transition: color 300ms, background-color 300ms;
|
|
@@ -324,10 +326,6 @@
|
|
|
324
326
|
scrollbar-color: var(--ctrls-scrollbar-thumb-bg) transparent;
|
|
325
327
|
}
|
|
326
328
|
|
|
327
|
-
.ctrls__title + .ctrls__controls {
|
|
328
|
-
border-top: 1px solid var(--ctrls-border);
|
|
329
|
-
}
|
|
330
|
-
|
|
331
329
|
.ctrls--hidden .ctrls__controls {
|
|
332
330
|
display: none;
|
|
333
331
|
}
|
|
@@ -392,6 +390,11 @@
|
|
|
392
390
|
padding-right: 0.25rem;
|
|
393
391
|
}
|
|
394
392
|
|
|
393
|
+
.ctrls__control-value {
|
|
394
|
+
font-weight: 400;
|
|
395
|
+
font-size: var(--ctrls-value-font-size);
|
|
396
|
+
}
|
|
397
|
+
|
|
395
398
|
.ctrls__control-right {
|
|
396
399
|
flex: auto 1 1;
|
|
397
400
|
}
|
package/dist/ctrls.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../node_modules/@stanko/dual-range-input/dist/index.css","../src/scss/_ctrls.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;;AC3IF;EACE;AAAA;AAAA;EAGA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EAGA;EAEA;EACA;EAEA;EACA;EAGA;EAGA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAGA;EACA;EAEA;EAEA;EACA;EAEA;EAGA;EAEA;EACA;;;AA+CF;EACE;IA3CA;IAEA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IAGA;IAGA;IACA;IACA;IAGA;IACA;IAGA;IAGA;IAEA;IAGA;IAGA;AAAA;AAAA;;;AAWF;EAhDE;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EAGA;EAEA;EAGA;EAGA;AAAA;AAAA;;;AAiBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../node_modules/@stanko/dual-range-input/dist/index.css","../src/scss/_ctrls.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;;AC3IF;EACE;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EAGA;EAEA;EACA;EAEA;EACA;EAGA;EAGA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAGA;EACA;EAEA;EAEA;EACA;EAEA;EAGA;EAEA;EACA;;;AA+CF;EACE;IA3CA;IAEA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IAGA;IAGA;IACA;IACA;IAGA;IACA;IAGA;IAGA;IAEA;IAGA;IAGA;AAAA;AAAA;;;AAWF;EAhDE;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EAGA;EAEA;EAGA;EAGA;AAAA;AAAA;;;AAiBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;;AAGF;EACE;EACA;EACA,YACE;;AAIJ;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;;;AAOA;EACE;;AAGF;AAAA;AAAA;EAEE;;;AAKN;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAKA;AAAA;EACE;EACA;EACA;;;AAIJ;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAIF;EACE;;;AAIF;EACE;;;AAIF;EACE;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAmCJ;EA5BE;EACA;EACA;EACA;EACA;EAEA;;;AA0BF;EAhCE;EACA;EACA;EACA;EACA;EAEA;;;AA8BF;EAtBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAkBA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAKF;EAvDE;EACA;EACA;EACA;EACA;EAEA;;;AAqDF;EA7CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAwCA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EAGE;;AAEA;EACE;;AANJ;EASE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;;AAIJ;AAEA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAEF;EACA;EACA;;AAEA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;AAIE;EACE;;;AAKN;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;;AAEA;EACE;EACA","file":"ctrls.css"}
|