1 | @import "../node_modules/lesshat/lesshat";
|
2 | @import "../node_modules/normalize.css/normalize.css";
|
3 |
|
4 | html, body {
|
5 | font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
6 | min-width: 320px;
|
7 | margin: 0 auto;
|
8 | height: 100%;
|
9 | }
|
10 |
|
11 | small {
|
12 | color: grey;
|
13 | }
|
14 |
|
15 | .flex {
|
16 | .display(flex);
|
17 | .flex-direction(column);
|
18 | }
|
19 |
|
20 | .container {
|
21 | margin-right: auto;
|
22 | margin-left: auto;
|
23 | @media (min-width: 768px) {
|
24 | width: 750px;
|
25 | }
|
26 | @media (min-width: 992px) {
|
27 | width: 970px;
|
28 | }
|
29 | @media (min-width: 1200px) {
|
30 | width: 1170px;
|
31 | }
|
32 | }
|
33 |
|
34 | .header-container {
|
35 | text-align: center;
|
36 | }
|
37 |
|
38 | .editor-container {
|
39 | .flex(1);
|
40 | overflow-y: auto;
|
41 | border: 1px solid grey;
|
42 | border-radius: 3px;
|
43 | }
|
44 |
|
45 | .col {
|
46 | width: 50%;
|
47 | position: relative;
|
48 | height: 100%;
|
49 | float: left;
|
50 | overflow-y: auto;
|
51 | }
|
52 |
|
53 | .source {
|
54 | width: 100%;
|
55 | height: 100%;
|
56 | resize: vertical;
|
57 | min-height: 500px;
|
58 | .box-sizing(border-box);
|
59 | }
|
60 |
|
61 | .CodeMirror {
|
62 | height: 100%;
|
63 | }
|
64 |
|
65 | .github-corner:hover .octo-arm {
|
66 | animation: octocat-wave 560ms ease-in-out
|
67 | }
|
68 |
|
69 | .github-corner svg {
|
70 | fill: gray;
|
71 | color: #fff;
|
72 | }
|
73 |
|
74 | .github-corner:hover svg {
|
75 | fill: #337ab7;
|
76 | }
|
77 |
|
78 | @keyframes octocat-wave {
|
79 | 0%, 100% {
|
80 | transform: rotate(0deg)
|
81 | }
|
82 | 20%, 60% {
|
83 | transform: rotate(-25deg)
|
84 | }
|
85 | 40%, 80% {
|
86 | transform: rotate(10deg)
|
87 | }
|
88 | }
|
89 |
|
90 | @media (max-width: 500px) {
|
91 | .github-corner:hover .octo-arm {
|
92 | animation: none
|
93 | }
|
94 |
|
95 | .github-corner .octo-arm {
|
96 | animation: octocat-wave 560ms ease-in-out
|
97 | }
|
98 | }
|