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