#e8e8e8
1/* REMASTERED */ 2/* RTX-ON */ 3/* completely redone toggle and droid */ 4 5.bb8-toggle { 6 --toggle-size: 16px; 7 /* finally I removed the scale now everything depends on the font-size */ 8 /* --margin-top-for-head: 1.75em; */ 9 /* it's just in case 👆 */ 10 --toggle-width: 10.625em; 11 --toggle-height: 5.625em; 12 --toggle-offset: calc((var(--toggle-height) - var(--bb8-diameter)) / 2); 13 --toggle-bg: linear-gradient(#2c4770, #070e2b 35%, #628cac 50% 70%, #a6c5d4) 14 no-repeat; 15 --bb8-diameter: 4.375em; 16 --radius: 99em; 17 --transition: 0.4s; 18 --accent: #de7d2f; 19 --bb8-bg: #fff; 20} 21 22.bb8-toggle, 23.bb8-toggle *, 24.bb8-toggle *::before, 25.bb8-toggle *::after { 26 -webkit-box-sizing: border-box; 27 box-sizing: border-box; 28} 29 30.bb8-toggle { 31 cursor: pointer; 32 margin-top: var(--margin-top-for-head); 33 font-size: var(--toggle-size); 34} 35 36.bb8-toggle__checkbox { 37 -webkit-appearance: none; 38 -moz-appearance: none; 39 appearance: none; 40 display: none; 41} 42 43.bb8-toggle__container { 44 width: var(--toggle-width); 45 height: var(--toggle-height); 46 background: var(--toggle-bg); 47 background-size: 100% 11.25em; 48 background-position-y: -5.625em; 49 border-radius: var(--radius); 50 position: relative; 51 -webkit-transition: var(--transition); 52 -o-transition: var(--transition); 53 transition: var(--transition); 54} 55 56.bb8 { 57 display: -webkit-box; 58 display: -ms-flexbox; 59 display: flex; 60 -webkit-box-orient: vertical; 61 -webkit-box-direction: normal; 62 -ms-flex-direction: column; 63 flex-direction: column; 64 -webkit-box-align: center; 65 -ms-flex-align: center; 66 align-items: center; 67 position: absolute; 68 top: calc(var(--toggle-offset) - 1.688em + 0.188em); 69 left: var(--toggle-offset); 70 -webkit-transition: var(--transition); 71 -o-transition: var(--transition); 72 transition: var(--transition); 73 z-index: 2; 74} 75 76.bb8__head-container { 77 position: relative; 78 -webkit-transition: var(--transition); 79 -o-transition: var(--transition); 80 transition: var(--transition); 81 z-index: 2; 82 -webkit-transform-origin: 1.25em 3.75em; 83 -ms-transform-origin: 1.25em 3.75em; 84 transform-origin: 1.25em 3.75em; 85} 86 87.bb8__head { 88 overflow: hidden; 89 margin-bottom: -0.188em; 90 width: 2.5em; 91 height: 1.688em; 92 background: -o-linear-gradient( 93 transparent 0.063em, 94 dimgray 0.063em 0.313em, 95 transparent 0.313em 0.375em, 96 var(--accent) 0.375em 0.5em, 97 transparent 0.5em 1.313em, 98 silver 1.313em 1.438em, 99 transparent 1.438em 100 ), 101 -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent 102 1.25em), 103 -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent 104 1.25em), 105 -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em); 106 background: -o-linear-gradient( 107 transparent 0.063em, 108 dimgray 0.063em 0.313em, 109 transparent 0.313em 0.375em, 110 var(--accent) 0.375em 0.5em, 111 transparent 0.5em 1.313em, 112 silver 1.313em 1.438em, 113 transparent 1.438em 114 ), 115 -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent 116 1.25em), 117 -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent 118 1.25em), 119 -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em); 120 background: -o-linear-gradient( 121 transparent 0.063em, 122 dimgray 0.063em 0.313em, 123 transparent 0.313em 0.375em, 124 var(--accent) 0.375em 0.5em, 125 transparent 0.5em 1.313em, 126 silver 1.313em 1.438em, 127 transparent 1.438em 128 ), 129 -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent 130 1.25em), 131 -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent 132 1.25em), 133 -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em); 134 background: -o-linear-gradient( 135 transparent 0.063em, 136 dimgray 0.063em 0.313em, 137 transparent 0.313em 0.375em, 138 var(--accent) 0.375em 0.5em, 139 transparent 0.5em 1.313em, 140 silver 1.313em 1.438em, 141 transparent 1.438em 142 ), 143 -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent 144 1.25em), 145 -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent 146 1.25em), 147 -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em); 148 background: linear-gradient( 149 transparent 0.063em, 150 dimgray 0.063em 0.313em, 151 transparent 0.313em 0.375em, 152 var(--accent) 0.375em 0.5em, 153 transparent 0.5em 1.313em, 154 silver 1.313em 1.438em, 155 transparent 1.438em 156 ), 157 linear-gradient( 158 45deg, 159 transparent 0.188em, 160 var(--bb8-bg) 0.188em 1.25em, 161 transparent 1.25em 162 ), 163 linear-gradient( 164 -45deg, 165 transparent 0.188em, 166 var(--bb8-bg) 0.188em 1.25em, 167 transparent 1.25em 168 ), 169 linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em); 170 border-radius: var(--radius) var(--radius) 0 0; 171 position: relative; 172 z-index: 1; 173 -webkit-filter: drop-shadow(0 0.063em 0.125em gray); 174 filter: drop-shadow(0 0.063em 0.125em gray); 175} 176 177.bb8__head::before { 178 content: ""; 179 position: absolute; 180 width: 0.563em; 181 height: 0.563em; 182 background: -o-radial-gradient( 183 0.25em 0.375em, 184 0.125em circle, 185 red, 186 transparent 187 ), 188 -o-radial-gradient(0.375em 0.188em, 0.063em circle, var(--bb8-bg) 50%, transparent 189 100%), 190 -o-linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em); 191 background: -o-radial-gradient( 192 0.25em 0.375em, 193 0.125em circle, 194 red, 195 transparent 196 ), 197 -o-radial-gradient(0.375em 0.188em, 0.063em circle, var(--bb8-bg) 50%, transparent 198 100%), 199 -o-linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em); 200 background: -o-radial-gradient( 201 0.25em 0.375em, 202 0.125em circle, 203 red, 204 transparent 205 ), 206 -o-radial-gradient(0.375em 0.188em, 0.063em circle, var(--bb8-bg) 50%, transparent 207 100%), 208 -o-linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em); 209 background: -o-radial-gradient( 210 0.25em 0.375em, 211 0.125em circle, 212 red, 213 transparent 214 ), 215 -o-radial-gradient(0.375em 0.188em, 0.063em circle, var(--bb8-bg) 50%, transparent 216 100%), 217 -o-linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em); 218 background: radial-gradient( 219 0.125em circle at 0.25em 0.375em, 220 red, 221 transparent 222 ), 223 radial-gradient( 224 0.063em circle at 0.375em 0.188em, 225 var(--bb8-bg) 50%, 226 transparent 100% 227 ), 228 linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em); 229 border-radius: var(--radius); 230 top: 0.413em; 231 left: 50%; 232 -webkit-transform: translate(-50%); 233 -ms-transform: translate(-50%); 234 transform: translate(-50%); 235 -webkit-box-shadow: 0 0 0 0.089em lightgray, 0.563em 0.281em 0 -0.148em, 236 0.563em 0.281em 0 -0.1em var(--bb8-bg), 0.563em 0.281em 0 -0.063em; 237 box-shadow: 0 0 0 0.089em lightgray, 0.563em 0.281em 0 -0.148em, 238 0.563em 0.281em 0 -0.1em var(--bb8-bg), 0.563em 0.281em 0 -0.063em; 239 z-index: 1; 240 -webkit-transition: var(--transition); 241 -o-transition: var(--transition); 242 transition: var(--transition); 243} 244 245.bb8__head::after { 246 content: ""; 247 position: absolute; 248 bottom: 0.375em; 249 left: 0; 250 width: 100%; 251 height: 0.188em; 252 background: -o-linear-gradient( 253 left, 254 var(--accent) 0.125em, 255 transparent 0.125em 0.188em, 256 var(--accent) 0.188em 0.313em, 257 transparent 0.313em 0.375em, 258 var(--accent) 0.375em 0.938em, 259 transparent 0.938em 1em, 260 var(--accent) 1em 1.125em, 261 transparent 1.125em 1.875em, 262 var(--accent) 1.875em 2em, 263 transparent 2em 2.063em, 264 var(--accent) 2.063em 2.25em, 265 transparent 2.25em 2.313em, 266 var(--accent) 2.313em 2.375em, 267 transparent 2.375em 2.438em, 268 var(--accent) 2.438em 269 ); 270 background: -webkit-gradient( 271 linear, 272 left top, 273 right top, 274 color-stop(0.125em, var(--accent)), 275 color-stop(0.125em, transparent), 276 color-stop(0.188em, var(--accent)), 277 color-stop(0.313em, transparent), 278 color-stop(0.375em, var(--accent)), 279 color-stop(0.938em, transparent), 280 color-stop(1em, var(--accent)), 281 color-stop(1.125em, transparent), 282 color-stop(1.875em, var(--accent)), 283 color-stop(2em, transparent), 284 color-stop(2.063em, var(--accent)), 285 color-stop(2.25em, transparent), 286 color-stop(2.313em, var(--accent)), 287 color-stop(2.375em, transparent), 288 color-stop(2.438em, var(--accent)) 289 ); 290 background: linear-gradient( 291 to right, 292 var(--accent) 0.125em, 293 transparent 0.125em 0.188em, 294 var(--accent) 0.188em 0.313em, 295 transparent 0.313em 0.375em, 296 var(--accent) 0.375em 0.938em, 297 transparent 0.938em 1em, 298 var(--accent) 1em 1.125em, 299 transparent 1.125em 1.875em, 300 var(--accent) 1.875em 2em, 301 transparent 2em 2.063em, 302 var(--accent) 2.063em 2.25em, 303 transparent 2.25em 2.313em, 304 var(--accent) 2.313em 2.375em, 305 transparent 2.375em 2.438em, 306 var(--accent) 2.438em 307 ); 308 -webkit-transition: var(--transition); 309 -o-transition: var(--transition); 310 transition: var(--transition); 311} 312 313.bb8__antenna { 314 position: absolute; 315 -webkit-transform: translateY(-90%); 316 -ms-transform: translateY(-90%); 317 transform: translateY(-90%); 318 width: 0.059em; 319 border-radius: var(--radius) var(--radius) 0 0; 320 -webkit-transition: var(--transition); 321 -o-transition: var(--transition); 322 transition: var(--transition); 323} 324 325.bb8__antenna:nth-child(1) { 326 height: 0.938em; 327 right: 0.938em; 328 background: -o-linear-gradient(#000 0.188em, silver 0.188em); 329 background: -webkit-gradient( 330 linear, 331 left top, 332 left bottom, 333 color-stop(0.188em, #000), 334 color-stop(0.188em, silver) 335 ); 336 background: linear-gradient(#000 0.188em, silver 0.188em); 337} 338 339.bb8__antenna:nth-child(2) { 340 height: 0.375em; 341 left: 50%; 342 -webkit-transform: translate(-50%, -90%); 343 -ms-transform: translate(-50%, -90%); 344 transform: translate(-50%, -90%); 345 background: silver; 346} 347 348.bb8__body { 349 width: 4.375em; 350 height: 4.375em; 351 background: var(--bb8-bg); 352 border-radius: var(--radius); 353 position: relative; 354 overflow: hidden; 355 -webkit-transition: var(--transition); 356 -o-transition: var(--transition); 357 transition: var(--transition); 358 z-index: 1; 359 -webkit-transform: rotate(45deg); 360 -ms-transform: rotate(45deg); 361 transform: rotate(45deg); 362 background: -webkit-gradient( 363 linear, 364 right top, 365 left top, 366 color-stop(4%, var(--bb8-bg)), 367 color-stop(4%, var(--accent)), 368 color-stop(10%, transparent), 369 color-stop(90%, var(--accent)), 370 color-stop(96%, var(--bb8-bg)) 371 ), 372 -webkit-gradient(linear, left top, left bottom, color-stop(4%, var(--bb8-bg)), color-stop(4%, var(--accent)), color-stop(10%, transparent), color-stop(90%, var(--accent)), color-stop(96%, var(--bb8-bg))), 373 -webkit-gradient(linear, left top, right top, color-stop(2.156em, transparent), color-stop(2.156em, silver), color-stop(2.188em, transparent)), 374 -webkit-gradient(linear, left top, left bottom, color-stop(2.156em, transparent), color-stop(2.156em, silver), color-stop(2.188em, transparent)); 375 background: -o-linear-gradient( 376 right, 377 var(--bb8-bg) 4%, 378 var(--accent) 4% 10%, 379 transparent 10% 90%, 380 var(--accent) 90% 96%, 381 var(--bb8-bg) 96% 382 ), 383 -o-linear-gradient(var(--bb8-bg) 4%, var(--accent) 4% 10%, transparent 10% 384 90%, var(--accent) 90% 96%, var(--bb8-bg) 96%), 385 -o-linear-gradient(left, transparent 2.156em, silver 2.156em 2.219em, transparent 386 2.188em), 387 -o-linear-gradient(transparent 2.156em, silver 2.156em 2.219em, transparent 388 2.188em); 389 background: linear-gradient( 390 -90deg, 391 var(--bb8-bg) 4%, 392 var(--accent) 4% 10%, 393 transparent 10% 90%, 394 var(--accent) 90% 96%, 395 var(--bb8-bg) 96% 396 ), 397 linear-gradient( 398 var(--bb8-bg) 4%, 399 var(--accent) 4% 10%, 400 transparent 10% 90%, 401 var(--accent) 90% 96%, 402 var(--bb8-bg) 96% 403 ), 404 linear-gradient( 405 to right, 406 transparent 2.156em, 407 silver 2.156em 2.219em, 408 transparent 2.188em 409 ), 410 linear-gradient( 411 transparent 2.156em, 412 silver 2.156em 2.219em, 413 transparent 2.188em 414 ); 415 background-color: var(--bb8-bg); 416} 417 418.bb8__body::after { 419 content: ""; 420 bottom: 1.5em; 421 left: 0.563em; 422 position: absolute; 423 width: 0.188em; 424 height: 0.188em; 425 background: rgb(236, 236, 236); 426 color: rgb(236, 236, 236); 427 border-radius: 50%; 428 -webkit-box-shadow: 0.875em 0.938em, 0 -1.25em, 0.875em -2.125em, 429 2.125em -2.125em, 3.063em -1.25em, 3.063em 0, 2.125em 0.938em; 430 box-shadow: 0.875em 0.938em, 0 -1.25em, 0.875em -2.125em, 2.125em -2.125em, 431 3.063em -1.25em, 3.063em 0, 2.125em 0.938em; 432} 433 434.bb8__body::before { 435 content: ""; 436 width: 2.625em; 437 height: 2.625em; 438 position: absolute; 439 border-radius: 50%; 440 z-index: 0.1; 441 overflow: hidden; 442 top: 50%; 443 left: 50%; 444 -webkit-transform: translate(-50%, -50%); 445 -ms-transform: translate(-50%, -50%); 446 transform: translate(-50%, -50%); 447 border: 0.313em solid var(--accent); 448 background: -o-radial-gradient( 449 center, 450 1em circle, 451 rgb(236, 236, 236) 50%, 452 transparent 51% 453 ), 454 -o-radial-gradient(center, 1.25em circle, var(--bb8-bg) 50%, transparent 51%), 455 -o-linear-gradient(right, transparent 42%, var(--accent) 42% 58%, transparent 456 58%), 457 -o-linear-gradient(var(--bb8-bg) 42%, var(--accent) 42% 58%, var(--bb8-bg) 458 58%); 459 background: -o-radial-gradient( 460 center, 461 1em circle, 462 rgb(236, 236, 236) 50%, 463 transparent 51% 464 ), 465 -o-radial-gradient(center, 1.25em circle, var(--bb8-bg) 50%, transparent 51%), 466 -o-linear-gradient(right, transparent 42%, var(--accent) 42% 58%, transparent 467 58%), 468 -o-linear-gradient(var(--bb8-bg) 42%, var(--accent) 42% 58%, var(--bb8-bg) 469 58%); 470 background: radial-gradient( 471 1em circle at center, 472 rgb(236, 236, 236) 50%, 473 transparent 51% 474 ), 475 radial-gradient(1.25em circle at center, var(--bb8-bg) 50%, transparent 51%), 476 -webkit-gradient(linear, right top, left top, color-stop(42%, transparent), color-stop(42%, var(--accent)), color-stop(58%, transparent)), 477 -webkit-gradient(linear, left top, left bottom, color-stop(42%, var(--bb8-bg)), color-stop(42%, var(--accent)), color-stop(58%, var(--bb8-bg))); 478 background: radial-gradient( 479 1em circle at center, 480 rgb(236, 236, 236) 50%, 481 transparent 51% 482 ), 483 radial-gradient(1.25em circle at center, var(--bb8-bg) 50%, transparent 51%), 484 linear-gradient( 485 -90deg, 486 transparent 42%, 487 var(--accent) 42% 58%, 488 transparent 58% 489 ), 490 linear-gradient(var(--bb8-bg) 42%, var(--accent) 42% 58%, var(--bb8-bg) 58%); 491} 492 493.artificial__hidden { 494 position: absolute; 495 border-radius: inherit; 496 inset: 0; 497 pointer-events: none; 498 overflow: hidden; 499} 500 501.bb8__shadow { 502 content: ""; 503 width: var(--bb8-diameter); 504 height: 20%; 505 border-radius: 50%; 506 background: #3a271c; 507 -webkit-box-shadow: 0.313em 0 3.125em #3a271c; 508 box-shadow: 0.313em 0 3.125em #3a271c; 509 opacity: 0.25; 510 position: absolute; 511 bottom: 0; 512 left: calc(var(--toggle-offset) - 0.938em); 513 -webkit-transition: var(--transition); 514 -o-transition: var(--transition); 515 transition: var(--transition); 516 -webkit-transform: skew(-70deg); 517 -ms-transform: skew(-70deg); 518 transform: skew(-70deg); 519 z-index: 1; 520} 521 522.bb8-toggle__scenery { 523 width: 100%; 524 height: 100%; 525 pointer-events: none; 526 overflow: hidden; 527 position: relative; 528 border-radius: inherit; 529} 530 531.bb8-toggle__scenery::before { 532 content: ""; 533 position: absolute; 534 width: 100%; 535 height: 30%; 536 bottom: 0; 537 background: #b18d71; 538 z-index: 1; 539} 540 541.bb8-toggle__cloud { 542 z-index: 1; 543 position: absolute; 544 border-radius: 50%; 545} 546 547.bb8-toggle__cloud:nth-last-child(1) { 548 width: 0.875em; 549 height: 0.625em; 550 -webkit-filter: blur(0.125em) drop-shadow(0.313em 0.313em #ffffffae) 551 drop-shadow(-0.625em 0 #fff) drop-shadow(-0.938em -0.125em #fff); 552 filter: blur(0.125em) drop-shadow(0.313em 0.313em #ffffffae) 553 drop-shadow(-0.625em 0 #fff) drop-shadow(-0.938em -0.125em #fff); 554 right: 1.875em; 555 top: 2.813em; 556 background: -o-linear-gradient(bottom left, #ffffffae, #ffffffae); 557 background: -webkit-gradient( 558 linear, 559 left bottom, 560 right top, 561 from(#ffffffae), 562 to(#ffffffae) 563 ); 564 background: linear-gradient(to top right, #ffffffae, #ffffffae); 565 -webkit-transition: var(--transition); 566 -o-transition: var(--transition); 567 transition: var(--transition); 568} 569 570.bb8-toggle__cloud:nth-last-child(2) { 571 top: 0.625em; 572 right: 4.375em; 573 width: 0.875em; 574 height: 0.375em; 575 background: #dfdedeae; 576 -webkit-filter: blur(0.125em) drop-shadow(-0.313em -0.188em #e0dfdfae) 577 drop-shadow(-0.625em -0.188em #bbbbbbae) drop-shadow(-1em 0.063em #cfcfcfae); 578 filter: blur(0.125em) drop-shadow(-0.313em -0.188em #e0dfdfae) 579 drop-shadow(-0.625em -0.188em #bbbbbbae) drop-shadow(-1em 0.063em #cfcfcfae); 580 -webkit-transition: 0.6s; 581 -o-transition: 0.6s; 582 transition: 0.6s; 583} 584 585.bb8-toggle__cloud:nth-last-child(3) { 586 top: 1.25em; 587 right: 0.938em; 588 width: 0.875em; 589 height: 0.375em; 590 background: #ffffffae; 591 -webkit-filter: blur(0.125em) drop-shadow(0.438em 0.188em #ffffffae) 592 drop-shadow(-0.625em 0.313em #ffffffae); 593 filter: blur(0.125em) drop-shadow(0.438em 0.188em #ffffffae) 594 drop-shadow(-0.625em 0.313em #ffffffae); 595 -webkit-transition: 0.8s; 596 -o-transition: 0.8s; 597 transition: 0.8s; 598} 599 600.gomrassen, 601.hermes, 602.chenini { 603 position: absolute; 604 border-radius: var(--radius); 605 background: -o-linear-gradient(#fff, #6e8ea2); 606 background: -webkit-gradient( 607 linear, 608 left top, 609 left bottom, 610 from(#fff), 611 to(#6e8ea2) 612 ); 613 background: linear-gradient(#fff, #6e8ea2); 614 top: 100%; 615} 616 617.gomrassen { 618 left: 0.938em; 619 width: 1.875em; 620 height: 1.875em; 621 -webkit-box-shadow: 0 0 0.188em #ffffff52, 0 0 0.188em #6e8ea24b; 622 box-shadow: 0 0 0.188em #ffffff52, 0 0 0.188em #6e8ea24b; 623 -webkit-transition: var(--transition); 624 -o-transition: var(--transition); 625 transition: var(--transition); 626} 627 628.gomrassen::before, 629.gomrassen::after { 630 content: ""; 631 position: absolute; 632 border-radius: inherit; 633 -webkit-box-shadow: inset 0 0 0.063em rgb(140, 162, 169); 634 box-shadow: inset 0 0 0.063em rgb(140, 162, 169); 635 background: rgb(184, 196, 200); 636} 637 638.gomrassen::before { 639 left: 0.313em; 640 top: 0.313em; 641 width: 0.438em; 642 height: 0.438em; 643} 644 645.gomrassen::after { 646 width: 0.25em; 647 height: 0.25em; 648 left: 1.25em; 649 top: 0.75em; 650} 651 652.hermes { 653 left: 3.438em; 654 width: 0.625em; 655 height: 0.625em; 656 -webkit-box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b; 657 box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b; 658 -webkit-transition: 0.6s; 659 -o-transition: 0.6s; 660 transition: 0.6s; 661} 662 663.chenini { 664 left: 4.375em; 665 width: 0.5em; 666 height: 0.5em; 667 -webkit-box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b; 668 box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b; 669 -webkit-transition: 0.8s; 670 -o-transition: 0.8s; 671 transition: 0.8s; 672} 673 674.tatto-1, 675.tatto-2 { 676 position: absolute; 677 width: 1.25em; 678 height: 1.25em; 679 border-radius: var(--radius); 680} 681 682.tatto-1 { 683 background: #fefefe; 684 right: 3.125em; 685 top: 0.625em; 686 -webkit-box-shadow: 0 0 0.438em #fdf4e1; 687 box-shadow: 0 0 0.438em #fdf4e1; 688 -webkit-transition: var(--transition); 689 -o-transition: var(--transition); 690 transition: var(--transition); 691} 692 693.tatto-2 { 694 background: -o-linear-gradient(#e6ac5c, #d75449); 695 background: -webkit-gradient( 696 linear, 697 left top, 698 left bottom, 699 from(#e6ac5c), 700 to(#d75449) 701 ); 702 background: linear-gradient(#e6ac5c, #d75449); 703 right: 1.25em; 704 top: 2.188em; 705 -webkit-box-shadow: 0 0 0.438em #e6ad5c3d, 0 0 0.438em #d755494f; 706 box-shadow: 0 0 0.438em #e6ad5c3d, 0 0 0.438em #d755494f; 707 -webkit-transition: 0.7s; 708 -o-transition: 0.7s; 709 transition: 0.7s; 710} 711 712.bb8-toggle__star { 713 position: absolute; 714 width: 0.063em; 715 height: 0.063em; 716 background: #fff; 717 border-radius: var(--radius); 718 -webkit-filter: drop-shadow(0 0 0.063em #fff); 719 filter: drop-shadow(0 0 0.063em #fff); 720 color: #fff; 721 top: 100%; 722} 723 724.bb8-toggle__star:nth-child(1) { 725 left: 3.75em; 726 -webkit-box-shadow: 1.25em 0.938em, -1.25em 2.5em, 0 1.25em, 1.875em 0.625em, 727 -3.125em 1.875em, 1.25em 2.813em; 728 box-shadow: 1.25em 0.938em, -1.25em 2.5em, 0 1.25em, 1.875em 0.625em, 729 -3.125em 1.875em, 1.25em 2.813em; 730 -webkit-transition: 0.2s; 731 -o-transition: 0.2s; 732 transition: 0.2s; 733} 734 735.bb8-toggle__star:nth-child(2) { 736 left: 4.688em; 737 -webkit-box-shadow: 0.625em 0, 0 0.625em, -0.625em -0.625em, 0.625em 0.938em, 738 -3.125em 1.25em, 1.25em -1.563em; 739 box-shadow: 0.625em 0, 0 0.625em, -0.625em -0.625em, 0.625em 0.938em, 740 -3.125em 1.25em, 1.25em -1.563em; 741 -webkit-transition: 0.3s; 742 -o-transition: 0.3s; 743 transition: 0.3s; 744} 745 746.bb8-toggle__star:nth-child(3) { 747 left: 5.313em; 748 -webkit-box-shadow: -0.625em -0.625em, -2.188em 1.25em, -2.188em 0, 749 -3.75em -0.625em, -3.125em -0.625em, -2.5em -0.313em, 0.75em -0.625em; 750 box-shadow: -0.625em -0.625em, -2.188em 1.25em, -2.188em 0, -3.75em -0.625em, 751 -3.125em -0.625em, -2.5em -0.313em, 0.75em -0.625em; 752 -webkit-transition: var(--transition); 753 -o-transition: var(--transition); 754 transition: var(--transition); 755} 756 757.bb8-toggle__star:nth-child(4) { 758 left: 1.875em; 759 width: 0.125em; 760 height: 0.125em; 761 -webkit-transition: 0.5s; 762 -o-transition: 0.5s; 763 transition: 0.5s; 764} 765 766.bb8-toggle__star:nth-child(5) { 767 left: 5em; 768 width: 0.125em; 769 height: 0.125em; 770 -webkit-transition: 0.6s; 771 -o-transition: 0.6s; 772 transition: 0.6s; 773} 774 775.bb8-toggle__star:nth-child(6) { 776 left: 2.5em; 777 width: 0.125em; 778 height: 0.125em; 779 -webkit-transition: 0.7s; 780 -o-transition: 0.7s; 781 transition: 0.7s; 782} 783 784.bb8-toggle__star:nth-child(7) { 785 left: 3.438em; 786 width: 0.125em; 787 height: 0.125em; 788 -webkit-transition: 0.8s; 789 -o-transition: 0.8s; 790 transition: 0.8s; 791} 792 793/* actions */ 794 795.bb8-toggle__checkbox:checked 796 + .bb8-toggle__container 797 .bb8-toggle__star:nth-child(1) { 798 top: 0.625em; 799} 800 801.bb8-toggle__checkbox:checked 802 + .bb8-toggle__container 803 .bb8-toggle__star:nth-child(2) { 804 top: 1.875em; 805} 806 807.bb8-toggle__checkbox:checked 808 + .bb8-toggle__container 809 .bb8-toggle__star:nth-child(3) { 810 top: 1.25em; 811} 812 813.bb8-toggle__checkbox:checked 814 + .bb8-toggle__container 815 .bb8-toggle__star:nth-child(4) { 816 top: 3.438em; 817} 818 819.bb8-toggle__checkbox:checked 820 + .bb8-toggle__container 821 .bb8-toggle__star:nth-child(5) { 822 top: 3.438em; 823} 824 825.bb8-toggle__checkbox:checked 826 + .bb8-toggle__container 827 .bb8-toggle__star:nth-child(6) { 828 top: 0.313em; 829} 830 831.bb8-toggle__checkbox:checked 832 + .bb8-toggle__container 833 .bb8-toggle__star:nth-child(7) { 834 top: 1.875em; 835} 836 837.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__cloud { 838 right: -100%; 839} 840 841.bb8-toggle__checkbox:checked + .bb8-toggle__container .gomrassen { 842 top: 0.938em; 843} 844 845.bb8-toggle__checkbox:checked + .bb8-toggle__container .hermes { 846 top: 2.5em; 847} 848 849.bb8-toggle__checkbox:checked + .bb8-toggle__container .chenini { 850 top: 2.75em; 851} 852 853.bb8-toggle__checkbox:checked + .bb8-toggle__container { 854 background-position-y: 0; 855} 856 857.bb8-toggle__checkbox:checked + .bb8-toggle__container .tatto-1 { 858 top: 100%; 859} 860 861.bb8-toggle__checkbox:checked + .bb8-toggle__container .tatto-2 { 862 top: 100%; 863} 864 865.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8 { 866 left: calc(100% - var(--bb8-diameter) - var(--toggle-offset)); 867} 868 869.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8__shadow { 870 left: calc(100% - var(--bb8-diameter) - var(--toggle-offset) + 0.938em); 871 -webkit-transform: skew(70deg); 872 -ms-transform: skew(70deg); 873 transform: skew(70deg); 874} 875 876.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8__body { 877 -webkit-transform: rotate(180deg); 878 -ms-transform: rotate(180deg); 879 transform: rotate(225deg); 880} 881 882.bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__head::before { 883 left: 100%; 884} 885 886.bb8-toggle__checkbox:not(:checked):hover 887 + .bb8-toggle__container 888 .bb8__antenna:nth-child(1) { 889 right: 1.5em; 890} 891 892.bb8-toggle__checkbox:hover 893 + .bb8-toggle__container 894 .bb8__antenna:nth-child(2) { 895 left: 0.938em; 896} 897 898.bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__head::after { 899 background-position: 1.375em 0; 900} 901 902.bb8-toggle__checkbox:checked:hover 903 + .bb8-toggle__container 904 .bb8__head::before { 905 left: 0; 906} 907 908.bb8-toggle__checkbox:checked:hover 909 + .bb8-toggle__container 910 .bb8__antenna:nth-child(2) { 911 left: calc(100% - 0.938em); 912} 913 914.bb8-toggle__checkbox:checked:hover + .bb8-toggle__container .bb8__head::after { 915 background-position: -1.375em 0; 916} 917 918.bb8-toggle__checkbox:active + .bb8-toggle__container .bb8__head-container { 919 -webkit-transform: rotate(25deg); 920 -ms-transform: rotate(25deg); 921 transform: rotate(25deg); 922} 923 924.bb8-toggle__checkbox:checked:active 925 + .bb8-toggle__container 926 .bb8__head-container { 927 -webkit-transform: rotate(-25deg); 928 -ms-transform: rotate(-25deg); 929 transform: rotate(-25deg); 930} 931 932.bb8:hover .bb8__head::before, 933.bb8:hover .bb8__antenna:nth-child(2) { 934 left: 50% !important; 935} 936 937.bb8:hover .bb8__antenna:nth-child(1) { 938 right: 0.938em !important; 939} 940 941.bb8:hover .bb8__head::after { 942 background-position: 0 0 !important; 943}
Comments
1bryandelgado99 26. July at 13:29
26. July at 13:29
Amazing and beautiful work!
Variations
1 MIT License