style.css 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. i, b {
  2. font-style: normal;
  3. font-weight: 400;
  4. }
  5. body, html {
  6. padding: 0;
  7. margin: 0;
  8. }
  9. body {
  10. background: white;
  11. }
  12. body, td, input, textarea {
  13. font-family: source sans pro, sans-serif;
  14. font-size: 14px;
  15. line-height: 1.5;
  16. color: #222;
  17. }
  18. button {
  19. cursor: pointer;
  20. }
  21. * {
  22. text-rendering: optimizeLegibility;
  23. -webkit-font-smoothing: antialiased;
  24. }
  25. .nprogress-logo {
  26. display: inline-block;
  27. width: 100px;
  28. height: 20px;
  29. border: solid 4px #2d9;
  30. border-radius: 10px;
  31. position: relative;
  32. }
  33. .nprogress-logo:after {
  34. content: '';
  35. display: block;
  36. position: absolute;
  37. top: 4px;
  38. left: 4px;
  39. bottom: 4px;
  40. width: 40%;
  41. background: #2d9;
  42. border-radius: 3px;
  43. }
  44. .fade {
  45. transition: all 300ms linear 700ms;
  46. -webkit-transform: translate3d(0,0,0);
  47. -moz-transform: translate3d(0,0,0);
  48. -ms-transform: translate3d(0,0,0);
  49. -o-transform: translate3d(0,0,0);
  50. transform: translate3d(0,0,0);
  51. opacity: 1;
  52. }
  53. .fade.out {
  54. opacity: 0;
  55. }
  56. button {
  57. margin: 0;
  58. padding: 0;
  59. border: 0;
  60. outline: 0;
  61. }
  62. .button {
  63. display: inline-block;
  64. text-decoration: none;
  65. background: #eee;
  66. color: #777;
  67. border-radius: 2px;
  68. padding: 8px 10px;
  69. font-weight: 700;
  70. text-align: left;
  71. }
  72. .button.play:before {
  73. content: '\25b6';
  74. }
  75. .button:hover {
  76. background: #2d9;
  77. color: #fff;
  78. }
  79. .button.primary {
  80. background: #2d9;
  81. color: #fff;
  82. }
  83. .button.primary:hover {
  84. background: #1c8;
  85. }
  86. .button:active {
  87. background: #2d9;
  88. box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6);
  89. }
  90. .controls {
  91. text-align: left;
  92. margin: 0 auto;
  93. max-width: 300px;
  94. color: #666;
  95. }
  96. .controls .button {
  97. width: 40px;
  98. margin-right: 10px;
  99. text-align: center;
  100. }
  101. .controls i {
  102. color: #999;
  103. }
  104. .controls b {
  105. color: #29d;
  106. font-weight: 700;
  107. }
  108. .controls {
  109. font-size: 0.9em;
  110. }
  111. .page-header {
  112. text-align: center;
  113. max-width: 400px;
  114. padding: 3em 20px;
  115. margin: 0 auto;
  116. }
  117. .page-header h1 {
  118. font-size: 2.0em;
  119. text-align: center;
  120. font-weight: 200;
  121. line-height: 1.3;
  122. color: #333;
  123. margin: 0;
  124. }
  125. p.brief {
  126. line-height: 1.4;
  127. font-style: italic;
  128. color: #888;
  129. }
  130. p.brief.big {
  131. font-size: 1.1em;
  132. }
  133. @media (min-width: 480px) {
  134. .page-header h1 {
  135. margin-top: 1em;
  136. margin-bottom: 0.4em;
  137. }
  138. }
  139. .page-header h1 i {
  140. color: #aaa;
  141. font-style: normal;
  142. font-weight: 200;
  143. }
  144. @media (min-width: 480px) {
  145. .page-header h1 {
  146. font-size: 3em; }
  147. .page-header {
  148. padding: 4.5em 20px 3.5em 20px;
  149. }
  150. }
  151. /* --- */
  152. .actions {
  153. text-align: center;
  154. margin: 2em 0;
  155. }
  156. @media (min-width: 480px) {
  157. .actions {
  158. margin: 4.5em 0 3.5em 0;
  159. }
  160. }
  161. .big.button {
  162. padding-left: 30px;
  163. padding-right: 30px;
  164. font-size: 1.1em;
  165. }
  166. /* ---- */
  167. div.hr-rule {
  168. height: 1px;
  169. width: 100px;
  170. margin: 40px auto;
  171. background: #ddd;
  172. }
  173. .share-buttons {
  174. margin: 0 auto;
  175. text-align: center;
  176. }