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