style.css 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. /* ------------------
  2. HOME
  3. ------------------ */
  4. #b {
  5. -webkit-animation-delay: 0.5s;
  6. animation-delay: 0.5s;
  7. -webkit-animation-duration: 1.5s;
  8. animation-duration: 1.5s;
  9. -webkit-animation-fill-mode: both;
  10. animation-fill-mode: both;
  11. -webkit-animation-name: floatUp;
  12. animation-name: floatUp;
  13. -webkit-animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
  14. animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
  15. border-radius: 24px;
  16. display: inline-block;
  17. height: 240px;
  18. margin-bottom: 40px;
  19. position: relative;
  20. vertical-align: top;
  21. width: 240px;
  22. box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
  23. }
  24. div#dropzone {
  25. border: 1px solid #dbdbdb;
  26. background-color: rgba(0, 0, 0, 0);
  27. border-color: #ff3860;
  28. color: #ff3860;
  29. display: flex;
  30. width: 100%;
  31. border-radius: 3px;
  32. box-shadow: none;
  33. height: 2.5em;
  34. -webkit-box-align: center;
  35. -ms-flex-align: center;
  36. align-items: center;
  37. user-select: none;
  38. justify-content: center;
  39. padding-left: .75em;
  40. padding-right: .75em;
  41. text-align: center;
  42. cursor: pointer;
  43. }
  44. div#dropzone:hover {
  45. background-color: #ff3860;
  46. border-color: #ff3860;
  47. color: #fff;
  48. }
  49. img.logo { height: 200px; margin-top: 20px; }
  50. .dz-preview .dz-details { display: flex; }
  51. .dz-preview .dz-details .dz-size, .dz-preview .dz-details .dz-filename { flex: 1 }
  52. .dz-preview img, .dz-preview .dz-success-mark, .dz-preview .dz-error-mark { display: none }
  53. @keyframes floatUp {
  54. 0% {
  55. opacity: 0;
  56. box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0);
  57. -webkit-transform: scale(0.86);
  58. transform: scale(0.86);
  59. }
  60. 25% { opacity: 100; }
  61. 67% {
  62. box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
  63. -webkit-transform: scale(1);
  64. transform: scale(1);
  65. }
  66. 100% {
  67. box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
  68. -webkit-transform: scale(1);
  69. transform: scale(1);
  70. }
  71. }