projects / themes.git / blame_incremental
? search:
summary | shortlog | log | commit | commitdiff | tree
blob | blame (non-incremental) | history | HEAD
sixth 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 transition: opacity 0.15s ease;
2075}
2076
2077#navigator-toolbox:not(:hover) .urlbar-history-dropmarker {
2078 opacity: 0;
2079}
2080
2081.urlbar-history-dropmarker:hover {
2082}
2083
2084.urlbar-history-dropmarker:hover:active,
2085.urlbar-history-dropmarker[open="true"] {
2086}
2087
2088/* page proxy icon */
2089
2090/* === BEGIN identity-block.inc.css === */
2091
2092#identity-box {
2093 --identity-box-verified-color: #008484;
2094 /* Default theme does different color per channel, we can't as they do it build-time. */
2095 --identity-box-chrome-color: #9C9CFF;
2096
2097 border-inline-end: 1px solid --urlbar-separator-color);
2098 font-size: .9em;
2099 border-radius: 2px;
2100 padding: 3px 5px;
2101 margin-inline-end: 4px;
2102 overflow: hidden;
2103 /* The latter two properties have a transition to handle the delayed hiding of
2104 the forward button when hovered. */
2105 transition: background-color 150ms ease, padding-left, padding-right;
2106}
2107
2108#identity-box:-moz-locale-dir(ltr) {
2109 border-top-right-radius: 0;
2110 border-bottom-right-radius: 0;
2111}
2112
2113#identity-box:-moz-locale-dir(rtl) {
2114 border-top-left-radius: 0;
2115 border-bottom-left-radius: 0;
2116}
2117
2118#urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2119 color: var(--identity-box-chrome-color);
2120 -moz-border-end: 1px solid var(--identity-box-chrome-color);
2121}
2122
2123#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2124 color: var(--identity-box-verified-color);
2125 -moz-border-end: 1px solid var(--identity-box-verified-color);
2126}
2127
2128#notification-popup-box:not([hidden]) + #identity-box {
2129 padding-inline-start: 10px !important;
2130 border-radius: 0;
2131}
2132
2133window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2134/* border-radius: 0; */
2135 -moz-padding-start: 2px;
2136 -moz-padding-end: 2px;
2137 -moz-margin-end: 1px;
2138}
2139
2140window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar >
2141 #notification-popup-box[hidden] + #identity-box {
2142 padding-inline-start: 2px;
2143}
2144
2145window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar >
2146 #notification-popup-box[hidden] + #identity-box {
2147 /* Forward button hiding is delayed when hovered, so we should use the same
2148 delay for the identity box. We handle both horizontal paddings (for LTR and
2149 RTL), the latter two delays here are for padding-left and padding-right. */
2150 transition-delay: 0s, 100s, 100s;
2151}
2152
2153window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar >
2154 #notification-popup-box[hidden] + #identity-box {
2155 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2156 padding-inline-start: 2.01px;
2157}
2158
2159/* TRACKING PROTECTION ICON */
2160
2161#tracking-protection-icon {
2162 width: 16px;
2163 height: 16px;
2164 margin-inline-start: 0;
2165 list-style-image: url("chrome://browser/skin/tracking-protection-16.svg");
2166 opacity: 1;
2167}
2168
2169#tracking-protection-icon[state="loaded-tracking-content"] {
2170 list-style-image: url("chrome://browser/skin/tracking-protection-disabled-16.svg");
2171}
2172
2173#tracking-protection-icon[animate] {
2174 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2175}
2176
2177#tracking-protection-icon:not([state]) {
2178 margin-inline-start: -18px;
2179 pointer-events: none;
2180 opacity: 0;
2181 /* Only animate the shield in, when it disappears hide it immediately. */
2182 transition: none;
2183}
2184
2185#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icons > #tracking-protection-icon {
2186 visibility: collapse;
2187}
2188
2189/* MAIN IDENTITY ICON */
2190
2191#page-proxy-favicon {
2192 width: 16px;
2193 height: 16px;
2194 list-style-image: url("chrome://browser/skin/identity-not-secure.svg");
2195 margin: 2px;
2196}
2197
2198.chromeUI > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2199 list-style-image: url("chrome://branding/content/identity-icons-brand.svg");
2200}
2201
2202.verifiedDomain > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2203.verifiedIdentity > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2204 list-style-image: url("chrome://browser/skin/identity-secure.svg");
2205}
2206
2207.mixedActiveContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2208 list-style-image: url("chrome://browser/skin/identity-mixed-active-loaded.svg");
2209}
2210
2211.weakCipher > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2212.mixedDisplayContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2213.mixedDisplayContentLoadedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2214 list-style-image: url("chrome://browser/skin/identity-mixed-passive-loaded.svg");
2215}
2216
2217.mixedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2218 list-style-image: url("chrome://browser/skin/identity-mixed-active-blocked.svg");
2219}
2220
2221#page-proxy-favicon[pageproxystate="invalid"] {
2222 opacity: 0.3;
2223}
2224
2225#identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon {
2226 list-style-image: url("chrome://branding/content/icon64.png");
2227}
2228
2229#identity-popup-brandName {
2230 font-weight: bold;
2231 font-size: 1.25em;
2232 margin-top: .5em;
2233 margin-bottom: .5em;
2234}
2235
2236#identity-popup-content-box {
2237 max-width: 50ch;
2238}
2239
2240#urlbar[actiontype="searchengine"] > #identity-box > #identity-icons > #page-proxy-favicon {
2241 -moz-image-region: inherit;
2242 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2243 width: 16px;
2244 height: 16px;
2245 opacity: 1;
2246}
2247
2248/* MAIN IDENTITY ICON */
2249
2250#identity-icon {
2251 width: 16px;
2252 height: 16px;
2253 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2254}
2255
2256#identity-box:hover > #identity-icon,
2257#identity-box[open=true] > #identity-icon {
2258 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2259}
2260
2261#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2262 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2263}
2264
2265#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2266 opacity: 0.3;
2267}
2268
2269#urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2270 -moz-image-region: inherit;
2271 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2272 width: 16px;
2273 height: 16px;
2274 opacity: 1;
2275}
2276
2277/* TRACKING PROTECTION ICON */
2278
2279#tracking-protection-icon {
2280 width: 16px;
2281 height: 16px;
2282 margin-inline-start: 2px;
2283 margin-inline-end: 0;
2284 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
2285 opacity: 1;
2286}
2287
2288#tracking-protection-icon[state="loaded-tracking-content"] {
2289 list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
2290}
2291
2292#tracking-protection-icon[animate] {
2293 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2294}
2295
2296#tracking-protection-icon:not([state]) {
2297 margin-inline-end: -18px;
2298 pointer-events: none;
2299 opacity: 0;
2300 /* Only animate the shield in, when it disappears hide it immediately. */
2301 transition: none;
2302}
2303
2304#urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2305 visibility: collapse;
2306}
2307
2308/* CONNECTION ICON */
2309
2310#connection-icon {
2311 width: 16px;
2312 height: 16px;
2313 margin-inline-start: 2px;
2314 visibility: collapse;
2315}
2316
2317#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2318#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon {
2319 list-style-image: url(chrome://browser/skin/identity-secure.svg);
2320 visibility: visible;
2321}
2322
2323#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2324#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2325 list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
2326 visibility: visible;
2327}
2328
2329#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2330#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2331#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
2332 list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2333 visibility: visible;
2334}
2335
2336#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2337 list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg);
2338 visibility: visible;
2339}
2340
2341/* === END identity-block.inc.css === */
2342
2343#page-proxy-favicon {
2344 -moz-image-region: rect(0, 16px, 16px, 0);
2345}
2346
2347window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2348/* -moz-margin-end: 1px;*/
2349}
2350
2351#identity-box:hover > #page-proxy-favicon {
2352 -moz-image-region: rect(0, 32px, 16px, 16px);
2353}
2354
2355#identity-box:hover:active > #page-proxy-favicon,
2356#identity-box[open=true] > #page-proxy-favicon {
2357 -moz-image-region: rect(0, 48px, 16px, 32px);
2358}
2359
2360#identity-box:hover {
2361 background-color: #FFCF00;
2362 color: #000000;
2363}
2364
2365#identity-box:hover:active,
2366#identity-box[open=true] {
2367 background-color: #FF9F00;
2368 color: #000000;
2369}
2370
2371#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2372#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2373#urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2374 background-color: #9C9CFF;
2375 color: #000000;
2376}
2377
2378#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2379#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2380#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2381 background-color: #008484;
2382 color: #000000;
2383}
2384
2385/* autocomplete */
2386
2387#treecolAutoCompleteImage {
2388 max-width: 36px;
2389}
2390
2391.ac-result-type-bookmark,
2392.autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2393 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2394 -moz-image-region: rect(0px 16px 16px 0px);
2395 width: 16px;
2396 height: 16px;
2397}
2398
2399richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2400.autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2401/* -moz-image-region: rect(0px 48px 16px 32px);*/
2402}
2403
2404.ac-result-type-keyword,
2405.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage),
2406richlistitem[type~="action"][actiontype="searchengine"] > .ac-title-box > .ac-site-icon {
2407 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2408 width: 16px;
2409 height: 16px;
2410}
2411
2412 .ac-result-type-keyword[selected="true"],
2413 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected),
2414 richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-title-box > .ac-site-icon {
2415 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2416 }
2417
2418.ac-result-type-tag,
2419.autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2420 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2421 width: 16px;
2422 height: 16px;
2423}
2424
2425.ac-comment,
2426#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description,
2427#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
2428 font-size: 1.05em;
2429}
2430
2431.ac-extra > .ac-comment,
2432.ac-url-text,
2433.ac-action-text {
2434 font-size: 1em;
2435}
2436
2437.ac-url-text,
2438.ac-action-text {
2439 color: #9C9CFF;
2440}
2441
2442richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2443 list-style-image: url("chrome://browser/skin/actionicon-tab.png");
2444 -moz-image-region: rect(0, 16px, 16px, 0);
2445 padding: 0 3px;
2446 width: 22px;
2447 height: 16px;
2448}
2449
2450@media (min-resolution: 1.1dppx) {
2451 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2452 list-style-image: url("chrome://browser/skin/actionicon-tab@2x.png");
2453 -moz-image-region: rect(0, 32px, 32px, 0);
2454 }
2455}
2456
2457richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
2458 -moz-image-region: rect(16px, 16px, 32px, 0);
2459}
2460
2461.autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
2462 color: #8050B0;
2463}
2464
2465.ac-comment[selected="true"],
2466.ac-url-text[selected="true"],
2467.ac-action-text[selected="true"] {
2468 color: inherit !important;
2469}
2470
2471.autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2472.autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2473{
2474 color: #8050B0;
2475 font-size: smaller;
2476}
2477
2478.autocomplete-treebody::-moz-tree-cell(suggesthint) {
2479 border-top: 1px solid #9C9CFF;
2480}
2481
2482/* combined go/reload/stop button in location bar */
2483
2484#urlbar-go-button,
2485#urlbar-reload-button,
2486#urlbar-stop-button {
2487 border-style: none;
2488 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2489/* padding: 0 9px;*/
2490 margin-inline-start: 0px;
2491 border-inline-start: 1px solid var(--urlbar-separator-color);
2492 border-image: linear-gradient(transparent 15%,
2493 var(--urlbar-separator-color) 15%,
2494 var(--urlbar-separator-color) 85%,
2495 transparent 85%);
2496 border-image-slice: 1;
2497}
2498
2499#urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2500 border-top-left-radius: 0px;
2501 border-bottom-left-radius: 0px;
2502}
2503
2504#urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2505 border-top-right-radius: 0px;
2506 border-bottom-right-radius: 0px;
2507}
2508
2509#urlbar > toolbarbutton:not([disabled=true]):active:hover,
2510#urlbar-reload-button:not(:hover) {
2511 -moz-border-start-style: none;
2512 -moz-padding-start: 3px;
2513}
2514
2515#urlbar-reload-button {
2516 -moz-image-region: rect(0px, 14px, 14px, 0px);
2517}
2518
2519#urlbar-reload-button[disabled=true] {
2520 -moz-image-region: rect(28px, 14px, 42px, 0px);
2521}
2522
2523#urlbar-reload-button:not([disabled=true]):hover {
2524 -moz-image-region: rect(14px, 14px, 28px, 0px);
2525}
2526
2527#urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2528 transform: scaleX(-1);
2529}
2530
2531#urlbar-go-button {
2532 -moz-image-region: rect(0, 42px, 14px, 28px);
2533}
2534
2535#urlbar-go-button:hover {
2536 -moz-image-region: rect(14px, 42px, 28px, 28px);
2537}
2538
2539#urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2540 transform: scaleX(-1);
2541}
2542
2543#urlbar-stop-button {
2544 -moz-image-region: rect(0px, 28px, 14px, 14px);
2545}
2546
2547#urlbar-stop-button:hover {
2548 -moz-image-region: rect(14px, 28px, 28px, 14px);
2549}
2550
2551@media (min-resolution: 1.1dppx) {
2552 #urlbar-go-button,
2553 #urlbar-reload-button,
2554 #urlbar-stop-button {
2555 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2556 }
2557
2558 #urlbar-go-button > .toolbarbutton-icon,
2559 #urlbar-reload-button > .toolbarbutton-icon,
2560 #urlbar-stop-button > .toolbarbutton-icon {
2561 width: 14px;
2562 }
2563
2564 #urlbar-go-button {
2565 -moz-image-region: rect(0, 84px, 28px, 56px);
2566 }
2567
2568 #urlbar-go-button:hover {
2569 -moz-image-region: rect(28px, 84px, 56px, 56px);
2570 }
2571
2572 #urlbar-go-button:hover:active {
2573 -moz-image-region: rect(56px, 84px, 84px, 56px);
2574 }
2575
2576 #urlbar-reload-button {
2577 -moz-image-region: rect(0, 28px, 28px, 0);
2578 }
2579
2580 #urlbar-reload-button:not([disabled]):hover {
2581 -moz-image-region: rect(28px, 28px, 56px, 0);
2582 }
2583
2584 #urlbar-reload-button:not([disabled]):hover:active {
2585 -moz-image-region: rect(56px, 28px, 84px, 0);
2586 }
2587
2588 #urlbar-stop-button {
2589 -moz-image-region: rect(0, 56px, 28px, 28px);
2590 }
2591
2592 #urlbar-stop-button:not([disabled]):hover {
2593 -moz-image-region: rect(28px, 56px, 56px, 28px);
2594 }
2595
2596 #urlbar-stop-button:hover:active {
2597 -moz-image-region: rect(56px, 56px, 84px, 28px);
2598 }
2599}
2600
2601/* popup blocker button */
2602
2603#page-report-button {
2604 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2605 -moz-image-region: rect(0, 16px, 16px, 0);
2606}
2607
2608#page-report-button:hover ,
2609#page-report-button:hover:active,
2610#page-report-button[open="true"] {
2611 -moz-image-region: rect(0, 32px, 16px, 16px);
2612}
2613
2614/* Reader mode button */
2615
2616#reader-mode-button {
2617 list-style-image: url("chrome://browser/skin/readerMode.svg");
2618 -moz-image-region: rect(0, 16px, 16px, 0);
2619}
2620
2621#reader-mode-button:hover,
2622#reader-mode-button[readeractive]:hover {
2623 -moz-image-region: rect(0, 32px, 16px, 16px);
2624}
2625
2626#reader-mode-button:hover:active,
2627#reader-mode-button[readeractive] {
2628 -moz-image-region: rect(0, 48px, 16px, 32px);
2629}
2630
2631/* social share panel */
2632
2633.social-share-frame {
2634 min-width: 756px;
2635 height: 150px;
2636}
2637
2638#share-container {
2639 min-width: 756px;
2640 background-color: white;
2641 background-repeat: no-repeat;
2642 background-position: center center;
2643}
2644#share-container[loading] {
2645 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2646}
2647#share-container > browser {
2648 transition: opacity 150ms ease-in-out;
2649 opacity: 1;
2650}
2651#share-container[loading] > browser {
2652 opacity: 0;
2653}
2654
2655.social-share-toolbar {
2656 border-bottom: 1px solid #9C9CFF;
2657 padding: 2px;
2658}
2659
2660#social-share-provider-buttons {
2661 padding: 0;
2662 margin: 0;
2663}
2664
2665.share-provider-button {
2666 padding: 5px;
2667 margin: 2px;
2668}
2669
2670.share-provider-button > .toolbarbutton-text {
2671 display: none;
2672}
2673.share-provider-button > .toolbarbutton-icon {
2674 width: 16px;
2675 min-height: 16px;
2676 max-height: 16px;
2677}
2678
2679/* fixup corners for share panel */
2680.social-panel > .social-panel-frame {
2681 border-radius: inherit;
2682}
2683
2684#social-share-panel {
2685 min-height: 100px;
2686 min-width: 766px;
2687}
2688
2689#share-container,
2690.social-share-frame {
2691 border-top-left-radius: 0;
2692 border-bottom-left-radius: inherit;
2693 border-top-right-radius: 0;
2694 border-bottom-right-radius: inherit;
2695}
2696
2697#social-share-panel > .social-share-toolbar {
2698 border-top-left-radius: inherit;
2699 border-top-right-radius: inherit;
2700}
2701
2702#social-share-provider-buttons {
2703 border-top-left-radius: inherit;
2704 border-top-right-radius: inherit;
2705}
2706
2707/* social recommending panel */
2708
2709#social-mark-button {
2710 -moz-image-region: rect(0, 16px, 16px, 0);
2711}
2712
2713/* bookmarks menu-button */
2714
2715#bookmarks-menu-button.bookmark-item {
2716 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2717 -moz-image-region: rect(0px 16px 16px 0px);
2718}
2719
2720#bookmarks-menu-button.bookmark-item[starred] {
2721 -moz-image-region: rect(0px 32px 16px 16px);
2722}
2723
2724#nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2725 padding-top: 2px;
2726 padding-bottom: 2px;
2727}
2728
2729#BMB_bookmarksPopup[side="top"],
2730#BMB_bookmarksPopup[side="bottom"] {
2731 margin-left: -20px;
2732 margin-right: -20px;
2733}
2734
2735#BMB_bookmarksPopup[side="left"],
2736#BMB_bookmarksPopup[side="right"] {
2737 margin-top: -20px;
2738 margin-bottom: -20px;
2739}
2740
2741/* bookmarking panel */
2742
2743#editBookmarkPanelStarIcon {
2744 list-style-image: url("chrome://browser/skin/places/starred48.png");
2745 width: 48px;
2746 height: 48px;
2747}
2748
2749#editBookmarkPanelStarIcon[unstarred] {
2750 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2751}
2752
2753#editBookmarkPanelTitle {
2754 font-size: 130%;
2755}
2756
2757#editBookmarkPanelHeader,
2758#editBookmarkPanelContent {
2759 margin-bottom: .5em;
2760}
2761
2762/* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2763#editBMPanel_folderTree {
2764 min-width: 27em;
2765}
2766
2767.panel-promo-box {
2768 margin: 5px 0 -6px;
2769 padding: 5px 0;
2770 border-top: 1px solid #9C9CFF;
2771 border-bottom-left-radius: 5px;
2772 border-bottom-right-radius: 5px;
2773}
2774
2775.panel-promo-icon {
2776 list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2777 -moz-margin-end: 10px;
2778 vertical-align: middle;
2779}
2780
2781.panel-promo-closebutton {
2782 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2783 -moz-margin-end: -3px;
2784 margin-top: -3px;
2785}
2786
2787.panel-promo-closebutton:hover {
2788 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2789}
2790
2791.panel-promo-closebutton:hover:active {
2792 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2793}
2794
2795.panel-promo-closebutton > .toolbarbutton-text {
2796 padding: 0;
2797}
2798
2799/* ::::: content area ::::: */
2800
2801#sidebar-box {
2802 background-color: #9C9CFF;
2803 color: #000000;
2804}
2805
2806#sidebar {
2807 background-color: #000000;
2808}
2809
2810#sidebar-splitter {
2811 -moz-margin-start: 0;
2812}
2813
2814#sidebar-header {
2815 color: #000000;
2816 padding: 2px;
2817}
2818
2819#sidebar-title {
2820 -moz-padding-start: 0px;
2821}
2822
2823#sidebar-header > .close-icon {
2824/* padding: 4px 2px;
2825 margin: 0;
2826 border: none;*/
2827 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2828}
2829
2830#sidebar-header > .close-icon:hover,
2831#sidebar-header > .close-icon:hover:active {
2832 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2833}
2834
2835#sidebar-splitter:-moz-locale-dir(ltr),
2836#sidebar:-moz-locale-dir(ltr) {
2837 border-radius: 0 5px 0 0;
2838}
2839
2840#sidebar-splitter:-moz-locale-dir(rtl),
2841#sidebar:-moz-locale-dir(rtl) {
2842 border-radius: 5px 0 0 0;
2843}
2844
2845.browserContainer > findbar {
2846/*
2847 background-color: -moz-dialog;
2848 color: -moz-DialogText;
2849*/
2850}
2851
2852/* Tabstrip */
2853
2854#TabsToolbar {
2855 min-height: 0;
2856 padding: 0;
2857 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2858}
2859
2860#TabsToolbar .toolbar-holder {
2861 background-color: #000000; /* correct effect of being an actual toolbar */
2862}
2863
2864#main-window[disablechrome] #TabsToolbar,
2865#TabsToolbar[tabsontop="false"] {
2866 border-bottom: 1px solid #008484;
2867}
2868
2869/* === BEGIN tabs.inc.css === */
2870
2871:root {
2872 /* --tab-toolbar-navbar-overlap: 1px; */
2873 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2874 /* --tab-min-height: 31px; */
2875}
2876#TabsToolbar {
2877 /* --tab-stroke-background-size: auto 100%; */
2878}
2879
2880.tabbrowser-tab,
2881.tabs-newtab-button,
2882#TabsToolbar > #new-tab-button {
2883 margin-top: 0px;
2884}
2885
2886.tabbrowser-tab {
2887 padding: 1px 4px 2px;
2888}
2889
2890.tabbrowser-tab:first-of-type {
2891 -moz-margin-start: 2px;
2892}
2893
2894.tabs-newtab-button,
2895#TabsToolbar > #new-tab-button {
2896 border-radius: 8px 8px 0px 0px;
2897 -moz-margin-start: 0;
2898}
2899
2900.tabs-newtab-button:not(:hover),
2901#TabsToolbar > #new-tab-button:not(:hover) {
2902 background-color: #C09070;
2903}
2904
2905/* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2906.tabbrowser-tab[visuallyselected=true] {
2907/* position: relative;
2908 z-index: 2;*/
2909}
2910
2911.tab-background-middle {
2912}
2913
2914.tab-content {
2915}
2916
2917.tab-content[pinned] {
2918}
2919
2920.tab-throbber,
2921.tab-icon-image,
2922.tab-icon-sound,
2923.tab-close-button {
2924}
2925
2926.tab-throbber,
2927.tab-icon-image {
2928 height: 16px;
2929 width: 16px;
2930 -moz-margin-end: 3px;
2931}
2932
2933.tab-icon-image {
2934 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2935}
2936
2937.tab-icon-overlay {
2938 width: 16px;
2939 height: 16px;
2940 margin-top: -8px;
2941 -moz-margin-start: -15px;
2942 position: relative;
2943}
2944
2945.tab-icon-overlay[crashed] {
2946 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2947}
2948
2949.tab-icon-overlay[soundplaying],
2950.tab-icon-overlay[muted]:not([crashed]) {
2951 border-radius: 10px;
2952}
2953
2954.tab-icon-overlay[soundplaying]:hover,
2955.tab-icon-overlay[muted]:hover {
2956 background-color: #FFCF00;
2957}
2958
2959.tab-icon-overlay[soundplaying] {
2960 display: -moz-box;
2961 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2962}
2963
2964.tab-icon-overlay[muted]:not([crashed]) {
2965 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2966}
2967
2968#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2969 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2970}
2971
2972
2973#TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2974 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2975}
2976
2977.tab-throbber[busy] {
2978 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2979}
2980
2981.tab-throbber[progress] {
2982 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2983}
2984
2985.tab-throbber[pinned],
2986.tab-icon-image[pinned] {
2987 -moz-margin-start: 2px;
2988 -moz-margin-end: 2px;
2989}
2990
2991.tab-label {
2992 /* this needs to add up to the 16px of the icon image */
2993 height: 12px;
2994 margin-top: 2px !important;
2995 margin-bottom: 2px !important;
2996}
2997
2998.tab-icon-sound {
2999 -moz-margin-start: 4px;
3000 width: 16px;
3001 height: 16px;
3002 padding: 0;
3003}
3004
3005.tab-icon-sound[muted] {
3006 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3007}
3008
3009.tab-icon-sound[muted]:hover {
3010 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
3011}
3012
3013.tab-icon-sound[muted]:hover:active {
3014 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
3015}
3016
3017.tab-icon-sound[soundplaying] {
3018 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
3019}
3020
3021.tab-icon-sound[soundplaying]:hover {
3022 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
3023}
3024
3025.tab-icon-sound[soundplaying]:hover:active {
3026 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
3027}
3028
3029.tab-icon-sound[muted] {
3030 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
3031}
3032
3033.tab-icon-sound[muted]:hover {
3034 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
3035}
3036
3037.tab-icon-sound[muted]:hover:active {
3038 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
3039}
3040
3041.tab-icon-sound[visuallyselected=true][soundplaying] {
3042 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
3043}
3044
3045.tab-icon-sound[visuallyselected=true][soundplaying]:hover {
3046 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
3047}
3048
3049.tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
3050 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
3051}
3052
3053.tab-icon-sound[visuallyselected=true][muted] {
3054 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3055}
3056
3057.tab-icon-sound[visuallyselected=true][muted]:hover {
3058 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
3059}
3060
3061.tab-icon-sound[visuallyselected=true][muted]:hover:active {
3062 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
3063}
3064
3065#TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
3066 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
3067}
3068
3069#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
3070 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
3071}
3072
3073#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
3074 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
3075}
3076
3077#TabsToolbar[brighttext] .tab-icon-sound[muted] {
3078 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
3079}
3080
3081#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
3082 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
3083}
3084
3085#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
3086 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
3087}
3088
3089.tab-close-button {
3090 margin-top: 1px;
3091 padding: 0;
3092}
3093
3094.tab-background,
3095.tabs-newtab-button {
3096 /* overlap the tab curves */
3097}
3098
3099.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
3100}
3101
3102/* Tab Overflow */
3103.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
3104.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3105}
3106
3107.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3108.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
3109}
3110
3111.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3112}
3113
3114.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3115}
3116
3117.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3118.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3119}
3120
3121.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3122.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3123}
3124
3125.tab-background-start[visuallyselected=true]::after,
3126.tab-background-start[visuallyselected=true]::before,
3127.tab-background-start,
3128.tab-background-end,
3129.tab-background-end[visuallyselected=true]::after,
3130.tab-background-end[visuallyselected=true]::before {
3131}
3132
3133.tabbrowser-tab:not([visuallyselected=true]),
3134.tabbrowser-tab:-moz-lwtheme {
3135}
3136
3137/* tabbrowser-tab focus ring */
3138.tabbrowser-tab:focus {
3139 outline: 1px dotted;
3140}
3141
3142/* Selected tab */
3143
3144.tabbrowser-tab[visuallyselected="true"] {
3145}
3146
3147/* End selected tab */
3148
3149/* User Context UI - change tab decoration depending on userContextId.
3150 Defaults to gray for unknown usercontextids. */
3151.tabbrowser-tab[usercontextid] {
3152 background-image: linear-gradient(to right, transparent 20%, #A09090 30%, #A09090 70%, transparent 80%);
3153 background-size: auto 2px;
3154 background-repeat: no-repeat;
3155}
3156
3157/* Personal User Context */
3158.tabbrowser-tab[usercontextid="1"] {
3159 background-image: linear-gradient(to right, transparent 20%, #9C9CFF 30%, #9C9CFF 70%, transparent 80%);
3160}
3161/* Work User Context */
3162.tabbrowser-tab[usercontextid="2"] {
3163 background-image: linear-gradient(to right, transparent 20%, #FF9F00 30%, #FF9F00 70%, transparent 80%);
3164}
3165/* Banking User Context */
3166.tabbrowser-tab[usercontextid="3"] {
3167 background-image: linear-gradient(to right, transparent 20%, #008484 30%, #008484 70%, transparent 80%);
3168}
3169/* Shopping User Context */
3170.tabbrowser-tab[usercontextid="4"] {
3171 background-image: linear-gradient(to right, transparent 20%, #E7ADE7 30%, #E7ADE7 70%, transparent 80%);
3172}
3173
3174/* Tab pointer-events */
3175/*
3176.tabbrowser-tab {
3177 pointer-events: none;
3178}
3179
3180.tab-background-middle,
3181.tabs-newtab-button,
3182.tab-icon-overlay[soundplaying],
3183.tab-icon-overlay[muted]:not([crashed]),
3184.tab-icon-sound,
3185.tab-close-button {
3186 pointer-events: auto;
3187}
3188*/
3189/* Pinned tabs */
3190
3191.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
3192 background-color: #E7ADE7;
3193}
3194
3195.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]):hover {
3196 background-color: #3333FF;
3197 color: #000000;
3198}
3199
3200/* Tab separators */
3201/*
3202.tabbrowser-tab::after,
3203.tabbrowser-tab::before {
3204 width: 1px;
3205 -moz-margin-start: -1px;
3206 background-image: linear-gradient(transparent 5px,
3207 currentColor 5px,
3208 currentColor calc(100% - 4px),
3209 transparent calc(100% - 4px));
3210 opacity: 0.2;
3211}
3212
3213#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3214#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3215 opacity: 0.4;
3216}
3217*/
3218/* Also show separators beside the selected tab when dragging it. */
3219/*
3220#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3221.tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3222#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
3223 content: "";
3224 display: -moz-box;
3225}
3226*/
3227/* New tab button */
3228
3229.tabs-newtab-button {
3230 width: 28px;
3231 /* width: calc(36px + var(--tab-curve-width)); */
3232}
3233
3234/* === END tabs.inc.css === */
3235
3236/* Background tabs:
3237 *
3238 * Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
3239 * of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
3240 * the titlebar. We don't need this in fullscreen since window dragging is not an issue there.
3241 */
3242#main-window[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar .tab-background-middle:not([visuallyselected=true]) {
3243/* clip-path: url(chrome://browser/content/browser.xul#tab-hover-clip-path);*/
3244}
3245
3246/* Tab DnD indicator */
3247.tab-drop-indicator {
3248 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3249 margin-bottom: -11px;
3250}
3251
3252/* Tab close button */
3253.tab-close-button {
3254 list-style-image: url("chrome://global/skin/icons/close-button.gif");
3255}
3256
3257.tab-close-button:hover,
3258.tab-close-button:hover[selected="true"] {
3259 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3260}
3261
3262.tab-close-button:hover:active,
3263.tab-close-button:hover:active[selected="true"] {
3264 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3265}
3266
3267/* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3268
3269.tabbrowser-arrowscrollbox > .scrollbutton-up,
3270.tabbrowser-arrowscrollbox > .scrollbutton-down {
3271 margin: 0;
3272 padding-top: 0;
3273 padding-bottom: 0;
3274 background-origin: border-box;
3275}
3276
3277#main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3278#main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3279.tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3280.tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3281 }
3282
3283.tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3284.tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3285 }
3286
3287.tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3288.tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3289/* transform: scaleX(-1);*/
3290}
3291
3292.tabbrowser-arrowscrollbox > .scrollbutton-down {
3293 transition: 1s background-color ease-out;
3294}
3295
3296.tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3297 background-color: #008484;
3298}
3299
3300.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3301.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3302/* border-width: 0 2px 0 0;
3303 border-style: solid;
3304 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3305}
3306
3307.tabs-newtab-button > .toolbarbutton-icon {
3308 margin-top: -1px;
3309 margin-bottom: -1px;
3310}
3311
3312.tabs-newtab-button,
3313#TabsToolbar > #new-tab-button,
3314#TabsToolbar > toolbarpaletteitem > #new-tab-button,
3315#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3316 list-style-image: url("chrome://browser/skin/tabbrowser/newtabFx.png");
3317 -moz-image-region: rect(0, 16px, 18px, 0);
3318}
3319
3320.tabs-newtab-button,
3321.tabs-newtab-button:hover,
3322#TabsToolbar > #new-tab-button,
3323#TabsToolbar > #new-tab-button:hover {
3324 -moz-image-region: rect(0, 32px, 18px, 16px);
3325}
3326
3327#main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3328#main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3329#main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3330.tabs-newtab-button:-moz-lwtheme-brighttext,
3331#TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3332#TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3333}
3334
3335#TabsToolbar > #new-tab-button {
3336 width: 26px;
3337}
3338
3339#alltabs-button {
3340 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3341}
3342
3343#alltabs-button:hover,
3344#alltabs-button:hover:active,
3345#alltabs-button[open="true"] {
3346 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3347}
3348
3349#main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3350#alltabs-button:-moz-lwtheme-brighttext {
3351}
3352
3353#alltabs-button > .toolbarbutton-icon {
3354/* margin: 0 2px;*/
3355}
3356
3357#alltabs-button > .toolbarbutton-menu-dropmarker {
3358 display: none;
3359}
3360
3361/* All tabs menupopup */
3362.alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3363 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3364 -moz-image-region: auto;
3365}
3366
3367.alltabs-item[selected="true"] {
3368 font-weight: bold;
3369}
3370
3371.alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3372 list-style-image: url("chrome://global/skin/icons/loading.gif");
3373}
3374
3375.alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3376 background-color: #402800;
3377}
3378
3379.alltabs-endimage[muted] {
3380 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3381}
3382
3383.alltabs-endimage[soundplaying] {
3384 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
3385}
3386
3387toolbarbutton.chevron {
3388 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3389}
3390
3391toolbarbutton.chevron:hover {
3392 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3393}
3394/*
3395toolbar[brighttext] toolbarbutton.chevron {
3396 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3397}
3398*/
3399toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3400toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3401 transform: scaleX(-1);
3402}
3403
3404toolbarbutton.chevron > .toolbarbutton-text,
3405toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3406 display: none;
3407}
3408
3409toolbarbutton.chevron > .toolbarbutton-icon {
3410 margin: 0;
3411}
3412
3413#sidebar-throbber[loading="true"] {
3414 list-style-image: url("chrome://global/skin/icons/loading.gif");
3415 -moz-margin-end: 4px;
3416}
3417
3418/* Bookmarks toolbar */
3419#PlacesToolbarDropIndicator {
3420 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3421}
3422
3423toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3424 background-color: #008484 !important;
3425 color: #FFCF00 !important;
3426}
3427
3428/* rules for menupopup drop indicators */
3429.menupopup-drop-indicator-bar {
3430 position: relative;
3431 /* these two margins must together compensate the indicator's height */
3432 margin-top: -1px;
3433 margin-bottom: -1px;
3434}
3435
3436.menupopup-drop-indicator {
3437 list-style-image: none;
3438 height: 2px;
3439 -moz-margin-end: -4em;
3440 background-color: #008484;
3441}
3442
3443/* === BEGIN notification-icons.inc.css === */
3444
3445.popup-notification-icon {
3446 width: 64px;
3447 height: 64px;
3448 -moz-margin-end: 10px;
3449}
3450
3451.popup-notification-icon[popupid="geolocation"] {
3452 list-style-image: url("chrome://browser/skin/Geolocation-64.png");
3453}
3454
3455.popup-notification-icon[popupid="xpinstall-disabled"],
3456.popup-notification-icon[popupid="addon-install-blocked"],
3457.popup-notification-icon[popupid="addon-install-origin-blocked"] {
3458 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3459}
3460
3461.popup-notification-icon[popupid="addon-progress"] {
3462 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3463}
3464
3465.popup-notification-icon[popupid="addon-install-failed"] {
3466 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3467}
3468
3469.popup-notification-icon[popupid="addon-install-confirmation"] {
3470 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3471}
3472
3473#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3474 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3475}
3476
3477.popup-notification-icon[popupid="addon-install-complete"] {
3478 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3479}
3480
3481.popup-notification-icon[popupid="addon-install-restart"] {
3482 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3483}
3484
3485.popup-notification-icon[popupid="click-to-play-plugins"] {
3486 list-style-image: url("chrome://mozapps/skin/plugins/pluginBlocked-64.png");
3487}
3488
3489.popup-notification-icon[popupid="web-notifications"] {
3490 list-style-image: url("chrome://browser/skin/web-notifications-icon.svg");
3491}
3492
3493.popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3494.popup-notification-icon[popupid*="offline-app-requested"],
3495.popup-notification-icon[popupid="offline-app-usage"] {
3496 list-style-image: url("chrome://global/skin/icons/alert-question.gif");
3497}
3498
3499.popup-notification-icon[popupid="password"] {
3500 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
3501}
3502
3503.popup-notification-icon[popupid="webapps-install-progress"],
3504.popup-notification-icon[popupid="webapps-install"] {
3505 list-style-image: url("chrome://global/skin/icons/webapps-64.png");
3506}
3507
3508.popup-notification-icon[popupid="webRTC-sharingDevices"],
3509.popup-notification-icon[popupid="webRTC-shareDevices"] {
3510 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-64.png");
3511}
3512
3513.popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3514.popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3515 list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-64.png");
3516}
3517
3518.popup-notification-icon[popupid="webRTC-sharingScreen"],
3519.popup-notification-icon[popupid="webRTC-shareScreen"] {
3520 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64.png);
3521}
3522
3523.popup-notification-icon[popupid="pointerLock"] {
3524 list-style-image: url("chrome://browser/skin/pointerLock-64.png");
3525}
3526
3527/* Notification icon box */
3528#notification-popup .panel-promo-box {
3529/* margin: 10px -10px -10px; */
3530}
3531
3532#notification-popup-box {
3533 position: relative;
3534 background-color: #000000;
3535 background-clip: padding-box;
3536 padding-left: 3px;
3537 padding-right: 8px;
3538 border-radius: 3px 0 0 3px;
3539 border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
3540 -moz-margin-end: -8px;
3541 border-right-width: 8px;
3542}
3543
3544window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box {
3545/* padding-left: 7px; */
3546}
3547
3548/* This changes the direction of the main notification box on the url bar. */
3549#notification-popup-box:-moz-locale-dir(rtl),
3550/* This adds a second flip for the notification anchors, as they don't switch direction
3551 for RTL mode. */
3552.notification-anchor-icon:-moz-locale-dir(rtl) {
3553 transform: scaleX(-1);
3554}
3555
3556/* For the anchor icons in the chat window, we don't have the notification popup box,
3557 so we need to cancel the RTL transform. */
3558.notification-anchor-icon.chat-toolbarbutton:-moz-locale-dir(rtl) {
3559 transform: none;
3560}
3561
3562.notification-anchor-icon {
3563 list-style-image: url("chrome://global/skin/icons/information-16.png");
3564
3565 width: 16px;
3566 height: 16px;
3567 margin: 0 2px;
3568}
3569
3570.notification-anchor-icon:-moz-focusring {
3571 outline: 1px dotted #008484;
3572}
3573
3574.identity-notification-icon,
3575#identity-notification-icon {
3576 list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
3577}
3578
3579.geo-notification-icon,
3580#geo-notification-icon {
3581 list-style-image: url("chrome://browser/skin/Geolocation-16.png");
3582}
3583
3584#addons-notification-icon {
3585 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3586}
3587
3588#addons-notification-icon:hover {
3589 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover);
3590}
3591
3592#addons-notification-icon:hover:active {
3593 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active);
3594}
3595
3596.indexedDB-notification-icon,
3597#indexedDB-notification-icon {
3598 list-style-image: url("chrome://global/skin/icons/question-16.png");
3599}
3600
3601#password-notification-icon {
3602 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
3603}
3604
3605#login-fill-notification-icon {
3606 /* Temporary icon until the capture and fill doorhangers are unified. */
3607 list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png);
3608 transform: scaleX(-1);
3609}
3610
3611#webapps-notification-icon {
3612 list-style-image: url("chrome://gobal/skin/icons/webapps-16.png");
3613}
3614
3615#plugins-notification-icon {
3616 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
3617}
3618
3619#plugins-notification-icon.plugin-hidden {
3620 list-style-image: url("chrome://browser/skin/notification-pluginAlert.png");
3621}
3622
3623#plugins-notification-icon.plugin-blocked {
3624 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
3625}
3626
3627#plugins-notification-icon {
3628/* -moz-image-region: rect(0, 16px, 16px, 0);*/
3629}
3630
3631#plugins-notification-icon:hover {
3632/* -moz-image-region: rect(0, 32px, 16px, 16px);*/
3633}
3634
3635#notification-popup-box[hidden] {
3636 /* Override display:none to make the pluginBlockedNotification animation work
3637 when showing the notification repeatedly. */
3638 display: -moz-box;
3639 visibility: collapse;
3640}
3641
3642#plugins-notification-icon.plugin-blocked[showing] {
3643 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3644}
3645
3646@keyframes pluginBlockedNotification {
3647 from {
3648 opacity: 0;
3649 }
3650 to {
3651 opacity: 1;
3652 }
3653}
3654
3655.webRTC-shareDevices-notification-icon,
3656#webRTC-shareDevices-notification-icon {
3657 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png");
3658}
3659
3660.webRTC-sharingDevices-notification-icon,
3661#webRTC-sharingDevices-notification-icon {
3662 list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png");
3663}
3664
3665.webRTC-shareMicrophone-notification-icon,
3666#webRTC-shareMicrophone-notification-icon {
3667 list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-16.png");
3668}
3669
3670.webRTC-sharingMicrophone-notification-icon,
3671#webRTC-sharingMicrophone-notification-icon {
3672 list-style-image: url("chrome://browser/skin/webRTC-sharingMicrophone-16.png");
3673}
3674
3675.webRTC-shareScreen-notification-icon,
3676#webRTC-shareScreen-notification-icon {
3677 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3678}
3679
3680.webRTC-sharingScreen-notification-icon,
3681#webRTC-sharingScreen-notification-icon {
3682 list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16.png);
3683}
3684
3685.web-notifications-notification-icon,
3686#web-notifications-notification-icon {
3687 list-style-image: url("chrome://browser/skin/web-notifications-tray.svg");
3688 -moz-image-region: rect(0, 16px, 16px, 0);
3689}
3690
3691.web-notifications-notification-icon:hover,
3692#web-notifications-notification-icon:hover {
3693 -moz-image-region: rect(0, 32px, 16px, 16px);
3694}
3695
3696.web-notifications-notification-icon:hover:active,
3697#web-notifications-notification-icon:hover:active {
3698 -moz-image-region: rect(0, 48px, 16px, 32px);
3699}
3700
3701#pointerLock-notification-icon {
3702 list-style-image: url("chrome://browser/skin/pointerLock-16.png");
3703}
3704
3705.translate-notification-icon,
3706#translate-notification-icon {
3707 list-style-image: url("chrome://browser/skin/translation-16.png");
3708 -moz-image-region: rect(0px, 16px, 16px, 0px);
3709}
3710
3711.translated-notification-icon,
3712#translated-notification-icon {
3713 list-style-image: url("chrome://browser/skin/translation-16.png");
3714 -moz-image-region: rect(0px, 32px, 16px, 16px);
3715}
3716
3717.popup-notification-icon[popupid="servicesInstall"] {
3718 list-style-image: url("chrome://browser/skin/social/services-64.png");
3719}
3720#servicesInstall-notification-icon {
3721 list-style-image: url("chrome://browser/skin/social/services-16.png");
3722}
3723
3724/* EME notifications */
3725
3726.popup-notification-icon[popupid="drmContentPlaying"],
3727#eme-notification-icon {
3728 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3729}
3730
3731#eme-notification-icon:hover:active {
3732 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3733}
3734
3735#eme-notification-icon[firstplay=true] {
3736 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3737}
3738
3739@keyframes emeTeachingMoment {
3740 0% {transform: translateX(0); }
3741 25% {transform: translateX(3px) }
3742 75% {transform: translateX(-3px) }
3743 100% { transform: translateX(0); }
3744}
3745
3746/* HiDPI notification icons */
3747@media (min-resolution: 1.1dppx) {
3748/* #notification-popup-box {
3749 border-image: url("chrome://browser/skin/urlbar-arrow@2x.png") 0 16 0 0 fill;
3750 }
3751*/
3752 .notification-anchor-icon {
3753 list-style-image: url(chrome://global/skin/icons/information-32.png);
3754 }
3755
3756 .webRTC-shareDevices-notification-icon,
3757 #webRTC-shareDevices-notification-icon {
3758 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png);
3759 }
3760
3761 .webRTC-sharingDevices-notification-icon,
3762 #webRTC-sharingDevices-notification-icon {
3763 list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png);
3764 }
3765
3766 .webRTC-shareMicrophone-notification-icon,
3767 #webRTC-shareMicrophone-notification-icon {
3768 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png);
3769 }
3770
3771 .webRTC-sharingMicrophone-notification-icon,
3772 #webRTC-sharingMicrophone-notification-icon {
3773 list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png);
3774 }
3775
3776 .webRTC-shareScreen-notification-icon,
3777 #webRTC-shareScreen-notification-icon {
3778 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16@2x.png);
3779 }
3780
3781 .webRTC-sharingScreen-notification-icon,
3782 #webRTC-sharingScreen-notification-icon {
3783 list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16@2x.png);
3784 }
3785
3786 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3787 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3788 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64@2x.png);
3789 }
3790
3791 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3792 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3793 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png);
3794 }
3795
3796 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3797 .popup-notification-icon[popupid="webRTC-shareScreen"] {
3798 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64@2x.png);
3799 }
3800}
3801
3802/* === END notification-icons.inc.css === */
3803
3804.popup-notification-body[popupid="addon-progress"],
3805.popup-notification-body[popupid="addon-install-confirmation"] {
3806 width: 28em;
3807 max-width: 28em;
3808}
3809
3810/* Translation infobar */
3811
3812/* === BEGIN infobar.inc.css === */
3813
3814notification[value="translation"] .messageImage {
3815 list-style-image: url("chrome://browser/skin/translation-16.png");
3816 -moz-image-region: rect(0, 32px, 16px, 16px);
3817}
3818
3819@media (min-resolution: 1.25dppx) {
3820 notification[value="translation"] .messageImage {
3821 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3822 -moz-image-region: rect(0, 64px, 32px, 32px);
3823 }
3824}
3825
3826notification[value="translation"][state="translating"] .messageImage {
3827 list-style-image: url("chrome://browser/skin/translating-16.png");
3828 -moz-image-region: auto;
3829}
3830
3831@media (min-resolution: 1.25dppx) {
3832 notification[value="translation"][state="translating"] .messageImage {
3833 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3834 }
3835}
3836
3837notification[value="translation"] hbox[anonid="details"] {
3838 overflow: hidden;
3839}
3840
3841notification[value="translation"] button,
3842notification[value="translation"] menulist {
3843 min-width: 0;
3844}
3845
3846notification[value="translation"] menulist > .menulist-dropmarker {
3847}
3848
3849.translation-menupopup arrowscrollbox {
3850 padding-bottom: 0;
3851}
3852
3853.translation-attribution {
3854 cursor: pointer;
3855 -moz-box-align: end;
3856 font-size: small;
3857}
3858
3859.translation-attribution > label {
3860 margin-bottom: 0;
3861}
3862
3863.translation-attribution > image {
3864 width: 70px;
3865}
3866
3867.translation-welcome-panel {
3868 width: 305px;
3869}
3870
3871.translation-welcome-logo {
3872 height: 32px;
3873 width: 32px;
3874 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3875 -moz-image-region: rect(0, 64px, 32px, 32px);
3876}
3877
3878.translation-welcome-content {
3879 -moz-margin-start: 16px;
3880}
3881
3882.translation-welcome-headline {
3883 font-size: larger;
3884 font-weight: bold;
3885}
3886
3887.translation-welcome-body {
3888 padding: 1em 0;
3889 margin: 0 0;
3890}
3891
3892/* === END infobar.inc.css === */
3893
3894notification[value="translation"] {
3895 min-height: 40px;
3896}
3897
3898.translation-menupopup {
3899 -moz-appearance: none;
3900}
3901
3902/* Loop/ Hello browser styles */
3903
3904notification[value="loop-sharing-notification"] .button-menubutton-button {
3905 min-width: 0;
3906 border: 0;
3907 margin: 0;
3908}
3909
3910notification[value="loop-sharing-notification"] .messageImage {
3911 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3912}
3913
3914/* Bookmarks roots menu-items */
3915#subscribeToPageMenuitem:not([disabled]),
3916#subscribeToPageMenupopup,
3917#BMB_subscribeToPageMenuitem:not([disabled]),
3918#BMB_subscribeToPageMenupopup {
3919 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3920}
3921
3922#bookmarksToolbarFolderMenu,
3923#BMB_bookmarksToolbar,
3924#panelMenu_bookmarksToolbar {
3925 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3926 -moz-image-region: auto;
3927}
3928
3929#BMB_unsortedBookmarks,
3930#panelMenu_unsortedBookmarks {
3931 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3932 -moz-image-region: auto;
3933}
3934
3935#panelMenu_pocket,
3936#menu_pocket,
3937#BMB_pocket {
3938 list-style-image: url("chrome://browser/content/pocket/panels/img/pocketmenuitem16.png");
3939}
3940
3941/* ::::: Keyboard UI Panel ::::: */
3942
3943.KUI-panel {
3944 color: #FF9F00;
3945 border-style: none;
3946 border-radius: 20px;
3947}
3948
3949.KUI-panel[level="top"] {
3950 /*background-color: rgba(27%,27%,27%,.65);*/
3951}
3952
3953/* Ctrl-Tab */
3954
3955#ctrlTab-panel {
3956 padding: 20px 10px 10px;
3957 font-weight: bold;
3958}
3959
3960.ctrlTab-favicon[src] {
3961 background-color: #000000;
3962 width: 20px;
3963 height: 20px;
3964 padding: 2px;
3965}
3966
3967.ctrlTab-preview-inner > .tabPreview-canvas {
3968}
3969
3970.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3971 margin-bottom: 2px;
3972}
3973
3974.ctrlTab-preview-inner {
3975 padding-bottom: 10px;
3976}
3977
3978#ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3979 padding: 10px;
3980 background-color: #000000;
3981 border-radius: .5em;
3982}
3983
3984.ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3985 color: white;
3986 background-color: #000000;
3987 text-shadow: none;
3988 padding: 8px;
3989 border: 2px solid #9C9CFF;
3990 border-radius: .5em;
3991}
3992
3993.ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3994 margin: -10px -10px 0;
3995}
3996
3997#ctrlTab-showAll {
3998 margin-top: .5em;
3999}
4000
4001/* Sync Panel */
4002
4003.sync-panel-icon {
4004 height:32px;
4005 width: 32px;
4006 background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
4007}
4008
4009.sync-panel-inner {
4010 width: 0;
4011 padding-left: 10px;
4012}
4013
4014.sync-panel-button-box {
4015 margin-top: 1em;
4016}
4017
4018#sync-start-panel-title {
4019 font-size: 120%;
4020 font-weight: bold;
4021 margin-bottom: 5px;
4022}
4023
4024#sync-start-panel-subtitle {
4025 margin-bottom: 0;
4026}
4027
4028/* Status panel */
4029
4030.statuspanel-label {
4031 margin: 0;
4032 padding: 2px 4px;
4033 background: #404000;
4034 border: 1px none #9C9CFF;
4035 border-top-style: solid;
4036 color: #FF9F00;
4037 text-shadow: none;
4038}
4039
4040.statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
4041.statuspanel-label:-moz-locale-dir(rtl)[mirror] {
4042 border-right-style: solid;
4043 border-top-right-radius: .3em;
4044 margin-right: 1em;
4045}
4046
4047.statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
4048.statuspanel-label:-moz-locale-dir(ltr)[mirror] {
4049 border-left-style: solid;
4050 border-top-left-radius: .3em;
4051 margin-left: 1em;
4052}
4053
4054/* HACK to abolish devily color on main content */
4055
4056#content {
4057 background-color: transparent !important;
4058}
4059
4060/* === BEGIN fullscreen/warning.inc.css === */
4061
4062html|*#fullscreen-warning {
4063 align-items: center;
4064 background: rgba(0, 0, 0, 0.9);
4065 border: 2px solid #A09090;
4066 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
4067 border-radius: 8px;
4068 padding: 24px 16px;
4069 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
4070}
4071
4072html|*#fullscreen-warning::before {
4073 margin: 0;
4074 width: 24px; height: 24px;
4075}
4076
4077html|*#fullscreen-warning.verifiedIdentity::before,
4078html|*#fullscreen-warning.verifiedDomain::before {
4079 content: url("chrome://browser/skin/fullscreen/secure.svg");
4080}
4081
4082html|*#fullscreen-warning.unknownIdentity::before {
4083 content: url("chrome://browser/skin/fullscreen/insecure.svg");
4084}
4085
4086html|*#fullscreen-domain-text,
4087html|*#fullscreen-generic-text {
4088 font-size: 21px;
4089 font-weight: lighter;
4090 color: #A09090;
4091 margin: 0 16px;
4092}
4093
4094html|*#fullscreen-domain {
4095 font-weight: bold;
4096 margin: 0;
4097}
4098
4099html|*#fullscreen-exit-button {
4100 padding: 5px 30px;
4101 font: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
4102 font-size: 14px;
4103 font-weight: lighter;
4104 margin: 0;
4105 box-sizing: content-box;
4106
4107 border-radius: 300px;
4108 border: none;
4109 background-color: #C09070;
4110 color: #000000;
4111}
4112
4113/* === END fullscreen/warning.inc.css === */
4114
4115/* === BEGIN commandline.inc.css === */
4116
4117/* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
4118 We are copy/pasting variables from light-theme and dark-theme,
4119 since they aren't loaded in this context (within browser.css). */
4120:root #developer-toolbar {
4121 --gcli-background-color: #000000; /* --theme-toolbar-background */
4122 --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
4123 --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
4124 --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
4125 --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
4126 --selection-background: #008484; /* --theme-selection-background */
4127 --selection-color: #000000; /* --theme-selection-color */
4128}
4129
4130/* Developer toolbar */
4131
4132#developer-toolbar {
4133 border-top: 3px solid var(--gcli-background-color);
4134 border-bottom: none;
4135}
4136
4137#developer-toolbar .toolbar-holder {
4138 background-color: #8050B0;
4139 color: #FFCF00;
4140}
4141
4142#developer-toolbar .toolbar-holder {
4143 background-color: #8050B0;
4144 color: #FFCF00;
4145}
4146
4147#developer-toolbar .toolbar-startcap,
4148#developer-toolbar .toolbar-endcap{
4149 background-color: #6000CF;
4150}
4151
4152#developer-toolbar {
4153/* padding: 0;
4154 min-height: 32px; */
4155}
4156
4157#developer-toolbar > toolbarbutton {
4158/* margin: 0;
4159 padding: 0 10px;
4160 width: 32px; */
4161}
4162
4163.developer-toolbar-button > image {
4164/* margin: auto 10px; */
4165}
4166
4167#developer-toolbar-toolbox-button > label {
4168 display: none;
4169}
4170
4171.developer-toolbar-button > .toolbarbutton-icon,
4172#developer-toolbar-closebutton > .toolbarbutton-icon {
4173 width: 16px;
4174 height: 16px;
4175}
4176
4177#developer-toolbar-toolbox-button {
4178 list-style-image: url("chrome://browser/skin/devtools/toggle-tools.png");
4179 -moz-image-region: rect(0px, 16px, 16px, 0px);
4180}
4181
4182#developer-toolbar-toolbox-button > label {
4183 display: none;
4184}
4185
4186#developer-toolbar-toolbox-button:hover,
4187#developer-toolbar-toolbox-button:hover:active,
4188#developer-toolbar-toolbox-button[checked=true] {
4189 -moz-image-region: rect(0px, 32px, 16px, 16px);
4190}
4191
4192@media (min-resolution: 2dppx) {
4193 #developer-toolbar-toolbox-button {
4194 list-style-image: url("chrome://browser/skin/devtools/toggle-tools@2x.png");
4195 -moz-image-region: rect(0px, 32px, 32px, 0px);
4196 }
4197
4198 #developer-toolbar-toolbox-button:hover,
4199 #developer-toolbar-toolbox-button:hover:active,
4200 #developer-toolbar-toolbox-button[checked=true] {
4201 -moz-image-region: rect(0px, 64px, 32px, 32px);
4202 }
4203}
4204
4205#developer-toolbar-closebutton {
4206 list-style-image: url("chrome://browser/skin/devtools/close.png");
4207 -moz-image-region: rect(0px, 16px, 16px, 0px);
4208 min-width: 16px;
4209 width: 16px;
4210}
4211
4212#developer-toolbar-closebutton > .toolbarbutton-icon {
4213}
4214
4215#developer-toolbar-closebutton > .toolbarbutton-text {
4216 display: none;
4217}
4218
4219#developer-toolbar-closebutton:hover,
4220#developer-toolbar-closebutton:hover:active {
4221 -moz-image-region: rect(0px, 32px, 16px, 16px);
4222}
4223
4224@media (min-resolution: 2dppx) {
4225 #developer-toolbar-closebutton {
4226 list-style-image: url("chrome://browser/skin/devtools/close@2x.png");
4227 -moz-image-region: rect(0px, 32px, 32px, 0px);
4228 }
4229
4230 #developer-toolbar-closebutton:hover,
4231 #developer-toolbar-closebutton:hover:active {
4232 -moz-image-region: rect(0px, 64px, 32px, 32px);
4233 }
4234}
4235
4236/* GCLI */
4237
4238html|*#gcli-tooltip-frame,
4239html|*#gcli-output-frame {
4240 padding: 0;
4241 border-width: 0;
4242 background-color: transparent;
4243}
4244
4245#gcli-output,
4246#gcli-tooltip {
4247 border-width: 0;
4248 background-color: transparent;
4249}
4250
4251.gclitoolbar-input-node,
4252.gclitoolbar-complete-node {
4253 margin: 1px 3px;
4254 -moz-box-align: center;
4255 padding-top: 0;
4256 padding-bottom: 0;
4257 padding-right: 8px;
4258 background-color: transparent;
4259}
4260
4261.gclitoolbar-input-node {
4262/* line-height: 32px;
4263 outline-style: none; */
4264 background-repeat: no-repeat;
4265 background-color: var(--gcli-input-background);
4266}
4267
4268.gclitoolbar-input-node[focused="true"] {
4269 background-color: var(--gcli-input-focused-background);
4270}
4271
4272.gclitoolbar-input-node::before {
4273 content: "";
4274 display: inline-block;
4275 -moz-box-ordinal-group: 0;
4276 width: 16px;
4277 height: 16px;
4278 margin: 0 2px;
4279 background-image: url("chrome://browser/skin/devtools/commandline-icon.png");
4280 background-position: 0 center;
4281 background-size: 32px 16px;
4282}
4283
4284.gclitoolbar-input-node[focused="true"]::before {
4285 background-position: -16px center;
4286}
4287
4288@media (min-resolution: 2dppx) {
4289 .gclitoolbar-input-node::before {
4290 background-image: url("chrome://browser/skin/devtools/commandline-icon@2x.png");
4291 }
4292}
4293
4294.gclitoolbar-input-node:not([focused="true"]) {
4295 border-color: transparent;
4296}
4297
4298.gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
4299 background-color: var(--selection-background);
4300 color: var(--selection-color);
4301}
4302
4303.gclitoolbar-complete-node {
4304 padding-left: 21px;
4305 background-color: transparent;
4306 color: transparent;
4307 z-index: 100;
4308 pointer-events: none;
4309}
4310
4311.gcli-in-incomplete,
4312.gcli-in-error,
4313.gcli-in-ontab,
4314.gcli-in-todo,
4315.gcli-in-closebrace,
4316.gcli-in-param,
4317.gcli-in-valid {
4318 margin: 0;
4319 padding: 0;
4320}
4321
4322.gcli-in-incomplete {
4323 border-bottom: 2px dotted #8050B0;
4324}
4325
4326.gcli-in-error {
4327 border-bottom: 2px dotted #FF0000;
4328}
4329
4330.gcli-in-ontab {
4331 color: #9C9CFF;
4332}
4333
4334.gcli-in-todo {
4335 color: #795900;
4336}
4337
4338.gcli-in-closebrace {
4339 color: #8050B0;
4340}
4341
4342/* === END commandline.inc.css === */
4343
4344/* === BEGIN responsivedesign.inc.css === */
4345
4346/* Responsive Mode */
4347
4348.browserContainer[responsivemode] {
4349 background-color: #221500;
4350 padding: 0 20px 20px 20px;
4351}
4352
4353.browserStack[responsivemode] {
4354 box-shadow: 0 0 7px #9C9CFF;
4355}
4356
4357.devtools-responsiveui-toolbar {
4358 background: transparent;
4359 /* text color is textColor from dark theme, since no theme is applied to
4360 * the responsive toolbar.
4361 */
4362 color: #FF9F00;
4363 margin: 10px 0;
4364 padding: 0;
4365 box-shadow: none;
4366 border-bottom-width: 0;
4367}
4368
4369.devtools-responsiveui-menulist,
4370.devtools-responsiveui-toolbarbutton {
4371 -moz-box-align: center;
4372 min-width: 32px;
4373/* min-height: 22px;*/
4374/* margin: 0 3px; */
4375}
4376
4377.devtools-responsiveui-menulist .menulist-editable-box {
4378 background-color: transparent;
4379}
4380
4381.devtools-responsiveui-menulist html|*.menulist-editable-input {
4382 color: inherit;
4383 text-align: center;
4384}
4385
4386.devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4387/* background: hsla(212,7%,57%,.35);*/
4388}
4389
4390.devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4391 width: 16px;
4392 height: 16px;
4393}
4394
4395.devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4396 -moz-box-orient: horizontal;
4397}
4398
4399.devtools-responsiveui-menulist:-moz-focusring,
4400.devtools-responsiveui-toolbarbutton:-moz-focusring {
4401/* outline: 1px dotted hsla(210,30%,85%,0.7);
4402 outline-offset: -4px;*/
4403}
4404
4405.devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4406 display: none;
4407}
4408
4409.devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4410/* border-color: hsla(210,8%,5%,.6);
4411 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4412 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); */
4413}
4414
4415.devtools-responsiveui-menulist[open=true],
4416.devtools-responsiveui-toolbarbutton[open=true],
4417.devtools-responsiveui-toolbarbutton[checked=true] {
4418/* border-color: hsla(210,8%,5%,.6) !important;
4419 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4420 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); */
4421}
4422
4423.devtools-responsiveui-toolbarbutton[checked=true] {
4424/* color: hsl(208,100%,60%); */
4425}
4426
4427.devtools-responsiveui-toolbarbutton[checked=true]:hover {
4428/* background-color: transparent !important;*/
4429}
4430
4431.devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4432/* background-color: hsla(210,8%,5%,.2) !important;*/
4433}
4434
4435.devtools-responsiveui-menulist > .menulist-label-box {
4436 text-align: center;
4437}
4438
4439.devtools-responsiveui-menulist > .menulist-dropmarker {
4440/* display: -moz-box;
4441 background-color: transparent;
4442 list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg");
4443 -moz-box-align: center;
4444 border-width: 0;
4445 min-width: 16px;*/
4446}
4447
4448.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4449/* color: inherit;
4450 border-width: 0;
4451 -moz-border-end: 1px solid hsla(210,8%,5%,.45);
4452 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4453}
4454
4455.devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4456/* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4457}
4458
4459.devtools-responsiveui-toolbarbutton[type=menu-button] {
4460/* padding: 0 1px;*/
4461 -moz-box-align: stretch;
4462}
4463
4464.devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4465.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4466/* list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg");
4467 -moz-box-align: center;
4468 padding: 0 3px;*/
4469}
4470
4471.devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4472.devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4473 margin-left: 3px;
4474}
4475
4476.devtools-responsiveui-close {
4477 list-style-image: url("chrome://browser/skin/devtools/close.png");
4478 -moz-image-region: rect(0px,16px,16px,0px);
4479}
4480
4481.devtools-responsiveui-close:hover {
4482 -moz-image-region: rect(0px,32px,16px,16px);
4483}
4484
4485.devtools-responsiveui-rotate {
4486 list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png");
4487 -moz-image-region: rect(0px,16px,16px,0px);
4488}
4489
4490.devtools-responsiveui-rotate:hover {
4491 -moz-image-region: rect(0px,32px,16px,16px);
4492}
4493
4494@media (min-resolution: 2dppx) {
4495 .devtools-responsiveui-close {
4496 list-style-image: url("chrome://browser/skin/devtools/close@2x.png");
4497 }
4498
4499 .devtools-responsiveui-close:hover {
4500 -moz-image-region: rect(0px,64px,32px,32px);
4501 }
4502
4503 .devtools-responsiveui-rotate {
4504 list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate@2x.png");
4505 }
4506
4507 .devtools-responsiveui-rotate:hover {
4508 -moz-image-region: rect(0px,64px,32px,32px);
4509 }
4510}
4511
4512.devtools-responsiveui-touch {
4513 list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch.png");
4514 -moz-image-region: rect(0px,16px,16px,0px);
4515}
4516
4517.devtools-responsiveui-touch:hover,
4518.devtools-responsiveui-touch[checked],
4519.devtools-responsiveui-touch[checked]:hover {
4520 -moz-image-region: rect(0px,32px,16px,16px);
4521}
4522
4523@media (min-resolution: 2dppx) {
4524 .devtools-responsiveui-touch {
4525 list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch@2x.png");
4526 -moz-image-region: rect(0px,32px,32px,0px);
4527 }
4528
4529 .devtools-responsiveui-touch:hover,
4530 .devtools-responsiveui-touch[checked],
4531 .devtools-responsiveui-touch[checked]:hover {
4532 -moz-image-region: rect(0px,64px,32px,32px);
4533 }
4534}
4535
4536.devtools-responsiveui-screenshot {
4537 list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png");
4538 -moz-image-region: rect(0px,16px,16px,0px);
4539}
4540
4541.devtools-responsiveui-screenshot:hover {
4542 -moz-image-region: rect(0px,32px,16px,16px);
4543}
4544
4545@media (min-resolution: 2dppx) {
4546 .devtools-responsiveui-screenshot {
4547 list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot@2x.png");
4548 }
4549
4550 .devtools-responsiveui-screenshot:hover {
4551 -moz-image-region: rect(0px,64px,32px,32px);
4552 }
4553}
4554
4555.devtools-responsiveui-resizebarV {
4556 width: 7px;
4557 height: 24px;
4558 cursor: ew-resize;
4559 transform: translate(12px, -12px);
4560 background-size: cover;
4561 background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer.png");
4562}
4563
4564.devtools-responsiveui-resizebarH {
4565 width: 24px;
4566 height: 7px;
4567 cursor: ns-resize;
4568 transform: translate(-12px, 12px);
4569 background-size: cover;
4570 background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer.png");
4571}
4572
4573.devtools-responsiveui-resizehandle {
4574 width: 16px;
4575 height: 16px;
4576 cursor: se-resize;
4577 transform: translate(12px, 12px);
4578 background-size: cover;
4579 background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png");
4580}
4581
4582/* FxOS custom mode with additional buttons and phone look'n feel */
4583
4584/* Hide devtools manual resizer */
4585.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4586.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4587.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4588 display: none;
4589}
4590
4591/* Gives responsive mode a phone look'n feel */
4592.browserStack[responsivemode].fxos-mode {
4593 padding: 60px 15px 0;
4594
4595 border-radius: 25px / 20px;
4596 border-bottom-left-radius: 0;
4597 border-bottom-right-radius: 0;
4598 border: 1px solid #FFFFFF;
4599 border-bottom-width: 0;
4600
4601 background-color: #353535;
4602
4603 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4604
4605 background-image: linear-gradient(to right, #111 11%, #333 56%);
4606 min-width: 320px;
4607}
4608
4609.devtools-responsiveui-hardware-buttons {
4610 -moz-appearance: none;
4611 padding: 20px;
4612
4613 border: 1px solid #FFFFFF;
4614 border-bottom-left-radius: 25px;
4615 border-bottom-right-radius: 25px;
4616 border-top-width: 0;
4617
4618 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4619
4620 background-image: linear-gradient(to right, #111 11%, #333 56%);
4621}
4622
4623.devtools-responsiveui-home-button {
4624 -moz-user-focus: ignore;
4625 width: 40px;
4626 height: 30px;
4627 list-style-image: url("chrome://browser/skin/devtools/responsiveui-home.png");
4628}
4629
4630.devtools-responsiveui-sleep-button {
4631 -moz-user-focus: ignore;
4632 -moz-appearance: none;
4633 /* compensate browserStack top padding */
4634 margin-top: -67px;
4635 margin-right: 10px;
4636
4637 min-width: 10px;
4638 width: 50px;
4639 height: 5px;
4640
4641 border: 1px solid #444;
4642 border-top-right-radius: 12px;
4643 border-top-left-radius: 12px;
4644 border-bottom-color: transparent;
4645
4646 background-image: linear-gradient(to top, #111 11%, #333 56%);
4647}
4648
4649.devtools-responsiveui-sleep-button:hover:active {
4650 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4651}
4652
4653.devtools-responsiveui-volume-buttons {
4654 margin-left: -29px;
4655}
4656
4657.devtools-responsiveui-volume-up-button,
4658.devtools-responsiveui-volume-down-button {
4659 -moz-user-focus: ignore;
4660 -moz-appearance: none;
4661 border: 1px solid red;
4662 min-width: 8px;
4663 height: 40px;
4664
4665 border: 1px solid #444;
4666 border-right-color: transparent;
4667
4668 background-image: linear-gradient(to right, #111 11%, #333 56%);
4669}
4670
4671.devtools-responsiveui-volume-up-button:hover:active,
4672.devtools-responsiveui-volume-down-button:hover:active {
4673 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4674}
4675
4676.devtools-responsiveui-volume-up-button {
4677 border-top-left-radius: 12px;
4678}
4679
4680.devtools-responsiveui-volume-down-button {
4681 border-bottom-left-radius: 12px;
4682}
4683
4684@media (min-resolution: 2dppx) {
4685 .devtools-responsiveui-resizebarV {
4686 background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer@2x.png");
4687 }
4688
4689 .devtools-responsiveui-resizebarH {
4690 background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer@2x.png");
4691 }
4692
4693 .devtools-responsiveui-resizehandle {
4694 background-image: url("chrome://browser/skin/devtools/responsive-se-resizer@2x.png");
4695 }
4696}
4697
4698/* === END responsivedesign.inc.css === */
4699
4700/* === including indicator.css is done at the start of the file === */
4701
4702/* Error counter */
4703
4704#developer-toolbar-toolbox-button[error-count]:before {
4705 color: #000000;
4706 min-width: 16px;
4707 text-shadow: none;
4708 background-color: #FF0000;
4709 border-radius: 1px;
4710 -moz-margin-end: 5px;
4711}
4712
4713/* Social toolbar item */
4714
4715#social-notification-icon-mentions {
4716 background-color: #000000;
4717 border-radius: 3px;
4718 -moz-margin-start: 2px;
4719}
4720
4721#social-notification-icon-mentions:hover {
4722 background-color: #FFCF00;
4723}
4724
4725#social-notification-icon-mentions[open="true"] {
4726 background-color: #FF9F00;
4727}
4728
4729#social-sidebar-splitter {
4730 border: 0;
4731}
4732
4733#socialActivatedNotification .popup-notification-button-container {
4734 margin-left: 6px;
4735}
4736
4737.social-activation-icon {
4738 width: auto;
4739 height: auto;
4740 max-height: 64px;
4741 max-width: 64px;
4742}
4743
4744#social-activation-message {
4745 max-width: 250px;
4746}
4747
4748#social-activation-message > label {
4749 margin: 0;
4750}
4751
4752/* social toolbar provider menu */
4753.social-statusarea-popup {
4754 margin-top: 0;
4755 margin-left: -12px;
4756 margin-right: -12px;
4757}
4758
4759.social-statusarea-user {
4760 border-bottom: 1px solid #9C9CFF;
4761 background-color: #000000;
4762 color: #FF9F00;
4763 position: relative;
4764 cursor: pointer;
4765}
4766
4767.social-statusarea-user-portrait {
4768 width: 32px;
4769 height: 32px;
4770 border-radius: 2px;
4771 margin: 10px;
4772}
4773
4774.social-statusarea-loggedInStatus {
4775 background: transparent;
4776 border: none;
4777 color: #3333FF;
4778 min-width: 0;
4779 margin: 0 6px;
4780 list-style-image: none;
4781}
4782
4783#social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
4784 text-decoration: underline;
4785}
4786
4787.social-panel > .panel-arrowcontainer > .panel-arrowcontent {
4788 padding: 0;
4789}
4790
4791.social-panel-frame {
4792 border-radius: inherit;
4793}
4794
4795/* === BEGIN chat.inc.css === */
4796
4797#social-sidebar-header {
4798 padding: 3px;
4799}
4800
4801#manage-share-providers,
4802#social-sidebar-button {
4803 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4804 -moz-image-region: rect(0, 468px, 18px, 450px);
4805}
4806
4807#social-sidebar-button {
4808 -moz-appearance: none;
4809 border: none;
4810 padding: 0;
4811 margin: 2px;
4812}
4813#manage-share-providers > .toolbarbutton-icon,
4814#social-sidebar-button > .toolbarbutton-icon {
4815 min-height: 18px;
4816 min-width: 18px;
4817}
4818#manage-share-providers:hover,
4819#manage-share-providers:hover:active,
4820#social-sidebar-button:hover,
4821#social-sidebar-button:hover:active {
4822 -moz-image-region: rect(18px, 468px, 36px, 450px);
4823}
4824#social-sidebar-button > .toolbarbutton-menu-dropmarker {
4825 display: none;
4826}
4827
4828#social-sidebar-button[loading="true"] {
4829 list-style-image: url("chrome://global/skin/icons/loading.gif");
4830}
4831
4832#social-sidebar-favico {
4833 max-height: 16px;
4834 max-width: 16px;
4835 padding: 0;
4836 margin: 2px;
4837}
4838
4839.chat-status-icon {
4840 max-height: 16px;
4841 max-width: 16px;
4842 padding: 0;
4843}
4844
4845.chat-toolbarbutton {
4846 -moz-appearance: none;
4847 border: none;
4848 padding: 0 3px;
4849 margin: 0;
4850 background: none;
4851}
4852
4853.chat-toolbarbutton > .toolbarbutton-text {
4854 display: none;
4855}
4856
4857.chat-toolbarbutton > .toolbarbutton-icon {
4858 width: 16px;
4859 height: 16px;
4860}
4861
4862.chat-close-button {
4863 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close");
4864}
4865
4866.chat-close-button:hover {
4867 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-hover");
4868}
4869
4870.chat-close-button:hover:active {
4871 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active");
4872}
4873
4874.chat-minimize-button {
4875 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize");
4876}
4877
4878.chat-minimize-button:hover {
4879 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-hover");
4880}
4881
4882.chat-minimize-button:hover:active {
4883 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active");
4884}
4885
4886.chat-swap-button {
4887 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand");
4888 transform: rotate(180deg);
4889}
4890
4891.chat-swap-button:hover {
4892 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-hover");
4893}
4894
4895.chat-swap-button:hover:active {
4896 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active");
4897}
4898
4899chatbar > chatbox > .chat-titlebar > .chat-swap-button {
4900 transform: none;
4901}
4902
4903.chat-loop-hangup {
4904 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#exit-white");
4905 background-color: #FF0000;
4906 border: 1px solid #FFC000;
4907 border-top-right-radius: 4px;
4908 width: 32px;
4909 height: 26px;
4910 margin-top: -6px;
4911 margin-bottom: -5px;
4912 -moz-margin-start: 6px;
4913 -moz-margin-end: -5px;
4914}
4915
4916.chat-toolbarbutton.chat-loop-hangup:-moz-any(:hover,:hover:active) {
4917 background-color: #FFCF00;
4918 border-color: #FF0000;
4919}
4920
4921.chat-title {
4922 color: #000000;
4923 text-shadow: none;
4924 cursor: inherit;
4925}
4926
4927.chat-titlebar {
4928 background-color: #9C9CFF;
4929 color: #000000;
4930 height: 26px;
4931 min-height: 26px;
4932 width: 100%;
4933 margin: 0;
4934 padding: 5px 4px;
4935 border: 1px solid #008484;
4936 border-bottom: 0;
4937 border-top-left-radius: 4px;
4938 border-top-right-radius: 4px;
4939 cursor: pointer;
4940 background-color: #A09090;
4941}
4942
4943.chat-titlebar[selected] {
4944 background-color: #008484;
4945}
4946
4947.chat-titlebar > .notification-anchor-icon {
4948 margin-left: 2px;
4949 margin-right: 2px;
4950}
4951
4952.chat-titlebar[minimized="true"] {
4953 border-bottom: none;
4954}
4955
4956.chat-titlebar[selected] {
4957 background-color: #008484;
4958}
4959
4960.chat-titlebar[activity] {
4961 background-color: #E7ADE7;
4962}
4963
4964.chat-frame {
4965 padding: 0;
4966 margin: 0;
4967 overflow: hidden;
4968}
4969
4970.chatbar-button {
4971 list-style-image: url("chrome://browser/skin/social/services-16.png");
4972 background-color: #000000;
4973 border: none;
4974 margin: 0;
4975 padding: 2px;
4976 height: 21px;
4977 width: 21px;
4978 border-top: 1px solid #008484;
4979 -moz-border-end: 1px solid #008484;
4980}
4981
4982@media (min-resolution: 2dppx) {
4983 .chatbar-button {
4984 list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
4985 }
4986}
4987
4988.chatbar-button:hover {
4989 background-color: #FFCF00;
4990}
4991.chatbar-button[open="true"] {
4992 background-color: #FF9F00;
4993}
4994
4995.chatbar-button[activity]:not([open]) {
4996 background-image: radial-gradient(circle farthest-corner at center 2px, rgb(160,144,144) 3%, rgba(160,144,144,0.9) 12%, rgba(156,156,255,0.6) 30%, rgba(156,156,255,0.2) 70%);
4997}
4998
4999.chatbar-button > .toolbarbutton-icon {
5000 width: 16px;
5001}
5002
5003.chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5004 width: auto;
5005 height: auto;
5006 max-height: 16px;
5007 max-width: 16px;
5008}
5009
5010.chatbar-button > .toolbarbutton-icon {
5011 opacity: .6;
5012 -moz-margin-end: 0;
5013}
5014.chatbar-button:hover > .toolbarbutton-icon,
5015.chatbar-button[open="true"] > .toolbarbutton-icon {
5016 opacity: 1;
5017}
5018
5019.chatbar-button:hover,
5020.chatbar-button[open="true"] {
5021}
5022
5023.chatbar-button > .toolbarbutton-text,
5024.chatbar-button > .toolbarbutton-menu-dropmarker {
5025 display: none;
5026}
5027
5028.chatbar-button[activity]:not([open="true"]) {
5029 background-color: #E7ADE7;
5030}
5031
5032.chatbar-button > menupopup > menuitem[activity] {
5033 font-weight: bold;
5034}
5035
5036.chatbar-innerbox {
5037 background: transparent;
5038 overflow: hidden;
5039}
5040
5041chatbar {
5042 -moz-margin-end: 20px;
5043}
5044
5045chatbox {
5046 -moz-margin-start: 4px;
5047 background-color: transparent;
5048}
5049
5050chatbar > chatbox {
5051 /* Apply the same border-radius as the .chat-titlebar to make the box-shadow
5052 go round nicely. */
5053/* border-top-left-radius: 4px;
5054 border-top-right-radius: 4px;*/
5055 /* Offset the chatbox the same amount as the box-shadows' spread, to make it
5056 visible. */
5057/* -moz-margin-end: 5px;*/
5058}
5059
5060chatbox[minimized="true"] {
5061 width: 160px;
5062 height: 20px;
5063}
5064
5065window > chatbox {
5066 -moz-margin-start: 0px;
5067 margin: 0px;
5068 border: none;
5069 padding: 0px;
5070}
5071
5072/* === END chat.inc.css === */
5073
5074/* === BEGIN plugin-doorhanger.inc.css === */
5075
5076/**
5077 * Plugin Doorhanger Styles
5078 */
5079
5080#notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
5081 padding: 6px 1px 2px;
5082}
5083
5084.click-to-play-plugins-notification-center-box {
5085}
5086
5087.plugin-popupnotification-centeritem:nth-child(odd) {
5088/* background-color: rgba(0,0,0,0.1);*/
5089}
5090
5091.center-item-label {
5092 margin-bottom: 0;
5093 text-overflow: ellipsis;
5094}
5095
5096.center-item-warning-icon {
5097 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
5098 background-repeat: no-repeat;
5099 width: 16px;
5100 height: 15px;
5101 -moz-margin-start: 6px;
5102}
5103
5104.click-to-play-plugins-notification-button-container {
5105}
5106
5107.click-to-play-popup-button {
5108 width: 50%;
5109}
5110
5111.click-to-play-plugins-notification-description-box {
5112 margin-left: 5px;
5113 margin-right: 5px;
5114 margin-top: 0;
5115 padding-bottom: 3px;
5116}
5117
5118.click-to-play-plugins-outer-description {
5119 margin-top: 1px;
5120}
5121
5122.click-to-play-plugins-notification-link,
5123.center-item-link {
5124 margin: 0;
5125}
5126
5127.messageImage[value="plugin-hidden"] {
5128 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
5129}
5130
5131/* Keep any changes to this style in sync with pluginProblem.css */
5132notification.pluginVulnerable {
5133}
5134
5135notification.pluginVulnerable .messageImage {
5136 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
5137}
5138
5139/* === END plugin-doorhanger.inc.css === */
5140
5141/* === BEGIN login-doorhanger.inc.css === */
5142
5143#notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent {
5144 /* Since we display a sliding subview that extends to the border, we cannot
5145 * keep the default padding of arrow panels. We use the same padding in the
5146 * individual content views instead. Since we removed the padding, we also
5147 * have to ensure the contents are clipped to the border box. */
5148 padding: 0;
5149 overflow: hidden;
5150}
5151
5152#login-fill-mainview,
5153#login-fill-details {
5154 padding: var(--panel-arrowcontent-padding);
5155}
5156
5157#login-fill-doorhanger[inDetailView] > #login-fill-mainview {
5158 transform: translateX(-14px);
5159}
5160
5161#login-fill-mainview,
5162#login-fill-details {
5163 transition: transform 150ms;
5164}
5165
5166#login-fill-doorhanger:not([inDetailView]) > #login-fill-details {
5167 transform: translateX(105%);
5168}
5169
5170#login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) {
5171 transform: translateX(-105%);
5172}
5173
5174#login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer {
5175 background-color: hsla(240,39%,100%,.1);
5176}
5177
5178#login-fill-testing {
5179 color: #FF0000;
5180 font-weight: bold;
5181}
5182
5183#login-fill-list {
5184 border: 1px solid #9C9CFF;
5185 max-height: 20em;
5186}
5187
5188.login-fill-item[disabled] {
5189 color: #8050B0;
5190 background-color: #000000;
5191}
5192
5193.login-fill-item[disabled][selected] {
5194 background-color: #008484;
5195}
5196
5197.login-hostname {
5198 margin: 4px;
5199 font-weight: bold;
5200}
5201
5202.login-fill-item.different-hostname > .login-hostname {
5203 color: #A09090;
5204 font-style: italic;
5205}
5206
5207.login-username {
5208 margin: 4px;
5209 color: #A09090;
5210}
5211
5212#login-fill-details {
5213 padding: 4px;
5214 background: var(--panel-arrowcontent-background);
5215 color: var(--panel-arrowcontent-color);
5216 background-clip: padding-box;
5217 border-left: 1px solid #9C9CFF;
5218 -moz-margin-start: 38px;
5219}
5220
5221/* === END login-doorhanger.inc.css === */
5222
5223/* === BEGIN customizeMode.inc.css === */
5224
5225/* Customization mode */
5226
5227#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
5228 margin-bottom: 1em;
5229}
5230
5231#main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
5232#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5233#main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
5234 margin-left: 1em;
5235 margin-right: 1em;
5236}
5237
5238#main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
5239 pointer-events: none;
5240}
5241
5242#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5243#PanelUI-contents > .panel-customization-placeholder {
5244 -moz-outline-radius: 2.5px;
5245 outline: 1px dashed transparent;
5246}
5247
5248#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
5249 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
5250 -moz-box-ordinal-group: 0;
5251 content: "";
5252 display: -moz-box;
5253 height: 100%;
5254 left: 0;
5255 outline-offset: -2px;
5256 pointer-events: none;
5257 position: absolute;
5258 top: 0;
5259 width: 100%;
5260}
5261
5262/* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
5263 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
5264 offset from the bottom effectively the same as other targets (-2px). */
5265#main-window[customize-entered] #TabsToolbar.customization-target::before {
5266/* top: -2px;*/
5267}
5268
5269/* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
5270#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
5271#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
5272#main-window[customize-entered] #nav-bar-customization-target.customization-target {
5273 position: relative;
5274}
5275
5276/* Most target outlines are shown on hover and drag over but the panel menu uses
5277 placeholders instead. */
5278#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
5279#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5280/* nav-bar and panel outlines are always shown */
5281#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5282 outline-color: #A09090;
5283}
5284
5285#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5286 transition: outline-color 250ms linear;
5287}
5288
5289#PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
5290 transition: outline-color 250ms linear;
5291 outline-color: #9C9CFF;
5292}
5293
5294#PanelUI-contents > .panel-customization-placeholder {
5295 cursor: auto;
5296 outline-offset: -5px;
5297}
5298
5299#main-window[customizing] .customization-target:not(#PanelUI-contents) {
5300 min-width: 100px;
5301/* padding-left: 10px;
5302 padding-right: 10px;*/
5303}
5304
5305#main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
5306 padding: 0 2em 2em;
5307}
5308
5309#customization-container {
5310 background-color: #000000;
5311 color: #FF9F00;
5312}
5313
5314#customization-palette,
5315#customization-empty {
5316 padding: 0 15px 15px;
5317}
5318
5319#customization-header {
5320 font-size: 1.75em;
5321 line-height: 1.75em;
5322 color: #9C9CFF;
5323 font-weight: 200;
5324 margin: 25px 25px 12px;
5325 padding-bottom: 12px;
5326 border-bottom: 1px solid #A09090;
5327}
5328
5329#customization-panel-container {
5330 padding: 10px 10px 0px;
5331}
5332
5333#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5334#customization-footer {
5335 /*background-color: rgb(236,236,236);*/
5336}
5337
5338#customization-footer {
5339 border-top: 1px solid #9C9CFF;
5340 padding: 10px;
5341}
5342
5343.customizationmode-button {
5344 margin: 5px;
5345}
5346
5347.customizationmode-button:hover {
5348}
5349
5350#customization-titlebar-visibility-button[checked],
5351#customization-devedition-theme-button[checked] {
5352 background-color: #008484;
5353}
5354
5355#customization-titlebar-visibility-button[checked]:hover,
5356#customization-devedition-theme-button[checked]:hover {
5357 background-color: #FFCF00;
5358}
5359
5360#customization-titlebar-visibility-button[checked]:hover:active,
5361#customization-devedition-theme-button[checked]:hover:active {
5362 background-color: #FF9F00;
5363}
5364
5365.customizationmode-button[disabled="true"] {
5366}
5367
5368.customizationmode-button > .box-inherit > .box-inherit > .button-icon,
5369.customizationmode-button > .button-box > .button-icon {
5370/* height: 24px;*/
5371}
5372
5373#customization-titlebar-visibility-button {
5374 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
5375 -moz-image-region: rect(0, 16px, 16px, 0);
5376}
5377
5378#customization-titlebar-visibility-button:hover {
5379 -moz-image-region: rect(16px, 16px, 32px, 0);
5380}
5381
5382#customization-lwtheme-button,
5383#customization-titlebar-visibility-button {
5384 padding: 0px 5px;
5385}
5386
5387#customization-titlebar-visibility-button > .button-box {
5388 padding-top: 0;
5389 padding-bottom: 1px;
5390}
5391
5392#customization-titlebar-visibility-button:hover:active > .button-box {
5393 padding-top: 1px;
5394 padding-bottom: 0;
5395}
5396
5397#customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
5398#customization-titlebar-visibility-button > .button-box > .button-text {
5399 /* Sadly, button.css thinks its margins are perfect for everyone. */
5400 -moz-margin-start: 5px !important;
5401}
5402
5403#customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
5404 width: 20px;
5405 height: 20px;
5406 border-radius: 2px;
5407 background-size: contain;
5408}
5409
5410#customization-titlebar-visibility-button > .button-box > .button-icon {
5411 vertical-align: middle;
5412}
5413
5414#customization-titlebar-visibility-button[checked] {
5415 -moz-image-region: rect(0, 32px, 16px, 16px);
5416 background-color: #008484;
5417}
5418
5419#customization-titlebar-visibility-button[checked]:hover {
5420 -moz-image-region: rect(16px, 32px, 32px, 16px);
5421 background-color: #FFCF00;
5422}
5423
5424#customization-titlebar-visibility-button[checked]:hover:active {
5425 background-color: #FF9F00;
5426}
5427
5428@media (min-resolution: 1.1dppx) {
5429 #customization-titlebar-visibility-button {
5430 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
5431 -moz-image-region: rect(0, 48px, 48px, 0);
5432 }
5433
5434 #customization-titlebar-visibility-button:hover {
5435 -moz-image-region: rect(48px, 48px, 96px, 0);
5436 }
5437
5438 #customization-titlebar-visibility-button[checked] {
5439 -moz-image-region: rect(0, 96px, 48px, 48px);
5440 }
5441
5442 #customization-titlebar-visibility-button[checked]:hover {
5443 -moz-image-region: rect(48px, 96px, 96px, 48px);
5444 }
5445}
5446
5447#main-window[customize-entered] #customization-panel-container {
5448 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5449 background-position: left top;
5450 background-repeat: repeat;
5451 background-size: auto;
5452 background-attachment: fixed;
5453}
5454
5455toolbarpaletteitem[place="toolbar"] {
5456 transition: border-width 250ms ease-in-out;
5457}
5458
5459toolbarpaletteitem[mousedown] {
5460 outline: 1px solid #008484;
5461 cursor: -moz-grabbing;
5462 opacity: 0.8;
5463}
5464
5465.panel-customization-placeholder,
5466toolbarpaletteitem[place="palette"],
5467toolbarpaletteitem[place="panel"] {
5468 transition: transform .3s ease-in-out;
5469}
5470
5471#customization-palette {
5472 transition: opacity .3s ease-in-out;
5473 opacity: 0;
5474}
5475
5476#customization-palette[showing="true"] {
5477 opacity: 1;
5478}
5479
5480toolbarpaletteitem[notransition].panel-customization-placeholder,
5481toolbarpaletteitem[notransition][place="toolbar"],
5482toolbarpaletteitem[notransition][place="palette"],
5483toolbarpaletteitem[notransition][place="panel"] {
5484 transition: none;
5485}
5486
5487toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
5488toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
5489toolbarpaletteitem > toolbaritem.panel-wide-item,
5490toolbarpaletteitem > toolbarbutton[type="menu-button"] {
5491 transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
5492}
5493
5494toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
5495toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
5496 transform: scale(1.3);
5497}
5498
5499toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
5500toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
5501 transform: scale(1.1);
5502}
5503
5504/* Override the toolkit styling for items being dragged over. */
5505toolbarpaletteitem[place="toolbar"] {
5506 border-left-width: 0;
5507 border-right-width: 0;
5508 margin-right: 0;
5509 margin-left: 0;
5510}
5511
5512#customization-palette:not([hidden]) {
5513 margin-bottom: 25px;
5514}
5515
5516#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5517#wrapper-edit-controls[place="palette"] > #edit-controls > separator,
5518#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
5519#wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
5520 margin-top: 20px;
5521}
5522
5523#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5524#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
5525 margin-left: 0;
5526 margin-right: 0;
5527 max-width: 24px;
5528 min-width: 24px;
5529 max-height: 24px;
5530 min-height: 24px;
5531 padding: 4px;
5532}
5533
5534#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
5535#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
5536 width: 16px;
5537}
5538
5539#wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
5540 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
5541}
5542
5543#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
5544#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
5545 display: none;
5546}
5547
5548#wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
5549 -moz-box-pack: center;
5550 min-height: 48px;
5551}
5552
5553#personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
5554 -moz-margin-end: 5px;
5555}
5556
5557#customization-palette > toolbarpaletteitem > label {
5558 text-align: center;
5559 margin-left: 0;
5560 margin-right: 0;
5561}
5562
5563#customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
5564 -moz-box-orient: vertical;
5565 /* Make the panel padding uniform across all platforms due to the
5566 styling of the section headers and footer. */
5567 padding: 10px;
5568}
5569
5570.customization-lwtheme-menu-theme > .toolbarbutton-icon {
5571 width: 32px;
5572 height: 32px;
5573}
5574
5575.customization-lwtheme-menu-theme {
5576 -moz-appearance: none;
5577 margin: 0 -5px 5px;
5578 padding-top: 0;
5579 -moz-padding-end: 5px;
5580 padding-bottom: 0;
5581 -moz-padding-start: 0;
5582}
5583
5584.customization-lwtheme-menu-theme[defaulttheme] {
5585 list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
5586}
5587
5588.customization-lwtheme-menu-theme[active="true"] {
5589 background-color: #008484;
5590}
5591
5592.customization-lwtheme-menu-theme > .toolbarbutton-icon {
5593 margin: 5px;
5594}
5595
5596.customization-lwtheme-menu-theme > .toolbarbutton-text {
5597 text-align: start;
5598}
5599
5600#customization-lwtheme-menu-header,
5601#customization-lwtheme-menu-recommended {
5602 padding: 10px;
5603 margin-bottom: 5px;
5604}
5605
5606#customization-lwtheme-menu-header,
5607#customization-lwtheme-menu-recommended,
5608#customization-lwtheme-menu-footer {
5609 background-color: #A09090;
5610 color: #000000;
5611 margin-right: -10px;
5612 margin-left: -10px;
5613}
5614
5615#customization-lwtheme-menu-header {
5616 margin-top: -10px;
5617 border-top-right-radius: 3px;
5618 border-top-left-radius: 3px;
5619}
5620
5621#customization-lwtheme-menu-recommended {
5622}
5623
5624#customization-lwtheme-menu-footer {
5625 margin-bottom: -10px;
5626 border-bottom-right-radius: 3px;
5627 border-bottom-left-radius: 3px;
5628}
5629
5630.customization-lwtheme-menu-footeritem {
5631 -moz-appearance: none;
5632 -moz-box-flex: 1;
5633 background-color: #C09070;
5634 color: #000000;
5635 border: 1px solid transparent;
5636 padding: 10px;
5637 margin-left: 0;
5638 margin-right: 0;
5639}
5640
5641.customization-lwtheme-menu-footeritem:hover {
5642 background-color: #FFCF00;
5643}
5644
5645.customization-lwtheme-menu-footeritem:first-child {
5646}
5647
5648/* === END customizeMode.inc.css === */
5649
5650/* === BEGIN customizeTip.inc.css === */
5651
5652#customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5653 padding: 0;
5654 margin: 0;
5655 min-width: 400px;
5656 max-width: 1000px;
5657 min-height: 200px;
5658 border-radius: 3px;
5659/* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5660 border: 1px solid #9C9CFF;
5661 color: #FF9F00;
5662}
5663
5664#customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5665/* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5666}
5667
5668.customization-tipPanel-infoBox {
5669 margin: 20px 25px 25px;
5670 width: 25px;
5671 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5672 background-repeat: no-repeat;
5673}
5674
5675.customization-tipPanel-content {
5676 margin: 25px 0;
5677 font-size: 12px;
5678 line-height: 18px;
5679}
5680
5681.customization-tipPanel-em {
5682 margin: 0;
5683 font-weight: bold;
5684}
5685
5686.customization-tipPanel-contentImage {
5687 margin-top: 25px;
5688 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5689 min-width: 300px;
5690 max-width: 300px;
5691 min-height: 190px;
5692 max-height: 190px;
5693 display: -moz-box;
5694}
5695
5696.customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5697 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5698}
5699
5700.customization-tipPanel-link {
5701 -moz-appearance: none;
5702 background: transparent;
5703 border: none;
5704 box-shadow: none;
5705 color: #3333FF;
5706 margin: 0;
5707 cursor: pointer;
5708}
5709
5710.customization-tipPanel-link > .button-box > .button-text {
5711 margin: 0 !important;
5712}
5713
5714.customization-tipPanel-closeBox > .close-icon {
5715 -moz-appearance: none;
5716 border: 0;
5717 -moz-margin-end: -25px;
5718}
5719
5720#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5721#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5722 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5723}
5724
5725/* === END customizeTip.inc.css === */
5726
5727/**
5728 * This next rule is a hack to disable subpixel anti-aliasing on all
5729 * labels during the customize mode transition. Subpixel anti-aliasing
5730 * on Windows with Direct2D layers acceleration is particularly slow to
5731 * paint, so this hack is how we sidestep that performance bottleneck.
5732 */
5733#main-window:-moz-any([customize-entering],[customize-exiting]) label {
5734 transform: perspective(0.01px);
5735}
5736
5737#main-window[customize-entered] > #tab-view-deck {
5738 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5739 background-attachment: fixed;
5740}
5741
5742#main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
5743 background-repeat: no-repeat;
5744 background-position: right top;
5745 background-attachment: fixed;
5746 /* The image will get set from CustomizeMode.jsm */
5747 background-image: none;
5748 background-color: transparent;
5749}
5750
5751#main-window[customization-lwtheme]:-moz-lwtheme {
5752 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5753 background-repeat: repeat;
5754 background-attachment: fixed;
5755 background-position: left top;
5756}
5757
5758#main-window[customize-entered] #browser-bottombox,
5759#main-window[customize-entered] #customization-container {
5760 border-left: 1px solid #9C9CFF;
5761 border-right: 1px solid #9C9CFF;
5762 background-clip: padding-box;
5763}
5764
5765#main-window[customize-entered] #browser-bottombox {
5766 border-bottom: 1px solid #9C9CFF;
5767}
5768
5769#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5770 margin-right: -2px;
5771}
5772
5773#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5774 margin-left: -2px;
5775}
5776
5777/* End customization mode */
5778
5779/* Private browsing indicators */
5780
5781/**
5782 * Currently, we have two places where we put private browsing indicators on
5783 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5784 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5785 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5786 * want the bottom border of the image to line up with the bottom of the window
5787 * caption buttons. That's why there's so much special-casing going on in here.
5788 */
5789.private-browsing-indicator {
5790 display: none;
5791 pointer-events: none;
5792}
5793
5794#private-browsing-indicator-titlebar {
5795 display: block;
5796 position: absolute;
5797}
5798
5799#main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5800 display: block;
5801}
5802
5803#main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5804 display: -moz-box;
5805}
5806
5807#TabsToolbar > .private-browsing-indicator {
5808 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5809 -moz-margin-start: 4px;
5810 width: 48px;
5811}
5812
5813/* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5814 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5815 * min/max/close window buttons.
5816 */
5817#private-browsing-indicator-titlebar > .private-browsing-indicator,
5818#main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5819 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5820 -moz-margin-end: 4px;
5821 width: 40px;
5822 height: 20px;
5823 position: relative;
5824}
5825
5826/* This one is for Linux */
5827#main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5828 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5829 width: 48px;
5830}
5831
5832/* End private browsing indicators */
5833
5834/* === BEGIN UITour.inc.css === */
5835
5836/* UI Tour */
5837
5838#UITourHighlightContainer {
5839 -moz-appearance: none;
5840 border: none;
5841 background-color: transparent;
5842 /* This is a buffer to compensate for the movement in the "wobble" effect */
5843 padding: 4px;
5844}
5845
5846#UITourHighlight {
5847 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5848 border-radius: 40px;
5849 border: 1px solid #9C9CFF;
5850 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5851 on Linux without an X compositor where opacity is either 0 or 1. */
5852 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5853 min-height: 32px;
5854 min-width: 32px;
5855}
5856
5857#UITourTooltipBody {
5858 -moz-margin-end: 14px;
5859}
5860
5861#UITourTooltipBody > vbox {
5862 padding-top: 4px;
5863}
5864
5865#UITourTooltipIconContainer {
5866 -moz-margin-start: -16px;
5867}
5868
5869#UITourTooltipIcon {
5870 width: 48px;
5871 height: 48px;
5872 -moz-margin-start: 28px;
5873 -moz-margin-end: 28px;
5874}
5875
5876#UITourTooltipTitle,
5877#UITourTooltipDescription {
5878 max-width: 20rem;
5879}
5880
5881#UITourTooltipTitle {
5882 font-size: 1.45rem;
5883 font-weight: bold;
5884 -moz-margin-start: 0;
5885 -moz-margin-end: 0;
5886 margin: 0 0 9px 0;
5887}
5888
5889#UITourTooltipDescription {
5890 -moz-margin-start: 0;
5891 -moz-margin-end: 0;
5892 font-size: 1.15rem;
5893 line-height: 1.8rem;
5894 margin-bottom: 0; /* Override global.css */
5895}
5896
5897#UITourTooltipClose {
5898 -moz-appearance: none;
5899 border: none;
5900 background-color: transparent;
5901 min-width: 0;
5902 -moz-margin-start: 4px;
5903 margin-top: -2px;
5904}
5905
5906#UITourTooltipClose > .toolbarbutton-text {
5907 display: none;
5908}
5909
5910#UITourTooltipButtons {
5911 -moz-box-pack: end;
5912 background-color: rgba(0,0,0,.2);
5913 border-top: 1px solid rgba(0,0,0,.4);
5914 margin: 24px -16px -16px;
5915 padding: 2em 15px;
5916}
5917
5918#UITourTooltipButtons > label,
5919#UITourTooltipButtons > button {
5920 margin: 0 15px;
5921}
5922
5923#UITourTooltipButtons > label:first-child,
5924#UITourTooltipButtons > button:first-child {
5925 -moz-margin-start: 0;
5926}
5927
5928#UITourTooltipButtons > button[image] > .button-box > .button-icon {
5929 width: 16px;
5930 height: 16px;
5931 -moz-margin-end: 5px;
5932}
5933
5934#UITourTooltipButtons > label,
5935#UITourTooltipButtons > button .button-text {
5936 font-size: 1.15rem;
5937}
5938
5939#UITourTooltipButtons > button:not(.button-link) {
5940 -moz-appearance: none;
5941 background-color: #C09070;
5942 border-radius: 3000px;
5943 border: none;
5944 color: #000000;
5945 padding: 4px 30px;
5946 transition-property: background-color, color;
5947 transition-duration: 150ms;
5948}
5949
5950#UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5951 background-color: #FFCF00;
5952 color: #000000;
5953}
5954
5955#UITourTooltipButtons > label,
5956#UITourTooltipButtons > button.button-link {
5957 -moz-appearance: none;
5958 background: transparent;
5959 border: none;
5960 box-shadow: none;
5961 color: rgba(0,0,0,0.35);
5962 padding-left: 10px;
5963 padding-right: 10px;
5964}
5965
5966#UITourTooltipButtons > button.button-link:hover {
5967 color: black;
5968}
5969
5970/* The primary button gets the same color as the customize button. */
5971#UITourTooltipButtons > button.button-primary {
5972 background-color: #A06060; /* LCARS default button background color */
5973 color: #000000;
5974 padding-left: 30px;
5975 padding-right: 30px;
5976}
5977
5978#UITourTooltipButtons > button.button-primary:not(:active):hover {
5979 background-color: #FFCF00;
5980 color: #000000;
5981}
5982
5983/* Notification overrides for Heartbeat UI */
5984
5985notification.heartbeat {
5986 background-color: #A09090;
5987/* height: 40px;*/
5988}
5989
5990@keyframes pulse-onshow {
5991 0% {
5992 opacity: 0;
5993 transform: scale(1.0);
5994 }
5995 25% {
5996 opacity: 1;
5997 transform: scale(1.1);
5998 }
5999 50% {
6000 transform: scale(1.0);
6001 }
6002 75% {
6003 transform: scale(1.1);
6004 }
6005 100% {
6006 transform: scale(1.0);
6007 }
6008}
6009
6010@keyframes pulse-twice {
6011 0% {
6012 transform: scale(1.1);
6013 }
6014 50% {
6015 transform: scale(0.8);
6016 }
6017 100% {
6018 transform: scale(1);
6019 }
6020}
6021
6022.messageText.heartbeat {
6023 color: #000000;
6024/* text-shadow: none; */
6025 -moz-margin-start: 0px;
6026}
6027
6028.messageImage.heartbeat {
6029 width: 24px;
6030 height: 24px;
6031 -moz-margin-start: 8px;
6032 -moz-margin-end: 8px;
6033}
6034
6035.messageImage.heartbeat.pulse-onshow {
6036 animation-name: pulse-onshow;
6037 animation-duration: 1.5s;
6038 animation-iteration-count: 1;
6039 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
6040}
6041
6042.messageImage.heartbeat.pulse-twice {
6043 animation-name: pulse-twice;
6044 animation-duration: 1s;
6045 animation-iteration-count: 2;
6046 animation-timing-function: linear;
6047}
6048
6049/* Learn More link styles */
6050.heartbeat > .text-link {
6051 color: #3333FF;
6052 -moz-margin-start: 0px;
6053}
6054
6055.heartbeat > .text-link:hover {
6056 color: #9C9CFF;
6057 text-decoration: none;
6058}
6059
6060.heartbeat > .text-link:hover:active {
6061 color: #FF9F00;
6062}
6063
6064/* Heartbeat UI Rating Star Classes */
6065.heartbeat > #star-rating-container {
6066 display: -moz-box;
6067/* margin-bottom: 4px;*/
6068}
6069
6070.heartbeat > #star-rating-container > #star5 {
6071 -moz-box-ordinal-group: 5;
6072}
6073
6074.heartbeat > #star-rating-container > #star4 {
6075 -moz-box-ordinal-group: 4;
6076}
6077
6078.heartbeat > #star-rating-container > #star3 {
6079 -moz-box-ordinal-group: 3;
6080}
6081
6082.heartbeat > #star-rating-container > #star2 {
6083 -moz-box-ordinal-group: 2;
6084}
6085
6086.heartbeat > #star-rating-container > .star-x {
6087 background: url("chrome://browser/skin/heartbeat-star-off.svg");
6088 cursor: pointer;
6089 /* Overrides the -moz-margin-end for all platforms defined in the .plain class */
6090 -moz-margin-end: 4px !important;
6091 width: 16px;
6092 height: 16px;
6093}
6094
6095.heartbeat > #star-rating-container > .star-x:hover,
6096.heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
6097 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
6098}
6099
6100/* === END UITour.inc.css === */
6101
6102#UITourTooltipButtons {
6103 /**
6104 * Override the --panel-arrowcontent-padding so the background extends
6105 * to the sides and bottom of the panel.
6106 */
6107 margin-left: -10px;
6108 margin-right: -10px;
6109 margin-bottom: -10px;
6110}
6111
6112/* === BEGIN contextmenu.inc.css === */
6113
6114menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
6115}
6116
6117#context-navigation > .menuitem-iconic {
6118 -moz-box-flex: 1;
6119 -moz-box-pack: center;
6120 -moz-box-align: center;
6121}
6122
6123#context-navigation > .menuitem-iconic[disabled="true"] {
6124 background-color: transparent;
6125}
6126
6127#context-navigation > .menuitem-iconic > .menu-iconic-left {
6128 -moz-appearance: none;
6129}
6130
6131#context-back > .menu-iconic-left {
6132 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); */
6133 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6134 -moz-image-region: rect(0, 54px, 18px, 36px);
6135}
6136
6137#context-back:not([disabled="true"]):hover > .menu-iconic-left {
6138 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-active"); */
6139 -moz-image-region: rect(18px, 54px, 36px, 36px);
6140}
6141
6142#context-back[disabled="true"] > .menu-iconic-left {
6143 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-disabled"); */
6144 -moz-image-region: rect(36px, 54px, 54px, 36px);
6145}
6146
6147#context-forward > .menu-iconic-left {
6148 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); */
6149 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6150 -moz-image-region: rect(0, 72px, 18px, 54px);
6151}
6152
6153#context-forward:not([disabled="true"]):hover > .menu-iconic-left {
6154 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-active"); */
6155 -moz-image-region: rect(18px, 72px, 36px, 54px);
6156}
6157
6158#context-forward[disabled="true"] > .menu-iconic-left {
6159 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-disabled"); */
6160 -moz-image-region: rect(36px, 72px, 54px, 54px);
6161}
6162
6163#context-reload > .menu-iconic-left {
6164 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); */
6165 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
6166 -moz-image-region: rect(0, 14px, 14px, 0);
6167}
6168
6169#context-reload:not([disabled="true"]):hover > .menu-iconic-left {
6170 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-active"); */
6171 -moz-image-region: rect(14px, 14px, 28px, 0);
6172}
6173
6174#context-reload[disabled="true"] > .menu-iconic-left {
6175 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-disabled"); */
6176 -moz-image-region: rect(28px, 14px, 42px, 0);
6177}
6178
6179#context-stop > .menu-iconic-left {
6180 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); */
6181 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
6182 -moz-image-region: rect(0, 28px, 14px, 14px);
6183}
6184
6185#context-stop:not([disabled="true"]):hover > .menu-iconic-left {
6186 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-active"); */
6187 -moz-image-region: rect(14px, 28px, 28px, 14px);
6188}
6189
6190#context-stop[disabled="true"] > .menu-iconic-left {
6191 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-disabled"); */
6192 -moz-image-region: rect(28px, 28px, 42px, 14px);
6193}
6194
6195#context-bookmarkpage > .menu-iconic-left {
6196 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); */
6197 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6198 -moz-image-region: rect(0, 144px, 18px, 126px);
6199}
6200
6201#context-bookmarkpage:not([disabled="true"]):hover > .menu-iconic-left {
6202 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-active"); */
6203 -moz-image-region: rect(18px, 144px, 36px, 126px);
6204}
6205
6206#context-bookmarkpage[disabled="true"] > .menu-iconic-left {
6207 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); */
6208 -moz-image-region: rect(36px, 144px, 54px, 126px);
6209}
6210
6211#context-bookmarkpage[starred=true] {
6212 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); */
6213 -moz-image-region: rect(0px, 162px, 18px, 144px);
6214}
6215
6216#context-bookmarkpage[starred=true][_moz-menuactive=true] {
6217 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); */
6218 -moz-image-region: rect(18px, 162px, 36px, 144px);
6219}
6220
6221#context-bookmarkpage[starred=true][disabled=true] {
6222 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); */
6223 -moz-image-region: rect(36px, 162px, 54px, 144px);
6224}
6225
6226#context-back:-moz-locale-dir(rtl),
6227#context-forward:-moz-locale-dir(rtl),
6228#context-reload:-moz-locale-dir(rtl) {
6229 transform: scaleX(-1);
6230}
6231
6232#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
6233 width: 18px; /*16px;*/
6234 height: 18px; /*16px;*/
6235 margin: 7px;
6236}
6237
6238#context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
6239#context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
6240 width: 14px;
6241 height: 14px;
6242 margin: 9px;
6243}
6244
6245#context-media-eme-learnmore {
6246 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6247}
6248
6249#context-media-eme-learnmore {
6250 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6251}
6252
6253/* === END contextmenu.inc.css === */
6254
6255#context-navigation {
6256}
6257
6258#context-sep-navigation {
6259/* margin-top: -4px; */
6260}
6261
6262.browser-action-panel > .panel-arrowcontainer > .panel-arrowcontent {
6263 padding: 0;
6264}
6265
6266/* === BEGIN usercontext.inc.css === */
6267
6268/* User Context UI browser styles */
6269
6270#menu_newUserContextTabPersonal {
6271 list-style-image: url("chrome://browser/skin/usercontext/personal.svg");
6272}
6273
6274#menu_newUserContextTabWork {
6275 list-style-image: url("chrome://browser/skin/usercontext/work.svg");
6276}
6277
6278#menu_newUserContextTabBanking {
6279 list-style-image: url("chrome://browser/skin/usercontext/banking.svg");
6280}
6281
6282#menu_newUserContextTabShopping {
6283 list-style-image: url("chrome://browser/skin/usercontext/shopping.svg");
6284}
6285
6286/* URL Bar Decoration */
6287
6288#userContext-indicator {
6289 height: 16px;
6290 width: 16px;
6291}
6292
6293#userContext-label {
6294 margin-inline-end: 3px;
6295 color: #A09090;
6296}
6297
6298#userContext-icons:not([usercontextid]) {
6299 display: none;
6300}
6301
6302#userContext-icons {
6303 -moz-box-align: center;
6304}
6305
6306/* Personal User Context */
6307#userContext-icons[usercontextid="1"] > #userContext-label {
6308 color: #9C9CFF;
6309}
6310#userContext-icons[usercontextid="1"] > #userContext-indicator {
6311 list-style-image: url("chrome://browser/skin/usercontext/personal.svg");
6312}
6313
6314/* Work User Context */
6315#userContext-icons[usercontextid="2"] > #userContext-label {
6316 color: #FF9F00;
6317}
6318#userContext-icons[usercontextid="2"] > #userContext-indicator {
6319 list-style-image: url("chrome://browser/skin/usercontext/work.svg");
6320}
6321
6322/* Banking User Context */
6323#userContext-icons[usercontextid="3"] > #userContext-label {
6324 color: #008484;
6325}
6326#userContext-icons[usercontextid="3"] > #userContext-indicator {
6327 list-style-image: url("chrome://browser/skin/usercontext/banking.svg");
6328}
6329
6330/* Shopping User Context */
6331#userContext-icons[usercontextid="4"] > #userContext-label {
6332 color: #E7ADE7;
6333}
6334#userContext-icons[usercontextid="4"] > #userContext-indicator {
6335 list-style-image: url("chrome://browser/skin/usercontext/shopping.svg");
6336}
6337
6338/* === END usercontext.inc.css === */
KaiRo's SeaMonkey themes