1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | .jp-switch {
|
7 | display: flex;
|
8 | align-items: center;
|
9 | padding-left: 4px;
|
10 | padding-right: 4px;
|
11 | font-size: var(--jp-ui-font-size1);
|
12 | background-color: transparent;
|
13 | color: var(--jp-ui-font-color1);
|
14 | border: none;
|
15 | height: 20px;
|
16 | }
|
17 |
|
18 | .jp-switch:hover {
|
19 | background-color: var(--jp-layout-color2);
|
20 | }
|
21 |
|
22 | .jp-switch-label {
|
23 | margin-right: 5px;
|
24 | }
|
25 |
|
26 | .jp-switch-track {
|
27 | cursor: pointer;
|
28 | background-color: var(--jp-border-color1);
|
29 | -webkit-transition: 0.4s;
|
30 | transition: 0.4s;
|
31 | border-radius: 34px;
|
32 | height: 16px;
|
33 | width: 35px;
|
34 | position: relative;
|
35 | }
|
36 |
|
37 | .jp-switch-track::before {
|
38 | content: '';
|
39 | position: absolute;
|
40 | height: 10px;
|
41 | width: 10px;
|
42 | margin: 3px;
|
43 | left: 0px;
|
44 | background-color: var(--jp-ui-inverse-font-color1);
|
45 | -webkit-transition: 0.4s;
|
46 | transition: 0.4s;
|
47 | border-radius: 50%;
|
48 | }
|
49 |
|
50 | .jp-switch[aria-checked='true'] .jp-switch-track {
|
51 | background-color: var(--jp-warn-color0);
|
52 | }
|
53 |
|
54 | .jp-switch[aria-checked='true'] .jp-switch-track::before {
|
55 |
|
56 | left: 19px;
|
57 | }
|