0f3ae6218e
The switch is designed to give the application a "physical" feel, but nothing else in here really followed through. They didn't support the "flick" gesture that real iOS switches support, and the radio buttons that were also used in Rustdoc Settings were a more "classic" form element anyway. Also, while "switches" are the exclusive toggle design on iOS (since [Apple HIG] reserves checkboxes for Mac only), the [Google Material] guidelines say that lists of switches are bad, and you should just use check boxes. [Apple HIG]: https://developer.apple.com/design/human-interface-guidelines/components/selection-and-input/toggles [Google Material]: https://m3.material.io/components/checkbox/guidelines#6902f23d-ceba-4b19-ae3b-b78b9b01d185
91 lines
2 KiB
CSS
91 lines
2 KiB
CSS
.setting-line {
|
|
margin: 0.6em 0 0.6em 0.3em;
|
|
position: relative;
|
|
}
|
|
|
|
.setting-line .choices {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.setting-line .radio-line input,
|
|
.setting-line .toggle input {
|
|
margin-right: 0.3em;
|
|
height: 1.2rem;
|
|
width: 1.2rem;
|
|
color: inherit;
|
|
border: 1px solid currentColor;
|
|
outline: none;
|
|
-webkit-appearance: none;
|
|
cursor: pointer;
|
|
}
|
|
.setting-line .radio-line input {
|
|
border-radius: 50%;
|
|
}
|
|
.setting-line .toggle input:checked {
|
|
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">\
|
|
<path d="M7,25L17,32L33,12" fill="none" stroke="black" stroke-width="5"/>\
|
|
<path d="M7,23L17,30L33,10" fill="none" stroke="white" stroke-width="5"/></svg>');
|
|
}
|
|
|
|
.setting-line .radio-line input + span,
|
|
.setting-line .toggle span {
|
|
padding-bottom: 1px;
|
|
}
|
|
|
|
.radio-line .setting-name {
|
|
width: 100%;
|
|
}
|
|
|
|
.radio-line .choice {
|
|
margin-top: 0.1em;
|
|
margin-bottom: 0.1em;
|
|
min-width: 3.8em;
|
|
padding: 0.3em;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
.radio-line .choice + .choice {
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
.toggle {
|
|
position: relative;
|
|
width: 100%;
|
|
margin-right: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.setting-line > .sub-settings {
|
|
padding-left: 42px;
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
#settings .setting-line {
|
|
margin: 1.2em 0.6em;
|
|
}
|
|
|
|
.setting-line .radio-line input:checked {
|
|
box-shadow: inset 0 0 0 3px var(--main-background-color);
|
|
background-color: var(--settings-input-color);
|
|
}
|
|
.setting-line .toggle input:checked {
|
|
background-color: var(--settings-input-color);
|
|
}
|
|
.setting-line .radio-line input:focus,
|
|
.setting-line .toggle input:focus {
|
|
box-shadow: 0 0 1px 1px var(--settings-input-color);
|
|
}
|
|
/* In here we combine both `:focus` and `:checked` properties. */
|
|
.setting-line .radio-line input:checked:focus {
|
|
box-shadow: inset 0 0 0 3px var(--main-background-color),
|
|
0 0 2px 2px var(--settings-input-color);
|
|
}
|
|
.setting-line .radio-line input:hover,
|
|
.setting-line .toggle input:hover {
|
|
border-color: var(--settings-input-color) !important;
|
|
}
|