OLD | NEW |
| (Empty) |
1 /* | |
2 * Copyright 2014 The Chromium Authors. All rights reserved. | |
3 * Use of this source code is governed by a BSD-style license that can be | |
4 * found in the LICENSE file. | |
5 */ | |
6 | |
7 .responsive-design { | |
8 position: relative; | |
9 background-color: rgb(0, 0, 0); | |
10 overflow: hidden; | |
11 } | |
12 | |
13 .responsive-design-view { | |
14 overflow: hidden; | |
15 } | |
16 | |
17 .responsive-design-canvas { | |
18 pointer-events: none; | |
19 } | |
20 | |
21 .responsive-design-sliders-container { | |
22 position: absolute; | |
23 overflow: visible; | |
24 } | |
25 | |
26 .responsive-design-generic-outline-container { | |
27 position: absolute; | |
28 overflow: hidden; | |
29 top: 0; | |
30 left: 0; | |
31 right: -19px; | |
32 bottom: -19px; | |
33 } | |
34 | |
35 .responsive-design-generic-outline { | |
36 position: absolute; | |
37 top: -10px; | |
38 left: -10px; | |
39 right: 5px; | |
40 bottom: 5px; | |
41 border-radius: 8px; | |
42 background-color: rgb(51, 51, 51); | |
43 box-shadow: rgb(20, 20, 20) 3px 3px 4px; | |
44 } | |
45 | |
46 .responsive-design-slider-width { | |
47 position: absolute; | |
48 top: 0; | |
49 bottom: 0; | |
50 right: -14px; | |
51 width: 14px; | |
52 display: flex; | |
53 align-items: center; | |
54 justify-content: center; | |
55 } | |
56 | |
57 .responsive-design-slider-height { | |
58 position: absolute; | |
59 left: 0; | |
60 right: 0; | |
61 bottom: -14px; | |
62 height: 14px; | |
63 display: flex; | |
64 align-items: center; | |
65 justify-content: center; | |
66 } | |
67 | |
68 .responsive-design-slider-corner { | |
69 position: absolute; | |
70 right: -14px; | |
71 width: 14px; | |
72 bottom: -14px; | |
73 height: 14px; | |
74 } | |
75 | |
76 .responsive-design-thumb-handle { | |
77 content: url(Images/toolbarResizerHorizontal.png); | |
78 pointer-events: none; | |
79 } | |
80 | |
81 .responsive-design-slider-height .responsive-design-thumb-handle { | |
82 transform: rotate(90deg); | |
83 } | |
84 | |
85 .responsive-design-page-container { | |
86 background-color: #171717; | |
87 } | |
88 | |
89 .responsive-design-page-container-image { | |
90 position: absolute;; | |
91 left: 0; | |
92 top: 0; | |
93 width: 100%; | |
94 height: 100%; | |
95 } | |
96 | |
97 .responsive-design-page-scale-container { | |
98 position: absolute !important; | |
99 top: 0; | |
100 right: 0; | |
101 padding: 10px; | |
102 background-color: rgba(0, 0, 0, 0.3); | |
103 align-items: center; | |
104 } | |
105 | |
106 .responsive-design-page-scale-label { | |
107 display: block; | |
108 height: 20px; | |
109 margin: 0 4px; | |
110 padding-top: 3px; | |
111 color: white; | |
112 cursor: default !important; | |
113 } | |
114 | |
115 .responsive-design-page-scale-container .responsive-design-page-scale-button > .
glyph { | |
116 display: block; | |
117 width: 18px; | |
118 height: 18px; | |
119 border: 1px solid transparent; | |
120 border-radius: 2px; | |
121 } | |
122 | |
123 .responsive-design-page-scale-container .responsive-design-page-scale-button:not
(:disabled):hover { | |
124 box-shadow: rgb(255, 255, 255) 0 0 3px; | |
125 } | |
126 | |
127 .responsive-design-page-scale-container .responsive-design-page-scale-button { | |
128 border: none; | |
129 background-color: transparent; | |
130 padding: 2px 0 0 0; | |
131 } | |
132 | |
133 .responsive-design-page-scale-container .responsive-design-page-scale-button > .
glyph { | |
134 background-color: rgb(180, 180, 180); | |
135 -webkit-mask-image: url(Images/responsiveDesign.png); | |
136 -webkit-mask-size: 112px 16px; | |
137 opacity: 1; | |
138 } | |
139 | |
140 @media (-webkit-min-device-pixel-ratio: 1.5) { | |
141 .responsive-design-page-scale-container .responsive-design-page-scale-button > .
glyph { | |
142 -webkit-mask-image: url(Images/responsiveDesign_2x.png); | |
143 } | |
144 } /* media */ | |
145 | |
146 .responsive-design-page-scale-increase > .glyph { | |
147 -webkit-mask-position: -80px 0; | |
148 } | |
149 | |
150 .responsive-design-page-scale-decrease > .glyph { | |
151 -webkit-mask-position: -96px 0; | |
152 } | |
153 | |
154 /* Toolbar */ | |
155 | |
156 .responsive-design-toolbar { | |
157 display: flex; | |
158 flex: none; | |
159 background: linear-gradient(to bottom, rgb(83, 81, 81), rgb(59, 59, 59)); | |
160 color: rgb(255, 255, 255); | |
161 overflow: hidden; | |
162 border-bottom: 1px solid rgb(71, 71, 71); | |
163 } | |
164 | |
165 .responsive-design-separator { | |
166 flex: none; | |
167 width: 3px; | |
168 background-color: rgb(46, 46, 46); | |
169 border-right: 1px solid rgb(75, 75, 75); | |
170 } | |
171 | |
172 .responsive-design-section { | |
173 display: flex; | |
174 flex: none; | |
175 flex-direction: column; | |
176 white-space: nowrap; | |
177 align-items: stretch; | |
178 justify-content: flex-start; | |
179 padding-top: 1px; | |
180 } | |
181 | |
182 .responsive-design-section-decorator { | |
183 height: 2px; | |
184 margin-left: -2px; | |
185 margin-right: -1px; | |
186 position: relative; | |
187 } | |
188 | |
189 .responsive-design-suite { | |
190 display: flex; | |
191 flex-direction: row; | |
192 padding: 2px 11px; | |
193 color: rgb(180, 180, 180); | |
194 } | |
195 | |
196 .responsive-design-suite.responsive-design-suite-top { | |
197 color: rgb(255, 255, 255); | |
198 } | |
199 | |
200 .responsive-design-suite-separator { | |
201 flex: none; | |
202 width: 1px; | |
203 background-color: rgb(43, 43, 43); | |
204 margin: 0 6px; | |
205 } | |
206 | |
207 .responsive-design-suite > div:not(.responsive-design-suite-separator) { | |
208 flex: none; | |
209 display: flex; | |
210 flex-direction: row; | |
211 align-items: center; | |
212 justify-content: space-between; | |
213 height: 23px; | |
214 overflow: hidden; | |
215 } | |
216 | |
217 /* Toolbar controls */ | |
218 | |
219 .responsive-design-toolbar fieldset, | |
220 .responsive-design-toolbar p { | |
221 margin: 0; | |
222 border: 0; | |
223 padding: 0; | |
224 display: inline-block; | |
225 } | |
226 | |
227 .responsive-design-toolbar .field-error-message { | |
228 display: none; | |
229 } | |
230 | |
231 .responsive-design-toolbar label { | |
232 cursor: default !important; | |
233 margin: 0 2px; | |
234 } | |
235 | |
236 .responsive-design-toolbar input[type='text'] { | |
237 text-align: left; | |
238 background-color: transparent; | |
239 border: none; | |
240 margin: 0 1px 1px 0; | |
241 padding: 3px 2px; | |
242 } | |
243 | |
244 .responsive-design-toolbar input[type='text'].numeric { | |
245 text-align: center; | |
246 } | |
247 | |
248 .responsive-design-toolbar input:focus::-webkit-input-placeholder { | |
249 color: transparent !important; | |
250 } | |
251 | |
252 .responsive-design-toolbar fieldset:disabled input, | |
253 .responsive-design-toolbar fieldset:disabled button { | |
254 opacity: 0.7; | |
255 } | |
256 | |
257 .responsive-design-toolbar input.error-input { | |
258 color: red !important; | |
259 text-decoration: line-through; | |
260 } | |
261 | |
262 .responsive-design-toolbar select { | |
263 height: 18px; | |
264 background-color: rgb(87, 87, 87); | |
265 border: 0; | |
266 margin-left: 10px; | |
267 line-height: 16px; | |
268 } | |
269 | |
270 .responsive-design-toolbar input:focus { | |
271 background-color: rgb(81, 81, 81); | |
272 } | |
273 | |
274 /* Toolbar icons */ | |
275 | |
276 .responsive-design-icon { | |
277 background-color: rgb(180, 180, 180); | |
278 -webkit-mask-image: url(Images/responsiveDesign.png); | |
279 -webkit-mask-size: 112px 16px; | |
280 } | |
281 | |
282 .responsive-design-icon { | |
283 display: inline-block; | |
284 width: 16px; | |
285 height: 16px; | |
286 position: relative; | |
287 top: 3px; | |
288 } | |
289 | |
290 div.responsive-design-icon:disabled { | |
291 opacity: 1 !important; | |
292 } | |
293 | |
294 @media (-webkit-min-device-pixel-ratio: 1.5) { | |
295 .responsive-design-icon { | |
296 -webkit-mask-image: url(Images/responsiveDesign_2x.png); | |
297 } | |
298 } /* media */ | |
299 | |
300 .responsive-design-icon-resolution { | |
301 -webkit-mask-position: 0 0; | |
302 } | |
303 | |
304 .responsive-design-icon-dpr { | |
305 -webkit-mask-position: -16px 0; | |
306 } | |
307 | |
308 .responsive-design-icon-swap { | |
309 background-color: rgb(255, 170, 0); | |
310 -webkit-mask-position: -32px 0; | |
311 -webkit-appearance: none; | |
312 padding: 0; | |
313 border: 0; | |
314 } | |
315 | |
316 .responsive-design-icon-swap { | |
317 margin-left: 1px; | |
318 top: 4px; | |
319 } | |
320 | |
321 .responsive-design-icon-swap:hover { | |
322 background-color: rgb(255, 180, 0); | |
323 } | |
324 | |
325 .responsive-design-icon-swap:active { | |
326 opacity: 0.8; | |
327 } | |
328 | |
329 /* Buttons section */ | |
330 | |
331 .responsive-design-section-buttons { | |
332 padding: 4px 0 0 0; | |
333 background: rgb(17, 17, 17); | |
334 } | |
335 | |
336 .responsive-design-more-button-container { | |
337 flex: auto; | |
338 display: flex; | |
339 justify-content: flex-end; | |
340 align-items: flex-end; | |
341 overflow: hidden; | |
342 } | |
343 | |
344 .responsive-design-more-button { | |
345 -webkit-appearance: none; | |
346 border: 0; | |
347 background-color: transparent; | |
348 color: white; | |
349 opacity: 0.8; | |
350 font-size: 16px; | |
351 text-shadow: black 1px 1px; | |
352 } | |
353 | |
354 .responsive-design-more-button:hover { | |
355 opacity: 1; | |
356 } | |
357 | |
358 .responsive-design-more-button:active { | |
359 opacity: 0.8; | |
360 } | |
361 | |
362 /* Device section */ | |
363 | |
364 .responsive-design-section-device .responsive-design-section-decorator { | |
365 background: linear-gradient(to bottom, rgb(255, 186, 68), rgb(255, 119, 0)); | |
366 margin-left: 0; | |
367 } | |
368 | |
369 .responsive-design-section-device .device-select { | |
370 width: 140px; | |
371 } | |
372 | |
373 .responsive-design-section-device .mode-container { | |
374 display: inline-block; | |
375 width: 116px; | |
376 padding: 0 10px; | |
377 } | |
378 | |
379 .responsive-design-section-device .mode-select select { | |
380 width: 82px; | |
381 } | |
382 | |
383 .responsive-design-section-device .mode-select label { | |
384 margin-left: 4px; | |
385 color: rgb(255, 156, 0); | |
386 position: relative; | |
387 top: 1px; | |
388 } | |
389 | |
390 .responsive-design-section-device input[type='text'], | |
391 .responsive-design-section-device input[type='text']::-webkit-input-placeholder, | |
392 .responsive-design-section-device select { | |
393 color: rgb(255, 156, 0); | |
394 } | |
395 | |
396 .responsive-design-section-device input[type='checkbox']:checked:after { | |
397 background: rgb(255, 156, 0); | |
398 } | |
399 | |
400 /* Network section */ | |
401 | |
402 .responsive-design-section-network .responsive-design-section-decorator { | |
403 background: linear-gradient(to bottom, rgb(77, 170, 243), rgb(0, 130, 255)); | |
404 } | |
405 | |
406 .responsive-design-section-network .responsive-design-suite a { | |
407 height: 20px; | |
408 background-color: transparent; | |
409 border: 0; | |
410 line-height: 16px; | |
411 color: rgb(66, 175, 255); | |
412 cursor: pointer; | |
413 border-radius: 2px; | |
414 text-decoration: underline; | |
415 } | |
416 | |
417 /* Warning message */ | |
418 | |
419 .responsive-design-warning { | |
420 position: absolute; | |
421 left: 0; | |
422 right: 0; | |
423 top: 0; | |
424 overflow: hidden; | |
425 border-bottom: 1px solid rgb(187, 187, 187); | |
426 } | |
427 | |
428 /* Media query inspector */ | |
429 | |
430 .responsive-design-media-container { | |
431 position: absolute; | |
432 right: 0; | |
433 top: 0; | |
434 padding-bottom: 5px; | |
435 overflow: hidden; | |
436 } | |
OLD | NEW |