Allow to click on toggle text to update it
This commit is contained in:
parent
7f997f589f
commit
1ebf0d9c72
@ -1415,30 +1415,6 @@ pre.rust {
|
||||
#settings-menu.rotate > a img {
|
||||
animation: rotating 2s linear infinite;
|
||||
}
|
||||
#settings-menu #settings {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid;
|
||||
}
|
||||
#settings-menu #settings .setting-line {
|
||||
margin: 0.6em;
|
||||
}
|
||||
/* This rule is to draw the little arrow connecting the settings menu to the gear icon. */
|
||||
#settings-menu #settings::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 11px;
|
||||
border: solid;
|
||||
border-width: 1px 1px 0 0;
|
||||
display: inline-block;
|
||||
padding: 4px;
|
||||
transform: rotate(-45deg);
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
#help-button {
|
||||
font-family: "Fira Sans", Arial, sans-serif;
|
||||
|
@ -46,9 +46,12 @@
|
||||
.toggle {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 45px;
|
||||
width: 100%;
|
||||
height: 27px;
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toggle input {
|
||||
@ -57,12 +60,12 @@
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
position: relative;
|
||||
width: 45px;
|
||||
display: block;
|
||||
height: 28px;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
transition: .3s;
|
||||
}
|
||||
@ -95,3 +98,28 @@ input:checked + .slider:before {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
div#settings {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid;
|
||||
}
|
||||
#settings .setting-line {
|
||||
margin: 1.2em 0.6em;
|
||||
}
|
||||
/* This rule is to draw the little arrow connecting the settings menu to the gear icon. */
|
||||
div#settings::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 11px;
|
||||
border: solid;
|
||||
border-width: 1px 1px 0 0;
|
||||
display: inline-block;
|
||||
padding: 4px;
|
||||
transform: rotate(-45deg);
|
||||
top: -5px;
|
||||
}
|
||||
|
@ -130,12 +130,11 @@
|
||||
} else {
|
||||
// This is a toggle.
|
||||
const checked = setting["default"] === true ? " checked" : "";
|
||||
output += `
|
||||
<label class="toggle">
|
||||
<input type="checkbox" id="${js_data_name}"${checked}>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<div>${setting_name}</div>`;
|
||||
output += `<label class="toggle">\
|
||||
<input type="checkbox" id="${js_data_name}"${checked}>\
|
||||
<span class="slider"></span>\
|
||||
<span class="label">${setting_name}</span>\
|
||||
</label>`;
|
||||
}
|
||||
output += "</div>";
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user