| .setting-line { |
| padding: 5px; |
| 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; |
| } |
| |
| .toggle { |
| position: relative; |
| display: inline-block; |
| width: 45px; |
| height: 27px; |
| margin-right: 20px; |
| } |
| |
| .toggle input { |
| display: none; |
| } |
| |
| .select-wrapper { |
| float: right; |
| position: relative; |
| height: 27px; |
| min-width: 25%; |
| } |
| |
| .select-wrapper select { |
| appearance: none; |
| -moz-appearance: none; |
| -webkit-appearance: none; |
| background: none; |
| border: 2px solid #ccc; |
| padding-right: 28px; |
| width: 100%; |
| } |
| |
| .select-wrapper img { |
| pointer-events: none; |
| position: absolute; |
| right: 0; |
| bottom: 0; |
| background: #ccc; |
| height: 100%; |
| width: 28px; |
| padding: 0px 4px; |
| } |
| |
| .select-wrapper select option { |
| color: initial; |
| } |
| |
| .slider { |
| position: absolute; |
| cursor: pointer; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-color: #ccc; |
| -webkit-transition: .3s; |
| transition: .3s; |
| } |
| |
| .slider:before { |
| position: absolute; |
| content: ""; |
| height: 19px; |
| width: 19px; |
| left: 4px; |
| bottom: 4px; |
| background-color: white; |
| -webkit-transition: .3s; |
| transition: .3s; |
| } |
| |
| input:checked + .slider { |
| background-color: #2196F3; |
| } |
| |
| input:focus + .slider { |
| box-shadow: 0 0 1px #2196F3; |
| } |
| |
| input:checked + .slider:before { |
| -webkit-transform: translateX(19px); |
| -ms-transform: translateX(19px); |
| transform: translateX(19px); |
| } |
| |
| .setting-line > .sub-settings { |
| padding-left: 42px; |
| width: 100%; |
| display: block; |
| } |