Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1037)

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/emulation/responsiveDesignView.css

Issue 1647653003: [DevTools] Remove old responsive design v1 code. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(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 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698