Use options dialog style
This commit is contained in:
eight
parent
4e0f4b34bb
commit
bf455752ec
|
|
@ -5,6 +5,7 @@
|
|||
<title i18n-text="manageTitle"></title>
|
||||
<link rel="stylesheet" href="manage/manage.css">
|
||||
<link rel="stylesheet" href="msgbox/msgbox.css">
|
||||
<link rel="stylesheet" href="options/onoffswitch.css">
|
||||
|
||||
<style id="style-overrides"></style>
|
||||
|
||||
|
|
|
|||
|
|
@ -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}`,
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<head>
|
||||
<title i18n-text-append="optionsHeading">Stylus </title>
|
||||
<link rel="stylesheet" href="options/options.css">
|
||||
<link rel="stylesheet" href="options/onoffswitch.css">
|
||||
<script src="js/dom.js"></script>
|
||||
<script src="js/messaging.js"></script>
|
||||
<script src="js/localization.js"></script>
|
||||
|
|
|
|||
59
options/onoffswitch.css
Normal file
59
options/onoffswitch.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user