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