index.css 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. body {
  2. margin-bottom: 200px;
  3. }
  4. code {
  5. display: block;
  6. padding: 8px 15px;
  7. background-color: #f6f8fa;
  8. border-radius: 5px;
  9. border: 1px solid #e5e5e5;
  10. overflow-x: auto;
  11. font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
  12. color: #333;
  13. font-size: 12px;
  14. }
  15. p,
  16. ul,
  17. ol,
  18. table,
  19. pre,
  20. dl {
  21. margin: 0 0 20px;
  22. }
  23. h1 {
  24. color: #4AB7BD;
  25. font-size: 60px;
  26. text-align: center
  27. }
  28. h3 {
  29. font-size: 36px;
  30. color: #494949;
  31. line-height: 1.1;
  32. }
  33. .github-corner:hover .octo-arm {
  34. animation: octocat-wave 560ms ease-in-out
  35. }
  36. @keyframes octocat-wave {
  37. 0%,
  38. 100% {
  39. transform: rotate(0)
  40. }
  41. 20%,
  42. 60% {
  43. transform: rotate(-25deg)
  44. }
  45. 40%,
  46. 80% {
  47. transform: rotate(10deg)
  48. }
  49. }
  50. @media (max-width:500px) {
  51. .github-corner:hover .octo-arm {
  52. animation: none
  53. }
  54. .github-corner .octo-arm {
  55. animation: octocat-wave 560ms ease-in-out
  56. }
  57. }
  58. #app {
  59. margin: 20px;
  60. }
  61. .container {
  62. width: 980px;
  63. margin-right: auto;
  64. margin-left: auto;
  65. }
  66. .example-btn {
  67. display: inline-block;
  68. margin-bottom: 0;
  69. font-weight: 500;
  70. text-align: center;
  71. -ms-touch-action: manipulation;
  72. touch-action: manipulation;
  73. cursor: pointer;
  74. background-image: none;
  75. border: 1px solid transparent;
  76. white-space: nowrap;
  77. line-height: 1.5;
  78. padding: 4px 15px;
  79. font-size: 12px;
  80. border-radius: 4px;
  81. -webkit-user-select: none;
  82. -moz-user-select: none;
  83. -ms-user-select: none;
  84. user-select: none;
  85. -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
  86. transition: all .3s cubic-bezier(.645, .045, .355, 1);
  87. position: relative;
  88. color: rgba(0, 0, 0, .65);
  89. background-color: #fff;
  90. border-color: #d9d9d9;
  91. }
  92. .example-btn:hover {
  93. color: #4AB7BD;
  94. background-color: #fff;
  95. border-color: #4AB7BD;
  96. }
  97. .example-item {
  98. margin-bottom: 80px;
  99. }
  100. .example1 {
  101. font-size: 40px;
  102. color: #30B08F;
  103. display: block;
  104. margin: 10px 0;
  105. }
  106. .example2 {
  107. font-size: 40px;
  108. color: #E65D6E;
  109. display: block;
  110. margin: 10px 0;
  111. }
  112. .example3 {
  113. font-size: 50px;
  114. color: #F6416C;
  115. display: block;
  116. margin: 10px 0;
  117. text-align: center;
  118. font-size: 80px;
  119. font-weight: 500;
  120. }
  121. .label {
  122. color: #2f4f4f;
  123. font-size: 16px;
  124. display: inline-block;
  125. margin: 15px 30px 15px 0;
  126. }
  127. input {
  128. position: relative;
  129. display: inline-block;
  130. padding: 4px 7px;
  131. width: 50px;
  132. height: 28px;
  133. cursor: text;
  134. font-size: 12px;
  135. line-height: 1.5;
  136. color: rgba(0, 0, 0, .65);
  137. background-color: #fff;
  138. background-image: none;
  139. border: 1px solid #d9d9d9;
  140. border-radius: 4px;
  141. -webkit-transition: all .3s;
  142. transition: all .3s;
  143. }
  144. .startBtn {
  145. margin-left: 20px;
  146. font-size: 20px;
  147. color: #30B08F;
  148. background-color: #fff;
  149. }
  150. .startBtn:hover {
  151. background-color: #30B08F;
  152. color: #fff;
  153. border-color: #30B08F;
  154. }
  155. .pause-resume-btn {
  156. font-size: 20px;
  157. color: #E65D6E;
  158. background-color: #fff;
  159. }
  160. .pause-resume-btn:hover {
  161. background-color: #E65D6E;
  162. color: #fff;
  163. border-color: #E65D6E;
  164. }