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