└── Neumorphism Element ├── css ├── CSS_DARK.css ├── CSS_DS.css └── CSS_White.css ├── index.html └── js ├── jquery-3.5.0.min.js └── js.js /Neumorphism Element/css/CSS_DARK.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --greyLight-1: #868686; 3 | --greyLight-2: #868686; 4 | --greyLight-3:#868686; 5 | --greyDark:#868686; 6 | } 7 | 8 | *, *::before, *::after { 9 | margin: 0; 10 | padding: 0; 11 | box-sizing: inherit; 12 | } 13 | 14 | html { 15 | box-sizing: border-box; 16 | font-size: 62.5%; 17 | overflow-y: scroll; 18 | 19 | } 20 | @media screen and (min-width: 900px) { 21 | html { 22 | font-size: 75%; 23 | } 24 | } 25 | 26 | 27 | 28 | .colorPicker 29 | { 30 | background: #131419; 31 | box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.1), 2px 2px 6px rgba(0, 0, 0, 0.8); 32 | 33 | } 34 | 35 | .colorPicker i 36 | { 37 | 38 | color: #FF0047; 39 | } 40 | 41 | .colors { 42 | 43 | background: #131419; 44 | box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.1), 2px 2px 6px rgba(0, 0, 0, 0.8); 45 | 46 | } 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | .container { 61 | min-height: 100vh; 62 | display: -webkit-box; 63 | display: flex; 64 | -webkit-box-pack: center; 65 | justify-content: center; 66 | -webkit-box-align: center; 67 | align-items: center; 68 | font-family: 'Poppins', sans-serif; 69 | background: #131419; 70 | } 71 | 72 | .components { 73 | width: 80rem; 74 | height: 45rem; 75 | border-radius: 3rem; 76 | box-shadow: -5px -5px 10px rgba(255, 255, 255, 0.05), 5px 5px 15px rgba(0, 0, 0, 0.5); 77 | padding: 4rem; 78 | display: grid; 79 | grid-template-columns: 17.6rem 19rem 20.4rem; 80 | grid-template-rows: repeat(autofit, -webkit-min-content); 81 | grid-template-rows: repeat(autofit, min-content); 82 | grid-column-gap: 5rem; 83 | grid-row-gap: 2.5rem; 84 | -webkit-box-align: center; 85 | align-items: center; 86 | } 87 | 88 | /* SWITCH */ 89 | .switch { 90 | grid-column: 1 / 2; 91 | display: grid; 92 | grid-template-columns: repeat(2, -webkit-min-content); 93 | grid-template-columns: repeat(2, min-content); 94 | grid-gap: 3rem; 95 | justify-self: center; 96 | } 97 | .switch input { 98 | display: none; 99 | } 100 | .switch__1, .switch__2 { 101 | width: 6rem; 102 | } 103 | .switch__1 label, .switch__2 label { 104 | display: -webkit-box; 105 | display: flex; 106 | -webkit-box-align: center; 107 | align-items: center; 108 | width: 100%; 109 | height: 3rem; 110 | box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.1), 2px 2px 6px rgba(0, 0, 0, 0.8); 111 | background: rgba(255, 255, 255, 0); 112 | position: relative; 113 | cursor: pointer; 114 | border-radius: 1.6rem; 115 | } 116 | .switch__1 label::after, .switch__2 label::after { 117 | content: ""; 118 | position: absolute; 119 | left: .4rem; 120 | width: 2.1rem; 121 | height: 2.1rem; 122 | border-radius: 50%; 123 | background: var(--greyDark); 124 | -webkit-transition: all .4s ease; 125 | transition: all .4s ease; 126 | } 127 | .switch__1 label::before, .switch__2 label::before { 128 | content: ''; 129 | width: 100%; 130 | height: 100%; 131 | border-radius: inherit; 132 | background: #FF0047; 133 | opacity: 0; 134 | -webkit-transition: all .4s ease; 135 | transition: all .4s ease; 136 | } 137 | .switch input:checked ~ label::before { 138 | opacity: 1; 139 | } 140 | .switch input:checked ~ label::after { 141 | left: 57%; 142 | background:#fff; 143 | } 144 | 145 | /* CHECKBOX */ 146 | .checkbox { 147 | grid-column: 1 / 2; 148 | display: grid; 149 | grid-template-columns: repeat(2, 6rem); 150 | grid-gap: 3rem; 151 | -webkit-box-pack: center; 152 | justify-content: center; 153 | } 154 | .checkbox input { 155 | display: none; 156 | } 157 | .checkbox__1, .checkbox__2 { 158 | width: 6rem; 159 | display: -webkit-box; 160 | display: flex; 161 | -webkit-box-pack: center; 162 | justify-content: center; 163 | } 164 | .checkbox__1 label, .checkbox__2 label { 165 | box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.1), 2px 2px 6px rgba(0, 0, 0, 0.8); 166 | cursor: pointer; 167 | position: relative; 168 | display: -webkit-box; 169 | display: flex; 170 | -webkit-box-pack: center; 171 | justify-content: center; 172 | -webkit-box-align: center; 173 | align-items: center; 174 | border-radius: .5rem; 175 | width: 2.8rem; 176 | height: 2.8rem; 177 | } 178 | 179 | .checkbox__1 label i, .checkbox__2 label i { 180 | font-size: 1.8rem; 181 | font-weight: 700; 182 | color: var(--greyDark); 183 | -webkit-transition: .3s ease; 184 | transition: .3s ease; 185 | } 186 | .checkbox__1 input:checked ~ label, .checkbox__2 input:checked ~ label { 187 | box-shadow:inset -2px -2px 6px rgba(255, 255, 255, 0.1),inset 2px 2px 6px rgba(0, 0, 0, 0.8); 188 | } 189 | .checkbox__1 input:checked ~ label i, .checkbox__2 input:checked ~ label i { 190 | color: #FF0047; 191 | } 192 | 193 | /* RADIO */ 194 | .radio { 195 | grid-column: 1 / 2; 196 | display: grid; 197 | grid-template-columns: repeat(2, 1fr); 198 | justify-items: center; 199 | } 200 | .radio input { 201 | display: none; 202 | } 203 | .radio__1 input:checked ~ label, .radio__2 input:checked ~ label { 204 | box-shadow:inset -2px -2px 6px rgba(255, 255, 255, 0.1),inset 2px 2px 6px rgba(0, 0, 0, 0.8); 205 | 206 | } 207 | .radio__1 input:checked ~ label::after, .radio__2 input:checked ~ label::after { 208 | background: #FF0047; 209 | } 210 | .radio__1 label, .radio__2 label { 211 | box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.1), 2px 2px 6px rgba(0, 0, 0, 0.8); 212 | position: relative; 213 | display: -webkit-box; 214 | display: flex; 215 | -webkit-box-pack: center; 216 | justify-content: center; 217 | -webkit-box-align: center; 218 | align-items: center; 219 | cursor: pointer; 220 | width: 2.8rem; 221 | height: 2.8rem; 222 | border-radius: 50%; 223 | } 224 | 225 | .radio__1 label::after, .radio__2 label::after { 226 | content: ""; 227 | position: absolute; 228 | width: 1.4rem; 229 | height: 1.4rem; 230 | background: var(--greyDark); 231 | border-radius: 50%; 232 | -webkit-transition: 0.3s ease; 233 | transition: 0.3s ease; 234 | } 235 | 236 | /* BUTTONS */ 237 | .btn { 238 | width: 15rem; 239 | height: 4rem; 240 | border-radius: 1rem; 241 | box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.1), 2px 2px 6px rgba(0, 0, 0, 0.8); 242 | justify-self: center; 243 | display: -webkit-box; 244 | display: flex; 245 | -webkit-box-align: center; 246 | align-items: center; 247 | -webkit-box-pack: center; 248 | justify-content: center; 249 | cursor: pointer; 250 | -webkit-transition: .3s ease; 251 | transition: .3s ease; 252 | } 253 | .btn__primary { 254 | grid-column: 1 / 2; 255 | grid-row: 4 / 5; 256 | background: #FF0047; 257 | box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.1), 2px 2px 6px rgba(0, 0, 0, 0.8); 258 | color: #fff; 259 | } 260 | .btn__primary:hover { 261 | color:#131419; 262 | } 263 | .btn__primary:active { 264 | box-shadow:inset -2px -2px 6px rgba(255, 255, 255, 0.1),inset 2px 2px 6px rgba(0, 0, 0, 0.8); 265 | 266 | } 267 | .btn__secondary { 268 | grid-column: 1 / 2; 269 | grid-row: 5 / 6; 270 | color: var(--greyDark); 271 | } 272 | .btn__secondary:hover { 273 | color: #FF0047; 274 | } 275 | .btn__secondary:active { 276 | box-shadow:inset -2px -2px 6px rgba(255, 255, 255, 0.1),inset 2px 2px 6px rgba(0, 0, 0, 0.8); 277 | 278 | } 279 | .btn p { 280 | font-size: 1.6rem; 281 | } 282 | 283 | /* CLOCK */ 284 | .clock { 285 | grid-column: 2 / 3; 286 | grid-row: 1 / 3; 287 | width: 12rem; 288 | height: 12rem; 289 | justify-self: center; 290 | box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.1), 2px 2px 6px rgba(0, 0, 0, 0.8); 291 | border-radius: 50%; 292 | display: -webkit-box; 293 | display: flex; 294 | -webkit-box-pack: center; 295 | justify-content: center; 296 | -webkit-box-align: center; 297 | align-items: center; 298 | position: relative; 299 | } 300 | .clock .hand { 301 | position: absolute; 302 | -webkit-transform-origin: bottom; 303 | transform-origin: bottom; 304 | bottom: 6rem; 305 | border-radius: .2rem; 306 | z-index: 200; 307 | } 308 | .clock .hours { 309 | width: .4rem; 310 | height: 3.2rem; 311 | background: var(--greyLight-3); 312 | } 313 | .clock .minutes { 314 | width: .4rem; 315 | height: 4.6rem; 316 | background: var(--greyDark); 317 | } 318 | .clock .seconds { 319 | width: .2rem; 320 | height: 5.2rem; 321 | background: #FF0047; 322 | } 323 | .clock .point { 324 | position: absolute; 325 | width: .8rem; 326 | height: .8rem; 327 | border-radius: 50%; 328 | background: #FF0047; 329 | z-index: 300; 330 | } 331 | .clock .marker { 332 | width: 95%; 333 | height: 95%; 334 | border-radius: 50%; 335 | position: relative; 336 | box-shadow:inset -2px -2px 6px rgba(255, 255, 255, 0.1),inset 2px 2px 6px rgba(0, 0, 0, 0.8); 337 | 338 | } 339 | .clock .marker::after { 340 | content: ''; 341 | width: 60%; 342 | height: 60%; 343 | position: absolute; 344 | box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.1),inset 2px 2px 6px rgba(0, 0, 0, 0.8); 345 | 346 | border-radius: 50%; 347 | top: 20%; 348 | left: 20%; 349 | -webkit-filter: blur(1px); 350 | filter: blur(1px); 351 | } 352 | .clock .marker__1, .clock .marker__2, .clock .marker__3, .clock .marker__4 { 353 | position: absolute; 354 | border-radius: .1rem; 355 | box-shadow: inset -1px -1px 2px rgba(255, 255, 255, 0.1),inset 1px 1px 2px rgba(0, 0, 0, 0.8); 356 | 357 | } 358 | .clock .marker__1, .clock .marker__2 { 359 | width: .2rem; 360 | height: .6rem; 361 | left: 5.6rem; 362 | } 363 | .clock .marker__3, .clock .marker__4 { 364 | width: .6rem; 365 | height: .2rem; 366 | top: 5.6rem; 367 | } 368 | .clock .marker__1 { 369 | top: 2%; 370 | } 371 | .clock .marker__2 { 372 | top: 98%; 373 | -webkit-transform: translateY(-0.6rem); 374 | transform: translateY(-0.6rem); 375 | } 376 | .clock .marker__3 { 377 | left: 2%; 378 | } 379 | .clock .marker__4 { 380 | left: 98%; 381 | -webkit-transform: translateX(-0.6rem); 382 | transform: translateX(-0.6rem); 383 | } 384 | 385 | /* CHIP */ 386 | .chip { 387 | grid-column: 2 / 3; 388 | grid-row: 3 / 4; 389 | justify-self: center; 390 | width: 17rem; 391 | height: 4rem; 392 | border-radius: 1rem; 393 | box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.1), 2px 2px 6px rgba(0, 0, 0, 0.8); 394 | display: -webkit-box; 395 | display: flex; 396 | -webkit-box-pack: justify; 397 | justify-content: space-between; 398 | -webkit-box-align: center; 399 | align-items: center; 400 | } 401 | .chip__icon { 402 | width: 3rem; 403 | height: 3rem; 404 | border-radius: 1rem; 405 | margin: 0 0 0 .2rem; 406 | display: -webkit-box; 407 | display: flex; 408 | -webkit-box-pack: center; 409 | justify-content: center; 410 | -webkit-box-align: center; 411 | align-items: center; 412 | font-size: 1.8rem; 413 | color: #FF0047; 414 | } 415 | .chip p { 416 | font-size: .9rem; 417 | margin-left: -1.8rem; 418 | color: var(--greyDark); 419 | } 420 | .chip__close { 421 | width: 1.6rem; 422 | height: 1.6rem; 423 | margin: 0 .5rem; 424 | display: -webkit-box; 425 | display: flex; 426 | font-size: 1.6rem; 427 | color: var(--greyLight-3); 428 | cursor: pointer; 429 | } 430 | 431 | /* PLAY BUTTON */ 432 | .circle { 433 | grid-column: 2 / 3; 434 | grid-row: 4 / 6; 435 | width: 9rem; 436 | height: 100%; 437 | justify-self: center; 438 | border-radius: 1rem; 439 | display: grid; 440 | grid-template-rows: 1fr; 441 | justify-items: center; 442 | -webkit-box-align: center; 443 | align-items: center; 444 | } 445 | .circle__btn { 446 | grid-row: 1 / 2; 447 | grid-column: 1 / 2; 448 | width: 6rem; 449 | height: 6rem; 450 | display: -webkit-box; 451 | display: flex; 452 | margin: .6rem; 453 | -webkit-box-pack: center; 454 | justify-content: center; 455 | -webkit-box-align: center; 456 | align-items: center; 457 | border-radius: 50%; 458 | font-size: 3.2rem; 459 | color: #FF0047; 460 | z-index: 300; 461 | background: #131419; 462 | box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.1), 2px 2px 6px rgba(0, 0, 0, 0.8); 463 | cursor: pointer; 464 | position: relative; 465 | } 466 | .circle__btn.shadow { 467 | box-shadow:inset -2px -2px 6px rgba(255, 255, 255, 0.1),inset 2px 2px 6px rgba(0, 0, 0, 0.8); 468 | 469 | } 470 | .circle__btn .play { 471 | position: absolute; 472 | opacity: 0; 473 | -webkit-transition: all .2s linear; 474 | transition: all .2s linear; 475 | } 476 | .circle__btn .play.visibility { 477 | opacity: 1; 478 | } 479 | .circle__btn .pause { 480 | position: absolute; 481 | -webkit-transition: all .2s linear; 482 | transition: all .2s linear; 483 | } 484 | .circle__btn .pause.visibility { 485 | opacity: 0; 486 | } 487 | .circle__back-1, .circle__back-2 { 488 | grid-row: 1 / 2; 489 | grid-column: 1 / 2; 490 | width: 6rem; 491 | height: 6rem; 492 | border-radius: 50%; 493 | -webkit-filter: blur(1px); 494 | filter: blur(1px); 495 | z-index: 100; 496 | } 497 | .circle__back-1 { 498 | box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.1), 2px 2px 6px rgba(0, 0, 0, 0.8); 499 | -webkit-animation: waves 4s linear infinite; 500 | animation: waves 4s linear infinite; 501 | } 502 | .circle__back-1.paused { 503 | -webkit-animation-play-state: paused; 504 | animation-play-state: paused; 505 | } 506 | .circle__back-2 { 507 | box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.1), 2px 2px 6px rgba(0, 0, 0, 0.8); 508 | -webkit-animation: waves 4s linear 2s infinite; 509 | animation: waves 4s linear 2s infinite; 510 | } 511 | .circle__back-2.paused { 512 | -webkit-animation-play-state: paused; 513 | animation-play-state: paused; 514 | } 515 | 516 | /* FORM */ 517 | .form { 518 | grid-column: 3 / 4; 519 | grid-row: 3 / 4; 520 | } 521 | .form__input { 522 | width: 20.4rem; 523 | height: 4rem; 524 | border: none; 525 | border-radius: 1rem; 526 | font-size: 1.4rem; 527 | padding-left: 1.4rem; 528 | box-shadow:inset -2px -2px 6px rgba(255, 255, 255, 0.1),inset 2px 2px 6px rgba(0, 0, 0, 0.8); 529 | background: none; 530 | font-family: inherit; 531 | color: var(--greyDark); 532 | } 533 | .form__input::-webkit-input-placeholder { 534 | color: var(--greyLight-3); 535 | } 536 | .form__input::-moz-placeholder { 537 | color: var(--greyLight-3); 538 | } 539 | .form__input:-ms-input-placeholder { 540 | color: var(--greyLight-3); 541 | } 542 | .form__input::-ms-input-placeholder { 543 | color: var(--greyLight-3); 544 | } 545 | .form__input::placeholder { 546 | color: var(--greyLight-3); 547 | } 548 | .form__input:focus { 549 | outline: none; 550 | box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.1), 2px 2px 6px rgba(0, 0, 0, 0.8); 551 | 552 | } 553 | 554 | /* SEARCH */ 555 | .search { 556 | grid-column: 3 / 4; 557 | grid-row: 2 / 3; 558 | position: relative; 559 | display: -webkit-box; 560 | display: flex; 561 | -webkit-box-align: center; 562 | align-items: center; 563 | } 564 | .search__input { 565 | width: 20.4rem; 566 | height: 4rem; 567 | border: none; 568 | border-radius: 1rem; 569 | font-size: 1.4rem; 570 | padding-left: 3.8rem; 571 | box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.1), 2px 2px 6px rgba(0, 0, 0, 0.8); 572 | background: none; 573 | font-family: inherit; 574 | color: var(--greyDark); 575 | } 576 | .search__input::-webkit-input-placeholder { 577 | color: var(--greyLight-3); 578 | } 579 | .search__input::-moz-placeholder { 580 | color: var(--greyLight-3); 581 | } 582 | .search__input:-ms-input-placeholder { 583 | color: var(--greyLight-3); 584 | } 585 | .search__input::-ms-input-placeholder { 586 | color: var(--greyLight-3); 587 | } 588 | .search__input::placeholder { 589 | color: var(--greyLight-3); 590 | } 591 | .search__input:focus { 592 | outline: none; 593 | box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.1), 2px 2px 6px rgba(0, 0, 0, 0.8); 594 | 595 | } 596 | .search__input:focus + .search__icon { 597 | color: var(--primary); 598 | } 599 | .search__icon { 600 | height: 2rem; 601 | position: absolute; 602 | font-size: 2rem; 603 | padding: 0 1rem; 604 | display: -webkit-box; 605 | display: flex; 606 | color: #ff0047; 607 | -webkit-transition: .3s ease; 608 | transition: .3s ease; 609 | } 610 | 611 | /* SEGMENTED-CONTROL */ 612 | .segmented-control { 613 | grid-column: 3 / 4; 614 | grid-row: 1 / 2; 615 | width: 20.4rem; 616 | height: 4rem; 617 | box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.1), 2px 2px 6px rgba(0, 0, 0, 0.8); 618 | border-radius: 1rem; 619 | display: -webkit-box; 620 | display: flex; 621 | -webkit-box-align: center; 622 | align-items: center; 623 | position: relative; 624 | } 625 | .segmented-control input { 626 | display: none; 627 | } 628 | .segmented-control > input:checked + label { 629 | -webkit-transition: all .5s ease; 630 | transition: all .5s ease; 631 | color: #ff0047; 632 | } 633 | .segmented-control__1, .segmented-control__2, .segmented-control__3 { 634 | width: 6.8rem; 635 | height: 3.6rem; 636 | font-size: 1.4rem; 637 | display: -webkit-box; 638 | display: flex; 639 | -webkit-box-pack: center; 640 | justify-content: center; 641 | -webkit-box-align: center; 642 | align-items: center; 643 | cursor: pointer; 644 | color: var(--greyDark); 645 | -webkit-transition: all .5s ease; 646 | transition: all .5s ease; 647 | } 648 | .segmented-control__1:hover, .segmented-control__2:hover, .segmented-control__3:hover { 649 | color: #ff0047; 650 | } 651 | .segmented-control__color { 652 | position: absolute; 653 | height: 3.4rem; 654 | width: 6.2rem; 655 | margin-left: .3rem; 656 | border-radius: .8rem; 657 | box-shadow:inset -2px -2px 6px rgba(255, 255, 255, 0.1),inset 2px 2px 6px rgba(0, 0, 0, 0.8); 658 | pointer-events: none; 659 | } 660 | 661 | #tab-1:checked ~ .segmented-control__color { 662 | -webkit-transform: translateX(0); 663 | transform: translateX(0); 664 | -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 665 | transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 666 | transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 667 | transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 668 | } 669 | 670 | #tab-2:checked ~ .segmented-control__color { 671 | -webkit-transform: translateX(6.8rem); 672 | transform: translateX(6.8rem); 673 | -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 674 | transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 675 | transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 676 | transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 677 | } 678 | 679 | #tab-3:checked ~ .segmented-control__color { 680 | -webkit-transform: translateX(13.6rem); 681 | transform: translateX(13.6rem); 682 | -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 683 | transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 684 | transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 685 | transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 686 | } 687 | 688 | /* ICONS */ 689 | .icon { 690 | grid-column: 3 / 4; 691 | grid-row: 4 / 5; 692 | display: -webkit-box; 693 | display: flex; 694 | -webkit-box-pack: justify; 695 | justify-content: space-between; 696 | } 697 | .icon__account, .icon__home, .icon__settings { 698 | width: 4rem; 699 | height: 4rem; 700 | border-radius: 50%; 701 | box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.1), 2px 2px 6px rgba(0, 0, 0, 0.8); 702 | display: -webkit-box; 703 | display: flex; 704 | -webkit-box-pack: center; 705 | justify-content: center; 706 | -webkit-box-align: center; 707 | align-items: center; 708 | font-size: 2rem; 709 | cursor: pointer; 710 | color: var(--greyDark); 711 | -webkit-transition: all .5s ease; 712 | transition: all .5s ease; 713 | } 714 | .icon__account:active, .icon__home:active, .icon__settings:active { 715 | box-shadow:inset -2px -2px 6px rgba(255, 255, 255, 0.1),inset 2px 2px 6px rgba(0, 0, 0, 0.8); 716 | color: #ff0047; 717 | } 718 | .icon__account:hover, .icon__home:hover, .icon__settings:hover { 719 | color: #ff0047; 720 | } 721 | 722 | /* RANGE-SLIDER */ 723 | .slider { 724 | grid-column: 3 / 4; 725 | grid-row: 5 / 6; 726 | align-self: center; 727 | display: -webkit-box; 728 | display: flex; 729 | -webkit-box-orient: vertical; 730 | -webkit-box-direction: normal; 731 | flex-direction: column; 732 | } 733 | .slider__box { 734 | width: 100%; 735 | height: 1rem; 736 | cursor: pointer; 737 | box-shadow:inset -2px -2px 6px rgba(255, 255, 255, 0.1),inset 2px 2px 6px rgba(0, 0, 0, 0.8); 738 | border-radius: 1rem; 739 | position: relative; 740 | display: -webkit-box; 741 | display: flex; 742 | -webkit-box-pack: center; 743 | justify-content: center; 744 | -webkit-box-align: center; 745 | align-items: center; 746 | } 747 | .slider__btn { 748 | width: 2rem; 749 | height: 2rem; 750 | border-radius: 50%; 751 | background: #131419; 752 | position: absolute; 753 | box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.1), 2px 2px 6px rgba(0, 0, 0, 0.8); 754 | z-index: 200; 755 | display: -webkit-box; 756 | display: flex; 757 | -webkit-box-pack: center; 758 | justify-content: center; 759 | -webkit-box-align: center; 760 | align-items: center; 761 | } 762 | .slider__btn:hover ~ .slider__tooltip { 763 | opacity: 1; 764 | } 765 | .slider__btn::after { 766 | content: ''; 767 | position: absolute; 768 | width: .8rem; 769 | height: .8rem; 770 | border-radius: 50%; 771 | box-shadow:inset -2px -2px 6px rgba(255, 255, 255, 0.1),inset 2px 2px 6px rgba(0, 0, 0, 0.8); 772 | 773 | } 774 | .slider__color { 775 | height: 100%; 776 | width: 50%; 777 | position: absolute; 778 | left: 0; 779 | z-index: 100; 780 | border-radius: inherit; 781 | 782 | background: #ff0047; 783 | } 784 | .slider__tooltip { 785 | position: absolute; 786 | top: 2.6rem; 787 | height: 2.5rem; 788 | width: 3rem; 789 | border-radius: .6rem; 790 | display: -webkit-box; 791 | display: flex; 792 | -webkit-box-pack: center; 793 | justify-content: center; 794 | -webkit-box-align: center; 795 | align-items: center; 796 | font-size: 1.2rem; 797 | color: #ff0047; 798 | box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.1), 2px 2px 6px rgba(0, 0, 0, 0.8); 799 | opacity: 0; 800 | -webkit-transition: opacity .3s ease; 801 | transition: opacity .3s ease; 802 | } 803 | 804 | @-webkit-keyframes waves { 805 | 0% { 806 | -webkit-transform: scale(1); 807 | transform: scale(1); 808 | opacity: 1; 809 | } 810 | 50% { 811 | opacity: 1; 812 | } 813 | 100% { 814 | -webkit-transform: scale(2); 815 | transform: scale(2); 816 | opacity: 0; 817 | } 818 | } 819 | 820 | @keyframes waves { 821 | 0% { 822 | -webkit-transform: scale(1); 823 | transform: scale(1); 824 | opacity: 1; 825 | } 826 | 50% { 827 | opacity: 1; 828 | } 829 | 100% { 830 | -webkit-transform: scale(2); 831 | transform: scale(2); 832 | opacity: 0; 833 | } 834 | } 835 | 836 | -------------------------------------------------------------------------------- /Neumorphism Element/css/CSS_DS.css: -------------------------------------------------------------------------------- 1 | :root { 2 | 3 | --primary-light: #00fff1; 4 | --primary: #00fff1; 5 | --primary-dark: #00fff1; 6 | --white: #FFFFFF; 7 | --greyLight-1: #6f6f6f; 8 | --greyLight-2: #6f6f6f; 9 | --greyLight-3:#6f6f6f; 10 | --greyDark: #6f6f6f; 11 | } 12 | 13 | *, *::before, *::after { 14 | margin: 0; 15 | padding: 0; 16 | box-sizing: inherit; 17 | } 18 | 19 | html { 20 | box-sizing: border-box; 21 | font-size: 62.5%; 22 | overflow-y: scroll; 23 | background: #091921; 24 | } 25 | @media screen and (min-width: 900px) { 26 | html { 27 | font-size: 75%; 28 | } 29 | } 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | .colorPicker 46 | { 47 | background:#091921; 48 | box-shadow: -2px -2px 4px rgba(255, 255, 255, 0.068), 2px 2px 6px rgba(0, 0, 0, 0.8); 49 | 50 | } 51 | 52 | .colorPicker i 53 | { 54 | 55 | color: #00fff1; 56 | } 57 | 58 | .colors { 59 | 60 | background: #091921; 61 | box-shadow: -2px -2px 4px rgba(255, 255, 255, 0.068), 2px 2px 6px rgba(0, 0, 0, 0.8); 62 | 63 | } 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | .container { 76 | min-height: 100vh; 77 | display: -webkit-box; 78 | display: flex; 79 | -webkit-box-pack: center; 80 | justify-content: center; 81 | -webkit-box-align: center; 82 | align-items: center; 83 | font-family: 'Poppins', sans-serif; 84 | background: #091921; 85 | } 86 | 87 | .components { 88 | width: 80rem; 89 | height: 45rem; 90 | border-radius: 3rem; 91 | box-shadow: -2px -2px 4px rgba(255, 255, 255, 0.068), 2px 2px 6px rgba(0, 0, 0, 0.8); 92 | padding: 4rem; 93 | display: grid; 94 | grid-template-columns: 17.6rem 19rem 20.4rem; 95 | grid-template-rows: repeat(autofit, -webkit-min-content); 96 | grid-template-rows: repeat(autofit, min-content); 97 | grid-column-gap: 5rem; 98 | grid-row-gap: 2.5rem; 99 | -webkit-box-align: center; 100 | align-items: center; 101 | } 102 | 103 | /* SWITCH */ 104 | .switch { 105 | grid-column: 1 / 2; 106 | display: grid; 107 | grid-template-columns: repeat(2, -webkit-min-content); 108 | grid-template-columns: repeat(2, min-content); 109 | grid-gap: 3rem; 110 | justify-self: center; 111 | } 112 | .switch input { 113 | display: none; 114 | } 115 | .switch__1, .switch__2 { 116 | width: 6rem; 117 | } 118 | .switch__1 label, .switch__2 label { 119 | display: -webkit-box; 120 | display: flex; 121 | -webkit-box-align: center; 122 | align-items: center; 123 | width: 100%; 124 | height: 3rem; 125 | box-shadow: -2px -2px 4px rgba(255, 255, 255, 0.068), 2px 2px 6px rgba(0, 0, 0, 0.8); 126 | background: rgba(255, 255, 255, 0); 127 | position: relative; 128 | cursor: pointer; 129 | border-radius: 1.6rem; 130 | } 131 | .switch__1 label::after, .switch__2 label::after { 132 | content: ""; 133 | position: absolute; 134 | left: .4rem; 135 | width: 2.1rem; 136 | height: 2.1rem; 137 | border-radius: 50%; 138 | background: #00fff1; 139 | -webkit-transition: all .4s ease; 140 | transition: all .4s ease; 141 | } 142 | .switch__1 label::before, .switch__2 label::before { 143 | content: ''; 144 | width: 100%; 145 | height: 100%; 146 | border-radius: inherit; 147 | background: linear-gradient(330deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%); 148 | opacity: 0; 149 | -webkit-transition: all .4s ease; 150 | transition: all .4s ease; 151 | } 152 | .switch input:checked ~ label::before { 153 | opacity: 1; 154 | } 155 | .switch input:checked ~ label::after { 156 | left: 57%; 157 | background:#091921; 158 | } 159 | 160 | /* CHECKBOX */ 161 | .checkbox { 162 | grid-column: 1 / 2; 163 | display: grid; 164 | grid-template-columns: repeat(2, 6rem); 165 | grid-gap: 3rem; 166 | -webkit-box-pack: center; 167 | justify-content: center; 168 | } 169 | .checkbox input { 170 | display: none; 171 | } 172 | .checkbox__1, .checkbox__2 { 173 | width: 6rem; 174 | display: -webkit-box; 175 | display: flex; 176 | -webkit-box-pack: center; 177 | justify-content: center; 178 | } 179 | .checkbox__1 label, .checkbox__2 label { 180 | box-shadow: -2px -2px 4px rgba(255, 255, 255, 0.068), 2px 2px 6px rgba(0, 0, 0, 0.8); 181 | cursor: pointer; 182 | position: relative; 183 | display: -webkit-box; 184 | display: flex; 185 | -webkit-box-pack: center; 186 | justify-content: center; 187 | -webkit-box-align: center; 188 | align-items: center; 189 | border-radius: .5rem; 190 | width: 2.8rem; 191 | height: 2.8rem; 192 | } 193 | 194 | .checkbox__1 label i, .checkbox__2 label i { 195 | font-size: 1.8rem; 196 | font-weight: 700; 197 | color: var(--greyDark); 198 | -webkit-transition: .3s ease; 199 | transition: .3s ease; 200 | } 201 | .checkbox__1 input:checked ~ label, .checkbox__2 input:checked ~ label { 202 | box-shadow:inset -2px -2px 4px rgba(255, 255, 255, 0.068),inset 2px 2px 6px rgba(0, 0, 0, 0.8); 203 | } 204 | .checkbox__1 input:checked ~ label i, .checkbox__2 input:checked ~ label i { 205 | color: var(--primary); 206 | } 207 | 208 | /* RADIO */ 209 | .radio { 210 | grid-column: 1 / 2; 211 | display: grid; 212 | grid-template-columns: repeat(2, 1fr); 213 | justify-items: center; 214 | } 215 | .radio input { 216 | display: none; 217 | } 218 | .radio__1 input:checked ~ label, .radio__2 input:checked ~ label { 219 | box-shadow:inset -2px -2px 4px rgba(255, 255, 255, 0.068),inset 2px 2px 6px rgba(0, 0, 0, 0.8);; 220 | } 221 | .radio__1 input:checked ~ label::after, .radio__2 input:checked ~ label::after { 222 | background: var(--primary); 223 | } 224 | .radio__1 label, .radio__2 label { 225 | box-shadow: -2px -2px 4px rgba(255, 255, 255, 0.068), 2px 2px 6px rgba(0, 0, 0, 0.8); 226 | position: relative; 227 | display: -webkit-box; 228 | display: flex; 229 | -webkit-box-pack: center; 230 | justify-content: center; 231 | -webkit-box-align: center; 232 | align-items: center; 233 | cursor: pointer; 234 | width: 2.8rem; 235 | height: 2.8rem; 236 | border-radius: 50%; 237 | } 238 | 239 | .radio__1 label::after, .radio__2 label::after { 240 | content: ""; 241 | position: absolute; 242 | width: 1.4rem; 243 | height: 1.4rem; 244 | background: var(--greyDark); 245 | border-radius: 50%; 246 | -webkit-transition: 0.3s ease; 247 | transition: 0.3s ease; 248 | } 249 | 250 | /* BUTTONS */ 251 | .btn { 252 | width: 15rem; 253 | height: 4rem; 254 | border-radius: 1rem; 255 | box-shadow:-2px -2px 4px rgba(255, 255, 255, 0.068), 2px 2px 6px rgba(0, 0, 0, 0.8); 256 | justify-self: center; 257 | display: -webkit-box; 258 | display: flex; 259 | -webkit-box-align: center; 260 | align-items: center; 261 | -webkit-box-pack: center; 262 | justify-content: center; 263 | cursor: pointer; 264 | -webkit-transition: .3s ease; 265 | transition: .3s ease; 266 | } 267 | .btn__primary { 268 | grid-column: 1 / 2; 269 | grid-row: 4 / 5; 270 | background: var(--primary); 271 | box-shadow: -2px -2px 4px rgba(255, 255, 255, 0.068),2px 2px 6px rgba(0, 0, 0, 0.8); 272 | color: #091921; 273 | } 274 | .btn__primary:hover { 275 | color: var(--white); 276 | } 277 | .btn__primary:active { 278 | box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.068),inset 2px 2px 6px rgba(0, 0, 0, 0.8); 279 | } 280 | .btn__secondary { 281 | grid-column: 1 / 2; 282 | grid-row: 5 / 6; 283 | color: var(--greyDark); 284 | } 285 | .btn__secondary:hover { 286 | color: var(--primary); 287 | } 288 | .btn__secondary:active { 289 | box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.068),inset 2px 2px 6px rgba(0, 0, 0, 0.8); 290 | } 291 | .btn p { 292 | font-size: 1.6rem; 293 | } 294 | 295 | /* CLOCK */ 296 | .clock { 297 | grid-column: 2 / 3; 298 | grid-row: 1 / 3; 299 | width: 12rem; 300 | height: 12rem; 301 | justify-self: center; 302 | box-shadow: -2px -2px 4px rgba(255, 255, 255, 0.068),2px 2px 6px rgba(0, 0, 0, 0.8); 303 | border-radius: 50%; 304 | display: -webkit-box; 305 | display: flex; 306 | -webkit-box-pack: center; 307 | justify-content: center; 308 | -webkit-box-align: center; 309 | align-items: center; 310 | position: relative; 311 | } 312 | .clock .hand { 313 | position: absolute; 314 | -webkit-transform-origin: bottom; 315 | transform-origin: bottom; 316 | bottom: 6rem; 317 | border-radius: .2rem; 318 | z-index: 200; 319 | } 320 | .clock .hours { 321 | width: .4rem; 322 | height: 3.2rem; 323 | background: var(--greyLight-3); 324 | } 325 | .clock .minutes { 326 | width: .4rem; 327 | height: 4.6rem; 328 | background: var(--greyDark); 329 | } 330 | .clock .seconds { 331 | width: .2rem; 332 | height: 5.2rem; 333 | background: var(--primary); 334 | } 335 | .clock .point { 336 | position: absolute; 337 | width: .8rem; 338 | height: .8rem; 339 | border-radius: 50%; 340 | background: var(--primary); 341 | z-index: 300; 342 | } 343 | .clock .marker { 344 | width: 95%; 345 | height: 95%; 346 | border-radius: 50%; 347 | position: relative; 348 | box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.068),inset 2px 2px 6px rgba(0, 0, 0, 0.8); 349 | } 350 | .clock .marker::after { 351 | content: ''; 352 | width: 60%; 353 | height: 60%; 354 | position: absolute; 355 | box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.068),inset 2px 2px 6px rgba(0, 0, 0, 0.8); 356 | border-radius: 50%; 357 | top: 20%; 358 | left: 20%; 359 | -webkit-filter: blur(1px); 360 | filter: blur(1px); 361 | } 362 | .clock .marker__1, .clock .marker__2, .clock .marker__3, .clock .marker__4 { 363 | position: absolute; 364 | border-radius: .1rem; 365 | box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.068),inset 2px 2px 6px rgba(0, 0, 0, 0.8); 366 | } 367 | .clock .marker__1, .clock .marker__2 { 368 | width: .2rem; 369 | height: .6rem; 370 | left: 5.6rem; 371 | } 372 | .clock .marker__3, .clock .marker__4 { 373 | width: .6rem; 374 | height: .2rem; 375 | top: 5.6rem; 376 | } 377 | .clock .marker__1 { 378 | top: 2%; 379 | } 380 | .clock .marker__2 { 381 | top: 98%; 382 | -webkit-transform: translateY(-0.6rem); 383 | transform: translateY(-0.6rem); 384 | } 385 | .clock .marker__3 { 386 | left: 2%; 387 | } 388 | .clock .marker__4 { 389 | left: 98%; 390 | -webkit-transform: translateX(-0.6rem); 391 | transform: translateX(-0.6rem); 392 | } 393 | 394 | /* CHIP */ 395 | .chip { 396 | grid-column: 2 / 3; 397 | grid-row: 3 / 4; 398 | justify-self: center; 399 | width: 17rem; 400 | height: 4rem; 401 | border-radius: 1rem; 402 | box-shadow:-2px -2px 4px rgba(255, 255, 255, 0.068),2px 2px 6px rgba(0, 0, 0, 0.8); 403 | display: -webkit-box; 404 | display: flex; 405 | -webkit-box-pack: justify; 406 | justify-content: space-between; 407 | -webkit-box-align: center; 408 | align-items: center; 409 | } 410 | .chip__icon { 411 | width: 3rem; 412 | height: 3rem; 413 | border-radius: 1rem; 414 | margin: 0 0 0 .2rem; 415 | display: -webkit-box; 416 | display: flex; 417 | -webkit-box-pack: center; 418 | justify-content: center; 419 | -webkit-box-align: center; 420 | align-items: center; 421 | font-size: 1.8rem; 422 | color: var(--primary); 423 | } 424 | .chip p { 425 | font-size: .9rem; 426 | margin-left: -1.8rem; 427 | color: var(--greyDark); 428 | } 429 | .chip__close { 430 | width: 1.6rem; 431 | height: 1.6rem; 432 | margin: 0 .5rem; 433 | display: -webkit-box; 434 | display: flex; 435 | font-size: 1.6rem; 436 | color: var(--greyLight-3); 437 | cursor: pointer; 438 | } 439 | 440 | /* PLAY BUTTON */ 441 | .circle { 442 | grid-column: 2 / 3; 443 | grid-row: 4 / 6; 444 | width: 9rem; 445 | height: 100%; 446 | justify-self: center; 447 | border-radius: 1rem; 448 | display: grid; 449 | grid-template-rows: 1fr; 450 | justify-items: center; 451 | -webkit-box-align: center; 452 | align-items: center; 453 | } 454 | .circle__btn { 455 | grid-row: 1 / 2; 456 | grid-column: 1 / 2; 457 | width: 6rem; 458 | height: 6rem; 459 | display: -webkit-box; 460 | display: flex; 461 | margin: .6rem; 462 | -webkit-box-pack: center; 463 | justify-content: center; 464 | -webkit-box-align: center; 465 | align-items: center; 466 | border-radius: 50%; 467 | font-size: 3.2rem; 468 | color: var(--primary); 469 | z-index: 300; 470 | background:#091921; 471 | box-shadow:-2px -2px 4px rgba(255, 255, 255, 0.068),2px 2px 6px rgba(0, 0, 0, 0.8); 472 | cursor: pointer; 473 | position: relative; 474 | } 475 | .circle__btn.shadow { 476 | box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.068),inset 2px 2px 6px rgba(0, 0, 0, 0.8); 477 | } 478 | .circle__btn .play { 479 | position: absolute; 480 | opacity: 0; 481 | -webkit-transition: all .2s linear; 482 | transition: all .2s linear; 483 | } 484 | .circle__btn .play.visibility { 485 | opacity: 1; 486 | } 487 | .circle__btn .pause { 488 | position: absolute; 489 | -webkit-transition: all .2s linear; 490 | transition: all .2s linear; 491 | } 492 | .circle__btn .pause.visibility { 493 | opacity: 0; 494 | } 495 | .circle__back-1, .circle__back-2 { 496 | grid-row: 1 / 2; 497 | grid-column: 1 / 2; 498 | width: 6rem; 499 | height: 6rem; 500 | border-radius: 50%; 501 | -webkit-filter: blur(1px); 502 | filter: blur(1px); 503 | z-index: 100; 504 | } 505 | .circle__back-1 { 506 | box-shadow: -2px -2px 4px rgba(255, 255, 255, 0.068),2px 2px 6px rgba(0, 0, 0, 0.8); 507 | 508 | -webkit-animation: waves 4s linear infinite; 509 | animation: waves 4s linear infinite; 510 | } 511 | .circle__back-1.paused { 512 | -webkit-animation-play-state: paused; 513 | animation-play-state: paused; 514 | } 515 | .circle__back-2 { 516 | box-shadow: -2px -2px 4px rgba(255, 255, 255, 0.068),2px 2px 6px rgba(0, 0, 0, 0.8); 517 | -webkit-animation: waves 4s linear 2s infinite; 518 | animation: waves 4s linear 2s infinite; 519 | } 520 | .circle__back-2.paused { 521 | -webkit-animation-play-state: paused; 522 | animation-play-state: paused; 523 | } 524 | 525 | /* FORM */ 526 | .form { 527 | grid-column: 3 / 4; 528 | grid-row: 3 / 4; 529 | } 530 | .form__input { 531 | width: 20.4rem; 532 | height: 4rem; 533 | border: none; 534 | border-radius: 1rem; 535 | font-size: 1.4rem; 536 | padding-left: 1.4rem; 537 | box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.068),inset 2px 2px 6px rgba(0, 0, 0, 0.8); 538 | background: none; 539 | font-family: inherit; 540 | color: var(--greyDark); 541 | } 542 | .form__input::-webkit-input-placeholder { 543 | color: var(--greyLight-3); 544 | } 545 | .form__input::-moz-placeholder { 546 | color: var(--greyLight-3); 547 | } 548 | .form__input:-ms-input-placeholder { 549 | color: var(--greyLight-3); 550 | } 551 | .form__input::-ms-input-placeholder { 552 | color: var(--greyLight-3); 553 | } 554 | .form__input::placeholder { 555 | color: var(--greyLight-3); 556 | } 557 | .form__input:focus { 558 | outline: none; 559 | box-shadow:-2px -2px 4px rgba(255, 255, 255, 0.068),2px 2px 6px rgba(0, 0, 0, 0.8); 560 | } 561 | 562 | /* SEARCH */ 563 | .search { 564 | grid-column: 3 / 4; 565 | grid-row: 2 / 3; 566 | position: relative; 567 | display: -webkit-box; 568 | display: flex; 569 | -webkit-box-align: center; 570 | align-items: center; 571 | } 572 | .search__input { 573 | width: 20.4rem; 574 | height: 4rem; 575 | border: none; 576 | border-radius: 1rem; 577 | font-size: 1.4rem; 578 | padding-left: 3.8rem; 579 | box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.068),inset 2px 2px 6px rgba(0, 0, 0, 0.8); 580 | background: none; 581 | font-family: inherit; 582 | color: var(--greyDark); 583 | } 584 | .search__input::-webkit-input-placeholder { 585 | color: var(--greyLight-3); 586 | } 587 | .search__input::-moz-placeholder { 588 | color: var(--greyLight-3); 589 | } 590 | .search__input:-ms-input-placeholder { 591 | color: var(--greyLight-3); 592 | } 593 | .search__input::-ms-input-placeholder { 594 | color: var(--greyLight-3); 595 | } 596 | .search__input::placeholder { 597 | color: var(--greyLight-3); 598 | } 599 | .search__input:focus { 600 | outline: none; 601 | box-shadow:-2px -2px 4px rgba(255, 255, 255, 0.068),2px 2px 6px rgba(0, 0, 0, 0.8); 602 | } 603 | .search__input:focus + .search__icon { 604 | color: var(--primary); 605 | } 606 | .search__icon { 607 | height: 2rem; 608 | position: absolute; 609 | font-size: 2rem; 610 | padding: 0 1rem; 611 | display: -webkit-box; 612 | display: flex; 613 | color: #00fff1; 614 | -webkit-transition: .3s ease; 615 | transition: .3s ease; 616 | } 617 | 618 | /* SEGMENTED-CONTROL */ 619 | .segmented-control { 620 | grid-column: 3 / 4; 621 | grid-row: 1 / 2; 622 | width: 20.4rem; 623 | height: 4rem; 624 | box-shadow: -2px -2px 4px rgba(255, 255, 255, 0.068),2px 2px 6px rgba(0, 0, 0, 0.8); 625 | border-radius: 1rem; 626 | display: -webkit-box; 627 | display: flex; 628 | -webkit-box-align: center; 629 | align-items: center; 630 | position: relative; 631 | } 632 | .segmented-control input { 633 | display: none; 634 | } 635 | .segmented-control > input:checked + label { 636 | -webkit-transition: all .5s ease; 637 | transition: all .5s ease; 638 | color: var(--primary); 639 | } 640 | .segmented-control__1, .segmented-control__2, .segmented-control__3 { 641 | width: 6.8rem; 642 | height: 3.6rem; 643 | font-size: 1.4rem; 644 | display: -webkit-box; 645 | display: flex; 646 | -webkit-box-pack: center; 647 | justify-content: center; 648 | -webkit-box-align: center; 649 | align-items: center; 650 | cursor: pointer; 651 | color: var(--greyDark); 652 | -webkit-transition: all .5s ease; 653 | transition: all .5s ease; 654 | } 655 | .segmented-control__1:hover, .segmented-control__2:hover, .segmented-control__3:hover { 656 | color: var(--primary); 657 | } 658 | .segmented-control__color { 659 | position: absolute; 660 | height: 3.4rem; 661 | width: 6.2rem; 662 | margin-left: .3rem; 663 | border-radius: .8rem; 664 | box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.068),inset 2px 2px 6px rgba(0, 0, 0, 0.8); 665 | pointer-events: none; 666 | } 667 | 668 | #tab-1:checked ~ .segmented-control__color { 669 | -webkit-transform: translateX(0); 670 | transform: translateX(0); 671 | -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 672 | transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 673 | transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 674 | transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 675 | } 676 | 677 | #tab-2:checked ~ .segmented-control__color { 678 | -webkit-transform: translateX(6.8rem); 679 | transform: translateX(6.8rem); 680 | -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 681 | transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 682 | transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 683 | transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 684 | } 685 | 686 | #tab-3:checked ~ .segmented-control__color { 687 | -webkit-transform: translateX(13.6rem); 688 | transform: translateX(13.6rem); 689 | -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 690 | transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 691 | transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 692 | transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 693 | } 694 | 695 | /* ICONS */ 696 | .icon { 697 | grid-column: 3 / 4; 698 | grid-row: 4 / 5; 699 | display: -webkit-box; 700 | display: flex; 701 | -webkit-box-pack: justify; 702 | justify-content: space-between; 703 | } 704 | .icon__account, .icon__home, .icon__settings { 705 | width: 4rem; 706 | height: 4rem; 707 | border-radius: 50%; 708 | box-shadow: -2px -2px 4px rgba(255, 255, 255, 0.068),2px 2px 6px rgba(0, 0, 0, 0.8); 709 | display: -webkit-box; 710 | display: flex; 711 | -webkit-box-pack: center; 712 | justify-content: center; 713 | -webkit-box-align: center; 714 | align-items: center; 715 | font-size: 2rem; 716 | cursor: pointer; 717 | color: var(--greyDark); 718 | -webkit-transition: all .5s ease; 719 | transition: all .5s ease; 720 | } 721 | .icon__account:active, .icon__home:active, .icon__settings:active { 722 | box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.068),inset 2px 2px 6px rgba(0, 0, 0, 0.8); 723 | color: var(--primary); 724 | } 725 | .icon__account:hover, .icon__home:hover, .icon__settings:hover { 726 | color: var(--primary); 727 | } 728 | 729 | /* RANGE-SLIDER */ 730 | .slider { 731 | grid-column: 3 / 4; 732 | grid-row: 5 / 6; 733 | align-self: center; 734 | display: -webkit-box; 735 | display: flex; 736 | -webkit-box-orient: vertical; 737 | -webkit-box-direction: normal; 738 | flex-direction: column; 739 | } 740 | .slider__box { 741 | width: 100%; 742 | height: 1rem; 743 | cursor: pointer; 744 | box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.068),inset 2px 2px 6px rgba(0, 0, 0, 0.8); 745 | border-radius: 1rem; 746 | position: relative; 747 | display: -webkit-box; 748 | display: flex; 749 | -webkit-box-pack: center; 750 | justify-content: center; 751 | -webkit-box-align: center; 752 | align-items: center; 753 | } 754 | .slider__btn { 755 | width: 2rem; 756 | height: 2rem; 757 | border-radius: 50%; 758 | background: #091921; 759 | position: absolute; 760 | box-shadow: -2px -2px 4px rgba(255, 255, 255, 0.068),2px 2px 6px rgba(0, 0, 0, 0.8); 761 | z-index: 200; 762 | display: -webkit-box; 763 | display: flex; 764 | -webkit-box-pack: center; 765 | justify-content: center; 766 | -webkit-box-align: center; 767 | align-items: center; 768 | } 769 | .slider__btn:hover ~ .slider__tooltip { 770 | opacity: 1; 771 | } 772 | .slider__btn::after { 773 | content: ''; 774 | position: absolute; 775 | width: .8rem; 776 | height: .8rem; 777 | border-radius: 50%; 778 | box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.068),inset 2px 2px 6px rgba(0, 0, 0, 0.8); 779 | } 780 | .slider__color { 781 | height: 100%; 782 | width: 50%; 783 | position: absolute; 784 | left: 0; 785 | z-index: 100; 786 | border-radius: inherit; 787 | background: var(--primary); 788 | background: linear-gradient(-1deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%); 789 | } 790 | .slider__tooltip { 791 | position: absolute; 792 | top: 2.6rem; 793 | height: 2.5rem; 794 | width: 3rem; 795 | border-radius: .6rem; 796 | display: -webkit-box; 797 | display: flex; 798 | -webkit-box-pack: center; 799 | justify-content: center; 800 | -webkit-box-align: center; 801 | align-items: center; 802 | font-size: 1.2rem; 803 | color: var(--primary); 804 | box-shadow: -2px -2px 4px rgba(255, 255, 255, 0.068),2px 2px 6px rgba(0, 0, 0, 0.8); 805 | opacity: 0; 806 | -webkit-transition: opacity .3s ease; 807 | transition: opacity .3s ease; 808 | } 809 | 810 | @-webkit-keyframes waves { 811 | 0% { 812 | -webkit-transform: scale(1); 813 | transform: scale(1); 814 | opacity: 1; 815 | } 816 | 50% { 817 | opacity: 1; 818 | } 819 | 100% { 820 | -webkit-transform: scale(2); 821 | transform: scale(2); 822 | opacity: 0; 823 | } 824 | } 825 | 826 | @keyframes waves { 827 | 0% { 828 | -webkit-transform: scale(1); 829 | transform: scale(1); 830 | opacity: 1; 831 | } 832 | 50% { 833 | opacity: 1; 834 | } 835 | 100% { 836 | -webkit-transform: scale(2); 837 | transform: scale(2); 838 | opacity: 0; 839 | } 840 | } 841 | 842 | -------------------------------------------------------------------------------- /Neumorphism Element/css/CSS_White.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-light: #8abdff; 3 | --primary: #6d5dfc; 4 | --primary-dark: #5b0eeb; 5 | --white: #FFFFFF; 6 | --greyLight-1: #E4EBF5; 7 | --greyLight-2: #c8d0e7; 8 | --greyLight-3: #bec8e4; 9 | --greyDark: #9baacf; 10 | } 11 | 12 | *, *::before, *::after { 13 | margin: 0; 14 | padding: 0; 15 | box-sizing: inherit; 16 | } 17 | 18 | html { 19 | box-sizing: border-box; 20 | font-size: 62.5%; 21 | overflow-y: scroll; 22 | background: var(--greyLight-1); 23 | } 24 | @media screen and (min-width: 900px) { 25 | html { 26 | font-size: 75%; 27 | } 28 | } 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | .colorPicker 46 | { 47 | background: #e4ebf5; 48 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white); 49 | 50 | } 51 | 52 | .colorPicker i 53 | { 54 | color: #6d5dfc; 55 | } 56 | 57 | .colors { 58 | 59 | background: #e4ebf5; 60 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white); 61 | } 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | .container { 71 | min-height: 100vh; 72 | display: -webkit-box; 73 | display: flex; 74 | -webkit-box-pack: center; 75 | justify-content: center; 76 | -webkit-box-align: center; 77 | align-items: center; 78 | font-family: 'Poppins', sans-serif; 79 | background: var(--greyLight-1); 80 | } 81 | 82 | .components { 83 | width: 80rem; 84 | height: 45rem; 85 | border-radius: 3rem; 86 | box-shadow: 0.8rem 0.8rem 1.4rem var(--greyLight-2), -0.2rem -0.2rem 1.8rem var(--white); 87 | padding: 4rem; 88 | display: grid; 89 | grid-template-columns: 17.6rem 19rem 20.4rem; 90 | grid-template-rows: repeat(autofit, -webkit-min-content); 91 | grid-template-rows: repeat(autofit, min-content); 92 | grid-column-gap: 5rem; 93 | grid-row-gap: 2.5rem; 94 | -webkit-box-align: center; 95 | align-items: center; 96 | } 97 | 98 | /* SWITCH */ 99 | .switch { 100 | grid-column: 1 / 2; 101 | display: grid; 102 | grid-template-columns: repeat(2, -webkit-min-content); 103 | grid-template-columns: repeat(2, min-content); 104 | grid-gap: 3rem; 105 | justify-self: center; 106 | } 107 | .switch input { 108 | display: none; 109 | } 110 | .switch__1, .switch__2 { 111 | width: 6rem; 112 | } 113 | .switch__1 label, .switch__2 label { 114 | display: -webkit-box; 115 | display: flex; 116 | -webkit-box-align: center; 117 | align-items: center; 118 | width: 100%; 119 | height: 3rem; 120 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white); 121 | background: rgba(255, 255, 255, 0); 122 | position: relative; 123 | cursor: pointer; 124 | border-radius: 1.6rem; 125 | } 126 | .switch__1 label::after, .switch__2 label::after { 127 | content: ""; 128 | position: absolute; 129 | left: .4rem; 130 | width: 2.1rem; 131 | height: 2.1rem; 132 | border-radius: 50%; 133 | background: var(--greyDark); 134 | -webkit-transition: all .4s ease; 135 | transition: all .4s ease; 136 | } 137 | .switch__1 label::before, .switch__2 label::before { 138 | content: ''; 139 | width: 100%; 140 | height: 100%; 141 | border-radius: inherit; 142 | background: linear-gradient(330deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%); 143 | opacity: 0; 144 | -webkit-transition: all .4s ease; 145 | transition: all .4s ease; 146 | } 147 | .switch input:checked ~ label::before { 148 | opacity: 1; 149 | } 150 | .switch input:checked ~ label::after { 151 | left: 57%; 152 | background: var(--greyLight-1); 153 | } 154 | 155 | /* CHECKBOX */ 156 | .checkbox { 157 | grid-column: 1 / 2; 158 | display: grid; 159 | grid-template-columns: repeat(2, 6rem); 160 | grid-gap: 3rem; 161 | -webkit-box-pack: center; 162 | justify-content: center; 163 | } 164 | .checkbox input { 165 | display: none; 166 | } 167 | .checkbox__1, .checkbox__2 { 168 | width: 6rem; 169 | display: -webkit-box; 170 | display: flex; 171 | -webkit-box-pack: center; 172 | justify-content: center; 173 | } 174 | .checkbox__1 label, .checkbox__2 label { 175 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white); 176 | cursor: pointer; 177 | position: relative; 178 | display: -webkit-box; 179 | display: flex; 180 | -webkit-box-pack: center; 181 | justify-content: center; 182 | -webkit-box-align: center; 183 | align-items: center; 184 | border-radius: .5rem; 185 | width: 2.8rem; 186 | height: 2.8rem; 187 | } 188 | 189 | .checkbox__1 label i, .checkbox__2 label i { 190 | font-size: 1.8rem; 191 | font-weight: 700; 192 | color: var(--greyDark); 193 | -webkit-transition: .3s ease; 194 | transition: .3s ease; 195 | } 196 | .checkbox__1 input:checked ~ label, .checkbox__2 input:checked ~ label { 197 | box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white); 198 | } 199 | .checkbox__1 input:checked ~ label i, .checkbox__2 input:checked ~ label i { 200 | color: var(--primary); 201 | } 202 | 203 | /* RADIO */ 204 | .radio { 205 | grid-column: 1 / 2; 206 | display: grid; 207 | grid-template-columns: repeat(2, 1fr); 208 | justify-items: center; 209 | } 210 | .radio input { 211 | display: none; 212 | } 213 | .radio__1 input:checked ~ label, .radio__2 input:checked ~ label { 214 | box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white); 215 | } 216 | .radio__1 input:checked ~ label::after, .radio__2 input:checked ~ label::after { 217 | background: var(--primary); 218 | } 219 | .radio__1 label, .radio__2 label { 220 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white); 221 | position: relative; 222 | display: -webkit-box; 223 | display: flex; 224 | -webkit-box-pack: center; 225 | justify-content: center; 226 | -webkit-box-align: center; 227 | align-items: center; 228 | cursor: pointer; 229 | width: 2.8rem; 230 | height: 2.8rem; 231 | border-radius: 50%; 232 | } 233 | 234 | .radio__1 label::after, .radio__2 label::after { 235 | content: ""; 236 | position: absolute; 237 | width: 1.4rem; 238 | height: 1.4rem; 239 | background: var(--greyDark); 240 | border-radius: 50%; 241 | -webkit-transition: 0.3s ease; 242 | transition: 0.3s ease; 243 | } 244 | 245 | /* BUTTONS */ 246 | .btn { 247 | width: 15rem; 248 | height: 4rem; 249 | border-radius: 1rem; 250 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white); 251 | justify-self: center; 252 | display: -webkit-box; 253 | display: flex; 254 | -webkit-box-align: center; 255 | align-items: center; 256 | -webkit-box-pack: center; 257 | justify-content: center; 258 | cursor: pointer; 259 | -webkit-transition: .3s ease; 260 | transition: .3s ease; 261 | } 262 | .btn__primary { 263 | grid-column: 1 / 2; 264 | grid-row: 4 / 5; 265 | background: var(--primary); 266 | box-shadow: inset 0.2rem 0.2rem 1rem var(--primary-light), inset -0.2rem -0.2rem 1rem var(--primary-dark), 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white); 267 | color: var(--greyLight-1); 268 | } 269 | .btn__primary:hover { 270 | color: var(--white); 271 | } 272 | .btn__primary:active { 273 | box-shadow: inset 0.2rem 0.2rem 1rem var(--primary-dark), inset -0.2rem -0.2rem 1rem var(--primary-light); 274 | } 275 | .btn__secondary { 276 | grid-column: 1 / 2; 277 | grid-row: 5 / 6; 278 | color: var(--greyDark); 279 | } 280 | .btn__secondary:hover { 281 | color: var(--primary); 282 | } 283 | .btn__secondary:active { 284 | box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white); 285 | } 286 | .btn p { 287 | font-size: 1.6rem; 288 | } 289 | 290 | /* CLOCK */ 291 | .clock { 292 | grid-column: 2 / 3; 293 | grid-row: 1 / 3; 294 | width: 12rem; 295 | height: 12rem; 296 | justify-self: center; 297 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white); 298 | border-radius: 50%; 299 | display: -webkit-box; 300 | display: flex; 301 | -webkit-box-pack: center; 302 | justify-content: center; 303 | -webkit-box-align: center; 304 | align-items: center; 305 | position: relative; 306 | } 307 | .clock .hand { 308 | position: absolute; 309 | -webkit-transform-origin: bottom; 310 | transform-origin: bottom; 311 | bottom: 6rem; 312 | border-radius: .2rem; 313 | z-index: 200; 314 | } 315 | .clock .hours { 316 | width: .4rem; 317 | height: 3.2rem; 318 | background: var(--greyLight-3); 319 | } 320 | .clock .minutes { 321 | width: .4rem; 322 | height: 4.6rem; 323 | background: var(--greyDark); 324 | } 325 | .clock .seconds { 326 | width: .2rem; 327 | height: 5.2rem; 328 | background: var(--primary); 329 | } 330 | .clock .point { 331 | position: absolute; 332 | width: .8rem; 333 | height: .8rem; 334 | border-radius: 50%; 335 | background: var(--primary); 336 | z-index: 300; 337 | } 338 | .clock .marker { 339 | width: 95%; 340 | height: 95%; 341 | border-radius: 50%; 342 | position: relative; 343 | box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white); 344 | } 345 | .clock .marker::after { 346 | content: ''; 347 | width: 60%; 348 | height: 60%; 349 | position: absolute; 350 | box-shadow: inset 1px 1px 1px var(--greyLight-2), inset -1px -1px 1px var(--white); 351 | border-radius: 50%; 352 | top: 20%; 353 | left: 20%; 354 | -webkit-filter: blur(1px); 355 | filter: blur(1px); 356 | } 357 | .clock .marker__1, .clock .marker__2, .clock .marker__3, .clock .marker__4 { 358 | position: absolute; 359 | border-radius: .1rem; 360 | box-shadow: inset 1px 1px 1px var(--greyLight-2), inset -1px -1px 1px var(--white); 361 | } 362 | .clock .marker__1, .clock .marker__2 { 363 | width: .2rem; 364 | height: .6rem; 365 | left: 5.6rem; 366 | } 367 | .clock .marker__3, .clock .marker__4 { 368 | width: .6rem; 369 | height: .2rem; 370 | top: 5.6rem; 371 | } 372 | .clock .marker__1 { 373 | top: 2%; 374 | } 375 | .clock .marker__2 { 376 | top: 98%; 377 | -webkit-transform: translateY(-0.6rem); 378 | transform: translateY(-0.6rem); 379 | } 380 | .clock .marker__3 { 381 | left: 2%; 382 | } 383 | .clock .marker__4 { 384 | left: 98%; 385 | -webkit-transform: translateX(-0.6rem); 386 | transform: translateX(-0.6rem); 387 | } 388 | 389 | /* CHIP */ 390 | .chip { 391 | grid-column: 2 / 3; 392 | grid-row: 3 / 4; 393 | justify-self: center; 394 | width: 17rem; 395 | height: 4rem; 396 | border-radius: 1rem; 397 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white); 398 | display: -webkit-box; 399 | display: flex; 400 | -webkit-box-pack: justify; 401 | justify-content: space-between; 402 | -webkit-box-align: center; 403 | align-items: center; 404 | } 405 | .chip__icon { 406 | width: 3rem; 407 | height: 3rem; 408 | border-radius: 1rem; 409 | margin: 0 0 0 .2rem; 410 | display: -webkit-box; 411 | display: flex; 412 | -webkit-box-pack: center; 413 | justify-content: center; 414 | -webkit-box-align: center; 415 | align-items: center; 416 | font-size: 1.8rem; 417 | color: var(--primary); 418 | } 419 | .chip p { 420 | font-size: .9rem; 421 | margin-left: -1.8rem; 422 | color: var(--greyDark); 423 | } 424 | .chip__close { 425 | width: 1.6rem; 426 | height: 1.6rem; 427 | margin: 0 .5rem; 428 | display: -webkit-box; 429 | display: flex; 430 | font-size: 1.6rem; 431 | color: var(--greyLight-3); 432 | cursor: pointer; 433 | } 434 | 435 | /* PLAY BUTTON */ 436 | .circle { 437 | grid-column: 2 / 3; 438 | grid-row: 4 / 6; 439 | width: 9rem; 440 | height: 100%; 441 | justify-self: center; 442 | border-radius: 1rem; 443 | display: grid; 444 | grid-template-rows: 1fr; 445 | justify-items: center; 446 | -webkit-box-align: center; 447 | align-items: center; 448 | } 449 | .circle__btn { 450 | grid-row: 1 / 2; 451 | grid-column: 1 / 2; 452 | width: 6rem; 453 | height: 6rem; 454 | display: -webkit-box; 455 | display: flex; 456 | margin: .6rem; 457 | -webkit-box-pack: center; 458 | justify-content: center; 459 | -webkit-box-align: center; 460 | align-items: center; 461 | border-radius: 50%; 462 | font-size: 3.2rem; 463 | color: var(--primary); 464 | z-index: 300; 465 | background: var(--greyLight-1); 466 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white); 467 | cursor: pointer; 468 | position: relative; 469 | } 470 | .circle__btn.shadow { 471 | box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white); 472 | } 473 | .circle__btn .play { 474 | position: absolute; 475 | opacity: 0; 476 | -webkit-transition: all .2s linear; 477 | transition: all .2s linear; 478 | } 479 | .circle__btn .play.visibility { 480 | opacity: 1; 481 | } 482 | .circle__btn .pause { 483 | position: absolute; 484 | -webkit-transition: all .2s linear; 485 | transition: all .2s linear; 486 | } 487 | .circle__btn .pause.visibility { 488 | opacity: 0; 489 | } 490 | .circle__back-1, .circle__back-2 { 491 | grid-row: 1 / 2; 492 | grid-column: 1 / 2; 493 | width: 6rem; 494 | height: 6rem; 495 | border-radius: 50%; 496 | -webkit-filter: blur(1px); 497 | filter: blur(1px); 498 | z-index: 100; 499 | } 500 | .circle__back-1 { 501 | box-shadow: 0.4rem 0.4rem 0.8rem var(--greyLight-2), -0.4rem -0.4rem 0.8rem var(--white); 502 | -webkit-animation: waves 4s linear infinite; 503 | animation: waves 4s linear infinite; 504 | } 505 | .circle__back-1.paused { 506 | -webkit-animation-play-state: paused; 507 | animation-play-state: paused; 508 | } 509 | .circle__back-2 { 510 | box-shadow: 0.4rem 0.4rem 0.8rem var(--greyLight-2), -0.4rem -0.4rem 0.8rem var(--white); 511 | -webkit-animation: waves 4s linear 2s infinite; 512 | animation: waves 4s linear 2s infinite; 513 | } 514 | .circle__back-2.paused { 515 | -webkit-animation-play-state: paused; 516 | animation-play-state: paused; 517 | } 518 | 519 | /* FORM */ 520 | .form { 521 | grid-column: 3 / 4; 522 | grid-row: 3 / 4; 523 | } 524 | .form__input { 525 | width: 20.4rem; 526 | height: 4rem; 527 | border: none; 528 | border-radius: 1rem; 529 | font-size: 1.4rem; 530 | padding-left: 1.4rem; 531 | box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white); 532 | background: none; 533 | font-family: inherit; 534 | color: var(--greyDark); 535 | } 536 | .form__input::-webkit-input-placeholder { 537 | color: var(--greyLight-3); 538 | } 539 | .form__input::-moz-placeholder { 540 | color: var(--greyLight-3); 541 | } 542 | .form__input:-ms-input-placeholder { 543 | color: var(--greyLight-3); 544 | } 545 | .form__input::-ms-input-placeholder { 546 | color: var(--greyLight-3); 547 | } 548 | .form__input::placeholder { 549 | color: var(--greyLight-3); 550 | } 551 | .form__input:focus { 552 | outline: none; 553 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white); 554 | } 555 | 556 | /* SEARCH */ 557 | .search { 558 | grid-column: 3 / 4; 559 | grid-row: 2 / 3; 560 | position: relative; 561 | display: -webkit-box; 562 | display: flex; 563 | -webkit-box-align: center; 564 | align-items: center; 565 | } 566 | .search__input { 567 | width: 20.4rem; 568 | height: 4rem; 569 | border: none; 570 | border-radius: 1rem; 571 | font-size: 1.4rem; 572 | padding-left: 3.8rem; 573 | box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white); 574 | background: none; 575 | font-family: inherit; 576 | color: var(--greyDark); 577 | } 578 | .search__input::-webkit-input-placeholder { 579 | color: var(--greyLight-3); 580 | } 581 | .search__input::-moz-placeholder { 582 | color: var(--greyLight-3); 583 | } 584 | .search__input:-ms-input-placeholder { 585 | color: var(--greyLight-3); 586 | } 587 | .search__input::-ms-input-placeholder { 588 | color: var(--greyLight-3); 589 | } 590 | .search__input::placeholder { 591 | color: var(--greyLight-3); 592 | } 593 | .search__input:focus { 594 | outline: none; 595 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white); 596 | } 597 | .search__input:focus + .search__icon { 598 | color: var(--primary); 599 | } 600 | .search__icon { 601 | height: 2rem; 602 | position: absolute; 603 | font-size: 2rem; 604 | padding: 0 1rem; 605 | display: -webkit-box; 606 | display: flex; 607 | color: var(--greyDark); 608 | -webkit-transition: .3s ease; 609 | transition: .3s ease; 610 | } 611 | 612 | /* SEGMENTED-CONTROL */ 613 | .segmented-control { 614 | grid-column: 3 / 4; 615 | grid-row: 1 / 2; 616 | width: 20.4rem; 617 | height: 4rem; 618 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white); 619 | border-radius: 1rem; 620 | display: -webkit-box; 621 | display: flex; 622 | -webkit-box-align: center; 623 | align-items: center; 624 | position: relative; 625 | } 626 | .segmented-control input { 627 | display: none; 628 | } 629 | .segmented-control > input:checked + label { 630 | -webkit-transition: all .5s ease; 631 | transition: all .5s ease; 632 | color: var(--primary); 633 | } 634 | .segmented-control__1, .segmented-control__2, .segmented-control__3 { 635 | width: 6.8rem; 636 | height: 3.6rem; 637 | font-size: 1.4rem; 638 | display: -webkit-box; 639 | display: flex; 640 | -webkit-box-pack: center; 641 | justify-content: center; 642 | -webkit-box-align: center; 643 | align-items: center; 644 | cursor: pointer; 645 | color: var(--greyDark); 646 | -webkit-transition: all .5s ease; 647 | transition: all .5s ease; 648 | } 649 | .segmented-control__1:hover, .segmented-control__2:hover, .segmented-control__3:hover { 650 | color: var(--primary); 651 | } 652 | .segmented-control__color { 653 | position: absolute; 654 | height: 3.4rem; 655 | width: 6.2rem; 656 | margin-left: .3rem; 657 | border-radius: .8rem; 658 | box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white); 659 | pointer-events: none; 660 | } 661 | 662 | #tab-1:checked ~ .segmented-control__color { 663 | -webkit-transform: translateX(0); 664 | transform: translateX(0); 665 | -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 666 | transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 667 | transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 668 | transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 669 | } 670 | 671 | #tab-2:checked ~ .segmented-control__color { 672 | -webkit-transform: translateX(6.8rem); 673 | transform: translateX(6.8rem); 674 | -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 675 | transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 676 | transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 677 | transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 678 | } 679 | 680 | #tab-3:checked ~ .segmented-control__color { 681 | -webkit-transform: translateX(13.6rem); 682 | transform: translateX(13.6rem); 683 | -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 684 | transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 685 | transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 686 | transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 687 | } 688 | 689 | /* ICONS */ 690 | .icon { 691 | grid-column: 3 / 4; 692 | grid-row: 4 / 5; 693 | display: -webkit-box; 694 | display: flex; 695 | -webkit-box-pack: justify; 696 | justify-content: space-between; 697 | } 698 | .icon__account, .icon__home, .icon__settings { 699 | width: 4rem; 700 | height: 4rem; 701 | border-radius: 50%; 702 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white); 703 | display: -webkit-box; 704 | display: flex; 705 | -webkit-box-pack: center; 706 | justify-content: center; 707 | -webkit-box-align: center; 708 | align-items: center; 709 | font-size: 2rem; 710 | cursor: pointer; 711 | color: var(--greyDark); 712 | -webkit-transition: all .5s ease; 713 | transition: all .5s ease; 714 | } 715 | .icon__account:active, .icon__home:active, .icon__settings:active { 716 | box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white); 717 | color: var(--primary); 718 | } 719 | .icon__account:hover, .icon__home:hover, .icon__settings:hover { 720 | color: var(--primary); 721 | } 722 | 723 | /* RANGE-SLIDER */ 724 | .slider { 725 | grid-column: 3 / 4; 726 | grid-row: 5 / 6; 727 | align-self: center; 728 | display: -webkit-box; 729 | display: flex; 730 | -webkit-box-orient: vertical; 731 | -webkit-box-direction: normal; 732 | flex-direction: column; 733 | } 734 | .slider__box { 735 | width: 100%; 736 | height: 1rem; 737 | cursor: pointer; 738 | box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white); 739 | border-radius: 1rem; 740 | position: relative; 741 | display: -webkit-box; 742 | display: flex; 743 | -webkit-box-pack: center; 744 | justify-content: center; 745 | -webkit-box-align: center; 746 | align-items: center; 747 | } 748 | .slider__btn { 749 | width: 2rem; 750 | height: 2rem; 751 | border-radius: 50%; 752 | background: var(--white); 753 | position: absolute; 754 | box-shadow: 0px 0.1rem 0.3rem 0px var(--greyLight-3); 755 | z-index: 200; 756 | display: -webkit-box; 757 | display: flex; 758 | -webkit-box-pack: center; 759 | justify-content: center; 760 | -webkit-box-align: center; 761 | align-items: center; 762 | } 763 | .slider__btn:hover ~ .slider__tooltip { 764 | opacity: 1; 765 | } 766 | .slider__btn::after { 767 | content: ''; 768 | position: absolute; 769 | width: .8rem; 770 | height: .8rem; 771 | border-radius: 50%; 772 | box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white); 773 | } 774 | .slider__color { 775 | height: 100%; 776 | width: 50%; 777 | position: absolute; 778 | left: 0; 779 | z-index: 100; 780 | border-radius: inherit; 781 | background: var(--primary); 782 | background: linear-gradient(-1deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%); 783 | } 784 | .slider__tooltip { 785 | position: absolute; 786 | top: 2.6rem; 787 | height: 2.5rem; 788 | width: 3rem; 789 | border-radius: .6rem; 790 | display: -webkit-box; 791 | display: flex; 792 | -webkit-box-pack: center; 793 | justify-content: center; 794 | -webkit-box-align: center; 795 | align-items: center; 796 | font-size: 1.2rem; 797 | color: var(--primary); 798 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white); 799 | opacity: 0; 800 | -webkit-transition: opacity .3s ease; 801 | transition: opacity .3s ease; 802 | } 803 | 804 | @-webkit-keyframes waves { 805 | 0% { 806 | -webkit-transform: scale(1); 807 | transform: scale(1); 808 | opacity: 1; 809 | } 810 | 50% { 811 | opacity: 1; 812 | } 813 | 100% { 814 | -webkit-transform: scale(2); 815 | transform: scale(2); 816 | opacity: 0; 817 | } 818 | } 819 | 820 | @keyframes waves { 821 | 0% { 822 | -webkit-transform: scale(1); 823 | transform: scale(1); 824 | opacity: 1; 825 | } 826 | 50% { 827 | opacity: 1; 828 | } 829 | 100% { 830 | -webkit-transform: scale(2); 831 | transform: scale(2); 832 | opacity: 0; 833 | } 834 | } 835 | 836 | -------------------------------------------------------------------------------- /Neumorphism Element/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 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 | 112 |
113 |
114 | 115 | 117 |
118 |
119 | 120 |
121 |
122 | 123 | 124 |
125 | 126 |
127 | 128 | 129 |
130 |
131 | 132 |

Button

133 |

Button

134 | 135 |
136 |
137 |
138 |
139 |
140 |
141 | 142 | 143 | 144 | 145 |
146 |
147 | 148 |
149 |
150 |
151 |

Neumorphism Element

152 |
153 | 154 |
155 |
156 | 157 |
158 | 159 | 160 | 161 | 162 | 163 | 164 |
165 | 166 |
167 | 168 |
169 | 170 |
171 | 172 |
173 | 174 |
175 |
176 | 177 |
178 | 179 | 180 | 182 | 183 | 184 | 186 | 187 | 188 | 190 | 191 |
192 |
193 | 194 |
195 |
196 |
197 | 199 |
200 |
201 |
202 | 203 |
204 |
205 | 206 | 207 | 50% 208 |
209 |
210 |
211 | 212 |
213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 250 | 251 | 252 | -------------------------------------------------------------------------------- /Neumorphism Element/js/jquery-3.5.0.min.js: -------------------------------------------------------------------------------- 1 | /*! jQuery v3.5.0 | (c) JS Foundation and other contributors | jquery.org/license */ 2 | !function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,g=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType},x=function(e){return null!=e&&e===e.window},E=C.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.5.0",S=function(e,t){return new S.fn.init(e,t)};function p(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp(F),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+F),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\[\\da-fA-F]{1,6}"+M+"?|\\\\([^\\r\\n\\f])","g"),ne=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|56320))},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(p.childNodes),p.childNodes),t[p.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&(T(e),e=e||C,E)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!N[t+" "]&&(!v||!v.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&(U.test(t)||z.test(t))){(f=ee.test(t)&&ye(e.parentNode)||e)===e&&d.scope||((s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=S)),o=(l=h(t)).length;while(o--)l[o]=(s?"#"+s:":scope")+" "+xe(l[o]);c=l.join(",")}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){N(t,!0)}finally{s===S&&e.removeAttribute("id")}}}return g(t.replace($,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[S]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e.namespaceURI,n=(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:p;return r!=C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),p!=C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.scope=ce(function(e){return a.appendChild(e).appendChild(C.createElement("div")),"undefined"!=typeof e.querySelectorAll&&!e.querySelectorAll(":scope fieldset div").length}),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=S,!C.getElementsByName||!C.getElementsByName(S).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){var t;a.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+S+"-]").length||v.push("~="),(t=C.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||v.push("\\["+M+"*name"+M+"*="+M+"*(?:''|\"\")"),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+S+"+*").length||v.push(".#.+[+~]"),e.querySelectorAll("\\\f"),v.push("[\\r\\n\\f]")}),ce(function(e){e.innerHTML="";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",F)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),y=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},D=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)==(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e==C||e.ownerDocument==p&&y(p,e)?-1:t==C||t.ownerDocument==p&&y(p,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e==C?-1:t==C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]==p?-1:s[r]==p?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if(T(e),d.matchesSelector&&E&&!N[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){N(t,!0)}return 0":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=m[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&m(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function D(e,n,r){return m(n)?S.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?S.grep(e,function(e){return e===n!==r}):"string"!=typeof n?S.grep(e,function(e){return-1)[^>]*|#([\w-]+))$/;(S.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||j,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:q.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof S?t[0]:t,S.merge(this,S.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),N.test(r[1])&&S.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=E.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(S):S.makeArray(e,this)}).prototype=S.fn,j=S(E);var L=/^(?:parents|prev(?:Until|All))/,H={children:!0,contents:!0,next:!0,prev:!0};function O(e,t){while((e=e[t])&&1!==e.nodeType);return e}S.fn.extend({has:function(e){var t=S(e,this),n=t.length;return this.filter(function(){for(var e=0;e\x20\t\r\n\f]*)/i,he=/^$|^module$|\/(?:java|ecma)script/i;ce=E.createDocumentFragment().appendChild(E.createElement("div")),(fe=E.createElement("input")).setAttribute("type","radio"),fe.setAttribute("checked","checked"),fe.setAttribute("name","t"),ce.appendChild(fe),y.checkClone=ce.cloneNode(!0).cloneNode(!0).lastChild.checked,ce.innerHTML="",y.noCloneChecked=!!ce.cloneNode(!0).lastChild.defaultValue,ce.innerHTML="",y.option=!!ce.lastChild;var ge={thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};function ve(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?S.merge([e],n):n}function ye(e,t){for(var n=0,r=e.length;n",""]);var me=/<|&#?\w+;/;function xe(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),p=[],d=0,h=e.length;d\s*$/g;function qe(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&S(e).children("tbody")[0]||e}function Le(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function He(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Oe(e,t){var n,r,i,o,a,s;if(1===t.nodeType){if(Y.hasData(e)&&(s=Y.get(e).events))for(i in Y.remove(t,"handle events"),s)for(n=0,r=s[i].length;n").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),E.head.appendChild(r[0])},abort:function(){i&&i()}}});var Ut,Xt=[],Vt=/(=)\?(?=&|$)|\?\?/;S.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=Xt.pop()||S.expando+"_"+Ct.guid++;return this[e]=!0,e}}),S.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Vt.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Vt.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Vt,"$1"+r):!1!==e.jsonp&&(e.url+=(Et.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||S.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?S(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,Xt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),y.createHTMLDocument=((Ut=E.implementation.createHTMLDocument("").body).innerHTML="
",2===Ut.childNodes.length),S.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(y.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=N.exec(e))?[t.createElement(i[1])]:(i=xe([e],t,o),o&&o.length&&S(o).remove(),S.merge([],i.childNodes)));var r,i,o},S.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(S.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},S.expr.pseudos.animated=function(t){return S.grep(S.timers,function(e){return t===e.elem}).length},S.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=S.css(e,"position"),c=S(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=S.css(e,"top"),u=S.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,S.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):("number"==typeof f.top&&(f.top+="px"),"number"==typeof f.left&&(f.left+="px"),c.css(f))}},S.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){S.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===S.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===S.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=S(e).offset()).top+=S.css(e,"borderTopWidth",!0),i.left+=S.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-S.css(r,"marginTop",!0),left:t.left-i.left-S.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===S.css(e,"position"))e=e.offsetParent;return e||re})}}),S.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;S.fn[t]=function(e){return $(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),S.each(["top","left"],function(e,n){S.cssHooks[n]=$e(y.pixelPosition,function(e,t){if(t)return t=Be(e,n),Me.test(t)?S(e).position()[n]+"px":t})}),S.each({Height:"height",Width:"width"},function(a,s){S.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){S.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return $(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?S.css(e,t,i):S.style(e,t,n,i)},s,n?e:void 0,n)}})}),S.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){S.fn[t]=function(e){return this.on(t,e)}}),S.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),S.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){S.fn[n]=function(e,t){return 0 { 20 | let today = new Date(); 21 | let h = (today.getHours() % 12) + today.getMinutes() / 59; // 22 % 12 = 10pm 22 | let m = today.getMinutes(); // 0 - 59 23 | let s = today.getSeconds(); // 0 - 59 24 | 25 | h *= 30; // 12 * 30 = 360deg 26 | m *= 6; 27 | s *= 6; // 60 * 6 = 360deg 28 | 29 | rotation(hours, h); 30 | rotation(minutes, m); 31 | rotation(seconds, s); 32 | 33 | // call every second 34 | setTimeout(clock, 500); 35 | } 36 | 37 | rotation = (target, val) => { 38 | target.style.transform = `rotate(${val}deg)`; 39 | } 40 | 41 | window.onload = clock(); 42 | 43 | dragElement = (target, btn) => { 44 | target.addEventListener('mousedown', (e) => { 45 | onMouseMove(e); 46 | window.addEventListener('mousemove', onMouseMove); 47 | window.addEventListener('mouseup', onMouseUp); 48 | }); 49 | 50 | onMouseMove = (e) => { 51 | e.preventDefault(); 52 | let targetRect = target.getBoundingClientRect(); 53 | let x = e.pageX - targetRect.left + 10; 54 | if (x > targetRect.width) { x = targetRect.width}; 55 | if (x < 0){ x = 0}; 56 | btn.x = x - 10; 57 | btn.style.left = btn.x + 'px'; 58 | 59 | // get the position of the button inside the container (%) 60 | let percentPosition = (btn.x + 10) / targetRect.width * 100; 61 | 62 | // color width = position of button (%) 63 | color.style.width = percentPosition + "%"; 64 | 65 | // move the tooltip when button moves, and show the tooltip 66 | tooltip.style.left = btn.x - 5 + 'px'; 67 | tooltip.style.opacity = 1; 68 | 69 | // show the percentage in the tooltip 70 | tooltip.textContent = Math.round(percentPosition) + '%'; 71 | }; 72 | 73 | onMouseUp = (e) => { 74 | window.removeEventListener('mousemove', onMouseMove); 75 | tooltip.style.opacity = 0; 76 | 77 | btn.addEventListener('mouseover', function() { 78 | tooltip.style.opacity = 1; 79 | }); 80 | 81 | btn.addEventListener('mouseout', function() { 82 | tooltip.style.opacity = 0; 83 | }); 84 | }; 85 | }; 86 | 87 | dragElement(container, btn); 88 | 89 | /* play button */ 90 | playBtn.addEventListener('click', function(e) { 91 | e.preventDefault(); 92 | pause.classList.toggle('visibility'); 93 | play.classList.toggle('visibility'); 94 | playBtn.classList.toggle('shadow'); 95 | wave1.classList.toggle('paused'); 96 | wave2.classList.toggle('paused'); 97 | }); --------------------------------------------------------------------------------