| .setting-line { |
| margin: 1.2em 0.6em; |
| position: relative; |
| } |
| |
| .setting-radio input, .setting-check 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-radio input { |
| border-radius: 50%; |
| } |
| .setting-check 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-radio span, .setting-check span { |
| padding-bottom: 1px; |
| } |
| |
| .setting-radio { |
| margin-top: 0.1em; |
| margin-bottom: 0.1em; |
| min-width: 3.8em; |
| padding: 0.3em; |
| display: inline-flex; |
| align-items: center; |
| cursor: pointer; |
| } |
| .setting-radio + .setting-radio { |
| margin-left: 0.5em; |
| } |
| |
| .setting-check { |
| margin-right: 20px; |
| display: flex; |
| align-items: center; |
| cursor: pointer; |
| } |
| |
| .setting-radio input:checked { |
| box-shadow: inset 0 0 0 3px var(--main-background-color); |
| background-color: var(--settings-input-color); |
| } |
| .setting-check input:checked { |
| background-color: var(--settings-input-color); |
| } |
| .setting-radio input:focus, .setting-check input:focus { |
| box-shadow: 0 0 1px 1px var(--settings-input-color); |
| } |
| /* In here we combine both `:focus` and `:checked` properties. */ |
| .setting-radio input:checked:focus { |
| box-shadow: inset 0 0 0 3px var(--main-background-color), |
| 0 0 2px 2px var(--settings-input-color); |
| } |
| .setting-radio input:hover, .setting-check input:hover { |
| border-color: var(--settings-input-color) !important; |
| } |