|
1 | | -.input-container { |
| 1 | +div.xcode_container { |
2 | 2 | position: relative; |
3 | | - float: right; |
4 | 3 | } |
5 | 4 |
|
6 | | -.setting { |
| 5 | +div.xcode_container > .input-container { |
| 6 | + position: absolute; |
| 7 | + top: 1.3em; |
| 8 | + right: .6em; |
| 9 | + transition: opacity 0.3s ease-in-out; |
| 10 | + opacity: 0; |
| 11 | +} |
| 12 | + |
| 13 | +div.xcode_container:hover > .input-container { |
| 14 | + opacity: 1; |
| 15 | +} |
| 16 | + |
| 17 | +div.xcode_container:focus-within > .input-container { |
| 18 | + opacity: 1; |
| 19 | +} |
| 20 | + |
| 21 | +div.xcode_container > .input-container > .xcode_switch { |
7 | 22 | cursor: pointer; |
8 | 23 | display: block; |
9 | 24 | position: relative; |
10 | 25 | height: 14px; |
11 | 26 | } |
12 | | -.setting::selection { |
| 27 | +div.xcode_container > .input-container > .xcode_switch::selection { |
13 | 28 | background: transparent; |
14 | 29 | } |
15 | 30 |
|
16 | | -.input-container input[type=checkbox] + label:before { |
| 31 | +div.xcode_container > .input-container input[type=checkbox] + label:before { |
17 | 32 | box-shadow: none; |
18 | 33 | } |
19 | 34 |
|
20 | | -.input-container input[type=checkbox]:checked + label:before { |
21 | | - background: #7192a8; /*#27a6e5;*/ |
| 35 | +div.xcode_container > .input-container input[type=checkbox]:checked + label:before { |
| 36 | + background: #7192a8; |
22 | 37 | } |
23 | 38 |
|
24 | | -.input-container input[type=checkbox] + label:before { |
25 | | - background: #e9e9e9; /*#808080;*/ |
| 39 | +div.xcode_container > .input-container input[type=checkbox] + label:before { |
| 40 | + background: #e9e9e9; |
26 | 41 | border-radius: 100px; |
27 | 42 | box-shadow: 0 0 2px 0 #333 inset; |
28 | 43 | box-sizing: border-box; |
|
39 | 54 | transform: translateY(-50%); |
40 | 55 | } |
41 | 56 |
|
42 | | -.input-container input[type=checkbox]:not(:checked) + label:after { |
| 57 | +div.xcode_container > .input-container input[type=checkbox]:not(:checked) + label:after { |
43 | 58 | left: 8px; |
44 | 59 | } |
45 | 60 |
|
46 | | -.input-container input[type=checkbox] + label:after { |
| 61 | +div.xcode_container > .input-container input[type=checkbox] + label:after { |
47 | 62 | background: #fff; |
48 | 63 | border-radius: 90px; |
49 | 64 | box-shadow: 0 0 3px 0 #333; |
|
62 | 77 | margin-right: 6px; |
63 | 78 | } |
64 | 79 |
|
65 | | -.input-container input[type=checkbox] + label { |
| 80 | +div.xcode_container > .input-container input[type=checkbox] + label { |
66 | 81 | padding-left: 46px; |
67 | 82 | } |
68 | 83 |
|
69 | | -.input-container input[type=checkbox] { |
| 84 | +div.xcode_container > .input-container input[type=checkbox] { |
70 | 85 | display: none; |
71 | 86 | height: 0; |
72 | 87 | visibility: hidden; |
|
0 commit comments