2.5K views
1/* SWITCH 2--------------------------------------------- */ 3 4.container .origin { 5 position: absolute; 6 left: 50%; 7 top: 50%; 8 z-index: 111; 9 width: 2px; 10 height: 2px; 11 margin: -1px 0 0 -1px; 12 background-color: #f50; 13} 14 15.de { 16 user-select: none; 17 position: relative; 18 width: 230px; 19 height: 230px; 20 border-radius: 100%; 21 box-shadow: 0 0 25px rgba(0, 0, 0, .1); 22 background-color: transparent; 23} 24 25.de .den, .de .dene, .de .denem, .de .deneme, .de .light, .de .dot { 26 position: absolute; 27 left: 50%; 28 top: 50%; 29} 30 31.den { 32 position: relative; 33 width: 220px; 34 height: 220px; 35 margin: -110px 0 0 -110px; 36 border-radius: 100%; 37 box-shadow: inset 0 3px 10px rgba(0, 0, 0, .6), 0 2px 20px rgba(255, 255, 255, 1); 38 background: #888888; 39 background: -moz-radial-gradient(center, ellipse cover, #888888 0%, #333333 100%); 40 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #888888), color-stop(100%, #333333)); 41 background: -webkit-radial-gradient(center, ellipse cover, #888888 0%, #333333 100%); 42 background: -o-radial-gradient(center, ellipse cover, #888888 0%, #333333 100%); 43} 44 45.dene { 46 z-index: 4; 47 width: 140px; 48 height: 140px; 49 margin: -70px 0 0 -70px; 50 border-radius: 100%; 51 box-shadow: inset 0 2px 2px rgba(255, 255, 255, .4), 0 3px 13px rgba(0, 0, 0, .85); 52 background: #f2f6f5; 53 background: -moz-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%); 54 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f6f5), color-stop(100%, #cbd5d6)); 55 background: -webkit-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%); 56 background: -o-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%); 57} 58 59.denem { 60 width: 120px; 61 height: 120px; 62 margin: -60px 0 0 -60px; 63 border-radius: 100%; 64 background: #cbd5d6; 65 background: -moz-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%); 66 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cbd5d6), color-stop(100%, #f2f6f5)); 67 background: -webkit-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%); 68 background: -o-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%); 69} 70 71.deneme { 72 width: 100px; 73 height: 100px; 74 margin: -50px 0 0 -50px; 75 border-radius: 100%; 76 box-shadow: inset 0 2px 3px rgba(255, 255, 255, .6), 0 8px 20px rgba(0, 0, 0, .9); 77 background: #eef7f6; 78 background: -moz-linear-gradient(top, #eef7f6 0%, #8d989a 100%); 79 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eef7f6), color-stop(100%, #8d989a)); 80 background: -webkit-linear-gradient(top, #eef7f6 0%, #8d989a 100%); 81 background: -o-linear-gradient(top, #eef7f6 0%, #8d989a 100%); 82} 83 84.den .switch { 85 z-index: 3; 86 position: absolute; 87 top: 0; 88 left: 0; 89 width: 100%; 90 height: 100%; 91} 92 93.den .switch label { 94 z-index: 2; 95 position: absolute; 96 top: 50%; 97 left: 50%; 98 width: 50%; 99 height: 70px; 100 margin-top: -35px; 101 transform-origin: 0% 50%; 102 -webkit-transform-origin: 0% 50%; 103 -o-transform-origin: 0% 50%; 104} 105 106.den .switch label:after { 107 content: ""; 108 position: absolute; 109 top: 6px; 110 left: 1px; 111 width: 100%; 112 height: 30px; 113 transform: rotate(-30deg); 114 -webkit-transform: rotate(-30deg); 115 -o-transform: rotate(-30deg); 116} 117 118.den .switch label:before { 119 content: ""; 120 position: absolute; 121 bottom: 6px; 122 left: 1px; 123 width: 100%; 124 height: 30px; 125 transform: rotate(30deg); 126 -webkit-transform: rotate(30deg); 127 -o-transform: rotate(30deg); 128} 129 130.den .switch label span { 131 z-index: 2; 132 position: absolute; 133 top: 0; 134 right: 0; 135 width: 40px; 136 height: 100%; 137 font-weight: bold; 138 font-size: 15px; 139 line-height: 70px; 140 text-align: center; 141 color: #eee; 142 text-shadow: 0 1px 0 #444; 143} 144 145.den .switch label:nth-child(1) { 146 transform: rotate(-90deg); 147 -webkit-transform: rotate(-90deg); 148 -o-transform: rotate(-90deg); 149} 150 151.den .switch label:nth-child(1) span { 152 right: 2px; 153 font-size: 13px; 154 transform: rotate(90deg); 155 -webkit-transform: rotate(90deg); 156 -o-transform: rotate(90deg); 157} 158 159.den .switch label:nth-child(2) { 160 transform: rotate(-30deg); 161 -webkit-transform: rotate(-30deg); 162 -o-transform: rotate(-30deg); 163} 164 165.den .switch label:nth-child(2) span { 166 transform: rotate(30deg); 167 -webkit-transform: rotate(30deg); 168 -o-transform: rotate(30deg); 169} 170 171.den .switch label:nth-child(3) { 172 transform: rotate(30deg); 173 -webkit-transform: rotate(30deg); 174 -o-transform: rotate(30deg); 175} 176 177.den .switch label:nth-child(3) span { 178 transform: rotate(-30deg); 179 -webkit-transform: rotate(-30deg); 180 -o-transform: rotate(-30deg); 181} 182 183.den .switch label:nth-child(4) { 184 transform: rotate(90deg); 185 -webkit-transform: rotate(90deg); 186 -o-transform: rotate(90deg); 187} 188 189.den .switch label:nth-child(4) span { 190 transform: rotate(-90deg); 191 -webkit-transform: rotate(-90deg); 192 -o-transform: rotate(-90deg); 193} 194 195.den .switch label:nth-child(5) { 196 transform: rotate(150deg); 197 -webkit-transform: rotate(150deg); 198 -o-transform: rotate(150deg); 199} 200 201.den .switch label:nth-child(5) span { 202 transform: rotate(-150deg); 203 -webkit-transform: rotate(-150deg); 204 -o-transform: rotate(-150deg); 205} 206 207.den .switch label:nth-child(6) { 208 transform: rotate(210deg); 209 -webkit-transform: rotate(210deg); 210 -o-transform: rotate(210deg); 211} 212 213.den .switch label:nth-child(6) span { 214 transform: rotate(-210deg); 215 -webkit-transform: rotate(-210deg); 216 -o-transform: rotate(-210deg); 217} 218 219.den .switch input { 220 position: absolute; 221 opacity: 0; 222 visibility: hidden; 223} 224 225/* SWITCH LIGHT */ 226 227.den .light { 228 z-index: 1; 229 width: 50%; 230 height: 100px; 231 margin-top: -50px; 232 transform-origin: 0% 50%; 233 -webkit-transform-origin: 0% 50%; 234 -o-transform-origin: 0% 50%; 235 transform: rotate(-90deg); 236 -webkit-transform: rotate(-90deg); 237 -o-transform: rotate(-90deg); 238 -webkit-transition: all .5s; 239 transition: all .5s; 240 -o-transition: all .5s; 241} 242 243.den .light span { 244 opacity: .4; 245 position: absolute; 246 top: 0; 247 left: 15px; 248 width: 100px; 249 height: 100px; 250 background: -moz-radial-gradient(center, ellipse cover, rgba(184, 163, 204, 1) 0%, rgba(159, 197, 224, 0.42) 42%, rgba(111, 113, 179, 0) 72%, rgba(67, 34, 137, 0) 100%); 251 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(184, 163, 204, 1)), color-stop(42%, rgba(159, 197, 224, 0.42)), color-stop(72%, rgba(111, 113, 179, 0)), color-stop(100%, rgba(67, 34, 137, 0))); 252 background: -webkit-radial-gradient(center, ellipse cover, rgba(184, 163, 204, 1) 0%, rgba(159, 197, 224, 0.42) 42%, rgba(111, 113, 179, 0) 72%, rgba(67, 34, 137, 0) 100%); 253 background: -o-radial-gradient(center, ellipse cover, rgba(184, 163, 204, 1) 0%, rgba(159, 197, 224, 0.42) 42%, rgba(111, 113, 179, 0) 72%, rgba(67, 34, 137, 0) 100%); 254} 255 256/* SWITCH LIGHT POSITION */ 257 258.den #switch_off:checked ~ .light { 259 transform: rotate(-90deg); 260 -webkit-transform: rotate(-90deg); 261 -o-transform: rotate(-90deg); 262} 263 264.den #switch_1:checked ~ .light { 265 transform: rotate(-30deg); 266 -webkit-transform: rotate(-30deg); 267 -o-transform: rotate(-30deg); 268} 269 270.den #switch_2:checked ~ .light { 271 transform: rotate(30deg); 272 -webkit-transform: rotate(30deg); 273 -o-transform: rotate(30deg); 274} 275 276.den #switch_3:checked ~ .light { 277 transform: rotate(90deg); 278 -webkit-transform: rotate(90deg); 279 -o-transform: rotate(90deg); 280} 281 282.den #switch_4:checked ~ .light { 283 transform: rotate(150deg); 284 -webkit-transform: rotate(150deg); 285 -o-transform: rotate(150deg); 286} 287 288.den #switch_5:checked ~ .light { 289 transform: rotate(210deg); 290 -webkit-transform: rotate(210deg); 291 -o-transform: rotate(210deg); 292} 293 294/* SWITCH LIGHT */ 295 296.den .dot { 297 z-index: 6; 298 width: 50%; 299 height: 12px; 300 margin-top: -6px; 301 transform-origin: 0% 50%; 302 -webkit-transform-origin: 0% 50%; 303 -o-transform-origin: 0% 50%; 304 transition: all .5s; 305 -moz-transition: all .5s; 306 -o-transition: all .5s; 307} 308 309.den .dot span { 310 position: absolute; 311 top: 0; 312 left: 30px; 313 width: 12px; 314 height: 12px; 315 border-radius: 100%; 316 background: #dae2e4; 317 background: -moz-linear-gradient(top, #dae2e4 0%, #ecf5f4 100%); 318 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dae2e4), color-stop(100%, #ecf5f4)); 319 background: -webkit-linear-gradient(top, #dae2e4 0%, #ecf5f4 100%); 320 background: -o-linear-gradient(top, #dae2e4 0%, #ecf5f4 100%); 321} 322 323/* SWITCH LIGHT POSITION */ 324 325.den #switch_off:checked ~ .dot { 326 transform: rotate(-90deg); 327 -webkit-transform: rotate(-90deg); 328 -o-transform: rotate(-90deg); 329} 330 331.den #switch_off:checked ~ .dot span { 332 transform: rotate(90deg); 333 -webkit-transform: rotate(90deg); 334 -o-transform: rotate(90deg); 335} 336 337.den #switch_1:checked ~ .dot { 338 transform: rotate(-30deg); 339 -webkit-transform: rotate(-30deg); 340 -o-transform: rotate(-30deg); 341} 342 343.den #switch_1:checked ~ .dot span { 344 opacity: .9; 345 transform: rotate(30deg); 346 -webkit-transform: rotate(30deg); 347 -o-transform: rotate(30deg); 348} 349 350.den #switch_2:checked ~ .dot { 351 transform: rotate(30deg); 352 -webkit-transform: rotate(30deg); 353 -o-transform: rotate(30deg); 354} 355 356.den #switch_2:checked ~ .dot span { 357 opacity: .5; 358 transform: rotate(-30deg); 359 -webkit-transform: rotate(-30deg); 360 -o-transform: rotate(-30deg); 361} 362 363.den #switch_3:checked ~ .dot { 364 transform: rotate(90deg); 365 -webkit-transform: rotate(90deg); 366 -o-transform: rotate(90deg); 367} 368 369.den #switch_3:checked ~ .dot span { 370 opacity: .4; 371 transform: rotate(-90deg); 372 -webkit-transform: rotate(-90deg); 373 -o-transform: rotate(-90deg); 374} 375 376.den #switch_4:checked ~ .dot { 377 transform: rotate(150deg); 378 -webkit-transform: rotate(150deg); 379 -o-transform: rotate(150deg); 380} 381 382.den #switch_4:checked ~ .dot span { 383 opacity: .5; 384 transform: rotate(-150deg); 385 -webkit-transform: rotate(-150deg); 386 -o-transform: rotate(-150deg); 387} 388 389.den #switch_5:checked ~ .dot { 390 transform: rotate(210deg); 391 -webkit-transform: rotate(210deg); 392 -o-transform: rotate(210deg); 393} 394 395.den #switch_5:checked ~ .dot span { 396 opacity: .9; 397 transform: rotate(-210deg); 398 -webkit-transform: rotate(-210deg); 399 -o-transform: rotate(-210deg); 400} 401 402/* LINE */ 403 404.den hr.line { 405 z-index: 1; 406 position: absolute; 407 top: 50%; 408 width: 100%; 409 height: 0; 410 margin-top: -1px; 411 border-width: 1px 0; 412 border-style: solid; 413 border-top-color: #3c3d3f; 414 border-bottom-color: #666769; 415} 416 417.den hr.line:nth-child(1) { 418 transform: rotate(-60deg); 419 -webkit-transform: rotate(-60deg); 420 -o-transform: rotate(-60deg); 421} 422 423.den hr.line:nth-child(2) { 424 transform: rotate(60deg); 425 -webkit-transform: rotate(60deg); 426 -o-transform: rotate(60deg); 427}
MIT License