style.css 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. body {
  6. padding: 50px;
  7. font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  8. background: #333;
  9. color: white;
  10. }
  11. button {
  12. clear:both;
  13. background: #3498db;
  14. border-radius: 5px;
  15. color: #fff;
  16. padding: 10px 20px 10px 20px;
  17. text-decoration: none;
  18. border:0;
  19. width: 100%;
  20. }
  21. button:disabled {
  22. background: #eee;
  23. color: #aaa
  24. }
  25. button:hover {
  26. background: #3cb0fd;
  27. text-decoration: none;
  28. }
  29. button:hover:disabled {
  30. background: #bbb;
  31. color: #aaa
  32. }
  33. label {
  34. width: 180px;
  35. display: inline-block;
  36. }
  37. select {
  38. width: 200px;
  39. font-size: 15px;
  40. }
  41. footer {
  42. position:fixed;
  43. left:0;
  44. bottom:0;
  45. height:30px;
  46. width:100%;
  47. background: #0568c6;
  48. color: white;
  49. }
  50. footer span {
  51. top: 5px;
  52. left: 10px;
  53. position: relative;
  54. }
  55. #progressBar {
  56. display:none;
  57. }
  58. #progress {
  59. width: 0;
  60. }
  61. #form div {
  62. margin-bottom: 30px;
  63. text-align: center;
  64. }
  65. #form label {
  66. text-align: right;
  67. }
  68. /*
  69. * https://css-tricks.com/examples/ProgressBars/
  70. */
  71. .meter {
  72. height: 40px; /* Can be anything */
  73. position: relative;
  74. margin: 40px 0 20px 0; /* Just for demo spacing */
  75. background: #555;
  76. border-radius: 25px;
  77. padding: 10px;
  78. box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
  79. }
  80. .meter > span {
  81. display: block;
  82. height: 100%;
  83. border-top-right-radius: 8px;
  84. border-bottom-right-radius: 8px;
  85. border-top-left-radius: 20px;
  86. border-bottom-left-radius: 20px;
  87. background-color: rgb(5, 138, 255);
  88. background-image: -webkit-gradient(
  89. linear,
  90. left bottom,
  91. left top,
  92. color-stop(0, rgb(5, 138, 255)),
  93. color-stop(1, rgb(71, 190, 240))
  94. );
  95. box-shadow:
  96. inset 0 2px 9px rgba(255,255,255,0.3),
  97. inset 0 -2px 6px rgba(0,0,0,0.4);
  98. position: relative;
  99. overflow: hidden;
  100. }
  101. .meter > span:after, .animate > span > span {
  102. content: "";
  103. position: absolute;
  104. top: 0; left: 0; bottom: 0; right: 0;
  105. background-image:
  106. -webkit-gradient(linear, 0 0, 100% 100%,
  107. color-stop(.25, rgba(255, 255, 255, .2)),
  108. color-stop(.25, transparent), color-stop(.5, transparent),
  109. color-stop(.5, rgba(255, 255, 255, .2)),
  110. color-stop(.75, rgba(255, 255, 255, .2)),
  111. color-stop(.75, transparent), to(transparent)
  112. );
  113. z-index: 1;
  114. background-size: 50px 50px;
  115. -webkit-animation: move 2s linear infinite;
  116. border-top-right-radius: 8px;
  117. border-bottom-right-radius: 8px;
  118. border-top-left-radius: 20px;
  119. border-bottom-left-radius: 20px;
  120. overflow: hidden;
  121. }
  122. .animate > span:after {
  123. display: none;
  124. }
  125. @-webkit-keyframes move {
  126. 0% {
  127. background-position: 0 0;
  128. }
  129. 100% {
  130. background-position: 50px 50px;
  131. }
  132. }
  133. .nostripes > span > span, .nostripes > span:after {
  134. -webkit-animation: none;
  135. background-image: none;
  136. }