first part of syncing LCARStrek with Firefox 55 browser windows theme changes
[themes.git] / LCARStrek / browser / browser.css
CommitLineData
9099c61d
RK
1/* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
acb0e9b8 4
5@import url("chrome://global/skin/");
fcaeefc2 6@import url("downloads/indicator.css");
acb0e9b8 7
8@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
319c6529 9@namespace html url("http://www.w3.org/1999/xhtml");
cae267ab 10@namespace svg url("http://www.w3.org/2000/svg");
319c6529
RK
11
12toolbar {
13 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar");
14}
acb0e9b8 15
7d3f7f14 16toolbar[customizable="true"] {
43cc2806
RK
17 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-browsercustom");
18}
19
ee49f520
RK
20@media (-moz-mac-graphite-theme), (-moz-mac-lion-theme), (-moz-mac-yosemite-theme) {
21 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
96b206fe
RK
22 toolbar[customizable="true"]:not([nowindowdrag="true"]) {
23 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
24 }
25}
26
41279e76
RK
27toolbar[type="menubar"][autohide="true"] {
28 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide");
29}
30
7d3f7f14 31#toolbar-menubar[autohide="true"] {
43cc2806
RK
32 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide-browsercustom");
33}
34
acb0e9b8 35menubar {
319c6529 36 -moz-binding: url("chrome://global/skin/globalBindings.xml#menubar");
acb0e9b8 37}
38
38bd4bf1
RK
39/* === BEGIN browser.inc.css === */
40
1a44a283
RK
41/* Go button */
42.urlbar-go-button {
43 padding: 0 3px;
44 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
45}
46
47.urlbar-go-button {
48 -moz-image-region: rect(0, 42px, 14px, 28px);
49}
50
51.urlbar-go-button:hover {
52 -moz-image-region: rect(14px, 42px, 28px, 28px);
53}
54
55.urlbar-go-button:-moz-locale-dir(rtl) {
56 transform: scaleX(-1);
57}
58
59@media (min-resolution: 1.1dppx) {
60 .urlbar-go-button {
61 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
62 -moz-image-region: rect(0, 84px, 28px, 56px);
63 width: 14px;
64 }
65
66 .urlbar-go-button:hover {
67 -moz-image-region: rect(28px, 84px, 56px, 56px);
68 }
69
70 .urlbar-go-button:hover:active {
71 -moz-image-region: rect(56px, 84px, 84px, 56px);
72 }
73}
74
38bd4bf1
RK
75/* Zoom button */
76#urlbar-zoom-button {
77 margin: 0 3px;
78 font-size: .8em;
79 padding: 0 8px;
80 border-radius: 1em;
81/* background-color: hsla(0,0%,0%,.05);
82 border: 1px solid ThreeDLightShadow;*/
83}
84
85#urlbar-zoom-button[animate="true"] {
86 animation-name: urlbar-zoom-reset-pulse;
87 animation-duration: 250ms;
88}
89
90#urlbar-zoom-button:hover {
91/* background-color: hsla(0,0%,0%,.1);*/
92}
93
94#urlbar-zoom-button:hover:active {
95/* background-color: hsla(0,0%,0%,.15);*/
96}
97
98#urlbar-zoom-button > .toolbarbutton-text {
99 display: -moz-box;
100}
101
102#urlbar-zoom-button > .toolbarbutton-icon {
103 display: none;
104}
105
1a44a283
RK
106/* Page action button */
107#urlbar-page-action-button {
108 list-style-image: url("chrome://browser/skin/page-action.svg");
1a44a283
RK
109/* margin: 0;
110 padding: 0 6px;*/
05f7d22f 111 -moz-context-properties: fill;
1a44a283
RK
112 fill: currentColor;
113}
114
115#urlbar-page-action-button > .toolbarbutton-icon {
116 width: 16px;
117}
118
119#page-action-copy-url-button {
120 list-style-image: url("chrome://browser/skin/copy-url.svg");
121 -moz-context-properties: fill;
122 fill: currentColor;
123}
124
125#page-action-email-link-button {
126 list-style-image: url("chrome://browser/skin/email-link.svg");
127 -moz-context-properties: fill;
128 fill: currentColor;
129}
130
05f7d22f
RK
131#page-action-send-to-device-button {
132 list-style-image: url("chrome://browser/skin/device-mobile.svg");
133 -moz-context-properties: fill;
134 fill: currentColor;
135}
136
137.page-action-sendToDevice-device[clientType=mobile] {
138 list-style-image: url("chrome://browser/skin/device-mobile.svg");
139 -moz-context-properties: fill;
140 fill: currentColor;
141}
142
143.page-action-sendToDevice-device[clientType=desktop] {
144 list-style-image: url("chrome://browser/skin/device-desktop.svg");
145 -moz-context-properties: fill;
146 fill: currentColor;
147}
148
149#page-action-sendToDevice-fxa-button {
150 list-style-image: url("chrome://browser/skin/sync.svg");
151 -moz-context-properties: fill;
152 fill: currentColor;
153}
154
38bd4bf1
RK
155/* === END browser.inc.css === */
156
e548e22e 157:root {
b1dfcf32
RK
158 /*--backbutton-urlbar-overlap: 5px;*/
159
7327c957
RK
160 /* icon width + border + horizontal padding (includes the overlap from backbutton-urlbar-overlap) */
161 --forwardbutton-width: 27px;
162 /* icon width + border + horizontal padding (without the overlap from backbutton-urlbar-overlap) /
163 --forwardbutton-width: 25px;*/
164
b1dfcf32 165 --identity-box-verified-background-color: #000000;
c9b0a396
RK
166
167 --panel-separator-color: #A09090;
d23bf94a
RK
168 --arrowpanel-hover: #FFCF00;
169 --arrowpanel-active: #FF9F00;
170 --arrowpanel-dimmed: #402000;
1cf9b082 171 --arrowpanel-dimmed-further: #794900;
b1d1a8bb 172 --arrowpanel-dimmed-even-further: #603000;
c9b0a396 173
c9b0a396 174 --urlbar-separator-color: #9C9CFF;
e548e22e
RK
175}
176
319c6529
RK
177#menubar-items {
178 -moz-box-orient: vertical; /* for flex hack */
acb0e9b8 179}
180
319c6529
RK
181#main-menubar {
182 -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
183}
184
63ada306
RK
185/* ::::: primary toolbar ::::: */
186
187.toolbar-primary > .toolbar-box > .toolbar-holder {
270cbf0c 188 background-color: #A09090;
63ada306
RK
189}
190
191.toolbar-primary > .toolbar-box > .toolbar-startcap,
192.toolbar-primary > .toolbar-box > .toolbar-endcap {
193 background-color: #9C9CFF;
194}
195
e20c83c3
RK
196/* Hides the titlebar-placeholder underneath the window caption buttons when we
197 are not autohiding the menubar. */
198#toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
199 display: none;
200}
201
43cc2806
RK
202/* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
203 toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
204 of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
db1c5db1
RK
205#toolbar-menubar:not([autohide=true]) ~ #TabsToolbar:not([inFullscreen]),
206#toolbar-menubar[autohide=true]:not([inactive]) ~ #TabsToolbar:not([inFullscreen]) {
43cc2806
RK
207/* margin-top: 3px;*/
208}
209
43371c9b
RK
210#main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
211#main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
19988d2d 212/* margin-top: var(--space-above-tabbar);*/
43cc2806
RK
213}
214
ee49f520
RK
215@media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
216 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
4711fba5 217 #main-window[tabsintitlebar]:not([inFullscreen="true"]) #TabsToolbar {
54d92f05
RK
218 padding-left: 60px;
219 }
43cc2806
RK
220}
221
018d70fb
RK
222#main-window[tabsintitlebar] #toolbar-menubar .toolbar-endcap {
223 /* the titlebar buttons are shown right over the endcap but we have no power over the buttonbox position just for this case, so hide the endcap */
224 display: none;
43cc2806 225}
63ada306 226
66b04a00
RK
227#navigator-toolbox,
228#navigator-toolbox > toolbar {
319c6529
RK
229}
230
9abeb12c
RK
231#navigator-toolbox::after {
232 content: "";
233 display: -moz-box;
234 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
d23bf94a 235 /*border-bottom: 1px solid ThreeDShadow;*/
9abeb12c 236}
9abeb12c 237
3d64e0ce
RK
238#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
239}
240
9168a62c
RK
241#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
242 overflow: -moz-hidden-unscrollable;
243 max-height: 4em;
244 transition: min-height 170ms ease-out, max-height 170ms ease-out;
245}
246
247#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
248 min-height: 0.1px;
249 max-height: 0;
250 transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
251}
252
ee49f520
RK
253@media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
254 /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
255 /* Indent also due to non-applicable aero rule in original Windows theme. */
c0f6797e
RK
256 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
257 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
258 /* like menubar */
259 background-color: #6000CF;
260 color: #FF9F00;
319c6529
RK
261 }
262
c0f6797e
RK
263 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
264 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
265 background-color: #8050B0;
266 color: #FF9F00;
319c6529
RK
267 }
268
dccbbf95
RK
269 #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
270 /*color: inherit;*/
271 }
272
c0f6797e
RK
273 #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
274 visibility: hidden;
275 }
319c6529 276
c0f6797e
RK
277 #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
278 -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
279 visibility: visible;
280 }
8d154261
RK
281}
282
ee49f520
RK
283@media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
284 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
8d154261
RK
285 #titlebar-buttonbox > .titlebar-button {
286 display: none;
287 }
8d154261 288}
319c6529 289
c0f6797e
RK
290#nav-bar {
291 /* Position the toolbar above the bottom of background tabs */
292 position: relative;
293 z-index: 1;
82b4252f
RK
294}
295
c0f6797e
RK
296#personal-bookmarks {
297/* min-height: 24px; */
319c6529
RK
298}
299
bc685759
RK
300#PersonalToolbar > #home-button {
301 -moz-box-orient: horizontal;
302}
303
304#PersonalToolbar > #home-button > .toolbarbutton-text {
305 display: block;
306}
307
c0f6797e
RK
308#print-preview-toolbar:not(:-moz-lwtheme) {
309 /* -moz-appearance: toolbox; */
82b4252f
RK
310}
311
c0f6797e 312#browser-bottombox:not(:-moz-lwtheme) {
319c6529
RK
313}
314
315/* ::::: titlebar ::::: */
316
5305ef8d
RK
317#titlebar {
318 /* like menubar */
319 background-color: #6000CF;
320 color: #FF9F00;
321}
322#titlebar:-moz-window-inactive {
323 background-color: #8050B0;
324 color: #FF9F00;
325}
326
319c6529 327#main-window[sizemode="normal"] > #titlebar {
5305ef8d
RK
328 margin-top: -3px;
329 margin-bottom: 3px;
319c6529
RK
330}
331
332#main-window[sizemode="maximized"] > #titlebar {
5305ef8d 333 margin-top: 4px;
319c6529
RK
334}
335
ee49f520
RK
336@media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
337 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
58d9f24a
RK
338 #main-window[sizemode="normal"] > #titlebar,
339 #main-window[sizemode="maximized"] > #titlebar {
4711fba5
RK
340 margin-top: 19px;
341 /* There is a margin-bottom set to -23 by code. */
54d92f05
RK
342 }
343}
344
43cc2806
RK
345/* The button box must appear on top of the navigator-toolbox in order for
346 * click and hover mouse events to work properly for the button in the restored
347 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
348 * can swallow those events. It will also place the buttons above the fog on
349 * themes with Aero Glass.
350 */
83ac1f44
RK
351#titlebar-buttonbox,
352#main-window[sizemode="maximized"] #titlebar-buttonbox {
b7f3670c
RK
353 -moz-appearance: none;
354 margin-top: 6px;
355 margin-top: 4px;
dae45075 356 margin-inline-end: 3px;
43cc2806 357 z-index: 1;
319c6529
RK
358}
359
319c6529
RK
360.titlebar-placeholder[type="appmenu-button"] {
361 margin-left: 4px;
362}
363
364.titlebar-placeholder[type="caption-buttons"] {
365 margin-left: 10px;
366}
367
368/* titlebar command buttons */
319c6529 369#titlebar-min {
19988d2d 370 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize");
5305ef8d
RK
371}
372
373#titlebar-min:hover {
19988d2d 374 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize-hover");
319c6529
RK
375}
376
377#titlebar-max {
19988d2d 378 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize");
5305ef8d
RK
379}
380
381#titlebar-max:hover {
19988d2d 382 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize-hover");
319c6529
RK
383}
384
385#main-window[sizemode="maximized"] #titlebar-max {
19988d2d 386 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore");
5305ef8d
RK
387}
388
389#main-window[sizemode="maximized"] #titlebar-max:hover {
19988d2d 390 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore-hover");
319c6529
RK
391}
392
393#titlebar-close {
19988d2d 394 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close");
5305ef8d
RK
395}
396
397#titlebar-close:hover {
19988d2d 398 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-hover");
acb0e9b8 399}
400
ee49f520
RK
401@media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
402 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
54d92f05
RK
403 #titlebar-fullscreen-button {
404 -moz-appearance: none;
405 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon.png");
406 -moz-image-region: rect(0px, 16px, 16px, 0px);
407 }
408
409 #titlebar-fullscreen-button:hover {
410 -moz-image-region: rect(0px, 32px, 16px, 16px);
411 }
412
413 @media (min-resolution: 2dppx) {
414 #titlebar-fullscreen-button {
415 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon@2x.png");
416 -moz-image-region: rect(0px, 32px, 32px, 0px);
417 }
418
419 #titlebar-fullscreen-button:hover {
420 -moz-image-region: rect(0px, 64px, 32px, 32px);
421 }
422 }
423}
424
425
acb0e9b8 426/* ::::: bookmark buttons ::::: */
427
c0f6797e
RK
428toolbarbutton.bookmark-item:not(.subviewbutton),
429#personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
430/* margin: 0;
db1c5db1
RK
431 padding: 2px 3px;
432 -moz-appearance: none;
433 border: 1px solid transparent;*/
c0f6797e
RK
434}
435
db1c5db1
RK
436toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]) {
437/* border-color: var(--toolbarbutton-hover-bordercolor);
438 background: var(--toolbarbutton-hover-background);*/
439}
440
441toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),toolbarbutton.bookmark-item[open="true"] {
442/* border-color: var(--toolbarbutton-active-bordercolor);
443 box-shadow: var(--toolbarbutton-active-boxshadow);
444 background: var(--toolbarbutton-active-background);*/
c0f6797e
RK
445}
446
26125509
RK
447.bookmark-item > .toolbarbutton-icon,
448#personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
acb0e9b8 449 width: 16px;
450 height: 16px;
dae45075
RK
451 margin-inline-start: 1px;
452 margin-inline-end: 2px;
bc685759
RK
453 margin-top: 1px;
454 margin-bottom: 1px;
acb0e9b8 455}
456
26125509
RK
457/* Force the display of the label for bookmarks */
458.bookmark-item > .toolbarbutton-text,
459#personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
acb0e9b8 460 display: -moz-box !important;
461}
462
319c6529
RK
463.bookmark-item > .toolbarbutton-menu-dropmarker {
464 display: none;
465}
466
26125509 467#bookmarks-toolbar-placeholder {
8da9da4e 468 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
9e88a441 469 -moz-box-orient: horizontal;
319c6529
RK
470}
471
e20c83c3
RK
472toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
473#personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
474 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
475}
476
477/* ----- BOOKMARK STAR ANIMATION ----- */
478
479@keyframes animation-bookmarkAdded {
480 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
481 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
482 80% { opacity: 1; }
483 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
484}
485
486@keyframes animation-bookmarkPulse {
487 from { transform: scale(1); }
488 50% { transform: scale(1.3); }
489 to { transform: scale(1); }
490}
491
492#bookmarked-notification-container {
493 min-height: 1px;
494 min-width: 1px;
495 height: 1px;
496 margin-bottom: -1px;
497 z-index: 5;
498 position: relative;
499}
500
501#bookmarked-notification {
502 background-size: 16px;
503 background-position: center;
504 background-repeat: no-repeat;
505 width: 16px;
506 height: 16px;
507 opacity: 0;
508}
509
c0f6797e
RK
510#bookmarked-notification-dropmarker-anchor {
511 z-index: -1;
512 position: relative;
513}
514
515#bookmarked-notification-dropmarker-icon {
516 width: 18px;
517 height: 18px;
518 visibility: hidden;
519}
520
e20c83c3
RK
521#bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
522 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
523 animation: animation-bookmarkAdded 800ms;
524 animation-timing-function: ease, ease, ease;
525}
526
527#bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
c0f6797e
RK
528 list-style-image: none !important;
529}
530
531#bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
532 visibility: visible;
e20c83c3
RK
533 animation: animation-bookmarkPulse 300ms;
534 animation-delay: 600ms;
535 animation-timing-function: ease-out;
536}
537
319c6529
RK
538/* ::::: bookmark menus ::::: */
539
540menu.bookmark-item,
541menuitem.bookmark-item {
542 min-width: 0;
ab799a7a 543 max-width: 32em;
319c6529
RK
544}
545
e20c83c3 546.bookmark-item:not(.subviewbutton) > .menu-iconic-left {
319c6529
RK
547 margin-top: 0;
548 margin-bottom: 0;
549}
550
551.bookmark-item > .menu-iconic-left > .menu-iconic-icon {
dae45075 552 padding-inline-start: 0px;
319c6529
RK
553}
554
555/* ::::: bookmark items ::::: */
556
557.bookmark-item {
dbad77ea 558 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
8da9da4e 559 -moz-image-region: auto;
319c6529
RK
560}
561
562.bookmark-item[container] {
563 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
8da9da4e 564 -moz-image-region: auto;
319c6529
RK
565}
566
567.bookmark-item[container][open] {
568 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
8da9da4e 569 -moz-image-region: auto;
319c6529
RK
570}
571
8da9da4e
RK
572.bookmark-item[container][livemark] {
573 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
319c6529
RK
574 -moz-image-region: auto;
575}
576
577.bookmark-item[container][livemark] .bookmark-item {
8da9da4e 578 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
719b06bc 579 -moz-image-region: rect(0px, 16px, 16px, 0px);
319c6529
RK
580}
581
eec397be 582.bookmark-item[container][livemark] .bookmark-item[visited] {
719b06bc 583 -moz-image-region: rect(0px, 32px, 16px, 16px);
eec397be
RK
584}
585
319c6529 586.bookmark-item[container][query] {
8da9da4e 587 list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
319c6529
RK
588 -moz-image-region: auto;
589}
590
591.bookmark-item[query][tagContainer] {
592 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
593 -moz-image-region: auto;
594}
595
596.bookmark-item[query][dayContainer] {
8da9da4e 597 list-style-image: url("chrome://communicator/skin/history/calendar.png");
319c6529
RK
598 -moz-image-region: auto;
599}
600
601.bookmark-item[query][hostContainer] {
602 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
8da9da4e 603 -moz-image-region: auto;
319c6529
RK
604}
605
606.bookmark-item[query][hostContainer][open] {
607 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
8da9da4e 608 -moz-image-region: auto;
319c6529
RK
609}
610
b1234db8
RK
611.bookmark-item[cutting] > .toolbarbutton-icon,
612.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
613 opacity: 0.5;
614}
615
616.bookmark-item[cutting] > .toolbarbutton-text,
617.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
618 opacity: 0.7;
619}
620
319c6529
RK
621/* ::::: primary toolbar buttons ::::: */
622
43cc2806
RK
623/* === BEGIN toolbarbuttons.inc.css === */
624
625/* Whole section of this included file: */
51994fad
RK
626:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
627 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
d4d77dc0 628 #social-share-button, #open-file-button, #find-button, #developer-button,
a5cb6e53 629 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
51994fad
RK
630 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
631 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
9ff3770c 632 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu),
7d3f7f14 633#bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
43cc2806
RK
634 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
635}
636
7d3f7f14 637#back-button {
43cc2806
RK
638 -moz-image-region: rect(0, 36px, 18px, 18px);
639}
640
7d3f7f14 641#back-button:hover:not([disabled="true"]) {
43cc2806
RK
642 -moz-image-region: rect(18px, 36px, 36px, 18px);
643}
644
7d3f7f14 645#back-button[disabled="true"] {
43cc2806
RK
646 -moz-image-region: rect(36px, 36px, 54px, 18px);
647}
648
7d3f7f14 649#forward-button {
43cc2806
RK
650 -moz-image-region: rect(0, 72px, 18px, 54px);
651}
652
7d3f7f14 653#forward-button:hover:not([disabled="true"]) {
43cc2806
RK
654 -moz-image-region: rect(18px, 72px, 36px, 54px);
655}
656
7d3f7f14 657#forward-button[disabled="true"] {
43cc2806
RK
658 -moz-image-region: rect(36px, 72px, 54px, 54px);
659}
660
7d3f7f14
RK
661#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
662#forward-button:-moz-locale-dir(rtl) {
43cc2806
RK
663 transform: scaleX(-1);
664}
665
7d3f7f14 666#home-button[cui-areatype="toolbar"] {
43cc2806
RK
667 -moz-image-region: rect(0, 126px, 18px, 108px);
668}
669
7d3f7f14 670#home-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
671 -moz-image-region: rect(18px, 126px, 36px, 108px);
672}
673
7d3f7f14 674#bookmarks-menu-button[cui-areatype="toolbar"] {
43cc2806
RK
675 -moz-image-region: rect(0, 144px, 18px, 126px);
676}
677
7d3f7f14
RK
678#bookmarks-menu-button[cui-areatype="toolbar"]:hover,
679#bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
43cc2806
RK
680 -moz-image-region: rect(18px, 144px, 36px, 126px);
681}
682
43ee1307 683/* When "new tab" page shows up, the menubutton-button (star button) is disabled */
7d3f7f14 684#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
43ee1307
RK
685 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
686 background-color: transparent !important;
687}
688
7d3f7f14 689#bookmarks-menu-button[cui-areatype="toolbar"][starred] {
43cc2806
RK
690 -moz-image-region: rect(0, 162px, 18px, 144px);
691}
692
7d3f7f14 693#bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
83e3b5cf
RK
694#bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
695#bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
696 /* When starred and clicked (for edit/delete dialog),
697 * then only the menubutton-button itself is open, but not the whole menubutton. */
43cc2806
RK
698 -moz-image-region: rect(18px, 162px, 36px, 144px);
699}
700
7d3f7f14 701#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
43cc2806
RK
702 -moz-image-region: rect(0, 630px, 18px, 612px);
703}
704
7d3f7f14 705#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
43cc2806
RK
706 padding: 1px;
707 -moz-box-align: center;
708}
709
7d3f7f14
RK
710#bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
711#bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
43cc2806
RK
712 -moz-image-region: rect(18px, 630px, 36px, 612px);
713}
714
7d3f7f14
RK
715#bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
716#bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
43cc2806
RK
717 padding-top: 2px;
718 padding-bottom: 0px;
dae45075
RK
719 padding-inline-start: 2px;
720 padding-inline-end: 0px;
43cc2806
RK
721}
722
7d3f7f14 723#history-panelmenu[cui-areatype="toolbar"] {
43cc2806
RK
724 -moz-image-region: rect(0, 180px, 18px, 162px);
725}
726
7d3f7f14
RK
727#history-panelmenu[cui-areatype="toolbar"]:hover,
728#history-panelmenu[cui-areatype="toolbar"][open="true"] {
43cc2806
RK
729 -moz-image-region: rect(18px, 180px, 36px, 162px);
730}
731
7d3f7f14 732#downloads-button[cui-areatype="toolbar"] {
43cc2806
RK
733 -moz-image-region: rect(0, 198px, 18px, 180px);
734}
735
7d3f7f14
RK
736#downloads-button[cui-areatype="toolbar"]:hover,
737#downloads-button[cui-areatype="toolbar"][open="true"] {
43cc2806
RK
738 -moz-image-region: rect(18px, 198px, 36px, 180px);
739}
740
7d3f7f14 741#add-ons-button[cui-areatype="toolbar"] {
43cc2806
RK
742 -moz-image-region: rect(0, 216px, 18px, 198px);
743}
744
7d3f7f14 745#add-ons-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
746 -moz-image-region: rect(18px, 216px, 36px, 198px);
747}
748
7d3f7f14 749#open-file-button[cui-areatype="toolbar"] {
43cc2806
RK
750 -moz-image-region: rect(0, 234px, 18px, 216px);
751}
752
7d3f7f14 753#open-file-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
754 -moz-image-region: rect(18px, 234px, 36px, 216px);
755}
756
7d3f7f14 757#save-page-button[cui-areatype="toolbar"] {
43cc2806
RK
758 -moz-image-region: rect(0, 252px, 18px, 234px);
759}
760
7d3f7f14 761#save-page-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
762 -moz-image-region: rect(18px, 252px, 36px, 234px);
763}
764
7d3f7f14 765#sync-button[cui-areatype="toolbar"] {
8ab9ca8a 766 -moz-image-region: rect(0, 792px, 18px, 774px);
43cc2806
RK
767}
768
7d3f7f14 769#sync-button[cui-areatype="toolbar"]:hover {
8ab9ca8a 770 -moz-image-region: rect(18px, 792px, 36px, 774px);
43cc2806
RK
771}
772
9ff3770c
RK
773#containers-panelmenu[cui-areatype="toolbar"] {
774 -moz-image-region: rect(0, 810px, 18px, 792px);
775}
776
777#containers-panelmenu[cui-areatype="toolbar"]:hover {
778 -moz-image-region: rect(18px, 810px, 36px, 792px);
779}
780
7d3f7f14 781#feed-button[cui-areatype="toolbar"] {
43cc2806
RK
782 -moz-image-region: rect(0, 288px, 18px, 270px);
783}
784
05148fed 785#feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
7d3f7f14 786#feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
43cc2806
RK
787 -moz-image-region: rect(18px, 288px, 36px, 270px);
788}
789
7d3f7f14 790#feed-button[cui-areatype="toolbar"][disabled="true"] {
cc4b0b0d
RK
791 -moz-image-region: rect(36px, 288px, 54px, 270px);
792}
793
7d3f7f14 794#social-share-button[cui-areatype="toolbar"] {
43cc2806
RK
795 -moz-image-region: rect(0px, 306px, 18px, 288px);
796}
797
22180555
RK
798#social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
799#social-share-button[cui-areatype="toolbar"][open="true"] {
43cc2806
RK
800 -moz-image-region: rect(18px, 306px, 36px, 288px);
801}
802
22180555
RK
803#social-share-button[cui-areatype="toolbar"][disabled="true"] {
804 -moz-image-region: rect(36px, 306px, 54px, 288px);
805}
806
7d3f7f14 807#characterencoding-button[cui-areatype="toolbar"] {
43cc2806
RK
808 -moz-image-region: rect(0, 324px, 18px, 306px);
809}
810
7d3f7f14
RK
811#characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
812#characterencoding-button[cui-areatype="toolbar"][open="true"] {
43cc2806
RK
813 -moz-image-region: rect(18px, 324px, 36px, 306px);
814}
815
7d3f7f14 816#characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
cc4b0b0d
RK
817 -moz-image-region: rect(36px, 324px, 54px, 306px);
818}
819
7d3f7f14 820#new-window-button[cui-areatype="toolbar"] {
43cc2806
RK
821 -moz-image-region: rect(0, 342px, 18px, 324px);
822}
823
7d3f7f14 824#new-window-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
825 -moz-image-region: rect(18px, 342px, 36px, 324px);
826}
827
46e71434
RK
828#e10s-button[cui-areatype="toolbar"] {
829 -moz-image-region: rect(0, 342px, 18px, 324px);
830}
831
832#e10s-button[cui-areatype="toolbar"]:hover {
833 -moz-image-region: rect(18px, 342px, 36px, 324px);
834}
835
836#e10s-button > .toolbarbutton-icon {
837 transform: scaleY(-1);
838}
839
7d3f7f14 840#new-tab-button[cui-areatype="toolbar"] {
43cc2806
RK
841 -moz-image-region: rect(0, 360px, 18px, 342px);
842}
843
7d3f7f14 844#new-tab-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
845 -moz-image-region: rect(18px, 360px, 36px, 342px);
846}
847
7d3f7f14 848#privatebrowsing-button[cui-areatype="toolbar"] {
43cc2806
RK
849 -moz-image-region: rect(0, 378px, 18px, 360px);
850}
851
7d3f7f14 852#privatebrowsing-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
853 -moz-image-region: rect(18px, 378px, 36px, 360px);
854}
855
7d3f7f14 856#find-button[cui-areatype="toolbar"] {
43cc2806
RK
857 -moz-image-region: rect(0, 396px, 18px, 378px);
858}
859
7d3f7f14 860#find-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
861 -moz-image-region: rect(18px, 396px, 36px, 378px);
862}
863
7d3f7f14 864#print-button[cui-areatype="toolbar"] {
43cc2806
RK
865 -moz-image-region: rect(0, 414px, 18px, 396px);
866}
867
7d3f7f14 868#print-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
869 -moz-image-region: rect(18px, 414px, 36px, 396px);
870}
871
7d3f7f14 872#fullscreen-button[cui-areatype="toolbar"] {
43cc2806
RK
873 -moz-image-region: rect(0, 432px, 18px, 414px);
874}
875
7d3f7f14 876#fullscreen-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
877 -moz-image-region: rect(18px, 432px, 36px, 414px);
878}
879
7d3f7f14 880#developer-button[cui-areatype="toolbar"] {
43cc2806
RK
881 -moz-image-region: rect(0, 450px, 18px, 432px);
882}
883
7d3f7f14
RK
884#developer-button[cui-areatype="toolbar"]:hover,
885#developer-button[cui-areatype="toolbar"][open="true"] {
43cc2806
RK
886 -moz-image-region: rect(18px, 450px, 36px, 432px);
887}
888
7d3f7f14 889#preferences-button[cui-areatype="toolbar"] {
43cc2806
RK
890 -moz-image-region: rect(0, 468px, 18px, 450px);
891}
892
7d3f7f14 893#preferences-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
894 -moz-image-region: rect(18px, 468px, 36px, 450px);
895}
896
7d3f7f14 897#PanelUI-menu-button {
43cc2806
RK
898 -moz-image-region: rect(0, 486px, 18px, 468px);
899}
900
7d3f7f14
RK
901#PanelUI-menu-button:hover,
902#PanelUI-menu-button[open="true"] {
43cc2806
RK
903 -moz-image-region: rect(18px, 486px, 36px, 468px);
904}
905
51994fad 906#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
43cc2806
RK
907 -moz-image-region: rect(0, 504px, 18px, 486px);
908}
909
51994fad 910#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
43cc2806
RK
911 -moz-image-region: rect(18px, 504px, 36px, 486px);
912}
913
51994fad 914#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
cc4b0b0d
RK
915 -moz-image-region: rect(36px, 504px, 54px, 486px);
916}
917
51994fad 918#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
43cc2806
RK
919 -moz-image-region: rect(0, 522px, 18px, 504px);
920}
921
51994fad 922#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
43cc2806
RK
923 -moz-image-region: rect(18px, 522px, 36px, 504px);
924}
925
51994fad 926#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
cc4b0b0d
RK
927 -moz-image-region: rect(36px, 522px, 54px, 504px);
928}
929
51994fad 930#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
43cc2806
RK
931 -moz-image-region: rect(0, 540px, 18px, 522px);
932}
933
51994fad 934#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
43cc2806
RK
935 -moz-image-region: rect(18px, 540px, 36px, 522px);
936}
937
51994fad 938#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
cc4b0b0d
RK
939 -moz-image-region: rect(36px, 540px, 54px, 522px);
940}
941
51994fad 942#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
43cc2806
RK
943 -moz-image-region: rect(0, 558px, 18px, 540px);
944}
945
51994fad 946#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
43cc2806
RK
947 -moz-image-region: rect(18px, 558px, 36px, 540px);
948}
949
51994fad 950#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
cc4b0b0d
RK
951 -moz-image-region: rect(36px, 558px, 54px, 540px);
952}
953
51994fad 954#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
43cc2806
RK
955 -moz-image-region: rect(0, 576px, 18px, 558px);
956}
957
51994fad 958#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
43cc2806
RK
959 -moz-image-region: rect(18px, 576px, 36px, 558px);
960}
961
51994fad 962#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
cc4b0b0d
RK
963 -moz-image-region: rect(36px, 576px, 54px, 558px);
964}
965
7d3f7f14 966#nav-bar-overflow-button {
43cc2806
RK
967 -moz-image-region: rect(0, 612px, 18px, 594px);
968}
969
7d3f7f14
RK
970#nav-bar-overflow-button:hover,
971#nav-bar-overflow-button[open="true"] {
43cc2806
RK
972 -moz-image-region: rect(18px, 612px, 36px, 594px);
973}
974
46e71434
RK
975#nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
976 transform: scaleX(-1);
977}
978
dbad77ea
RK
979#nav-bar-overflow-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
980 display: none;
981}
982
c0f6797e
RK
983#tabview-button {
984 -moz-image-region: rect(0, 648px, 18px, 630px);
985}
986
987#tabview-button:hover {
988 -moz-image-region: rect(18px, 648px, 36px, 630px);
989}
990
991#email-link-button[cui-areatype="toolbar"] {
992 -moz-image-region: rect(0, 666px, 18px, 648px);
993}
994
22180555 995#email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
c0f6797e
RK
996 -moz-image-region: rect(18px, 666px, 36px, 648px);
997}
998
22180555
RK
999#email-button[cui-areatype="toolbar"][disabled="true"] {
1000 -moz-image-region: rect(36px, 666px, 54px, 648px);
1001}
1002
c0f6797e
RK
1003#sidebar-button[cui-areatype="toolbar"] {
1004 -moz-image-region: rect(0, 684px, 18px, 666px);
1005}
1006
1007#sidebar-button[cui-areatype="toolbar"]:hover {
1008 -moz-image-region: rect(18px, 684px, 36px, 666px);
1009}
1010
22180555
RK
1011#panic-button[cui-areatype="toolbar"] {
1012 -moz-image-region: rect(0, 702px, 18px, 684px);
1013}
1014
1015#panic-button[cui-areatype="toolbar"]:hover,
1016#panic-button[cui-areatype="toolbar"][open] {
1017 -moz-image-region: rect(18px, 702px, 36px, 684px);
1018}
1019
1020#panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1021 transform: scaleX(-1);
1022}
1023
e548e22e
RK
1024#webide-button[cui-areatype="toolbar"] {
1025 -moz-image-region: rect(0, 738px, 18px, 720px);
1026}
1027
1028#webide-button[cui-areatype="toolbar"]:hover {
1029 -moz-image-region: rect(18px, 738px, 36px, 720px);
1030}
1031
05f7d22f
RK
1032#pocket-button {
1033 fill: currentColor !important;
1034}
1035
43cc2806
RK
1036/* === END toolbarbuttons.inc.css === */
1037
1038/* === BEGIN menupanel.inc.css === */
1039
1040/* Menu panel and palette styles */
1041
51994fad 1042toolbaritem[sdkstylewidget="true"] > toolbarbutton,
5401f433
RK
1043:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1044 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1988bb88 1045 #social-share-button, #open-file-button, #find-button, #developer-button,
a5cb6e53 1046 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
5401f433
RK
1047 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1048 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
9ff3770c 1049 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"],
5401f433
RK
1050toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1051 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1988bb88 1052 #social-share-button, #open-file-button, #find-button, #developer-button,
a5cb6e53 1053 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
5401f433
RK
1054 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1055 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
9ff3770c 1056 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) {
d23bf94a
RK
1057 list-style-image: url(chrome://browser/skin/menuPanel.svg);
1058}
1059
1060:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1061 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1062 #social-share-button, #open-file-button, #find-button, #developer-button,
1063 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1064 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1065 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1066 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"] > .toolbarbutton-icon,
1067:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1068 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1069 #social-share-button, #open-file-button, #find-button, #developer-button,
1070 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1071 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1072 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1073 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-icon,
1074:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1075 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1076 #social-share-button, #open-file-button, #find-button, #developer-button,
1077 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1078 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1079 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1080 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
1081:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
1082 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1083 #social-share-button, #open-file-button, #find-button, #developer-button,
1084 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1085 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1086 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1087 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
0282321d 1088 filter: url(chrome://global/skin/filters.svg#fill);
d23bf94a 1089 fill: currentColor;
43cc2806
RK
1090}
1091
1092#home-button[cui-areatype="menu-panel"],
7d3f7f14 1093toolbarpaletteitem[place="palette"] > #home-button {
43cc2806
RK
1094 -moz-image-region: rect(0px, 128px, 32px, 96px);
1095}
1096
1097#bookmarks-menu-button[cui-areatype="menu-panel"],
7d3f7f14 1098toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
46e71434 1099 -moz-image-region: rect(0px, 192px, 32px, 160px);
43cc2806
RK
1100}
1101
43cc2806 1102#history-panelmenu[cui-areatype="menu-panel"],
7d3f7f14 1103toolbarpaletteitem[place="palette"] > #history-panelmenu {
43cc2806
RK
1104 -moz-image-region: rect(0px, 224px, 32px, 192px);
1105}
1106
1107#downloads-button[cui-areatype="menu-panel"],
7d3f7f14 1108toolbarpaletteitem[place="palette"] > #downloads-button {
43cc2806
RK
1109 -moz-image-region: rect(0px, 256px, 32px, 224px);
1110}
1111
43cc2806 1112#add-ons-button[cui-areatype="menu-panel"],
7d3f7f14 1113toolbarpaletteitem[place="palette"] > #add-ons-button {
43cc2806
RK
1114 -moz-image-region: rect(0px, 288px, 32px, 256px);
1115}
1116
1117#open-file-button[cui-areatype="menu-panel"],
7d3f7f14 1118toolbarpaletteitem[place="palette"] > #open-file-button {
43cc2806
RK
1119 -moz-image-region: rect(0px, 320px, 32px, 288px);
1120}
1121
1122#save-page-button[cui-areatype="menu-panel"],
7d3f7f14 1123toolbarpaletteitem[place="palette"] > #save-page-button {
43cc2806
RK
1124 -moz-image-region: rect(0px, 352px, 32px, 320px);
1125}
1126
1127#sync-button[cui-areatype="menu-panel"],
7d3f7f14 1128toolbarpaletteitem[place="palette"] > #sync-button {
7327c957 1129 -moz-image-region: rect(0px, 1024px, 32px, 992px);
43cc2806
RK
1130}
1131
9ff3770c
RK
1132#containers-panelmenu[cui-areatype="menu-panel"],
1133toolbarpaletteitem[place="palette"] > #containers-panelmenu {
1134 -moz-image-region: rect(0px, 1056px, 32px, 1024px);
1135}
1136
43cc2806 1137#feed-button[cui-areatype="menu-panel"],
7d3f7f14 1138toolbarpaletteitem[place="palette"] > #feed-button {
43cc2806
RK
1139 -moz-image-region: rect(0px, 416px, 32px, 384px);
1140}
1141
1142#social-share-button[cui-areatype="menu-panel"],
7d3f7f14 1143toolbarpaletteitem[place="palette"] > #social-share-button {
43cc2806
RK
1144 -moz-image-region: rect(0px, 448px, 32px, 416px);
1145}
1146
43cc2806 1147#characterencoding-button[cui-areatype="menu-panel"],
7d3f7f14 1148toolbarpaletteitem[place="palette"] > #characterencoding-button {
43cc2806
RK
1149 -moz-image-region: rect(0px, 480px, 32px, 448px);
1150}
1151
1152#new-window-button[cui-areatype="menu-panel"],
7d3f7f14 1153toolbarpaletteitem[place="palette"] > #new-window-button {
43cc2806
RK
1154 -moz-image-region: rect(0px, 512px, 32px, 480px);
1155}
1156
5401f433
RK
1157#e10s-button[cui-areatype="menu-panel"],
1158toolbarpaletteitem[place="palette"] > #e10s-button {
1159 -moz-image-region: rect(0px, 512px, 32px, 480px);
1160}
1161
43cc2806 1162#new-tab-button[cui-areatype="menu-panel"],
7d3f7f14 1163toolbarpaletteitem[place="palette"] > #new-tab-button {
43cc2806
RK
1164 -moz-image-region: rect(0px, 544px, 32px, 512px);
1165}
1166
1167#privatebrowsing-button[cui-areatype="menu-panel"],
7d3f7f14 1168toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
43cc2806
RK
1169 -moz-image-region: rect(0px, 576px, 32px, 544px);
1170}
1171
46e71434
RK
1172#tabview-button[cui-areatype="menu-panel"],
1173toolbarpaletteitem[place="palette"] > #tabview-button {
1174 -moz-image-region: rect(0px, 608px, 32px, 576px);
1175}
1176
43cc2806 1177#find-button[cui-areatype="menu-panel"],
7d3f7f14 1178toolbarpaletteitem[place="palette"] > #find-button {
43cc2806
RK
1179 -moz-image-region: rect(0px, 640px, 32px, 608px);
1180}
1181
1182#print-button[cui-areatype="menu-panel"],
7d3f7f14 1183toolbarpaletteitem[place="palette"] > #print-button {
43cc2806
RK
1184 -moz-image-region: rect(0px, 672px, 32px, 640px);
1185}
1186
1187#fullscreen-button[cui-areatype="menu-panel"],
7d3f7f14 1188toolbarpaletteitem[place="palette"] > #fullscreen-button {
43cc2806
RK
1189 -moz-image-region: rect(0px, 704px, 32px, 672px);
1190}
1191
1192#developer-button[cui-areatype="menu-panel"],
7d3f7f14 1193toolbarpaletteitem[place="palette"] > #developer-button {
43cc2806
RK
1194 -moz-image-region: rect(0px, 736px, 32px, 704px);
1195}
1196
1197#preferences-button[cui-areatype="menu-panel"],
7d3f7f14 1198toolbarpaletteitem[place="palette"] > #preferences-button {
43cc2806
RK
1199 -moz-image-region: rect(0px, 768px, 32px, 736px);
1200}
1201
46e71434
RK
1202#email-link-button[cui-areatype="menu-panel"],
1203toolbarpaletteitem[place="palette"] > #email-link-button {
1204 -moz-image-region: rect(0, 800px, 32px, 768px);
1205}
1206
22180555
RK
1207#email-link-button[cui-areatype="menu-panel"][disabled="true"],
1208toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1209 -moz-image-region: rect(64px, 800px, 96px, 768px);
1210}
1211
46e71434
RK
1212#sidebar-button[cui-areatype="menu-panel"],
1213toolbarpaletteitem[place="palette"] > #sidebar-button {
1214 -moz-image-region: rect(0, 864px, 32px, 832px);
1215}
1216
22180555
RK
1217#panic-button[cui-areatype="menu-panel"],
1218toolbarpaletteitem[place="palette"] > #panic-button {
1219 -moz-image-region: rect(0, 896px, 32px, 864px);
1220}
1221
e548e22e
RK
1222#webide-button[cui-areatype="menu-panel"],
1223toolbarpaletteitem[place="palette"] > #webide-button {
1224 -moz-image-region: rect(0px, 960px, 32px, 928px);
1225}
1226
46e71434
RK
1227toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1228 -moz-image-region: rect(0, 832px, 32px, 800px);
1229}
1230
43cc2806
RK
1231/* Wide panel control icons */
1232
51994fad
RK
1233#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1234#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
7d3f7f14
RK
1235toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1236toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
d23bf94a
RK
1237 list-style-image: url(chrome://browser/skin/menuPanel-small.svg);
1238}
1239
1240#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon,
1241#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon,
1242toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
1243toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
0282321d 1244 filter: url(chrome://global/skin/filters.svg#fill);
d23bf94a 1245 fill: currentColor;
43cc2806
RK
1246}
1247
51994fad 1248#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
7d3f7f14 1249toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
43cc2806
RK
1250 -moz-image-region: rect(0px, 32px, 16px, 16px);
1251}
1252
51994fad 1253#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
7d3f7f14 1254toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
43cc2806
RK
1255 -moz-image-region: rect(0px, 48px, 16px, 32px);
1256}
1257
51994fad 1258#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
7d3f7f14 1259toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
43cc2806
RK
1260 -moz-image-region: rect(0px, 64px, 16px, 48px);
1261}
1262
51994fad 1263#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
7d3f7f14 1264toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
43cc2806
RK
1265 -moz-image-region: rect(0px, 80px, 16px, 64px);
1266}
1267
51994fad 1268#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
7d3f7f14 1269toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
43cc2806
RK
1270 -moz-image-region: rect(0px, 96px, 16px, 80px);
1271}
1272
e548e22e 1273#add-share-provider {
d23bf94a 1274 list-style-image: url(chrome://browser/skin/menuPanel-small.svg);
e548e22e
RK
1275 -moz-image-region: rect(0px, 96px, 16px, 80px);
1276}
1277
43cc2806
RK
1278/* === END menupanel.inc.css === */
1279
63ada306
RK
1280.toolbarbutton-1:not([type="menu-button"]) {
1281 -moz-box-orient: vertical;
1282}
1283
319c6529
RK
1284.toolbarbutton-1,
1285.toolbarbutton-1 > .toolbarbutton-menubutton-button {
c0f6797e
RK
1286/* min-width: 36px;
1287 min-height: 36px;*/
319c6529
RK
1288}
1289
1290.toolbarbutton-1,
1291.toolbarbutton-1 > .toolbarbutton-menubutton-button,
1292.toolbarbutton-1[disabled="true"]:hover:active,
1293.toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1294 padding: 1px 2px;
1295}
1296
1297.toolbarbutton-1:hover:active,
1298.toolbarbutton-1[open="true"],
1299.toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1300 padding-top: 2px;
1301 padding-bottom: 0px;
dae45075
RK
1302 padding-inline-start: 3px;
1303 padding-inline-end: 1px;
319c6529
RK
1304}
1305
c0f6797e
RK
1306#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1307#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1308#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1309#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1310#main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
e20c83c3
RK
1311}
1312
c0f6797e
RK
1313.toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1314.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
e20c83c3
RK
1315}
1316
c0f6797e
RK
1317toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1318toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
319c6529
RK
1319}
1320
c0f6797e
RK
1321.toolbarbutton-1 > .toolbarbutton-icon,
1322.toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
319c6529
RK
1323}
1324
20752032 1325.findbar-button,
c0f6797e
RK
1326#nav-bar .toolbarbutton-1,
1327#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
319c6529
RK
1328}
1329
c0f6797e
RK
1330#nav-bar .toolbarbutton-1:not([type=menu-button]),
1331#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1332#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
319c6529
RK
1333}
1334
c0f6797e 1335#nav-bar #PanelUI-menu-button {
dae45075
RK
1336/* padding-inline-start: 7px;
1337 padding-inline-end: 5px;*/
319c6529
RK
1338}
1339
b1dfcf32 1340#nav-bar .toolbarbutton-1[type=panel],
8c5bee4f 1341#nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
c0f6797e
RK
1342/* padding-left: 5px;
1343 padding-right: 5px;*/
319c6529
RK
1344}
1345
c0f6797e
RK
1346#nav-bar .toolbarbutton-1 > menupopup {
1347/* margin-top: -3px;*/
319c6529
RK
1348}
1349
c0f6797e 1350#nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
c1d2ce3e 1351 margin-top: -4px;
319c6529
RK
1352}
1353
c0f6797e 1354#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
dae45075 1355/* padding-inline-end: 0;*/
319c6529
RK
1356}
1357
c0f6797e 1358#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
dae45075 1359/* padding-inline-start: 0;
c0f6797e 1360 -moz-box-align: center;*/
319c6529
RK
1361}
1362
20752032 1363.findbar-button > .toolbarbutton-text,
c0f6797e
RK
1364#nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1365#nav-bar .toolbarbutton-1 > .toolbarbutton-text,
19988d2d 1366#nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
c0f6797e
RK
1367#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1368#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
2c62526c 1369window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
c0f6797e
RK
1370/* padding: 2px 6px;
1371 border: 1px solid;
1372 border-color: transparent;
1373 transition-property: background-color, border-color;
1374 transition-duration: 150ms;*/
d54f5b23 1375}
c0f6797e 1376/*
db1c5db1
RK
1377#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-icon,
1378#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-badge-stack,
1379#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1380 padding: calc(var(--toolbarbutton-vertical-inner-padding) + 1px) 7px;
d54f5b23 1381}
c0f6797e 1382*/
d54f5b23 1383
c0f6797e 1384/* Help SDK icons fit: */
a5cb6e53 1385toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
19988d2d 1386toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
c0f6797e 1387 width: 16px;
26125509
RK
1388}
1389
a5cb6e53 1390#nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
c0f6797e
RK
1391 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1392 width: 32px;
26125509 1393}
26125509 1394
b1dfcf32
RK
1395#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1396#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
b1d1a8bb 1397#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon,
b1dfcf32 1398#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
c0f6797e 1399#nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
dae45075 1400/* padding-inline-end: 17px;*/
319c6529
RK
1401}
1402
fa703ff4 1403#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
b1d1a8bb 1404#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon {
fa703ff4
RK
1405 /* horizontal padding + border + icon width */
1406/* max-width: 43px;*/
1407}
1408
c0f6797e 1409#nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
319c6529
RK
1410}
1411
c0f6797e 1412#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
319c6529
RK
1413}
1414
c0f6797e 1415#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
38cfeb47
RK
1416}
1417
c0f6797e
RK
1418#nav-bar .toolbaritem-combined-buttons {
1419/* margin-left: 2px;
1420 margin-right: 2px;*/
38cfeb47
RK
1421}
1422
c0f6797e
RK
1423#nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1424/* padding-left: 0;
1425 padding-right: 0;*/
319c6529
RK
1426}
1427
c0f6797e
RK
1428#nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1429#nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true]) + .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true])::before {
1430/*
1431 content: "";
1432 display: -moz-box;
1433 width: 1px;
1434 height: 16px;
dae45075 1435 margin-inline-end: -1px;
c0f6797e 1436*/
319c6529
RK
1437}
1438
2c62526c 1439window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
319c6529
RK
1440}
1441
20752032 1442.findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
43371c9b 1443#nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
c0f6797e
RK
1444#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1445#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1446#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1447#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
19988d2d 1448#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
2c62526c 1449window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
46e71434 1450#nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
319c6529
RK
1451}
1452
20752032 1453.findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
43371c9b 1454#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
c0f6797e
RK
1455#nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1456#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1457#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
19988d2d 1458#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
319c6529
RK
1459}
1460
c0f6797e
RK
1461#TabsToolbar .toolbarbutton-1,
1462#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1463.tabbrowser-arrowscrollbox > .scrollbutton-up,
1464.tabbrowser-arrowscrollbox > .scrollbutton-down {
e8519ae0
RK
1465}
1466
c0f6797e
RK
1467#TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1468#TabsToolbar .toolbarbutton-1[open],
1469#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1470.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1471.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
e8519ae0
RK
1472}
1473
c0f6797e 1474/* unified back/forward button */
319c6529 1475
c0f6797e 1476#forward-button {
589b5528 1477 -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
71bac478
RK
1478}
1479
c0f6797e
RK
1480#forward-button > menupopup {
1481 margin-top: 1px !important;
319c6529
RK
1482}
1483
c0f6797e
RK
1484#forward-button > .toolbarbutton-icon {
1485 background-clip: padding-box !important;
1486 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
5401f433 1487 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
71bac478
RK
1488}
1489
c0f6797e 1490#forward-button {
dae45075 1491 margin-inline-start: -4px !important;
9d1e25fa
RK
1492 padding-left: 5px;
1493 padding-right: 5px;
c0f6797e
RK
1494 margin-top: 3px;
1495 margin-bottom: 3px;
1496 border-radius: 0 10000px 10000px 0;
7327c957 1497/* max-width: calc(var(--forwardbutton-width) + var(--backbutton-urlbar-overlap)) !important; */
319c6529
RK
1498}
1499
c0f6797e
RK
1500#forward-button:-moz-locale-dir(rtl) {
1501 border-radius: 10000px 0 0 10000px;
8ad8bf83
RK
1502}
1503
2c62526c 1504window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
aec5dfad 1505 transition: margin-left 150ms ease-out;
2c62526c
RK
1506}
1507
1508window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
7327c957 1509 margin-left: calc(0px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
2c62526c
RK
1510}
1511
1512window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1513 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1514 transition-delay: 100s;
1515}
1516
1517window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1518 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
7327c957 1519 margin-left: calc(-0.01px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
2c62526c
RK
1520}
1521
c0f6797e
RK
1522#back-button {
1523/* padding-top: 3px !important;
1524 padding-bottom: 3px !important;
dae45075
RK
1525 padding-inline-start: 5px !important;
1526 padding-inline-end: 0 !important;*/
c0f6797e
RK
1527 position: relative;
1528 z-index: 1;
1529 border-radius: 10000px;
1530 width: 30px;
1531 height: 30px;
1532 margin-top: -2px;
1533 margin-bottom: -2px;
143c5409
RK
1534}
1535
c0f6797e 1536#back-button:-moz-locale-dir(rtl) {
319c6529
RK
1537}
1538
c0f6797e
RK
1539#back-button > menupopup {
1540 margin-top: -1px !important;
b36fc72e
RK
1541}
1542
c0f6797e
RK
1543#back-button > .toolbarbutton-icon {
1544 border-radius: 10000px !important;
1545 background-clip: padding-box !important;
1546/* background-color: hsla(210,25%,98%,.08) !important;
1547 padding: 6px !important;
589b5528
RK
1548 border-style: none !important;
1549 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1550 0 0 0 1px hsla(210,4%,10%,.25);*/
1551 transition-property: background-color, box-shadow !important;
c0f6797e 1552 transition-duration: 250ms !important;
143c5409
RK
1553}
1554
c0f6797e 1555#back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
589b5528 1556/* background-color: hsla(210,4%,10%,.08) !important;*/
143c5409
RK
1557}
1558
c0f6797e
RK
1559#back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1560#back-button[open="true"] > .toolbarbutton-icon {
1561/* background-color: hsla(210,4%,10%,.12) !important;
589b5528
RK
1562 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1563 0 0 0 1px hsla(210,4%,10%,.25),
1564 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
143c5409
RK
1565}
1566
2c62526c 1567#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
c0f6797e 1568 transform: scaleX(-1);
143c5409 1569}
05f7d22f
RK
1570
1571#forward-button > .toolbarbutton-menu-dropmarker,
1572#back-button > .toolbarbutton-menu-dropmarker {
1573 display: none;
1574}
1575
c0f6797e
RK
1576/*
1577.unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1578.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1579 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
6adbc9a6
RK
1580}
1581
c0f6797e
RK
1582.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1583.unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1584 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
6adbc9a6
RK
1585}
1586
c0f6797e
RK
1587#home-button.bookmark-item {
1588 list-style-image: url("chrome://browser/skin/Toolbar.png");
6adbc9a6
RK
1589}
1590
c0f6797e
RK
1591#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1592#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1593#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1594#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1595#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1596#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1597#home-button.bookmark-item:-moz-lwtheme-brighttext {
1598 position: relative;
1599 z-index: 1;
1600 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
6adbc9a6
RK
1601}
1602
c0f6797e
RK
1603#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1604#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1605 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
6adbc9a6 1606}
c0f6797e 1607*/
6adbc9a6 1608
c0f6797e
RK
1609#downloads-button > .toolbarbutton-icon {
1610 margin: 0;
6adbc9a6
RK
1611}
1612
9168a62c 1613/* tabview menu item */
c0f6797e 1614
6adbc9a6 1615#menu_tabview {
832af407 1616 list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
6adbc9a6
RK
1617 -moz-image-region: rect(1px, 89px, 17px, 73px);
1618}
1619
1620#menu_tabview[groups="0"] {
1621 -moz-image-region: rect(1px, 17px, 17px, 1px);
1622}
1623
1624#menu_tabview[groups="1"] {
1625 -moz-image-region: rect(1px, 35px, 17px, 19px);
1626}
1627
1628#menu_tabview[groups="2"] {
1629 -moz-image-region: rect(1px, 53px, 17px, 37px);
1630}
1631
1632#menu_tabview[groups="3"] {
1633 -moz-image-region: rect(1px, 71px, 17px, 55px);
1634}
1635
5401f433
RK
1636/* zoom control text (reset) button special case: */
1637
1638#nav-bar #zoom-reset-button > .toolbarbutton-text {
1639 /* To make this line up with the icons, it needs the same height (18px) +
1640 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1641 * increase in text sizes would break things...
1642 */
1643 min-height: 20px;
1644}
1645
319c6529
RK
1646/* ::::: fullscreen window controls ::::: */
1647
1648#minimize-button,
1649#restore-button,
1650#close-button {
db1c5db1
RK
1651 -moz-appearance: none;
1652 border: none;
1653/* margin: 0 !important;
1654 padding: 6px 12px;*/
319c6529
RK
1655}
1656
1657#minimize-button {
db1c5db1 1658 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
319c6529
RK
1659}
1660
1661#minimize-button:hover {
db1c5db1 1662 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-hover);
319c6529
RK
1663}
1664
1665#restore-button {
db1c5db1
RK
1666 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
1667}
1668
1669#restore-button:hover {
1670 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-hover);
319c6529
RK
1671}
1672
db1c5db1 1673#minimize-button:hover,
319c6529 1674#restore-button:hover {
db1c5db1
RK
1675/* background-color: hsla(0, 0%, 0%, .12);*/
1676}
1677
1678#minimize-button:hover:active,
1679#restore-button:hover:active {
1680/* background-color: hsla(0, 0%, 0%, .22);*/
319c6529
RK
1681}
1682
1683#close-button {
db1c5db1 1684 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
319c6529
RK
1685}
1686
1687#close-button:hover {
db1c5db1
RK
1688/* background-color: hsl(355, 86%, 49%);*/
1689 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-hover);
1690}
1691
1692#close-button:hover:active {
1693/* background-color: hsl(355, 82%, 69%);*/
319c6529
RK
1694}
1695
1696/* ::::: Location Bar ::::: */
1697
319c6529
RK
1698#urlbar,
1699.searchbar-textbox {
1700 border-radius: 5px;
aec5dfad 1701 margin: 2px 0;
dae45075 1702 margin-inline-start: 3px;
319c6529
RK
1703}
1704
ffce2402 1705#urlbar {
f0071a71
RK
1706 /* make color as light as possible to deal with dark non-domain parts */
1707 color: #FFBFFF;
ffce2402
RK
1708}
1709
319c6529
RK
1710#urlbar:-moz-lwtheme,
1711.searchbar-textbox:-moz-lwtheme {
1712 /* background-color: rgba(255,255,255,.8);
1713 @navbarTextboxCustomBorder@
1714 color: black; */
1715}
1716
c0f6797e
RK
1717#urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1718.searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1719/* background-color: rgba(255,255,255,.9);*/
1720}
1721
1722#urlbar:-moz-lwtheme[focused]:not([readonly]),
1723.searchbar-textbox:-moz-lwtheme[focused] {
1724/* background-color: white;*/
1725}
1726
2c62526c 1727window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
dae45075 1728/* border-inline-start: none;
2299146f 1729 margin-left: 0;*/
2c62526c
RK
1730}
1731
1732window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1733/* border-top-left-radius: 0;
1734 border-bottom-left-radius: 0; */
1735}
1736
1737window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1738/* border-top-right-radius: 0;
1739 border-bottom-right-radius: 0; */
1740}
1741
1742window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1743/* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
b1dfcf32 1744/* margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
2c62526c
RK
1745}
1746
fff8097b
RK
1747window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1748window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
2c62526c 1749 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
71a617ff 1750 transform: scaleX(-1);
8ad8bf83
RK
1751}
1752
2c62526c
RK
1753window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1754 -moz-box-direction: reverse;
1755}
1756
689d5552
RK
1757html|*.urlbar-input:-moz-lwtheme::placeholder,
1758.searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::placeholder {
319c6529
RK
1759 color: #E7ADE7;
1760}
1761
319c6529
RK
1762#urlbar-container {
1763 -moz-box-orient: horizontal;
1764 -moz-box-align: stretch;
1765}
1766
9abeb12c
RK
1767.urlbar-textbox-container {
1768 -moz-box-align: stretch;
1769}
1770
a40f6a79 1771.urlbar-input-box {
dae45075 1772 margin-inline-start: 0;
a40f6a79
RK
1773}
1774
db1c5db1 1775.urlbar-input-box,
db1c5db1
RK
1776#urlbar-display-box {
1777 padding-inline-start: 4px;
c877146a 1778/* border-inline-start: 1px solid var(--urlbar-separator-color);
db1c5db1
RK
1779 border-inline-end: 1px solid var(--urlbar-separator-color);
1780 border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
c877146a 1781 border-image-slice: 1; */
db1c5db1
RK
1782}
1783
319c6529 1784#urlbar-icons {
319c6529
RK
1785 -moz-box-align: center;
1786}
1787
1788.urlbar-icon {
b8384c33 1789 padding: 0 2px;
fa703ff4
RK
1790 /* 16x16 icon with border-box sizing */
1791 width: 20px;
1792 height: 16px;
ffce2402
RK
1793}
1794
d23bf94a
RK
1795/* ::::: URL Bar Zoom Reset Button ::::: */
1796
1797@keyframes urlbar-zoom-reset-pulse {
1798 0% {
1799 transform: scale(0);
1800 }
1801 75% {
1802 transform: scale(1.5);
1803 }
1804 100% {
1805 transform: scale(1.0);
1806 }
1807}
1808
1809#urlbar-zoom-button {
1810/* -moz-appearance: none;*/
38bd4bf1 1811/* color: inherit;*/
d23bf94a
RK
1812}
1813
ffce2402 1814.search-go-container {
4b686546
RK
1815 padding: 2px;
1816}
1817
1818.search-go-container > .search-go-button {
1819 padding: 0;
319c6529
RK
1820}
1821
1437a48c 1822#urlbar-search-footer {
d23bf94a 1823 border-top: 1px solid var(--panel-separator-color);
1437a48c
RK
1824}
1825
1826#urlbar-search-settings {
1827}
1828
1829#urlbar-search-settings:hover {
1830}
1831
1832#urlbar-search-settings:hover:active {
1833}
1834
319c6529 1835#urlbar-search-splitter {
b9060895
RK
1836 /* The splitter width should equal the location and search bars' combined
1837 neighboring margin and border width. */
1838 min-width: 8px;
1839 margin: 0 -4px;
1840 position: relative;
319c6529
RK
1841 border: none;
1842 background: transparent;
1843}
1844
8922acc9 1845.urlbar-display {
dae45075
RK
1846 border-inline-end: 1px solid #9C9CFF;
1847 margin-inline-end: 3px;
ab799a7a
RK
1848 margin-top: 0;
1849 margin-bottom: 0;
dae45075 1850 margin-inline-start: 0;
ab799a7a
RK
1851 color: #8050B0;
1852}
1853
b1dfcf32 1854/* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
e20c83c3 1855
b1dfcf32 1856#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
d23bf94a 1857 border-bottom: 1px solid var(--panel-separator-color);
b1dfcf32
RK
1858 background-color: #000000;
1859 padding: 6px 0;
dae45075
RK
1860 padding-inline-start: 44px;
1861 padding-inline-end: 6px;
b1dfcf32
RK
1862 background-image: url("chrome://browser/skin/info.svg");
1863 background-clip: padding-box;
1864 background-position: 20px center;
1865 background-repeat: no-repeat;
1866 background-size: 16px 16px;
8ad8bf83
RK
1867}
1868
b1dfcf32
RK
1869#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1870 background-position: right 20px center;
8ad8bf83
RK
1871}
1872
b1dfcf32
RK
1873#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
1874 margin: 0;
1875 padding: 0;
2c62526c
RK
1876}
1877
b1dfcf32 1878#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
dae45075 1879 margin-inline-start: 0;
8ad8bf83
RK
1880}
1881
b1dfcf32
RK
1882#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
1883 -moz-appearance: none;
b1dfcf32
RK
1884 min-width: 80px;
1885 border-radius: 3px;
1886 padding: 4px 16px;
1887 margin: 0;
dae45075 1888 margin-inline-start: 10px;
8ad8bf83
RK
1889}
1890
b1dfcf32 1891#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
8ad8bf83
RK
1892}
1893
b1dfcf32 1894#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
8ad8bf83
RK
1895}
1896
b1dfcf32 1897#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
8ad8bf83
RK
1898}
1899
b1dfcf32 1900#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
319c6529
RK
1901}
1902
b1dfcf32 1903/* === END urlbarSearchSuggestionsNotification.inc.css === */
319c6529 1904
b1dfcf32
RK
1905#search-container {
1906 min-width: calc(54px + 11ch);
319c6529
RK
1907}
1908
b1dfcf32 1909/* identity box */
1437a48c 1910
19988d2d 1911#identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
f36031bd 1912 background-color: var(--identity-box-verified-background-color);
319c6529
RK
1913}
1914
1915#identity-box:-moz-focusring {
d23bf94a 1916 outline: 1px dotted;
f993773d 1917 outline-offset: -1px;
319c6529
RK
1918}
1919
1920#identity-box.verifiedDomain:-moz-focusring,
1921#identity-box.verifiedIdentity:-moz-focusring {
1922 outline-color: #000000;
1923}
1924
319c6529
RK
1925/* Location bar dropmarker */
1926
38cfeb47 1927.urlbar-history-dropmarker:not(:hover):not([open="true"]) {
319c6529 1928 background-color: transparent;
319c6529
RK
1929}
1930
00f971bc 1931#urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
c9b0a396
RK
1932#urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
1933#urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
38cfeb47
RK
1934 border: none;
1935 border-radius: 0px;
d7b7f7e1
RK
1936 transition: opacity 0.15s ease;
1937}
1938
7327c957
RK
1939#urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1940 transition: none;
1941}
1942
db1c5db1 1943#navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
d7b7f7e1 1944 opacity: 0;
319c6529
RK
1945}
1946
ffce2402
RK
1947.urlbar-history-dropmarker:hover {
1948}
1949
1950.urlbar-history-dropmarker:hover:active,
1951.urlbar-history-dropmarker[open="true"] {
1952}
1953
319c6529 1954/* page proxy icon */
e7c8bab1
RK
1955/* === BEGIN identity-block.inc.css === */
1956
d23bf94a
RK
1957/* === BEGIN identity-block/icons.inc.css === */
1958
1959#identity-icon {
1960 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
1961}
1962
1963#identity-box:hover > #identity-icon:not(.no-hover),
1964#identity-box[open=true] > #identity-icon {
1965 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
1966}
1967
1968#identity-box.grantedPermissions > #identity-icon {
1969 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
1970}
1971
1972#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
1973#identity-box.grantedPermissions[open=true] > #identity-icon {
1974 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
1975}
1976
1977#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
1978 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
1979}
1980
1981#tracking-protection-icon {
1982 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled);
1983}
1984
1985#tracking-protection-icon[state="loaded-tracking-content"] {
1986 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled);
1987}
1988
1989
1990#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
1991#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
1992#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
1993 list-style-image: url(chrome://browser/skin/connection-secure.svg);
1994 visibility: visible;
1995}
1996
b9060895
RK
1997#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
1998#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
1999#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon,
d23bf94a
RK
2000#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
2001 list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
2002 visibility: visible;
2003}
2004
2005#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2006#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2007 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
2008 visibility: visible;
2009}
2010
d23bf94a 2011/* === END identity-block/icons.inc.css === */
b1dfcf32 2012
d23bf94a 2013#identity-box {
b1dfcf32
RK
2014 font-size: .9em;
2015 border-radius: 2px;
024a65e9 2016 padding: 3px 5px;
b1dfcf32 2017 overflow: hidden;
d23bf94a 2018 /* The padding-left and padding-right transitions handle the delayed hiding of
024a65e9
RK
2019 the forward button when hovered. */
2020 transition: background-color 150ms ease, padding-left, padding-right;
b1dfcf32
RK
2021}
2022
2023#identity-box:-moz-locale-dir(ltr) {
2024 border-top-right-radius: 0;
2025 border-bottom-right-radius: 0;
2026}
2027
2028#identity-box:-moz-locale-dir(rtl) {
2029 border-top-left-radius: 0;
2030 border-bottom-left-radius: 0;
e548e22e
RK
2031}
2032
d23bf94a
RK
2033#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2034 border-inline-end: 1px solid #008484;
2035}
2036
2037#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
2038 color: #008484;
2039}
2040
e548e22e 2041#urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
d23bf94a 2042 border-inline-end: 1px solid #9C9CFF;
e7c8bab1
RK
2043}
2044
d23bf94a
RK
2045#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon-labels {
2046 color: #9C9CFF;
e7c8bab1
RK
2047}
2048
d23bf94a 2049
7c1e433b
RK
2050#identity-icon-labels:-moz-locale-dir(ltr) {
2051 padding-left: 2px;
2052}
2053
2054#identity-icon-labels:-moz-locale-dir(rtl) {
2055 padding-right: 2px;
2056}
2057
b1dfcf32 2058window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
dc9d5d64
RK
2059/* border-radius: 0;
2060 padding-inline-start: 2px; */
2061 padding-inline-end: 2px;
2062 margin-inline-end: 1px;
b1dfcf32
RK
2063}
2064
db1c5db1 2065window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #identity-box {
b1dfcf32
RK
2066 padding-inline-start: 2px;
2067}
2068
db1c5db1 2069window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
024a65e9
RK
2070 /* Forward button hiding is delayed when hovered, so we should use the same
2071 delay for the identity box. We handle both horizontal paddings (for LTR and
2072 RTL), the latter two delays here are for padding-left and padding-right. */
2073 transition-delay: 0s, 100s, 100s;
b1dfcf32
RK
2074}
2075
db1c5db1 2076window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
b1dfcf32
RK
2077 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2078 padding-inline-start: 2.01px;
e7c8bab1
RK
2079}
2080
c9b0a396
RK
2081/* MAIN IDENTITY ICON */
2082
2083#identity-icon {
2084 width: 16px;
2085 height: 16px;
c9b0a396
RK
2086}
2087
2088#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
d23bf94a 2089 opacity: .3;
c9b0a396
RK
2090}
2091
2092#urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2093 -moz-image-region: inherit;
2094 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2095 width: 16px;
2096 height: 16px;
c9b0a396
RK
2097}
2098
b1d1a8bb
RK
2099#urlbar[actiontype="extension"] > #identity-box > #identity-icon {
2100 -moz-image-region: inherit;
2101 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
2102 width: 16px;
2103 height: 16px;
2104}
2105
d23bf94a 2106/* SHARING ICON */
c9b0a396 2107
d23bf94a 2108#sharing-icon {
c9b0a396
RK
2109 width: 16px;
2110 height: 16px;
d23bf94a
RK
2111 margin-inline-start: -16px;
2112 position: relative;
2113 display: none;
c9b0a396
RK
2114}
2115
d23bf94a 2116#identity-box[sharing="camera"] > #sharing-icon {
39819724 2117 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
c9b0a396
RK
2118}
2119
d23bf94a 2120#identity-box[sharing="microphone"] > #sharing-icon {
39819724 2121 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
c9b0a396
RK
2122}
2123
d23bf94a 2124#identity-box[sharing="screen"] > #sharing-icon {
39819724 2125 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
d23bf94a 2126
c9b0a396
RK
2127}
2128
d23bf94a
RK
2129#identity-box[sharing] > #sharing-icon {
2130 display: -moz-box;
d23bf94a 2131 animation-delay: -1.5s;
c9b0a396
RK
2132}
2133
d23bf94a
RK
2134#identity-box[sharing] > #identity-icon,
2135#sharing-icon {
b9060895 2136 animation: 3s linear identity-box-sharing-icon-pulse infinite;
d23bf94a 2137}
c9b0a396 2138
b9060895
RK
2139@keyframes identity-box-sharing-icon-pulse {
2140/* This should remain identical to tab-sharing-icon-pulse in tabs.inc.css */
d23bf94a
RK
2141 0%, 16.66%, 83.33%, 100% {
2142 opacity: 0;
2143 }
2144 33.33%, 66.66% {
2145 opacity: 1;
2146 }
2147}
2148
2149/* TRACKING PROTECTION ICON */
2150
2151#tracking-protection-icon {
c9b0a396
RK
2152 width: 16px;
2153 height: 16px;
2154 margin-inline-start: 2px;
d23bf94a 2155 margin-inline-end: 0;
c9b0a396
RK
2156}
2157
d23bf94a
RK
2158#tracking-protection-icon[animate] {
2159 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
c9b0a396
RK
2160}
2161
d23bf94a
RK
2162#tracking-protection-icon:not([state]) {
2163 margin-inline-end: -18px;
2164 pointer-events: none;
2165 opacity: 0;
2166 /* Only animate the shield in, when it disappears hide it immediately. */
2167 transition: none;
db1c5db1
RK
2168}
2169
d23bf94a
RK
2170#urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2171 visibility: collapse;
c9b0a396
RK
2172}
2173
d23bf94a
RK
2174/* CONNECTION ICON */
2175
2176#connection-icon {
2177 width: 16px;
2178 height: 16px;
2179 margin-inline-start: 2px;
2180 visibility: collapse;
c9b0a396
RK
2181}
2182
e7c8bab1
RK
2183/* === END identity-block.inc.css === */
2184
2185#page-proxy-favicon {
2186 -moz-image-region: rect(0, 16px, 16px, 0);
2187}
2188
3b1da406 2189window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
dae45075 2190/* margin-inline-end: 1px;*/
c0f6797e
RK
2191}
2192
2a5b7882 2193#identity-box:hover > #page-proxy-favicon {
a40f6a79
RK
2194 -moz-image-region: rect(0, 32px, 16px, 16px);
2195}
2196
2a5b7882
RK
2197#identity-box:hover:active > #page-proxy-favicon,
2198#identity-box[open=true] > #page-proxy-favicon {
a40f6a79 2199 -moz-image-region: rect(0, 48px, 16px, 32px);
acb0e9b8 2200}
2201
2a5b7882
RK
2202#identity-box:hover {
2203 background-color: #FFCF00;
7092015d 2204 color: #000000;
2a5b7882
RK
2205}
2206
2207#identity-box:hover:active,
2208#identity-box[open=true] {
d23bf94a 2209 background-color: #FF9F00;
7092015d 2210 color: #000000;
2a5b7882
RK
2211}
2212
56859d76
RK
2213#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2214#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2215#urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
d23bf94a
RK
2216 background-color: #A09090;
2217 color: #000000;
2218}
2219
2220#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover > #identity-icon-labels,
2221#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active > #identity-icon-labels,
2222#urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] > #identity-icon-labels {
56859d76
RK
2223 color: #000000;
2224}
2225
387e6560
RK
2226#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2227#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2228#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2a5b7882
RK
2229 background-color: #008484;
2230 color: #000000;
2231}
2232
d23bf94a
RK
2233#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover > #identity-icon-labels,
2234#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active > #identity-icon-labels,
2235#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] > #identity-icon-labels {
2236 color: #000000;
2237}
2238
c877146a
RK
2239#identity-box:hover > image,
2240#identity-box:hover:active > image,
2241#identity-box[open=true] > image {
2a1534f1 2242 filter: url(chrome://global/skin/filters.svg#active-icon-state);
c877146a
RK
2243}
2244
319c6529
RK
2245/* autocomplete */
2246
1cf9b082
RK
2247/* === BEGIN autocomplete.inc.css === */
2248
2249#PopupAutoComplete > richlistbox > richlistitem {
2250 height: 20px;
2251 min-height: 20px;
2252 border: 0;
2253 border-radius: 0;
2254 padding: 0px 1px 0px 1px;
2255}
2256
b1d1a8bb
RK
2257#PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon {
2258 margin-inline-start: 4px;
2259 margin-inline-end: 0;
2260}
2261
1cf9b082
RK
2262#PopupAutoComplete > richlistbox > richlistitem > .ac-title {
2263 font: icon;
b1d1a8bb 2264 margin-inline-start: 4px;
1cf9b082
RK
2265}
2266
2267#PopupAutoComplete > richlistbox {
2268 padding: 0;
2269}
2270
b1d1a8bb
RK
2271/* Login form autocompletion */
2272#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
2273 display: initial;
2274 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
2275}
2276
2277#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] {
2278 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-highlighted);
2279}
2280
2281/* Insecure field warning */
2282#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
2283 background-color: var(--arrowpanel-dimmed);
2284 border-bottom: 1px solid var(--panel-separator-color);
2285 padding-bottom: 4px;
2286 padding-top: 4px;
2287}
2288
2289#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] {
2290 background-color: var(--arrowpanel-dimmed-further);
2291 color: #FFCF00;
2292}
2293
2294#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title {
2295 color: #A09090;
2296 font-size: 1em;
2297}
2298
2299#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] > .ac-title {
2300 color: inherit;
2301}
2302
2303#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon {
2304 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
2305}
2306
1cf9b082
RK
2307/* === END autocomplete.inc.css === */
2308
2309#PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
2310 border-top: 1px solid #A09090;
2311}
2312
319c6529
RK
2313#treecolAutoCompleteImage {
2314 max-width: 36px;
2315}
acb0e9b8 2316
7c1e433b
RK
2317/*
2318.autocomplete-richlistbox {
2319 padding: 4px;
2320}
2321
2322.autocomplete-richlistitem {
2323 height: 30px;
2324 min-height: 30px;
2325 font: message-box;
2326 border-radius: 2px;
2327 border: 1px solid transparent;
2328}
7c1e433b
RK
2329*/
2330.ac-title {
2331 font-size: 14px;
7c1e433b
RK
2332}
2333
2334.ac-tags {
2335 font-size: 12px;
2336}
2337/*
2338html|span.ac-tag {
7c1e433b
RK
2339 border-radius: 2px;
2340 border: 1px solid transparent;
2341 padding: 0 1px;
2342}
2343*/
2344
2345.ac-separator,
2346.ac-url,
2347.ac-action {
2348 font-size: 12px;
2349}
2350
7c1e433b
RK
2351html|span.ac-emphasize-text-title,
2352html|span.ac-emphasize-text-tag,
2353html|span.ac-emphasize-text-url {
2354 font-weight: 600;
2355}
2356
2357.ac-type-icon[type=bookmark] {
2358 list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
2359}
2360
2361.ac-type-icon[type=bookmark][selected][current] {
2362/* list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
2363}
2364
b9060895 2365.ac-result-type-bookmark {
71bac478 2366 list-style-image: url("chrome://browser/skin/places/bookmark.png");
319c6529 2367 -moz-image-region: rect(0px 16px 16px 0px);
c1f7cc84 2368 width: 16px;
319c6529 2369 height: 16px;
acb0e9b8 2370}
2371
b9060895 2372richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark {
c0f6797e
RK
2373/* -moz-image-region: rect(0px 48px 16px 32px);*/
2374}
2375
7c1e433b 2376.ac-type-icon[type=keyword],
b9060895 2377.ac-site-icon[type=searchengine] {
8922acc9 2378 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
acb0e9b8 2379}
2380
7c1e433b 2381.ac-type-icon[type=keyword][selected],
b9060895 2382.ac-site-icon[type=searchengine][selected] {
7c1e433b
RK
2383 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2384}
8922acc9 2385
b9060895 2386.ac-result-type-tag {
8da9da4e 2387 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
c1f7cc84 2388 width: 16px;
319c6529
RK
2389 height: 16px;
2390}
acb0e9b8 2391
7c1e433b
RK
2392.ac-type-icon[type=switchtab],
2393.ac-type-icon[type=remotetab] {
2394 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
85cfb236
RK
2395}
2396
7c1e433b
RK
2397.ac-type-icon[type=switchtab][selected],
2398.ac-type-icon[type=remotetab][selected] {
2399 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
acb0e9b8 2400}
2401
c1f7cc84
RK
2402.autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2403.autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
319c6529
RK
2404{
2405 color: #8050B0;
2406 font-size: smaller;
acb0e9b8 2407}
319c6529
RK
2408
2409.autocomplete-treebody::-moz-tree-cell(suggesthint) {
2410 border-top: 1px solid #9C9CFF;
acb0e9b8 2411}
2412
319c6529
RK
2413/* combined go/reload/stop button in location bar */
2414
c9b0a396
RK
2415#urlbar-go-button,
2416#urlbar-reload-button,
2417#urlbar-stop-button {
2418 border-style: none;
52d7b436 2419 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
db1c5db1 2420/* margin: 0 9px; */
024a65e9 2421 margin-inline-start: 0px;
c9b0a396
RK
2422 border-inline-start: 1px solid var(--urlbar-separator-color);
2423 border-image: linear-gradient(transparent 15%,
2424 var(--urlbar-separator-color) 15%,
2425 var(--urlbar-separator-color) 85%,
2426 transparent 85%);
2427 border-image-slice: 1;
9abeb12c
RK
2428}
2429
1a44a283
RK
2430/* XXX: temporary for Photon preview changes */
2431#reload-button,
2432#stop-button {
2433 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2434}
2435
9abeb12c 2436#urlbar:-moz-locale-dir(ltr) > toolbarbutton {
38cfeb47
RK
2437 border-top-left-radius: 0px;
2438 border-bottom-left-radius: 0px;
acb0e9b8 2439}
acb0e9b8 2440
9abeb12c 2441#urlbar:-moz-locale-dir(rtl) > toolbarbutton {
38cfeb47
RK
2442 border-top-right-radius: 0px;
2443 border-bottom-right-radius: 0px;
9abeb12c
RK
2444}
2445
46e71434 2446#urlbar > toolbarbutton:not([disabled=true]):active:hover,
dce90fef 2447#urlbar-reload-button:not(:hover) {
dae45075
RK
2448 border-inline-start-style: none;
2449 padding-inline-start: 3px;
dce90fef
RK
2450}
2451
1a44a283 2452#reload-button,
c0f6797e
RK
2453#urlbar-reload-button {
2454 -moz-image-region: rect(0px, 14px, 14px, 0px);
acb0e9b8 2455}
2456
1a44a283 2457#reload-button[disabled=true],
46e71434 2458#urlbar-reload-button[disabled=true] {
c0f6797e 2459 -moz-image-region: rect(28px, 14px, 42px, 0px);
acb0e9b8 2460}
2461
1a44a283 2462#reload-button:not([disabled=true]):hover,
46e71434 2463#urlbar-reload-button:not([disabled=true]):hover {
c0f6797e 2464 -moz-image-region: rect(14px, 14px, 28px, 0px);
ffce2402
RK
2465}
2466
1a44a283 2467#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
c0f6797e
RK
2468#urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2469 transform: scaleX(-1);
acb0e9b8 2470}
2471
c0f6797e
RK
2472#urlbar-go-button {
2473 -moz-image-region: rect(0, 42px, 14px, 28px);
38cfeb47
RK
2474}
2475
fff8097b 2476#urlbar-go-button:hover {
c0f6797e 2477 -moz-image-region: rect(14px, 42px, 28px, 28px);
acb0e9b8 2478}
2479
c0f6797e
RK
2480#urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2481 transform: scaleX(-1);
acb0e9b8 2482}
319c6529 2483
1a44a283 2484#stop-button,
319c6529 2485#urlbar-stop-button {
ffce2402 2486 -moz-image-region: rect(0px, 28px, 14px, 14px);
acb0e9b8 2487}
319c6529 2488
1a44a283 2489#stop-button:hover,
319c6529 2490#urlbar-stop-button:hover {
ffce2402 2491 -moz-image-region: rect(14px, 28px, 28px, 14px);
acb0e9b8 2492}
2493
2e389898 2494@media (min-resolution: 1.1dppx) {
1a44a283
RK
2495 #reload-button,
2496 #stop-button,
c9b0a396
RK
2497 #urlbar-go-button,
2498 #urlbar-reload-button,
2499 #urlbar-stop-button {
2e389898
RK
2500 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2501 }
2502
1a44a283
RK
2503 #reload-button > .toolbarbutton-icon,
2504 #stop-button > .toolbarbutton-icon,
c9b0a396
RK
2505 #urlbar-go-button > .toolbarbutton-icon,
2506 #urlbar-reload-button > .toolbarbutton-icon,
2507 #urlbar-stop-button > .toolbarbutton-icon {
2508 width: 14px;
2509 }
2510
2e389898
RK
2511 #urlbar-go-button {
2512 -moz-image-region: rect(0, 84px, 28px, 56px);
2513 }
2514
2515 #urlbar-go-button:hover {
2516 -moz-image-region: rect(28px, 84px, 56px, 56px);
2517 }
2518
2519 #urlbar-go-button:hover:active {
2520 -moz-image-region: rect(56px, 84px, 84px, 56px);
2521 }
2522
1a44a283 2523 #reload-button,
2e389898
RK
2524 #urlbar-reload-button {
2525 -moz-image-region: rect(0, 28px, 28px, 0);
2526 }
2527
1a44a283 2528 #reload-button:not([disabled]):hover,
2e389898
RK
2529 #urlbar-reload-button:not([disabled]):hover {
2530 -moz-image-region: rect(28px, 28px, 56px, 0);
2531 }
2532
1a44a283 2533 #reload-button:not([disabled]):hover:active,
2e389898
RK
2534 #urlbar-reload-button:not([disabled]):hover:active {
2535 -moz-image-region: rect(56px, 28px, 84px, 0);
2536 }
2537
1a44a283 2538 #stop-button,
2e389898
RK
2539 #urlbar-stop-button {
2540 -moz-image-region: rect(0, 56px, 28px, 28px);
2541 }
2542
1a44a283 2543 #stop-button:not([disabled]):hover,
2e389898
RK
2544 #urlbar-stop-button:not([disabled]):hover {
2545 -moz-image-region: rect(28px, 56px, 56px, 28px);
2546 }
2547
1a44a283 2548 #stop-button:hover:active,
2e389898
RK
2549 #urlbar-stop-button:hover:active {
2550 -moz-image-region: rect(56px, 56px, 84px, 28px);
2551 }
2e389898
RK
2552}
2553
319c6529
RK
2554/* popup blocker button */
2555
2556#page-report-button {
2557 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2558 -moz-image-region: rect(0, 16px, 16px, 0);
acb0e9b8 2559}
319c6529 2560
71bac478 2561#page-report-button:hover ,
319c6529
RK
2562#page-report-button:hover:active,
2563#page-report-button[open="true"] {
71bac478 2564 -moz-image-region: rect(0, 32px, 16px, 16px);
acb0e9b8 2565}
2566
bcb9d005
RK
2567/* Reader mode button */
2568
2569#reader-mode-button {
2570 list-style-image: url("chrome://browser/skin/readerMode.svg");
2571 -moz-image-region: rect(0, 16px, 16px, 0);
2572}
2573
2574#reader-mode-button:hover,
2575#reader-mode-button[readeractive]:hover {
2576 -moz-image-region: rect(0, 32px, 16px, 16px);
2577}
2578
2579#reader-mode-button:hover:active,
2580#reader-mode-button[readeractive] {
2581 -moz-image-region: rect(0, 48px, 16px, 32px);
2582}
2583
c4460289
RK
2584/* social share panel */
2585
d23bf94a
RK
2586/* === BEGIN social.inc.css === */
2587
2588#manage-share-providers {
2589 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
2590 -moz-image-region: rect(0, 468px, 18px, 450px);
2591}
2592
2593#manage-share-providers > .toolbarbutton-icon {
2594 min-height: 18px;
2595 min-width: 18px;
2596}
2597
2598.social-panel > .panel-arrowcontainer > .panel-arrowcontent {
2599 padding: 0;
2600}
2601/* fixup corners for share panel */
2602.social-panel > .social-panel-frame {
2603 border-radius: inherit;
2604}
2605
2606/* === END social.inc.css === */
2607
2608.social-panel-frame {
2609 border-radius: inherit;
2610}
2611
20752032
RK
2612.social-share-frame {
2613 min-width: 756px;
c4460289
RK
2614 height: 150px;
2615}
2616
20752032
RK
2617#share-container {
2618 min-width: 756px;
2619 background-color: white;
2620 background-repeat: no-repeat;
2621 background-position: center center;
c4460289 2622}
20752032
RK
2623#share-container[loading] {
2624 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2625}
2626#share-container > browser {
2627 transition: opacity 150ms ease-in-out;
2628 opacity: 1;
2629}
2630#share-container[loading] > browser {
2631 opacity: 0;
c4460289
RK
2632}
2633
20752032
RK
2634.social-share-toolbar {
2635 border-bottom: 1px solid #9C9CFF;
2636 padding: 2px;
c4460289
RK
2637}
2638
20752032
RK
2639#social-share-provider-buttons {
2640 padding: 0;
2641 margin: 0;
c4460289
RK
2642}
2643
20752032
RK
2644.share-provider-button {
2645 padding: 5px;
2646 margin: 2px;
c4460289
RK
2647}
2648
20752032 2649.share-provider-button > .toolbarbutton-text {
c4460289
RK
2650 display: none;
2651}
20752032 2652.share-provider-button > .toolbarbutton-icon {
c4460289
RK
2653 width: 16px;
2654 min-height: 16px;
2655 max-height: 16px;
2656}
2657
c4460289 2658#social-share-panel {
c4460289 2659 min-height: 100px;
20752032 2660 min-width: 766px;
c4460289
RK
2661}
2662
20752032 2663#share-container,
c4460289 2664.social-share-frame {
e2734cc7 2665 border-top-left-radius: 0;
c4460289 2666 border-bottom-left-radius: inherit;
e2734cc7 2667 border-top-right-radius: 0;
20752032 2668 border-bottom-right-radius: inherit;
c4460289
RK
2669}
2670
20752032 2671#social-share-panel > .social-share-toolbar {
e2734cc7 2672 border-top-left-radius: inherit;
e2734cc7 2673 border-top-right-radius: inherit;
e2734cc7
RK
2674}
2675
20752032 2676#social-share-provider-buttons {
c4460289 2677 border-top-left-radius: inherit;
e2734cc7 2678 border-top-right-radius: inherit;
e2734cc7
RK
2679}
2680
c0f6797e 2681/* bookmarks menu-button */
319c6529 2682
c0f6797e
RK
2683#bookmarks-menu-button.bookmark-item {
2684 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2685 -moz-image-region: rect(0px 16px 16px 0px);
acb0e9b8 2686}
319c6529 2687
c0f6797e
RK
2688#bookmarks-menu-button.bookmark-item[starred] {
2689 -moz-image-region: rect(0px 32px 16px 16px);
acb0e9b8 2690}
319c6529 2691
e9fbfc3a 2692#nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
c0f6797e
RK
2693 padding-top: 2px;
2694 padding-bottom: 2px;
71bac478
RK
2695}
2696
c0f6797e
RK
2697#BMB_bookmarksPopup[side="top"],
2698#BMB_bookmarksPopup[side="bottom"] {
2699 margin-left: -20px;
2700 margin-right: -20px;
71bac478
RK
2701}
2702
c0f6797e
RK
2703#BMB_bookmarksPopup[side="left"],
2704#BMB_bookmarksPopup[side="right"] {
2705 margin-top: -20px;
2706 margin-bottom: -20px;
acb0e9b8 2707}
319c6529
RK
2708
2709/* bookmarking panel */
c0f6797e 2710
319c6529
RK
2711#editBookmarkPanelStarIcon {
2712 list-style-image: url("chrome://browser/skin/places/starred48.png");
2713 width: 48px;
2714 height: 48px;
acb0e9b8 2715}
319c6529
RK
2716
2717#editBookmarkPanelStarIcon[unstarred] {
2718 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
acb0e9b8 2719}
2720
319c6529
RK
2721#editBookmarkPanelTitle {
2722 font-size: 130%;
acb0e9b8 2723}
319c6529
RK
2724
2725#editBookmarkPanelHeader,
2726#editBookmarkPanelContent {
2727 margin-bottom: .5em;
acb0e9b8 2728}
319c6529
RK
2729
2730/* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2731#editBMPanel_folderTree {
2732 min-width: 27em;
acb0e9b8 2733}
2734
319c6529
RK
2735/* ::::: content area ::::: */
2736
bcb9d005
RK
2737#sidebar-box {
2738 background-color: #9C9CFF;
2739 color: #000000;
2740}
2741
319c6529 2742#sidebar {
bcb9d005
RK
2743 background-color: #000000;
2744}
2745
2746#sidebar-splitter {
dae45075 2747 margin-inline-start: 0;
bcb9d005
RK
2748}
2749
2750#sidebar-header {
2751 color: #000000;
2752 padding: 2px;
acb0e9b8 2753}
319c6529
RK
2754
2755#sidebar-title {
dae45075 2756 padding-inline-start: 0px;
acb0e9b8 2757}
319c6529 2758
589b5528
RK
2759#sidebar-header > .close-icon {
2760/* padding: 4px 2px;
2761 margin: 0;
2762 border: none;*/
2763 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2764}
2765
2766#sidebar-header > .close-icon:hover,
2767#sidebar-header > .close-icon:hover:active {
2768 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2769}
2770
bcb9d005
RK
2771#sidebar-splitter:-moz-locale-dir(ltr),
2772#sidebar:-moz-locale-dir(ltr) {
2773 border-radius: 0 5px 0 0;
2774}
2775
2776#sidebar-splitter:-moz-locale-dir(rtl),
2777#sidebar:-moz-locale-dir(rtl) {
2778 border-radius: 5px 0 0 0;
2779}
2780
fe524e0c
RK
2781.browserContainer > findbar {
2782/*
2783 background-color: -moz-dialog;
2784 color: -moz-DialogText;
2785*/
2786}
2787
319c6529 2788/* Tabstrip */
b36fc72e 2789
c0f6797e 2790#TabsToolbar {
e20c83c3
RK
2791 min-height: 0;
2792 padding: 0;
2793 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2794}
2795
b36fc72e 2796#TabsToolbar .toolbar-holder {
c1f7cc84 2797 background-color: #000000; /* correct effect of being an actual toolbar */
acb0e9b8 2798}
2799
b36fc72e 2800#main-window[disablechrome] #TabsToolbar,
319c6529 2801#TabsToolbar[tabsontop="false"] {
8b5fc82e 2802 border-bottom: 1px solid #008484;
acb0e9b8 2803}
319c6529 2804
6dc70335
RK
2805/* === BEGIN tabs.inc.css === */
2806
368d0b7f
RK
2807:root {
2808 /* --tab-toolbar-navbar-overlap: 1px; */
024a65e9 2809 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
368d0b7f 2810 /* --tab-min-height: 31px; */
024a65e9
RK
2811}
2812#TabsToolbar {
2813 /* --tab-stroke-background-size: auto 100%; */
368d0b7f
RK
2814}
2815
319c6529 2816.tabbrowser-tab,
43ee1307
RK
2817.tabs-newtab-button,
2818#TabsToolbar > #new-tab-button {
319c6529 2819 margin-top: 0px;
acb0e9b8 2820}
319c6529 2821
43ee1307 2822.tabbrowser-tab {
57fc408c
RK
2823 padding: 1px 4px 2px;
2824}
2825
2826.tabbrowser-tab:first-of-type {
dae45075 2827 margin-inline-start: 2px;
57fc408c
RK
2828}
2829
43ee1307 2830.tabs-newtab-button,
e0f773b9
RK
2831#TabsToolbar > #new-tab-button,
2832#TabsToolbar > toolbarpaletteitem > #new-tab-button,
2833#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
57fc408c 2834 border-radius: 8px 8px 0px 0px;
dae45075 2835 margin-inline-start: 0;
57fc408c
RK
2836}
2837
43ee1307 2838.tabs-newtab-button:not(:hover),
e0f773b9
RK
2839#TabsToolbar > #new-tab-button:not(:hover),
2840#TabsToolbar > toolbarpaletteitem > #new-tab-button,
2841#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
57fc408c
RK
2842 background-color: #C09070;
2843}
2844
c0f6797e 2845/* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
05148fed 2846.tabbrowser-tab[visuallyselected=true] {
c0f6797e
RK
2847/* position: relative;
2848 z-index: 2;*/
acb0e9b8 2849}
2850
c0f6797e 2851.tab-background-middle {
acb0e9b8 2852}
2853
c0f6797e 2854.tab-content {
acb0e9b8 2855}
319c6529 2856
d533ec21
RK
2857.tab-content[pinned] {
2858}
2859
2860.tab-throbber,
c0f6797e 2861.tab-icon-image,
db1c5db1 2862.tab-sharing-icon-overlay,
b1dfcf32 2863.tab-icon-sound,
c0f6797e 2864.tab-close-button {
acb0e9b8 2865}
2866
319c6529 2867.tab-throbber,
db1c5db1 2868.tab-sharing-icon-overlay,
319c6529 2869.tab-icon-image {
319c6529 2870 height: 16px;
c0f6797e 2871 width: 16px;
dae45075 2872 margin-inline-end: 3px;
c0f6797e
RK
2873}
2874
2875.tab-icon-image {
dbad77ea 2876 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
613daf44 2877}
2878
db1c5db1
RK
2879.tab-icon-image[sharing]:not([selected]),
2880.tab-sharing-icon-overlay {
b9060895 2881 animation: 3s linear tab-sharing-icon-pulse infinite;
db1c5db1
RK
2882}
2883
b9060895
RK
2884@keyframes tab-sharing-icon-pulse {
2885/* This should remain identical to identity-box-sharing-icon-pulse in identity-block.inc.css */
db1c5db1
RK
2886 0%, 16.66%, 83.33%, 100% {
2887 opacity: 0;
2888 }
2889 33.33%, 66.66% {
2890 opacity: 1;
2891 }
2892}
2893
2894.tab-icon-image[sharing]:not([selected]) {
2895 animation-delay: -1.5s;
2896}
2897
2898.tab-sharing-icon-overlay {
2899 /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
2900 margin-inline-start: -22px;
2901 position: relative;
2902}
2903
2904.tab-sharing-icon-overlay[sharing="camera"] {
d23bf94a 2905 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
db1c5db1
RK
2906}
2907
2908.tab-sharing-icon-overlay[sharing="microphone"] {
d23bf94a 2909 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
db1c5db1
RK
2910}
2911
2912.tab-sharing-icon-overlay[sharing="screen"] {
d23bf94a 2913 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
db1c5db1
RK
2914}
2915
d533ec21
RK
2916.tab-icon-overlay {
2917 width: 16px;
2918 height: 16px;
d7b7f7e1 2919 margin-top: -8px;
dae45075 2920 margin-inline-start: -15px;
7327c957 2921 margin-inline-end: -1px;
b1dfcf32 2922 position: relative;
d533ec21
RK
2923}
2924
2925.tab-icon-overlay[crashed] {
d533ec21
RK
2926 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2927}
2928
024a65e9 2929.tab-icon-overlay[soundplaying],
1cf9b082
RK
2930.tab-icon-overlay[muted]:not([crashed]),
2931.tab-icon-overlay[blocked]:not([crashed]) {
d7b7f7e1 2932 border-radius: 10px;
b1dfcf32
RK
2933}
2934
024a65e9 2935.tab-icon-overlay[soundplaying]:hover,
1cf9b082
RK
2936.tab-icon-overlay[muted]:hover,
2937.tab-icon-overlay[blocked]:not([crashed]):hover {
b1dfcf32
RK
2938 background-color: #FFCF00;
2939}
2940
024a65e9 2941.tab-icon-overlay[soundplaying] {
b1dfcf32
RK
2942 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2943}
2944
024a65e9 2945.tab-icon-overlay[muted]:not([crashed]) {
b1dfcf32
RK
2946 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2947}
2948
1cf9b082
RK
2949.tab-icon-overlay[blocked]:not([crashed]) {
2950 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-blocked");
b1dfcf32
RK
2951}
2952
1cf9b082
RK
2953#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not([selected]):not(:hover),
2954.tab-icon-overlay[soundplaying][selected]:-moz-lwtheme-brighttext:not(:hover) {
2955 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2956}
b1dfcf32 2957
1cf9b082
RK
2958#TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not([selected]):not(:hover),
2959.tab-icon-overlay[mouted][selected]:-moz-lwtheme-brighttext:not(:hover) {
024a65e9 2960 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
b1dfcf32
RK
2961}
2962
1cf9b082
RK
2963#TabsToolbar[brighttext] .tab-icon-overlay[blocked]:not([crashed]):not([selected]):not(:hover),
2964.tab-icon-overlay[blocked][selected]:-moz-lwtheme-brighttext:not(:hover) {
2965 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-blocked");
2966}
2967
3d64e0ce 2968.tab-throbber[busy] {
95f333af 2969 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
613daf44 2970}
319c6529
RK
2971
2972.tab-throbber[progress] {
95f333af 2973 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
613daf44 2974}
319c6529 2975
85b6b932
RK
2976@media (min-resolution: 1.1dppx) {
2977 .tab-throbber[busy] {
2978 list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2979 }
2980
2981 .tab-throbber[progress] {
2982 list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2983 }
2984}
2985
319c6529
RK
2986.tab-throbber[pinned],
2987.tab-icon-image[pinned] {
dae45075
RK
2988 margin-inline-start: 2px;
2989 margin-inline-end: 2px;
613daf44 2990}
319c6529 2991
c0f6797e 2992.tab-label {
aec5dfad
RK
2993 /* this needs to add up to the 16px of the icon image */
2994 height: 12px;
2995 margin-top: 2px !important;
2996 margin-bottom: 2px !important;
c0f6797e
RK
2997}
2998
b1dfcf32 2999.tab-icon-sound {
dae45075 3000 margin-inline-start: 4px;
b1dfcf32
RK
3001 width: 16px;
3002 height: 16px;
3003 padding: 0;
3004}
3005
d23bf94a 3006.tab-icon-sound[soundplaying],
1cf9b082
RK
3007.tab-icon-sound[muted],
3008.tab-icon-sound[blocked] {
d23bf94a 3009 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
0282321d 3010 filter: url(chrome://global/skin/filters.svg#fill);
d23bf94a 3011 fill: currentColor;
024a65e9
RK
3012}
3013
3014.tab-icon-sound[muted] {
d23bf94a 3015 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
b1dfcf32
RK
3016}
3017
1cf9b082
RK
3018.tab-icon-sound[blocked] {
3019 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
3020}
3021
c0f6797e
RK
3022.tab-close-button {
3023 margin-top: 1px;
3024 padding: 0;
3025}
3026
b1d1a8bb
RK
3027.tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover),
3028.tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
1cf9b082
RK
3029 transition: opacity .3s linear var(--soundplaying-removal-delay);
3030 opacity: 0;
3031}
3032
c0f6797e
RK
3033.tab-background,
3034.tabs-newtab-button {
3035 /* overlap the tab curves */
3036}
3037
3038.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
3039}
3040
93c91f62
RK
3041/* Tab Overflow */
3042.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
3043.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3044}
3045
3046.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3047.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
3048}
3049
3050.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3051}
3052
3053.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3054}
3055
3056.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3057.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3058}
3059
3060.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3061.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3062}
3063
d23bf94a
RK
3064.tab-background-start[selected=true]::after,
3065.tab-background-start[selected=true]::before,
c0f6797e
RK
3066.tab-background-start,
3067.tab-background-end,
d23bf94a
RK
3068.tab-background-end[selected=true]::after,
3069.tab-background-end[selected=true]::before {
c0f6797e
RK
3070}
3071
05148fed 3072.tabbrowser-tab:not([visuallyselected=true]),
c0f6797e
RK
3073.tabbrowser-tab:-moz-lwtheme {
3074}
3075
319c6529 3076/* tabbrowser-tab focus ring */
c0f6797e 3077.tabbrowser-tab:focus {
319c6529 3078 outline: 1px dotted;
613daf44 3079}
319c6529 3080
c0f6797e
RK
3081/* Selected tab */
3082
05148fed 3083.tabbrowser-tab[visuallyselected="true"] {
c0f6797e
RK
3084}
3085
3086/* End selected tab */
3087
c0f6797e
RK
3088/* Tab pointer-events */
3089/*
3090.tabbrowser-tab {
3091 pointer-events: none;
3092}
3093
3094.tab-background-middle,
3095.tabs-newtab-button,
b1dfcf32
RK
3096.tab-icon-overlay[soundplaying],
3097.tab-icon-overlay[muted]:not([crashed]),
1cf9b082 3098.tab-icon-overlay[blocked]:not([crashed]),
b1dfcf32 3099.tab-icon-sound,
c0f6797e
RK
3100.tab-close-button {
3101 pointer-events: auto;
3102}
3103*/
3104/* Pinned tabs */
3105
fa703ff4 3106/*
d23bf94a
RK
3107.tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
3108.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
fa703ff4
RK
3109*/
3110.tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
c0f6797e
RK
3111 background-color: #E7ADE7;
3112}
3113
d23bf94a 3114.tab-label[attention]:not([selected="true"]) {
fa703ff4
RK
3115 font-weight: bold;
3116}
3117
3118.tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
c0f6797e
RK
3119 background-color: #3333FF;
3120 color: #000000;
3121}
3122
024a65e9
RK
3123/* Tab separators */
3124/*
3125.tabbrowser-tab::after,
3126.tabbrowser-tab::before {
3127 width: 1px;
dae45075 3128 margin-inline-start: -1px;
024a65e9
RK
3129 background-image: linear-gradient(transparent 5px,
3130 currentColor 5px,
3131 currentColor calc(100% - 4px),
3132 transparent calc(100% - 4px));
3133 opacity: 0.2;
3134}
3135
3136#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3137#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3138 opacity: 0.4;
3139}
3140*/
3141/* Also show separators beside the selected tab when dragging it. */
3142/*
3143#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
d23bf94a
RK
3144.tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3145#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
024a65e9
RK
3146 content: "";
3147 display: -moz-box;
3148}
3149*/
c0f6797e
RK
3150/* New tab button */
3151
3152.tabs-newtab-button {
3153 width: 28px;
d533ec21 3154 /* width: calc(36px + var(--tab-curve-width)); */
c0f6797e 3155}
db1c5db1
RK
3156@media (min-resolution: 1.1dppx) {
3157 /* image preloading hack from like lowdpi styles */
3158 #tabbrowser-tabs::before {
3159 }
c0f6797e 3160
d23bf94a 3161 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
db1c5db1
RK
3162 .tabs-newtab-button:hover {
3163 }
c0f6797e 3164
d23bf94a 3165 .tab-background-middle[selected=true] {
db1c5db1
RK
3166 }
3167
d23bf94a
RK
3168 .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
3169 .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
db1c5db1
RK
3170 }
3171
d23bf94a
RK
3172 .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
3173 .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
db1c5db1 3174 }
43371c9b
RK
3175}
3176
d23bf94a
RK
3177/* All tabs menupopup */
3178
3179.alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3180 background-color: #402800;
3181}
3182
3183.alltabs-endimage[soundplaying],
1cf9b082
RK
3184.alltabs-endimage[muted],
3185.alltabs-endimage[blocked] {
d23bf94a 3186 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
0282321d 3187 filter: url(chrome://global/skin/filters.svg#fill);
d23bf94a
RK
3188 fill: currentColor;
3189}
3190
3191.alltabs-endimage[muted] {
3192 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
3193}
3194
1cf9b082
RK
3195.alltabs-endimage[blocked] {
3196 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
3197}
3198
db1c5db1
RK
3199/* === END tabs.inc.css === */
3200
8ad8bf83 3201/* Tab DnD indicator */
319c6529
RK
3202.tab-drop-indicator {
3203 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
9abeb12c 3204 margin-bottom: -11px;
613daf44 3205}
3206
319c6529
RK
3207/* Tab close button */
3208.tab-close-button {
710194f1
RK
3209 list-style-image: url("chrome://global/skin/icons/close-button.gif") !important;
3210 -moz-image-region: auto !important;
319c6529 3211}
acb0e9b8 3212
319c6529
RK
3213.tab-close-button:hover,
3214.tab-close-button:hover[selected="true"] {
710194f1
RK
3215 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3216 -moz-image-region: auto !important;
acb0e9b8 3217}
319c6529
RK
3218
3219.tab-close-button:hover:active,
3220.tab-close-button:hover:active[selected="true"] {
710194f1
RK
3221 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3222 -moz-image-region: auto !important;
acb0e9b8 3223}
319c6529 3224
710194f1
RK
3225.tab-close-button > .button-icon,
3226.tab-close-button > .button-box > .button-icon,
3227.tab-close-button > .toolbarbutton-icon {
3228 width: auto !important;
3229}
3230
3231
319c6529
RK
3232/* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3233
319c6529
RK
3234.tabbrowser-arrowscrollbox > .scrollbutton-up,
3235.tabbrowser-arrowscrollbox > .scrollbutton-down {
319c6529
RK
3236 margin: 0;
3237 padding-top: 0;
3238 padding-bottom: 0;
c0f6797e
RK
3239 background-origin: border-box;
3240}
3241
3242#main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3243#main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3244.tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3245.tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3246 }
b7f3670c 3247
c0f6797e
RK
3248.tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3249.tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3250 }
3251
3252.tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3253.tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3254/* transform: scaleX(-1);*/
3255}
3256
3257.tabbrowser-arrowscrollbox > .scrollbutton-down {
3258 transition: 1s background-color ease-out;
acb0e9b8 3259}
319c6529 3260
38bd4bf1 3261.tabbrowser-arrowscrollbox > .scrollbutton-down[highlight] {
319c6529 3262 background-color: #008484;
acb0e9b8 3263}
319c6529 3264
c0f6797e
RK
3265.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3266.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3267/* border-width: 0 2px 0 0;
3268 border-style: solid;
3269 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3270}
3271
319c6529
RK
3272.tabs-newtab-button > .toolbarbutton-icon {
3273 margin-top: -1px;
3274 margin-bottom: -1px;
acb0e9b8 3275}
319c6529
RK
3276
3277.tabs-newtab-button,
3278#TabsToolbar > #new-tab-button,
e20c83c3
RK
3279#TabsToolbar > toolbarpaletteitem > #new-tab-button,
3280#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
e0f773b9
RK
3281 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3282 -moz-image-region: auto;
acb0e9b8 3283}
3284
8b5fc82e 3285.tabs-newtab-button,
38cfeb47 3286.tabs-newtab-button:hover,
c0f6797e 3287#TabsToolbar > #new-tab-button,
38cfeb47 3288#TabsToolbar > #new-tab-button:hover {
acb0e9b8 3289}
319c6529 3290
c0f6797e
RK
3291#main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3292#main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3293#main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3294.tabs-newtab-button:-moz-lwtheme-brighttext,
3295#TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3296#TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
acb0e9b8 3297}
3298
c0f6797e
RK
3299#TabsToolbar > #new-tab-button {
3300 width: 26px;
dbad77ea 3301 -moz-box-orient: horizontal;
c0f6797e
RK
3302}
3303
3304#alltabs-button {
3305 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
acb0e9b8 3306}
319c6529 3307
f9fc08c7
RK
3308#alltabs-button:hover,
3309#alltabs-button:hover:active,
3310#alltabs-button[open="true"] {
8da9da4e 3311 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
acb0e9b8 3312}
319c6529 3313
c0f6797e
RK
3314#main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3315#alltabs-button:-moz-lwtheme-brighttext {
3316}
3317
3318#alltabs-button > .toolbarbutton-icon {
3319/* margin: 0 2px;*/
3320}
3321
3322#alltabs-button > .toolbarbutton-menu-dropmarker {
3323 display: none;
3324}
3325
319c6529
RK
3326/* All tabs menupopup */
3327.alltabs-item > .menu-iconic-left > .menu-iconic-icon {
dbad77ea 3328 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
8da9da4e 3329 -moz-image-region: auto;
acb0e9b8 3330}
3331
319c6529
RK
3332.alltabs-item[selected="true"] {
3333 font-weight: bold;
acb0e9b8 3334}
319c6529
RK
3335
3336.alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
7c1e433b
RK
3337 list-style-image: url("chrome://global/skin/icons/loading.png");
3338}
3339
3340@media (min-resolution: 1.1dppx) {
3341 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3342 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3343 }
acb0e9b8 3344}
319c6529 3345
319c6529
RK
3346toolbarbutton.chevron {
3347 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
acb0e9b8 3348}
319c6529
RK
3349
3350toolbarbutton.chevron:hover {
3351 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
acb0e9b8 3352}
e548e22e
RK
3353/*
3354toolbar[brighttext] toolbarbutton.chevron {
3355 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3356}
3357*/
319c6529
RK
3358toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3359toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
71a617ff 3360 transform: scaleX(-1);
acb0e9b8 3361}
319c6529
RK
3362
3363toolbarbutton.chevron > .toolbarbutton-text,
3364toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3365 display: none;
acb0e9b8 3366}
319c6529
RK
3367
3368toolbarbutton.chevron > .toolbarbutton-icon {
3369 margin: 0;
acb0e9b8 3370}
3371
319c6529 3372#sidebar-throbber[loading="true"] {
7c1e433b 3373 list-style-image: url("chrome://global/skin/icons/loading.png");
dae45075 3374 margin-inline-end: 4px;
acb0e9b8 3375}
319c6529 3376
7c1e433b
RK
3377@media (min-resolution: 1.1dppx) {
3378 #sidebar-throbber[loading="true"] {
3379 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3380 width: 16px;
3381 }
3382}
3383
319c6529
RK
3384/* Bookmarks toolbar */
3385#PlacesToolbarDropIndicator {
8da9da4e 3386 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
acb0e9b8 3387}
3388
319c6529
RK
3389toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3390 background-color: #008484 !important;
3391 color: #FFCF00 !important;
613daf44 3392}
319c6529
RK
3393
3394/* rules for menupopup drop indicators */
3395.menupopup-drop-indicator-bar {
3396 position: relative;
3397 /* these two margins must together compensate the indicator's height */
3398 margin-top: -1px;
3399 margin-bottom: -1px;
613daf44 3400}
319c6529
RK
3401
3402.menupopup-drop-indicator {
3403 list-style-image: none;
3404 height: 2px;
dae45075 3405 margin-inline-end: -4em;
319c6529 3406 background-color: #008484;
613daf44 3407}
3408
a5cb6e53
RK
3409/* === BEGIN notification-icons.inc.css === */
3410
db1c5db1
RK
3411#notification-popup-box {
3412 border-radius: 3px 0 0 3px;
3413 padding: 5px 0px;
3414 margin: -5px 0px;
3415 margin-inline-end: -5px;
3416 padding-inline-end: 5px;
3417}
3418
d23bf94a
RK
3419.notification-anchor-icon,
3420#blocked-permissions-container > .blocked-permission-icon {
3421 width: 16px;
3422 height: 16px;
3423 margin-inline-start: 2px;
3424}
3425
db1c5db1
RK
3426/* This class can be used alone or in combination with the class defining the
3427 type of icon displayed. This rule must be defined before the others in order
3428 for its list-style-image to be overridden. */
3429.notification-anchor-icon {
b9060895 3430 list-style-image: url(chrome://browser/skin/notification-icons.svg#default-info);
db1c5db1
RK
3431}
3432
3433.notification-anchor-icon:-moz-focusring {
3434 outline: 1px dotted #008484;
3435}
3436
3437@media (min-resolution: 1.1dppx) {
3438 .notification-anchor-icon {
dbad77ea 3439 list-style-image: url(chrome://global/skin/icons/info.svg);
db1c5db1
RK
3440 }
3441}
3442
d23bf94a
RK
3443.notification-anchor-icon:not(.plugin-blocked),
3444#blocked-permissions-container > .blocked-permission-icon {
2a1534f1 3445 filter: url(chrome://global/skin/filters.svg#fill);
d23bf94a 3446 fill: currentColor;
7c0a01f2
RK
3447}
3448
d23bf94a
RK
3449/* INDIVIDUAL NOTIFICATIONS */
3450
db1c5db1
RK
3451.popup-notification-icon[popupid="web-notifications"],
3452.desktop-notification-icon {
3453 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
7c0a01f2
RK
3454}
3455
d23bf94a 3456.desktop-notification-icon.blocked-permission-icon {
db1c5db1 3457 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
7c0a01f2
RK
3458}
3459
db1c5db1
RK
3460.geo-icon {
3461 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
7c0a01f2
RK
3462}
3463
d23bf94a 3464.geo-icon.blocked-permission-icon {
db1c5db1 3465 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
7c0a01f2
RK
3466}
3467
db1c5db1
RK
3468.popup-notification-icon[popupid="geolocation"] {
3469 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
acb0e9b8 3470}
319c6529 3471
db1c5db1
RK
3472.popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3473.indexedDB-icon {
3474 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
a40f6a79
RK
3475}
3476
d23bf94a 3477.indexedDB-icon.blocked-permission-icon {
db1c5db1 3478 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
82b4252f
RK
3479}
3480
db1c5db1
RK
3481.login-icon {
3482 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
acb0e9b8 3483}
3484
05148fed 3485.popup-notification-icon[popupid="password"] {
db1c5db1 3486 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
acb0e9b8 3487}
3488
1cf9b082 3489.camera-icon {
db1c5db1 3490 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
c1d2ce3e
RK
3491}
3492
d23bf94a
RK
3493.camera-icon.in-use {
3494 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing);
3495}
3496
3497.camera-icon.blocked-permission-icon {
db1c5db1 3498 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
9168a62c
RK
3499}
3500
db1c5db1
RK
3501.microphone-icon {
3502 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
82b4252f
RK
3503}
3504
d23bf94a
RK
3505.microphone-icon.in-use {
3506 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing);
3507}
3508
3509.microphone-icon.blocked-permission-icon {
db1c5db1 3510 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
cae267ab
RK
3511}
3512
1cf9b082 3513.popup-notification-icon.microphone-icon {
db1c5db1 3514 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
f993773d
RK
3515}
3516
db1c5db1
RK
3517.screen-icon {
3518 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
f993773d
RK
3519}
3520
d23bf94a
RK
3521.screen-icon.in-use {
3522 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing);
319c6529 3523}
acb0e9b8 3524
d23bf94a
RK
3525.screen-icon.blocked-permission-icon {
3526 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
db1c5db1 3527}
c9b0a396 3528
1cf9b082
RK
3529#webRTC-preview:not([hidden]) {
3530 display: -moz-stack;
3531 border-radius: 4px;
3532 border: 1px solid #A09090;
3533 overflow: hidden;
3534 min-width: 300px;
3535 min-height: 10em;
3536}
3537
3538html|*#webRTC-previewVideo {
3539 width: 300px;
3540 /* If we don't set the min-width, width is ignored. */
3541 min-width: 300px;
3542 max-height: 200px;
3543}
3544
3545#webRTC-previewWarning {
3546 background: #FF0000 url("chrome://browser/skin/warning-white.svg") no-repeat .75em .75em;
3547 margin: 0;
3548 padding: .5em;
3549 padding-inline-start: calc(1.5em + 16px);
3550 border-top: 1px solid #A09090;
3551}
3552
3553#webRTC-previewWarning > .text-link {
3554 margin-inline-start: 0;
3555}
3556
db1c5db1
RK
3557/* This icon has a block sign in it, so we don't need a blocked version. */
3558.popup-icon {
3559 list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
acb0e9b8 3560}
3561
db1c5db1
RK
3562/* EME */
3563
3564.popup-notification-icon[popupid="drmContentPlaying"],
3565.drm-icon {
3566 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3567}
3568
3569.drm-icon:hover:active {
3570 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3571}
3572
3573#eme-notification-icon[firstplay=true] {
3574 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
acb0e9b8 3575}
3576
db1c5db1
RK
3577@keyframes emeTeachingMoment {
3578 0% {transform: translateX(0); }
3579 25% {transform: translateX(3px) }
3580 75% {transform: translateX(-3px) }
3581 100% { transform: translateX(0); }
acb0e9b8 3582}
3583
db1c5db1
RK
3584/* INSTALL ADDONS */
3585
3586.install-icon {
b1d1a8bb 3587 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
7c0a01f2
RK
3588}
3589
db1c5db1
RK
3590.popup-notification-icon[popupid="xpinstall-disabled"],
3591.popup-notification-icon[popupid="addon-install-blocked"],
3592.popup-notification-icon[popupid="addon-install-origin-blocked"] {
3593 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
7c0a01f2
RK
3594}
3595
db1c5db1
RK
3596.popup-notification-icon[popupid="addon-progress"] {
3597 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
acb0e9b8 3598}
3599
db1c5db1
RK
3600.popup-notification-icon[popupid="addon-install-failed"] {
3601 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
acb0e9b8 3602}
3603
db1c5db1
RK
3604.popup-notification-icon[popupid="addon-install-confirmation"] {
3605 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
acb0e9b8 3606}
3607
db1c5db1
RK
3608#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3609 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
7c0a01f2
RK
3610}
3611
db1c5db1
RK
3612.popup-notification-icon[popupid="addon-install-complete"] {
3613 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
b27cc46e
RK
3614}
3615
db1c5db1
RK
3616.popup-notification-icon[popupid="addon-install-restart"] {
3617 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
a40f6a79
RK
3618}
3619
db1c5db1
RK
3620.popup-notification-icon[popupid="click-to-play-plugins"] {
3621 list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
990cba4b
RK
3622}
3623
db1c5db1
RK
3624/* OFFLINE APPS */
3625
3626.popup-notification-icon[popupid*="offline-app-requested"],
3627.popup-notification-icon[popupid="offline-app-usage"] {
3628 list-style-image: url(chrome://global/skin/icons/question-64.png);
3629}
3630
3631/* PLUGINS */
3632
3633.plugin-icon {
3634 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
fe524e0c
RK
3635}
3636
db1c5db1
RK
3637.plugin-icon.plugin-blocked {
3638 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
fe524e0c
RK
3639}
3640
6adbc9a6
RK
3641#notification-popup-box[hidden] {
3642 /* Override display:none to make the pluginBlockedNotification animation work
3643 when showing the notification repeatedly. */
3644 display: -moz-box;
3645 visibility: collapse;
3646}
3647
f76c6aee 3648#plugins-notification-icon.plugin-blocked[showing] {
990cba4b
RK
3649 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3650}
3651
3652@keyframes pluginBlockedNotification {
3653 from {
3654 opacity: 0;
3655 }
3656 to {
3657 opacity: 1;
3658 }
3659}
3660
db1c5db1 3661/* SOCIAL API */
7bc075b6 3662
db1c5db1
RK
3663.popup-notification-icon[popupid="servicesInstall"] {
3664 list-style-image: url(chrome://browser/skin/social/services-64.png);
d7b7f7e1
RK
3665}
3666
db1c5db1
RK
3667.service-icon {
3668 list-style-image: url(chrome://browser/skin/social/services-16.png);
82b4252f
RK
3669}
3670
db1c5db1 3671/* TRANSLATION */
82b4252f 3672
db1c5db1
RK
3673.translation-icon {
3674 list-style-image: url(chrome://browser/skin/translation-16.png);
a5cb6e53
RK
3675 -moz-image-region: rect(0px, 16px, 16px, 0px);
3676}
3677
db1c5db1 3678.translation-icon.in-use {
a5cb6e53
RK
3679 -moz-image-region: rect(0px, 32px, 16px, 16px);
3680}
3681
66b04a00
RK
3682/* UPDATE */
3683
3684.popup-notification-icon[popupid="update-available"],
3685.popup-notification-icon[popupid="update-manual"],
3686.popup-notification-icon[popupid="update-restart"] {
3687 background: #74BF43 url(chrome://browser/skin/notification-icons.svg#update) no-repeat center;
3688 border-radius: 50%;
3689}
3690
a5cb6e53
RK
3691/* === END notification-icons.inc.css === */
3692
936e60fe
RK
3693.popup-notification-body[popupid="addon-progress"],
3694.popup-notification-body[popupid="addon-install-confirmation"] {
3695 width: 28em;
3696 max-width: 28em;
3697}
3698
b9060895
RK
3699.addon-install-confirmation-name {
3700 font-weight: bold;
3701}
3702
3703.addon-webext-perm-header {
3704 font-size: 1.3em;
3705}
3706
3707.addon-webext-name {
3708 display: inline;
3709 font-weight: bold;
3710 margin: 0;
3711}
3712
3713.addon-addon-icon {
3714 width: 14px;
3715 height: 14px;
3716 list-style-image: url("chrome://browser/skin/menuPanel.svg");
3717 -moz-image-region: rect(0px, 288px, 32px, 256px);
3718}
3719
3720.addon-toolbar-icon {
3721 width: 14px;
3722 height: 14px;
05f7d22f 3723 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
b9060895
RK
3724 -moz-image-region: rect(0, 486px, 18px, 468px);
3725}
3726
3727/* Notification icon box */
3728
3729.notification-anchor-icon:-moz-focusring {
3730/* outline: 1px dotted -moz-DialogText;*/
3731}
3732
ed88669c
RK
3733/* Translation infobar */
3734
3735/* === BEGIN infobar.inc.css === */
3736
3737notification[value="translation"] .messageImage {
93c91f62 3738 list-style-image: url("chrome://browser/skin/translation-16.png");
ed88669c
RK
3739 -moz-image-region: rect(0, 32px, 16px, 16px);
3740}
3741
3742@media (min-resolution: 1.25dppx) {
3743 notification[value="translation"] .messageImage {
93c91f62 3744 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
ed88669c
RK
3745 -moz-image-region: rect(0, 64px, 32px, 32px);
3746 }
3747}
3748
93c91f62
RK
3749notification[value="translation"][state="translating"] .messageImage {
3750 list-style-image: url("chrome://browser/skin/translating-16.png");
3751 -moz-image-region: auto;
3752}
3753
3754@media (min-resolution: 1.25dppx) {
3755 notification[value="translation"][state="translating"] .messageImage {
3756 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3757 }
3758}
3759
a5cb6e53
RK
3760notification[value="translation"] hbox[anonid="details"] {
3761 overflow: hidden;
3762}
3763
ed88669c
RK
3764notification[value="translation"] button,
3765notification[value="translation"] menulist {
3766 min-width: 0;
ed88669c
RK
3767}
3768
3769notification[value="translation"] menulist > .menulist-dropmarker {
3770}
3771
93c91f62
RK
3772.translation-menupopup arrowscrollbox {
3773 padding-bottom: 0;
3774}
3775
3776.translation-attribution {
3777 cursor: pointer;
3778 -moz-box-align: end;
3779 font-size: small;
3780}
3781
3782.translation-attribution > label {
3783 margin-bottom: 0;
3784}
3785
3786.translation-attribution > image {
3787 width: 70px;
3788}
3789
8837ac2c
RK
3790.translation-welcome-panel {
3791 width: 305px;
3792}
3793
3794.translation-welcome-logo {
3795 height: 32px;
3796 width: 32px;
3797 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3798 -moz-image-region: rect(0, 64px, 32px, 32px);
3799}
3800
3801.translation-welcome-content {
dae45075 3802 margin-inline-start: 16px;
8837ac2c
RK
3803}
3804
3805.translation-welcome-headline {
3806 font-size: larger;
3807 font-weight: bold;
3808}
3809
3810.translation-welcome-body {
3811 padding: 1em 0;
3812 margin: 0 0;
3813}
3814
ed88669c
RK
3815/* === END infobar.inc.css === */
3816
0bcd5587
RK
3817notification[value="translation"] {
3818 min-height: 40px;
3819}
3820
ed88669c
RK
3821.translation-menupopup {
3822 -moz-appearance: none;
3823}
3824
319c6529 3825/* Bookmarks roots menu-items */
319c6529 3826#subscribeToPageMenuitem:not([disabled]),
7327c957 3827#subscribeToPageMenupopup {
319c6529 3828 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
613daf44 3829}
3830
319c6529 3831#bookmarksToolbarFolderMenu,
c0f6797e
RK
3832#BMB_bookmarksToolbar,
3833#panelMenu_bookmarksToolbar {
8da9da4e 3834 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
319c6529
RK
3835 -moz-image-region: auto;
3836}
acb0e9b8 3837
c0f6797e
RK
3838#BMB_unsortedBookmarks,
3839#panelMenu_unsortedBookmarks {
8da9da4e 3840 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
319c6529 3841 -moz-image-region: auto;
acb0e9b8 3842}
3843
9abeb12c
RK
3844/* Status panel */
3845
3846.statuspanel-label {
3847 margin: 0;
3848 padding: 2px 4px;
38cfeb47 3849 background: #404000;
9abeb12c
RK
3850 border: 1px none #9C9CFF;
3851 border-top-style: solid;
3852 color: #FF9F00;
3853 text-shadow: none;
3854}
3855
3856.statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3857.statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3858 border-right-style: solid;
3859 border-top-right-radius: .3em;
3860 margin-right: 1em;
3861}
3862
3863.statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3864.statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3865 border-left-style: solid;
3866 border-top-left-radius: .3em;
3867 margin-left: 1em;
3868}
3e6e0e5c
RK
3869
3870/* HACK to abolish devily color on main content */
3871
3872#content {
3873 background-color: transparent !important;
3874}
dce90fef 3875
024a65e9
RK
3876/* === BEGIN fullscreen/warning.inc.css === */
3877
db1c5db1 3878html|*.pointerlockfswarning {
024a65e9
RK
3879 align-items: center;
3880 background: rgba(0, 0, 0, 0.9);
3881 border: 2px solid #A09090;
3882 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
8ad8bf83 3883 border-radius: 8px;
024a65e9
RK
3884 padding: 24px 16px;
3885 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3886}
3887
db1c5db1 3888html|*.pointerlockfswarning::before {
024a65e9
RK
3889 margin: 0;
3890 width: 24px; height: 24px;
3891}
3892
db1c5db1
RK
3893html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
3894html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
024a65e9
RK
3895 content: url("chrome://browser/skin/fullscreen/secure.svg");
3896}
3897
db1c5db1 3898html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
024a65e9
RK
3899 content: url("chrome://browser/skin/fullscreen/insecure.svg");
3900}
db1c5db1
RK
3901html|*.pointerlockfswarning-domain-text,
3902html|*.pointerlockfswarning-generic-text {
024a65e9
RK
3903 font-size: 21px;
3904 font-weight: lighter;
3905 color: #A09090;
3906 margin: 0 16px;
8ad8bf83
RK
3907}
3908
db1c5db1 3909html|*.pointerlockfswarning-domain {
024a65e9
RK
3910 font-weight: bold;
3911 margin: 0;
85cfb236
RK
3912}
3913
1a44a283 3914html|*#fullscreen-exit-button,
db1c5db1 3915html|*.pointerlockfswarning-exit-button {
024a65e9 3916 margin: 0;
024a65e9
RK
3917
3918 border-radius: 300px;
3919 border: none;
3920 background-color: #C09070;
3921 color: #000000;
8ad8bf83
RK
3922}
3923
d23bf94a
RK
3924/* === END fullscreen/warning.inc.css === */
3925
3926/* === BEGIN ctrlTab.inc.css === */
3927
3928/* Ctrl-Tab */
3929
3930#ctrlTab-panel {
3931 -moz-appearance: none;
3932 background: rgba(0%,0%,0%,.7);
3933 color: #FF9F00;
3934 border-style: none;
3935 padding: 20px 10px 10px;
3936 font-weight: bold;
3937}
3938
3939.ctrlTab-favicon[src] {
3940 background-color: #000000;
3941 width: 20px;
3942 height: 20px;
3943 padding: 2px;
3944}
3945
3946.ctrlTab-preview-inner > .tabPreview-canvas {
3947/* box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
3948}
3949
3950.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3951 margin-bottom: 2px;
3952}
3953
3954.ctrlTab-preview-inner {
3955 padding: 8px;
3956 border: 2px solid transparent;
3957 border-radius: .5em;
3958}
3959
3960.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner {
3961 margin: -10px -10px 0;
3962}
3963
3964#ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3965 background-color: #000000;
3966}
3967
3968.ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3969 color: #A09090;
3970 background-color: #000000;
3971 text-shadow: none;
3972 border-color: #9C9CFF;
3973}
3974
3975#ctrlTab-showAll {
3976 margin-top: .5em;
3977}
3978
3979/* === END ctrlTab.inc.css === */
024a65e9 3980
b27cc46e
RK
3981/* === BEGIN commandline.inc.css === */
3982
a5cb6e53
RK
3983/* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
3984 We are copy/pasting variables from light-theme and dark-theme,
3985 since they aren't loaded in this context (within browser.css). */
3986:root #developer-toolbar {
3987 --gcli-background-color: #000000; /* --theme-toolbar-background */
3988 --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
3989 --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
3990 --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
3991 --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
3992 --selection-background: #008484; /* --theme-selection-background */
3993 --selection-color: #000000; /* --theme-selection-color */
6f751fd1
RK
3994 --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
3995 --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
a5cb6e53
RK
3996}
3997
b27cc46e
RK
3998/* Developer toolbar */
3999
4000#developer-toolbar {
a5cb6e53 4001 border-top: 3px solid var(--gcli-background-color);
b27cc46e
RK
4002 border-bottom: none;
4003}
4004
4005#developer-toolbar .toolbar-holder {
4006 background-color: #8050B0;
4007 color: #FFCF00;
4008}
4009
4010#developer-toolbar .toolbar-holder {
4011 background-color: #8050B0;
4012 color: #FFCF00;
4013}
4014
4015#developer-toolbar .toolbar-startcap,
4016#developer-toolbar .toolbar-endcap{
4017 background-color: #6000CF;
4018}
4019
4020#developer-toolbar {
4021/* padding: 0;
4022 min-height: 32px; */
4023}
4024
de57e474 4025#developer-toolbar > toolbarbutton {
7d6161c5
RK
4026/* border: none;
4027 background-color: transparent;
4028 margin: 0;
b27cc46e
RK
4029 padding: 0 10px;
4030 width: 32px; */
4031}
4032
4033.developer-toolbar-button > image {
4034/* margin: auto 10px; */
4035}
4036
fe524e0c
RK
4037#developer-toolbar-toolbox-button > label {
4038 display: none;
4039}
4040
7d6161c5 4041.developer-toolbar-button > .toolbarbutton-icon {
0bcd5587
RK
4042 width: 16px;
4043 height: 16px;
4044}
4045
b27cc46e 4046#developer-toolbar-toolbox-button {
46cd9beb 4047 list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
b27cc46e
RK
4048 -moz-image-region: rect(0px, 16px, 16px, 0px);
4049}
4050
4051#developer-toolbar-toolbox-button > label {
4052 display: none;
4053}
4054
4055#developer-toolbar-toolbox-button:hover,
4056#developer-toolbar-toolbox-button:hover:active,
4057#developer-toolbar-toolbox-button[checked=true] {
4058 -moz-image-region: rect(0px, 32px, 16px, 16px);
4059}
4060
0bcd5587
RK
4061@media (min-resolution: 2dppx) {
4062 #developer-toolbar-toolbox-button {
46cd9beb 4063 list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
0bcd5587
RK
4064 -moz-image-region: rect(0px, 32px, 32px, 0px);
4065 }
4066
4067 #developer-toolbar-toolbox-button:hover,
4068 #developer-toolbar-toolbox-button:hover:active,
4069 #developer-toolbar-toolbox-button[checked=true] {
4070 -moz-image-region: rect(0px, 64px, 32px, 32px);
4071 }
4072}
4073
b27cc46e
RK
4074/* GCLI */
4075
37953ab4
RK
4076html|*#gcli-tooltip-frame,
4077html|*#gcli-output-frame {
85cfb236 4078 padding: 0;
37953ab4
RK
4079 border-width: 0;
4080 background-color: transparent;
4081}
4082
4083#gcli-output,
4084#gcli-tooltip {
4085 border-width: 0;
4086 background-color: transparent;
85cfb236
RK
4087}
4088
4089.gclitoolbar-input-node,
b27cc46e 4090.gclitoolbar-complete-node {
37953ab4
RK
4091 margin: 1px 3px;
4092 -moz-box-align: center;
4093 padding-top: 0;
4094 padding-bottom: 0;
b27cc46e 4095 padding-right: 8px;
37953ab4 4096 background-color: transparent;
85cfb236
RK
4097}
4098
4099.gclitoolbar-input-node {
b27cc46e
RK
4100/* line-height: 32px;
4101 outline-style: none; */
de57e474 4102 background-repeat: no-repeat;
a5cb6e53 4103 background-color: var(--gcli-input-background);
b27cc46e
RK
4104}
4105
4106.gclitoolbar-input-node[focused="true"] {
a5cb6e53 4107 background-color: var(--gcli-input-focused-background);
37953ab4
RK
4108}
4109
0bcd5587
RK
4110.gclitoolbar-input-node::before {
4111 content: "";
4112 display: inline-block;
4113 -moz-box-ordinal-group: 0;
4114 width: 16px;
4115 height: 16px;
4116 margin: 0 2px;
6f751fd1 4117 background-image: var(--command-line-image);
0bcd5587
RK
4118}
4119
4120.gclitoolbar-input-node[focused="true"]::before {
6f751fd1 4121 background-image: var(--command-line-image-focus);
0bcd5587
RK
4122}
4123
37953ab4
RK
4124.gclitoolbar-input-node:not([focused="true"]) {
4125 border-color: transparent;
85cfb236
RK
4126}
4127
7bc075b6 4128.gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
a5cb6e53
RK
4129 background-color: var(--selection-background);
4130 color: var(--selection-color);
7bc075b6
RK
4131}
4132
85cfb236 4133.gclitoolbar-complete-node {
37953ab4 4134 padding-left: 21px;
85cfb236
RK
4135 background-color: transparent;
4136 color: transparent;
b27cc46e
RK
4137 z-index: 100;
4138 pointer-events: none;
85cfb236
RK
4139}
4140
85cfb236
RK
4141.gcli-in-incomplete,
4142.gcli-in-error,
4143.gcli-in-ontab,
4144.gcli-in-todo,
4145.gcli-in-closebrace,
4146.gcli-in-param,
4147.gcli-in-valid {
4148 margin: 0;
4149 padding: 0;
4150}
4151
4152.gcli-in-incomplete {
4153 border-bottom: 2px dotted #8050B0;
4154}
4155
4156.gcli-in-error {
4157 border-bottom: 2px dotted #FF0000;
4158}
4159
4160.gcli-in-ontab {
4161 color: #9C9CFF;
4162}
4163
4164.gcli-in-todo {
4165 color: #795900;
4166}
4167
4168.gcli-in-closebrace {
4169 color: #8050B0;
4170}
4171
b27cc46e
RK
4172/* === END commandline.inc.css === */
4173
fe524e0c
RK
4174/* === BEGIN responsivedesign.inc.css === */
4175
37953ab4 4176/* Responsive Mode */
85cfb236 4177
7bc075b6 4178.browserContainer[responsivemode] {
0bcd5587 4179 background-color: #221500;
37953ab4
RK
4180 padding: 0 20px 20px 20px;
4181}
4182
7bc075b6 4183.browserStack[responsivemode] {
37953ab4
RK
4184 box-shadow: 0 0 7px #9C9CFF;
4185}
4186
4187.devtools-responsiveui-toolbar {
4188 background: transparent;
d2ce251d
RK
4189 /* text color is textColor from dark theme, since no theme is applied to
4190 * the responsive toolbar.
4191 */
4192 color: #FF9F00;
37953ab4
RK
4193 margin: 10px 0;
4194 padding: 0;
4195 box-shadow: none;
4196 border-bottom-width: 0;
4197}
4198
7d6161c5
RK
4199.devtools-responsiveui-textinput {
4200/* -moz-appearance: none;
4201 background: #333;
4202 color: #fff;
4203 border: 1px solid #111;
4204 border-radius: 2px;
6f751fd1 4205 padding: 0 5px;*/
7d6161c5
RK
4206 width: 200px;
4207 margin: 0;
4208}
4209
4210.devtools-responsiveui-textinput[attention] {
4211/* border-color: #38ace6;
4212 background: rgba(56,172,230,0.4);*/
4213}
4214
de57e474
RK
4215.devtools-responsiveui-menulist,
4216.devtools-responsiveui-toolbarbutton {
4217 -moz-box-align: center;
4218 min-width: 32px;
4219/* min-height: 22px;*/
4220/* margin: 0 3px; */
4221}
4222
1988bb88
RK
4223.devtools-responsiveui-menulist .menulist-editable-box {
4224 background-color: transparent;
4225}
4226
4227.devtools-responsiveui-menulist html|*.menulist-editable-input {
4228 color: inherit;
4229 text-align: center;
4230}
4231
4232.devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4233/* background: hsla(212,7%,57%,.35);*/
4234}
4235
0bcd5587
RK
4236.devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4237 width: 16px;
4238 height: 16px;
4239}
4240
de57e474
RK
4241.devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4242 -moz-box-orient: horizontal;
4243}
4244
4245.devtools-responsiveui-menulist:-moz-focusring,
4246.devtools-responsiveui-toolbarbutton:-moz-focusring {
4247/* outline: 1px dotted hsla(210,30%,85%,0.7);
4248 outline-offset: -4px;*/
4249}
4250
4251.devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4252 display: none;
4253}
4254
4255.devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4256/* border-color: hsla(210,8%,5%,.6);
4257 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4258 box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); */
4259}
4260
4261.devtools-responsiveui-menulist[open=true],
4262.devtools-responsiveui-toolbarbutton[open=true],
4263.devtools-responsiveui-toolbarbutton[checked=true] {
4264/* border-color: hsla(210,8%,5%,.6) !important;
4265 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4266 box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); */
4267}
4268
4269.devtools-responsiveui-toolbarbutton[checked=true] {
4270/* color: hsl(208,100%,60%); */
4271}
4272
4273.devtools-responsiveui-toolbarbutton[checked=true]:hover {
4274/* background-color: transparent !important;*/
4275}
4276
4277.devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4278/* background-color: hsla(210,8%,5%,.2) !important;*/
4279}
4280
4281.devtools-responsiveui-menulist > .menulist-label-box {
4282 text-align: center;
4283}
4284
4285.devtools-responsiveui-menulist > .menulist-dropmarker {
4286/* display: -moz-box;
4287 background-color: transparent;
dc9d5d64 4288 list-style-image: url("chrome://devtools/skin/dropmarker.svg");
de57e474
RK
4289 -moz-box-align: center;
4290 border-width: 0;
4291 min-width: 16px;*/
4292}
4293
4294.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4295/* color: inherit;
4296 border-width: 0;
dae45075 4297 border-inline-end: 1px solid hsla(210,8%,5%,.45);
de57e474
RK
4298 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4299}
4300
4301.devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4302/* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4303}
4304
4305.devtools-responsiveui-toolbarbutton[type=menu-button] {
4306/* padding: 0 1px;*/
4307 -moz-box-align: stretch;
4308}
4309
4310.devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4311.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
dc9d5d64 4312/* list-style-image: url("chrome://devtools/skin/dropmarker.svg");
de57e474
RK
4313 -moz-box-align: center;
4314 padding: 0 3px;*/
37953ab4
RK
4315}
4316
4317.devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4318.devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
fe524e0c
RK
4319 margin-left: 3px;
4320}
4321
4322.devtools-responsiveui-close {
7d6161c5 4323 list-style-image: url("chrome://devtools/skin/close.svg");
fe524e0c
RK
4324}
4325
4326.devtools-responsiveui-close:hover {
c877146a 4327 filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
fe524e0c
RK
4328}
4329
ec6b35d8
RK
4330.devtools-responsiveui-close > image {
4331 filter: invert(1);
4332}
4333
fe524e0c 4334.devtools-responsiveui-rotate {
46cd9beb 4335 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate.png");
fe524e0c
RK
4336 -moz-image-region: rect(0px,16px,16px,0px);
4337}
4338
4339.devtools-responsiveui-rotate:hover {
4340 -moz-image-region: rect(0px,32px,16px,16px);
4341}
4342
0bcd5587 4343@media (min-resolution: 2dppx) {
0bcd5587 4344 .devtools-responsiveui-rotate {
46cd9beb 4345 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate@2x.png");
0bcd5587
RK
4346 }
4347
4348 .devtools-responsiveui-rotate:hover {
4349 -moz-image-region: rect(0px,64px,32px,32px);
4350 }
4351}
4352
fe524e0c 4353.devtools-responsiveui-touch {
46cd9beb 4354 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch.png");
fe524e0c
RK
4355 -moz-image-region: rect(0px,16px,16px,0px);
4356}
4357
4358.devtools-responsiveui-touch:hover,
4359.devtools-responsiveui-touch[checked],
4360.devtools-responsiveui-touch[checked]:hover {
4361 -moz-image-region: rect(0px,32px,16px,16px);
4362}
4363
0bcd5587
RK
4364@media (min-resolution: 2dppx) {
4365 .devtools-responsiveui-touch {
46cd9beb 4366 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch@2x.png");
0bcd5587
RK
4367 -moz-image-region: rect(0px,32px,32px,0px);
4368 }
4369
4370 .devtools-responsiveui-touch:hover,
4371 .devtools-responsiveui-touch[checked],
4372 .devtools-responsiveui-touch[checked]:hover {
4373 -moz-image-region: rect(0px,64px,32px,32px);
4374 }
4375}
4376
fe524e0c 4377.devtools-responsiveui-screenshot {
46cd9beb 4378 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot.png");
fe524e0c
RK
4379 -moz-image-region: rect(0px,16px,16px,0px);
4380}
4381
4382.devtools-responsiveui-screenshot:hover {
4383 -moz-image-region: rect(0px,32px,16px,16px);
37953ab4
RK
4384}
4385
0bcd5587
RK
4386@media (min-resolution: 2dppx) {
4387 .devtools-responsiveui-screenshot {
46cd9beb 4388 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot@2x.png");
0bcd5587
RK
4389 }
4390
4391 .devtools-responsiveui-screenshot:hover {
4392 -moz-image-region: rect(0px,64px,32px,32px);
4393 }
4394}
4395
fe524e0c 4396.devtools-responsiveui-resizebarV {
37953ab4
RK
4397 width: 7px;
4398 height: 24px;
4399 cursor: ew-resize;
71a617ff 4400 transform: translate(12px, -12px);
0bcd5587 4401 background-size: cover;
46cd9beb 4402 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer.png");
37953ab4
RK
4403}
4404
fe524e0c
RK
4405.devtools-responsiveui-resizebarH {
4406 width: 24px;
4407 height: 7px;
4408 cursor: ns-resize;
4409 transform: translate(-12px, 12px);
0bcd5587 4410 background-size: cover;
46cd9beb 4411 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer.png");
fe524e0c
RK
4412}
4413
37953ab4
RK
4414.devtools-responsiveui-resizehandle {
4415 width: 16px;
4416 height: 16px;
4417 cursor: se-resize;
71a617ff 4418 transform: translate(12px, 12px);
0bcd5587 4419 background-size: cover;
46cd9beb 4420 background-image: url("chrome://devtools/skin/images/responsive-se-resizer.png");
8d7ef0d9 4421}
889649fd 4422
a21f2959
RK
4423/* FxOS custom mode with additional buttons and phone look'n feel */
4424
4425/* Hide devtools manual resizer */
4426.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4427.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4428.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4429 display: none;
4430}
4431
4432/* Gives responsive mode a phone look'n feel */
4433.browserStack[responsivemode].fxos-mode {
4434 padding: 60px 15px 0;
4435
4436 border-radius: 25px / 20px;
4437 border-bottom-left-radius: 0;
4438 border-bottom-right-radius: 0;
4439 border: 1px solid #FFFFFF;
4440 border-bottom-width: 0;
4441
4442 background-color: #353535;
4443
4444 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4445
4446 background-image: linear-gradient(to right, #111 11%, #333 56%);
4447 min-width: 320px;
4448}
4449
4450.devtools-responsiveui-hardware-buttons {
4451 -moz-appearance: none;
4452 padding: 20px;
4453
4454 border: 1px solid #FFFFFF;
4455 border-bottom-left-radius: 25px;
4456 border-bottom-right-radius: 25px;
4457 border-top-width: 0;
4458
4459 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4460
4461 background-image: linear-gradient(to right, #111 11%, #333 56%);
4462}
4463
4464.devtools-responsiveui-home-button {
024a65e9 4465 -moz-user-focus: ignore;
a21f2959
RK
4466 width: 40px;
4467 height: 30px;
46cd9beb 4468 list-style-image: url("chrome://devtools/skin/images/responsiveui-home.png");
a21f2959
RK
4469}
4470
4471.devtools-responsiveui-sleep-button {
024a65e9 4472 -moz-user-focus: ignore;
a21f2959
RK
4473 -moz-appearance: none;
4474 /* compensate browserStack top padding */
4475 margin-top: -67px;
4476 margin-right: 10px;
4477
4478 min-width: 10px;
4479 width: 50px;
4480 height: 5px;
4481
4482 border: 1px solid #444;
4483 border-top-right-radius: 12px;
4484 border-top-left-radius: 12px;
4485 border-bottom-color: transparent;
4486
4487 background-image: linear-gradient(to top, #111 11%, #333 56%);
4488}
4489
4490.devtools-responsiveui-sleep-button:hover:active {
4491 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4492}
4493
4494.devtools-responsiveui-volume-buttons {
4495 margin-left: -29px;
4496}
4497
4498.devtools-responsiveui-volume-up-button,
4499.devtools-responsiveui-volume-down-button {
024a65e9 4500 -moz-user-focus: ignore;
a21f2959
RK
4501 -moz-appearance: none;
4502 border: 1px solid red;
4503 min-width: 8px;
4504 height: 40px;
4505
4506 border: 1px solid #444;
4507 border-right-color: transparent;
4508
4509 background-image: linear-gradient(to right, #111 11%, #333 56%);
4510}
4511
4512.devtools-responsiveui-volume-up-button:hover:active,
4513.devtools-responsiveui-volume-down-button:hover:active {
4514 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4515}
4516
4517.devtools-responsiveui-volume-up-button {
4518 border-top-left-radius: 12px;
4519}
4520
4521.devtools-responsiveui-volume-down-button {
4522 border-bottom-left-radius: 12px;
4523}
4524
0bcd5587
RK
4525@media (min-resolution: 2dppx) {
4526 .devtools-responsiveui-resizebarV {
46cd9beb 4527 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer@2x.png");
0bcd5587
RK
4528 }
4529
4530 .devtools-responsiveui-resizebarH {
46cd9beb 4531 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer@2x.png");
0bcd5587
RK
4532 }
4533
4534 .devtools-responsiveui-resizehandle {
46cd9beb 4535 background-image: url("chrome://devtools/skin/images/responsive-se-resizer@2x.png");
0bcd5587
RK
4536 }
4537}
4538
fe524e0c 4539/* === END responsivedesign.inc.css === */
fcaeefc2
RK
4540
4541/* === including indicator.css is done at the start of the file === */
fe524e0c 4542
889649fd
RK
4543/* Error counter */
4544
0142a07b 4545#developer-toolbar-toolbox-button[error-count]:before {
889649fd
RK
4546 color: #000000;
4547 min-width: 16px;
4548 text-shadow: none;
4549 background-color: #FF0000;
4550 border-radius: 1px;
dae45075 4551 margin-inline-end: 5px;
c54ac991 4552}
e9c73590 4553
b27cc46e 4554/* === BEGIN plugin-doorhanger.inc.css === */
348c0499 4555
b27cc46e
RK
4556/**
4557 * Plugin Doorhanger Styles
4558 */
348c0499 4559
b27cc46e 4560#notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
1e32332f 4561 padding: 6px 1px 2px;
348c0499
RK
4562}
4563
348c0499 4564.click-to-play-plugins-notification-center-box {
348c0499
RK
4565}
4566
fe524e0c
RK
4567.plugin-popupnotification-centeritem:nth-child(odd) {
4568/* background-color: rgba(0,0,0,0.1);*/
348c0499
RK
4569}
4570
b27cc46e
RK
4571.center-item-label {
4572 margin-bottom: 0;
4573 text-overflow: ellipsis;
348c0499
RK
4574}
4575
b27cc46e 4576.center-item-warning-icon {
d23bf94a 4577 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg");
348c0499 4578 background-repeat: no-repeat;
348c0499 4579 width: 16px;
b27cc46e 4580 height: 15px;
dae45075 4581 margin-inline-start: 6px;
348c0499
RK
4582}
4583
b27cc46e 4584.click-to-play-plugins-notification-button-container {
348c0499
RK
4585}
4586
b27cc46e
RK
4587.click-to-play-popup-button {
4588 width: 50%;
348c0499
RK
4589}
4590
b27cc46e 4591.click-to-play-plugins-notification-description-box {
1e32332f
RK
4592 margin-left: 5px;
4593 margin-right: 5px;
4594 margin-top: 0;
4595 padding-bottom: 3px;
348c0499
RK
4596}
4597
b27cc46e 4598.click-to-play-plugins-outer-description {
1e32332f 4599 margin-top: 1px;
348c0499
RK
4600}
4601
b27cc46e
RK
4602.click-to-play-plugins-notification-link,
4603.center-item-link {
4604 margin: 0;
348c0499
RK
4605}
4606
2c225fcb 4607.messageImage[value="plugin-hidden"] {
db1c5db1 4608 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
2c225fcb
RK
4609}
4610
4611/* Keep any changes to this style in sync with pluginProblem.css */
4612notification.pluginVulnerable {
4613}
4614
4615notification.pluginVulnerable .messageImage {
db1c5db1 4616 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
2c225fcb
RK
4617}
4618
b27cc46e 4619/* === END plugin-doorhanger.inc.css === */
0142a07b 4620
43cc2806
RK
4621/* === BEGIN customizeMode.inc.css === */
4622
4623/* Customization mode */
e28f3f71 4624
db1c5db1
RK
4625:root {
4626 --drag-drop-transition-duration: .3s;
4627}
4628
38bd4bf1
RK
4629#main-window[customization-lwtheme] #tab-view-deck:-moz-lwtheme {
4630 background-repeat: no-repeat;
4631 background-position: right top;
4632 background-attachment: fixed;
4633 background-color: transparent;
4634 background-image: -moz-image-rect(var(--lwt-header-image), 0, 100%,
4635 var(--toolbox-rect-height), 0),
4636 linear-gradient(to bottom,
4637 var(--lwt-accent-color) calc(var(--toolbox-rect-height-with-unit) - 1px),
4638 rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) - 1px),
4639 rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) + 1px),
4640 rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 1px),
4641 rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 2px),
4642 transparent calc(var(--toolbox-rect-height-with-unit) + 2px));
4643}
4644
5401f433
RK
4645#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4646 margin-bottom: 1em;
e28f3f71
RK
4647}
4648
5401f433
RK
4649#main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4650#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
e28f3f71
RK
4651#main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4652 margin-left: 1em;
4653 margin-right: 1em;
43cc2806
RK
4654}
4655
e28f3f71
RK
4656#main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4657 pointer-events: none;
4658}
4659
4660#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
43cc2806 4661#PanelUI-contents > .panel-customization-placeholder {
e28f3f71 4662 -moz-outline-radius: 2.5px;
43cc2806
RK
4663 outline: 1px dashed transparent;
4664}
4665
e28f3f71
RK
4666#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4667 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4668 -moz-box-ordinal-group: 0;
4669 content: "";
4670 display: -moz-box;
4671 height: 100%;
4672 left: 0;
4673 outline-offset: -2px;
4674 pointer-events: none;
4675 position: absolute;
4676 top: 0;
4677 width: 100%;
4678}
4679
4680/* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4681 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4682 offset from the bottom effectively the same as other targets (-2px). */
4683#main-window[customize-entered] #TabsToolbar.customization-target::before {
e20c83c3 4684/* top: -2px;*/
e28f3f71
RK
4685}
4686
4687/* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4688#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4689#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4690#main-window[customize-entered] #nav-bar-customization-target.customization-target {
4691 position: relative;
4692}
4693
4694/* Most target outlines are shown on hover and drag over but the panel menu uses
4695 placeholders instead. */
4696#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4697#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4698/* nav-bar and panel outlines are always shown */
4699#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
d23bf94a 4700 outline-color: currentColor;
e28f3f71
RK
4701}
4702
4703#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4704 transition: outline-color 250ms linear;
4705}
4706
4707#PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4708 transition: outline-color 250ms linear;
d23bf94a 4709 outline-color: var(--panel-separator-color);
43cc2806
RK
4710}
4711
4712#PanelUI-contents > .panel-customization-placeholder {
4713 cursor: auto;
4714 outline-offset: -5px;
4715}
4716
e28f3f71 4717#main-window[customizing] .customization-target:not(#PanelUI-contents) {
43cc2806 4718 min-width: 100px;
e20c83c3
RK
4719/* padding-left: 10px;
4720 padding-right: 10px;*/
4721}
4722
4723#main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4724 padding: 0 2em 2em;
43cc2806
RK
4725}
4726
4727#customization-container {
4728 background-color: #000000;
93c91f62 4729 color: #FF9F00;
43cc2806
RK
4730}
4731
e28f3f71
RK
4732#customization-palette,
4733#customization-empty {
4734 padding: 0 15px 15px;
43cc2806
RK
4735}
4736
4737#customization-header {
cac2a998
RK
4738 font-size: 1.75em;
4739 line-height: 1.75em;
43cc2806 4740 color: #9C9CFF;
cac2a998
RK
4741 font-weight: 200;
4742 margin: 25px 25px 12px;
4743 padding-bottom: 12px;
4744 border-bottom: 1px solid #A09090;
43cc2806
RK
4745}
4746
4747#customization-panel-container {
e28f3f71
RK
4748 padding: 10px 10px 0px;
4749}
4750
5401f433 4751#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
e28f3f71
RK
4752#customization-footer {
4753 /*background-color: rgb(236,236,236);*/
5401f433
RK
4754}
4755
4756#customization-footer {
e28f3f71 4757 border-top: 1px solid #9C9CFF;
93c91f62 4758 padding: 10px;
e28f3f71
RK
4759}
4760
4761.customizationmode-button {
93c91f62 4762 margin: 5px;
e28f3f71
RK
4763}
4764
4765.customizationmode-button:hover {
4766}
4767
d23bf94a
RK
4768.customizationmode-button > .box-inherit {
4769}
4770
4771.customizationmode-button > .button-icon {
4772}
4773
4774.customizationmode-button:not([type=menu]) > .button-text {
4775}
4776
4777.customizationmode-button > .button-menu-dropmarker {
4778}
4779
4780
4781
4782.customizationmode-button[checked] {
e548e22e
RK
4783 background-color: #008484;
4784}
4785
d23bf94a
RK
4786.customizationmode-button[checked]:hover:not([disabled]),
4787.customizationmode-button:hover:not([disabled]) {
e548e22e
RK
4788 background-color: #FFCF00;
4789}
4790
d23bf94a
RK
4791.customizationmode-button[checked]:hover:active:not([disabled]),
4792.customizationmode-button:hover:active:not([disabled]),
4793.customizationmode-button[open] {
e548e22e
RK
4794 background-color: #FF9F00;
4795}
4796
e28f3f71
RK
4797.customizationmode-button[disabled="true"] {
4798}
4799
93c91f62
RK
4800.customizationmode-button > .box-inherit > .box-inherit > .button-icon,
4801.customizationmode-button > .button-box > .button-icon {
4802/* height: 24px;*/
4803}
4804
e28f3f71
RK
4805#customization-titlebar-visibility-button {
4806 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
b7f3670c 4807 -moz-image-region: rect(0, 16px, 16px, 0);
e28f3f71
RK
4808}
4809
b7f3670c
RK
4810#customization-titlebar-visibility-button:hover {
4811 -moz-image-region: rect(16px, 16px, 32px, 0);
4812}
4813
4814#customization-titlebar-visibility-button > .button-box {
4815 padding-top: 0;
4816 padding-bottom: 1px;
4817}
4818
4819#customization-titlebar-visibility-button:hover:active > .button-box {
4820 padding-top: 1px;
4821 padding-bottom: 0;
4822}
4823
ae90b726 4824#customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
e28f3f71
RK
4825#customization-titlebar-visibility-button > .button-box > .button-text {
4826 /* Sadly, button.css thinks its margins are perfect for everyone. */
dae45075 4827 margin-inline-start: 5px !important;
e28f3f71
RK
4828}
4829
05148fed
RK
4830#customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
4831 width: 20px;
4832 height: 20px;
4833 border-radius: 2px;
b9060895 4834 background-image: url("chrome://browser/content/default-theme-icon.svg");
05148fed
RK
4835 background-size: contain;
4836}
4837
93c91f62
RK
4838#customization-titlebar-visibility-button > .button-box > .button-icon {
4839 vertical-align: middle;
4840}
4841
e28f3f71 4842#customization-titlebar-visibility-button[checked] {
b7f3670c 4843 -moz-image-region: rect(0, 32px, 16px, 16px);
e28f3f71
RK
4844 background-color: #008484;
4845}
4846
b7f3670c
RK
4847#customization-titlebar-visibility-button[checked]:hover {
4848 -moz-image-region: rect(16px, 32px, 32px, 16px);
4849 background-color: #FFCF00;
4850}
4851
4852#customization-titlebar-visibility-button[checked]:hover:active {
4853 background-color: #FF9F00;
4854}
4855
2e389898
RK
4856@media (min-resolution: 1.1dppx) {
4857 #customization-titlebar-visibility-button {
4858 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
4859 -moz-image-region: rect(0, 48px, 48px, 0);
4860 }
4861
4862 #customization-titlebar-visibility-button:hover {
4863 -moz-image-region: rect(48px, 48px, 96px, 0);
4864 }
4865
4866 #customization-titlebar-visibility-button[checked] {
4867 -moz-image-region: rect(0, 96px, 48px, 48px);
4868 }
4869
4870 #customization-titlebar-visibility-button[checked]:hover {
4871 -moz-image-region: rect(48px, 96px, 96px, 48px);
4872 }
4873}
4874
e28f3f71 4875#main-window[customize-entered] #customization-panel-container {
43cc2806
RK
4876 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4877 background-position: left top;
4878 background-repeat: repeat;
4879 background-size: auto;
4880 background-attachment: fixed;
4881}
4882
e28f3f71
RK
4883toolbarpaletteitem[place="toolbar"] {
4884 transition: border-width 250ms ease-in-out;
43cc2806
RK
4885}
4886
4887toolbarpaletteitem[mousedown] {
4888 outline: 1px solid #008484;
4889 cursor: -moz-grabbing;
4890 opacity: 0.8;
4891}
4892
4893.panel-customization-placeholder,
4894toolbarpaletteitem[place="palette"],
4895toolbarpaletteitem[place="panel"] {
db1c5db1 4896 transition: transform var(--drag-drop-transition-duration) ease-in-out;
e28f3f71
RK
4897}
4898
4899#customization-palette {
4900 transition: opacity .3s ease-in-out;
4901 opacity: 0;
43cc2806
RK
4902}
4903
e28f3f71
RK
4904#customization-palette[showing="true"] {
4905 opacity: 1;
4906}
4907
db1c5db1
RK
4908toolbarpaletteitem toolbarbutton[disabled] {
4909/* color: inherit !important;*/
4910}
4911
e28f3f71
RK
4912toolbarpaletteitem[notransition].panel-customization-placeholder,
4913toolbarpaletteitem[notransition][place="toolbar"],
43cc2806
RK
4914toolbarpaletteitem[notransition][place="palette"],
4915toolbarpaletteitem[notransition][place="panel"] {
e28f3f71 4916 transition: none;
43cc2806
RK
4917}
4918
e28f3f71 4919toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
19988d2d 4920toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
e28f3f71
RK
4921toolbarpaletteitem > toolbaritem.panel-wide-item,
4922toolbarpaletteitem > toolbarbutton[type="menu-button"] {
db1c5db1 4923 transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
43cc2806
RK
4924}
4925
d0e580f1 4926toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
19988d2d 4927toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
e28f3f71
RK
4928 transform: scale(1.3);
4929}
4930
4931toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4932toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
43cc2806
RK
4933 transform: scale(1.1);
4934}
4935
4936/* Override the toolkit styling for items being dragged over. */
4937toolbarpaletteitem[place="toolbar"] {
4938 border-left-width: 0;
4939 border-right-width: 0;
4940 margin-right: 0;
4941 margin-left: 0;
4942}
4943
4944#customization-palette:not([hidden]) {
4945 margin-bottom: 25px;
4946}
4947
7c1e433b
RK
4948toolbarpaletteitem[place="palette"]:-moz-focusring,
4949toolbarpaletteitem[place="panel"]:-moz-focusring,
4950toolbarpaletteitem[place="toolbar"]:-moz-focusring {
db1c5db1
RK
4951 outline-width: 0;
4952}
4953
4954toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
4955toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
4956toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4957 /* Delay adding the focusring back until after the transform transition completes. */
4958 transition: outline-width .01s linear var(--drag-drop-transition-duration);
d23bf94a 4959 outline: 1px dotted;
7c1e433b
RK
4960 -moz-outline-radius: 2.5px;
4961}
4962
db1c5db1
RK
4963toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4964 outline-offset: -5px;
4965}
4966
43cc2806
RK
4967#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4968#wrapper-edit-controls[place="palette"] > #edit-controls > separator,
e28f3f71
RK
4969#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4970#wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4971 margin-top: 20px;
43cc2806
RK
4972}
4973
4974#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
c0f6797e 4975#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
43cc2806
RK
4976 margin-left: 0;
4977 margin-right: 0;
e28f3f71
RK
4978 max-width: 24px;
4979 min-width: 24px;
43cc2806 4980 max-height: 24px;
5401f433 4981 min-height: 24px;
e28f3f71 4982 padding: 4px;
43cc2806
RK
4983}
4984
e28f3f71
RK
4985#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4986#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4987 width: 16px;
43cc2806
RK
4988}
4989
e28f3f71
RK
4990#wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4991 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4992}
4993
c0f6797e
RK
4994#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4995#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
e28f3f71
RK
4996 display: none;
4997}
4998
4999#wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
5000 -moz-box-pack: center;
5001 min-height: 48px;
43cc2806
RK
5002}
5003
20752032 5004#personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
dae45075 5005 margin-inline-end: 5px;
20752032
RK
5006}
5007
43cc2806
RK
5008#customization-palette > toolbarpaletteitem > label {
5009 text-align: center;
5010 margin-left: 0;
5011 margin-right: 0;
5012}
5013
cac2a998
RK
5014#customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
5015 -moz-box-orient: vertical;
5016 /* Make the panel padding uniform across all platforms due to the
5017 styling of the section headers and footer. */
5018 padding: 10px;
5019}
5020
5021.customization-lwtheme-menu-theme > .toolbarbutton-icon {
5022 width: 32px;
5023 height: 32px;
5024}
5025
5026.customization-lwtheme-menu-theme {
5027 -moz-appearance: none;
5028 margin: 0 -5px 5px;
5029 padding-top: 0;
dae45075 5030 padding-inline-end: 5px;
cac2a998 5031 padding-bottom: 0;
dae45075 5032 padding-inline-start: 0;
cac2a998
RK
5033}
5034
8837ac2c 5035.customization-lwtheme-menu-theme[defaulttheme] {
b9060895 5036 list-style-image: url(chrome://browser/content/default-theme-icon.svg);
8837ac2c
RK
5037}
5038
cac2a998
RK
5039.customization-lwtheme-menu-theme[active="true"] {
5040 background-color: #008484;
5041}
5042
5043.customization-lwtheme-menu-theme > .toolbarbutton-icon {
5044 margin: 5px;
5045}
5046
5047.customization-lwtheme-menu-theme > .toolbarbutton-text {
5048 text-align: start;
5049}
5050
5051#customization-lwtheme-menu-header,
5052#customization-lwtheme-menu-recommended {
5053 padding: 10px;
5054 margin-bottom: 5px;
5055}
5056
5057#customization-lwtheme-menu-header,
5058#customization-lwtheme-menu-recommended,
5059#customization-lwtheme-menu-footer {
5060 background-color: #A09090;
5061 color: #000000;
5062 margin-right: -10px;
5063 margin-left: -10px;
5064}
5065
5066#customization-lwtheme-menu-header {
5067 margin-top: -10px;
5068 border-top-right-radius: 3px;
5069 border-top-left-radius: 3px;
5070}
5071
5072#customization-lwtheme-menu-recommended {
5073}
5074
5075#customization-lwtheme-menu-footer {
5076 margin-bottom: -10px;
5077 border-bottom-right-radius: 3px;
5078 border-bottom-left-radius: 3px;
5079}
5080
5081.customization-lwtheme-menu-footeritem {
5082 -moz-appearance: none;
5083 -moz-box-flex: 1;
5084 background-color: #C09070;
5085 color: #000000;
5086 border: 1px solid transparent;
5087 padding: 10px;
5088 margin-left: 0;
5089 margin-right: 0;
5090}
5091
5092.customization-lwtheme-menu-footeritem:hover {
5093 background-color: #FFCF00;
5094}
5095
8837ac2c 5096.customization-lwtheme-menu-footeritem:first-child {
cac2a998
RK
5097}
5098
43cc2806
RK
5099/* === END customizeMode.inc.css === */
5100
e28f3f71
RK
5101/* === BEGIN customizeTip.inc.css === */
5102
5103#customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5104 padding: 0;
5105 margin: 0;
5106 min-width: 400px;
5107 max-width: 1000px;
5108 min-height: 200px;
5109 border-radius: 3px;
5110/* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5111 border: 1px solid #9C9CFF;
d1e87ec1 5112 color: #FF9F00;
e28f3f71
RK
5113}
5114
5115#customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5116/* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5117}
5118
5119.customization-tipPanel-infoBox {
5120 margin: 20px 25px 25px;
5121 width: 25px;
5122 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5123 background-repeat: no-repeat;
5124}
5125
5126.customization-tipPanel-content {
5127 margin: 25px 0;
5128 font-size: 12px;
5129 line-height: 18px;
5130}
5131
5132.customization-tipPanel-em {
5133 margin: 0;
5134 font-weight: bold;
5135}
5136
5137.customization-tipPanel-contentImage {
5138 margin-top: 25px;
5139 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5140 min-width: 300px;
5141 max-width: 300px;
5142 min-height: 190px;
5143 max-height: 190px;
5144 display: -moz-box;
5145}
5146
5147.customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5148 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5149}
5150
5151.customization-tipPanel-link {
5152 -moz-appearance: none;
5153 background: transparent;
5154 border: none;
5155 box-shadow: none;
5156 color: #3333FF;
5157 margin: 0;
5158 cursor: pointer;
5159}
5160
5161.customization-tipPanel-link > .button-box > .button-text {
5162 margin: 0 !important;
5163}
5164
5165.customization-tipPanel-closeBox > .close-icon {
5166 -moz-appearance: none;
5167 border: 0;
dae45075 5168 margin-inline-end: -25px;
e28f3f71
RK
5169}
5170
5171#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5172#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5173 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5174}
5175
5176/* === END customizeTip.inc.css === */
5177
c0f6797e
RK
5178/**
5179 * This next rule is a hack to disable subpixel anti-aliasing on all
5180 * labels during the customize mode transition. Subpixel anti-aliasing
5181 * on Windows with Direct2D layers acceleration is particularly slow to
5182 * paint, so this hack is how we sidestep that performance bottleneck.
5183 */
5184#main-window:-moz-any([customize-entering],[customize-exiting]) label {
5185 transform: perspective(0.01px);
5186}
5187
93c91f62 5188#main-window[customize-entered] > #tab-view-deck {
43cc2806
RK
5189 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5190 background-attachment: fixed;
5191}
5192
93c91f62
RK
5193#main-window[customization-lwtheme]:-moz-lwtheme {
5194 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5195 background-repeat: repeat;
5196 background-attachment: fixed;
5197 background-position: left top;
5198}
5199
5401f433
RK
5200#main-window[customize-entered] #browser-bottombox,
5201#main-window[customize-entered] #customization-container {
43cc2806
RK
5202 border-left: 1px solid #9C9CFF;
5203 border-right: 1px solid #9C9CFF;
5204 background-clip: padding-box;
5205}
5206
5401f433
RK
5207#main-window[customize-entered] #browser-bottombox {
5208 border-bottom: 1px solid #9C9CFF;
5209}
5210
e20c83c3
RK
5211#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5212 margin-right: -2px;
5213}
5214
5215#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5216 margin-left: -2px;
5217}
5218
5219/* End customization mode */
5220
51994fad
RK
5221/* Private browsing indicators */
5222
5223/**
5224 * Currently, we have two places where we put private browsing indicators on
5225 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5226 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5227 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5228 * want the bottom border of the image to line up with the bottom of the window
5229 * caption buttons. That's why there's so much special-casing going on in here.
5230 */
5231.private-browsing-indicator {
5232 display: none;
5233 pointer-events: none;
e20c83c3
RK
5234}
5235
51994fad
RK
5236#private-browsing-indicator-titlebar {
5237 display: block;
5238 position: absolute;
e20c83c3
RK
5239}
5240
51994fad
RK
5241#main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5242 display: block;
e20c83c3
RK
5243}
5244
51994fad
RK
5245#main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5246 display: -moz-box;
5247}
5248
5249#TabsToolbar > .private-browsing-indicator {
5250 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
dae45075 5251 margin-inline-start: 4px;
51994fad
RK
5252 width: 48px;
5253}
5254
5255/* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5256 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5257 * min/max/close window buttons.
5258 */
5259#private-browsing-indicator-titlebar > .private-browsing-indicator,
5260#main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5261 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
dae45075 5262 margin-inline-end: 4px;
43cc2806 5263 width: 40px;
51994fad
RK
5264 height: 20px;
5265 position: relative;
43cc2806
RK
5266}
5267
51994fad
RK
5268/* This one is for Linux */
5269#main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5270 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5271 width: 48px;
5272}
5273
5274/* End private browsing indicators */
5275
43cc2806
RK
5276/* === BEGIN UITour.inc.css === */
5277
5278/* UI Tour */
5279
2a8b2b48
RK
5280#UITourHighlightContainer {
5281 -moz-appearance: none;
5282 border: none;
5283 background-color: transparent;
2a1534f1
RK
5284 /* This is a buffer to compensate for the movement in the "wobble" effect,
5285 and for the box-shadow of #UITourHighlight. */
2a8b2b48
RK
5286 padding: 4px;
5287}
5288
5289#UITourHighlight {
5290 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5291 border-radius: 40px;
5292 border: 1px solid #9C9CFF;
5293 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5294 on Linux without an X compositor where opacity is either 0 or 1. */
5295 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
43cc2806
RK
5296 min-height: 32px;
5297 min-width: 32px;
1bf116f8
RK
5298}
5299
2a8b2b48 5300#UITourTooltipBody {
db1c5db1
RK
5301 -moz-box-align: start;
5302}
5303
5304#UITourTooltipTitleContainer {
5305 -moz-box-align: start;
5306 margin-bottom: 10px;
2a8b2b48
RK
5307}
5308
5309#UITourTooltipIcon {
5310 width: 48px;
5311 height: 48px;
db1c5db1 5312 margin-inline-end: 10px;
2a8b2b48
RK
5313}
5314
5315#UITourTooltipTitle,
5316#UITourTooltipDescription {
5317 max-width: 20rem;
43cc2806
RK
5318}
5319
5320#UITourTooltipTitle {
2a8b2b48 5321 font-size: 1.45rem;
43cc2806 5322 font-weight: bold;
db1c5db1 5323 margin: 0;
43cc2806
RK
5324}
5325
5326#UITourTooltipDescription {
dae45075
RK
5327 margin-inline-start: 0;
5328 margin-inline-end: 0;
2a8b2b48
RK
5329 font-size: 1.15rem;
5330 line-height: 1.8rem;
5331 margin-bottom: 0; /* Override global.css */
5332}
5333
5334#UITourTooltipClose {
7c1e433b 5335 position: relative;
2a8b2b48
RK
5336 -moz-appearance: none;
5337 border: none;
5338 background-color: transparent;
5339 min-width: 0;
dae45075 5340 margin-inline-start: 4px;
2a8b2b48
RK
5341 margin-top: -2px;
5342}
5343
5344#UITourTooltipClose > .toolbarbutton-text {
5345 display: none;
5346}
5347
5348#UITourTooltipButtons {
5349 -moz-box-pack: end;
5350 background-color: rgba(0,0,0,.2);
5351 border-top: 1px solid rgba(0,0,0,.4);
7c1e433b 5352 margin: 10px -16px -16px;
db1c5db1 5353 padding: 16px;
2a8b2b48
RK
5354}
5355
19988d2d 5356#UITourTooltipButtons > label,
2a8b2b48
RK
5357#UITourTooltipButtons > button {
5358 margin: 0 15px;
5359}
5360
19988d2d 5361#UITourTooltipButtons > label:first-child,
2a8b2b48 5362#UITourTooltipButtons > button:first-child {
dae45075 5363 margin-inline-start: 0;
2a8b2b48
RK
5364}
5365
db1c5db1
RK
5366#UITourTooltipButtons > label:last-child,
5367#UITourTooltipButtons > button:last-child {
5368 margin-inline-end: 0;
5369}
5370
2a8b2b48
RK
5371#UITourTooltipButtons > button[image] > .button-box > .button-icon {
5372 width: 16px;
5373 height: 16px;
dae45075 5374 margin-inline-end: 5px;
2a8b2b48
RK
5375}
5376
19988d2d 5377#UITourTooltipButtons > label,
2a8b2b48
RK
5378#UITourTooltipButtons > button .button-text {
5379 font-size: 1.15rem;
5380}
5381
5382#UITourTooltipButtons > button:not(.button-link) {
5383 -moz-appearance: none;
5384 background-color: #C09070;
5385 border-radius: 3000px;
5386 border: none;
5387 color: #000000;
5388 padding: 4px 30px;
5389 transition-property: background-color, color;
5390 transition-duration: 150ms;
5391}
5392
5393#UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5394 background-color: #FFCF00;
5395 color: #000000;
5396}
5397
19988d2d 5398#UITourTooltipButtons > label,
2a8b2b48
RK
5399#UITourTooltipButtons > button.button-link {
5400 -moz-appearance: none;
5401 background: transparent;
5402 border: none;
5403 box-shadow: none;
5404 color: rgba(0,0,0,0.35);
5405 padding-left: 10px;
5406 padding-right: 10px;
5407}
5408
5409#UITourTooltipButtons > button.button-link:hover {
5410 color: black;
5411}
5412
5413/* The primary button gets the same color as the customize button. */
5414#UITourTooltipButtons > button.button-primary {
5415 background-color: #A06060; /* LCARS default button background color */
5416 color: #000000;
5417 padding-left: 30px;
5418 padding-right: 30px;
5419}
5420
5421#UITourTooltipButtons > button.button-primary:not(:active):hover {
5422 background-color: #FFCF00;
5423 color: #000000;
43cc2806
RK
5424}
5425
20752032
RK
5426/* Notification overrides for Heartbeat UI */
5427
5428notification.heartbeat {
5429 background-color: #A09090;
0ef54c72 5430/* height: 40px;*/
20752032
RK
5431}
5432
5433@keyframes pulse-onshow {
5434 0% {
5435 opacity: 0;
5436 transform: scale(1.0);
5437 }
5438 25% {
5439 opacity: 1;
5440 transform: scale(1.1);
5441 }
5442 50% {
5443 transform: scale(1.0);
5444 }
5445 75% {
5446 transform: scale(1.1);
5447 }
5448 100% {
5449 transform: scale(1.0);
5450 }
5451}
5452
5453@keyframes pulse-twice {
5454 0% {
5455 transform: scale(1.1);
5456 }
5457 50% {
5458 transform: scale(0.8);
5459 }
5460 100% {
5461 transform: scale(1);
5462 }
5463}
5464
5465.messageText.heartbeat {
5466 color: #000000;
0ef54c72 5467/* text-shadow: none; */
dae45075 5468 margin-inline-start: 0px;
20752032
RK
5469}
5470
5471.messageImage.heartbeat {
0ef54c72
RK
5472 width: 24px;
5473 height: 24px;
dae45075
RK
5474 margin-inline-start: 8px;
5475 margin-inline-end: 8px;
20752032
RK
5476}
5477
5478.messageImage.heartbeat.pulse-onshow {
5479 animation-name: pulse-onshow;
5480 animation-duration: 1.5s;
5481 animation-iteration-count: 1;
5482 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5483}
5484
5485.messageImage.heartbeat.pulse-twice {
5486 animation-name: pulse-twice;
5487 animation-duration: 1s;
5488 animation-iteration-count: 2;
5489 animation-timing-function: linear;
5490}
5491
0ef54c72
RK
5492/* Learn More link styles */
5493.heartbeat > .text-link {
5494 color: #3333FF;
dae45075 5495 margin-inline-start: 0px;
0ef54c72
RK
5496}
5497
5498.heartbeat > .text-link:hover {
5499 color: #9C9CFF;
5500 text-decoration: none;
5501}
5502
5503.heartbeat > .text-link:hover:active {
5504 color: #FF9F00;
5505}
5506
20752032
RK
5507/* Heartbeat UI Rating Star Classes */
5508.heartbeat > #star-rating-container {
5509 display: -moz-box;
0ef54c72 5510/* margin-bottom: 4px;*/
20752032
RK
5511}
5512
5513.heartbeat > #star-rating-container > #star5 {
5514 -moz-box-ordinal-group: 5;
5515}
5516
5517.heartbeat > #star-rating-container > #star4 {
5518 -moz-box-ordinal-group: 4;
5519}
5520
5521.heartbeat > #star-rating-container > #star3 {
5522 -moz-box-ordinal-group: 3;
5523}
5524
5525.heartbeat > #star-rating-container > #star2 {
5526 -moz-box-ordinal-group: 2;
5527}
5528
5529.heartbeat > #star-rating-container > .star-x {
5530 background: url("chrome://browser/skin/heartbeat-star-off.svg");
5531 cursor: pointer;
dae45075
RK
5532 /* Overrides the margin-inline-end for all platforms defined in the .plain class */
5533 margin-inline-end: 4px !important;
0ef54c72
RK
5534 width: 16px;
5535 height: 16px;
20752032
RK
5536}
5537
5538.heartbeat > #star-rating-container > .star-x:hover,
5539.heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5540 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
20752032
RK
5541}
5542
43cc2806 5543/* === END UITour.inc.css === */
c0f6797e
RK
5544
5545#UITourTooltipButtons {
19988d2d 5546 /**
987dae1b 5547 * Override the --arrowpanel-padding so the background extends
19988d2d
RK
5548 * to the sides and bottom of the panel.
5549 */
5550 margin-left: -10px;
5551 margin-right: -10px;
5552 margin-bottom: -10px;
c0f6797e 5553}
fff8097b
RK
5554
5555/* === BEGIN contextmenu.inc.css === */
5556
5557menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5558}
5559
5560#context-navigation > .menuitem-iconic {
5561 -moz-box-flex: 1;
5562 -moz-box-pack: center;
5563 -moz-box-align: center;
5564}
5565
5566#context-navigation > .menuitem-iconic[disabled="true"] {
5567 background-color: transparent;
5568}
5569
5570#context-navigation > .menuitem-iconic > .menu-iconic-left {
5571 -moz-appearance: none;
5572}
5573
868b4137
RK
5574#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5575 width: 16px;
5576 height: 16px;
5577 margin: 7px;
0282321d 5578 filter: url(chrome://global/skin/filters.svg#fill);
868b4137 5579 fill: currentColor;
fff8097b
RK
5580}
5581
868b4137
RK
5582#context-back {
5583 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back");
fff8097b
RK
5584}
5585
868b4137
RK
5586#context-forward {
5587 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward");
fff8097b
RK
5588}
5589
59826146 5590#context-reload {
868b4137 5591 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload");
fff8097b
RK
5592}
5593
59826146 5594#context-stop {
868b4137 5595 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop");
fff8097b
RK
5596}
5597
868b4137
RK
5598#context-bookmarkpage {
5599 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark");
fff8097b
RK
5600}
5601
2e389898 5602#context-bookmarkpage[starred=true] {
868b4137 5603 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked");
2e389898
RK
5604}
5605
fff8097b
RK
5606#context-back:-moz-locale-dir(rtl),
5607#context-forward:-moz-locale-dir(rtl),
5608#context-reload:-moz-locale-dir(rtl) {
5609 transform: scaleX(-1);
5610}
5611
fff8097b
RK
5612#context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
5613#context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
5614 width: 14px;
5615 height: 14px;
5616 margin: 9px;
5617}
5618
20752032
RK
5619#context-media-eme-learnmore {
5620 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5621}
5622
e184b661
RK
5623#context-media-eme-learnmore {
5624 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5625}
5626
fff8097b 5627/* === END contextmenu.inc.css === */
3d64e0ce
RK
5628
5629#context-navigation {
5630}
5631
5632#context-sep-navigation {
5633/* margin-top: -4px; */
5634}
b1dfcf32 5635
fa703ff4 5636.browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
b1dfcf32 5637 padding: 0;
fa703ff4 5638 overflow: hidden;
b1dfcf32 5639}
d23bf94a
RK
5640
5641.webextension-popup-browser {
5642 border-radius: inherit;
5643}
1cf9b082
RK
5644
5645.contentSelectDropdown-ingroup > .menu-iconic-text {
5646 padding-inline-start: 20px;
5647}
5648
5649#ContentSelectDropdown > menupopup {
5650 background-color: #000000;
5651 -moz-border-top-colors: #A09090;
5652 -moz-border-right-colors: #A09090;
5653 -moz-border-bottom-colors: #A09090;
5654 -moz-border-left-colors: #A09090;
5655}
5656
5657#ContentSelectDropdown > menupopup > menucaption,
5658#ContentSelectDropdown > menupopup > menuitem {
b1d1a8bb
RK
5659 padding: 0 6px;
5660 border-width: 0;
5661/* font: -moz-list;*/
1cf9b082
RK
5662}
5663
5664#ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text,
5665#ContentSelectDropdown > menupopup > menuitem > .menu-iconic-text {
b1d1a8bb
RK
5666 /* Padding should follow the 4/12 ratio, where 12px is the default font-size
5667 with 4px being the preferred padding size. */
5668 padding-top: .3333em;
5669 padding-bottom: .3333em;
1cf9b082
RK
5670}
5671
5672#ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text {
5673 font-weight: bold;
5674}
5675
5676#ContentSelectDropdown > menupopup > menuitem[_moz-menuactive="true"][disabled="true"] {
5677 color: #A09090;
5678 background-color: unset;
5679}
5680
5681#ContentSelectDropdown > menupopup > menucaption {
5682 background-color: buttonface;
5683}
5684
5685#ContentSelectDropdown > menupopup > menucaption[disabled="true"] {
5686 color: #A09090;
5687}
5688
b1d1a8bb
RK
5689#ContentSelectDropdown > .isOpenedViaTouch > menucaption > .menu-iconic-text,
5690#ContentSelectDropdown > .isOpenedViaTouch > menuitem > .menu-iconic-text {
5691 /* Touch padding should follow the 11/12 ratio, where 12px is the default
5692 font-size with 11px being the preferred padding size. */
5693 padding-top: .9167em;
5694 padding-bottom: .9167em;
1cf9b082 5695}