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