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

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

Issue 732603002: DevTools: align more status bar button usages. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 6 years, 1 month 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
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 position: relative; 8 position: relative;
9 background-color: rgb(0, 0, 0); 9 background-color: rgb(0, 0, 0);
10 overflow: hidden; 10 overflow: hidden;
(...skipping 89 matching lines...) Expand 10 before | Expand all | Expand 10 after
100 box-shadow: rgb(255, 255, 255) 0 0 3px; 100 box-shadow: rgb(255, 255, 255) 0 0 3px;
101 } 101 }
102 102
103 .responsive-design-page-scale-container .responsive-design-page-scale-button.sta tus-bar-item > .glyph { 103 .responsive-design-page-scale-container .responsive-design-page-scale-button.sta tus-bar-item > .glyph {
104 background-color: rgb(180, 180, 180); 104 background-color: rgb(180, 180, 180);
105 -webkit-mask-image: url(Images/responsiveDesign.png); 105 -webkit-mask-image: url(Images/responsiveDesign.png);
106 -webkit-mask-size: 112px 16px; 106 -webkit-mask-size: 112px 16px;
107 opacity: 1; 107 opacity: 1;
108 } 108 }
109 109
110 .responsive-design-page-scale-container .status-bar-item .glyph.shadow {
111 background-color: black !important;
112 }
113
114 @media (-webkit-min-device-pixel-ratio: 1.5) { 110 @media (-webkit-min-device-pixel-ratio: 1.5) {
115 .responsive-design-page-scale-container .responsive-design-page-scale-button .status-bar-item > .glyph { 111 .responsive-design-page-scale-container .responsive-design-page-scale-button .status-bar-item > .glyph {
116 -webkit-mask-image: url(Images/responsiveDesign_2x.png); 112 -webkit-mask-image: url(Images/responsiveDesign_2x.png);
117 } 113 }
118 } /* media */ 114 } /* media */
119 115
120 .responsive-design-page-scale-increase > .glyph { 116 .responsive-design-page-scale-increase > .glyph {
121 -webkit-mask-position: -81px 1px; 117 -webkit-mask-position: -81px 1px;
122 } 118 }
123 119
(...skipping 22 matching lines...) Expand all
146 .responsive-design-section { 142 .responsive-design-section {
147 display: flex; 143 display: flex;
148 flex: none; 144 flex: none;
149 flex-direction: column; 145 flex-direction: column;
150 white-space: nowrap; 146 white-space: nowrap;
151 align-items: stretch; 147 align-items: stretch;
152 justify-content: flex-start; 148 justify-content: flex-start;
153 padding-top: 1px; 149 padding-top: 1px;
154 } 150 }
155 151
156 .responsive-design-section .status-bar-item .glyph.shadow {
157 background-color: black !important;
158 }
159
160
161 .responsive-design-section-decorator { 152 .responsive-design-section-decorator {
162 height: 2px; 153 height: 2px;
163 margin-left: -2px; 154 margin-left: -2px;
164 margin-right: -1px; 155 margin-right: -1px;
165 position: relative; 156 position: relative;
166 } 157 }
167 158
168 .responsive-design-suite { 159 .responsive-design-suite {
169 display: flex; 160 display: flex;
170 flex-direction: row; 161 flex-direction: row;
(...skipping 287 matching lines...) Expand 10 before | Expand all | Expand 10 after
458 margin-right: 5px; 449 margin-right: 5px;
459 text-decoration: underline; 450 text-decoration: underline;
460 cursor: pointer; 451 cursor: pointer;
461 } 452 }
462 453
463 .responsive-design-toggle-media-inspector .glyph { 454 .responsive-design-toggle-media-inspector .glyph {
464 background-color: rgb(180, 180, 180); 455 background-color: rgb(180, 180, 180);
465 -webkit-mask-position: -128px -48px; 456 -webkit-mask-position: -128px -48px;
466 } 457 }
467 458
468 .responsive-design-toolbar button.responsive-design-toggle-media-inspector.toggl ed-on .glyph:not(.shadow) { 459 .responsive-design-toolbar button.responsive-design-toggle-media-inspector.toggl ed-on .glyph {
469 background-color: rgb(105, 194, 236) !important; 460 background-color: rgb(105, 194, 236) !important;
470 } 461 }
471 462
472 /* Media query inspector */ 463 /* Media query inspector */
473 464
474 .responsive-design-media-container { 465 .responsive-design-media-container {
475 position: absolute; 466 position: absolute;
476 right: 0; 467 right: 0;
477 top: 0; 468 top: 0;
478 padding-bottom: 5px; 469 padding-bottom: 5px;
(...skipping 77 matching lines...) Expand 10 before | Expand all | Expand 10 after
556 pointer-events: none; 547 pointer-events: none;
557 } 548 }
558 549
559 .media-inspector-label-right { 550 .media-inspector-label-right {
560 right: 4px; 551 right: 4px;
561 } 552 }
562 553
563 .media-inspector-label-left { 554 .media-inspector-label-left {
564 left: 4px; 555 left: 4px;
565 } 556 }
OLDNEW
« no previous file with comments | « Source/devtools/front_end/splitView.css ('k') | Source/devtools/front_end/ui/StatusBarButton.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698