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