index.css 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. html, body{
  2. height: 100%;
  3. min-height: 100%;
  4. background: #E9EBEC;
  5. -webkit-font-smoothing: initial;
  6. text-rendering: initial;
  7. }
  8. html{
  9. font-family: 'Raleway', sans-serif;
  10. font-weight: 200;
  11. -ms-touch-action: manipulation;
  12. touch-action: manipulation;
  13. }
  14. body{
  15. display: -webkit-flex;
  16. -webkit-align-items: center;
  17. -webkit-justify-content: center;
  18. display: flex;
  19. align-items: center;
  20. justify-content: center;
  21. -webkit-animation-duration: 3s;
  22. animation-duration: 3s;
  23. -webkit-animation-fill-mode: both;
  24. animation-fill-mode: both;
  25. -webkit-animation-name: fadeIn;
  26. animation-name: fadeIn;
  27. }
  28. html p, body p{
  29. line-height: inherit;
  30. }
  31. h1{
  32. margin: 0.2em 0;
  33. color: rgba(40, 33, 33, .7);
  34. color: rgba(124, 98, 152, 1);
  35. font-weight: 400;
  36. }
  37. header{
  38. background: #00C8BE;
  39. padding: 0.3em 1em;
  40. position: relative;
  41. z-index: 20;
  42. }
  43. .viewCode header{
  44. box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
  45. }
  46. .showcode{
  47. background: rgb(232, 216, 49);
  48. color: rgba(124, 98, 152, 1);
  49. width: 40px;
  50. height: 40px;
  51. text-align: center;
  52. position: absolute;
  53. right: 1em;
  54. bottom: 0;
  55. margin-bottom: -15px;
  56. border-radius: 100%;
  57. font-size: 16px;
  58. cursor: pointer;
  59. box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
  60. transition: all .3s;
  61. }
  62. .viewCode .showcode{
  63. -webkit-transform: rotateX(-180deg);
  64. transform: rotateX(-180deg);
  65. box-shadow: 0px -2px 5px 0 rgba(0, 0, 0, 0.26);
  66. }
  67. .icon-nocode, .icon-yepcode{
  68. transition: opacity .3s;
  69. position: absolute;
  70. left: 0;
  71. display: block;
  72. width: 100%;
  73. line-height: 40px;
  74. }
  75. .icon-nocode{
  76. opacity: 0;
  77. }
  78. .viewCode .icon-nocode{
  79. opacity: 1;
  80. }
  81. .viewCode .icon-yepcode{
  82. opacity: 0;
  83. }
  84. .panel{
  85. width: 90%;
  86. position: relative;
  87. max-width: 650px;
  88. box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
  89. background: #F5F5F5;
  90. border-radius: 3px;
  91. overflow: hidden;
  92. }
  93. article{
  94. min-height: 180px;
  95. padding: 1em;
  96. font-weight: 200;
  97. line-height: 1.5em;
  98. position: relative;
  99. }
  100. footer{
  101. padding: 0.3em 1em 1em;
  102. }
  103. footer a, footer a:active, footer a:visited{
  104. color: inherit;
  105. }
  106. .code{
  107. position: absolute;
  108. top: 0;
  109. top: 0;
  110. left: 0;
  111. right: 0;
  112. height: 100%;
  113. overflow: scroll;
  114. background: rgba(124, 98, 152, 0.94);
  115. color: rgba(245, 247, 247, 0.92);
  116. padding: 0em 1em;
  117. transition: all .4s;
  118. -webkit-transform: translateY(-100%);
  119. transform: translateY(-100%);
  120. }
  121. .code p:first-child{
  122. margin-top: 2em;
  123. }
  124. .code a{
  125. color: rgba(232, 216, 49, 0.9);
  126. }
  127. .viewCode .code{
  128. -webkit-transform: translateY(0);
  129. transform: translateY(0);
  130. box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.36);
  131. }
  132. .actions{
  133. font-weight: 300;
  134. text-transform: uppercase;
  135. font-size: 0.8em;
  136. padding: 1em;
  137. border: none;
  138. background: none;
  139. transition: color .2s;
  140. cursor: pointer;
  141. }
  142. .actions:hover{
  143. color: rgb(30, 30, 171);
  144. background: #F5F5F5;
  145. box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
  146. }
  147. code, pre {
  148. background: rgba(255,255,255,0.1);
  149. color: rgba(232, 216, 49, 0.9);
  150. font-family: "Source Code Pro", Monaco, Menlo, Consolas, "Courier New",monospace;
  151. padding: 0.5em;
  152. border-radius: 3px;
  153. margin: 1em 0;
  154. }
  155. code{
  156. display: inline;
  157. vertical-align: middle;
  158. margin: 0;
  159. }
  160. pre{
  161. display: block;
  162. }
  163. .striked{
  164. text-decoration: line-through;
  165. }
  166. .mfb-component--tl{
  167. animation: fromTop 1s 1;
  168. -webkit-animation: fromTop 1s 1;
  169. }
  170. .mfb-component--tr{
  171. animation: fromTop 1.3s 1;
  172. -webkit-animation: fromTop 1.3s 1;
  173. }
  174. .mfb-component--br{
  175. animation: fromBottom 1.6s 1;
  176. -webkit-animation: fromBottom 1.6s 1;
  177. }
  178. .mfb-component--bl{
  179. animation: fromBottom 1.9s 1;
  180. -webkit-animation: fromBottom 1.9s 1;
  181. }
  182. @keyframes fromBottom {
  183. 0% {
  184. transform: translateY(250px);
  185. }
  186. 100% {
  187. transform: translateY(0);
  188. }
  189. }
  190. @keyframes fromTop {
  191. 0% {
  192. transform: translateY(-250px);
  193. }
  194. 100% {
  195. transform: translateY(0);
  196. }
  197. }
  198. @-webkit-keyframes fromBottom {
  199. 0% {
  200. transform: translateY(250px);
  201. }
  202. 100% {
  203. transform: translateY(0);
  204. }
  205. }
  206. @-webkit-keyframes fromTop {
  207. 0% {
  208. transform: translateY(-250px);
  209. }
  210. 100% {
  211. transform: translateY(0);
  212. }
  213. }
  214. @-webkit-keyframes fadeIn {
  215. 0% {
  216. opacity: 0;
  217. }
  218. 100% {
  219. opacity: 1;
  220. }
  221. }
  222. @keyframes fadeIn {
  223. 0% {
  224. opacity: 0;
  225. }
  226. 100% {
  227. opacity: 1;
  228. }
  229. }