1 | * {
|
2 | box-sizing: border-box;
|
3 | }
|
4 | body {
|
5 | min-width: 800px;
|
6 | padding: 15px;
|
7 | margin: 0;
|
8 | }
|
9 | body > div[class^='page-'] {
|
10 | max-width: 1100px;
|
11 | }
|
12 | em {
|
13 | margin: 0 0.25em 0 0;
|
14 | }
|
15 | a {
|
16 | text-decoration: none;
|
17 | }
|
18 | a:hover {
|
19 | text-decoration: underline;
|
20 | }
|
21 |
|
22 |
|
23 | h1 {
|
24 | font-size: 20px;
|
25 | }
|
26 | h2 {
|
27 | font-size: 18px;
|
28 | margin: 30px 0 10px;
|
29 | }
|
30 |
|
31 |
|
32 | input[type='text'],
|
33 | select {
|
34 | width: 100%;
|
35 | height: 28px;
|
36 | padding: 0 0 0 8px;
|
37 | line-height: 28px;
|
38 | color: #222;
|
39 | font-size: 14px;
|
40 | border-radius: 2px;
|
41 | border: 1px solid #bdbdbd;
|
42 | vertical-align: middle;
|
43 | }
|
44 |
|
45 |
|
46 | button[type='button'] {
|
47 | min-height: 30px;
|
48 | min-width: 60px;
|
49 | padding: 0 12px;
|
50 | font-size: 13px;
|
51 | line-height: 14px;
|
52 | color: #276ef1;
|
53 | border: 1px solid #bdbdbd;
|
54 | background-color: white;
|
55 | vertical-align: middle;
|
56 | border-radius: 3px;
|
57 | }
|
58 | button[type='button']:hover {
|
59 | border-color: #bdbdbd;
|
60 | background-color: #f6f6f7;
|
61 | cursor: pointer;
|
62 | }
|
63 |
|
64 |
|
65 | table {
|
66 | width: 100%;
|
67 | }
|
68 | caption {
|
69 | text-align: left;
|
70 | font-weight: bold;
|
71 | }
|
72 | th,
|
73 | td {
|
74 | height: 34px;
|
75 | padding: 5px;
|
76 | font-size: 12px;
|
77 | border: 1px solid #ddd;
|
78 | }
|
79 | th {
|
80 | width: 180px;
|
81 | font-size: 14px;
|
82 | background: #eee;
|
83 | }
|
84 |
|
85 |
|
86 | .payload {
|
87 | margin: 0 0 30px;
|
88 | padding: 15px;
|
89 | border: 1px solid #b3b3b3;
|
90 | background: -webkit-gradient(linear, 0 0, 0 100%, from(#fefefe), to(#f6f6f6));
|
91 | }
|
92 | .payload h2 {
|
93 | margin: 0;
|
94 | font-size: 16px;
|
95 | }
|
96 |
|
97 |
|
98 | .helper {
|
99 | margin: 30px 0 0;
|
100 | padding: 15px 20px 30px;
|
101 | font-size: 14px;
|
102 | border: 1px solid #b3b3b3;
|
103 | background: -webkit-gradient(linear, 0 0, 0 100%, from(#fefefe), to(#f6f6f6));
|
104 | }
|
105 | .helper h2 {
|
106 | font-size: 18px;
|
107 | }
|
108 | .helper h3 {
|
109 | margin: 12px 0 0;
|
110 | font-size: 16px;
|
111 | font-weight: normal;
|
112 | }
|
113 | .helper ul {
|
114 | margin: 8px 0 0;
|
115 | }
|
116 | .helper li {
|
117 | margin: 0.3em 0 0;
|
118 | }
|
119 |
|
120 |
|
121 | .page-launcher .form {
|
122 | display: flex;
|
123 | }
|
124 | .page-launcher .form input {
|
125 | flex-grow: 1;
|
126 | }
|
127 | .page-launcher .form button {
|
128 | width: 180px;
|
129 | margin: 0 0 0 0.5em;
|
130 | }
|
131 | .page-launcher .download {
|
132 | margin: 20px 0 0;
|
133 | text-align: right;
|
134 | }
|
135 | .page-launcher .download th {
|
136 | text-align: center;
|
137 | }
|
138 | .page-launcher .download th:nth-child(1) {
|
139 | width: 120px;
|
140 | }
|
141 | .page-launcher .download td {
|
142 | text-align: center;
|
143 | }
|
144 | .page-launcher .download a {
|
145 | color: #276ef1;
|
146 | }
|
147 |
|
148 |
|
149 | .api-result {
|
150 | position: relative;
|
151 | margin: 30px -15px;
|
152 | padding: 30px 15px;
|
153 | background: #efefef;
|
154 | }
|
155 | .api-result div {
|
156 | white-space: pre-wrap;
|
157 | }
|
158 |
|
159 |
|
160 | .page-test .step--prepare table {
|
161 | width: 100%;
|
162 | }
|
163 | .page-test .step--prepare th,
|
164 | .page-test .step--prepare td {
|
165 | border: 1px solid #ddd;
|
166 | }
|
167 | .page-test .step--prepare input {
|
168 | width: 100%;
|
169 | }
|
170 | .page-test .step--prepare td:nth-child(3) {
|
171 | width: 140px;
|
172 | padding: 5px;
|
173 | text-align: center;
|
174 | vertical-align: middle;
|
175 | }
|
176 | .page-test .step--prepare td:nth-child(3) button {
|
177 | height: 140px;
|
178 | }
|
179 | .page-test .step--prepare .btn-container-next {
|
180 | text-align: center;
|
181 | margin: 20px 0 0;
|
182 | }
|
183 |
|
184 |
|
185 | .page-test .step--ready .section {
|
186 | margin: 20px 0 0;
|
187 | }
|
188 |
|
189 | .page-test .step--run .section {
|
190 | margin: 30px 0 0;
|
191 | }
|
192 | .page-test .step--run .section h2 {
|
193 | margin: 0;
|
194 | font-size: 20px;
|
195 | }
|
196 | .page-test .step--run .section pre {
|
197 | padding: 20px 15px;
|
198 | border: 1px solid #b3b3b3;
|
199 | background: -webkit-gradient(linear, 0 0, 0 100%, from(#fefefe), to(#f6f6f6));
|
200 | }
|
201 | .page-test .step--run .button-wrapper {
|
202 | margin: 20px 0 0;
|
203 | }
|
204 | .page-test .step--run .video-wrapper {
|
205 | margin: 20px 0 0;
|
206 | }
|