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