diff --git a/manage.html b/manage.html
index 308c954f..6db1a624 100644
--- a/manage.html
+++ b/manage.html
@@ -5,6 +5,7 @@
+
diff --git a/manage/config-dialog.js b/manage/config-dialog.js
index 6c7d9905..6386629c 100644
--- a/manage/config-dialog.js
+++ b/manage/config-dialog.js
@@ -7,7 +7,7 @@ function configDialog(style) {
const form = buildConfigForm();
return messageBox({
- title: `Configure ${style.name}`,
+ title: style.name,
className: 'config-dialog',
contents: form.el,
buttons: [
@@ -42,14 +42,21 @@ function configDialog(style) {
va.value = colorParser.format(color);
va.inputColor.style.opacity = color.a;
};
- appendChild = [va.label, va.inputColor, va.inputAlpha];
+ appendChild = [
+ $element({appendChild: [va.inputColor, va.inputAlpha]})
+ ];
} else if (va.type === 'checkbox') {
va.input = $element({tag: 'input', type: 'checkbox'});
va.input.onchange = () => {
va.dirty = true;
va.value = String(Number(va.input.checked));
};
- appendChild = [va.input, $element({tag: 'span', appendChild: va.label})];
+ appendChild = [
+ $element({tag: 'span', className: 'onoffswitch', appendChild: [
+ va.input,
+ $element({tag: 'span'})
+ ]})
+ ];
} else if (va.type === 'select') {
va.input = $element({
tag: 'select',
@@ -61,15 +68,16 @@ function configDialog(style) {
va.dirty = true;
va.value = va.input.value;
};
- appendChild = [va.label, va.input];
+ appendChild = [va.input];
} else {
va.input = $element({tag: 'input', type: 'text'});
va.input.oninput = () => {
va.dirty = true;
va.value = va.input.value;
};
- appendChild = [va.label, va.input];
+ appendChild = [va.input];
}
+ appendChild.unshift($element({tag: 'span', appendChild: va.label}));
labels.push($element({
tag: 'label',
className: `config-${va.type}`,
diff --git a/manage/manage.css b/manage/manage.css
index 5b04087f..02f4495f 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -642,30 +642,48 @@ fieldset > *:not(legend) {
}
/* config dialog */
-#message-box.config-dialog input,
-#message-box.config-dialog select {
- display: block;
+.config-dialog label {
+ display: flex;
+ padding: .75em 0;
+ align-items: center;
+ border-top: 1px dotted #ccc;
+}
+
+.config-dialog label:first-child {
+ padding-top: 0;
+ border-top: none;
+}
+
+.config-dialog label > :first-child {
+ margin-right: 8px;
+ flex-grow: 1;
+}
+
+.config-dialog label:not([disabled]) > :first-child {
+ cursor: default;
+}
+
+.config-dialog label:not([disabled]):hover > :first-child {
+ text-shadow: 0 0 0.01px rgba(0, 0, 0, .25);
+ cursor: pointer;
+}
+
+.config-dialog input,
+.config-dialog select {
width: 100%;
- margin: .4rem 0 .6rem;
- padding-left: .25rem;
- border-radius: .25rem;
- border-width: 1px;
+ margin: 0;
+ height: 2em;
+ box-sizing: border-box;
}
-#message-box.config-dialog .config-checkbox::after {
- content: "";
- display: block;
+.config-dialog input[type="text"] {
+ padding-left: 0.25em;
}
-#message-box.config-dialog .config-checkbox > * {
- display: inline-block;
- vertical-align: middle;
- margin: .4rem 0 .6rem;
-}
-
-#message-box.config-dialog input[type=checkbox] {
- width: auto;
- margin-right: 0.4em;
+.config-dialog label > :last-child {
+ width: 60px;
+ box-sizing: border-box;
+ flex-shrink: 0;
}
@keyframes fadein {
diff --git a/options.html b/options.html
index a32e4663..d2e078ad 100644
--- a/options.html
+++ b/options.html
@@ -3,6 +3,7 @@
Stylus
+
diff --git a/options/onoffswitch.css b/options/onoffswitch.css
new file mode 100644
index 00000000..72630602
--- /dev/null
+++ b/options/onoffswitch.css
@@ -0,0 +1,59 @@
+/* On/Off FlipSwitch https://proto.io/freebies/onoff/ */
+
+.onoffswitch {
+ position: relative;
+ margin: 1ex 0;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+}
+
+.onoffswitch input {
+ display: none;
+}
+
+.onoffswitch span {
+ display: block;
+ overflow: hidden;
+ cursor: pointer;
+ height: 12px;
+ padding: 0;
+ line-height: 12px;
+ border: 0 solid #E3E3E3;
+ border-radius: 12px;
+ background-color: #E0E0E0;
+ box-shadow: inset 2px 2px 4px rgba(0,0,0,0.1);
+}
+
+.onoffswitch span::before {
+ content: "";
+ display: block;
+ width: 18px;
+ height: 18px;
+ margin: -3px;
+ background: #efefef;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ right: 46px;
+ border-radius: 18px;
+ box-shadow: 0 3px 13px 0 rgba(0, 0, 0, 0.4);
+}
+
+.onoffswitch input:checked + span {
+ background-color: #CAEBE3;
+}
+
+.onoffswitch input:checked + span, .onoffswitch input:checked + span::before {
+ border-color: #CAEBE3;
+}
+
+.onoffswitch input:checked + span .onoffswitch-inner {
+ margin-left: 0;
+}
+
+.onoffswitch input:checked + span::before {
+ right: 0;
+ background-color: #04BA9F;
+ box-shadow: 3px 6px 18px 0 rgba(0, 0, 0, 0.2);
+}
diff --git a/options/options.css b/options/options.css
index 9ccd6a7d..3d59def4 100644
--- a/options/options.css
+++ b/options/options.css
@@ -212,63 +212,3 @@ sup {
25% { opacity: 1 }
100% { opacity: 0 }
}
-
-/* On/Off FlipSwitch https://proto.io/freebies/onoff/ */
-
-.onoffswitch {
- position: relative;
- margin: 1ex 0;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
-}
-
-.onoffswitch input {
- display: none;
-}
-
-.onoffswitch span {
- display: block;
- overflow: hidden;
- cursor: pointer;
- height: 12px;
- padding: 0;
- line-height: 12px;
- border: 0 solid #E3E3E3;
- border-radius: 12px;
- background-color: #E0E0E0;
- box-shadow: inset 2px 2px 4px rgba(0,0,0,0.1);
-}
-
-.onoffswitch span::before {
- content: "";
- display: block;
- width: 18px;
- height: 18px;
- margin: -3px;
- background: #efefef;
- position: absolute;
- top: 0;
- bottom: 0;
- right: 46px;
- border-radius: 18px;
- box-shadow: 0 3px 13px 0 rgba(0, 0, 0, 0.4);
-}
-
-.onoffswitch input:checked + span {
- background-color: #CAEBE3;
-}
-
-.onoffswitch input:checked + span, .onoffswitch input:checked + span::before {
- border-color: #CAEBE3;
-}
-
-.onoffswitch input:checked + span .onoffswitch-inner {
- margin-left: 0;
-}
-
-.onoffswitch input:checked + span::before {
- right: 0;
- background-color: #04BA9F;
- box-shadow: 3px 6px 18px 0 rgba(0, 0, 0, 0.2);
-}