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