upload.css 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. /**
  2. * @name upload.css
  3. * @author Tobias Reich
  4. * @copyright 2014 by Tobias Reich
  5. */
  6. #upload {
  7. display: none;
  8. }
  9. .upload_overlay {
  10. position: fixed;
  11. width: 100%;
  12. height: 100%;
  13. top: 0px;
  14. left: 0px;
  15. background-color: rgba(0,0,0,.85);
  16. z-index: 1000;
  17. }
  18. .upload_message {
  19. position: absolute;
  20. display: inline-block;
  21. width: 200px;
  22. margin-left: -100px;
  23. margin-top: -85px;
  24. background-color: #444;
  25. background-image: -webkit-linear-gradient(top, rgb(75, 75, 75), rgb(45, 45, 45));
  26. background-image: -moz-linear-gradient(top, rgb(75, 75, 75), rgb(45, 45, 45));
  27. background-image: -ms-linear-gradient(top, rgb(75, 75, 75), rgb(45, 45, 45));
  28. background-image: linear-gradient(top, rgb(75, 75, 75), rgb(45, 45, 45));
  29. border-radius: 5px;
  30. box-shadow: 0px 0px 5px #000, inset 0px 1px 0px rgba(255,255,255,.08), inset 1px 0px 0px rgba(255,255,255,.03), inset -1px 0px 0px rgba(255,255,255,.03);
  31. /* Animation */
  32. -webkit-animation-name: moveUp;
  33. -webkit-animation-duration: .3s;
  34. -webkit-animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
  35. -moz-animation-name: moveUp;
  36. -moz-animation-duration: .3s;
  37. -moz-animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
  38. animation-name: moveUp;
  39. animation-duration: .3s;
  40. animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
  41. }
  42. /* Icon ------------------------------------------------*/
  43. .upload_message a {
  44. float: left;
  45. width: 100%;
  46. margin: 35px 0px 5px 0px;
  47. color: #fff;
  48. font-size: 70px;
  49. text-shadow: 0px 1px 2px rgba(0,0,0,.5);
  50. text-align: center;
  51. -webkit-animation-name: pulse;
  52. -webkit-animation-duration: 2s;
  53. -webkit-animation-timing-function: ease-in-out;
  54. -webkit-animation-iteration-count: infinite;
  55. -moz-animation-name: pulse;
  56. -moz-animation-duration: 2s;
  57. -moz-animation-timing-function: ease-in-out;
  58. -moz-animation-iteration-count: infinite;
  59. animation-name: pulse;
  60. animation-duration: 2s;
  61. animation-timing-function: ease-in-out;
  62. animation-iteration-count: infinite;
  63. }
  64. /* Text ------------------------------------------------*/
  65. .upload_message p {
  66. float: left;
  67. width: 100%;
  68. margin: 10px 0px 35px 0px;
  69. color: #fff;
  70. font-size: 14px;
  71. text-align: center;
  72. text-shadow: 0px -1px 0px rgba(0,0,0,.5);
  73. }
  74. /* Progress ------------------------------------------------*/
  75. .upload_message .progressbar {
  76. float: left;
  77. width: 170px;
  78. height: 25px;
  79. margin: 15px;
  80. background-size: 50px 25px;
  81. background-repeat: repeat-x;
  82. background-image: -webkit-linear-gradient(left, #191919 0%, #191919 47%, #1D1D1D 53%, #1D1D1D 100%);
  83. background-image: -moz-linear-gradient(left, #191919 0%, #191919 47%, #1D1D1D 53%, #1D1D1D 100%);
  84. background-image: linear-gradient(left right, #191919 0%, #191919 47%, #1D1D1D 53%, #1D1D1D 100%);
  85. border: 1px solid #090909;
  86. box-shadow: 0 1px 0 rgba(255,255,255,.06), inset 0px 0px 2px #222;
  87. border-radius: 50px;
  88. /* Animation */
  89. -webkit-animation-name: moveBackground;
  90. -webkit-animation-duration: 1s;
  91. -webkit-animation-timing-function: linear;
  92. -webkit-animation-iteration-count: infinite;
  93. -moz-animation-name: moveBackground;
  94. -moz-animation-duration: 1s;
  95. -moz-animation-timing-function: linear;
  96. -moz-animation-iteration-count: infinite;
  97. animation-name: moveBackground;
  98. animation-duration: 1s;
  99. animation-timing-function: linear;
  100. animation-iteration-count: infinite;
  101. }
  102. .upload_message .progressbar div {
  103. float: left;
  104. width: 0%;
  105. height: 100%;
  106. box-shadow: 0 1px 0 #000, 1px 0px 2px #000;
  107. background-color: #f5f2f7;
  108. background-image: -webkit-linear-gradient(top, #f5f2f7, #c7c6c8);
  109. background-image: -moz-linear-gradient(top, #f5f2f7, #c7c6c8);
  110. background-image: -ms-linear-gradient(top, #f5f2f7, #c7c6c8);
  111. background-image: linear-gradient(top, #f5f2f7, #c7c6c8);
  112. border-radius: 50px;
  113. -webkit-transition: width .2s, opacity .5;
  114. -moz-transition: width .2s, opacity .5;
  115. transition: width .2s, opacity .5;
  116. }