some corrections and finishing touches to that LCARStrek works well for Firefox 55...
[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");
9a225e4b 109 -moz-context-properties: fill;
1a44a283
RK
110/* margin: 0;
111 padding: 0 6px;*/
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,
9a225e4b
RK
624#main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon,
625#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .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
9a225e4b
RK
1883/* Limit the size of the hidden description, since a deck takes the size of the biggest child */
1884
1885#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][selectedIndex="0"] #search-suggestions-hint,
1886#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][selectedIndex="1"] #search-suggestions-question {
1887 max-height: 5em;
1888}
1889
07296beb
RK
1890/* Opt-in notification */
1891
1892#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-opt-in"] {
1b1f3d09
RK
1893 padding: 6px 0;
1894 padding-inline-start: 44px;
07296beb 1895 background-color: #000000;
1b1f3d09
RK
1896 background-image: url("chrome://browser/skin/info.svg");
1897 background-clip: padding-box;
1898 background-position: 20px center;
1899 background-repeat: no-repeat;
1900 background-size: 16px 16px;
1cf9b082
RK
1901}
1902
07296beb 1903#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1b1f3d09 1904 background-position: right 20px center;
319c6529 1905}
acb0e9b8 1906
07296beb 1907#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-notification"] > description {
1b1f3d09
RK
1908 margin: 0;
1909 padding: 0;
7c1e433b
RK
1910}
1911
07296beb 1912#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1b1f3d09 1913 margin-inline-start: 0;
7c1e433b 1914}
1b1f3d09 1915
07296beb 1916#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button {
1b1f3d09
RK
1917 -moz-appearance: none;
1918 min-width: 80px;
1919 border-radius: 3px;
1920 padding: 4px 16px;
1921 margin: 0;
1922 margin-inline-start: 10px;
7c1e433b
RK
1923}
1924
07296beb
RK
1925#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-disable"] {
1926}
1927
1928#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-disable"]:hover {
1929}
1930
1931#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-enable"] {
1932}
1933
1934#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-enable"]:hover {
1935}
1936
1937/* Opt-out hint */
1938
1939#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-opt-out"] {
9a225e4b
RK
1940/* font: message-box;*/
1941 display: flex;
1942 flex-direction: row;
1943 align-items: center;
1944 flex-wrap: nowrap;
1945}
1946
1947#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] {
1948 flex-basis: 100%;
07296beb
RK
1949}
1950
1951#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] > description {
1952 margin: auto;
1953 padding: 4px 8px;
1954 background-color: #000000;
1955 border: 1px solid #FFCF00;
1956 border-radius: 4px;
1957 color: #A09090;
1958}
1959
1960#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] > description > html|span {
1961 unicode-bidi: embed;
7c1e433b 1962}
7c1e433b 1963
07296beb
RK
1964#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] > description > html|span.prefix {
1965 font-weight: bold;
7c1e433b
RK
1966}
1967
07296beb
RK
1968#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] > hbox[anonid="search-suggestions-opt-out"] > .ac-site-icon {
1969 transform: scale(0);
1970 animation-name: search-suggestions-hint-grow;
1971 animation-duration: 500ms;
1972 animation-delay: 500ms;
1973 animation-iteration-count: 1;
1974 animation-timing-function: ease-in-out;
1975 animation-fill-mode: forwards;
9a225e4b 1976 min-width: 16px;
7c1e433b
RK
1977}
1978
07296beb
RK
1979@keyframes search-suggestions-hint-grow {
1980 0% { transform: scale(0); }
1981 40% { transform: scale(1.5); }
1982 60% { transform: scale(1); }
1983 80% { transform: scale(1.25); }
1984 100% { transform: scale(1); }
1985}
1986
1987#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-typing"] > .ac-title-text {
1988 text-overflow: clip;
1989}
1990
1991#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-typing"] {
1992 overflow: hidden;
9a225e4b 1993 max-width: 12ch;
07296beb
RK
1994 width: 0;
1995 animation-name: search-suggestions-hint-typing;
1996 animation-duration: 500ms;
1997 animation-delay: 750ms;
1998 animation-iteration-count: 1;
1999 animation-fill-mode: forwards;
2000}
2001
9a225e4b
RK
2002@media all and (max-width: 800px) {
2003 /* Hide the typing animation block */
2004 #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-typing"] {
2005 display: none;
2006 }
2007}
2008
07296beb
RK
2009@keyframes search-suggestions-hint-typing {
2010 from { width: 0; }
9a225e4b 2011 to { width: 12ch; }
07296beb
RK
2012}
2013
2014#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-box"] {
2015 opacity: 0;
2016 animation-duration: 250ms;
2017 animation-delay: 1500ms;
2018 animation-iteration-count: 1;
2019 animation-fill-mode: forwards;
2020}
2021
2022/* Margin-inline-start can't be animated yet */
2023#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-box"]:-moz-locale-dir(ltr) {
2024 margin-left: 160px;
2025 animation-name: search-suggestions-hint-buildin-ltr;
2026}
2027
2028@keyframes search-suggestions-hint-buildin-ltr {
2029 from { margin-left: 160px; opacity: 0; }
2030 to { margin-left: 0; opacity: 1; }
2031}
2032
2033#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-box"]:-moz-locale-dir(rtl) {
2034 /* Should be margin-inline-start but that can't be animated yet */
2035 margin-right: 160px;
2036 animation-name: search-suggestions-hint-buildin-rtl;
2037}
2038
2039@keyframes search-suggestions-hint-buildin-rtl {
2040 from { margin-right: 160px; opacity: 0; }
2041 to { margin-right: 0; opacity: 1; }
2042}
2043
2044#search-suggestions-change-settings {
2045 opacity: 0;
2046 animation-name: search-suggestions-hint-fadein;
2047 animation-duration: 500ms;
2048 animation-delay: 1800ms;
2049 animation-iteration-count: 1;
2050 animation-fill-mode: forwards;
2051}
2052
2053@keyframes search-suggestions-hint-fadein {
2054 from { opacity: 0 }
2055 to { opacity: 1 }
7c1e433b
RK
2056}
2057
1b1f3d09
RK
2058/* === END urlbarSearchSuggestionsNotification.inc.css === */
2059
2060#search-container {
2061 min-width: calc(54px + 11ch);
7c1e433b
RK
2062}
2063
1b1f3d09
RK
2064/* identity box */
2065
2066#identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
2067 background-color: var(--identity-box-verified-background-color);
acb0e9b8 2068}
2069
1b1f3d09
RK
2070#identity-box:-moz-focusring {
2071 outline: 1px dotted;
2072 outline-offset: -1px;
c0f6797e
RK
2073}
2074
1b1f3d09
RK
2075#identity-box.verifiedDomain:-moz-focusring,
2076#identity-box.verifiedIdentity:-moz-focusring {
2077 outline-color: #000000;
acb0e9b8 2078}
2079
1b1f3d09
RK
2080/* Location bar dropmarker */
2081
2082.urlbar-history-dropmarker:not(:hover):not([open="true"]) {
2083 background-color: transparent;
7c1e433b 2084}
8922acc9 2085
1b1f3d09
RK
2086#urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
2087#urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
2088#urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
2089 border: none;
2090 border-radius: 0px;
2091 transition: opacity 0.15s ease;
319c6529 2092}
acb0e9b8 2093
1b1f3d09
RK
2094#urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
2095 transition: none;
85cfb236
RK
2096}
2097
1b1f3d09
RK
2098#navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
2099 opacity: 0;
acb0e9b8 2100}
2101
1b1f3d09 2102.urlbar-history-dropmarker:hover {
acb0e9b8 2103}
319c6529 2104
1b1f3d09
RK
2105.urlbar-history-dropmarker:hover:active,
2106.urlbar-history-dropmarker[open="true"] {
acb0e9b8 2107}
2108
1b1f3d09
RK
2109/* page proxy icon */
2110/* === BEGIN identity-block.inc.css === */
319c6529 2111
1b1f3d09
RK
2112#identity-box {
2113 font-size: .9em;
2114 border-radius: 2px;
2115 padding: 3px 5px;
2116 overflow: hidden;
2117 /* The padding-left and padding-right transitions handle the delayed hiding of
2118 the forward button when hovered. */
2119 transition: background-color 150ms ease, padding-left, padding-right;
acb0e9b8 2120}
2121
1b1f3d09
RK
2122#identity-box:-moz-locale-dir(ltr) {
2123 border-top-right-radius: 0;
2124 border-bottom-right-radius: 0;
acb0e9b8 2125}
319c6529 2126
1b1f3d09
RK
2127#identity-box:-moz-locale-dir(rtl) {
2128 border-top-left-radius: 0;
2129 border-bottom-left-radius: 0;
acb0e9b8 2130}
319c6529 2131
1b1f3d09
RK
2132#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2133 border-inline-end: 1px solid #008484;
acb0e9b8 2134}
2135
1b1f3d09
RK
2136#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
2137 color: #008484;
2138}
2e389898 2139
1b1f3d09
RK
2140#urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2141 border-inline-end: 1px solid #9C9CFF;
2142}
c9b0a396 2143
1b1f3d09
RK
2144#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon-labels {
2145 color: #9C9CFF;
2146}
2e389898 2147
2e389898 2148
1b1f3d09
RK
2149#identity-icon-labels:-moz-locale-dir(ltr) {
2150 padding-left: 2px;
2151}
2e389898 2152
1b1f3d09
RK
2153#identity-icon-labels:-moz-locale-dir(rtl) {
2154 padding-right: 2px;
2155}
2e389898 2156
1b1f3d09
RK
2157window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2158/* border-radius: 0;
2159 padding-inline-start: 2px; */
2160 padding-inline-end: 2px;
2161 margin-inline-end: 1px;
2162}
2e389898 2163
1b1f3d09
RK
2164window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #identity-box {
2165 padding-inline-start: 2px;
2166}
2e389898 2167
1b1f3d09
RK
2168window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
2169 /* Forward button hiding is delayed when hovered, so we should use the same
2170 delay for the identity box. We handle both horizontal paddings (for LTR and
2171 RTL), the latter two delays here are for padding-left and padding-right. */
2172 transition-delay: 0s, 100s, 100s;
2173}
2e389898 2174
1b1f3d09
RK
2175window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
2176 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2177 padding-inline-start: 2.01px;
2178}
2e389898 2179
07296beb
RK
2180#identity-icon,
2181#tracking-protection-icon,
2182#connection-icon,
9a225e4b
RK
2183.notification-anchor-icon,
2184#blocked-permissions-container > .blocked-permission-icon,
07296beb
RK
2185#extension-icon {
2186 width: 16px;
2187 height: 16px;
9a225e4b 2188 margin-inline-start: 2px;
07296beb
RK
2189 -moz-context-properties: fill;
2190 fill: #A09090;
2191}
2192
2193#identity-icon:-moz-lwtheme,
2194#tracking-protection-icon:-moz-lwtheme,
2195#connection-icon:-moz-lwtheme,
9a225e4b
RK
2196.notification-anchor-icon:-moz-lwtheme,
2197#blocked-permissions-container > .blocked-permission-icon:-moz-lwtheme,
07296beb
RK
2198#extension-icon:-moz-lwtheme {
2199/* fill: rgba(0,0,0,.6);*/
2200}
2201
1b1f3d09
RK
2202/* MAIN IDENTITY ICON */
2203
2204#identity-icon {
9a225e4b 2205 margin-inline-start: 0;
1b1f3d09
RK
2206 width: 16px;
2207 height: 16px;
07296beb
RK
2208 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2209}
2210
2211#identity-box:hover > #identity-icon:not(.no-hover),
2212#identity-box[open=true] > #identity-icon {
2213 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2214}
2215
2216#identity-box.grantedPermissions > #identity-icon {
2217 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
2218}
2219
2220#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
2221#identity-box.grantedPermissions[open=true] > #identity-icon {
2222 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
2223}
2224
2225#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2226 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2e389898
RK
2227}
2228
1b1f3d09
RK
2229#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2230 opacity: .3;
2231}
319c6529 2232
1b1f3d09 2233#urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
1b1f3d09 2234 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg);
acb0e9b8 2235}
319c6529 2236
1b1f3d09 2237#urlbar[actiontype="extension"] > #identity-box > #identity-icon {
1b1f3d09 2238 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
acb0e9b8 2239}
2240
1b1f3d09 2241/* SHARING ICON */
bcb9d005 2242
1b1f3d09
RK
2243#sharing-icon {
2244 width: 16px;
2245 height: 16px;
2246 margin-inline-start: -16px;
2247 position: relative;
9a225e4b
RK
2248 -moz-context-properties: fill;
2249 fill: #FF0000;
1b1f3d09 2250 display: none;
bcb9d005
RK
2251}
2252
1b1f3d09
RK
2253#identity-box[sharing="camera"] > #sharing-icon {
2254 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
bcb9d005
RK
2255}
2256
1b1f3d09
RK
2257#identity-box[sharing="microphone"] > #sharing-icon {
2258 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
bcb9d005
RK
2259}
2260
1b1f3d09
RK
2261#identity-box[sharing="screen"] > #sharing-icon {
2262 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
c4460289 2263
1b1f3d09 2264}
d23bf94a 2265
1b1f3d09
RK
2266#identity-box[sharing] > #sharing-icon {
2267 display: -moz-box;
2268 animation-delay: -1.5s;
d23bf94a
RK
2269}
2270
1b1f3d09
RK
2271#identity-box[sharing] > #identity-icon,
2272#sharing-icon {
2273 animation: 3s linear identity-box-sharing-icon-pulse infinite;
d23bf94a
RK
2274}
2275
1b1f3d09
RK
2276@keyframes identity-box-sharing-icon-pulse {
2277/* This should remain identical to tab-sharing-icon-pulse in tabs.inc.css */
2278 0%, 16.66%, 83.33%, 100% {
2279 opacity: 0;
2280 }
2281 33.33%, 66.66% {
2282 opacity: 1;
2283 }
d23bf94a 2284}
1b1f3d09
RK
2285
2286/* TRACKING PROTECTION ICON */
2287
2288#tracking-protection-icon {
07296beb 2289 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled);
1b1f3d09 2290 margin-inline-end: 0;
d23bf94a
RK
2291}
2292
07296beb
RK
2293#tracking-protection-icon[state="loaded-tracking-content"] {
2294 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled);
2295}
2296
1b1f3d09
RK
2297#tracking-protection-icon[animate] {
2298 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2299}
d23bf94a 2300
1b1f3d09
RK
2301#tracking-protection-icon:not([state]) {
2302 margin-inline-end: -18px;
2303 pointer-events: none;
2304 opacity: 0;
2305 /* Only animate the shield in, when it disappears hide it immediately. */
2306 transition: none;
d23bf94a
RK
2307}
2308
07296beb 2309#urlbar[pageproxystate="invalid"] > #identity-box > #extension-icon,
1b1f3d09
RK
2310#urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2311 visibility: collapse;
c4460289
RK
2312}
2313
07296beb 2314/* CONNECTION ICON, EXTENSION ICON */
1b1f3d09 2315
07296beb
RK
2316#connection-icon,
2317#extension-icon {
1b1f3d09
RK
2318 width: 16px;
2319 height: 16px;
1b1f3d09 2320 visibility: collapse;
c4460289 2321}
1b1f3d09 2322
07296beb
RK
2323#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2324#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
2325#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2326 list-style-image: url(chrome://browser/skin/connection-secure.svg);
2327 visibility: visible;
2328}
2329
2330#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2331#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2332#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon,
2333#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
2334 list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
2335 visibility: visible;
2336}
2337
2338#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2339#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2340 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
2341 visibility: visible;
2342}
2343
2344#identity-box.extensionPage > #extension-icon {
2345 list-style-image: url(chrome://browser/skin/controlcenter/extension.svg);
2346 visibility: visible;
2347}
2348
1b1f3d09
RK
2349/* REMOTE CONTROL ICON */
2350
2351#main-window[remotecontrol] #remote-control-icon {
9a225e4b 2352 list-style-image: url(chrome://browser/content/static-robot.png);
1b1f3d09
RK
2353 visibility: visible;
2354 width: 16px;
2355 height: 16px;
2356 margin-inline-start: 2px;
20752032 2357}
1b1f3d09
RK
2358
2359/* === END identity-block.inc.css === */
2360
2361#page-proxy-favicon {
2362 -moz-image-region: rect(0, 16px, 16px, 0);
20752032 2363}
1b1f3d09
RK
2364
2365window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2366/* margin-inline-end: 1px;*/
c4460289
RK
2367}
2368
1b1f3d09
RK
2369#identity-box:hover > #page-proxy-favicon {
2370 -moz-image-region: rect(0, 32px, 16px, 16px);
c4460289
RK
2371}
2372
1b1f3d09
RK
2373#identity-box:hover:active > #page-proxy-favicon,
2374#identity-box[open=true] > #page-proxy-favicon {
2375 -moz-image-region: rect(0, 48px, 16px, 32px);
c4460289
RK
2376}
2377
1b1f3d09
RK
2378#identity-box:hover {
2379 background-color: #FFCF00;
2380 color: #000000;
c4460289
RK
2381}
2382
1b1f3d09
RK
2383#identity-box:hover:active,
2384#identity-box[open=true] {
2385 background-color: #FF9F00;
2386 color: #000000;
c4460289 2387}
1b1f3d09
RK
2388
2389#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2390#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2391#urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2392 background-color: #A09090;
2393 color: #000000;
c4460289
RK
2394}
2395
1b1f3d09
RK
2396#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover > #identity-icon-labels,
2397#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active > #identity-icon-labels,
2398#urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] > #identity-icon-labels {
2399 color: #000000;
c4460289
RK
2400}
2401
1b1f3d09
RK
2402#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2403#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2404#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2405 background-color: #008484;
2406 color: #000000;
c4460289
RK
2407}
2408
1b1f3d09
RK
2409#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover > #identity-icon-labels,
2410#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active > #identity-icon-labels,
2411#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] > #identity-icon-labels {
2412 color: #000000;
e2734cc7
RK
2413}
2414
1b1f3d09
RK
2415#identity-box:hover > image,
2416#identity-box:hover:active > image,
2417#identity-box[open=true] > image {
2418 filter: url(chrome://global/skin/filters.svg#active-icon-state);
e2734cc7
RK
2419}
2420
1b1f3d09 2421/* autocomplete */
319c6529 2422
1b1f3d09
RK
2423/* === BEGIN autocomplete.inc.css === */
2424
2425#PopupAutoComplete > richlistbox > richlistitem {
2426 height: 20px;
2427 min-height: 20px;
2428 border: 0;
2429 border-radius: 0;
2430 padding: 0px 1px 0px 1px;
acb0e9b8 2431}
319c6529 2432
1b1f3d09
RK
2433#PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon {
2434 margin-inline-start: 4px;
2435 margin-inline-end: 0;
acb0e9b8 2436}
319c6529 2437
1b1f3d09
RK
2438#PopupAutoComplete > richlistbox > richlistitem > .ac-title {
2439 font: icon;
2440 margin-inline-start: 4px;
71bac478
RK
2441}
2442
1b1f3d09
RK
2443#PopupAutoComplete > richlistbox {
2444 padding: 0;
71bac478
RK
2445}
2446
1b1f3d09
RK
2447/* Login form autocompletion */
2448#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
2449 display: initial;
2450 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
9a225e4b
RK
2451 -moz-context-properties: fill;
2452 fill: #A09090;
acb0e9b8 2453}
319c6529 2454
1b1f3d09 2455#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] {
9a225e4b 2456 fill: #FFCF00;
1b1f3d09 2457}
c0f6797e 2458
1b1f3d09
RK
2459/* Insecure field warning */
2460#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
2461 background-color: var(--arrowpanel-dimmed);
2462 border-bottom: 1px solid var(--panel-separator-color);
2463 padding-bottom: 4px;
2464 padding-top: 4px;
2465}
2466
2467#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] {
2468 background-color: var(--arrowpanel-dimmed-further);
2469 color: #FFCF00;
acb0e9b8 2470}
319c6529 2471
1b1f3d09
RK
2472#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title {
2473 color: #A09090;
2474 font-size: 1em;
acb0e9b8 2475}
2476
1b1f3d09
RK
2477#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] > .ac-title {
2478 color: inherit;
acb0e9b8 2479}
319c6529 2480
1b1f3d09
RK
2481#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon {
2482 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
acb0e9b8 2483}
319c6529 2484
1b1f3d09
RK
2485/* === END autocomplete.inc.css === */
2486
2487#PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
2488 border-top: 1px solid #A09090;
acb0e9b8 2489}
2490
1b1f3d09
RK
2491#treecolAutoCompleteImage {
2492 max-width: 36px;
2493}
319c6529 2494
1b1f3d09
RK
2495/*
2496.autocomplete-richlistbox {
2497 padding: 4px;
bcb9d005
RK
2498}
2499
1b1f3d09
RK
2500.autocomplete-richlistitem {
2501 height: 30px;
2502 min-height: 30px;
2503 font: message-box;
2504 border-radius: 2px;
2505 border: 1px solid transparent;
2506}
2507*/
2508.ac-title {
2509 font-size: 14px;
bcb9d005
RK
2510}
2511
1b1f3d09
RK
2512.ac-tags {
2513 font-size: 12px;
2514}
2515/*
2516html|span.ac-tag {
2517 border-radius: 2px;
2518 border: 1px solid transparent;
2519 padding: 0 1px;
bcb9d005 2520}
1b1f3d09 2521*/
bcb9d005 2522
1b1f3d09
RK
2523.ac-separator,
2524.ac-url,
2525.ac-action {
2526 font-size: 12px;
acb0e9b8 2527}
319c6529 2528
1b1f3d09
RK
2529html|span.ac-emphasize-text-title,
2530html|span.ac-emphasize-text-tag,
2531html|span.ac-emphasize-text-url {
2532 font-weight: 600;
acb0e9b8 2533}
319c6529 2534
1b1f3d09
RK
2535.ac-type-icon[type=bookmark] {
2536 list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
589b5528
RK
2537}
2538
1b1f3d09
RK
2539.ac-type-icon[type=bookmark][selected][current] {
2540/* list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
589b5528
RK
2541}
2542
1b1f3d09
RK
2543.ac-result-type-bookmark {
2544 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2545 -moz-image-region: rect(0px 16px 16px 0px);
2546 width: 16px;
2547 height: 16px;
bcb9d005
RK
2548}
2549
1b1f3d09
RK
2550richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark {
2551/* -moz-image-region: rect(0px 48px 16px 32px);*/
bcb9d005
RK
2552}
2553
1b1f3d09
RK
2554.ac-type-icon[type=keyword],
2555.ac-site-icon[type=searchengine] {
2556 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg");
2557 context-properties: fill;
2558 fill: #FFCF00;
fe524e0c
RK
2559}
2560
1b1f3d09
RK
2561.ac-type-icon[type=keyword][selected],
2562.ac-site-icon[type=searchengine][selected] {
2563 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg");
2564 context-properties: fill;
2565 fill: #000000;
2566}
b36fc72e 2567
1b1f3d09
RK
2568.ac-result-type-tag {
2569 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2570 width: 16px;
2571 height: 16px;
e20c83c3
RK
2572}
2573
1b1f3d09
RK
2574.ac-type-icon[type=switchtab],
2575.ac-type-icon[type=remotetab] {
2576 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
acb0e9b8 2577}
2578
1b1f3d09
RK
2579.ac-type-icon[type=switchtab][selected],
2580.ac-type-icon[type=remotetab][selected] {
2581 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
acb0e9b8 2582}
319c6529 2583
1b1f3d09
RK
2584.autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2585.autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2586{
2587 color: #8050B0;
2588 font-size: smaller;
2589}
6dc70335 2590
1b1f3d09
RK
2591.autocomplete-treebody::-moz-tree-cell(suggesthint) {
2592 border-top: 1px solid #9C9CFF;
024a65e9 2593}
1b1f3d09
RK
2594
2595/* combined go/reload/stop button in location bar */
2596
2597#urlbar-go-button,
2598#reload-button,
2599#stop-button {
2600 border-style: none;
2601 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2602/* margin: 0 9px; */
2603 margin-inline-start: 0px;
2604 border-inline-start: 1px solid var(--urlbar-separator-color);
2605 border-image: linear-gradient(transparent 15%,
2606 var(--urlbar-separator-color) 15%,
2607 var(--urlbar-separator-color) 85%,
2608 transparent 85%);
2609 border-image-slice: 1;
368d0b7f
RK
2610}
2611
1b1f3d09
RK
2612/* XXX: temporary for Photon preview changes */
2613#reload-button,
2614#stop-button {
2615 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
acb0e9b8 2616}
319c6529 2617
1b1f3d09
RK
2618#urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2619 border-top-left-radius: 0px;
2620 border-bottom-left-radius: 0px;
57fc408c
RK
2621}
2622
1b1f3d09
RK
2623#urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2624 border-top-right-radius: 0px;
2625 border-bottom-right-radius: 0px;
57fc408c
RK
2626}
2627
1b1f3d09
RK
2628#urlbar > toolbarbutton:not([disabled=true]):active:hover,
2629#reload-button:not(:hover) {
2630 border-inline-start-style: none;
2631 padding-inline-start: 3px;
57fc408c
RK
2632}
2633
1b1f3d09
RK
2634#reload-button,
2635#reload-button {
2636 -moz-image-region: rect(0px, 14px, 14px, 0px);
57fc408c
RK
2637}
2638
1b1f3d09
RK
2639#reload-button[disabled=true],
2640#reload-button[disabled=true] {
2641 -moz-image-region: rect(28px, 14px, 42px, 0px);
acb0e9b8 2642}
2643
1b1f3d09
RK
2644#reload-button:not([disabled=true]):hover,
2645#reload-button:not([disabled=true]):hover {
2646 -moz-image-region: rect(14px, 14px, 28px, 0px);
acb0e9b8 2647}
2648
1b1f3d09
RK
2649#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
2650#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2651 transform: scaleX(-1);
acb0e9b8 2652}
319c6529 2653
1b1f3d09
RK
2654#urlbar-go-button {
2655 -moz-image-region: rect(0, 42px, 14px, 28px);
d533ec21
RK
2656}
2657
1b1f3d09
RK
2658#urlbar-go-button:hover {
2659 -moz-image-region: rect(14px, 42px, 28px, 28px);
acb0e9b8 2660}
2661
1b1f3d09
RK
2662#urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2663 transform: scaleX(-1);
c0f6797e
RK
2664}
2665
1b1f3d09
RK
2666#stop-button,
2667#stop-button {
2668 -moz-image-region: rect(0px, 28px, 14px, 14px);
613daf44 2669}
2670
1b1f3d09
RK
2671#stop-button:hover,
2672#stop-button:hover {
2673 -moz-image-region: rect(14px, 28px, 28px, 14px);
db1c5db1
RK
2674}
2675
1b1f3d09
RK
2676@media (min-resolution: 1.1dppx) {
2677 #reload-button,
2678 #stop-button,
2679 #urlbar-go-button,
2680 #reload-button,
2681 #stop-button {
2682 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2683 }
2684
2685 #reload-button > .toolbarbutton-icon,
2686 #stop-button > .toolbarbutton-icon,
2687 #urlbar-go-button > .toolbarbutton-icon,
2688 #reload-button > .toolbarbutton-icon,
2689 #stop-button > .toolbarbutton-icon {
2690 width: 14px;
2691 }
2692
2693 #urlbar-go-button {
2694 -moz-image-region: rect(0, 84px, 28px, 56px);
2695 }
2696
2697 #urlbar-go-button:hover {
2698 -moz-image-region: rect(28px, 84px, 56px, 56px);
2699 }
2700
2701 #urlbar-go-button:hover:active {
2702 -moz-image-region: rect(56px, 84px, 84px, 56px);
db1c5db1 2703 }
1b1f3d09
RK
2704
2705 #reload-button,
2706 #reload-button {
2707 -moz-image-region: rect(0, 28px, 28px, 0);
db1c5db1 2708 }
db1c5db1 2709
1b1f3d09
RK
2710 #reload-button:not([disabled]):hover,
2711 #reload-button:not([disabled]):hover {
2712 -moz-image-region: rect(28px, 28px, 56px, 0);
2713 }
db1c5db1 2714
1b1f3d09
RK
2715 #reload-button:not([disabled]):hover:active,
2716 #reload-button:not([disabled]):hover:active {
2717 -moz-image-region: rect(56px, 28px, 84px, 0);
2718 }
db1c5db1 2719
1b1f3d09
RK
2720 #stop-button,
2721 #stop-button {
2722 -moz-image-region: rect(0, 56px, 28px, 28px);
2723 }
db1c5db1 2724
1b1f3d09
RK
2725 #stop-button:not([disabled]):hover,
2726 #stop-button:not([disabled]):hover {
2727 -moz-image-region: rect(28px, 56px, 56px, 28px);
2728 }
db1c5db1 2729
1b1f3d09
RK
2730 #stop-button:hover:active,
2731 #stop-button:hover:active {
2732 -moz-image-region: rect(56px, 56px, 84px, 28px);
2733 }
db1c5db1
RK
2734}
2735
1b1f3d09 2736/* popup blocker button */
d533ec21 2737
1b1f3d09
RK
2738#page-report-button {
2739 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2740 -moz-image-region: rect(0, 16px, 16px, 0);
d533ec21
RK
2741}
2742
1b1f3d09
RK
2743#page-report-button:hover ,
2744#page-report-button:hover:active,
2745#page-report-button[open="true"] {
2746 -moz-image-region: rect(0, 32px, 16px, 16px);
b1dfcf32
RK
2747}
2748
1b1f3d09 2749/* Reader mode button */
b1dfcf32 2750
1b1f3d09
RK
2751#reader-mode-button {
2752 list-style-image: url("chrome://browser/skin/readerMode.svg");
2753 -moz-image-region: rect(0, 16px, 16px, 0);
b1dfcf32
RK
2754}
2755
1b1f3d09
RK
2756#reader-mode-button:hover,
2757#reader-mode-button[readeractive]:hover {
2758 -moz-image-region: rect(0, 32px, 16px, 16px);
b1dfcf32
RK
2759}
2760
1b1f3d09
RK
2761#reader-mode-button:hover:active,
2762#reader-mode-button[readeractive] {
2763 -moz-image-region: rect(0, 48px, 16px, 32px);
b1dfcf32
RK
2764}
2765
1b1f3d09 2766/* social share panel */
b1dfcf32 2767
1b1f3d09 2768/* === BEGIN social.inc.css === */
b1dfcf32 2769
1b1f3d09
RK
2770#manage-share-providers {
2771 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
2772 -moz-image-region: rect(0, 468px, 18px, 450px);
1cf9b082
RK
2773}
2774
1b1f3d09
RK
2775#manage-share-providers > .toolbarbutton-icon {
2776 min-height: 18px;
2777 min-width: 18px;
613daf44 2778}
319c6529 2779
1b1f3d09
RK
2780.social-panel > .panel-arrowcontainer > .panel-arrowcontent {
2781 padding: 0;
2782}
2783/* fixup corners for share panel */
2784.social-panel > .social-panel-frame {
2785 border-radius: inherit;
613daf44 2786}
319c6529 2787
1b1f3d09 2788/* === END social.inc.css === */
85b6b932 2789
1b1f3d09
RK
2790.social-panel-frame {
2791 border-radius: inherit;
85b6b932
RK
2792}
2793
1b1f3d09
RK
2794.social-share-frame {
2795 min-width: 756px;
2796 height: 150px;
613daf44 2797}
319c6529 2798
1b1f3d09
RK
2799#share-container {
2800 min-width: 756px;
2801 background-color: white;
2802 background-repeat: no-repeat;
2803 background-position: center center;
c0f6797e 2804}
1b1f3d09
RK
2805#share-container[loading] {
2806 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
b1dfcf32 2807}
1b1f3d09
RK
2808#share-container > browser {
2809 transition: opacity 150ms ease-in-out;
2810 opacity: 1;
024a65e9 2811}
1b1f3d09
RK
2812#share-container[loading] > browser {
2813 opacity: 0;
b1dfcf32
RK
2814}
2815
1b1f3d09
RK
2816.social-share-toolbar {
2817 border-bottom: 1px solid #9C9CFF;
2818 padding: 2px;
1cf9b082
RK
2819}
2820
1b1f3d09 2821#social-share-provider-buttons {
c0f6797e 2822 padding: 0;
1b1f3d09 2823 margin: 0;
c0f6797e
RK
2824}
2825
1b1f3d09
RK
2826.share-provider-button {
2827 padding: 5px;
2828 margin: 2px;
1cf9b082
RK
2829}
2830
1b1f3d09
RK
2831.share-provider-button > .toolbarbutton-text {
2832 display: none;
c0f6797e 2833}
1b1f3d09
RK
2834.share-provider-button > .toolbarbutton-icon {
2835 width: 16px;
2836 min-height: 16px;
2837 max-height: 16px;
c0f6797e
RK
2838}
2839
1b1f3d09
RK
2840#social-share-panel {
2841 min-height: 100px;
2842 min-width: 766px;
93c91f62
RK
2843}
2844
1b1f3d09
RK
2845#share-container,
2846.social-share-frame {
2847 border-top-left-radius: 0;
2848 border-bottom-left-radius: inherit;
2849 border-top-right-radius: 0;
2850 border-bottom-right-radius: inherit;
93c91f62
RK
2851}
2852
1b1f3d09
RK
2853#social-share-panel > .social-share-toolbar {
2854 border-top-left-radius: inherit;
2855 border-top-right-radius: inherit;
93c91f62
RK
2856}
2857
1b1f3d09
RK
2858#social-share-provider-buttons {
2859 border-top-left-radius: inherit;
2860 border-top-right-radius: inherit;
93c91f62
RK
2861}
2862
1b1f3d09
RK
2863/* bookmarks menu-button */
2864
2865#bookmarks-menu-button.bookmark-item {
2866 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2867 -moz-image-region: rect(0px 16px 16px 0px);
93c91f62
RK
2868}
2869
1b1f3d09
RK
2870#bookmarks-menu-button.bookmark-item[starred] {
2871 -moz-image-region: rect(0px 32px 16px 16px);
93c91f62
RK
2872}
2873
1b1f3d09
RK
2874#nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2875 padding-top: 2px;
2876 padding-bottom: 2px;
c0f6797e
RK
2877}
2878
1b1f3d09
RK
2879#BMB_bookmarksPopup[side="top"],
2880#BMB_bookmarksPopup[side="bottom"] {
2881 margin-left: -20px;
2882 margin-right: -20px;
c0f6797e
RK
2883}
2884
1b1f3d09
RK
2885#BMB_bookmarksPopup[side="left"],
2886#BMB_bookmarksPopup[side="right"] {
2887 margin-top: -20px;
2888 margin-bottom: -20px;
613daf44 2889}
319c6529 2890
1b1f3d09 2891/* bookmarking panel */
c0f6797e 2892
1b1f3d09
RK
2893#editBookmarkPanelStarIcon {
2894 list-style-image: url("chrome://browser/skin/places/starred48.png");
2895 width: 48px;
2896 height: 48px;
c0f6797e
RK
2897}
2898
1b1f3d09
RK
2899#editBookmarkPanelStarIcon[unstarred] {
2900 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
c0f6797e
RK
2901}
2902
1b1f3d09
RK
2903#editBookmarkPanelTitle {
2904 font-size: 130%;
c0f6797e 2905}
c0f6797e 2906
1b1f3d09
RK
2907#editBookmarkPanelHeader,
2908#editBookmarkPanelContent {
2909 margin-bottom: .5em;
c0f6797e
RK
2910}
2911
1b1f3d09
RK
2912/* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2913#editBMPanel_folderTree {
2914 min-width: 27em;
fa703ff4
RK
2915}
2916
1b1f3d09
RK
2917/* ::::: content area ::::: */
2918
2919/* === BEGIN sidebar.inc.css === */
2920
2921#sidebar-box {
2922 --icon-fill: #FFCF00;
2923 --header-background-color: #9C9CFF;
2924 --header-background-color-hover: #FFCF00;
2925 --title-font-size: 13px;
2926
2927 background-color: #9C9CFF;
c0f6797e
RK
2928 color: #000000;
2929}
2930
1b1f3d09
RK
2931#sidebar-header {
2932 color: #000000;
2933 padding: 2px;
024a65e9
RK
2934}
2935
1b1f3d09
RK
2936#sidebar-splitter {
2937 margin-inline-start: 0;
024a65e9 2938}
c0f6797e 2939
1b1f3d09
RK
2940#sidebar-splitter:-moz-locale-dir(ltr),
2941#sidebar:-moz-locale-dir(ltr) {
2942 border-radius: 0 5px 0 0;
c0f6797e 2943}
c0f6797e 2944
1b1f3d09
RK
2945#sidebar-splitter:-moz-locale-dir(rtl),
2946#sidebar:-moz-locale-dir(rtl) {
2947 border-radius: 5px 0 0 0;
2948}
db1c5db1 2949
1b1f3d09
RK
2950#sidebar-throbber[loading="true"] {
2951 list-style-image: url("chrome://global/skin/icons/loading.png");
2952}
db1c5db1 2953
1b1f3d09
RK
2954@media (min-resolution: 2dppx) {
2955 .sidebar-throbber[loading="true"],
2956 #sidebar-throbber[loading="true"] {
2957 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
2958 width: 16px;
db1c5db1 2959 }
43371c9b
RK
2960}
2961
1b1f3d09
RK
2962#sidebar-title {
2963 padding-inline-start: 0px;
2964}
d23bf94a 2965
1b1f3d09
RK
2966#sidebar-title {
2967 margin: 0;
2968 padding: 0;
2969 padding-inline-start: 8px;
2970 padding-inline-end: 4px;
d23bf94a
RK
2971}
2972
1b1f3d09
RK
2973#sidebar-switcher-arrow,
2974#sidebar-close > .toolbarbutton-icon {
2975 -moz-context-properties: fill;
d23bf94a 2976 fill: currentColor;
1b1f3d09 2977 opacity: 0.8;
d23bf94a
RK
2978}
2979
1b1f3d09
RK
2980#sidebar-switcher-arrow {
2981/* list-style-image: url(chrome://browser/skin/arrow-dropdown.svg);*/
2982 list-style-image: url(chrome://global/skin/arrow/arrow-down.gif);
2983 width: 12px;
2984 height: 12px;
d23bf94a
RK
2985}
2986
1b1f3d09
RK
2987#sidebar-switcher-arrow:hover {
2988 list-style-image: url(chrome://global/skin/arrow/arrow-down-hover.gif);
1cf9b082
RK
2989}
2990
1b1f3d09
RK
2991#sidebar-header > .close-icon {
2992/* padding: 4px 2px;
2993 margin: 0;
2994 border: none;*/
2995 list-style-image: url("chrome://global/skin/icons/close-button.gif");
613daf44 2996}
2997
1b1f3d09
RK
2998#sidebar-header > .close-icon:hover,
2999#sidebar-header > .close-icon:hover:active {
3000 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
319c6529 3001}
acb0e9b8 3002
1b1f3d09
RK
3003#sidebar-close {
3004 -moz-appearance: none;
3005 list-style-image: url(chrome://browser/skin/sidebar/close.svg);
3006 margin: 0;
3007 padding: 4px;
3008 border-radius: 4px;
acb0e9b8 3009}
1b1f3d09
RK
3010/*
3011#sidebar-switcher-target {
3012 -moz-appearance: none;
3013 color: inherit;
3014 margin-inline-end: 4px;
3015 border-radius: 4px;
3016 border: 1px solid transparent;
3017 padding: 2px 4px;
acb0e9b8 3018}
319c6529 3019
1b1f3d09
RK
3020#sidebar-switcher-target:hover,
3021#sidebar-close:hover {
3022 background: hsla(240, 5%, 5%, 0.05);
710194f1
RK
3023}
3024
1b1f3d09
RK
3025#sidebar-switcher-target:hover {
3026 border-color: rgba(0, 0, 0, 0.2);
3027}
710194f1 3028
1b1f3d09
RK
3029#sidebar-close:hover:active,
3030#sidebar-switcher-target:hover:active,
3031#sidebar-switcher-target.active {
3032 background: hsla(240, 5%, 5%, 0.1);
c0f6797e
RK
3033}
3034
1b1f3d09
RK
3035#sidebar-switcher-target:hover:active,
3036#sidebar-switcher-target.active {
3037 border-color: rgba(0, 0, 0, 0.25);
3038}
3039*/
3040#sidebarMenu-popup .subviewbutton {
3041 min-width: 190px;
3042}
b7f3670c 3043
1b1f3d09
RK
3044#sidebar-extensions:empty + toolbarseparator {
3045 display: none;
3046}
c0f6797e 3047
1b1f3d09
RK
3048/* Allow room for the checkbox drawn as a background image at the start of the toolbarbutton */
3049#sidebarMenu-popup .subviewbutton-iconic > .toolbarbutton-icon {
3050 padding-inline-start: 16px;
3051}
3052#sidebarMenu-popup .subviewbutton-iconic > .toolbarbutton-text {
3053 padding-inline-start: 0;
c0f6797e
RK
3054}
3055
1b1f3d09
RK
3056#sidebar-box[sidebarcommand="viewWebPanelsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
3057 list-style-image: url(chrome://mozapps/skin/places/defaultFavicon.svg);
acb0e9b8 3058}
319c6529 3059
1b1f3d09
RK
3060#sidebar-switcher-bookmarks > .toolbarbutton-icon,
3061#sidebar-box[sidebarcommand="viewBookmarksSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
3062/* list-style-image: url(chrome://browser/skin/bookmark.svg);
3063 -moz-context-properties: fill;
3064 fill: currentColor;
3065 opacity: 0.8;*/
3066 list-style-image: url(chrome://browser/skin/places/bookmark.png);
3067 -moz-image-region: rect(0px 16px 16px 0px);
acb0e9b8 3068}
319c6529 3069
1b1f3d09
RK
3070#sidebar-switcher-history > .toolbarbutton-icon,
3071#sidebar-box[sidebarcommand="viewHistorySidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
3072/* list-style-image: url(chrome://browser/skin/history.svg);
3073 -moz-context-properties: fill;
3074 fill: currentColor;
3075 opacity: 0.8;*/
3076 list-style-image: url(chrome://browser/skin/places/history.png);
c0f6797e
RK
3077}
3078
1b1f3d09
RK
3079#sidebar-switcher-tabs > .toolbarbutton-icon,
3080#sidebar-box[sidebarcommand="viewTabsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
9a225e4b 3081 list-style-image: url(chrome://browser/skin/synced-tabs.svg);
1b1f3d09
RK
3082 -moz-context-properties: fill;
3083 fill: currentColor;
9a225e4b 3084/* opacity: 0.8;*/
acb0e9b8 3085}
319c6529 3086
1b1f3d09
RK
3087/* === END sidebar.inc.css === */
3088
3089#sidebar {
3090 background-color: #000000;
acb0e9b8 3091}
3092
1b1f3d09
RK
3093.browserContainer > findbar {
3094/*
3095 background-color: -moz-dialog;
3096 color: -moz-DialogText;
3097*/
acb0e9b8 3098}
319c6529 3099
1b1f3d09
RK
3100/* Tabstrip */
3101
3102#TabsToolbar {
3103 min-height: 0;
3104 padding: 0;
3105 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
acb0e9b8 3106}
3107
1b1f3d09
RK
3108#TabsToolbar .toolbar-holder {
3109 background-color: #000000; /* correct effect of being an actual toolbar */
c0f6797e
RK
3110}
3111
1b1f3d09
RK
3112#main-window[disablechrome] #TabsToolbar,
3113#TabsToolbar[tabsontop="false"] {
3114 border-bottom: 1px solid #008484;
acb0e9b8 3115}
319c6529 3116
1b1f3d09
RK
3117/* === BEGIN tabs.inc.css === */
3118
3119:root {
3120 /* --tab-toolbar-navbar-overlap: 1px; */
3121 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
3122 /* --tab-min-height: 31px; */
3123}
3124#TabsToolbar {
3125 /* --tab-stroke-background-size: auto 100%; */
acb0e9b8 3126}
319c6529 3127
1b1f3d09
RK
3128.tabbrowser-tab,
3129.tabs-newtab-button,
3130#TabsToolbar > #new-tab-button {
3131 margin-top: 0px;
c0f6797e
RK
3132}
3133
1b1f3d09
RK
3134.tabbrowser-tab {
3135 padding: 1px 4px 2px;
c0f6797e
RK
3136}
3137
1b1f3d09
RK
3138.tabbrowser-tab:first-of-type {
3139 margin-inline-start: 2px;
c0f6797e
RK
3140}
3141
1b1f3d09
RK
3142.tabs-newtab-button,
3143#TabsToolbar > #new-tab-button,
3144#TabsToolbar > toolbarpaletteitem > #new-tab-button,
3145#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3146 border-radius: 8px 8px 0px 0px;
3147 margin-inline-start: 0;
acb0e9b8 3148}
3149
1b1f3d09
RK
3150.tabs-newtab-button:not(:hover),
3151#TabsToolbar > #new-tab-button:not(:hover),
3152#TabsToolbar > toolbarpaletteitem > #new-tab-button,
3153#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3154 background-color: #C09070;
acb0e9b8 3155}
319c6529 3156
1b1f3d09
RK
3157/* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
3158.tabbrowser-tab[visuallyselected=true] {
3159/* position: relative;
3160 z-index: 2;*/
7c1e433b
RK
3161}
3162
1b1f3d09 3163.tab-background-middle {
acb0e9b8 3164}
319c6529 3165
1b1f3d09 3166.tab-content {
acb0e9b8 3167}
319c6529 3168
1b1f3d09 3169.tab-content[pinned] {
acb0e9b8 3170}
319c6529 3171
1b1f3d09
RK
3172.tab-throbber,
3173.tab-icon-image,
3174.tab-sharing-icon-overlay,
3175.tab-icon-sound,
3176.tab-close-button {
acb0e9b8 3177}
319c6529 3178
1b1f3d09
RK
3179.tab-throbber,
3180.tab-sharing-icon-overlay,
3181.tab-icon-image {
3182 height: 16px;
3183 width: 16px;
3184 margin-inline-end: 3px;
acb0e9b8 3185}
3186
1b1f3d09
RK
3187.tab-icon-image {
3188 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
acb0e9b8 3189}
319c6529 3190
1b1f3d09
RK
3191.tab-icon-image[sharing]:not([selected]),
3192.tab-sharing-icon-overlay {
3193 animation: 3s linear tab-sharing-icon-pulse infinite;
7c1e433b
RK
3194}
3195
1b1f3d09
RK
3196@keyframes tab-sharing-icon-pulse {
3197/* This should remain identical to identity-box-sharing-icon-pulse in identity-block.inc.css */
3198 0%, 16.66%, 83.33%, 100% {
3199 opacity: 0;
3200 }
3201 33.33%, 66.66% {
3202 opacity: 1;
3203 }
acb0e9b8 3204}
3205
1b1f3d09
RK
3206.tab-icon-image[sharing]:not([selected]) {
3207 animation-delay: -1.5s;
613daf44 3208}
319c6529 3209
1b1f3d09
RK
3210.tab-sharing-icon-overlay {
3211 /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
3212 margin-inline-start: -22px;
319c6529 3213 position: relative;
9a225e4b
RK
3214 -moz-context-properties: fill;
3215 fill: #FF0000;
613daf44 3216}
319c6529 3217
1b1f3d09
RK
3218.tab-sharing-icon-overlay[sharing="camera"] {
3219 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
613daf44 3220}
3221
1b1f3d09
RK
3222.tab-sharing-icon-overlay[sharing="microphone"] {
3223 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
3224}
a5cb6e53 3225
1b1f3d09
RK
3226.tab-sharing-icon-overlay[sharing="screen"] {
3227 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
db1c5db1
RK
3228}
3229
1b1f3d09 3230.tab-icon-overlay {
d23bf94a
RK
3231 width: 16px;
3232 height: 16px;
1b1f3d09
RK
3233 margin-top: -8px;
3234 margin-inline-start: -15px;
3235 margin-inline-end: -1px;
3236 position: relative;
d23bf94a
RK
3237}
3238
1b1f3d09
RK
3239.tab-icon-overlay[crashed] {
3240 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
db1c5db1
RK
3241}
3242
1b1f3d09
RK
3243.tab-icon-overlay[soundplaying],
3244.tab-icon-overlay[muted]:not([crashed]),
3245.tab-icon-overlay[blocked]:not([crashed]) {
3246 border-radius: 10px;
db1c5db1
RK
3247}
3248
1b1f3d09
RK
3249.tab-icon-overlay[soundplaying]:hover,
3250.tab-icon-overlay[muted]:hover,
3251.tab-icon-overlay[blocked]:not([crashed]):hover {
3252 background-color: #FFCF00;
db1c5db1
RK
3253}
3254
1b1f3d09
RK
3255.tab-icon-overlay[soundplaying] {
3256 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
7c0a01f2
RK
3257}
3258
1b1f3d09
RK
3259.tab-icon-overlay[muted]:not([crashed]) {
3260 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
3261}
d23bf94a 3262
1b1f3d09
RK
3263.tab-icon-overlay[blocked]:not([crashed]) {
3264 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-blocked");
7c0a01f2
RK
3265}
3266
1b1f3d09
RK
3267#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not([selected]):not(:hover),
3268.tab-icon-overlay[soundplaying][selected]:-moz-lwtheme-brighttext:not(:hover) {
3269 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
7c0a01f2
RK
3270}
3271
1b1f3d09
RK
3272#TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not([selected]):not(:hover),
3273.tab-icon-overlay[mouted][selected]:-moz-lwtheme-brighttext:not(:hover) {
3274 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
7c0a01f2
RK
3275}
3276
1b1f3d09
RK
3277#TabsToolbar[brighttext] .tab-icon-overlay[blocked]:not([crashed]):not([selected]):not(:hover),
3278.tab-icon-overlay[blocked][selected]:-moz-lwtheme-brighttext:not(:hover) {
3279 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-blocked");
7c0a01f2
RK
3280}
3281
1b1f3d09
RK
3282.tab-throbber[busy] {
3283 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
acb0e9b8 3284}
319c6529 3285
1b1f3d09
RK
3286.tab-throbber[progress] {
3287 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
a40f6a79
RK
3288}
3289
1b1f3d09
RK
3290@media (min-resolution: 1.1dppx) {
3291 .tab-throbber[busy] {
3292 list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
3293 }
3294
3295 .tab-throbber[progress] {
3296 list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
3297 }
82b4252f
RK
3298}
3299
1b1f3d09
RK
3300.tab-throbber[pinned],
3301.tab-icon-image[pinned] {
3302 margin-inline-start: 2px;
3303 margin-inline-end: 2px;
acb0e9b8 3304}
3305
1b1f3d09
RK
3306.tab-label {
3307 /* this needs to add up to the 16px of the icon image */
3308 height: 12px;
3309 margin-top: 2px !important;
3310 margin-bottom: 2px !important;
acb0e9b8 3311}
3312
1b1f3d09
RK
3313.tab-icon-sound {
3314 margin-inline-start: 4px;
3315 width: 16px;
3316 height: 16px;
3317 padding: 0;
c1d2ce3e
RK
3318}
3319
1b1f3d09
RK
3320.tab-icon-sound[soundplaying],
3321.tab-icon-sound[muted],
3322.tab-icon-sound[blocked] {
9a225e4b
RK
3323 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-playing.svg);
3324 -moz-context-properties: fill;
1b1f3d09 3325 fill: currentColor;
d23bf94a
RK
3326}
3327
1b1f3d09 3328.tab-icon-sound[muted] {
9a225e4b 3329 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-muted.svg);
9168a62c
RK
3330}
3331
1b1f3d09 3332.tab-icon-sound[blocked] {
9a225e4b 3333 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-blocked.svg);
82b4252f
RK
3334}
3335
1b1f3d09
RK
3336.tab-close-button {
3337 margin-top: 1px;
3338 padding: 0;
d23bf94a
RK
3339}
3340
1b1f3d09
RK
3341.tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover),
3342.tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
3343 transition: opacity .3s linear var(--soundplaying-removal-delay);
3344 opacity: 0;
cae267ab
RK
3345}
3346
1b1f3d09
RK
3347.tab-background,
3348.tabs-newtab-button {
3349 /* overlap the tab curves */
f993773d
RK
3350}
3351
1b1f3d09 3352.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
f993773d
RK
3353}
3354
1b1f3d09
RK
3355/* Tab Overflow */
3356.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
3357.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
319c6529 3358}
acb0e9b8 3359
1b1f3d09
RK
3360.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3361.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
db1c5db1 3362}
c9b0a396 3363
1b1f3d09 3364.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
1cf9b082
RK
3365}
3366
1b1f3d09 3367.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
1cf9b082
RK
3368}
3369
1b1f3d09
RK
3370.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3371.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
1cf9b082
RK
3372}
3373
1b1f3d09
RK
3374.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3375.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
1cf9b082
RK
3376}
3377
1b1f3d09
RK
3378.tab-background-start[selected=true]::after,
3379.tab-background-start[selected=true]::before,
3380.tab-background-start,
3381.tab-background-end,
3382.tab-background-end[selected=true]::after,
3383.tab-background-end[selected=true]::before {
acb0e9b8 3384}
3385
1b1f3d09
RK
3386.tabbrowser-tab:not([visuallyselected=true]),
3387.tabbrowser-tab:-moz-lwtheme {
db1c5db1
RK
3388}
3389
1b1f3d09
RK
3390/* tabbrowser-tab focus ring */
3391.tabbrowser-tab:focus {
3392 outline: 1px dotted;
db1c5db1
RK
3393}
3394
1b1f3d09 3395/* Selected tab */
acb0e9b8 3396
1b1f3d09 3397.tabbrowser-tab[visuallyselected="true"] {
acb0e9b8 3398}
3399
1b1f3d09 3400/* End selected tab */
db1c5db1 3401
1b1f3d09
RK
3402/* Tab pointer-events */
3403/*
3404.tabbrowser-tab {
3405 pointer-events: none;
7c0a01f2
RK
3406}
3407
1b1f3d09
RK
3408.tab-background-middle,
3409.tabs-newtab-button,
3410.tab-icon-overlay[soundplaying],
3411.tab-icon-overlay[muted]:not([crashed]),
3412.tab-icon-overlay[blocked]:not([crashed]),
3413.tab-icon-sound,
3414.tab-close-button {
3415 pointer-events: auto;
7c0a01f2 3416}
1b1f3d09
RK
3417*/
3418/* Pinned tabs */
7c0a01f2 3419
1b1f3d09
RK
3420/*
3421.tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
3422.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
3423*/
3424.tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
3425 background-color: #E7ADE7;
acb0e9b8 3426}
3427
1b1f3d09
RK
3428.tab-label[attention]:not([selected="true"]) {
3429 font-weight: bold;
acb0e9b8 3430}
3431
1b1f3d09
RK
3432.tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3433 background-color: #3333FF;
3434 color: #000000;
acb0e9b8 3435}
3436
1b1f3d09
RK
3437/* Tab separators */
3438/*
3439.tabbrowser-tab::after,
3440.tabbrowser-tab::before {
3441 width: 1px;
3442 margin-inline-start: -1px;
3443 background-image: linear-gradient(transparent 5px,
3444 currentColor 5px,
3445 currentColor calc(100% - 4px),
3446 transparent calc(100% - 4px));
3447 opacity: 0.2;
7c0a01f2
RK
3448}
3449
1b1f3d09
RK
3450#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3451#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3452 opacity: 0.4;
b27cc46e 3453}
1b1f3d09
RK
3454*/
3455/* Also show separators beside the selected tab when dragging it. */
3456/*
3457#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3458.tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3459#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
3460 content: "";
3461 display: -moz-box;
a40f6a79 3462}
1b1f3d09
RK
3463*/
3464/* New tab button */
a40f6a79 3465
1b1f3d09
RK
3466.tabs-newtab-button {
3467 width: 28px;
3468 /* width: calc(36px + var(--tab-curve-width)); */
990cba4b 3469}
9a225e4b
RK
3470
3471.tabs-newtab-button > .toolbarbutton-menu-dropmarker {
3472 display: none;
3473}
3474
3475.tabs-newtab-button > .toolbarbutton-icon {
3476 /* override drop marker image padding */
3477 margin-inline-end: 0;
3478}
3479
1b1f3d09
RK
3480@media (min-resolution: 1.1dppx) {
3481 /* image preloading hack from like lowdpi styles */
3482 #tabbrowser-tabs::before {
3483 }
990cba4b 3484
1b1f3d09
RK
3485 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
3486 .tabs-newtab-button:hover {
3487 }
db1c5db1 3488
1b1f3d09
RK
3489 .tab-background-middle[selected=true] {
3490 }
db1c5db1 3491
1b1f3d09
RK
3492 .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
3493 .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
3494 }
db1c5db1 3495
1b1f3d09
RK
3496 .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
3497 .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
3498 }
fe524e0c
RK
3499}
3500
1b1f3d09
RK
3501/* All tabs menupopup */
3502
3503.alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3504 background-color: #402800;
fe524e0c
RK
3505}
3506
1b1f3d09
RK
3507.alltabs-endimage[soundplaying],
3508.alltabs-endimage[muted],
3509.alltabs-endimage[blocked] {
9a225e4b
RK
3510 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-playing.svg);
3511 -moz-context-properties: fill;
1b1f3d09 3512 fill: currentColor;
6adbc9a6
RK
3513}
3514
1b1f3d09 3515.alltabs-endimage[muted] {
9a225e4b 3516 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-muted.svg);
990cba4b
RK
3517}
3518
1b1f3d09 3519.alltabs-endimage[blocked] {
9a225e4b 3520 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-blocked.svg);
990cba4b
RK
3521}
3522
1b1f3d09 3523/* === END tabs.inc.css === */
7bc075b6 3524
1b1f3d09
RK
3525/* Tab DnD indicator */
3526.tab-drop-indicator {
3527 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3528 margin-bottom: -11px;
d7b7f7e1
RK
3529}
3530
1b1f3d09
RK
3531/* Tab close button */
3532.tab-close-button {
3533 list-style-image: url("chrome://global/skin/icons/close-button.gif") !important;
3534 -moz-image-region: auto !important;
82b4252f
RK
3535}
3536
1b1f3d09
RK
3537.tab-close-button:hover,
3538.tab-close-button:hover[selected="true"] {
3539 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3540 -moz-image-region: auto !important;
3541}
82b4252f 3542
1b1f3d09
RK
3543.tab-close-button:hover:active,
3544.tab-close-button:hover:active[selected="true"] {
3545 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3546 -moz-image-region: auto !important;
a5cb6e53
RK
3547}
3548
1b1f3d09
RK
3549.tab-close-button > .button-icon,
3550.tab-close-button > .button-box > .button-icon,
3551.tab-close-button > .toolbarbutton-icon {
3552 width: auto !important;
a5cb6e53
RK
3553}
3554
66b04a00 3555
1b1f3d09
RK
3556/* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3557
3558.tabbrowser-arrowscrollbox > .scrollbutton-up,
3559.tabbrowser-arrowscrollbox > .scrollbutton-down {
3560 margin: 0;
3561 padding-top: 0;
3562 padding-bottom: 0;
3563 background-origin: border-box;
66b04a00
RK
3564}
3565
1b1f3d09
RK
3566#main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3567#main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3568.tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3569.tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3570 }
3571
3572.tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3573.tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3574 }
a5cb6e53 3575
1b1f3d09
RK
3576.tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3577.tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3578/* transform: scaleX(-1);*/
936e60fe
RK
3579}
3580
1b1f3d09
RK
3581.tabbrowser-arrowscrollbox > .scrollbutton-down {
3582 transition: 1s background-color ease-out;
b9060895
RK
3583}
3584
1b1f3d09
RK
3585.tabbrowser-arrowscrollbox > .scrollbutton-down[highlight] {
3586 background-color: #008484;
b9060895
RK
3587}
3588
1b1f3d09
RK
3589.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3590.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3591/* border-width: 0 2px 0 0;
3592 border-style: solid;
3593 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
b9060895
RK
3594}
3595
1b1f3d09
RK
3596.tabs-newtab-button > .toolbarbutton-icon {
3597 margin-top: -1px;
3598 margin-bottom: -1px;
b9060895
RK
3599}
3600
1b1f3d09
RK
3601.tabs-newtab-button,
3602#TabsToolbar > #new-tab-button,
3603#TabsToolbar > toolbarpaletteitem > #new-tab-button,
3604#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3605 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3606 -moz-image-region: auto;
b9060895
RK
3607}
3608
1b1f3d09
RK
3609.tabs-newtab-button,
3610.tabs-newtab-button:hover,
3611#TabsToolbar > #new-tab-button,
3612#TabsToolbar > #new-tab-button:hover {
b9060895
RK
3613}
3614
1b1f3d09
RK
3615#main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3616#main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3617#main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3618.tabs-newtab-button:-moz-lwtheme-brighttext,
3619#TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3620#TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
ed88669c
RK
3621}
3622
1b1f3d09
RK
3623#TabsToolbar > #new-tab-button {
3624 width: 26px;
3625 -moz-box-orient: horizontal;
ed88669c
RK
3626}
3627
1b1f3d09
RK
3628#alltabs-button {
3629 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
93c91f62
RK
3630}
3631
1b1f3d09
RK
3632#alltabs-button:hover,
3633#alltabs-button:hover:active,
3634#alltabs-button[open="true"] {
3635 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
93c91f62
RK
3636}
3637
1b1f3d09
RK
3638#main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3639#alltabs-button:-moz-lwtheme-brighttext {
a5cb6e53
RK
3640}
3641
1b1f3d09
RK
3642#alltabs-button > .toolbarbutton-icon {
3643/* margin: 0 2px;*/
ed88669c
RK
3644}
3645
1b1f3d09
RK
3646#alltabs-button > .toolbarbutton-menu-dropmarker {
3647 display: none;
ed88669c
RK
3648}
3649
1b1f3d09
RK
3650/* All tabs menupopup */
3651.alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3652 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
3653 -moz-image-region: auto;
93c91f62
RK
3654}
3655
1b1f3d09
RK
3656.alltabs-item[selected="true"] {
3657 font-weight: bold;
93c91f62
RK
3658}
3659
1b1f3d09
RK
3660.alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3661 list-style-image: url("chrome://global/skin/icons/loading.png");
93c91f62
RK
3662}
3663
1b1f3d09
RK
3664@media (min-resolution: 1.1dppx) {
3665 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3666 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3667 }
93c91f62
RK
3668}
3669
1b1f3d09
RK
3670toolbarbutton.chevron {
3671 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
8837ac2c
RK
3672}
3673
1b1f3d09
RK
3674toolbarbutton.chevron:hover {
3675 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
8837ac2c 3676}
1b1f3d09
RK
3677/*
3678toolbar[brighttext] toolbarbutton.chevron {
3679 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3680}
3681*/
3682toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3683toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3684 transform: scaleX(-1);
8837ac2c
RK
3685}
3686
1b1f3d09
RK
3687toolbarbutton.chevron > .toolbarbutton-text,
3688toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3689 display: none;
8837ac2c
RK
3690}
3691
1b1f3d09
RK
3692toolbarbutton.chevron > .toolbarbutton-icon {
3693 margin: 0;
8837ac2c
RK
3694}
3695
1b1f3d09
RK
3696#sidebar-throbber[loading="true"] {
3697 list-style-image: url("chrome://global/skin/icons/loading.png");
3698 margin-inline-end: 4px;
3699}
ed88669c 3700
1b1f3d09
RK
3701@media (min-resolution: 1.1dppx) {
3702 #sidebar-throbber[loading="true"] {
3703 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3704 width: 16px;
3705 }
0bcd5587
RK
3706}
3707
1b1f3d09
RK
3708/* Bookmarks toolbar */
3709#PlacesToolbarDropIndicator {
3710 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
ed88669c
RK
3711}
3712
1b1f3d09
RK
3713toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3714 background-color: #008484 !important;
3715 color: #FFCF00 !important;
613daf44 3716}
3717
1b1f3d09
RK
3718/* rules for menupopup drop indicators */
3719.menupopup-drop-indicator-bar {
3720 position: relative;
3721 /* these two margins must together compensate the indicator's height */
3722 margin-top: -1px;
3723 margin-bottom: -1px;
319c6529 3724}
acb0e9b8 3725
1b1f3d09
RK
3726.menupopup-drop-indicator {
3727 list-style-image: none;
3728 height: 2px;
3729 margin-inline-end: -4em;
3730 background-color: #008484;
acb0e9b8 3731}
3732
1b1f3d09 3733/* === BEGIN notification-icons.inc.css === */
9abeb12c 3734
9a225e4b
RK
3735.popup-notification-icon,
3736.identity-popup-permission-icon {
3737 -moz-context-properties: fill;
3738 fill: #A09090;
3739}
3740
1b1f3d09
RK
3741#notification-popup-box {
3742 border-radius: 3px 0 0 3px;
3743 padding: 5px 0px;
3744 margin: -5px 0px;
3745 margin-inline-end: -5px;
3746 padding-inline-end: 5px;
9abeb12c
RK
3747}
3748
1b1f3d09
RK
3749/* This class can be used alone or in combination with the class defining the
3750 type of icon displayed. This rule must be defined before the others in order
3751 for its list-style-image to be overridden. */
3752.notification-anchor-icon {
3753 list-style-image: url(chrome://browser/skin/notification-icons.svg#default-info);
9abeb12c 3754}
3e6e0e5c 3755
1b1f3d09
RK
3756.notification-anchor-icon:-moz-focusring {
3757 outline: 1px dotted #008484;
3e6e0e5c 3758}
dce90fef 3759
1b1f3d09
RK
3760@media (min-resolution: 1.1dppx) {
3761 .notification-anchor-icon {
3762 list-style-image: url(chrome://global/skin/icons/info.svg);
3763 }
3764}
024a65e9 3765
1b1f3d09 3766/* INDIVIDUAL NOTIFICATIONS */
024a65e9 3767
1b1f3d09
RK
3768.focus-tab-by-prompt-icon {
3769 list-style-image: url(chrome://browser/skin/notification-icons.svg#focus-tab-by-prompt);
024a65e9
RK
3770}
3771
1b1f3d09
RK
3772.popup-notification-icon[popupid="persistent-storage"],
3773.persistent-storage-icon {
3774 list-style-image: url(chrome://browser/skin/notification-icons.svg#persistent-storage);
024a65e9 3775}
1b1f3d09
RK
3776
3777.persistent-storage-icon.blocked-permission-icon {
3778 list-style-image: url(chrome://browser/skin/notification-icons.svg#persistent-storage-blocked);
8ad8bf83
RK
3779}
3780
1b1f3d09
RK
3781.popup-notification-icon[popupid="web-notifications"],
3782.desktop-notification-icon {
3783 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
85cfb236
RK
3784}
3785
1b1f3d09
RK
3786.desktop-notification-icon.blocked-permission-icon {
3787 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
3788}
024a65e9 3789
1b1f3d09
RK
3790.geo-icon {
3791 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
8ad8bf83
RK
3792}
3793
1b1f3d09
RK
3794.geo-icon.blocked-permission-icon {
3795 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
3796}
d23bf94a 3797
1b1f3d09
RK
3798.popup-notification-icon[popupid="geolocation"] {
3799 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
3800}
d23bf94a 3801
1b1f3d09
RK
3802.popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3803.indexedDB-icon {
3804 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
3805}
d23bf94a 3806
1b1f3d09
RK
3807.indexedDB-icon.blocked-permission-icon {
3808 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
d23bf94a
RK
3809}
3810
1b1f3d09
RK
3811.login-icon {
3812 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
d23bf94a
RK
3813}
3814
1b1f3d09
RK
3815.popup-notification-icon[popupid="password"] {
3816 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
d23bf94a
RK
3817}
3818
1b1f3d09
RK
3819.camera-icon {
3820 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
d23bf94a
RK
3821}
3822
1b1f3d09
RK
3823.camera-icon.in-use {
3824 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing);
d23bf94a
RK
3825}
3826
1b1f3d09
RK
3827.camera-icon.blocked-permission-icon {
3828 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
d23bf94a
RK
3829}
3830
1b1f3d09
RK
3831.microphone-icon {
3832 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
d23bf94a
RK
3833}
3834
1b1f3d09
RK
3835.microphone-icon.in-use {
3836 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing);
d23bf94a
RK
3837}
3838
1b1f3d09
RK
3839.microphone-icon.blocked-permission-icon {
3840 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
d23bf94a
RK
3841}
3842
1b1f3d09
RK
3843.popup-notification-icon.microphone-icon {
3844 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
3845}
024a65e9 3846
1b1f3d09
RK
3847.screen-icon {
3848 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
3849}
b27cc46e 3850
1b1f3d09
RK
3851.screen-icon.in-use {
3852 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing);
a5cb6e53
RK
3853}
3854
1b1f3d09
RK
3855.screen-icon.blocked-permission-icon {
3856 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
3857}
b27cc46e 3858
1b1f3d09
RK
3859#webRTC-preview:not([hidden]) {
3860 display: -moz-stack;
3861 border-radius: 4px;
3862 border: 1px solid #A09090;
3863 overflow: hidden;
3864 min-width: 300px;
3865 min-height: 10em;
b27cc46e
RK
3866}
3867
1b1f3d09
RK
3868html|*#webRTC-previewVideo {
3869 width: 300px;
3870 /* If we don't set the min-width, width is ignored. */
3871 min-width: 300px;
3872 max-height: 200px;
b27cc46e
RK
3873}
3874
1b1f3d09
RK
3875#webRTC-previewWarning {
3876 background: #FF0000 url("chrome://browser/skin/warning-white.svg") no-repeat .75em .75em;
3877 margin: 0;
3878 padding: .5em;
3879 padding-inline-start: calc(1.5em + 16px);
3880 border-top: 1px solid #A09090;
b27cc46e
RK
3881}
3882
1b1f3d09
RK
3883#webRTC-previewWarning > .text-link {
3884 margin-inline-start: 0;
b27cc46e
RK
3885}
3886
1b1f3d09
RK
3887/* This icon has a block sign in it, so we don't need a blocked version. */
3888.popup-icon {
3889 list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
b27cc46e
RK
3890}
3891
1b1f3d09
RK
3892/* EME */
3893
3894.popup-notification-icon[popupid="drmContentPlaying"],
3895.drm-icon {
3896 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
b27cc46e
RK
3897}
3898
1b1f3d09
RK
3899.drm-icon:hover:active {
3900 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
b27cc46e
RK
3901}
3902
1b1f3d09
RK
3903#eme-notification-icon[firstplay=true] {
3904 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
fe524e0c
RK
3905}
3906
1b1f3d09
RK
3907@keyframes emeTeachingMoment {
3908 0% {transform: translateX(0); }
3909 25% {transform: translateX(3px) }
3910 75% {transform: translateX(-3px) }
3911 100% { transform: translateX(0); }
0bcd5587
RK
3912}
3913
1b1f3d09
RK
3914/* INSTALL ADDONS */
3915
3916.install-icon {
3917 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
b27cc46e
RK
3918}
3919
1b1f3d09
RK
3920.popup-notification-icon[popupid="xpinstall-disabled"],
3921.popup-notification-icon[popupid="addon-install-blocked"],
3922.popup-notification-icon[popupid="addon-install-origin-blocked"] {
3923 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
b27cc46e
RK
3924}
3925
1b1f3d09
RK
3926.popup-notification-icon[popupid="addon-progress"] {
3927 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
b27cc46e
RK
3928}
3929
1b1f3d09
RK
3930.popup-notification-icon[popupid="addon-install-failed"] {
3931 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3932}
0bcd5587 3933
1b1f3d09
RK
3934.popup-notification-icon[popupid="addon-install-confirmation"] {
3935 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
0bcd5587
RK
3936}
3937
1b1f3d09
RK
3938#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3939 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3940}
b27cc46e 3941
1b1f3d09
RK
3942.popup-notification-icon[popupid="addon-install-complete"] {
3943 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
37953ab4
RK
3944}
3945
1b1f3d09
RK
3946.popup-notification-icon[popupid="addon-install-restart"] {
3947 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
85cfb236
RK
3948}
3949
1b1f3d09
RK
3950.popup-notification-icon[popupid="click-to-play-plugins"] {
3951 list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
85cfb236
RK
3952}
3953
1b1f3d09
RK
3954/* OFFLINE APPS */
3955
3956.popup-notification-icon[popupid*="offline-app-requested"],
3957.popup-notification-icon[popupid="offline-app-usage"] {
3958 list-style-image: url(chrome://global/skin/icons/question-64.png);
b27cc46e
RK
3959}
3960
1b1f3d09
RK
3961/* PLUGINS */
3962
3963.plugin-icon {
3964 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
37953ab4
RK
3965}
3966
d8502c35
RK
3967#plugin-icon-badge {
3968 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-badge);
3969 opacity: 0;
3970 transition: opacity 1.5s;
3971}
3972
3973#plugins-notification-icon[extraAttr="inactive"] > .plugin-icon {
3974 fill: #8050B0;
3975}
3976
3977#plugins-notification-icon[extraAttr="inactive"] > #plugin-icon-badge {
3978 opacity: 1;
3979}
3980
3981#plugins-notification-icon[extraAttr="inactive"] > #plugin-icon-badge[animate] {
3982 animation: blink-badge 1000ms ease 0s 5 alternate both;
3983}
3984
3985@keyframes blink-badge {
3986 from {
3987 opacity: 0;
3988 }
3989 to {
3990 opacity: 1;
3991 }
3992}
3993
1b1f3d09
RK
3994.plugin-icon.plugin-blocked {
3995 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
9a225e4b 3996 fill: #FF0000 !important;
0bcd5587
RK
3997}
3998
1b1f3d09
RK
3999#notification-popup-box[hidden] {
4000 /* Override display:none to make the pluginBlockedNotification animation work
4001 when showing the notification repeatedly. */
4002 display: -moz-box;
4003 visibility: collapse;
0bcd5587
RK
4004}
4005
1b1f3d09
RK
4006#plugins-notification-icon.plugin-blocked[showing] {
4007 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
85cfb236
RK
4008}
4009
1b1f3d09
RK
4010@keyframes pluginBlockedNotification {
4011 from {
4012 opacity: 0;
4013 }
4014 to {
4015 opacity: 1;
4016 }
7bc075b6
RK
4017}
4018
1b1f3d09
RK
4019/* SOCIAL API */
4020
4021.popup-notification-icon[popupid="servicesInstall"] {
4022 list-style-image: url(chrome://browser/skin/social/services-64.png);
85cfb236
RK
4023}
4024
1b1f3d09
RK
4025.service-icon {
4026 list-style-image: url(chrome://browser/skin/social/services-16.png);
85cfb236
RK
4027}
4028
1b1f3d09
RK
4029/* TRANSLATION */
4030
4031.translation-icon {
4032 list-style-image: url(chrome://browser/skin/translation-16.png);
4033 -moz-image-region: rect(0px, 16px, 16px, 0px);
85cfb236
RK
4034}
4035
1b1f3d09
RK
4036.translation-icon.in-use {
4037 -moz-image-region: rect(0px, 32px, 16px, 16px);
85cfb236
RK
4038}
4039
1b1f3d09
RK
4040/* UPDATE */
4041
4042.popup-notification-icon[popupid="update-available"],
4043.popup-notification-icon[popupid="update-manual"],
4044.popup-notification-icon[popupid="update-restart"] {
4045 background: #74BF43 url(chrome://browser/skin/notification-icons.svg#update) no-repeat center;
4046 border-radius: 50%;
85cfb236
RK
4047}
4048
1b1f3d09
RK
4049/* === END notification-icons.inc.css === */
4050
4051.popup-notification-body[popupid="addon-progress"],
4052.popup-notification-body[popupid="addon-install-confirmation"] {
4053 width: 28em;
4054 max-width: 28em;
85cfb236
RK
4055}
4056
1b1f3d09
RK
4057.addon-install-confirmation-name {
4058 font-weight: bold;
85cfb236
RK
4059}
4060
1b1f3d09
RK
4061html|*.addon-webext-perm-list {
4062 margin-block-end: 0;
4063 padding-inline-start: 10px;
37953ab4
RK
4064}
4065
1b1f3d09
RK
4066.addon-webext-perm-text {
4067 margin-inline-start: 0;
37953ab4
RK
4068}
4069
9a225e4b
RK
4070.popup-notification-description[popupid="addon-webext-permissions"],
4071.popup-notification-description[popupid="addon-installed"] {
4072 display: none;
4073}
4074
4075.addon-webext-perm-notification-content,
4076.addon-installed-notification-content {
4077 margin-top: 0;
4078}
4079
4080#addon-webext-perm-header {
4081 /* Align the text more closely with the icon by clearing some top line height. */
4082 margin-top: -1px;
4083 margin-inline-start: 0;
4084}
4085
4086#addon-installed-notification-header {
4087 /* Align the text more closely with the icon by clearing some top line height. */
4088 margin-top: -1px;
37953ab4
RK
4089}
4090
1b1f3d09
RK
4091.addon-webext-name {
4092 display: inline;
4093 font-weight: bold;
7d6161c5
RK
4094 margin: 0;
4095}
4096
9a225e4b
RK
4097.addon-addon-icon,
4098.addon-toolbar-icon {
1b1f3d09
RK
4099 width: 14px;
4100 height: 14px;
9a225e4b
RK
4101 vertical-align: bottom;
4102 margin-bottom: 1px;
4103}
4104
4105.addon-addon-icon {
1b1f3d09
RK
4106 list-style-image: url("chrome://browser/skin/menuPanel.svg");
4107 -moz-image-region: rect(0px, 288px, 32px, 256px);
7d6161c5
RK
4108}
4109
1b1f3d09 4110.addon-toolbar-icon {
1b1f3d09
RK
4111 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4112 -moz-image-region: rect(0, 486px, 18px, 468px);
de57e474
RK
4113}
4114
1b1f3d09 4115/* Notification icon box */
1988bb88 4116
1b1f3d09
RK
4117.notification-anchor-icon:-moz-focusring {
4118/* outline: 1px dotted -moz-DialogText;*/
1988bb88
RK
4119}
4120
1b1f3d09 4121/* Translation infobar */
1988bb88 4122
1b1f3d09
RK
4123/* === BEGIN infobar.inc.css === */
4124
4125notification[value="translation"] .messageImage {
4126 list-style-image: url("chrome://browser/skin/translation-16.png");
4127 -moz-image-region: rect(0, 32px, 16px, 16px);
0bcd5587
RK
4128}
4129
1b1f3d09
RK
4130@media (min-resolution: 1.25dppx) {
4131 notification[value="translation"] .messageImage {
4132 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
4133 -moz-image-region: rect(0, 64px, 32px, 32px);
4134 }
de57e474
RK
4135}
4136
1b1f3d09
RK
4137notification[value="translation"][state="translating"] .messageImage {
4138 list-style-image: url("chrome://browser/skin/translating-16.png");
4139 -moz-image-region: auto;
de57e474
RK
4140}
4141
1b1f3d09
RK
4142@media (min-resolution: 1.25dppx) {
4143 notification[value="translation"][state="translating"] .messageImage {
4144 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
4145 }
de57e474
RK
4146}
4147
1b1f3d09
RK
4148notification[value="translation"] hbox[anonid="details"] {
4149 overflow: hidden;
de57e474
RK
4150}
4151
1b1f3d09
RK
4152notification[value="translation"] button,
4153notification[value="translation"] menulist {
4154 min-width: 0;
de57e474
RK
4155}
4156
1b1f3d09 4157notification[value="translation"] menulist > .menulist-dropmarker {
de57e474
RK
4158}
4159
1b1f3d09
RK
4160.translation-menupopup arrowscrollbox {
4161 padding-bottom: 0;
de57e474
RK
4162}
4163
1b1f3d09
RK
4164.translation-attribution {
4165 cursor: pointer;
4166 -moz-box-align: end;
4167 font-size: small;
de57e474
RK
4168}
4169
1b1f3d09
RK
4170.translation-attribution > label {
4171 margin-bottom: 0;
de57e474
RK
4172}
4173
1b1f3d09
RK
4174.translation-attribution > image {
4175 width: 70px;
de57e474
RK
4176}
4177
1b1f3d09
RK
4178.translation-welcome-panel {
4179 width: 305px;
de57e474
RK
4180}
4181
1b1f3d09
RK
4182.translation-welcome-logo {
4183 height: 32px;
4184 width: 32px;
4185 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
4186 -moz-image-region: rect(0, 64px, 32px, 32px);
de57e474
RK
4187}
4188
1b1f3d09
RK
4189.translation-welcome-content {
4190 margin-inline-start: 16px;
de57e474
RK
4191}
4192
1b1f3d09
RK
4193.translation-welcome-headline {
4194 font-size: larger;
4195 font-weight: bold;
37953ab4
RK
4196}
4197
1b1f3d09
RK
4198.translation-welcome-body {
4199 padding: 1em 0;
4200 margin: 0 0;
fe524e0c
RK
4201}
4202
1b1f3d09
RK
4203/* === END infobar.inc.css === */
4204
4205notification[value="translation"] {
4206 min-height: 40px;
fe524e0c
RK
4207}
4208
1b1f3d09
RK
4209.translation-menupopup {
4210 -moz-appearance: none;
fe524e0c
RK
4211}
4212
1b1f3d09
RK
4213/* Bookmarks roots menu-items */
4214#subscribeToPageMenuitem:not([disabled]),
4215#subscribeToPageMenupopup {
4216 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
ec6b35d8
RK
4217}
4218
1b1f3d09
RK
4219#bookmarksToolbarFolderMenu,
4220#BMB_bookmarksToolbar,
4221#panelMenu_bookmarksToolbar {
4222 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
4223 -moz-image-region: auto;
fe524e0c
RK
4224}
4225
1b1f3d09
RK
4226#BMB_unsortedBookmarks,
4227#panelMenu_unsortedBookmarks {
4228 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
4229 -moz-image-region: auto;
fe524e0c
RK
4230}
4231
1b1f3d09 4232/* Status panel */
0bcd5587 4233
1b1f3d09
RK
4234.statuspanel-label {
4235 margin: 0;
4236 padding: 2px 4px;
4237 background: #404000;
4238 border: 1px none #9C9CFF;
4239 border-top-style: solid;
4240 color: #FF9F00;
4241 text-shadow: none;
0bcd5587
RK
4242}
4243
1b1f3d09
RK
4244.statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
4245.statuspanel-label:-moz-locale-dir(rtl)[mirror] {
4246 border-right-style: solid;
4247 border-top-right-radius: .3em;
4248 margin-right: 1em;
fe524e0c
RK
4249}
4250
1b1f3d09
RK
4251.statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
4252.statuspanel-label:-moz-locale-dir(ltr)[mirror] {
4253 border-left-style: solid;
4254 border-top-left-radius: .3em;
4255 margin-left: 1em;
fe524e0c
RK
4256}
4257
1b1f3d09 4258/* HACK to abolish devily color on main content */
0bcd5587 4259
1b1f3d09
RK
4260#content {
4261 background-color: transparent !important;
0bcd5587
RK
4262}
4263
1b1f3d09 4264/* === BEGIN fullscreen/warning.inc.css === */
fe524e0c 4265
1b1f3d09
RK
4266html|*.pointerlockfswarning {
4267 align-items: center;
4268 background: rgba(0, 0, 0, 0.9);
4269 border: 2px solid #A09090;
4270 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
4271 border-radius: 8px;
4272 padding: 24px 16px;
4273 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
37953ab4
RK
4274}
4275
1b1f3d09
RK
4276html|*.pointerlockfswarning::before {
4277 margin: 0;
4278 width: 24px; height: 24px;
0bcd5587
RK
4279}
4280
1b1f3d09
RK
4281html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
4282html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
4283 content: url("chrome://browser/skin/fullscreen/secure.svg");
37953ab4
RK
4284}
4285
1b1f3d09
RK
4286html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
4287 content: url("chrome://browser/skin/fullscreen/insecure.svg");
fe524e0c 4288}
1b1f3d09
RK
4289html|*.pointerlockfswarning-domain-text,
4290html|*.pointerlockfswarning-generic-text {
4291 font-size: 21px;
4292 font-weight: lighter;
4293 color: #A09090;
4294 margin: 0 16px;
8d7ef0d9 4295}
889649fd 4296
1b1f3d09
RK
4297html|*.pointerlockfswarning-domain {
4298 font-weight: bold;
4299 margin: 0;
a21f2959
RK
4300}
4301
1b1f3d09
RK
4302html|*#fullscreen-exit-button,
4303html|*.pointerlockfswarning-exit-button {
4304 margin: 0;
a21f2959 4305
1b1f3d09
RK
4306 border-radius: 300px;
4307 border: none;
4308 background-color: #C09070;
4309 color: #000000;
a21f2959
RK
4310}
4311
1b1f3d09 4312/* === END fullscreen/warning.inc.css === */
a21f2959 4313
1b1f3d09 4314/* === BEGIN ctrlTab.inc.css === */
a21f2959 4315
1b1f3d09 4316/* Ctrl-Tab */
a21f2959 4317
1b1f3d09 4318#ctrlTab-panel {
a21f2959 4319 -moz-appearance: none;
1b1f3d09
RK
4320 background: rgba(0%,0%,0%,.7);
4321 color: #FF9F00;
4322 border-style: none;
4323 padding: 20px 10px 10px;
4324 font-weight: bold;
a21f2959
RK
4325}
4326
1b1f3d09
RK
4327.ctrlTab-favicon[src] {
4328 background-color: #000000;
4329 width: 20px;
4330 height: 20px;
4331 padding: 2px;
a21f2959
RK
4332}
4333
1b1f3d09
RK
4334.ctrlTab-preview-inner > .tabPreview-canvas {
4335/* box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
a21f2959
RK
4336}
4337
1b1f3d09
RK
4338.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
4339 margin-bottom: 2px;
a21f2959
RK
4340}
4341
1b1f3d09
RK
4342.ctrlTab-preview-inner {
4343 padding: 8px;
4344 border: 2px solid transparent;
4345 border-radius: .5em;
a21f2959
RK
4346}
4347
1b1f3d09
RK
4348.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner {
4349 margin: -10px -10px 0;
a21f2959
RK
4350}
4351
1b1f3d09
RK
4352#ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
4353 background-color: #000000;
a21f2959
RK
4354}
4355
1b1f3d09
RK
4356.ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
4357 color: #A09090;
4358 background-color: #000000;
4359 text-shadow: none;
4360 border-color: #9C9CFF;
4361}
0bcd5587 4362
1b1f3d09
RK
4363#ctrlTab-showAll {
4364 margin-top: .5em;
0bcd5587
RK
4365}
4366
1b1f3d09 4367/* === END ctrlTab.inc.css === */
fcaeefc2
RK
4368
4369/* === including indicator.css is done at the start of the file === */
fe524e0c 4370
889649fd
RK
4371/* Error counter */
4372
0142a07b 4373#developer-toolbar-toolbox-button[error-count]:before {
889649fd
RK
4374 color: #000000;
4375 min-width: 16px;
4376 text-shadow: none;
4377 background-color: #FF0000;
4378 border-radius: 1px;
dae45075 4379 margin-inline-end: 5px;
c54ac991 4380}
e9c73590 4381
b27cc46e 4382/* === BEGIN plugin-doorhanger.inc.css === */
348c0499 4383
b27cc46e
RK
4384/**
4385 * Plugin Doorhanger Styles
4386 */
348c0499 4387
b27cc46e 4388#notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
1e32332f 4389 padding: 6px 1px 2px;
348c0499
RK
4390}
4391
348c0499 4392.click-to-play-plugins-notification-center-box {
348c0499
RK
4393}
4394
fe524e0c
RK
4395.plugin-popupnotification-centeritem:nth-child(odd) {
4396/* background-color: rgba(0,0,0,0.1);*/
348c0499
RK
4397}
4398
b27cc46e
RK
4399.center-item-label {
4400 margin-bottom: 0;
4401 text-overflow: ellipsis;
348c0499
RK
4402}
4403
b27cc46e 4404.center-item-warning-icon {
d23bf94a 4405 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg");
348c0499 4406 background-repeat: no-repeat;
348c0499 4407 width: 16px;
b27cc46e 4408 height: 15px;
dae45075 4409 margin-inline-start: 6px;
348c0499
RK
4410}
4411
b27cc46e 4412.click-to-play-plugins-notification-button-container {
348c0499
RK
4413}
4414
b27cc46e
RK
4415.click-to-play-popup-button {
4416 width: 50%;
348c0499
RK
4417}
4418
b27cc46e 4419.click-to-play-plugins-notification-description-box {
1e32332f
RK
4420 margin-left: 5px;
4421 margin-right: 5px;
4422 margin-top: 0;
4423 padding-bottom: 3px;
348c0499
RK
4424}
4425
b27cc46e 4426.click-to-play-plugins-outer-description {
1e32332f 4427 margin-top: 1px;
348c0499
RK
4428}
4429
b27cc46e
RK
4430.click-to-play-plugins-notification-link,
4431.center-item-link {
4432 margin: 0;
348c0499
RK
4433}
4434
2c225fcb 4435.messageImage[value="plugin-hidden"] {
db1c5db1 4436 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
2c225fcb
RK
4437}
4438
4439/* Keep any changes to this style in sync with pluginProblem.css */
4440notification.pluginVulnerable {
4441}
4442
4443notification.pluginVulnerable .messageImage {
db1c5db1 4444 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
2c225fcb
RK
4445}
4446
b27cc46e 4447/* === END plugin-doorhanger.inc.css === */
0142a07b 4448
43cc2806
RK
4449/* === BEGIN customizeMode.inc.css === */
4450
4451/* Customization mode */
e28f3f71 4452
db1c5db1
RK
4453:root {
4454 --drag-drop-transition-duration: .3s;
4455}
4456
38bd4bf1
RK
4457#main-window[customization-lwtheme] #tab-view-deck:-moz-lwtheme {
4458 background-repeat: no-repeat;
4459 background-position: right top;
4460 background-attachment: fixed;
4461 background-color: transparent;
4462 background-image: -moz-image-rect(var(--lwt-header-image), 0, 100%,
4463 var(--toolbox-rect-height), 0),
4464 linear-gradient(to bottom,
4465 var(--lwt-accent-color) calc(var(--toolbox-rect-height-with-unit) - 1px),
4466 rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) - 1px),
4467 rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) + 1px),
4468 rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 1px),
4469 rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 2px),
4470 transparent calc(var(--toolbox-rect-height-with-unit) + 2px));
4471}
4472
5401f433
RK
4473#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4474 margin-bottom: 1em;
e28f3f71
RK
4475}
4476
5401f433
RK
4477#main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4478#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
e28f3f71
RK
4479#main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4480 margin-left: 1em;
4481 margin-right: 1em;
43cc2806
RK
4482}
4483
e28f3f71
RK
4484#main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4485 pointer-events: none;
4486}
4487
4488#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
43cc2806 4489#PanelUI-contents > .panel-customization-placeholder {
e28f3f71 4490 -moz-outline-radius: 2.5px;
43cc2806
RK
4491 outline: 1px dashed transparent;
4492}
4493
e28f3f71
RK
4494#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4495 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4496 -moz-box-ordinal-group: 0;
4497 content: "";
4498 display: -moz-box;
4499 height: 100%;
4500 left: 0;
4501 outline-offset: -2px;
4502 pointer-events: none;
4503 position: absolute;
4504 top: 0;
4505 width: 100%;
4506}
4507
4508/* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4509 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4510 offset from the bottom effectively the same as other targets (-2px). */
4511#main-window[customize-entered] #TabsToolbar.customization-target::before {
e20c83c3 4512/* top: -2px;*/
e28f3f71
RK
4513}
4514
4515/* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4516#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4517#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4518#main-window[customize-entered] #nav-bar-customization-target.customization-target {
4519 position: relative;
4520}
4521
4522/* Most target outlines are shown on hover and drag over but the panel menu uses
4523 placeholders instead. */
4524#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4525#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4526/* nav-bar and panel outlines are always shown */
4527#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
d23bf94a 4528 outline-color: currentColor;
e28f3f71
RK
4529}
4530
4531#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4532 transition: outline-color 250ms linear;
4533}
4534
4535#PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4536 transition: outline-color 250ms linear;
d23bf94a 4537 outline-color: var(--panel-separator-color);
43cc2806
RK
4538}
4539
4540#PanelUI-contents > .panel-customization-placeholder {
4541 cursor: auto;
4542 outline-offset: -5px;
4543}
4544
e28f3f71 4545#main-window[customizing] .customization-target:not(#PanelUI-contents) {
43cc2806 4546 min-width: 100px;
e20c83c3
RK
4547/* padding-left: 10px;
4548 padding-right: 10px;*/
4549}
4550
4551#main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4552 padding: 0 2em 2em;
43cc2806
RK
4553}
4554
4555#customization-container {
4556 background-color: #000000;
93c91f62 4557 color: #FF9F00;
43cc2806
RK
4558}
4559
e28f3f71
RK
4560#customization-palette,
4561#customization-empty {
4562 padding: 0 15px 15px;
43cc2806
RK
4563}
4564
4565#customization-header {
cac2a998
RK
4566 font-size: 1.75em;
4567 line-height: 1.75em;
43cc2806 4568 color: #9C9CFF;
cac2a998
RK
4569 font-weight: 200;
4570 margin: 25px 25px 12px;
4571 padding-bottom: 12px;
4572 border-bottom: 1px solid #A09090;
43cc2806
RK
4573}
4574
4575#customization-panel-container {
e28f3f71
RK
4576 padding: 10px 10px 0px;
4577}
4578
5401f433 4579#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
e28f3f71
RK
4580#customization-footer {
4581 /*background-color: rgb(236,236,236);*/
5401f433
RK
4582}
4583
4584#customization-footer {
e28f3f71 4585 border-top: 1px solid #9C9CFF;
93c91f62 4586 padding: 10px;
e28f3f71
RK
4587}
4588
4589.customizationmode-button {
93c91f62 4590 margin: 5px;
e28f3f71
RK
4591}
4592
9a225e4b
RK
4593.customizationmode-checkbox {
4594}
4595
4596#customization-reset-button,
4597#customization-undo-reset-button,
4598#customization-done-button {
4599}
4600
4601#customization-done-button {
e28f3f71
RK
4602}
4603
d23bf94a
RK
4604.customizationmode-button > .box-inherit {
4605}
4606
9a225e4b
RK
4607/* We use a smaller padding to ensure images don't have padding.
4608 * We can't detect whether a button has an image. This button doesn't
4609 * so it needs more padding, so we unfortunately hardcode the extra
4610 * padding in here:
4611 */
4612#customization-toolbar-visibility-button {
d23bf94a
RK
4613}
4614
9a225e4b 4615.customizationmode-button[type=menu] > .box-inherit > .box-inherit > .button-text {
d23bf94a
RK
4616}
4617
9a225e4b 4618.customizationmode-button > .button-icon {
d23bf94a
RK
4619}
4620
9a225e4b
RK
4621.customizationmode-button:not([type=menu]) > .button-text {
4622}
d23bf94a 4623
9a225e4b
RK
4624.customizationmode-button > .box-inherit > .button-menu-dropmarker {
4625}
d23bf94a
RK
4626
4627.customizationmode-button[checked] {
e548e22e
RK
4628 background-color: #008484;
4629}
4630
d23bf94a
RK
4631.customizationmode-button[checked]:hover:not([disabled]),
4632.customizationmode-button:hover:not([disabled]) {
e548e22e
RK
4633 background-color: #FFCF00;
4634}
4635
d23bf94a
RK
4636.customizationmode-button[checked]:hover:active:not([disabled]),
4637.customizationmode-button:hover:active:not([disabled]),
4638.customizationmode-button[open] {
e548e22e
RK
4639 background-color: #FF9F00;
4640}
4641
e28f3f71
RK
4642.customizationmode-button[disabled="true"] {
4643}
4644
93c91f62
RK
4645.customizationmode-button > .box-inherit > .box-inherit > .button-icon,
4646.customizationmode-button > .button-box > .button-icon {
9a225e4b 4647/* height: 16px;*/
93c91f62
RK
4648}
4649
e28f3f71
RK
4650#customization-titlebar-visibility-button {
4651 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
b7f3670c 4652 -moz-image-region: rect(0, 16px, 16px, 0);
e28f3f71
RK
4653}
4654
b7f3670c
RK
4655#customization-titlebar-visibility-button:hover {
4656 -moz-image-region: rect(16px, 16px, 32px, 0);
4657}
4658
4659#customization-titlebar-visibility-button > .button-box {
4660 padding-top: 0;
4661 padding-bottom: 1px;
4662}
4663
4664#customization-titlebar-visibility-button:hover:active > .button-box {
4665 padding-top: 1px;
4666 padding-bottom: 0;
4667}
4668
ae90b726 4669#customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
e28f3f71
RK
4670#customization-titlebar-visibility-button > .button-box > .button-text {
4671 /* Sadly, button.css thinks its margins are perfect for everyone. */
dae45075 4672 margin-inline-start: 5px !important;
e28f3f71
RK
4673}
4674
05148fed 4675#customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
9a225e4b
RK
4676 width: 16px;
4677 height: 16px;
05148fed 4678 border-radius: 2px;
b9060895 4679 background-image: url("chrome://browser/content/default-theme-icon.svg");
05148fed
RK
4680 background-size: contain;
4681}
4682
93c91f62
RK
4683#customization-titlebar-visibility-button > .button-box > .button-icon {
4684 vertical-align: middle;
4685}
4686
e28f3f71 4687#customization-titlebar-visibility-button[checked] {
b7f3670c 4688 -moz-image-region: rect(0, 32px, 16px, 16px);
e28f3f71
RK
4689 background-color: #008484;
4690}
4691
b7f3670c
RK
4692#customization-titlebar-visibility-button[checked]:hover {
4693 -moz-image-region: rect(16px, 32px, 32px, 16px);
4694 background-color: #FFCF00;
4695}
4696
4697#customization-titlebar-visibility-button[checked]:hover:active {
4698 background-color: #FF9F00;
4699}
4700
2e389898
RK
4701@media (min-resolution: 1.1dppx) {
4702 #customization-titlebar-visibility-button {
4703 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
4704 -moz-image-region: rect(0, 48px, 48px, 0);
4705 }
4706
4707 #customization-titlebar-visibility-button:hover {
4708 -moz-image-region: rect(48px, 48px, 96px, 0);
4709 }
4710
4711 #customization-titlebar-visibility-button[checked] {
4712 -moz-image-region: rect(0, 96px, 48px, 48px);
4713 }
4714
4715 #customization-titlebar-visibility-button[checked]:hover {
4716 -moz-image-region: rect(48px, 96px, 96px, 48px);
4717 }
4718}
4719
e28f3f71 4720#main-window[customize-entered] #customization-panel-container {
43cc2806
RK
4721 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4722 background-position: left top;
4723 background-repeat: repeat;
4724 background-size: auto;
4725 background-attachment: fixed;
4726}
4727
1b1f3d09 4728#widget-overflow-fixed-list > toolbarpaletteitem[place="panel"],
e28f3f71
RK
4729toolbarpaletteitem[place="toolbar"] {
4730 transition: border-width 250ms ease-in-out;
43cc2806
RK
4731}
4732
4733toolbarpaletteitem[mousedown] {
4734 outline: 1px solid #008484;
4735 cursor: -moz-grabbing;
4736 opacity: 0.8;
4737}
4738
4739.panel-customization-placeholder,
4740toolbarpaletteitem[place="palette"],
4741toolbarpaletteitem[place="panel"] {
db1c5db1 4742 transition: transform var(--drag-drop-transition-duration) ease-in-out;
e28f3f71
RK
4743}
4744
4745#customization-palette {
4746 transition: opacity .3s ease-in-out;
4747 opacity: 0;
43cc2806
RK
4748}
4749
e28f3f71
RK
4750#customization-palette[showing="true"] {
4751 opacity: 1;
4752}
4753
db1c5db1
RK
4754toolbarpaletteitem toolbarbutton[disabled] {
4755/* color: inherit !important;*/
4756}
4757
1b1f3d09 4758#widget-overflow-fixed-list > toolbarpaletteitem[notransition][place="panel"],
e28f3f71
RK
4759toolbarpaletteitem[notransition].panel-customization-placeholder,
4760toolbarpaletteitem[notransition][place="toolbar"],
43cc2806
RK
4761toolbarpaletteitem[notransition][place="palette"],
4762toolbarpaletteitem[notransition][place="panel"] {
e28f3f71 4763 transition: none;
43cc2806
RK
4764}
4765
e28f3f71 4766toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
19988d2d 4767toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
e28f3f71
RK
4768toolbarpaletteitem > toolbaritem.panel-wide-item,
4769toolbarpaletteitem > toolbarbutton[type="menu-button"] {
db1c5db1 4770 transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
43cc2806
RK
4771}
4772
d0e580f1 4773toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
19988d2d 4774toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
e28f3f71
RK
4775 transform: scale(1.3);
4776}
4777
4778toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4779toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
43cc2806
RK
4780 transform: scale(1.1);
4781}
4782
4783/* Override the toolkit styling for items being dragged over. */
4784toolbarpaletteitem[place="toolbar"] {
4785 border-left-width: 0;
4786 border-right-width: 0;
4787 margin-right: 0;
4788 margin-left: 0;
4789}
4790
1b1f3d09
RK
4791#widget-overflow-fixed-list > toolbarpaletteitem[place="panel"] {
4792 border-top: 0px solid transparent;
4793 border-bottom: 0px solid transparent;
4794}
4795
43cc2806
RK
4796#customization-palette:not([hidden]) {
4797 margin-bottom: 25px;
4798}
4799
7c1e433b
RK
4800toolbarpaletteitem[place="palette"]:-moz-focusring,
4801toolbarpaletteitem[place="panel"]:-moz-focusring,
4802toolbarpaletteitem[place="toolbar"]:-moz-focusring {
db1c5db1
RK
4803 outline-width: 0;
4804}
4805
4806toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
4807toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
4808toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4809 /* Delay adding the focusring back until after the transform transition completes. */
4810 transition: outline-width .01s linear var(--drag-drop-transition-duration);
d23bf94a 4811 outline: 1px dotted;
7c1e433b
RK
4812 -moz-outline-radius: 2.5px;
4813}
4814
db1c5db1
RK
4815toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4816 outline-offset: -5px;
4817}
4818
43cc2806
RK
4819#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4820#wrapper-edit-controls[place="palette"] > #edit-controls > separator,
e28f3f71
RK
4821#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4822#wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4823 margin-top: 20px;
43cc2806
RK
4824}
4825
4826#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
c0f6797e 4827#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
43cc2806
RK
4828 margin-left: 0;
4829 margin-right: 0;
e28f3f71
RK
4830 max-width: 24px;
4831 min-width: 24px;
43cc2806 4832 max-height: 24px;
5401f433 4833 min-height: 24px;
e28f3f71 4834 padding: 4px;
43cc2806
RK
4835}
4836
e28f3f71
RK
4837#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4838#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4839 width: 16px;
43cc2806
RK
4840}
4841
e28f3f71
RK
4842#wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4843 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4844}
4845
c0f6797e
RK
4846#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4847#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
e28f3f71
RK
4848 display: none;
4849}
4850
4851#wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
4852 -moz-box-pack: center;
4853 min-height: 48px;
43cc2806
RK
4854}
4855
20752032 4856#personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
dae45075 4857 margin-inline-end: 5px;
20752032
RK
4858}
4859
43cc2806
RK
4860#customization-palette > toolbarpaletteitem > label {
4861 text-align: center;
4862 margin-left: 0;
4863 margin-right: 0;
4864}
4865
cac2a998
RK
4866#customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
4867 -moz-box-orient: vertical;
4868 /* Make the panel padding uniform across all platforms due to the
4869 styling of the section headers and footer. */
4870 padding: 10px;
4871}
4872
4873.customization-lwtheme-menu-theme > .toolbarbutton-icon {
4874 width: 32px;
4875 height: 32px;
4876}
4877
4878.customization-lwtheme-menu-theme {
4879 -moz-appearance: none;
4880 margin: 0 -5px 5px;
4881 padding-top: 0;
dae45075 4882 padding-inline-end: 5px;
cac2a998 4883 padding-bottom: 0;
dae45075 4884 padding-inline-start: 0;
cac2a998
RK
4885}
4886
8837ac2c 4887.customization-lwtheme-menu-theme[defaulttheme] {
b9060895 4888 list-style-image: url(chrome://browser/content/default-theme-icon.svg);
8837ac2c
RK
4889}
4890
cac2a998
RK
4891.customization-lwtheme-menu-theme[active="true"] {
4892 background-color: #008484;
4893}
4894
4895.customization-lwtheme-menu-theme > .toolbarbutton-icon {
4896 margin: 5px;
4897}
4898
4899.customization-lwtheme-menu-theme > .toolbarbutton-text {
4900 text-align: start;
4901}
4902
4903#customization-lwtheme-menu-header,
4904#customization-lwtheme-menu-recommended {
4905 padding: 10px;
4906 margin-bottom: 5px;
4907}
4908
4909#customization-lwtheme-menu-header,
4910#customization-lwtheme-menu-recommended,
4911#customization-lwtheme-menu-footer {
4912 background-color: #A09090;
4913 color: #000000;
4914 margin-right: -10px;
4915 margin-left: -10px;
4916}
4917
4918#customization-lwtheme-menu-header {
4919 margin-top: -10px;
4920 border-top-right-radius: 3px;
4921 border-top-left-radius: 3px;
4922}
4923
4924#customization-lwtheme-menu-recommended {
4925}
4926
4927#customization-lwtheme-menu-footer {
4928 margin-bottom: -10px;
4929 border-bottom-right-radius: 3px;
4930 border-bottom-left-radius: 3px;
4931}
4932
4933.customization-lwtheme-menu-footeritem {
4934 -moz-appearance: none;
4935 -moz-box-flex: 1;
4936 background-color: #C09070;
4937 color: #000000;
4938 border: 1px solid transparent;
4939 padding: 10px;
4940 margin-left: 0;
4941 margin-right: 0;
4942}
4943
4944.customization-lwtheme-menu-footeritem:hover {
4945 background-color: #FFCF00;
4946}
4947
8837ac2c 4948.customization-lwtheme-menu-footeritem:first-child {
cac2a998
RK
4949}
4950
43cc2806
RK
4951/* === END customizeMode.inc.css === */
4952
e28f3f71
RK
4953/* === BEGIN customizeTip.inc.css === */
4954
4955#customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
4956 padding: 0;
4957 margin: 0;
4958 min-width: 400px;
4959 max-width: 1000px;
4960 min-height: 200px;
4961 border-radius: 3px;
4962/* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
4963 border: 1px solid #9C9CFF;
d1e87ec1 4964 color: #FF9F00;
e28f3f71
RK
4965}
4966
4967#customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
4968/* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
4969}
4970
4971.customization-tipPanel-infoBox {
4972 margin: 20px 25px 25px;
4973 width: 25px;
4974 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
4975 background-repeat: no-repeat;
4976}
4977
4978.customization-tipPanel-content {
4979 margin: 25px 0;
4980 font-size: 12px;
4981 line-height: 18px;
4982}
4983
4984.customization-tipPanel-em {
4985 margin: 0;
4986 font-weight: bold;
4987}
4988
4989.customization-tipPanel-contentImage {
4990 margin-top: 25px;
4991 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
4992 min-width: 300px;
4993 max-width: 300px;
4994 min-height: 190px;
4995 max-height: 190px;
4996 display: -moz-box;
4997}
4998
4999.customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5000 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5001}
5002
5003.customization-tipPanel-link {
5004 -moz-appearance: none;
5005 background: transparent;
5006 border: none;
5007 box-shadow: none;
5008 color: #3333FF;
5009 margin: 0;
5010 cursor: pointer;
5011}
5012
5013.customization-tipPanel-link > .button-box > .button-text {
5014 margin: 0 !important;
5015}
5016
5017.customization-tipPanel-closeBox > .close-icon {
5018 -moz-appearance: none;
5019 border: 0;
dae45075 5020 margin-inline-end: -25px;
e28f3f71
RK
5021}
5022
5023#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5024#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5025 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5026}
5027
5028/* === END customizeTip.inc.css === */
5029
c0f6797e
RK
5030/**
5031 * This next rule is a hack to disable subpixel anti-aliasing on all
5032 * labels during the customize mode transition. Subpixel anti-aliasing
5033 * on Windows with Direct2D layers acceleration is particularly slow to
5034 * paint, so this hack is how we sidestep that performance bottleneck.
5035 */
5036#main-window:-moz-any([customize-entering],[customize-exiting]) label {
5037 transform: perspective(0.01px);
5038}
5039
93c91f62 5040#main-window[customize-entered] > #tab-view-deck {
43cc2806
RK
5041 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5042 background-attachment: fixed;
5043}
5044
93c91f62
RK
5045#main-window[customization-lwtheme]:-moz-lwtheme {
5046 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5047 background-repeat: repeat;
5048 background-attachment: fixed;
5049 background-position: left top;
5050}
5051
5401f433
RK
5052#main-window[customize-entered] #browser-bottombox,
5053#main-window[customize-entered] #customization-container {
43cc2806
RK
5054 border-left: 1px solid #9C9CFF;
5055 border-right: 1px solid #9C9CFF;
5056 background-clip: padding-box;
5057}
5058
5401f433
RK
5059#main-window[customize-entered] #browser-bottombox {
5060 border-bottom: 1px solid #9C9CFF;
5061}
5062
e20c83c3
RK
5063#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5064 margin-right: -2px;
5065}
5066
5067#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5068 margin-left: -2px;
5069}
5070
5071/* End customization mode */
5072
51994fad
RK
5073/* Private browsing indicators */
5074
5075/**
5076 * Currently, we have two places where we put private browsing indicators on
5077 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5078 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5079 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5080 * want the bottom border of the image to line up with the bottom of the window
5081 * caption buttons. That's why there's so much special-casing going on in here.
5082 */
5083.private-browsing-indicator {
5084 display: none;
5085 pointer-events: none;
e20c83c3
RK
5086}
5087
51994fad
RK
5088#private-browsing-indicator-titlebar {
5089 display: block;
5090 position: absolute;
e20c83c3
RK
5091}
5092
51994fad
RK
5093#main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5094 display: block;
e20c83c3
RK
5095}
5096
51994fad
RK
5097#main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5098 display: -moz-box;
5099}
5100
5101#TabsToolbar > .private-browsing-indicator {
5102 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
dae45075 5103 margin-inline-start: 4px;
51994fad
RK
5104 width: 48px;
5105}
5106
5107/* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5108 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5109 * min/max/close window buttons.
5110 */
5111#private-browsing-indicator-titlebar > .private-browsing-indicator,
5112#main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5113 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
dae45075 5114 margin-inline-end: 4px;
43cc2806 5115 width: 40px;
51994fad
RK
5116 height: 20px;
5117 position: relative;
43cc2806
RK
5118}
5119
51994fad
RK
5120/* This one is for Linux */
5121#main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5122 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5123 width: 48px;
5124}
5125
5126/* End private browsing indicators */
5127
43cc2806
RK
5128/* === BEGIN UITour.inc.css === */
5129
5130/* UI Tour */
5131
2a8b2b48
RK
5132#UITourHighlightContainer {
5133 -moz-appearance: none;
5134 border: none;
5135 background-color: transparent;
2a1534f1
RK
5136 /* This is a buffer to compensate for the movement in the "wobble" effect,
5137 and for the box-shadow of #UITourHighlight. */
2a8b2b48
RK
5138 padding: 4px;
5139}
5140
5141#UITourHighlight {
5142 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5143 border-radius: 40px;
5144 border: 1px solid #9C9CFF;
5145 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5146 on Linux without an X compositor where opacity is either 0 or 1. */
5147 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
43cc2806
RK
5148 min-height: 32px;
5149 min-width: 32px;
1bf116f8
RK
5150}
5151
2a8b2b48 5152#UITourTooltipBody {
db1c5db1
RK
5153 -moz-box-align: start;
5154}
5155
5156#UITourTooltipTitleContainer {
5157 -moz-box-align: start;
5158 margin-bottom: 10px;
2a8b2b48
RK
5159}
5160
5161#UITourTooltipIcon {
5162 width: 48px;
5163 height: 48px;
db1c5db1 5164 margin-inline-end: 10px;
2a8b2b48
RK
5165}
5166
5167#UITourTooltipTitle,
5168#UITourTooltipDescription {
5169 max-width: 20rem;
43cc2806
RK
5170}
5171
5172#UITourTooltipTitle {
2a8b2b48 5173 font-size: 1.45rem;
43cc2806 5174 font-weight: bold;
db1c5db1 5175 margin: 0;
43cc2806
RK
5176}
5177
5178#UITourTooltipDescription {
dae45075
RK
5179 margin-inline-start: 0;
5180 margin-inline-end: 0;
2a8b2b48
RK
5181 font-size: 1.15rem;
5182 line-height: 1.8rem;
5183 margin-bottom: 0; /* Override global.css */
5184}
5185
5186#UITourTooltipClose {
7c1e433b 5187 position: relative;
2a8b2b48
RK
5188 -moz-appearance: none;
5189 border: none;
5190 background-color: transparent;
5191 min-width: 0;
dae45075 5192 margin-inline-start: 4px;
2a8b2b48
RK
5193 margin-top: -2px;
5194}
5195
5196#UITourTooltipClose > .toolbarbutton-text {
5197 display: none;
5198}
5199
5200#UITourTooltipButtons {
5201 -moz-box-pack: end;
5202 background-color: rgba(0,0,0,.2);
5203 border-top: 1px solid rgba(0,0,0,.4);
7c1e433b 5204 margin: 10px -16px -16px;
db1c5db1 5205 padding: 16px;
2a8b2b48
RK
5206}
5207
19988d2d 5208#UITourTooltipButtons > label,
2a8b2b48
RK
5209#UITourTooltipButtons > button {
5210 margin: 0 15px;
5211}
5212
19988d2d 5213#UITourTooltipButtons > label:first-child,
2a8b2b48 5214#UITourTooltipButtons > button:first-child {
dae45075 5215 margin-inline-start: 0;
2a8b2b48
RK
5216}
5217
db1c5db1
RK
5218#UITourTooltipButtons > label:last-child,
5219#UITourTooltipButtons > button:last-child {
5220 margin-inline-end: 0;
5221}
5222
2a8b2b48
RK
5223#UITourTooltipButtons > button[image] > .button-box > .button-icon {
5224 width: 16px;
5225 height: 16px;
dae45075 5226 margin-inline-end: 5px;
2a8b2b48
RK
5227}
5228
19988d2d 5229#UITourTooltipButtons > label,
2a8b2b48
RK
5230#UITourTooltipButtons > button .button-text {
5231 font-size: 1.15rem;
5232}
5233
5234#UITourTooltipButtons > button:not(.button-link) {
5235 -moz-appearance: none;
5236 background-color: #C09070;
5237 border-radius: 3000px;
5238 border: none;
5239 color: #000000;
5240 padding: 4px 30px;
5241 transition-property: background-color, color;
5242 transition-duration: 150ms;
5243}
5244
5245#UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5246 background-color: #FFCF00;
5247 color: #000000;
5248}
5249
19988d2d 5250#UITourTooltipButtons > label,
2a8b2b48
RK
5251#UITourTooltipButtons > button.button-link {
5252 -moz-appearance: none;
5253 background: transparent;
5254 border: none;
5255 box-shadow: none;
5256 color: rgba(0,0,0,0.35);
5257 padding-left: 10px;
5258 padding-right: 10px;
5259}
5260
5261#UITourTooltipButtons > button.button-link:hover {
5262 color: black;
5263}
5264
5265/* The primary button gets the same color as the customize button. */
5266#UITourTooltipButtons > button.button-primary {
5267 background-color: #A06060; /* LCARS default button background color */
5268 color: #000000;
5269 padding-left: 30px;
5270 padding-right: 30px;
5271}
5272
5273#UITourTooltipButtons > button.button-primary:not(:active):hover {
5274 background-color: #FFCF00;
5275 color: #000000;
43cc2806
RK
5276}
5277
5278/* === END UITour.inc.css === */
c0f6797e
RK
5279
5280#UITourTooltipButtons {
19988d2d 5281 /**
987dae1b 5282 * Override the --arrowpanel-padding so the background extends
19988d2d
RK
5283 * to the sides and bottom of the panel.
5284 */
5285 margin-left: -10px;
5286 margin-right: -10px;
5287 margin-bottom: -10px;
c0f6797e 5288}
fff8097b
RK
5289
5290/* === BEGIN contextmenu.inc.css === */
5291
5292menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5293}
5294
5295#context-navigation > .menuitem-iconic {
5296 -moz-box-flex: 1;
5297 -moz-box-pack: center;
5298 -moz-box-align: center;
5299}
5300
5301#context-navigation > .menuitem-iconic[disabled="true"] {
5302 background-color: transparent;
5303}
5304
5305#context-navigation > .menuitem-iconic > .menu-iconic-left {
5306 -moz-appearance: none;
5307}
5308
868b4137
RK
5309#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5310 width: 16px;
5311 height: 16px;
5312 margin: 7px;
0282321d 5313 filter: url(chrome://global/skin/filters.svg#fill);
868b4137 5314 fill: currentColor;
fff8097b
RK
5315}
5316
868b4137
RK
5317#context-back {
5318 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back");
fff8097b
RK
5319}
5320
868b4137
RK
5321#context-forward {
5322 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward");
fff8097b
RK
5323}
5324
59826146 5325#context-reload {
868b4137 5326 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload");
fff8097b
RK
5327}
5328
59826146 5329#context-stop {
868b4137 5330 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop");
fff8097b
RK
5331}
5332
868b4137
RK
5333#context-bookmarkpage {
5334 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark");
fff8097b
RK
5335}
5336
2e389898 5337#context-bookmarkpage[starred=true] {
868b4137 5338 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked");
2e389898
RK
5339}
5340
fff8097b
RK
5341#context-back:-moz-locale-dir(rtl),
5342#context-forward:-moz-locale-dir(rtl),
5343#context-reload:-moz-locale-dir(rtl) {
5344 transform: scaleX(-1);
5345}
5346
fff8097b
RK
5347#context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
5348#context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
5349 width: 14px;
5350 height: 14px;
5351 margin: 9px;
5352}
5353
20752032
RK
5354#context-media-eme-learnmore {
5355 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5356}
5357
e184b661
RK
5358#context-media-eme-learnmore {
5359 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5360}
5361
fff8097b 5362/* === END contextmenu.inc.css === */
3d64e0ce 5363
1b1f3d09
RK
5364/* Make context menu items larger when opened through touch. */
5365#contentAreaContextMenu[touchmode] menu,
5366#contentAreaContextMenu[touchmode] menuitem {
5367 padding-top: 12px;
5368 padding-bottom: 12px;
5369}
5370
5371#contentAreaContextMenu[touchmode] > #context-navigation > menuitem {
5372 padding-top: 7px;
5373 padding-bottom: 7px;
5374}
5375
3d64e0ce
RK
5376#context-navigation {
5377}
5378
5379#context-sep-navigation {
5380/* margin-top: -4px; */
5381}
b1dfcf32 5382
fa703ff4 5383.browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
b1dfcf32 5384 padding: 0;
fa703ff4 5385 overflow: hidden;
b1dfcf32 5386}
d23bf94a
RK
5387
5388.webextension-popup-browser {
5389 border-radius: inherit;
5390}
1cf9b082
RK
5391
5392.contentSelectDropdown-ingroup > .menu-iconic-text {
5393 padding-inline-start: 20px;
5394}
5395
5396#ContentSelectDropdown > menupopup {
5397 background-color: #000000;
5398 -moz-border-top-colors: #A09090;
5399 -moz-border-right-colors: #A09090;
5400 -moz-border-bottom-colors: #A09090;
5401 -moz-border-left-colors: #A09090;
5402}
5403
5404#ContentSelectDropdown > menupopup > menucaption,
5405#ContentSelectDropdown > menupopup > menuitem {
b1d1a8bb
RK
5406 padding: 0 6px;
5407 border-width: 0;
5408/* font: -moz-list;*/
1cf9b082
RK
5409}
5410
5411#ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text,
5412#ContentSelectDropdown > menupopup > menuitem > .menu-iconic-text {
b1d1a8bb
RK
5413 /* Padding should follow the 4/12 ratio, where 12px is the default font-size
5414 with 4px being the preferred padding size. */
5415 padding-top: .3333em;
5416 padding-bottom: .3333em;
1cf9b082
RK
5417}
5418
5419#ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text {
5420 font-weight: bold;
5421}
5422
5423#ContentSelectDropdown > menupopup > menuitem[_moz-menuactive="true"][disabled="true"] {
5424 color: #A09090;
5425 background-color: unset;
5426}
5427
5428#ContentSelectDropdown > menupopup > menucaption {
5429 background-color: buttonface;
5430}
5431
5432#ContentSelectDropdown > menupopup > menucaption[disabled="true"] {
5433 color: #A09090;
5434}
5435
b1d1a8bb
RK
5436#ContentSelectDropdown > .isOpenedViaTouch > menucaption > .menu-iconic-text,
5437#ContentSelectDropdown > .isOpenedViaTouch > menuitem > .menu-iconic-text {
5438 /* Touch padding should follow the 11/12 ratio, where 12px is the default
5439 font-size with 11px being the preferred padding size. */
5440 padding-top: .9167em;
5441 padding-bottom: .9167em;
1cf9b082 5442}