]>
Commit | Line | Data |
---|---|---|
83c7162d XL |
1 | .setting-line { |
2 | padding: 5px; | |
60c5eb7d | 3 | position: relative; |
83c7162d XL |
4 | } |
5 | ||
6 | .setting-line > div { | |
7 | max-width: calc(100% - 74px); | |
8 | display: inline-block; | |
9 | vertical-align: top; | |
10 | font-size: 17px; | |
11 | padding-top: 2px; | |
12 | } | |
13 | ||
60c5eb7d XL |
14 | .setting-line > .title { |
15 | font-size: 19px; | |
16 | width: 100%; | |
17 | max-width: none; | |
18 | border-bottom: 1px solid; | |
19 | } | |
20 | ||
83c7162d XL |
21 | .toggle { |
22 | position: relative; | |
23 | display: inline-block; | |
24 | width: 45px; | |
25 | height: 27px; | |
26 | margin-right: 20px; | |
27 | } | |
28 | ||
29 | .toggle input { | |
30 | display: none; | |
31 | } | |
32 | ||
33 | .slider { | |
34 | position: absolute; | |
35 | cursor: pointer; | |
36 | top: 0; | |
37 | left: 0; | |
38 | right: 0; | |
39 | bottom: 0; | |
40 | background-color: #ccc; | |
41 | -webkit-transition: .3s; | |
42 | transition: .3s; | |
43 | } | |
44 | ||
45 | .slider:before { | |
46 | position: absolute; | |
47 | content: ""; | |
48 | height: 19px; | |
49 | width: 19px; | |
50 | left: 4px; | |
51 | bottom: 4px; | |
52 | background-color: white; | |
53 | -webkit-transition: .3s; | |
54 | transition: .3s; | |
55 | } | |
56 | ||
57 | input:checked + .slider { | |
58 | background-color: #2196F3; | |
59 | } | |
60 | ||
61 | input:focus + .slider { | |
62 | box-shadow: 0 0 1px #2196F3; | |
63 | } | |
64 | ||
65 | input:checked + .slider:before { | |
66 | -webkit-transform: translateX(19px); | |
67 | -ms-transform: translateX(19px); | |
68 | transform: translateX(19px); | |
0731742a | 69 | } |
60c5eb7d XL |
70 | |
71 | .setting-line > .sub-settings { | |
72 | padding-left: 42px; | |
73 | width: 100%; | |
74 | display: block; | |
75 | } |