third 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
07296beb 1876#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] {
1b1f3d09 1877 border-bottom: 1px solid var(--panel-separator-color);
07296beb
RK
1878 padding-inline-start: 0;
1879 padding-inline-end: 6px;
1880 min-height: 3em;
1881}
1882
1883/* Opt-in notification */
1884
1885#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-opt-in"] {
1b1f3d09
RK
1886 padding: 6px 0;
1887 padding-inline-start: 44px;
07296beb 1888 background-color: #000000;
1b1f3d09
RK
1889 background-image: url("chrome://browser/skin/info.svg");
1890 background-clip: padding-box;
1891 background-position: 20px center;
1892 background-repeat: no-repeat;
1893 background-size: 16px 16px;
1cf9b082
RK
1894}
1895
07296beb 1896#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1b1f3d09 1897 background-position: right 20px center;
319c6529 1898}
acb0e9b8 1899
07296beb 1900#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-notification"] > description {
1b1f3d09
RK
1901 margin: 0;
1902 padding: 0;
7c1e433b
RK
1903}
1904
07296beb 1905#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1b1f3d09 1906 margin-inline-start: 0;
7c1e433b 1907}
1b1f3d09 1908
07296beb 1909#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button {
1b1f3d09
RK
1910 -moz-appearance: none;
1911 min-width: 80px;
1912 border-radius: 3px;
1913 padding: 4px 16px;
1914 margin: 0;
1915 margin-inline-start: 10px;
7c1e433b
RK
1916}
1917
07296beb
RK
1918#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-disable"] {
1919}
1920
1921#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-disable"]:hover {
1922}
1923
1924#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-enable"] {
1925}
1926
1927#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-enable"]:hover {
1928}
1929
1930/* Opt-out hint */
1931
1932#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-opt-out"] {
1933 font: message-box;
1934}
1935
1936#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] > description {
1937 margin: auto;
1938 padding: 4px 8px;
1939 background-color: #000000;
1940 border: 1px solid #FFCF00;
1941 border-radius: 4px;
1942 color: #A09090;
1943}
1944
1945#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] > description > html|span {
1946 unicode-bidi: embed;
7c1e433b 1947}
7c1e433b 1948
07296beb
RK
1949#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] > description > html|span.prefix {
1950 font-weight: bold;
7c1e433b
RK
1951}
1952
07296beb
RK
1953#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] > hbox[anonid="search-suggestions-opt-out"] > .ac-site-icon {
1954 transform: scale(0);
1955 animation-name: search-suggestions-hint-grow;
1956 animation-duration: 500ms;
1957 animation-delay: 500ms;
1958 animation-iteration-count: 1;
1959 animation-timing-function: ease-in-out;
1960 animation-fill-mode: forwards;
7c1e433b
RK
1961}
1962
07296beb
RK
1963@keyframes search-suggestions-hint-grow {
1964 0% { transform: scale(0); }
1965 40% { transform: scale(1.5); }
1966 60% { transform: scale(1); }
1967 80% { transform: scale(1.25); }
1968 100% { transform: scale(1); }
1969}
1970
1971#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-typing"] > .ac-title-text {
1972 text-overflow: clip;
1973}
1974
1975#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-typing"] {
1976 overflow: hidden;
1977 max-width: 8ch;
1978 width: 0;
1979 animation-name: search-suggestions-hint-typing;
1980 animation-duration: 500ms;
1981 animation-delay: 750ms;
1982 animation-iteration-count: 1;
1983 animation-fill-mode: forwards;
1984}
1985
1986@keyframes search-suggestions-hint-typing {
1987 from { width: 0; }
1988 to { width: 8ch; }
1989}
1990
1991#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-box"] {
1992 opacity: 0;
1993 animation-duration: 250ms;
1994 animation-delay: 1500ms;
1995 animation-iteration-count: 1;
1996 animation-fill-mode: forwards;
1997}
1998
1999/* Margin-inline-start can't be animated yet */
2000#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-box"]:-moz-locale-dir(ltr) {
2001 margin-left: 160px;
2002 animation-name: search-suggestions-hint-buildin-ltr;
2003}
2004
2005@keyframes search-suggestions-hint-buildin-ltr {
2006 from { margin-left: 160px; opacity: 0; }
2007 to { margin-left: 0; opacity: 1; }
2008}
2009
2010#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-box"]:-moz-locale-dir(rtl) {
2011 /* Should be margin-inline-start but that can't be animated yet */
2012 margin-right: 160px;
2013 animation-name: search-suggestions-hint-buildin-rtl;
2014}
2015
2016@keyframes search-suggestions-hint-buildin-rtl {
2017 from { margin-right: 160px; opacity: 0; }
2018 to { margin-right: 0; opacity: 1; }
2019}
2020
2021#search-suggestions-change-settings {
2022 opacity: 0;
2023 animation-name: search-suggestions-hint-fadein;
2024 animation-duration: 500ms;
2025 animation-delay: 1800ms;
2026 animation-iteration-count: 1;
2027 animation-fill-mode: forwards;
2028}
2029
2030@keyframes search-suggestions-hint-fadein {
2031 from { opacity: 0 }
2032 to { opacity: 1 }
7c1e433b
RK
2033}
2034
1b1f3d09
RK
2035/* === END urlbarSearchSuggestionsNotification.inc.css === */
2036
2037#search-container {
2038 min-width: calc(54px + 11ch);
7c1e433b
RK
2039}
2040
1b1f3d09
RK
2041/* identity box */
2042
2043#identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
2044 background-color: var(--identity-box-verified-background-color);
acb0e9b8 2045}
2046
1b1f3d09
RK
2047#identity-box:-moz-focusring {
2048 outline: 1px dotted;
2049 outline-offset: -1px;
c0f6797e
RK
2050}
2051
1b1f3d09
RK
2052#identity-box.verifiedDomain:-moz-focusring,
2053#identity-box.verifiedIdentity:-moz-focusring {
2054 outline-color: #000000;
acb0e9b8 2055}
2056
1b1f3d09
RK
2057/* Location bar dropmarker */
2058
2059.urlbar-history-dropmarker:not(:hover):not([open="true"]) {
2060 background-color: transparent;
7c1e433b 2061}
8922acc9 2062
1b1f3d09
RK
2063#urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
2064#urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
2065#urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
2066 border: none;
2067 border-radius: 0px;
2068 transition: opacity 0.15s ease;
319c6529 2069}
acb0e9b8 2070
1b1f3d09
RK
2071#urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
2072 transition: none;
85cfb236
RK
2073}
2074
1b1f3d09
RK
2075#navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
2076 opacity: 0;
acb0e9b8 2077}
2078
1b1f3d09 2079.urlbar-history-dropmarker:hover {
acb0e9b8 2080}
319c6529 2081
1b1f3d09
RK
2082.urlbar-history-dropmarker:hover:active,
2083.urlbar-history-dropmarker[open="true"] {
acb0e9b8 2084}
2085
1b1f3d09
RK
2086/* page proxy icon */
2087/* === BEGIN identity-block.inc.css === */
319c6529 2088
1b1f3d09
RK
2089#identity-box {
2090 font-size: .9em;
2091 border-radius: 2px;
2092 padding: 3px 5px;
2093 overflow: hidden;
2094 /* The padding-left and padding-right transitions handle the delayed hiding of
2095 the forward button when hovered. */
2096 transition: background-color 150ms ease, padding-left, padding-right;
acb0e9b8 2097}
2098
1b1f3d09
RK
2099#identity-box:-moz-locale-dir(ltr) {
2100 border-top-right-radius: 0;
2101 border-bottom-right-radius: 0;
acb0e9b8 2102}
319c6529 2103
1b1f3d09
RK
2104#identity-box:-moz-locale-dir(rtl) {
2105 border-top-left-radius: 0;
2106 border-bottom-left-radius: 0;
acb0e9b8 2107}
319c6529 2108
1b1f3d09
RK
2109#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2110 border-inline-end: 1px solid #008484;
acb0e9b8 2111}
2112
1b1f3d09
RK
2113#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
2114 color: #008484;
2115}
2e389898 2116
1b1f3d09
RK
2117#urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2118 border-inline-end: 1px solid #9C9CFF;
2119}
c9b0a396 2120
1b1f3d09
RK
2121#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon-labels {
2122 color: #9C9CFF;
2123}
2e389898 2124
2e389898 2125
1b1f3d09
RK
2126#identity-icon-labels:-moz-locale-dir(ltr) {
2127 padding-left: 2px;
2128}
2e389898 2129
1b1f3d09
RK
2130#identity-icon-labels:-moz-locale-dir(rtl) {
2131 padding-right: 2px;
2132}
2e389898 2133
1b1f3d09
RK
2134window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2135/* border-radius: 0;
2136 padding-inline-start: 2px; */
2137 padding-inline-end: 2px;
2138 margin-inline-end: 1px;
2139}
2e389898 2140
1b1f3d09
RK
2141window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #identity-box {
2142 padding-inline-start: 2px;
2143}
2e389898 2144
1b1f3d09
RK
2145window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
2146 /* Forward button hiding is delayed when hovered, so we should use the same
2147 delay for the identity box. We handle both horizontal paddings (for LTR and
2148 RTL), the latter two delays here are for padding-left and padding-right. */
2149 transition-delay: 0s, 100s, 100s;
2150}
2e389898 2151
1b1f3d09
RK
2152window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
2153 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2154 padding-inline-start: 2.01px;
2155}
2e389898 2156
07296beb
RK
2157#identity-icon,
2158#tracking-protection-icon,
2159#connection-icon,
2160#extension-icon {
2161 width: 16px;
2162 height: 16px;
2163 -moz-context-properties: fill;
2164 fill: #A09090;
2165}
2166
2167#identity-icon:-moz-lwtheme,
2168#tracking-protection-icon:-moz-lwtheme,
2169#connection-icon:-moz-lwtheme,
2170#extension-icon:-moz-lwtheme {
2171/* fill: rgba(0,0,0,.6);*/
2172}
2173
1b1f3d09
RK
2174/* MAIN IDENTITY ICON */
2175
2176#identity-icon {
2177 width: 16px;
2178 height: 16px;
07296beb
RK
2179 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2180}
2181
2182#identity-box:hover > #identity-icon:not(.no-hover),
2183#identity-box[open=true] > #identity-icon {
2184 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2185}
2186
2187#identity-box.grantedPermissions > #identity-icon {
2188 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
2189}
2190
2191#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
2192#identity-box.grantedPermissions[open=true] > #identity-icon {
2193 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
2194}
2195
2196#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2197 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2e389898
RK
2198}
2199
1b1f3d09
RK
2200#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2201 opacity: .3;
2202}
319c6529 2203
1b1f3d09 2204#urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
1b1f3d09 2205 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg);
acb0e9b8 2206}
319c6529 2207
1b1f3d09 2208#urlbar[actiontype="extension"] > #identity-box > #identity-icon {
1b1f3d09 2209 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
acb0e9b8 2210}
2211
1b1f3d09 2212/* SHARING ICON */
bcb9d005 2213
1b1f3d09
RK
2214#sharing-icon {
2215 width: 16px;
2216 height: 16px;
2217 margin-inline-start: -16px;
2218 position: relative;
2219 display: none;
bcb9d005
RK
2220}
2221
1b1f3d09
RK
2222#identity-box[sharing="camera"] > #sharing-icon {
2223 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
bcb9d005
RK
2224}
2225
1b1f3d09
RK
2226#identity-box[sharing="microphone"] > #sharing-icon {
2227 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
bcb9d005
RK
2228}
2229
1b1f3d09
RK
2230#identity-box[sharing="screen"] > #sharing-icon {
2231 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
c4460289 2232
1b1f3d09 2233}
d23bf94a 2234
1b1f3d09
RK
2235#identity-box[sharing] > #sharing-icon {
2236 display: -moz-box;
2237 animation-delay: -1.5s;
d23bf94a
RK
2238}
2239
1b1f3d09
RK
2240#identity-box[sharing] > #identity-icon,
2241#sharing-icon {
2242 animation: 3s linear identity-box-sharing-icon-pulse infinite;
d23bf94a
RK
2243}
2244
1b1f3d09
RK
2245@keyframes identity-box-sharing-icon-pulse {
2246/* This should remain identical to tab-sharing-icon-pulse in tabs.inc.css */
2247 0%, 16.66%, 83.33%, 100% {
2248 opacity: 0;
2249 }
2250 33.33%, 66.66% {
2251 opacity: 1;
2252 }
d23bf94a 2253}
1b1f3d09
RK
2254
2255/* TRACKING PROTECTION ICON */
2256
2257#tracking-protection-icon {
07296beb 2258 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled);
1b1f3d09
RK
2259 margin-inline-start: 2px;
2260 margin-inline-end: 0;
d23bf94a
RK
2261}
2262
07296beb
RK
2263#tracking-protection-icon[state="loaded-tracking-content"] {
2264 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled);
2265}
2266
1b1f3d09
RK
2267#tracking-protection-icon[animate] {
2268 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2269}
d23bf94a 2270
1b1f3d09
RK
2271#tracking-protection-icon:not([state]) {
2272 margin-inline-end: -18px;
2273 pointer-events: none;
2274 opacity: 0;
2275 /* Only animate the shield in, when it disappears hide it immediately. */
2276 transition: none;
d23bf94a
RK
2277}
2278
07296beb 2279#urlbar[pageproxystate="invalid"] > #identity-box > #extension-icon,
1b1f3d09
RK
2280#urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2281 visibility: collapse;
c4460289
RK
2282}
2283
07296beb 2284/* CONNECTION ICON, EXTENSION ICON */
1b1f3d09 2285
07296beb
RK
2286#connection-icon,
2287#extension-icon {
1b1f3d09
RK
2288 width: 16px;
2289 height: 16px;
2290 margin-inline-start: 2px;
2291 visibility: collapse;
c4460289 2292}
1b1f3d09 2293
07296beb
RK
2294#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2295#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
2296#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2297 list-style-image: url(chrome://browser/skin/connection-secure.svg);
2298 visibility: visible;
2299}
2300
2301#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2302#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2303#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon,
2304#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
2305 list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
2306 visibility: visible;
2307}
2308
2309#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2310#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2311 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
2312 visibility: visible;
2313}
2314
2315#identity-box.extensionPage > #extension-icon {
2316 list-style-image: url(chrome://browser/skin/controlcenter/extension.svg);
2317 visibility: visible;
2318}
2319
1b1f3d09
RK
2320/* REMOTE CONTROL ICON */
2321
2322#main-window[remotecontrol] #remote-control-icon {
2323 list-style-image: url(chrome://browser/content/robot.ico);
2324 visibility: visible;
2325 width: 16px;
2326 height: 16px;
2327 margin-inline-start: 2px;
20752032 2328}
1b1f3d09
RK
2329
2330/* === END identity-block.inc.css === */
2331
2332#page-proxy-favicon {
2333 -moz-image-region: rect(0, 16px, 16px, 0);
20752032 2334}
1b1f3d09
RK
2335
2336window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2337/* margin-inline-end: 1px;*/
c4460289
RK
2338}
2339
1b1f3d09
RK
2340#identity-box:hover > #page-proxy-favicon {
2341 -moz-image-region: rect(0, 32px, 16px, 16px);
c4460289
RK
2342}
2343
1b1f3d09
RK
2344#identity-box:hover:active > #page-proxy-favicon,
2345#identity-box[open=true] > #page-proxy-favicon {
2346 -moz-image-region: rect(0, 48px, 16px, 32px);
c4460289
RK
2347}
2348
1b1f3d09
RK
2349#identity-box:hover {
2350 background-color: #FFCF00;
2351 color: #000000;
c4460289
RK
2352}
2353
1b1f3d09
RK
2354#identity-box:hover:active,
2355#identity-box[open=true] {
2356 background-color: #FF9F00;
2357 color: #000000;
c4460289 2358}
1b1f3d09
RK
2359
2360#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2361#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2362#urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2363 background-color: #A09090;
2364 color: #000000;
c4460289
RK
2365}
2366
1b1f3d09
RK
2367#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover > #identity-icon-labels,
2368#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active > #identity-icon-labels,
2369#urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] > #identity-icon-labels {
2370 color: #000000;
c4460289
RK
2371}
2372
1b1f3d09
RK
2373#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2374#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2375#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2376 background-color: #008484;
2377 color: #000000;
c4460289
RK
2378}
2379
1b1f3d09
RK
2380#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover > #identity-icon-labels,
2381#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active > #identity-icon-labels,
2382#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] > #identity-icon-labels {
2383 color: #000000;
e2734cc7
RK
2384}
2385
1b1f3d09
RK
2386#identity-box:hover > image,
2387#identity-box:hover:active > image,
2388#identity-box[open=true] > image {
2389 filter: url(chrome://global/skin/filters.svg#active-icon-state);
e2734cc7
RK
2390}
2391
1b1f3d09 2392/* autocomplete */
319c6529 2393
1b1f3d09
RK
2394/* === BEGIN autocomplete.inc.css === */
2395
2396#PopupAutoComplete > richlistbox > richlistitem {
2397 height: 20px;
2398 min-height: 20px;
2399 border: 0;
2400 border-radius: 0;
2401 padding: 0px 1px 0px 1px;
acb0e9b8 2402}
319c6529 2403
1b1f3d09
RK
2404#PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon {
2405 margin-inline-start: 4px;
2406 margin-inline-end: 0;
acb0e9b8 2407}
319c6529 2408
1b1f3d09
RK
2409#PopupAutoComplete > richlistbox > richlistitem > .ac-title {
2410 font: icon;
2411 margin-inline-start: 4px;
71bac478
RK
2412}
2413
1b1f3d09
RK
2414#PopupAutoComplete > richlistbox {
2415 padding: 0;
71bac478
RK
2416}
2417
1b1f3d09
RK
2418/* Login form autocompletion */
2419#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
2420 display: initial;
2421 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
acb0e9b8 2422}
319c6529 2423
1b1f3d09
RK
2424#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] {
2425 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-highlighted);
2426}
c0f6797e 2427
1b1f3d09
RK
2428/* Insecure field warning */
2429#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
2430 background-color: var(--arrowpanel-dimmed);
2431 border-bottom: 1px solid var(--panel-separator-color);
2432 padding-bottom: 4px;
2433 padding-top: 4px;
2434}
2435
2436#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] {
2437 background-color: var(--arrowpanel-dimmed-further);
2438 color: #FFCF00;
acb0e9b8 2439}
319c6529 2440
1b1f3d09
RK
2441#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title {
2442 color: #A09090;
2443 font-size: 1em;
acb0e9b8 2444}
2445
1b1f3d09
RK
2446#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] > .ac-title {
2447 color: inherit;
acb0e9b8 2448}
319c6529 2449
1b1f3d09
RK
2450#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon {
2451 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
acb0e9b8 2452}
319c6529 2453
1b1f3d09
RK
2454/* === END autocomplete.inc.css === */
2455
2456#PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
2457 border-top: 1px solid #A09090;
acb0e9b8 2458}
2459
1b1f3d09
RK
2460#treecolAutoCompleteImage {
2461 max-width: 36px;
2462}
319c6529 2463
1b1f3d09
RK
2464/*
2465.autocomplete-richlistbox {
2466 padding: 4px;
bcb9d005
RK
2467}
2468
1b1f3d09
RK
2469.autocomplete-richlistitem {
2470 height: 30px;
2471 min-height: 30px;
2472 font: message-box;
2473 border-radius: 2px;
2474 border: 1px solid transparent;
2475}
2476*/
2477.ac-title {
2478 font-size: 14px;
bcb9d005
RK
2479}
2480
1b1f3d09
RK
2481.ac-tags {
2482 font-size: 12px;
2483}
2484/*
2485html|span.ac-tag {
2486 border-radius: 2px;
2487 border: 1px solid transparent;
2488 padding: 0 1px;
bcb9d005 2489}
1b1f3d09 2490*/
bcb9d005 2491
1b1f3d09
RK
2492.ac-separator,
2493.ac-url,
2494.ac-action {
2495 font-size: 12px;
acb0e9b8 2496}
319c6529 2497
1b1f3d09
RK
2498html|span.ac-emphasize-text-title,
2499html|span.ac-emphasize-text-tag,
2500html|span.ac-emphasize-text-url {
2501 font-weight: 600;
acb0e9b8 2502}
319c6529 2503
1b1f3d09
RK
2504.ac-type-icon[type=bookmark] {
2505 list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
589b5528
RK
2506}
2507
1b1f3d09
RK
2508.ac-type-icon[type=bookmark][selected][current] {
2509/* list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
589b5528
RK
2510}
2511
1b1f3d09
RK
2512.ac-result-type-bookmark {
2513 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2514 -moz-image-region: rect(0px 16px 16px 0px);
2515 width: 16px;
2516 height: 16px;
bcb9d005
RK
2517}
2518
1b1f3d09
RK
2519richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark {
2520/* -moz-image-region: rect(0px 48px 16px 32px);*/
bcb9d005
RK
2521}
2522
1b1f3d09
RK
2523.ac-type-icon[type=keyword],
2524.ac-site-icon[type=searchengine] {
2525 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg");
2526 context-properties: fill;
2527 fill: #FFCF00;
fe524e0c
RK
2528}
2529
1b1f3d09
RK
2530.ac-type-icon[type=keyword][selected],
2531.ac-site-icon[type=searchengine][selected] {
2532 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg");
2533 context-properties: fill;
2534 fill: #000000;
2535}
b36fc72e 2536
1b1f3d09
RK
2537.ac-result-type-tag {
2538 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2539 width: 16px;
2540 height: 16px;
e20c83c3
RK
2541}
2542
1b1f3d09
RK
2543.ac-type-icon[type=switchtab],
2544.ac-type-icon[type=remotetab] {
2545 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
acb0e9b8 2546}
2547
1b1f3d09
RK
2548.ac-type-icon[type=switchtab][selected],
2549.ac-type-icon[type=remotetab][selected] {
2550 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
acb0e9b8 2551}
319c6529 2552
1b1f3d09
RK
2553.autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2554.autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2555{
2556 color: #8050B0;
2557 font-size: smaller;
2558}
6dc70335 2559
1b1f3d09
RK
2560.autocomplete-treebody::-moz-tree-cell(suggesthint) {
2561 border-top: 1px solid #9C9CFF;
024a65e9 2562}
1b1f3d09
RK
2563
2564/* combined go/reload/stop button in location bar */
2565
2566#urlbar-go-button,
2567#reload-button,
2568#stop-button {
2569 border-style: none;
2570 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2571/* margin: 0 9px; */
2572 margin-inline-start: 0px;
2573 border-inline-start: 1px solid var(--urlbar-separator-color);
2574 border-image: linear-gradient(transparent 15%,
2575 var(--urlbar-separator-color) 15%,
2576 var(--urlbar-separator-color) 85%,
2577 transparent 85%);
2578 border-image-slice: 1;
368d0b7f
RK
2579}
2580
1b1f3d09
RK
2581/* XXX: temporary for Photon preview changes */
2582#reload-button,
2583#stop-button {
2584 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
acb0e9b8 2585}
319c6529 2586
1b1f3d09
RK
2587#urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2588 border-top-left-radius: 0px;
2589 border-bottom-left-radius: 0px;
57fc408c
RK
2590}
2591
1b1f3d09
RK
2592#urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2593 border-top-right-radius: 0px;
2594 border-bottom-right-radius: 0px;
57fc408c
RK
2595}
2596
1b1f3d09
RK
2597#urlbar > toolbarbutton:not([disabled=true]):active:hover,
2598#reload-button:not(:hover) {
2599 border-inline-start-style: none;
2600 padding-inline-start: 3px;
57fc408c
RK
2601}
2602
1b1f3d09
RK
2603#reload-button,
2604#reload-button {
2605 -moz-image-region: rect(0px, 14px, 14px, 0px);
57fc408c
RK
2606}
2607
1b1f3d09
RK
2608#reload-button[disabled=true],
2609#reload-button[disabled=true] {
2610 -moz-image-region: rect(28px, 14px, 42px, 0px);
acb0e9b8 2611}
2612
1b1f3d09
RK
2613#reload-button:not([disabled=true]):hover,
2614#reload-button:not([disabled=true]):hover {
2615 -moz-image-region: rect(14px, 14px, 28px, 0px);
acb0e9b8 2616}
2617
1b1f3d09
RK
2618#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
2619#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2620 transform: scaleX(-1);
acb0e9b8 2621}
319c6529 2622
1b1f3d09
RK
2623#urlbar-go-button {
2624 -moz-image-region: rect(0, 42px, 14px, 28px);
d533ec21
RK
2625}
2626
1b1f3d09
RK
2627#urlbar-go-button:hover {
2628 -moz-image-region: rect(14px, 42px, 28px, 28px);
acb0e9b8 2629}
2630
1b1f3d09
RK
2631#urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2632 transform: scaleX(-1);
c0f6797e
RK
2633}
2634
1b1f3d09
RK
2635#stop-button,
2636#stop-button {
2637 -moz-image-region: rect(0px, 28px, 14px, 14px);
613daf44 2638}
2639
1b1f3d09
RK
2640#stop-button:hover,
2641#stop-button:hover {
2642 -moz-image-region: rect(14px, 28px, 28px, 14px);
db1c5db1
RK
2643}
2644
1b1f3d09
RK
2645@media (min-resolution: 1.1dppx) {
2646 #reload-button,
2647 #stop-button,
2648 #urlbar-go-button,
2649 #reload-button,
2650 #stop-button {
2651 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2652 }
2653
2654 #reload-button > .toolbarbutton-icon,
2655 #stop-button > .toolbarbutton-icon,
2656 #urlbar-go-button > .toolbarbutton-icon,
2657 #reload-button > .toolbarbutton-icon,
2658 #stop-button > .toolbarbutton-icon {
2659 width: 14px;
2660 }
2661
2662 #urlbar-go-button {
2663 -moz-image-region: rect(0, 84px, 28px, 56px);
2664 }
2665
2666 #urlbar-go-button:hover {
2667 -moz-image-region: rect(28px, 84px, 56px, 56px);
2668 }
2669
2670 #urlbar-go-button:hover:active {
2671 -moz-image-region: rect(56px, 84px, 84px, 56px);
db1c5db1 2672 }
1b1f3d09
RK
2673
2674 #reload-button,
2675 #reload-button {
2676 -moz-image-region: rect(0, 28px, 28px, 0);
db1c5db1 2677 }
db1c5db1 2678
1b1f3d09
RK
2679 #reload-button:not([disabled]):hover,
2680 #reload-button:not([disabled]):hover {
2681 -moz-image-region: rect(28px, 28px, 56px, 0);
2682 }
db1c5db1 2683
1b1f3d09
RK
2684 #reload-button:not([disabled]):hover:active,
2685 #reload-button:not([disabled]):hover:active {
2686 -moz-image-region: rect(56px, 28px, 84px, 0);
2687 }
db1c5db1 2688
1b1f3d09
RK
2689 #stop-button,
2690 #stop-button {
2691 -moz-image-region: rect(0, 56px, 28px, 28px);
2692 }
db1c5db1 2693
1b1f3d09
RK
2694 #stop-button:not([disabled]):hover,
2695 #stop-button:not([disabled]):hover {
2696 -moz-image-region: rect(28px, 56px, 56px, 28px);
2697 }
db1c5db1 2698
1b1f3d09
RK
2699 #stop-button:hover:active,
2700 #stop-button:hover:active {
2701 -moz-image-region: rect(56px, 56px, 84px, 28px);
2702 }
db1c5db1
RK
2703}
2704
1b1f3d09 2705/* popup blocker button */
d533ec21 2706
1b1f3d09
RK
2707#page-report-button {
2708 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2709 -moz-image-region: rect(0, 16px, 16px, 0);
d533ec21
RK
2710}
2711
1b1f3d09
RK
2712#page-report-button:hover ,
2713#page-report-button:hover:active,
2714#page-report-button[open="true"] {
2715 -moz-image-region: rect(0, 32px, 16px, 16px);
b1dfcf32
RK
2716}
2717
1b1f3d09 2718/* Reader mode button */
b1dfcf32 2719
1b1f3d09
RK
2720#reader-mode-button {
2721 list-style-image: url("chrome://browser/skin/readerMode.svg");
2722 -moz-image-region: rect(0, 16px, 16px, 0);
b1dfcf32
RK
2723}
2724
1b1f3d09
RK
2725#reader-mode-button:hover,
2726#reader-mode-button[readeractive]:hover {
2727 -moz-image-region: rect(0, 32px, 16px, 16px);
b1dfcf32
RK
2728}
2729
1b1f3d09
RK
2730#reader-mode-button:hover:active,
2731#reader-mode-button[readeractive] {
2732 -moz-image-region: rect(0, 48px, 16px, 32px);
b1dfcf32
RK
2733}
2734
1b1f3d09 2735/* social share panel */
b1dfcf32 2736
1b1f3d09 2737/* === BEGIN social.inc.css === */
b1dfcf32 2738
1b1f3d09
RK
2739#manage-share-providers {
2740 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
2741 -moz-image-region: rect(0, 468px, 18px, 450px);
1cf9b082
RK
2742}
2743
1b1f3d09
RK
2744#manage-share-providers > .toolbarbutton-icon {
2745 min-height: 18px;
2746 min-width: 18px;
613daf44 2747}
319c6529 2748
1b1f3d09
RK
2749.social-panel > .panel-arrowcontainer > .panel-arrowcontent {
2750 padding: 0;
2751}
2752/* fixup corners for share panel */
2753.social-panel > .social-panel-frame {
2754 border-radius: inherit;
613daf44 2755}
319c6529 2756
1b1f3d09 2757/* === END social.inc.css === */
85b6b932 2758
1b1f3d09
RK
2759.social-panel-frame {
2760 border-radius: inherit;
85b6b932
RK
2761}
2762
1b1f3d09
RK
2763.social-share-frame {
2764 min-width: 756px;
2765 height: 150px;
613daf44 2766}
319c6529 2767
1b1f3d09
RK
2768#share-container {
2769 min-width: 756px;
2770 background-color: white;
2771 background-repeat: no-repeat;
2772 background-position: center center;
c0f6797e 2773}
1b1f3d09
RK
2774#share-container[loading] {
2775 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
b1dfcf32 2776}
1b1f3d09
RK
2777#share-container > browser {
2778 transition: opacity 150ms ease-in-out;
2779 opacity: 1;
024a65e9 2780}
1b1f3d09
RK
2781#share-container[loading] > browser {
2782 opacity: 0;
b1dfcf32
RK
2783}
2784
1b1f3d09
RK
2785.social-share-toolbar {
2786 border-bottom: 1px solid #9C9CFF;
2787 padding: 2px;
1cf9b082
RK
2788}
2789
1b1f3d09 2790#social-share-provider-buttons {
c0f6797e 2791 padding: 0;
1b1f3d09 2792 margin: 0;
c0f6797e
RK
2793}
2794
1b1f3d09
RK
2795.share-provider-button {
2796 padding: 5px;
2797 margin: 2px;
1cf9b082
RK
2798}
2799
1b1f3d09
RK
2800.share-provider-button > .toolbarbutton-text {
2801 display: none;
c0f6797e 2802}
1b1f3d09
RK
2803.share-provider-button > .toolbarbutton-icon {
2804 width: 16px;
2805 min-height: 16px;
2806 max-height: 16px;
c0f6797e
RK
2807}
2808
1b1f3d09
RK
2809#social-share-panel {
2810 min-height: 100px;
2811 min-width: 766px;
93c91f62
RK
2812}
2813
1b1f3d09
RK
2814#share-container,
2815.social-share-frame {
2816 border-top-left-radius: 0;
2817 border-bottom-left-radius: inherit;
2818 border-top-right-radius: 0;
2819 border-bottom-right-radius: inherit;
93c91f62
RK
2820}
2821
1b1f3d09
RK
2822#social-share-panel > .social-share-toolbar {
2823 border-top-left-radius: inherit;
2824 border-top-right-radius: inherit;
93c91f62
RK
2825}
2826
1b1f3d09
RK
2827#social-share-provider-buttons {
2828 border-top-left-radius: inherit;
2829 border-top-right-radius: inherit;
93c91f62
RK
2830}
2831
1b1f3d09
RK
2832/* bookmarks menu-button */
2833
2834#bookmarks-menu-button.bookmark-item {
2835 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2836 -moz-image-region: rect(0px 16px 16px 0px);
93c91f62
RK
2837}
2838
1b1f3d09
RK
2839#bookmarks-menu-button.bookmark-item[starred] {
2840 -moz-image-region: rect(0px 32px 16px 16px);
93c91f62
RK
2841}
2842
1b1f3d09
RK
2843#nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2844 padding-top: 2px;
2845 padding-bottom: 2px;
c0f6797e
RK
2846}
2847
1b1f3d09
RK
2848#BMB_bookmarksPopup[side="top"],
2849#BMB_bookmarksPopup[side="bottom"] {
2850 margin-left: -20px;
2851 margin-right: -20px;
c0f6797e
RK
2852}
2853
1b1f3d09
RK
2854#BMB_bookmarksPopup[side="left"],
2855#BMB_bookmarksPopup[side="right"] {
2856 margin-top: -20px;
2857 margin-bottom: -20px;
613daf44 2858}
319c6529 2859
1b1f3d09 2860/* bookmarking panel */
c0f6797e 2861
1b1f3d09
RK
2862#editBookmarkPanelStarIcon {
2863 list-style-image: url("chrome://browser/skin/places/starred48.png");
2864 width: 48px;
2865 height: 48px;
c0f6797e
RK
2866}
2867
1b1f3d09
RK
2868#editBookmarkPanelStarIcon[unstarred] {
2869 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
c0f6797e
RK
2870}
2871
1b1f3d09
RK
2872#editBookmarkPanelTitle {
2873 font-size: 130%;
c0f6797e 2874}
c0f6797e 2875
1b1f3d09
RK
2876#editBookmarkPanelHeader,
2877#editBookmarkPanelContent {
2878 margin-bottom: .5em;
c0f6797e
RK
2879}
2880
1b1f3d09
RK
2881/* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2882#editBMPanel_folderTree {
2883 min-width: 27em;
fa703ff4
RK
2884}
2885
1b1f3d09
RK
2886/* ::::: content area ::::: */
2887
2888/* === BEGIN sidebar.inc.css === */
2889
2890#sidebar-box {
2891 --icon-fill: #FFCF00;
2892 --header-background-color: #9C9CFF;
2893 --header-background-color-hover: #FFCF00;
2894 --title-font-size: 13px;
2895
2896 background-color: #9C9CFF;
c0f6797e
RK
2897 color: #000000;
2898}
2899
1b1f3d09
RK
2900#sidebar-header {
2901 color: #000000;
2902 padding: 2px;
024a65e9
RK
2903}
2904
1b1f3d09
RK
2905#sidebar-splitter {
2906 margin-inline-start: 0;
024a65e9 2907}
c0f6797e 2908
1b1f3d09
RK
2909#sidebar-splitter:-moz-locale-dir(ltr),
2910#sidebar:-moz-locale-dir(ltr) {
2911 border-radius: 0 5px 0 0;
c0f6797e 2912}
c0f6797e 2913
1b1f3d09
RK
2914#sidebar-splitter:-moz-locale-dir(rtl),
2915#sidebar:-moz-locale-dir(rtl) {
2916 border-radius: 5px 0 0 0;
2917}
db1c5db1 2918
1b1f3d09
RK
2919#sidebar-throbber[loading="true"] {
2920 list-style-image: url("chrome://global/skin/icons/loading.png");
2921}
db1c5db1 2922
1b1f3d09
RK
2923@media (min-resolution: 2dppx) {
2924 .sidebar-throbber[loading="true"],
2925 #sidebar-throbber[loading="true"] {
2926 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
2927 width: 16px;
db1c5db1 2928 }
43371c9b
RK
2929}
2930
1b1f3d09
RK
2931#sidebar-title {
2932 padding-inline-start: 0px;
2933}
d23bf94a 2934
1b1f3d09
RK
2935#sidebar-title {
2936 margin: 0;
2937 padding: 0;
2938 padding-inline-start: 8px;
2939 padding-inline-end: 4px;
d23bf94a
RK
2940}
2941
1b1f3d09
RK
2942#sidebar-switcher-arrow,
2943#sidebar-close > .toolbarbutton-icon {
2944 -moz-context-properties: fill;
d23bf94a 2945 fill: currentColor;
1b1f3d09 2946 opacity: 0.8;
d23bf94a
RK
2947}
2948
1b1f3d09
RK
2949#sidebar-switcher-arrow {
2950/* list-style-image: url(chrome://browser/skin/arrow-dropdown.svg);*/
2951 list-style-image: url(chrome://global/skin/arrow/arrow-down.gif);
2952 width: 12px;
2953 height: 12px;
d23bf94a
RK
2954}
2955
1b1f3d09
RK
2956#sidebar-switcher-arrow:hover {
2957 list-style-image: url(chrome://global/skin/arrow/arrow-down-hover.gif);
1cf9b082
RK
2958}
2959
1b1f3d09
RK
2960#sidebar-header > .close-icon {
2961/* padding: 4px 2px;
2962 margin: 0;
2963 border: none;*/
2964 list-style-image: url("chrome://global/skin/icons/close-button.gif");
613daf44 2965}
2966
1b1f3d09
RK
2967#sidebar-header > .close-icon:hover,
2968#sidebar-header > .close-icon:hover:active {
2969 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
319c6529 2970}
acb0e9b8 2971
1b1f3d09
RK
2972#sidebar-close {
2973 -moz-appearance: none;
2974 list-style-image: url(chrome://browser/skin/sidebar/close.svg);
2975 margin: 0;
2976 padding: 4px;
2977 border-radius: 4px;
acb0e9b8 2978}
1b1f3d09
RK
2979/*
2980#sidebar-switcher-target {
2981 -moz-appearance: none;
2982 color: inherit;
2983 margin-inline-end: 4px;
2984 border-radius: 4px;
2985 border: 1px solid transparent;
2986 padding: 2px 4px;
acb0e9b8 2987}
319c6529 2988
1b1f3d09
RK
2989#sidebar-switcher-target:hover,
2990#sidebar-close:hover {
2991 background: hsla(240, 5%, 5%, 0.05);
710194f1
RK
2992}
2993
1b1f3d09
RK
2994#sidebar-switcher-target:hover {
2995 border-color: rgba(0, 0, 0, 0.2);
2996}
710194f1 2997
1b1f3d09
RK
2998#sidebar-close:hover:active,
2999#sidebar-switcher-target:hover:active,
3000#sidebar-switcher-target.active {
3001 background: hsla(240, 5%, 5%, 0.1);
c0f6797e
RK
3002}
3003
1b1f3d09
RK
3004#sidebar-switcher-target:hover:active,
3005#sidebar-switcher-target.active {
3006 border-color: rgba(0, 0, 0, 0.25);
3007}
3008*/
3009#sidebarMenu-popup .subviewbutton {
3010 min-width: 190px;
3011}
b7f3670c 3012
1b1f3d09
RK
3013#sidebar-extensions:empty + toolbarseparator {
3014 display: none;
3015}
c0f6797e 3016
1b1f3d09
RK
3017/* Allow room for the checkbox drawn as a background image at the start of the toolbarbutton */
3018#sidebarMenu-popup .subviewbutton-iconic > .toolbarbutton-icon {
3019 padding-inline-start: 16px;
3020}
3021#sidebarMenu-popup .subviewbutton-iconic > .toolbarbutton-text {
3022 padding-inline-start: 0;
c0f6797e
RK
3023}
3024
1b1f3d09
RK
3025#sidebar-box[sidebarcommand="viewWebPanelsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
3026 list-style-image: url(chrome://mozapps/skin/places/defaultFavicon.svg);
acb0e9b8 3027}
319c6529 3028
1b1f3d09
RK
3029#sidebar-switcher-bookmarks > .toolbarbutton-icon,
3030#sidebar-box[sidebarcommand="viewBookmarksSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
3031/* list-style-image: url(chrome://browser/skin/bookmark.svg);
3032 -moz-context-properties: fill;
3033 fill: currentColor;
3034 opacity: 0.8;*/
3035 list-style-image: url(chrome://browser/skin/places/bookmark.png);
3036 -moz-image-region: rect(0px 16px 16px 0px);
acb0e9b8 3037}
319c6529 3038
1b1f3d09
RK
3039#sidebar-switcher-history > .toolbarbutton-icon,
3040#sidebar-box[sidebarcommand="viewHistorySidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
3041/* list-style-image: url(chrome://browser/skin/history.svg);
3042 -moz-context-properties: fill;
3043 fill: currentColor;
3044 opacity: 0.8;*/
3045 list-style-image: url(chrome://browser/skin/places/history.png);
c0f6797e
RK
3046}
3047
1b1f3d09
RK
3048#sidebar-switcher-tabs > .toolbarbutton-icon,
3049#sidebar-box[sidebarcommand="viewTabsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
3050/* list-style-image: url(chrome://browser/skin/synced-tabs.svg);
3051 -moz-context-properties: fill;
3052 fill: currentColor;
3053 opacity: 0.8;*/
3054 list-style-image: url(chrome://browser/skin/urlbar-tab.svg#tab);
acb0e9b8 3055}
319c6529 3056
1b1f3d09
RK
3057/* === END sidebar.inc.css === */
3058
3059#sidebar {
3060 background-color: #000000;
acb0e9b8 3061}
3062
1b1f3d09
RK
3063.browserContainer > findbar {
3064/*
3065 background-color: -moz-dialog;
3066 color: -moz-DialogText;
3067*/
acb0e9b8 3068}
319c6529 3069
1b1f3d09
RK
3070/* Tabstrip */
3071
3072#TabsToolbar {
3073 min-height: 0;
3074 padding: 0;
3075 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
acb0e9b8 3076}
3077
1b1f3d09
RK
3078#TabsToolbar .toolbar-holder {
3079 background-color: #000000; /* correct effect of being an actual toolbar */
c0f6797e
RK
3080}
3081
1b1f3d09
RK
3082#main-window[disablechrome] #TabsToolbar,
3083#TabsToolbar[tabsontop="false"] {
3084 border-bottom: 1px solid #008484;
acb0e9b8 3085}
319c6529 3086
1b1f3d09
RK
3087/* === BEGIN tabs.inc.css === */
3088
3089:root {
3090 /* --tab-toolbar-navbar-overlap: 1px; */
3091 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
3092 /* --tab-min-height: 31px; */
3093}
3094#TabsToolbar {
3095 /* --tab-stroke-background-size: auto 100%; */
acb0e9b8 3096}
319c6529 3097
1b1f3d09
RK
3098.tabbrowser-tab,
3099.tabs-newtab-button,
3100#TabsToolbar > #new-tab-button {
3101 margin-top: 0px;
c0f6797e
RK
3102}
3103
1b1f3d09
RK
3104.tabbrowser-tab {
3105 padding: 1px 4px 2px;
c0f6797e
RK
3106}
3107
1b1f3d09
RK
3108.tabbrowser-tab:first-of-type {
3109 margin-inline-start: 2px;
c0f6797e
RK
3110}
3111
1b1f3d09
RK
3112.tabs-newtab-button,
3113#TabsToolbar > #new-tab-button,
3114#TabsToolbar > toolbarpaletteitem > #new-tab-button,
3115#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3116 border-radius: 8px 8px 0px 0px;
3117 margin-inline-start: 0;
acb0e9b8 3118}
3119
1b1f3d09
RK
3120.tabs-newtab-button:not(:hover),
3121#TabsToolbar > #new-tab-button:not(:hover),
3122#TabsToolbar > toolbarpaletteitem > #new-tab-button,
3123#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3124 background-color: #C09070;
acb0e9b8 3125}
319c6529 3126
1b1f3d09
RK
3127/* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
3128.tabbrowser-tab[visuallyselected=true] {
3129/* position: relative;
3130 z-index: 2;*/
7c1e433b
RK
3131}
3132
1b1f3d09 3133.tab-background-middle {
acb0e9b8 3134}
319c6529 3135
1b1f3d09 3136.tab-content {
acb0e9b8 3137}
319c6529 3138
1b1f3d09 3139.tab-content[pinned] {
acb0e9b8 3140}
319c6529 3141
1b1f3d09
RK
3142.tab-throbber,
3143.tab-icon-image,
3144.tab-sharing-icon-overlay,
3145.tab-icon-sound,
3146.tab-close-button {
acb0e9b8 3147}
319c6529 3148
1b1f3d09
RK
3149.tab-throbber,
3150.tab-sharing-icon-overlay,
3151.tab-icon-image {
3152 height: 16px;
3153 width: 16px;
3154 margin-inline-end: 3px;
acb0e9b8 3155}
3156
1b1f3d09
RK
3157.tab-icon-image {
3158 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
acb0e9b8 3159}
319c6529 3160
1b1f3d09
RK
3161.tab-icon-image[sharing]:not([selected]),
3162.tab-sharing-icon-overlay {
3163 animation: 3s linear tab-sharing-icon-pulse infinite;
7c1e433b
RK
3164}
3165
1b1f3d09
RK
3166@keyframes tab-sharing-icon-pulse {
3167/* This should remain identical to identity-box-sharing-icon-pulse in identity-block.inc.css */
3168 0%, 16.66%, 83.33%, 100% {
3169 opacity: 0;
3170 }
3171 33.33%, 66.66% {
3172 opacity: 1;
3173 }
acb0e9b8 3174}
3175
1b1f3d09
RK
3176.tab-icon-image[sharing]:not([selected]) {
3177 animation-delay: -1.5s;
613daf44 3178}
319c6529 3179
1b1f3d09
RK
3180.tab-sharing-icon-overlay {
3181 /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
3182 margin-inline-start: -22px;
319c6529 3183 position: relative;
613daf44 3184}
319c6529 3185
1b1f3d09
RK
3186.tab-sharing-icon-overlay[sharing="camera"] {
3187 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
613daf44 3188}
3189
1b1f3d09
RK
3190.tab-sharing-icon-overlay[sharing="microphone"] {
3191 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
3192}
a5cb6e53 3193
1b1f3d09
RK
3194.tab-sharing-icon-overlay[sharing="screen"] {
3195 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
db1c5db1
RK
3196}
3197
1b1f3d09 3198.tab-icon-overlay {
d23bf94a
RK
3199 width: 16px;
3200 height: 16px;
1b1f3d09
RK
3201 margin-top: -8px;
3202 margin-inline-start: -15px;
3203 margin-inline-end: -1px;
3204 position: relative;
d23bf94a
RK
3205}