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