.setting-line { margin: 0.6em 0 0.6em 0.3em; position: relative; } .setting-line > div { display: inline-block; vertical-align: top; font-size: 17px; padding-top: 2px; } .setting-line > .title { font-size: 19px; width: 100%; max-width: none; border-bottom: 1px solid; } .setting-line .radio-line, .setting-line .choices { display: flex; flex-wrap: wrap; } .setting-line .radio-line .setting-name { flex-grow: 1; margin-top: auto; margin-bottom: auto; } .setting-line .radio-line input { margin-right: 0.3em; } .radio-line .choice { border-radius: 0.1em; border: 1px solid; margin-left: 0.5em; margin-top: 0.1em; margin-bottom: 0.1em; min-width: 3.8em; padding: 0.3em; } .toggle { position: relative; display: inline-block; width: 45px; height: 27px; margin-right: 20px; } .toggle input { opacity: 0; position: absolute; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .3s; } .slider:before { position: absolute; content: ""; height: 19px; width: 19px; left: 4px; bottom: 4px; background-color: white; transition: .3s; } input:checked + .slider { background-color: #2196F3; } input:focus + .slider { box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3); } input:checked + .slider:before { transform: translateX(19px); } .setting-line > .sub-settings { padding-left: 42px; width: 100%; display: block; }