[go: nahoru, domu]
Google Git
Sign in
chromium / devtools / devtools-frontend / f746fe4a57190be85ee170add03a16cf6cd4ba27 / . / front_end / ui / legacy / toolbar.css
blob: d6c925f208fc3683fd41c60de558bac0231c0d73 [file] [log] [blame]
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]1/*
2 * Copyright (c) 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:host {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]8 flex: none;
9 padding: 0 2px;
Wolfgang Beyer67638712020-08-31 13:38:49[diff] [blame]10}
11
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]12.toolbar-shadow {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]13 position: relative;
14 white-space: nowrap;
15 height: 26px;
16 overflow: hidden;
17 z-index: 12;
18 display: flex;
19 flex: none;
20 align-items: center;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]21}
22
23.toolbar-shadow.wrappable {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]24 flex-wrap: wrap;
25 overflow: visible;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]26}
27
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]28.toolbar-shadow.toolbar-grow-vertical {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]29 height: initial;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]30}
31
32.toolbar-shadow.vertical {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]33 flex-direction: column;
34 height: auto;
35 align-items: flex-start;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]36}
37
38.toolbar-item {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]39 position: relative;
40 display: flex;
41 background-color: transparent;
42 flex: none;
43 align-items: center;
44 justify-content: center;
45 padding: 0;
46 height: 26px;
47 border: none;
48 white-space: pre;
Erik Luo17da2b72019-01-07 22:14:37[diff] [blame]49}
50
51.toolbar-item,
52.toolbar-item .devtools-link {
Alex Rudenko57e68952021-07-20 07:19:49[diff] [blame]53 color: var(--color-text-secondary);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]54}
55
Patrick Brosset8f864162021-04-02 15:56:26[diff] [blame]56.toolbar-shadow.vertical .toolbar-item {
57 height: auto;
58 min-height: 26px;
59 white-space: normal;
60}
61
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]62.toolbar-dropdown-arrow {
Alex Rudenko383b35c2021-05-06 06:19:41[diff] [blame]63 background-color: var(--color-text-secondary);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]64 pointer-events: none;
65 flex: none;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]66}
67
Alex Rudenkoadc9a352020-07-06 06:48:01[diff] [blame]68.toolbar-button.dark-text .toolbar-dropdown-arrow {
Alex Rudenko383b35c2021-05-06 06:19:41[diff] [blame]69 background-color: var(--color-text-primary);
Alex Rudenkoadc9a352020-07-06 06:48:01[diff] [blame]70}
71
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]72select.toolbar-item:disabled + .toolbar-dropdown-arrow {
Mathias Bynensca9fa2d2020-05-19 15:23:40[diff] [blame]73 opacity: 50%;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]74}
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]75/* Toolbar item */
76
77.toolbar-button {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]78 white-space: nowrap;
79 overflow: hidden;
80 min-width: 28px;
81 background: transparent;
82 border-radius: 0;
83 cursor: pointer;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]84}
85
86.toolbar-text {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]87 margin: 0 5px;
88 flex: none;
Alex Rudenko383b35c2021-05-06 06:19:41[diff] [blame]89 color: var(--color-text-secondary);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]90}
91
92.toolbar-text:empty {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]93 margin: 0;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]94}
95
96.toolbar-has-dropdown {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]97 justify-content: space-between;
98 padding: 0 3px 0 5px;
99 border: 1px solid transparent;
Wolfgang Beyer13426402020-12-21 09:10:51[diff] [blame]100}
101
102.toolbar-has-dropdown-shrinkable {
Wolfgang Beyerd2a9af62020-12-10 16:17:02[diff] [blame]103 flex-shrink: 1;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]104}
105
106.toolbar-has-dropdown .toolbar-text {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]107 margin: 0 4px 0 0;
108 text-overflow: ellipsis;
109 flex: auto;
110 overflow: hidden;
111 text-align: right;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]112}
113
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]114.toolbar-has-glyph .toolbar-text {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]115 margin-left: -4px;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]116}
117
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]118.toolbar-render-as-links * {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]119 font-weight: initial;
Wolfgang Beyera4cb2882020-12-01 13:37:06[diff] [blame]120 color: var(--color-link);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]121 text-decoration: underline;
122 cursor: pointer;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]123}
124
Wolfgang Beyer83ae1012020-09-28 09:10:43[diff] [blame]125.toolbar-render-as-links button {
Peter Marshall47ad0e82020-12-15 09:07:20[diff] [blame]126 height: 15px;
Wolfgang Beyer83ae1012020-09-28 09:10:43[diff] [blame]127 margin: 2px;
128}
129
130.toolbar-render-as-links button:focus-visible {
131 outline: auto 5px -webkit-focus-ring-color;
132}
133
Alex Rudenko383b35c2021-05-06 06:19:41[diff] [blame]134:not(.toolbar-render-as-links) .toolbar-button:focus-visible::before {
Jack Lynch335e33d2020-09-29 01:17:13[diff] [blame]135 position: absolute;
136 top: 2px;
137 bottom: 2px;
138 left: 2px;
139 right: 2px;
Alex Rudenko383b35c2021-05-06 06:19:41[diff] [blame]140 background-color: var(--color-background-elevation-2);
Jack Lynch335e33d2020-09-29 01:17:13[diff] [blame]141 border-radius: 2px;
142 content: "";
Alex Rudenko3a547392021-05-18 06:24:37[diff] [blame]143 /* This ::before rule serves as a background for an element.
144 Setting z-index to make sure it's always below the content. */
145 z-index: -1;
Jack Lynch335e33d2020-09-29 01:17:13[diff] [blame]146}
147
Alex Rudenko2fc8c142021-03-10 12:48:50[diff] [blame]148.toolbar-icon {
Alex Rudenko383b35c2021-05-06 06:19:41[diff] [blame]149 --icon-color: var(--color-text-secondary);
Alex Rudenko2fc8c142021-03-10 12:48:50[diff] [blame]150
151 flex: none;
152}
153
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]154.toolbar-glyph {
Alex Rudenko383b35c2021-05-06 06:19:41[diff] [blame]155 background-color: var(--color-text-secondary);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]156 flex: none;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]157}
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]158/* Button */
159
160.toolbar-button:disabled {
Mathias Bynensca9fa2d2020-05-19 15:23:40[diff] [blame]161 opacity: 50%;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]162}
163
Patrick Brosset90b84242021-04-14 08:12:06[diff] [blame]164/* Two of the buttons are special in the main toolbar: the close button needs to
165be fixed to the right so it never goes out of the viewport even if other items
166push it. And the main menu button next to it that needs to make some space for
167it. */
168.toolbar-button.close-devtools {
169 position: fixed;
170 right: 0;
Patrick Brosset90b84242021-04-14 08:12:06[diff] [blame]171}
172
173:host-context(.right) .toolbar-button.main-menu,
174:host-context(.left) .toolbar-button.main-menu,
175:host-context(.bottom) .toolbar-button.main-menu {
176 margin-inline-end: 28px;
177}
178
Alex Rudenkoadc9a352020-07-06 06:48:01[diff] [blame]179.toolbar-button.toolbar-state-on .toolbar-glyph {
Alex Rudenko383b35c2021-05-06 06:19:41[diff] [blame]180 background-color: var(--color-primary);
Alex Rudenkoadc9a352020-07-06 06:48:01[diff] [blame]181}
182
Alex Rudenko2fc8c142021-03-10 12:48:50[diff] [blame]183.toolbar-button.toolbar-state-on .toolbar-icon {
Alex Rudenko383b35c2021-05-06 06:19:41[diff] [blame]184 --icon-color: var(--color-primary);
Alex Rudenko2fc8c142021-03-10 12:48:50[diff] [blame]185}
186
Alex Rudenkoadc9a352020-07-06 06:48:01[diff] [blame]187.toolbar-button.toolbar-state-on.toolbar-toggle-with-red-color .toolbar-glyph,
188.toolbar-button.toolbar-state-off.toolbar-default-with-red-color .toolbar-glyph {
Alex Rudenko383b35c2021-05-06 06:19:41[diff] [blame]189 background-color: var(--color-accent-red) !important; /* stylelint-disable-line declaration-no-important */
Alex Rudenkoadc9a352020-07-06 06:48:01[diff] [blame]190}
191
Alex Rudenko2fc8c142021-03-10 12:48:50[diff] [blame]192.toolbar-button.toolbar-state-on.toolbar-toggle-with-red-color .toolbar-icon,
193.toolbar-button.toolbar-state-off.toolbar-default-with-red-color .toolbar-icon {
Alex Rudenko383b35c2021-05-06 06:19:41[diff] [blame]194 --icon-color: var(--color-accent-red) !important; /* stylelint-disable-line declaration-no-important */
195
196 background-color: var(--color-accent-red) !important; /* stylelint-disable-line declaration-no-important */
Alex Rudenko2fc8c142021-03-10 12:48:50[diff] [blame]197}
198
Alex Rudenkoadc9a352020-07-06 06:48:01[diff] [blame]199.toolbar-button:not(.toolbar-has-glyph):not(.toolbar-has-dropdown):not(.largeicon-menu):not(.toolbar-button-secondary) {
200 font-weight: bold;
201}
202
203.toolbar-blue-on-hover .toolbar-button:not(.toolbar-state-on):enabled:hover:not(:active) {
Alex Rudenko383b35c2021-05-06 06:19:41[diff] [blame]204 background-color: var(--color-primary);
Alex Rudenkoadc9a352020-07-06 06:48:01[diff] [blame]205}
206
207.toolbar-blue-on-hover .toolbar-button:not(.toolbar-state-on):enabled:active:hover {
Alex Rudenko383b35c2021-05-06 06:19:41[diff] [blame]208 background-color: var(--color-primary);
Alex Rudenkoadc9a352020-07-06 06:48:01[diff] [blame]209}
210
211.toolbar-toggled-gray:not(.toolbar-render-as-links) .toolbar-button:not(.toolbar-has-glyph):not(.toolbar-has-dropdown):not(.largeicon-menu):hover {
Jack Franklin374ec392021-04-27 15:36:55[diff] [blame]212 background-color: var(--color-background-elevation-1);
Alex Rudenkoadc9a352020-07-06 06:48:01[diff] [blame]213}
214
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]215.toolbar-button.dark-text .toolbar-text {
Alex Rudenko383b35c2021-05-06 06:19:41[diff] [blame]216 color: var(--color-text-primary) !important; /* stylelint-disable-line declaration-no-important */
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]217}
218
Alex Rudenkoadc9a352020-07-06 06:48:01[diff] [blame]219.toolbar-button.toolbar-state-on .toolbar-text {
Alex Rudenkoa98043e2021-08-05 07:53:28[diff] [blame]220 color: var(--color-primary);
Alex Rudenko2fc8c142021-03-10 12:48:50[diff] [blame]221}
222
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]223:not(.toolbar-render-as-links) .toolbar-button:enabled:hover:not(:active) .toolbar-glyph {
Alex Rudenko383b35c2021-05-06 06:19:41[diff] [blame]224 background-color: var(--color-text-primary);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]225}
226
Alex Rudenko2fc8c142021-03-10 12:48:50[diff] [blame]227:not(.toolbar-render-as-links) .toolbar-button:enabled:hover:not(:active) .toolbar-icon {
Alex Rudenko383b35c2021-05-06 06:19:41[diff] [blame]228 --icon-color: var(--color-text-primary);
Alex Rudenko2fc8c142021-03-10 12:48:50[diff] [blame]229}
230
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]231:not(.toolbar-render-as-links) .toolbar-button:enabled:hover:not(:active) .toolbar-text {
Alex Rudenko383b35c2021-05-06 06:19:41[diff] [blame]232 color: var(--color-text-primary);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]233}
234
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]235.toolbar-blue-on-hover .toolbar-button:not(.toolbar-state-on):enabled:hover .toolbar-glyph {
Jack Franklinfd9dfaa2021-01-11 14:33:07[diff] [blame]236 background-color: var(--color-background);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]237}
238
Alex Rudenko2fc8c142021-03-10 12:48:50[diff] [blame]239.toolbar-blue-on-hover .toolbar-button:not(.toolbar-state-on):enabled:hover .toolbar-icon {
240 --icon-color: var(--color-background);
241}
242
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]243.toolbar-blue-on-hover .toolbar-button:not(.toolbar-state-on):enabled:hover .toolbar-text {
Alex Rudenko383b35c2021-05-06 06:19:41[diff] [blame]244 color: var(--color-text-primary);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]245}
246
Alex Rudenkoadc9a352020-07-06 06:48:01[diff] [blame]247.toolbar-button.toolbar-state-on:enabled:hover:not(:active) .toolbar-glyph {
Alex Rudenko383b35c2021-05-06 06:19:41[diff] [blame]248 background-color: var(--color-primary);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]249}
250
Alex Rudenko2fc8c142021-03-10 12:48:50[diff] [blame]251.toolbar-button.toolbar-state-on:enabled:hover:not(:active) .toolbar-icon {
Alex Rudenko383b35c2021-05-06 06:19:41[diff] [blame]252 --icon-color: var(--color-primary);
Alex Rudenko2fc8c142021-03-10 12:48:50[diff] [blame]253}
254
Pavel Feldman70a90c02019-04-11 03:53:58[diff] [blame]255.toolbar-button.toolbar-state-on:enabled:hover:not(:active) .toolbar-text {
Alex Rudenko383b35c2021-05-06 06:19:41[diff] [blame]256 color: var(--color-text-primary);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]257}
258
259.toolbar-toggled-gray .toolbar-button.toolbar-state-on {
Tim van der Lippeaf02dec2021-05-04 13:56:19[diff] [blame]260 background-color: var(--color-background-elevation-1) !important; /* stylelint-disable-line declaration-no-important */
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]261}
262
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]263/* Checkbox */
264
265.toolbar-item.checkbox {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]266 padding: 0 5px 0 2px;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]267}
268
269.toolbar-item.checkbox:hover {
Alex Rudenko383b35c2021-05-06 06:19:41[diff] [blame]270 color: var(--color-text-primary);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]271}
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]272/* Select */
273
274.toolbar-select-container {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]275 display: inline-flex;
276 flex-shrink: 0;
277 margin-right: 6px;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]278}
279
280select.toolbar-item {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]281 min-width: 38px;
Mathias Bynense4de6b32020-07-14 14:46:31[diff] [blame]282 appearance: none;
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]283 border: 1px solid transparent;
284 border-radius: 0;
285 padding: 0 13px 0 5px;
286 margin-right: -10px;
287 position: relative;
288 height: 22px;
289 margin-top: 2px;
290 margin-bottom: 2px;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]291}
292
Alex Rudenkoadc9a352020-07-06 06:48:01[diff] [blame]293select.toolbar-item:disabled {
294 opacity: 50%;
295}
296
Peter Marshall9a3d85f2020-08-12 14:38:00[diff] [blame]297select.toolbar-item:focus-visible {
Alex Rudenko383b35c2021-05-06 06:19:41[diff] [blame]298 background: var(--color-background-elevation-2);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]299 border-radius: 2px;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]300}
301
Peter Marshall9a3d85f2020-08-12 14:38:00[diff] [blame]302select.toolbar-item:focus-visible > * {
Jack Franklinfd9dfaa2021-01-11 14:33:07[diff] [blame]303 background: var(--color-background);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]304}
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]305/* Input */
306
307.toolbar-input {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]308 width: 120px;
309 height: 19px;
Tim van der Lippef746fe42021-11-04 16:11:54[diff] [blame^]310 padding: 4px 3px 3px 3px;
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]311 margin: 1px 3px;
Jack Franklinfd9dfaa2021-01-11 14:33:07[diff] [blame]312 background-color: var(--color-background);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]313 border: 1px solid transparent;
314 min-width: 35px;
Jack Franklin9b1435f2021-04-28 13:25:49[diff] [blame]315 box-shadow: var(--legacy-focus-ring-inactive-shadow);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]316}
317
Erik Luo94efa872018-07-02 19:32:06[diff] [blame]318.toolbar-input.focused,
319.toolbar-input:not(.toolbar-input-empty) {
Jack Franklin9b1435f2021-04-28 13:25:49[diff] [blame]320 box-shadow: var(--legacy-focus-ring-active-shadow);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]321}
322
323.toolbar-input > input {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]324 border: none;
325 flex-grow: 1;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]326}
327
328.toolbar-input-clear-button {
Mathias Bynensca9fa2d2020-05-19 15:23:40[diff] [blame]329 opacity: 70%;
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]330 flex-basis: 13px;
331 flex-shrink: 0;
332 height: 16px;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]333}
334
Jack Franklin63934b52020-12-03 10:01:15[diff] [blame]335.toolbar-input-clear-button > .search-cancel-button {
336 display: block;
337}
338
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]339.toolbar-input-clear-button:hover {
Mathias Bynensca9fa2d2020-05-19 15:23:40[diff] [blame]340 opacity: 99%;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]341}
342
343.toolbar-input-empty .toolbar-input-clear-button {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]344 display: none;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]345}
346
347.toolbar-prompt-proxy {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]348 flex: 1;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]349}
350
351.toolbar-input-prompt {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]352 flex: 1;
353 overflow: hidden;
354 white-space: nowrap;
355 cursor: auto;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]356}
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]357/* Separator */
358
359.toolbar-divider {
Alex Rudenko383b35c2021-05-06 06:19:41[diff] [blame]360 background-color: var(--color-details-hairline);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]361 width: 1px;
362 margin: 5px 4px;
363 height: 16px;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]364}
365
366.toolbar-spacer {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]367 flex: auto;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]368}
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]369/* Long click */
370
371.long-click-glyph {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]372 position: absolute;
Alex Rudenko383b35c2021-05-06 06:19:41[diff] [blame]373 background-color: var(--color-text-primary);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]374 top: 0;
375 left: 0;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]376}
377
378.toolbar-button.emulate-active {
Alex Rudenko383b35c2021-05-06 06:19:41[diff] [blame]379 background-color: var(--color-background-elevation-2);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]380}
381
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]382.toolbar-shadow.floating {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]383 flex-direction: column;
384 height: auto;
Jack Franklinfd9dfaa2021-01-11 14:33:07[diff] [blame]385 background-color: var(--color-background);
Alex Rudenko383b35c2021-05-06 06:19:41[diff] [blame]386 border: 1px solid var(--color-details-hairline);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]387 margin-top: -1px;
388 width: 28px;
389 left: -2px;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]390}
391
Tim van der Lippef746fe42021-11-04 16:11:54[diff] [blame^]392input[is=history-input] {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]393 border: 1px solid transparent;
394 line-height: 16px;
395 padding: 1px;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]396}
397
Tim van der Lippef746fe42021-11-04 16:11:54[diff] [blame^]398input[is=history-input]:hover {
Jack Franklin9b1435f2021-04-28 13:25:49[diff] [blame]399 box-shadow: var(--legacy-focus-ring-inactive-shadow);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]400}
401
Tim van der Lippef746fe42021-11-04 16:11:54[diff] [blame^]402input[is=history-input]:focus,
403input[is=history-input]:not(:placeholder-shown) {
Jack Franklin9b1435f2021-04-28 13:25:49[diff] [blame]404 box-shadow: var(--legacy-focus-ring-active-shadow);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]405}
Erik Luo8af37bc2018-05-23 01:53:12[diff] [blame]406
Yang Guocb324bb2021-10-20 16:59:06[diff] [blame]407.toolbar-item.highlight::before {
408 content: "";
409 position: absolute;
410 top: 2px;
411 left: 2px;
412 right: 2px;
413 bottom: 2px;
414 border-radius: 2px;
415 background: var(--color-primary);
416 z-index: -1;
417}
418
419.toolbar-item.highlight {
420 color: var(--color-button-primary-text);
421}
422
423.toolbar-item.highlight > .icon-mask {
424 background: var(--color-button-primary-text);
Erik Luo8af37bc2018-05-23 01:53:12[diff] [blame]425}
Kham Udom047cb692020-02-03 22:30:11[diff] [blame]426
Sigurd Schneider311b7462021-03-05 10:00:17[diff] [blame]427devtools-icon.leading-issue-icon {
Sigurd Schneiderb15de2e2021-01-15 08:45:42[diff] [blame]428 margin: 0 7px;
Kateryna Prokopenko29d6f5d2020-10-15 07:44:09[diff] [blame]429}
430
Kham Udom047cb692020-02-03 22:30:11[diff] [blame]431@media (forced-colors: active) {
Alex Rudenkoadc9a352020-07-06 06:48:01[diff] [blame]432 .toolbar-button:disabled {
433 opacity: 100%;
Guangyue Xua9241db2021-10-01 21:47:05[diff] [blame]434 color: Graytext;
Alex Rudenkoadc9a352020-07-06 06:48:01[diff] [blame]435 }
436
437 .toolbar-item,
438 .toolbar-text {
439 color: ButtonText;
440 }
441
Guangyue Xua9241db2021-10-01 21:47:05[diff] [blame]442 .toolbar-button:disabled .toolbar-text {
443 color: Graytext;
444 }
445
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]446 select.toolbar-item:disabled,
447 select.toolbar-item:disabled + .toolbar-dropdown-arrow {
Mathias Bynensca9fa2d2020-05-19 15:23:40[diff] [blame]448 opacity: 100%;
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]449 background-color: Graytext;
450 }
451
Alex Rudenkoadc9a352020-07-06 06:48:01[diff] [blame]452 .toolbar-button.toolbar-state-on .toolbar-glyph {
453 forced-color-adjust: none;
454 background-color: Highlight;
455 }
456
Alex Rudenko2fc8c142021-03-10 12:48:50[diff] [blame]457 .toolbar-button.toolbar-state-on .toolbar-icon {
458 --icon-color: Highlight;
459
460 forced-color-adjust: none;
461 }
462
Alex Rudenkoadc9a352020-07-06 06:48:01[diff] [blame]463 .toolbar-button.toolbar-state-on .toolbar-text {
464 forced-color-adjust: none;
465 color: Highlight;
466 }
467
468 :not(.toolbar-render-as-links) .toolbar-button:enabled:hover:not(:active) .toolbar-text,
469 :not(.toolbar-render-as-links) .toolbar-button:enabled:focus:not(:active) .toolbar-text {
470 color: HighlightText;
471 }
472
Tim van der Lippef746fe42021-11-04 16:11:54[diff] [blame^]473 .toolbar-button:disabled [is=ui-icon].icon-mask {
Alex Rudenkoadc9a352020-07-06 06:48:01[diff] [blame]474 background-color: GrayText;
475 color: GrayText;
476 }
477
478 :not(.toolbar-render-as-links) .toolbar-button:disabled .toolbar-glyph {
479 background-color: GrayText;
480 color: GrayText;
481 }
482
Alex Rudenko2fc8c142021-03-10 12:48:50[diff] [blame]483 :not(.toolbar-render-as-links) .toolbar-button:disabled .toolbar-icon {
484 --icon-color: GrayText;
485
486 color: GrayText;
487 }
488
Alex Rudenkoadc9a352020-07-06 06:48:01[diff] [blame]489 .toolbar-button:enabled.hover:not(:active) .toolbar-glyph,
490 .toolbar-button:focus,
491 .toolbar-button:hover:enabled,
492 .toolbar-toggled-gray:not(.toolbar-render-as-links) .toolbar-button:not(.toolbar-has-glyph):not(.toolbar-has-dropdown):not(.largeicon-menu):hover {
493 forced-color-adjust: none;
494 background-color: Highlight;
495 }
496
Alex Rudenko2fc8c142021-03-10 12:48:50[diff] [blame]497 .toolbar-button:enabled:hover .toolbar-icon,
498 .toolbar-button:enabled:focus .toolbar-icon,
499 :not(.toolbar-render-as-links) .toolbar-button:enabled:hover .toolbar-icon,
500 :not(.toolbar-render-as-links) .toolbar-button:enabled:focus .toolbar-icon,
501 :not(.toolbar-render-as-links) .toolbar-button:enabled:hover:not(:active) .toolbar-icon {
502 --icon-color: HighlightText;
503 }
504
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]505 :not(.toolbar-render-as-links) .toolbar-button:enabled:hover .toolbar-glyph,
506 :not(.toolbar-render-as-links) .toolbar-button:enabled:focus .toolbar-glyph,
507 :not(.toolbar-render-as-links) .toolbar-button:enabled:hover:not(:active) .toolbar-glyph,
Tim van der Lippef746fe42021-11-04 16:11:54[diff] [blame^]508 .toolbar-button:enabled:hover [is=ui-icon].icon-mask,
509 .toolbar-button:enabled:focus [is=ui-icon].icon-mask {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]510 background-color: HighlightText;
511 }
512
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]513 .toolbar-input {
514 forced-color-adjust: none;
515 background: canvas;
Jack Franklin9b1435f2021-04-28 13:25:49[diff] [blame]516 box-shadow: var(--legacy-focus-ring-inactive-shadow);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]517 }
518
519 .toolbar-input.focused,
520 .toolbar-input:not(.toolbar-input-empty) {
521 forced-color-adjust: none;
522 background: canvas;
Jack Franklin9b1435f2021-04-28 13:25:49[diff] [blame]523 box-shadow: var(--legacy-focus-ring-active-shadow);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]524 }
525
526 .toolbar-input:hover {
Jack Franklin9b1435f2021-04-28 13:25:49[diff] [blame]527 box-shadow: var(--legacy-focus-ring-active-shadow);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]528 }
529
530 .toolbar-item .devtools-link {
531 color: linktext;
532 }
Kham Udom047cb692020-02-03 22:30:11[diff] [blame]533}