-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyle.css
154 lines (115 loc) · 5.01 KB
/
style.css
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
.button {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%,-50%);
display: block;
width: 250px;
height: 250px;
background-image: -webkit-linear-gradient(top, #464a54 0%, #2c2225 100%);
background-image: linear-gradient(to bottom, #464a54 0%, #2c2225 100%);
border-radius: 50%; /*// which makes it a circle*/
cursor: pointer;
box-shadow: 0 -5px 0px #464649, 0 4px 20px rgba(0, 0, 0, 0.5), 0 2px 1px #66696e inset, 4px 0 0 rgba(0, 0, 0, 0.1) inset, -4px 0 0 rgba(0, 0, 0, 0.1) inset, 0 -8px 2px rgba(0, 0, 0, 0.1) inset;
}
.button .hole {
position: absolute; /*//means relative its first parent*/
top: 10px;
left: 10px;
display: block;
width: 230px;
height: 230px;
overflow: hidden;
background-color: #090909;
border-radius: 50%;
box-shadow: 0 -2px 1px rgba(255, 255, 255, 0.25) inset, 0 2px 1px rgba(255, 255, 255, 0.2) inset;
}
.button .switch {
position: absolute;
top: 5px;
left: 5px;
display: block;
width: 220px;
height: 220px;
/* background-image: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.07) 0%, transparent 80%), -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.15) 0%, transparent 80%), -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 50%), -webkit-linear-gradient(top, #882626 0%, #290606 100%);
*/
/*background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.07) 0%, transparent 80%), radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15) 0%, transparent 80%), radial-gradient(ellipse at center, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 50%), linear-gradient(to bottom, #882626 0%, #290606 100%);
background-size: 100% 80px, 100% 80px, 10px 10px, 100%;
background-position: top left, bottom left, bottom left, center;
background-repeat: no-repeat, no-repeat, repeat, no-repeat;*/
background-image: -webkit-radial-gradient(ellipse at center, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 50%), -webkit-linear-gradient(to bottom, #99FF99 0%, #99FFCC 100%) ;
background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 50%), linear-gradient(to bottom, #99FF99 0%, #99FFCC 100%) ;
background-size:10px 10px, 100%;
background-position:bottom left, center;
background-repeat: repeat, no-repeat;
border-radius: 50%;
/* box-shadow: 2px 0 1px rgba(255, 255, 255, 0.1) inset, -2px 0 1px rgba(255, 255, 255, 0.1) inset, 0 -2px 2px rgba(255, 255, 255, 0.05) inset, 0 4px 2px rgba(0, 0, 0, 0.05) inset, 0 -30px 8px rgba(198, 45, 45, 0.5), 0 -25px 8px rgba(198, 45, 45, 0.3), 0 -20px 8px rgba(198, 45, 45, 0.4), 0 -15px 8px rgba(198, 45, 45, 0.5), 0 -10px 8px rgba(198, 45, 45, 0.6), 0 -5px 8px rgba(198, 45, 45, 0.9);*/
/*-webkit-transform-style: preserve3d;
transform-style: preserve3d;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: perspective(1500px) rotateX(-30deg) translateY(16px);
transform: perspective(1500px) rotateX(-30deg) translateY(16px);
-webkit-transition: -webkit-transform 200ms ease;
transition: transform 200ms ease;*/
}
/*.button .switch:before {
content: "";
position: absolute;
top: -2px;
left: 5px;
width: 122px;
height: 5px;
background-image: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.4) 0%, transparent 80%);
background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.4) 0%, transparent 80%);
}*/
/*.button .switch .one {
position: absolute;
top: 24px;
left: calc(47%);
display: block;
width: 6px;
height: 40px;
background-image: -webkit-linear-gradient(top, #cccccc 0%, #999999 100%);
background-image: linear-gradient(to bottom, #cccccc 0%, #999999 100%);
box-shadow: 0 2px 1px white inset;
border-radius: 4px;
}
.button .switch .zero {
position: absolute;
bottom: 24px;
left: calc(36%);
display: block;
width: 32px;
height: 40px;
box-shadow: 0 4px 2px rgba(255, 255, 255, 0.5) inset, 0 -4px 2px rgba(0, 0, 0, 0.2) inset, 0 0 0 6px #666666 inset;
border-radius: 50%;
}*/
.button .switch .arrow-up {
position: absolute;
top:55px;
left:55px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 70px solid rgba(240, 17, 51, 0.50);
}
.button input {
display: none;
}
.button input:checked ~ .hole .switch {
background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 50%), linear-gradient(to bottom, #99FF00 0%, #99FF33 100%) ;
background-size:10px 10px, 100%;
background-position:bottom left, center;
background-repeat: repeat, no-repeat;
border-radius: 50%;
}
.button input:checked ~ .hole .switch .arrow-up {
border-bottom: 70px solid rgba(240, 17, 51, 1);
body {
background-color: #2B2B2B;
}