1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
.toggle {
display: block;
text-align: center;
margin-top: 40px;
user-select: none;
}
.toggle--checkbox {
display: none;
}
.toggle--btn {
display: block;
margin: 0 auto;
font-size: 1.4em;
transition: all 350ms ease-in;
}
.toggle--btn:hover {
cursor: pointer;
}
.toggle--btn, .toggle--btn:before, .toggle--btn:after,
.toggle--checkbox,
.toggle--checkbox:before,
.toggle--checkbox:after,
.toggle--feature,
.toggle--feature:before,
.toggle--feature:after {
transition: all 250ms ease-in;
}
.toggle--btn:before, .toggle--btn:after,
.toggle--checkbox:before,
.toggle--checkbox:after,
.toggle--feature:before,
.toggle--feature:after {
content: '';
display: block;
}
/* ===================================================
Day/Night and Gender toggle buttons
=================================================== */
.toggle--daynight .toggle--btn,
.toggle--like .toggle--btn {
position: relative;
height: 70px;
width: 125px;
border-radius: 70px;
}
.toggle--daynight .toggle--btn:before,
.toggle--like .toggle--btn:before {
position: absolute;
top: 2px;
left: 4px;
width: 56px;
height: 56px;
border-radius: 50%;
}
.toggle--daynight .toggle--btn {
border: 5px solid #1c1c1c;
background-color: #3c4145;
}
.toggle--daynight .toggle--btn:before {
background-color: #fff;
border: 5px solid #e3e3c7;
}
.toggle--daynight .toggle--btn:after {
position: absolute;
top: 62%;
left: 39px;
z-index: 10;
width: 11.2px;
height: 11.2px;
opacity: 0;
background-color: #fff;
border-radius: 50%;
box-shadow: #fff 0 0, #fff 3px 0, #fff 6px 0, #fff 9px 0, #fff 11px 0, #fff 14px 0, #fff 16px 0, #fff 21px -1px 0 1px, #fff 16px -7px 0 -2px, #fff 7px -7px 0 1px, #d3d3d3 0 0 0 4px, #d3d3d3 6px 0 0 4px, #d3d3d3 11px 0 0 4px, #d3d3d3 16px 0 0 4px, #d3d3d3 21px -1px 0 5px, #d3d3d3 16px -7px 0 1px, #d3d3d3 7px -7px 0 5px;
transition: opacity 100ms ease-in;
}
@keyframes starry_star {
50% {
background-color: rgba(255, 255, 255, 0.1);
box-shadow: #fff 30px -3px 0 0, #fff 12px 10px 0 -1px, rgba(255, 255, 255, 0.1) 38px 18px 0 1px, #fff 32px 34px 0 0, rgba(255, 255, 255, 0.1) 20px 24px 0 -1.5px, #fff 5px 38px 0 1px;
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 100;
transform: scale(1.1);
}
55% {
transform: scale(1.1);
}
75% {
transform: scale(0.9);
}
100% {
opacity: 100;
transform: scale(1);
}
}
.toggle--daynight .toggle--feature {
display: block;
position: absolute;
top: 9px;
left: 52.5%;
z-index: 20;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #fff;
box-shadow: rgba(255, 255, 255, 0.1) 30px -3px 0 0, rgba(255, 255, 255, 0.1) 12px 10px 0 -1px, #fff 38px 18px 0 1px, rgba(255, 255, 255, 0.1) 32px 34px 0 0, #fff 20px 24px 0 -1.5px, rgba(255, 255, 255, 0.1) 5px 38px 0 1px;
animation: starry_star 5s ease-in-out infinite;
}
.toggle--daynight .toggle--feature:before {
position: absolute;
top: -2px;
left: -25px;
width: 18px;
height: 18px;
background-color: #fff;
border-radius: 50%;
border: 5px solid #e3e3c7;
box-shadow: #e3e3c7 -28px 0 0 -3px, #e3e3c7 -8px 24px 0 -2px;
transform-origin: -6px 130%;
}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn {
background-color: #9ee3fb;
border: 5px solid #86c3d7;
}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn:before {
left: 55px;
background-color: #ffdf6d;
border: 5px solid #e1c348;
}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn:after {
opacity: 100;
animation-name: bounceIn;
animation-duration: 0.60s;
animation-delay: 0.10s;
animation-fill-mode: backwards;
animation-timing-function: ease-in-out;
}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn > .toggle--feature {
opacity: 0;
box-shadow: rgba(255, 255, 255, 0.1) 30px -3px 0 -4px, rgba(255, 255, 255, 0.1) 12px 10px 0 -5px, #fff 38px 18px 0 -3px, rgba(255, 255, 255, 0.1) 32px 34px 0 -4px, #fff 20px 24px 0 -5.5px, rgba(255, 255, 255, 0.1) 5px 38px 0 -3px;
animation: none;
}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn > .toggle--feature:before {
left: 25px;
transform: rotate(70deg);
}
|
