| .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 { |
| margin-right: 0.3em; |
| height: 1.2rem; |
| width: 1.2rem; |
| color: inherit; |
| border: 1px solid currentColor; |
| outline: none; |
| -webkit-appearance: none; |
| cursor: pointer; |
| border-radius: 50%; |
| } |
| .setting-line .radio-line input + 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; |
| } |
| |
| .toggle input { |
| opacity: 0; |
| position: absolute; |
| } |
| |
| .slider { |
| position: relative; |
| width: 45px; |
| min-width: 45px; |
| display: block; |
| height: 28px; |
| margin-right: 20px; |
| cursor: pointer; |
| background-color: #ccc; |
| transition: .3s; |
| } |
| |
| .slider:before { |
| position: absolute; |
| content: ""; |
| height: 19px; |
| width: 19px; |
| left: 4px; |
| bottom: 4px; |
| transition: .3s; |
| } |
| |
| input:checked + .slider:before { |
| transform: translateX(19px); |
| } |
| |
| .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 .radio-line 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 { |
| border-color: var(--settings-input-color) !important; |
| } |
| input:checked + .slider { |
| background-color: var(--settings-input-color); |
| } |