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