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

Side by Side Diff: Source/devtools/front_end/responsiveDesignView.css

Issue 343563003: DevTools: beautify the responsive design warning message. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Rebaselined Created 6 years, 6 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 | Annotate | Revision Log
« no previous file with comments | « Source/devtools/front_end/ResponsiveDesignView.js ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 /* 1 /*
2 * Copyright 2014 The Chromium Authors. All rights reserved. 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 3 * Use of this source code is governed by a BSD-style license that can be
4 * found in the LICENSE file. 4 * found in the LICENSE file.
5 */ 5 */
6 6
7 .responsive-design { 7 .responsive-design {
8 overflow: hidden; 8 overflow: hidden;
9 position: relative; 9 position: relative;
10 } 10 }
(...skipping 322 matching lines...) Expand 10 before | Expand all | Expand 10 after
333 color: rgb(65, 175, 255); 333 color: rgb(65, 175, 255);
334 } 334 }
335 335
336 .responsive-design-section-network .responsive-design-section-separator { 336 .responsive-design-section-network .responsive-design-section-separator {
337 background: linear-gradient(to bottom, rgb(77, 170, 243), rgb(0, 130, 255)); 337 background: linear-gradient(to bottom, rgb(77, 170, 243), rgb(0, 130, 255));
338 } 338 }
339 339
340 /* Warning message */ 340 /* Warning message */
341 341
342 .responsive-design-warning { 342 .responsive-design-warning {
343 background-color: rgb(0, 0, 0); 343 background-color: rgb(252, 234, 156);
344 color: rgb(255, 255, 255); 344 color: #222;
345 position: absolute; 345 position: absolute;
346 left: 0; 346 left: 0;
347 right: 0; 347 right: 0;
348 top: 0; 348 top: 0;
349 padding: 2px; 349 padding: 2px 4px;
350 white-space: nowrap; 350 white-space: nowrap;
351 display: flex;
352 align-items: center;
353 border-bottom: 1px solid rgb(171, 171, 171);
351 } 354 }
352 355
353 .responsive-design-warning::before { 356 .responsive-design-warning > span {
354 background-image: url(Images/statusbarButtonGlyphs.png); 357 flex: auto;
355 background-size: 320px 144px; 358 padding-left: 3px;
356 width: 10px;
357 height: 10px;
358 content: "";
359 position: relative;
360 top: 2px;
361 background-position: -202px -107px;
362 float: left;
363 margin-right: 4px;
364 margin-left: 2px;
365 } 359 }
366
367 @media (-webkit-min-device-pixel-ratio: 1.5) {
368 .responsive-design-warning::before {
369 background-image: url(Images/statusbarButtonGlyphs_2x.png);
370 }
371 } /* media */
372
373 .responsive-design-warning-close {
374 position: absolute;
375 right: 3px;
376 top: 3px;
377 width: 13px;
378 height: 13px;
379 cursor: pointer;
380 background-image: url(Images/statusbarButtonGlyphs.png);
381 background-size: 320px 144px;
382 background-position: -175px -96px;
383 display: inline-block;
384 }
385
386 @media (-webkit-min-device-pixel-ratio: 1.5) {
387 .responsive-design-warning-close {
388 background-image: url(Images/statusbarButtonGlyphs_2x.png);
389 }
390 } /* media */
391
392 .responsive-design-warning-close:hover,
393 .responsive-design-warning-close:active {
394 opacity: 0.7;
395 }
OLDNEW
« no previous file with comments | « Source/devtools/front_end/ResponsiveDesignView.js ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698