projects / themes.git / blame_incremental
? search:
summary | shortlog | log | commit | commitdiff | tree
blob | blame (non-incremental) | history | HEAD
make themes work for newest nightlies
[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 /* icon width + border + horizontal padding (includes the overlap from backbutton-urlbar-overlap) */
43 --forwardbutton-width: 27px;
44 /* icon width + border + horizontal padding (without the overlap from backbutton-urlbar-overlap) /
45 --forwardbutton-width: 25px;*/
46
47 --identity-box-verified-background-color: #000000;
48
49 --panel-separator-color: #A09090;
50 --arrowpanel-hover: #FFCF00;
51 --arrowpanel-active: #FF9F00;
52 --arrowpanel-dimmed: #402000;
53 --arrowpanel-dimmed-further: #794900;
54 --arrowpanel-dimmed-even-further: 603000;
55
56 --urlbar-separator-color: #9C9CFF;
57}
58
59#menubar-items {
60 -moz-box-orient: vertical; /* for flex hack */
61}
62
63#main-menubar {
64 -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
65}
66
67/* ::::: primary toolbar ::::: */
68
69.toolbar-primary > .toolbar-box > .toolbar-holder {
70 background-color: #A09090;
71}
72
73.toolbar-primary > .toolbar-box > .toolbar-startcap,
74.toolbar-primary > .toolbar-box > .toolbar-endcap {
75 background-color: #9C9CFF;
76}
77
78/* Hides the titlebar-placeholder underneath the window caption buttons when we
79 are not autohiding the menubar. */
80#toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
81 display: none;
82}
83
84/* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
85 toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
86 of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
87#toolbar-menubar:not([autohide=true]) ~ #TabsToolbar:not([inFullscreen]),
88#toolbar-menubar[autohide=true]:not([inactive]) ~ #TabsToolbar:not([inFullscreen]) {
89/* margin-top: 3px;*/
90}
91
92#main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
93#main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
94/* margin-top: var(--space-above-tabbar);*/
95}
96
97@media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
98 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
99 #main-window[tabsintitlebar]:not([inFullscreen="true"]) #TabsToolbar {
100 padding-left: 60px;
101 }
102}
103
104#main-window[tabsintitlebar] #toolbar-menubar .toolbar-endcap {
105 /* 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 */
106 display: none;
107}
108
109#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before,
110#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before,
111#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before,
112#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before {
113 outline-color: #A09090;
114}
115
116#navigator-toolbox {
117}
118
119#navigator-toolbox::after {
120 content: "";
121 display: -moz-box;
122 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
123 /*border-bottom: 1px solid ThreeDShadow;*/
124}
125
126#navigator-toolbox > toolbar {
127}
128
129#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
130}
131
132#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
133 overflow: -moz-hidden-unscrollable;
134 max-height: 4em;
135 transition: min-height 170ms ease-out, max-height 170ms ease-out;
136}
137
138#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
139 min-height: 0.1px;
140 max-height: 0;
141 transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
142}
143
144@media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
145 /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
146 /* Indent also due to non-applicable aero rule in original Windows theme. */
147 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
148 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
149 /* like menubar */
150 background-color: #6000CF;
151 color: #FF9F00;
152 }
153
154 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
155 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
156 background-color: #8050B0;
157 color: #FF9F00;
158 }
159
160 #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
161 /*color: inherit;*/
162 }
163
164 #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
165 visibility: hidden;
166 }
167
168 #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
169 -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
170 visibility: visible;
171 }
172}
173
174@media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
175 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
176 #titlebar-buttonbox > .titlebar-button {
177 display: none;
178 }
179}
180
181#nav-bar {
182 /* Position the toolbar above the bottom of background tabs */
183 position: relative;
184 z-index: 1;
185}
186
187#personal-bookmarks {
188/* min-height: 24px; */
189}
190
191#PersonalToolbar > #home-button {
192 -moz-box-orient: horizontal;
193}
194
195#PersonalToolbar > #home-button > .toolbarbutton-text {
196 display: block;
197}
198
199#print-preview-toolbar:not(:-moz-lwtheme) {
200 /* -moz-appearance: toolbox; */
201}
202
203#browser-bottombox:not(:-moz-lwtheme) {
204}
205
206/* ::::: titlebar ::::: */
207
208#titlebar {
209 /* like menubar */
210 background-color: #6000CF;
211 color: #FF9F00;
212}
213#titlebar:-moz-window-inactive {
214 background-color: #8050B0;
215 color: #FF9F00;
216}
217
218#main-window[sizemode="normal"] > #titlebar {
219 margin-top: -3px;
220 margin-bottom: 3px;
221}
222
223#main-window[sizemode="maximized"] > #titlebar {
224 margin-top: 4px;
225}
226
227@media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
228 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
229 #main-window[sizemode="normal"] > #titlebar,
230 #main-window[sizemode="maximized"] > #titlebar {
231 margin-top: 19px;
232 /* There is a margin-bottom set to -23 by code. */
233 }
234}
235
236/* The button box must appear on top of the navigator-toolbox in order for
237 * click and hover mouse events to work properly for the button in the restored
238 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
239 * can swallow those events. It will also place the buttons above the fog on
240 * themes with Aero Glass.
241 */
242#titlebar-buttonbox,
243#main-window[sizemode="maximized"] #titlebar-buttonbox {
244 -moz-appearance: none;
245 margin-top: 6px;
246 margin-top: 4px;
247 margin-inline-end: 3px;
248 z-index: 1;
249}
250
251.titlebar-placeholder[type="appmenu-button"] {
252 margin-left: 4px;
253}
254
255.titlebar-placeholder[type="caption-buttons"] {
256 margin-left: 10px;
257}
258
259/* titlebar command buttons */
260#titlebar-min {
261 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize");
262}
263
264#titlebar-min:hover {
265 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize-hover");
266}
267
268#titlebar-max {
269 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize");
270}
271
272#titlebar-max:hover {
273 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize-hover");
274}
275
276#main-window[sizemode="maximized"] #titlebar-max {
277 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore");
278}
279
280#main-window[sizemode="maximized"] #titlebar-max:hover {
281 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore-hover");
282}
283
284#titlebar-close {
285 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close");
286}
287
288#titlebar-close:hover {
289 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-hover");
290}
291
292@media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
293 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
294 #titlebar-fullscreen-button {
295 -moz-appearance: none;
296 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon.png");
297 -moz-image-region: rect(0px, 16px, 16px, 0px);
298 }
299
300 #titlebar-fullscreen-button:hover {
301 -moz-image-region: rect(0px, 32px, 16px, 16px);
302 }
303
304 @media (min-resolution: 2dppx) {
305 #titlebar-fullscreen-button {
306 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon@2x.png");
307 -moz-image-region: rect(0px, 32px, 32px, 0px);
308 }
309
310 #titlebar-fullscreen-button:hover {
311 -moz-image-region: rect(0px, 64px, 32px, 32px);
312 }
313 }
314}
315
316
317/* ::::: bookmark buttons ::::: */
318
319toolbarbutton.bookmark-item:not(.subviewbutton),
320#personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
321/* margin: 0;
322 padding: 2px 3px;
323 -moz-appearance: none;
324 border: 1px solid transparent;*/
325}
326
327toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]) {
328/* border-color: var(--toolbarbutton-hover-bordercolor);
329 background: var(--toolbarbutton-hover-background);*/
330}
331
332toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),toolbarbutton.bookmark-item[open="true"] {
333/* border-color: var(--toolbarbutton-active-bordercolor);
334 box-shadow: var(--toolbarbutton-active-boxshadow);
335 background: var(--toolbarbutton-active-background);*/
336}
337
338.bookmark-item > .toolbarbutton-icon,
339#personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
340 width: 16px;
341 height: 16px;
342 margin-inline-start: 1px;
343 margin-inline-end: 2px;
344 margin-top: 1px;
345 margin-bottom: 1px;
346}
347
348/* Force the display of the label for bookmarks */
349.bookmark-item > .toolbarbutton-text,
350#personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
351 display: -moz-box !important;
352}
353
354.bookmark-item > .toolbarbutton-menu-dropmarker {
355 display: none;
356}
357
358#bookmarks-toolbar-placeholder {
359 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
360 -moz-box-orient: horizontal;
361}
362
363toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
364#personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
365 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
366}
367
368/* ----- BOOKMARK STAR ANIMATION ----- */
369
370@keyframes animation-bookmarkAdded {
371 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
372 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
373 80% { opacity: 1; }
374 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
375}
376
377@keyframes animation-bookmarkPulse {
378 from { transform: scale(1); }
379 50% { transform: scale(1.3); }
380 to { transform: scale(1); }
381}
382
383#bookmarked-notification-container {
384 min-height: 1px;
385 min-width: 1px;
386 height: 1px;
387 margin-bottom: -1px;
388 z-index: 5;
389 position: relative;
390}
391
392#bookmarked-notification {
393 background-size: 16px;
394 background-position: center;
395 background-repeat: no-repeat;
396 width: 16px;
397 height: 16px;
398 opacity: 0;
399}
400
401#bookmarked-notification-dropmarker-anchor {
402 z-index: -1;
403 position: relative;
404}
405
406#bookmarked-notification-dropmarker-icon {
407 width: 18px;
408 height: 18px;
409 visibility: hidden;
410}
411
412#bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
413 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
414 animation: animation-bookmarkAdded 800ms;
415 animation-timing-function: ease, ease, ease;
416}
417
418#bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
419 list-style-image: none !important;
420}
421
422#bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
423 visibility: visible;
424 animation: animation-bookmarkPulse 300ms;
425 animation-delay: 600ms;
426 animation-timing-function: ease-out;
427}
428
429/* ::::: bookmark menus ::::: */
430
431menu.bookmark-item,
432menuitem.bookmark-item {
433 min-width: 0;
434 max-width: 32em;
435}
436
437.bookmark-item:not(.subviewbutton) > .menu-iconic-left {
438 margin-top: 0;
439 margin-bottom: 0;
440}
441
442.bookmark-item > .menu-iconic-left > .menu-iconic-icon {
443 padding-inline-start: 0px;
444}
445
446/* ::::: bookmark items ::::: */
447
448.bookmark-item {
449 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
450 -moz-image-region: auto;
451}
452
453.bookmark-item[container] {
454 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
455 -moz-image-region: auto;
456}
457
458.bookmark-item[container][open] {
459 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
460 -moz-image-region: auto;
461}
462
463.bookmark-item[container][livemark] {
464 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
465 -moz-image-region: auto;
466}
467
468.bookmark-item[container][livemark] .bookmark-item {
469 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
470 -moz-image-region: rect(0px, 16px, 16px, 0px);
471}
472
473.bookmark-item[container][livemark] .bookmark-item[visited] {
474 -moz-image-region: rect(0px, 32px, 16px, 16px);
475}
476
477.bookmark-item[container][query] {
478 list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
479 -moz-image-region: auto;
480}
481
482.bookmark-item[query][tagContainer] {
483 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
484 -moz-image-region: auto;
485}
486
487.bookmark-item[query][dayContainer] {
488 list-style-image: url("chrome://communicator/skin/history/calendar.png");
489 -moz-image-region: auto;
490}
491
492.bookmark-item[query][hostContainer] {
493 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
494 -moz-image-region: auto;
495}
496
497.bookmark-item[query][hostContainer][open] {
498 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
499 -moz-image-region: auto;
500}
501
502.bookmark-item[cutting] > .toolbarbutton-icon,
503.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
504 opacity: 0.5;
505}
506
507.bookmark-item[cutting] > .toolbarbutton-text,
508.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
509 opacity: 0.7;
510}
511
512/* ::::: primary toolbar buttons ::::: */
513
514/* === BEGIN toolbarbuttons.inc.css === */
515
516/* Whole section of this included file: */
517:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
518 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
519 #social-share-button, #open-file-button, #find-button, #developer-button,
520 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
521 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
522 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
523 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu),
524#bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
525 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
526}
527
528#back-button {
529 -moz-image-region: rect(0, 36px, 18px, 18px);
530}
531
532#back-button:hover:not([disabled="true"]) {
533 -moz-image-region: rect(18px, 36px, 36px, 18px);
534}
535
536#back-button[disabled="true"] {
537 -moz-image-region: rect(36px, 36px, 54px, 18px);
538}
539
540#forward-button {
541 -moz-image-region: rect(0, 72px, 18px, 54px);
542}
543
544#forward-button:hover:not([disabled="true"]) {
545 -moz-image-region: rect(18px, 72px, 36px, 54px);
546}
547
548#forward-button[disabled="true"] {
549 -moz-image-region: rect(36px, 72px, 54px, 54px);
550}
551
552#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
553#forward-button:-moz-locale-dir(rtl) {
554 transform: scaleX(-1);
555}
556
557#home-button[cui-areatype="toolbar"] {
558 -moz-image-region: rect(0, 126px, 18px, 108px);
559}
560
561#home-button[cui-areatype="toolbar"]:hover {
562 -moz-image-region: rect(18px, 126px, 36px, 108px);
563}
564
565#bookmarks-menu-button[cui-areatype="toolbar"] {
566 -moz-image-region: rect(0, 144px, 18px, 126px);
567}
568
569#bookmarks-menu-button[cui-areatype="toolbar"]:hover,
570#bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
571 -moz-image-region: rect(18px, 144px, 36px, 126px);
572}
573
574/* When "new tab" page shows up, the menubutton-button (star button) is disabled */
575#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
576 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
577 background-color: transparent !important;
578}
579
580#bookmarks-menu-button[cui-areatype="toolbar"][starred] {
581 -moz-image-region: rect(0, 162px, 18px, 144px);
582}
583
584#bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
585#bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
586#bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
587 /* When starred and clicked (for edit/delete dialog),
588 * then only the menubutton-button itself is open, but not the whole menubutton. */
589 -moz-image-region: rect(18px, 162px, 36px, 144px);
590}
591
592#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
593 -moz-image-region: rect(0, 630px, 18px, 612px);
594}
595
596#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
597 padding: 1px;
598 -moz-box-align: center;
599}
600
601#bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
602#bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
603 -moz-image-region: rect(18px, 630px, 36px, 612px);
604}
605
606#bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
607#bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
608 padding-top: 2px;
609 padding-bottom: 0px;
610 padding-inline-start: 2px;
611 padding-inline-end: 0px;
612}
613
614#history-panelmenu[cui-areatype="toolbar"] {
615 -moz-image-region: rect(0, 180px, 18px, 162px);
616}
617
618#history-panelmenu[cui-areatype="toolbar"]:hover,
619#history-panelmenu[cui-areatype="toolbar"][open="true"] {
620 -moz-image-region: rect(18px, 180px, 36px, 162px);
621}
622
623#downloads-button[cui-areatype="toolbar"] {
624 -moz-image-region: rect(0, 198px, 18px, 180px);
625}
626
627#downloads-button[cui-areatype="toolbar"]:hover,
628#downloads-button[cui-areatype="toolbar"][open="true"] {
629 -moz-image-region: rect(18px, 198px, 36px, 180px);
630}
631
632#add-ons-button[cui-areatype="toolbar"] {
633 -moz-image-region: rect(0, 216px, 18px, 198px);
634}
635
636#add-ons-button[cui-areatype="toolbar"]:hover {
637 -moz-image-region: rect(18px, 216px, 36px, 198px);
638}
639
640#open-file-button[cui-areatype="toolbar"] {
641 -moz-image-region: rect(0, 234px, 18px, 216px);
642}
643
644#open-file-button[cui-areatype="toolbar"]:hover {
645 -moz-image-region: rect(18px, 234px, 36px, 216px);
646}
647
648#save-page-button[cui-areatype="toolbar"] {
649 -moz-image-region: rect(0, 252px, 18px, 234px);
650}
651
652#save-page-button[cui-areatype="toolbar"]:hover {
653 -moz-image-region: rect(18px, 252px, 36px, 234px);
654}
655
656#sync-button[cui-areatype="toolbar"] {
657 -moz-image-region: rect(0, 792px, 18px, 774px);
658}
659
660#sync-button[cui-areatype="toolbar"]:hover {
661 -moz-image-region: rect(18px, 792px, 36px, 774px);
662}
663
664#containers-panelmenu[cui-areatype="toolbar"] {
665 -moz-image-region: rect(0, 810px, 18px, 792px);
666}
667
668#containers-panelmenu[cui-areatype="toolbar"]:hover {
669 -moz-image-region: rect(18px, 810px, 36px, 792px);
670}
671
672#feed-button[cui-areatype="toolbar"] {
673 -moz-image-region: rect(0, 288px, 18px, 270px);
674}
675
676#feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
677#feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
678 -moz-image-region: rect(18px, 288px, 36px, 270px);
679}
680
681#feed-button[cui-areatype="toolbar"][disabled="true"] {
682 -moz-image-region: rect(36px, 288px, 54px, 270px);
683}
684
685#social-share-button[cui-areatype="toolbar"] {
686 -moz-image-region: rect(0px, 306px, 18px, 288px);
687}
688
689#social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
690#social-share-button[cui-areatype="toolbar"][open="true"] {
691 -moz-image-region: rect(18px, 306px, 36px, 288px);
692}
693
694#social-share-button[cui-areatype="toolbar"][disabled="true"] {
695 -moz-image-region: rect(36px, 306px, 54px, 288px);
696}
697
698#characterencoding-button[cui-areatype="toolbar"] {
699 -moz-image-region: rect(0, 324px, 18px, 306px);
700}
701
702#characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
703#characterencoding-button[cui-areatype="toolbar"][open="true"] {
704 -moz-image-region: rect(18px, 324px, 36px, 306px);
705}
706
707#characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
708 -moz-image-region: rect(36px, 324px, 54px, 306px);
709}
710
711#new-window-button[cui-areatype="toolbar"] {
712 -moz-image-region: rect(0, 342px, 18px, 324px);
713}
714
715#new-window-button[cui-areatype="toolbar"]:hover {
716 -moz-image-region: rect(18px, 342px, 36px, 324px);
717}
718
719#e10s-button[cui-areatype="toolbar"] {
720 -moz-image-region: rect(0, 342px, 18px, 324px);
721}
722
723#e10s-button[cui-areatype="toolbar"]:hover {
724 -moz-image-region: rect(18px, 342px, 36px, 324px);
725}
726
727#e10s-button > .toolbarbutton-icon {
728 transform: scaleY(-1);
729}
730
731#new-tab-button[cui-areatype="toolbar"] {
732 -moz-image-region: rect(0, 360px, 18px, 342px);
733}
734
735#new-tab-button[cui-areatype="toolbar"]:hover {
736 -moz-image-region: rect(18px, 360px, 36px, 342px);
737}
738
739#privatebrowsing-button[cui-areatype="toolbar"] {
740 -moz-image-region: rect(0, 378px, 18px, 360px);
741}
742
743#privatebrowsing-button[cui-areatype="toolbar"]:hover {
744 -moz-image-region: rect(18px, 378px, 36px, 360px);
745}
746
747#find-button[cui-areatype="toolbar"] {
748 -moz-image-region: rect(0, 396px, 18px, 378px);
749}
750
751#find-button[cui-areatype="toolbar"]:hover {
752 -moz-image-region: rect(18px, 396px, 36px, 378px);
753}
754
755#print-button[cui-areatype="toolbar"] {
756 -moz-image-region: rect(0, 414px, 18px, 396px);
757}
758
759#print-button[cui-areatype="toolbar"]:hover {
760 -moz-image-region: rect(18px, 414px, 36px, 396px);
761}
762
763#fullscreen-button[cui-areatype="toolbar"] {
764 -moz-image-region: rect(0, 432px, 18px, 414px);
765}
766
767#fullscreen-button[cui-areatype="toolbar"]:hover {
768 -moz-image-region: rect(18px, 432px, 36px, 414px);
769}
770
771#developer-button[cui-areatype="toolbar"] {
772 -moz-image-region: rect(0, 450px, 18px, 432px);
773}
774
775#developer-button[cui-areatype="toolbar"]:hover,
776#developer-button[cui-areatype="toolbar"][open="true"] {
777 -moz-image-region: rect(18px, 450px, 36px, 432px);
778}
779
780#preferences-button[cui-areatype="toolbar"] {
781 -moz-image-region: rect(0, 468px, 18px, 450px);
782}
783
784#preferences-button[cui-areatype="toolbar"]:hover {
785 -moz-image-region: rect(18px, 468px, 36px, 450px);
786}
787
788#PanelUI-menu-button {
789 -moz-image-region: rect(0, 486px, 18px, 468px);
790}
791
792#PanelUI-menu-button:hover,
793#PanelUI-menu-button[open="true"] {
794 -moz-image-region: rect(18px, 486px, 36px, 468px);
795}
796
797#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
798 -moz-image-region: rect(0, 504px, 18px, 486px);
799}
800
801#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
802 -moz-image-region: rect(18px, 504px, 36px, 486px);
803}
804
805#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
806 -moz-image-region: rect(36px, 504px, 54px, 486px);
807}
808
809#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
810 -moz-image-region: rect(0, 522px, 18px, 504px);
811}
812
813#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
814 -moz-image-region: rect(18px, 522px, 36px, 504px);
815}
816
817#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
818 -moz-image-region: rect(36px, 522px, 54px, 504px);
819}
820
821#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
822 -moz-image-region: rect(0, 540px, 18px, 522px);
823}
824
825#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
826 -moz-image-region: rect(18px, 540px, 36px, 522px);
827}
828
829#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
830 -moz-image-region: rect(36px, 540px, 54px, 522px);
831}
832
833#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
834 -moz-image-region: rect(0, 558px, 18px, 540px);
835}
836
837#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
838 -moz-image-region: rect(18px, 558px, 36px, 540px);
839}
840
841#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
842 -moz-image-region: rect(36px, 558px, 54px, 540px);
843}
844
845#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
846 -moz-image-region: rect(0, 576px, 18px, 558px);
847}
848
849#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
850 -moz-image-region: rect(18px, 576px, 36px, 558px);
851}
852
853#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
854 -moz-image-region: rect(36px, 576px, 54px, 558px);
855}
856
857#nav-bar-overflow-button {
858 -moz-image-region: rect(0, 612px, 18px, 594px);
859}
860
861#nav-bar-overflow-button:hover,
862#nav-bar-overflow-button[open="true"] {
863 -moz-image-region: rect(18px, 612px, 36px, 594px);
864}
865
866#nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
867 transform: scaleX(-1);
868}
869
870#tabview-button {
871 -moz-image-region: rect(0, 648px, 18px, 630px);
872}
873
874#tabview-button:hover {
875 -moz-image-region: rect(18px, 648px, 36px, 630px);
876}
877
878#email-link-button[cui-areatype="toolbar"] {
879 -moz-image-region: rect(0, 666px, 18px, 648px);
880}
881
882#email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
883 -moz-image-region: rect(18px, 666px, 36px, 648px);
884}
885
886#email-button[cui-areatype="toolbar"][disabled="true"] {
887 -moz-image-region: rect(36px, 666px, 54px, 648px);
888}
889
890#sidebar-button[cui-areatype="toolbar"] {
891 -moz-image-region: rect(0, 684px, 18px, 666px);
892}
893
894#sidebar-button[cui-areatype="toolbar"]:hover {
895 -moz-image-region: rect(18px, 684px, 36px, 666px);
896}
897
898#panic-button[cui-areatype="toolbar"] {
899 -moz-image-region: rect(0, 702px, 18px, 684px);
900}
901
902#panic-button[cui-areatype="toolbar"]:hover,
903#panic-button[cui-areatype="toolbar"][open] {
904 -moz-image-region: rect(18px, 702px, 36px, 684px);
905}
906
907#panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
908 transform: scaleX(-1);
909}
910
911#webide-button[cui-areatype="toolbar"] {
912 -moz-image-region: rect(0, 738px, 18px, 720px);
913}
914
915#webide-button[cui-areatype="toolbar"]:hover {
916 -moz-image-region: rect(18px, 738px, 36px, 720px);
917}
918
919/* === END toolbarbuttons.inc.css === */
920
921/* === BEGIN menupanel.inc.css === */
922
923/* Menu panel and palette styles */
924
925toolbaritem[sdkstylewidget="true"] > toolbarbutton,
926:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
927 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
928 #social-share-button, #open-file-button, #find-button, #developer-button,
929 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
930 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
931 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
932 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"],
933toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
934 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
935 #social-share-button, #open-file-button, #find-button, #developer-button,
936 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
937 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
938 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
939 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) {
940 list-style-image: url(chrome://browser/skin/menuPanel.svg);
941}
942
943:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
944 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
945 #social-share-button, #open-file-button, #find-button, #developer-button,
946 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
947 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
948 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
949 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"] > .toolbarbutton-icon,
950:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
951 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
952 #social-share-button, #open-file-button, #find-button, #developer-button,
953 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
954 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
955 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
956 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-icon,
957:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
958 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
959 #social-share-button, #open-file-button, #find-button, #developer-button,
960 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
961 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
962 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
963 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
964:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
965 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
966 #social-share-button, #open-file-button, #find-button, #developer-button,
967 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
968 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
969 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
970 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
971 filter: url(chrome://browser/skin/filters.svg#fill);
972 fill: currentColor;
973}
974
975#home-button[cui-areatype="menu-panel"],
976toolbarpaletteitem[place="palette"] > #home-button {
977 -moz-image-region: rect(0px, 128px, 32px, 96px);
978}
979
980#bookmarks-menu-button[cui-areatype="menu-panel"],
981toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
982 -moz-image-region: rect(0px, 192px, 32px, 160px);
983}
984
985#history-panelmenu[cui-areatype="menu-panel"],
986toolbarpaletteitem[place="palette"] > #history-panelmenu {
987 -moz-image-region: rect(0px, 224px, 32px, 192px);
988}
989
990#downloads-button[cui-areatype="menu-panel"],
991toolbarpaletteitem[place="palette"] > #downloads-button {
992 -moz-image-region: rect(0px, 256px, 32px, 224px);
993}
994
995#add-ons-button[cui-areatype="menu-panel"],
996toolbarpaletteitem[place="palette"] > #add-ons-button {
997 -moz-image-region: rect(0px, 288px, 32px, 256px);
998}
999
1000#open-file-button[cui-areatype="menu-panel"],
1001toolbarpaletteitem[place="palette"] > #open-file-button {
1002 -moz-image-region: rect(0px, 320px, 32px, 288px);
1003}
1004
1005#save-page-button[cui-areatype="menu-panel"],
1006toolbarpaletteitem[place="palette"] > #save-page-button {
1007 -moz-image-region: rect(0px, 352px, 32px, 320px);
1008}
1009
1010#sync-button[cui-areatype="menu-panel"],
1011toolbarpaletteitem[place="palette"] > #sync-button {
1012 -moz-image-region: rect(0px, 1024px, 32px, 992px);
1013}
1014
1015#containers-panelmenu[cui-areatype="menu-panel"],
1016toolbarpaletteitem[place="palette"] > #containers-panelmenu {
1017 -moz-image-region: rect(0px, 1056px, 32px, 1024px);
1018}
1019
1020#feed-button[cui-areatype="menu-panel"],
1021toolbarpaletteitem[place="palette"] > #feed-button {
1022 -moz-image-region: rect(0px, 416px, 32px, 384px);
1023}
1024
1025#social-share-button[cui-areatype="menu-panel"],
1026toolbarpaletteitem[place="palette"] > #social-share-button {
1027 -moz-image-region: rect(0px, 448px, 32px, 416px);
1028}
1029
1030#characterencoding-button[cui-areatype="menu-panel"],
1031toolbarpaletteitem[place="palette"] > #characterencoding-button {
1032 -moz-image-region: rect(0px, 480px, 32px, 448px);
1033}
1034
1035#new-window-button[cui-areatype="menu-panel"],
1036toolbarpaletteitem[place="palette"] > #new-window-button {
1037 -moz-image-region: rect(0px, 512px, 32px, 480px);
1038}
1039
1040#e10s-button[cui-areatype="menu-panel"],
1041toolbarpaletteitem[place="palette"] > #e10s-button {
1042 -moz-image-region: rect(0px, 512px, 32px, 480px);
1043}
1044
1045#new-tab-button[cui-areatype="menu-panel"],
1046toolbarpaletteitem[place="palette"] > #new-tab-button {
1047 -moz-image-region: rect(0px, 544px, 32px, 512px);
1048}
1049
1050#privatebrowsing-button[cui-areatype="menu-panel"],
1051toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1052 -moz-image-region: rect(0px, 576px, 32px, 544px);
1053}
1054
1055#tabview-button[cui-areatype="menu-panel"],
1056toolbarpaletteitem[place="palette"] > #tabview-button {
1057 -moz-image-region: rect(0px, 608px, 32px, 576px);
1058}
1059
1060#find-button[cui-areatype="menu-panel"],
1061toolbarpaletteitem[place="palette"] > #find-button {
1062 -moz-image-region: rect(0px, 640px, 32px, 608px);
1063}
1064
1065#print-button[cui-areatype="menu-panel"],
1066toolbarpaletteitem[place="palette"] > #print-button {
1067 -moz-image-region: rect(0px, 672px, 32px, 640px);
1068}
1069
1070#fullscreen-button[cui-areatype="menu-panel"],
1071toolbarpaletteitem[place="palette"] > #fullscreen-button {
1072 -moz-image-region: rect(0px, 704px, 32px, 672px);
1073}
1074
1075#developer-button[cui-areatype="menu-panel"],
1076toolbarpaletteitem[place="palette"] > #developer-button {
1077 -moz-image-region: rect(0px, 736px, 32px, 704px);
1078}
1079
1080#preferences-button[cui-areatype="menu-panel"],
1081toolbarpaletteitem[place="palette"] > #preferences-button {
1082 -moz-image-region: rect(0px, 768px, 32px, 736px);
1083}
1084
1085#email-link-button[cui-areatype="menu-panel"],
1086toolbarpaletteitem[place="palette"] > #email-link-button {
1087 -moz-image-region: rect(0, 800px, 32px, 768px);
1088}
1089
1090#email-link-button[cui-areatype="menu-panel"][disabled="true"],
1091toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1092 -moz-image-region: rect(64px, 800px, 96px, 768px);
1093}
1094
1095#sidebar-button[cui-areatype="menu-panel"],
1096toolbarpaletteitem[place="palette"] > #sidebar-button {
1097 -moz-image-region: rect(0, 864px, 32px, 832px);
1098}
1099
1100#panic-button[cui-areatype="menu-panel"],
1101toolbarpaletteitem[place="palette"] > #panic-button {
1102 -moz-image-region: rect(0, 896px, 32px, 864px);
1103}
1104
1105#webide-button[cui-areatype="menu-panel"],
1106toolbarpaletteitem[place="palette"] > #webide-button {
1107 -moz-image-region: rect(0px, 960px, 32px, 928px);
1108}
1109
1110toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1111 -moz-image-region: rect(0, 832px, 32px, 800px);
1112}
1113
1114/* Wide panel control icons */
1115
1116#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1117#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1118toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1119toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1120 list-style-image: url(chrome://browser/skin/menuPanel-small.svg);
1121}
1122
1123#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon,
1124#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon,
1125toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
1126toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
1127 filter: url(chrome://browser/skin/filters.svg#fill);
1128 fill: currentColor;
1129}
1130
1131#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1132toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1133 -moz-image-region: rect(0px, 32px, 16px, 16px);
1134}
1135
1136#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1137toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1138 -moz-image-region: rect(0px, 48px, 16px, 32px);
1139}
1140
1141#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1142toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1143 -moz-image-region: rect(0px, 64px, 16px, 48px);
1144}
1145
1146#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1147toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1148 -moz-image-region: rect(0px, 80px, 16px, 64px);
1149}
1150
1151#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1152toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1153 -moz-image-region: rect(0px, 96px, 16px, 80px);
1154}
1155
1156#add-share-provider {
1157 list-style-image: url(chrome://browser/skin/menuPanel-small.svg);
1158 -moz-image-region: rect(0px, 96px, 16px, 80px);
1159}
1160
1161/* === END menupanel.inc.css === */
1162
1163.toolbarbutton-1:not([type="menu-button"]) {
1164 -moz-box-orient: vertical;
1165}
1166
1167.toolbarbutton-1,
1168.toolbarbutton-1 > .toolbarbutton-menubutton-button {
1169/* min-width: 36px;
1170 min-height: 36px;*/
1171}
1172
1173.toolbarbutton-1,
1174.toolbarbutton-1 > .toolbarbutton-menubutton-button,
1175.toolbarbutton-1[disabled="true"]:hover:active,
1176.toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1177 padding: 1px 2px;
1178}
1179
1180.toolbarbutton-1:hover:active,
1181.toolbarbutton-1[open="true"],
1182.toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1183 padding-top: 2px;
1184 padding-bottom: 0px;
1185 padding-inline-start: 3px;
1186 padding-inline-end: 1px;
1187}
1188
1189#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1190#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1191#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1192#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1193#main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1194}
1195
1196.toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1197.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1198}
1199
1200toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1201toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1202}
1203
1204.toolbarbutton-1 > .toolbarbutton-icon,
1205.toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1206}
1207
1208.findbar-button,
1209#nav-bar .toolbarbutton-1,
1210#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1211}
1212
1213#nav-bar .toolbarbutton-1:not([type=menu-button]),
1214#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1215#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1216}
1217
1218#nav-bar #PanelUI-menu-button {
1219/* padding-inline-start: 7px;
1220 padding-inline-end: 5px;*/
1221}
1222
1223#nav-bar .toolbarbutton-1[type=panel],
1224#nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
1225/* padding-left: 5px;
1226 padding-right: 5px;*/
1227}
1228
1229#nav-bar .toolbarbutton-1 > menupopup {
1230/* margin-top: -3px;*/
1231}
1232
1233#nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1234 margin-top: -4px;
1235}
1236
1237#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1238/* padding-inline-end: 0;*/
1239}
1240
1241#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1242/* padding-inline-start: 0;
1243 -moz-box-align: center;*/
1244}
1245
1246.findbar-button > .toolbarbutton-text,
1247#nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1248#nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1249#nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
1250#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1251#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1252window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1253/* padding: 2px 6px;
1254 border: 1px solid;
1255 border-color: transparent;
1256 transition-property: background-color, border-color;
1257 transition-duration: 150ms;*/
1258}
1259/*
1260#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-icon,
1261#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-badge-stack,
1262#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1263 padding: calc(var(--toolbarbutton-vertical-inner-padding) + 1px) 7px;
1264}
1265*/
1266
1267/* Help SDK icons fit: */
1268toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
1269toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
1270 width: 16px;
1271}
1272
1273#nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1274 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1275 width: 32px;
1276}
1277
1278#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1279#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
1280#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon,
1281#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
1282#nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1283/* padding-inline-end: 17px;*/
1284}
1285
1286#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1287#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon {
1288 /* horizontal padding + border + icon width */
1289/* max-width: 43px;*/
1290}
1291
1292#nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1293}
1294
1295#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1296}
1297
1298#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1299}
1300
1301#nav-bar .toolbaritem-combined-buttons {
1302/* margin-left: 2px;
1303 margin-right: 2px;*/
1304}
1305
1306#nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1307/* padding-left: 0;
1308 padding-right: 0;*/
1309}
1310
1311#nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1312#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 {
1313/*
1314 content: "";
1315 display: -moz-box;
1316 width: 1px;
1317 height: 16px;
1318 margin-inline-end: -1px;
1319*/
1320}
1321
1322window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1323}
1324
1325.findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
1326#nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1327#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1328#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1329#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1330#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1331#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
1332window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1333#nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1334}
1335
1336.findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
1337#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
1338#nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1339#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1340#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1341#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
1342}
1343
1344#TabsToolbar .toolbarbutton-1,
1345#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1346.tabbrowser-arrowscrollbox > .scrollbutton-up,
1347.tabbrowser-arrowscrollbox > .scrollbutton-down {
1348}
1349
1350#TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1351#TabsToolbar .toolbarbutton-1[open],
1352#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1353.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1354.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1355}
1356
1357/* unified back/forward button */
1358
1359#forward-button {
1360 -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
1361}
1362
1363#forward-button > menupopup {
1364 margin-top: 1px !important;
1365}
1366
1367#forward-button > .toolbarbutton-icon {
1368 background-clip: padding-box !important;
1369 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1370 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1371}
1372
1373#forward-button {
1374 margin-inline-start: -4px !important;
1375 padding-left: 5px;
1376 padding-right: 5px;
1377 margin-top: 3px;
1378 margin-bottom: 3px;
1379 border-radius: 0 10000px 10000px 0;
1380/* max-width: calc(var(--forwardbutton-width) + var(--backbutton-urlbar-overlap)) !important; */
1381}
1382
1383#forward-button:-moz-locale-dir(rtl) {
1384 border-radius: 10000px 0 0 10000px;
1385}
1386
1387window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1388 transition: margin-left 150ms ease-out;
1389}
1390
1391window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
1392 margin-left: calc(0px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1393}
1394
1395window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1396 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1397 transition-delay: 100s;
1398}
1399
1400window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1401 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1402 margin-left: calc(-0.01px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1403}
1404
1405#back-button {
1406/* padding-top: 3px !important;
1407 padding-bottom: 3px !important;
1408 padding-inline-start: 5px !important;
1409 padding-inline-end: 0 !important;*/
1410 position: relative;
1411 z-index: 1;
1412 border-radius: 10000px;
1413 width: 30px;
1414 height: 30px;
1415 margin-top: -2px;
1416 margin-bottom: -2px;
1417}
1418
1419#back-button:-moz-locale-dir(rtl) {
1420}
1421
1422#back-button > menupopup {
1423 margin-top: -1px !important;
1424}
1425
1426#back-button > .toolbarbutton-icon {
1427 border-radius: 10000px !important;
1428 background-clip: padding-box !important;
1429/* background-color: hsla(210,25%,98%,.08) !important;
1430 padding: 6px !important;
1431 border-style: none !important;
1432 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1433 0 0 0 1px hsla(210,4%,10%,.25);*/
1434 transition-property: background-color, box-shadow !important;
1435 transition-duration: 250ms !important;
1436}
1437
1438#back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1439/* background-color: hsla(210,4%,10%,.08) !important;*/
1440}
1441
1442#back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1443#back-button[open="true"] > .toolbarbutton-icon {
1444/* background-color: hsla(210,4%,10%,.12) !important;
1445 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1446 0 0 0 1px hsla(210,4%,10%,.25),
1447 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1448}
1449
1450#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1451 transform: scaleX(-1);
1452}
1453/*
1454.unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1455.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1456 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1457}
1458
1459.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1460.unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1461 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1462}
1463
1464#home-button.bookmark-item {
1465 list-style-image: url("chrome://browser/skin/Toolbar.png");
1466}
1467
1468#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),
1469#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),
1470#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1471#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1472#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1473#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1474#home-button.bookmark-item:-moz-lwtheme-brighttext {
1475 position: relative;
1476 z-index: 1;
1477 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1478}
1479
1480#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1481#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1482 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1483}
1484*/
1485
1486#downloads-button > .toolbarbutton-icon {
1487 margin: 0;
1488}
1489
1490/* tabview menu item */
1491
1492#menu_tabview {
1493 list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
1494 -moz-image-region: rect(1px, 89px, 17px, 73px);
1495}
1496
1497#menu_tabview[groups="0"] {
1498 -moz-image-region: rect(1px, 17px, 17px, 1px);
1499}
1500
1501#menu_tabview[groups="1"] {
1502 -moz-image-region: rect(1px, 35px, 17px, 19px);
1503}
1504
1505#menu_tabview[groups="2"] {
1506 -moz-image-region: rect(1px, 53px, 17px, 37px);
1507}
1508
1509#menu_tabview[groups="3"] {
1510 -moz-image-region: rect(1px, 71px, 17px, 55px);
1511}
1512
1513/* undo close tab menu item */
1514#alltabs_undoCloseTab {
1515 list-style-image: url(chrome://browser/skin/undoCloseTab.png);
1516}
1517
1518@media (min-resolution: 1.1dppx) {
1519 #alltabs_undoCloseTab {
1520 list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png);
1521 }
1522 #alltabs_undoCloseTab > .toolbarbutton-icon {
1523 width: 16px;
1524 }
1525}
1526
1527/* zoom control text (reset) button special case: */
1528
1529#nav-bar #zoom-reset-button > .toolbarbutton-text {
1530 /* To make this line up with the icons, it needs the same height (18px) +
1531 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1532 * increase in text sizes would break things...
1533 */
1534 min-height: 20px;
1535}
1536
1537/* ::::: fullscreen window controls ::::: */
1538
1539#minimize-button,
1540#restore-button,
1541#close-button {
1542 -moz-appearance: none;
1543 border: none;
1544/* margin: 0 !important;
1545 padding: 6px 12px;*/
1546}
1547
1548#minimize-button {
1549 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
1550}
1551
1552#minimize-button:hover {
1553 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-hover);
1554}
1555
1556#restore-button {
1557 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
1558}
1559
1560#restore-button:hover {
1561 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-hover);
1562}
1563
1564#minimize-button:hover,
1565#restore-button:hover {
1566/* background-color: hsla(0, 0%, 0%, .12);*/
1567}
1568
1569#minimize-button:hover:active,
1570#restore-button:hover:active {
1571/* background-color: hsla(0, 0%, 0%, .22);*/
1572}
1573
1574#close-button {
1575 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
1576}
1577
1578#close-button:hover {
1579/* background-color: hsl(355, 86%, 49%);*/
1580 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-hover);
1581}
1582
1583#close-button:hover:active {
1584/* background-color: hsl(355, 82%, 69%);*/
1585}
1586
1587/* ::::: Location Bar ::::: */
1588
1589#urlbar,
1590.searchbar-textbox {
1591 border-radius: 5px;
1592 margin: 2px 0;
1593 margin-inline-start: 3px;
1594}
1595
1596#urlbar {
1597 /* make color as light as possible to deal with dark non-domain parts */
1598 color: #FFBFFF;
1599}
1600
1601#urlbar:-moz-lwtheme,
1602.searchbar-textbox:-moz-lwtheme {
1603 /* background-color: rgba(255,255,255,.8);
1604 @navbarTextboxCustomBorder@
1605 color: black; */
1606}
1607
1608#urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1609.searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1610/* background-color: rgba(255,255,255,.9);*/
1611}
1612
1613#urlbar:-moz-lwtheme[focused]:not([readonly]),
1614.searchbar-textbox:-moz-lwtheme[focused] {
1615/* background-color: white;*/
1616}
1617
1618window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1619/* border-inline-start: none;
1620 margin-left: 0;*/
1621}
1622
1623window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1624/* border-top-left-radius: 0;
1625 border-bottom-left-radius: 0; */
1626}
1627
1628window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1629/* border-top-right-radius: 0;
1630 border-bottom-right-radius: 0; */
1631}
1632
1633window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1634/* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1635/* margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1636}
1637
1638window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1639window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1640 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1641 transform: scaleX(-1);
1642}
1643
1644window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1645 -moz-box-direction: reverse;
1646}
1647
1648html|*.urlbar-input:-moz-lwtheme::placeholder,
1649.searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::placeholder {
1650 color: #E7ADE7;
1651}
1652
1653#urlbar-container {
1654 -moz-box-orient: horizontal;
1655 -moz-box-align: stretch;
1656}
1657
1658.urlbar-textbox-container {
1659 -moz-box-align: stretch;
1660}
1661
1662.urlbar-input-box {
1663 margin-inline-start: 0;
1664}
1665
1666.urlbar-input-box,
1667#urlbar-display-box {
1668 padding-inline-start: 4px;
1669/* border-inline-start: 1px solid var(--urlbar-separator-color);
1670 border-inline-end: 1px solid var(--urlbar-separator-color);
1671 border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
1672 border-image-slice: 1; */
1673}
1674
1675#urlbar-icons {
1676 -moz-box-align: center;
1677}
1678
1679.urlbar-icon {
1680 padding: 0 2px;
1681 /* 16x16 icon with border-box sizing */
1682 width: 20px;
1683 height: 16px;
1684}
1685
1686/* ::::: URL Bar Zoom Reset Button ::::: */
1687
1688@keyframes urlbar-zoom-reset-pulse {
1689 0% {
1690 transform: scale(0);
1691 }
1692 75% {
1693 transform: scale(1.5);
1694 }
1695 100% {
1696 transform: scale(1.0);
1697 }
1698}
1699
1700#urlbar-zoom-button {
1701/* -moz-appearance: none;*/
1702 margin: 0 3px;
1703 font-size: .8em;
1704 padding: 0 8px;
1705 border-radius: 1em;
1706/* background-color: hsla(0,0%,0%,.05);
1707 color: inherit;
1708 border: 1px solid ThreeDLightShadow;*/
1709}
1710
1711#urlbar-zoom-button[animate="true"] {
1712 animation-name: urlbar-zoom-reset-pulse;
1713 animation-duration: 250ms;
1714}
1715
1716#urlbar-zoom-button:hover {
1717/* background-color: hsla(0,0%,0%,.1);*/
1718}
1719
1720#urlbar-zoom-button:hover:active {
1721/* background-color: hsla(0,0%,0%,.15);*/
1722}
1723
1724#urlbar-zoom-button > .toolbarbutton-text {
1725 display: -moz-box;
1726}
1727
1728#urlbar-zoom-button > .toolbarbutton-icon {
1729 display: none;
1730}
1731
1732.search-go-container {
1733 padding: 2px;
1734}
1735
1736.search-go-container > .search-go-button {
1737 padding: 0;
1738}
1739
1740#urlbar-search-footer {
1741 border-top: 1px solid var(--panel-separator-color);
1742}
1743
1744#urlbar-search-settings {
1745}
1746
1747#urlbar-search-settings:hover {
1748}
1749
1750#urlbar-search-settings:hover:active {
1751}
1752
1753#urlbar-search-splitter {
1754 min-width: 6px;
1755 margin-inline-start: -3px;
1756 border: none;
1757 background: transparent;
1758}
1759
1760#urlbar-search-splitter + #urlbar-container > #urlbar,
1761#urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1762 margin-inline-start: 0;
1763}
1764
1765.urlbar-display {
1766 border-inline-end: 1px solid #9C9CFF;
1767 margin-inline-end: 3px;
1768 margin-top: 0;
1769 margin-bottom: 0;
1770 margin-inline-start: 0;
1771 color: #8050B0;
1772}
1773
1774/* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1775
1776#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1777 border-bottom: 1px solid var(--panel-separator-color);
1778 background-color: #000000;
1779 padding: 6px 0;
1780 padding-inline-start: 44px;
1781 padding-inline-end: 6px;
1782 background-image: url("chrome://browser/skin/info.svg");
1783 background-clip: padding-box;
1784 background-position: 20px center;
1785 background-repeat: no-repeat;
1786 background-size: 16px 16px;
1787}
1788
1789#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1790 background-position: right 20px center;
1791}
1792
1793#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
1794 margin: 0;
1795 padding: 0;
1796}
1797
1798#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1799 margin-inline-start: 0;
1800}
1801
1802#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
1803 -moz-appearance: none;
1804 min-width: 80px;
1805 border-radius: 3px;
1806 padding: 4px 16px;
1807 margin: 0;
1808 margin-inline-start: 10px;
1809}
1810
1811#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
1812}
1813
1814#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
1815}
1816
1817#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
1818}
1819
1820#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
1821}
1822
1823/* === END urlbarSearchSuggestionsNotification.inc.css === */
1824
1825#search-container {
1826 min-width: calc(54px + 11ch);
1827}
1828
1829/* identity box */
1830
1831#identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
1832 background-color: var(--identity-box-verified-background-color);
1833}
1834
1835#identity-box:-moz-focusring {
1836 outline: 1px dotted;
1837 outline-offset: -1px;
1838}
1839
1840#identity-box.verifiedDomain:-moz-focusring,
1841#identity-box.verifiedIdentity:-moz-focusring {
1842 outline-color: #000000;
1843}
1844
1845/* Location bar dropmarker */
1846
1847.urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1848 background-color: transparent;
1849}
1850
1851#urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1852#urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
1853#urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1854 border: none;
1855 border-radius: 0px;
1856 transition: opacity 0.15s ease;
1857}
1858
1859#urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1860 transition: none;
1861}
1862
1863#navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
1864 opacity: 0;
1865}
1866
1867.urlbar-history-dropmarker:hover {
1868}
1869
1870.urlbar-history-dropmarker:hover:active,
1871.urlbar-history-dropmarker[open="true"] {
1872}
1873
1874/* page proxy icon */
1875/* === BEGIN identity-block.inc.css === */
1876
1877/* === BEGIN identity-block/icons.inc.css === */
1878
1879#identity-icon {
1880 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
1881}
1882
1883#identity-box:hover > #identity-icon:not(.no-hover),
1884#identity-box[open=true] > #identity-icon {
1885 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
1886}
1887
1888#identity-box.grantedPermissions > #identity-icon {
1889 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
1890}
1891
1892#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
1893#identity-box.grantedPermissions[open=true] > #identity-icon {
1894 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
1895}
1896
1897#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
1898 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
1899}
1900
1901#tracking-protection-icon {
1902 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled);
1903}
1904
1905#tracking-protection-icon[state="loaded-tracking-content"] {
1906 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled);
1907}
1908
1909
1910#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
1911#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
1912#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
1913 list-style-image: url(chrome://browser/skin/connection-secure.svg);
1914 visibility: visible;
1915}
1916
1917#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
1918 list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
1919 visibility: visible;
1920}
1921
1922#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
1923#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
1924 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
1925 visibility: visible;
1926}
1927
1928#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
1929#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
1930#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
1931 list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
1932 visibility: visible;
1933}
1934
1935/* === END identity-block/icons.inc.css === */
1936
1937#identity-box {
1938 font-size: .9em;
1939 border-radius: 2px;
1940 padding: 3px 5px;
1941 overflow: hidden;
1942 /* The padding-left and padding-right transitions handle the delayed hiding of
1943 the forward button when hovered. */
1944 transition: background-color 150ms ease, padding-left, padding-right;
1945}
1946
1947#identity-box:-moz-locale-dir(ltr) {
1948 border-top-right-radius: 0;
1949 border-bottom-right-radius: 0;
1950}
1951
1952#identity-box:-moz-locale-dir(rtl) {
1953 border-top-left-radius: 0;
1954 border-bottom-left-radius: 0;
1955}
1956
1957#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1958 border-inline-end: 1px solid #008484;
1959}
1960
1961#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
1962 color: #008484;
1963}
1964
1965#urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
1966 border-inline-end: 1px solid #9C9CFF;
1967}
1968
1969#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon-labels {
1970 color: #9C9CFF;
1971}
1972
1973
1974#identity-icon-labels:-moz-locale-dir(ltr) {
1975 padding-left: 2px;
1976}
1977
1978#identity-icon-labels:-moz-locale-dir(rtl) {
1979 padding-right: 2px;
1980}
1981
1982window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
1983/* border-radius: 0;
1984 padding-inline-start: 2px; */
1985 padding-inline-end: 2px;
1986 margin-inline-end: 1px;
1987}
1988
1989window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #identity-box {
1990 padding-inline-start: 2px;
1991}
1992
1993window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
1994 /* Forward button hiding is delayed when hovered, so we should use the same
1995 delay for the identity box. We handle both horizontal paddings (for LTR and
1996 RTL), the latter two delays here are for padding-left and padding-right. */
1997 transition-delay: 0s, 100s, 100s;
1998}
1999
2000window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
2001 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2002 padding-inline-start: 2.01px;
2003}
2004
2005/* MAIN IDENTITY ICON */
2006
2007#identity-icon {
2008 width: 16px;
2009 height: 16px;
2010}
2011
2012#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2013 opacity: .3;
2014}
2015
2016#urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2017 -moz-image-region: inherit;
2018 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2019 width: 16px;
2020 height: 16px;
2021}
2022
2023/* SHARING ICON */
2024
2025#sharing-icon {
2026 width: 16px;
2027 height: 16px;
2028 margin-inline-start: -16px;
2029 position: relative;
2030 display: none;
2031}
2032
2033#identity-box[sharing="camera"] > #sharing-icon {
2034 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
2035}
2036
2037#identity-box[sharing="microphone"] > #sharing-icon {
2038 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2039}
2040
2041#identity-box[sharing="screen"] > #sharing-icon {
2042 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2043
2044}
2045
2046#identity-box[sharing] > #sharing-icon {
2047 display: -moz-box;
2048 animation-delay: -1.5s;
2049}
2050
2051#identity-box[sharing] > #identity-icon,
2052#sharing-icon {
2053 animation: 3s linear pulse infinite;
2054}
2055
2056@keyframes pulse {
2057 0%, 16.66%, 83.33%, 100% {
2058 opacity: 0;
2059 }
2060 33.33%, 66.66% {
2061 opacity: 1;
2062 }
2063}
2064
2065/* TRACKING PROTECTION ICON */
2066
2067#tracking-protection-icon {
2068 width: 16px;
2069 height: 16px;
2070 margin-inline-start: 2px;
2071 margin-inline-end: 0;
2072}
2073
2074#tracking-protection-icon[animate] {
2075 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2076}
2077
2078#tracking-protection-icon:not([state]) {
2079 margin-inline-end: -18px;
2080 pointer-events: none;
2081 opacity: 0;
2082 /* Only animate the shield in, when it disappears hide it immediately. */
2083 transition: none;
2084}
2085
2086#urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2087 visibility: collapse;
2088}
2089
2090/* CONNECTION ICON */
2091
2092#connection-icon {
2093 width: 16px;
2094 height: 16px;
2095 margin-inline-start: 2px;
2096 visibility: collapse;
2097}
2098
2099/* === END identity-block.inc.css === */
2100
2101#page-proxy-favicon {
2102 -moz-image-region: rect(0, 16px, 16px, 0);
2103}
2104
2105window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2106/* margin-inline-end: 1px;*/
2107}
2108
2109#identity-box:hover > #page-proxy-favicon {
2110 -moz-image-region: rect(0, 32px, 16px, 16px);
2111}
2112
2113#identity-box:hover:active > #page-proxy-favicon,
2114#identity-box[open=true] > #page-proxy-favicon {
2115 -moz-image-region: rect(0, 48px, 16px, 32px);
2116}
2117
2118#identity-box:hover {
2119 background-color: #FFCF00;
2120 color: #000000;
2121}
2122
2123#identity-box:hover:active,
2124#identity-box[open=true] {
2125 background-color: #FF9F00;
2126 color: #000000;
2127}
2128
2129#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2130#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2131#urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2132 background-color: #A09090;
2133 color: #000000;
2134}
2135
2136#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover > #identity-icon-labels,
2137#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active > #identity-icon-labels,
2138#urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] > #identity-icon-labels {
2139 color: #000000;
2140}
2141
2142#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2143#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2144#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2145 background-color: #008484;
2146 color: #000000;
2147}
2148
2149#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover > #identity-icon-labels,
2150#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active > #identity-icon-labels,
2151#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] > #identity-icon-labels {
2152 color: #000000;
2153}
2154
2155#identity-box:hover > image,
2156#identity-box:hover:active > image,
2157#identity-box[open=true] > image {
2158 filter: url(chrome://global/skin/filters.svg#active-icon-state);
2159}
2160
2161/* autocomplete */
2162
2163/* === BEGIN autocomplete.inc.css === */
2164
2165#PopupAutoComplete > richlistbox > richlistitem {
2166 height: 20px;
2167 min-height: 20px;
2168 border: 0;
2169 border-radius: 0;
2170 padding: 0px 1px 0px 1px;
2171}
2172
2173#PopupAutoComplete > richlistbox > richlistitem > .ac-title {
2174 font: icon;
2175 margin-inline-start: 6px;
2176}
2177
2178#PopupAutoComplete > richlistbox {
2179 padding: 0;
2180}
2181
2182/* === END autocomplete.inc.css === */
2183
2184#PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
2185 border-top: 1px solid #A09090;
2186}
2187
2188#treecolAutoCompleteImage {
2189 max-width: 36px;
2190}
2191
2192/*
2193.autocomplete-richlistbox {
2194 padding: 4px;
2195}
2196
2197.autocomplete-richlistitem {
2198 height: 30px;
2199 min-height: 30px;
2200 font: message-box;
2201 border-radius: 2px;
2202 border: 1px solid transparent;
2203}
2204
2205.autocomplete-richlistitem[selected=true] {
2206 background-color: hsl(210, 80%, 52%);
2207}
2208*/
2209.ac-title {
2210 font-size: 14px;
2211/* color: hsl(0, 0%, 0%);*/
2212}
2213
2214.ac-tags {
2215 font-size: 12px;
2216}
2217/*
2218html|span.ac-tag {
2219 background-color: hsl(216, 0%, 88%);
2220 color: hsl(0, 0%, 0%);
2221 border-radius: 2px;
2222 border: 1px solid transparent;
2223 padding: 0 1px;
2224}
2225*/
2226
2227.ac-separator,
2228.ac-url,
2229.ac-action {
2230 font-size: 12px;
2231}
2232
2233.ac-separator {
2234/* color: hsl(0, 0%, 50%);*/
2235}
2236
2237.ac-url {
2238 color: #9C9CFF;
2239}
2240
2241.ac-action {
2242 color: #9C9CFF;
2243}
2244
2245.ac-title[selected=true],
2246.ac-separator[selected],
2247.ac-url[selected=true],
2248.ac-action[selected=true] {
2249 color: #000000;
2250}
2251
2252.ac-tags-text[selected] > html|span.ac-tag {
2253 background-color: #A09090;
2254 color: #000000;
2255}
2256
2257html|span.ac-emphasize-text-title,
2258html|span.ac-emphasize-text-tag,
2259html|span.ac-emphasize-text-url {
2260 font-weight: 600;
2261}
2262
2263.ac-type-icon[type=bookmark] {
2264 list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
2265}
2266
2267.ac-type-icon[type=bookmark][selected][current] {
2268/* list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
2269}
2270
2271.ac-result-type-bookmark,
2272.autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2273 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2274 -moz-image-region: rect(0px 16px 16px 0px);
2275 width: 16px;
2276 height: 16px;
2277}
2278
2279richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2280.autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2281/* -moz-image-region: rect(0px 48px 16px 32px);*/
2282}
2283
2284.ac-type-icon[type=keyword],
2285.ac-site-icon[type=searchengine],
2286.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
2287 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2288}
2289
2290.ac-type-icon[type=keyword][selected],
2291.ac-site-icon[type=searchengine][selected],
2292.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected) {
2293 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2294}
2295
2296.ac-result-type-tag,
2297.autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2298 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2299 width: 16px;
2300 height: 16px;
2301}
2302
2303.ac-type-icon[type=switchtab],
2304.ac-type-icon[type=remotetab] {
2305 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
2306}
2307
2308.ac-type-icon[type=switchtab][selected],
2309.ac-type-icon[type=remotetab][selected] {
2310 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
2311}
2312
2313.autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2314.autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2315{
2316 color: #8050B0;
2317 font-size: smaller;
2318}
2319
2320.autocomplete-treebody::-moz-tree-cell(suggesthint) {
2321 border-top: 1px solid #9C9CFF;
2322}
2323
2324/* combined go/reload/stop button in location bar */
2325
2326#urlbar-go-button,
2327#urlbar-reload-button,
2328#urlbar-stop-button {
2329 border-style: none;
2330 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2331/* margin: 0 9px; */
2332 margin-inline-start: 0px;
2333 border-inline-start: 1px solid var(--urlbar-separator-color);
2334 border-image: linear-gradient(transparent 15%,
2335 var(--urlbar-separator-color) 15%,
2336 var(--urlbar-separator-color) 85%,
2337 transparent 85%);
2338 border-image-slice: 1;
2339}
2340
2341#urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2342 border-top-left-radius: 0px;
2343 border-bottom-left-radius: 0px;
2344}
2345
2346#urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2347 border-top-right-radius: 0px;
2348 border-bottom-right-radius: 0px;
2349}
2350
2351#urlbar > toolbarbutton:not([disabled=true]):active:hover,
2352#urlbar-reload-button:not(:hover) {
2353 border-inline-start-style: none;
2354 padding-inline-start: 3px;
2355}
2356
2357#urlbar-reload-button {
2358 -moz-image-region: rect(0px, 14px, 14px, 0px);
2359}
2360
2361#urlbar-reload-button[disabled=true] {
2362 -moz-image-region: rect(28px, 14px, 42px, 0px);
2363}
2364
2365#urlbar-reload-button:not([disabled=true]):hover {
2366 -moz-image-region: rect(14px, 14px, 28px, 0px);
2367}
2368
2369#urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2370 transform: scaleX(-1);
2371}
2372
2373#urlbar-go-button {
2374 -moz-image-region: rect(0, 42px, 14px, 28px);
2375}
2376
2377#urlbar-go-button:hover {
2378 -moz-image-region: rect(14px, 42px, 28px, 28px);
2379}
2380
2381#urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2382 transform: scaleX(-1);
2383}
2384
2385#urlbar-stop-button {
2386 -moz-image-region: rect(0px, 28px, 14px, 14px);
2387}
2388
2389#urlbar-stop-button:hover {
2390 -moz-image-region: rect(14px, 28px, 28px, 14px);
2391}
2392
2393@media (min-resolution: 1.1dppx) {
2394 #urlbar-go-button,
2395 #urlbar-reload-button,
2396 #urlbar-stop-button {
2397 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2398 }
2399
2400 #urlbar-go-button > .toolbarbutton-icon,
2401 #urlbar-reload-button > .toolbarbutton-icon,
2402 #urlbar-stop-button > .toolbarbutton-icon {
2403 width: 14px;
2404 }
2405
2406 #urlbar-go-button {
2407 -moz-image-region: rect(0, 84px, 28px, 56px);
2408 }
2409
2410 #urlbar-go-button:hover {
2411 -moz-image-region: rect(28px, 84px, 56px, 56px);
2412 }
2413
2414 #urlbar-go-button:hover:active {
2415 -moz-image-region: rect(56px, 84px, 84px, 56px);
2416 }
2417
2418 #urlbar-reload-button {
2419 -moz-image-region: rect(0, 28px, 28px, 0);
2420 }
2421
2422 #urlbar-reload-button:not([disabled]):hover {
2423 -moz-image-region: rect(28px, 28px, 56px, 0);
2424 }
2425
2426 #urlbar-reload-button:not([disabled]):hover:active {
2427 -moz-image-region: rect(56px, 28px, 84px, 0);
2428 }
2429
2430 #urlbar-stop-button {
2431 -moz-image-region: rect(0, 56px, 28px, 28px);
2432 }
2433
2434 #urlbar-stop-button:not([disabled]):hover {
2435 -moz-image-region: rect(28px, 56px, 56px, 28px);
2436 }
2437
2438 #urlbar-stop-button:hover:active {
2439 -moz-image-region: rect(56px, 56px, 84px, 28px);
2440 }
2441}
2442
2443/* popup blocker button */
2444
2445#page-report-button {
2446 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2447 -moz-image-region: rect(0, 16px, 16px, 0);
2448}
2449
2450#page-report-button:hover ,
2451#page-report-button:hover:active,
2452#page-report-button[open="true"] {
2453 -moz-image-region: rect(0, 32px, 16px, 16px);
2454}
2455
2456/* Reader mode button */
2457
2458#reader-mode-button {
2459 list-style-image: url("chrome://browser/skin/readerMode.svg");
2460 -moz-image-region: rect(0, 16px, 16px, 0);
2461}
2462
2463#reader-mode-button:hover,
2464#reader-mode-button[readeractive]:hover {
2465 -moz-image-region: rect(0, 32px, 16px, 16px);
2466}
2467
2468#reader-mode-button:hover:active,
2469#reader-mode-button[readeractive] {
2470 -moz-image-region: rect(0, 48px, 16px, 32px);
2471}
2472
2473/* social share panel */
2474
2475/* === BEGIN social.inc.css === */
2476
2477#manage-share-providers {
2478 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
2479 -moz-image-region: rect(0, 468px, 18px, 450px);
2480}
2481
2482#manage-share-providers > .toolbarbutton-icon {
2483 min-height: 18px;
2484 min-width: 18px;
2485}
2486
2487.social-panel > .panel-arrowcontainer > .panel-arrowcontent {
2488 padding: 0;
2489}
2490/* fixup corners for share panel */
2491.social-panel > .social-panel-frame {
2492 border-radius: inherit;
2493}
2494
2495/* === END social.inc.css === */
2496
2497.social-panel-frame {
2498 border-radius: inherit;
2499}
2500
2501.social-share-frame {
2502 min-width: 756px;
2503 height: 150px;
2504}
2505
2506#share-container {
2507 min-width: 756px;
2508 background-color: white;
2509 background-repeat: no-repeat;
2510 background-position: center center;
2511}
2512#share-container[loading] {
2513 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2514}
2515#share-container > browser {
2516 transition: opacity 150ms ease-in-out;
2517 opacity: 1;
2518}
2519#share-container[loading] > browser {
2520 opacity: 0;
2521}
2522
2523.social-share-toolbar {
2524 border-bottom: 1px solid #9C9CFF;
2525 padding: 2px;
2526}
2527
2528#social-share-provider-buttons {
2529 padding: 0;
2530 margin: 0;
2531}
2532
2533.share-provider-button {
2534 padding: 5px;
2535 margin: 2px;
2536}
2537
2538.share-provider-button > .toolbarbutton-text {
2539 display: none;
2540}
2541.share-provider-button > .toolbarbutton-icon {
2542 width: 16px;
2543 min-height: 16px;
2544 max-height: 16px;
2545}
2546
2547#social-share-panel {
2548 min-height: 100px;
2549 min-width: 766px;
2550}
2551
2552#share-container,
2553.social-share-frame {
2554 border-top-left-radius: 0;
2555 border-bottom-left-radius: inherit;
2556 border-top-right-radius: 0;
2557 border-bottom-right-radius: inherit;
2558}
2559
2560#social-share-panel > .social-share-toolbar {
2561 border-top-left-radius: inherit;
2562 border-top-right-radius: inherit;
2563}
2564
2565#social-share-provider-buttons {
2566 border-top-left-radius: inherit;
2567 border-top-right-radius: inherit;
2568}
2569
2570/* bookmarks menu-button */
2571
2572#bookmarks-menu-button.bookmark-item {
2573 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2574 -moz-image-region: rect(0px 16px 16px 0px);
2575}
2576
2577#bookmarks-menu-button.bookmark-item[starred] {
2578 -moz-image-region: rect(0px 32px 16px 16px);
2579}
2580
2581#nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2582 padding-top: 2px;
2583 padding-bottom: 2px;
2584}
2585
2586#BMB_bookmarksPopup[side="top"],
2587#BMB_bookmarksPopup[side="bottom"] {
2588 margin-left: -20px;
2589 margin-right: -20px;
2590}
2591
2592#BMB_bookmarksPopup[side="left"],
2593#BMB_bookmarksPopup[side="right"] {
2594 margin-top: -20px;
2595 margin-bottom: -20px;
2596}
2597
2598/* bookmarking panel */
2599
2600#editBookmarkPanelStarIcon {
2601 list-style-image: url("chrome://browser/skin/places/starred48.png");
2602 width: 48px;
2603 height: 48px;
2604}
2605
2606#editBookmarkPanelStarIcon[unstarred] {
2607 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2608}
2609
2610#editBookmarkPanelTitle {
2611 font-size: 130%;
2612}
2613
2614#editBookmarkPanelHeader,
2615#editBookmarkPanelContent {
2616 margin-bottom: .5em;
2617}
2618
2619/* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2620#editBMPanel_folderTree {
2621 min-width: 27em;
2622}
2623
2624/* ::::: content area ::::: */
2625
2626#sidebar-box {
2627 background-color: #9C9CFF;
2628 color: #000000;
2629}
2630
2631#sidebar {
2632 background-color: #000000;
2633}
2634
2635#sidebar-splitter {
2636 margin-inline-start: 0;
2637}
2638
2639#sidebar-header {
2640 color: #000000;
2641 padding: 2px;
2642}
2643
2644#sidebar-title {
2645 padding-inline-start: 0px;
2646}
2647
2648#sidebar-header > .close-icon {
2649/* padding: 4px 2px;
2650 margin: 0;
2651 border: none;*/
2652 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2653}
2654
2655#sidebar-header > .close-icon:hover,
2656#sidebar-header > .close-icon:hover:active {
2657 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2658}
2659
2660#sidebar-splitter:-moz-locale-dir(ltr),
2661#sidebar:-moz-locale-dir(ltr) {
2662 border-radius: 0 5px 0 0;
2663}
2664
2665#sidebar-splitter:-moz-locale-dir(rtl),
2666#sidebar:-moz-locale-dir(rtl) {
2667 border-radius: 5px 0 0 0;
2668}
2669
2670.browserContainer > findbar {
2671/*
2672 background-color: -moz-dialog;
2673 color: -moz-DialogText;
2674*/
2675}
2676
2677/* Tabstrip */
2678
2679#TabsToolbar {
2680 min-height: 0;
2681 padding: 0;
2682 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2683}
2684
2685#TabsToolbar .toolbar-holder {
2686 background-color: #000000; /* correct effect of being an actual toolbar */
2687}
2688
2689#main-window[disablechrome] #TabsToolbar,
2690#TabsToolbar[tabsontop="false"] {
2691 border-bottom: 1px solid #008484;
2692}
2693
2694/* === BEGIN tabs.inc.css === */
2695
2696:root {
2697 /* --tab-toolbar-navbar-overlap: 1px; */
2698 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2699 /* --tab-min-height: 31px; */
2700}
2701#TabsToolbar {
2702 /* --tab-stroke-background-size: auto 100%; */
2703}
2704
2705.tabbrowser-tab,
2706.tabs-newtab-button,
2707#TabsToolbar > #new-tab-button {
2708 margin-top: 0px;
2709}
2710
2711.tabbrowser-tab {
2712 padding: 1px 4px 2px;
2713}
2714
2715.tabbrowser-tab:first-of-type {
2716 margin-inline-start: 2px;
2717}
2718
2719.tabs-newtab-button,
2720#TabsToolbar > #new-tab-button,
2721#TabsToolbar > toolbarpaletteitem > #new-tab-button,
2722#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2723 border-radius: 8px 8px 0px 0px;
2724 margin-inline-start: 0;
2725}
2726
2727.tabs-newtab-button:not(:hover),
2728#TabsToolbar > #new-tab-button:not(:hover),
2729#TabsToolbar > toolbarpaletteitem > #new-tab-button,
2730#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2731 background-color: #C09070;
2732}
2733
2734/* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2735.tabbrowser-tab[visuallyselected=true] {
2736/* position: relative;
2737 z-index: 2;*/
2738}
2739
2740.tab-background-middle {
2741}
2742
2743.tab-content {
2744}
2745
2746.tab-content[pinned] {
2747}
2748
2749.tab-throbber,
2750.tab-icon-image,
2751.tab-sharing-icon-overlay,
2752.tab-icon-sound,
2753.tab-close-button {
2754}
2755
2756.tab-throbber,
2757.tab-sharing-icon-overlay,
2758.tab-icon-image {
2759 height: 16px;
2760 width: 16px;
2761 margin-inline-end: 3px;
2762}
2763
2764.tab-icon-image {
2765 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2766}
2767
2768.tab-icon-image[sharing]:not([selected]),
2769.tab-sharing-icon-overlay {
2770 animation: 3s linear pulse infinite;
2771}
2772
2773@keyframes pulse {
2774 0%, 16.66%, 83.33%, 100% {
2775 opacity: 0;
2776 }
2777 33.33%, 66.66% {
2778 opacity: 1;
2779 }
2780}
2781
2782.tab-icon-image[sharing]:not([selected]) {
2783 animation-delay: -1.5s;
2784}
2785
2786.tab-sharing-icon-overlay {
2787 /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
2788 margin-inline-start: -22px;
2789 position: relative;
2790}
2791
2792.tab-sharing-icon-overlay[sharing="camera"] {
2793 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
2794}
2795
2796.tab-sharing-icon-overlay[sharing="microphone"] {
2797 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2798}
2799
2800.tab-sharing-icon-overlay[sharing="screen"] {
2801 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2802}
2803
2804.tab-icon-overlay {
2805 width: 16px;
2806 height: 16px;
2807 margin-top: -8px;
2808 margin-inline-start: -15px;
2809 margin-inline-end: -1px;
2810 position: relative;
2811}
2812
2813.tab-icon-overlay[crashed] {
2814 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2815}
2816
2817.tab-icon-overlay[soundplaying],
2818.tab-icon-overlay[muted]:not([crashed]),
2819.tab-icon-overlay[blocked]:not([crashed]) {
2820 border-radius: 10px;
2821}
2822
2823.tab-icon-overlay[soundplaying]:hover,
2824.tab-icon-overlay[muted]:hover,
2825.tab-icon-overlay[blocked]:not([crashed]):hover {
2826 background-color: #FFCF00;
2827}
2828
2829.tab-icon-overlay[soundplaying] {
2830 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2831}
2832
2833.tab-icon-overlay[muted]:not([crashed]) {
2834 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2835}
2836
2837.tab-icon-overlay[blocked]:not([crashed]) {
2838 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-blocked");
2839}
2840
2841#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not([selected]):not(:hover),
2842.tab-icon-overlay[soundplaying][selected]:-moz-lwtheme-brighttext:not(:hover) {
2843 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2844}
2845
2846#TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not([selected]):not(:hover),
2847.tab-icon-overlay[mouted][selected]:-moz-lwtheme-brighttext:not(:hover) {
2848 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2849}
2850
2851#TabsToolbar[brighttext] .tab-icon-overlay[blocked]:not([crashed]):not([selected]):not(:hover),
2852.tab-icon-overlay[blocked][selected]:-moz-lwtheme-brighttext:not(:hover) {
2853 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-blocked");
2854}
2855
2856.tab-throbber[busy] {
2857 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2858}
2859
2860.tab-throbber[progress] {
2861 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2862}
2863
2864@media (min-resolution: 1.1dppx) {
2865 .tab-throbber[busy] {
2866 list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2867 }
2868
2869 .tab-throbber[progress] {
2870 list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2871 }
2872}
2873
2874.tab-throbber[pinned],
2875.tab-icon-image[pinned] {
2876 margin-inline-start: 2px;
2877 margin-inline-end: 2px;
2878}
2879
2880.tab-label {
2881 /* this needs to add up to the 16px of the icon image */
2882 height: 12px;
2883 margin-top: 2px !important;
2884 margin-bottom: 2px !important;
2885}
2886
2887.tab-icon-sound {
2888 margin-inline-start: 4px;
2889 width: 16px;
2890 height: 16px;
2891 padding: 0;
2892}
2893
2894.tab-icon-sound[soundplaying],
2895.tab-icon-sound[muted],
2896.tab-icon-sound[blocked] {
2897 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
2898 filter: url(chrome://browser/skin/filters.svg#fill);
2899 fill: currentColor;
2900}
2901
2902.tab-icon-sound[muted] {
2903 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
2904}
2905
2906.tab-icon-sound[blocked] {
2907 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
2908}
2909
2910.tab-close-button {
2911 margin-top: 1px;
2912 padding: 0;
2913}
2914
2915.tab-icon-sound[soundplaying-scheduledremoval]:not(:hover),
2916.tab-icon-overlay[soundplaying-scheduledremoval]:not(:hover) {
2917 transition: opacity .3s linear var(--soundplaying-removal-delay);
2918 opacity: 0;
2919}
2920
2921.tab-background,
2922.tabs-newtab-button {
2923 /* overlap the tab curves */
2924}
2925
2926.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2927}
2928
2929/* Tab Overflow */
2930.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
2931.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2932}
2933
2934.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
2935.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
2936}
2937
2938.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
2939}
2940
2941.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2942}
2943
2944.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
2945.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
2946}
2947
2948.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
2949.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
2950}
2951
2952.tab-background-start[selected=true]::after,
2953.tab-background-start[selected=true]::before,
2954.tab-background-start,
2955.tab-background-end,
2956.tab-background-end[selected=true]::after,
2957.tab-background-end[selected=true]::before {
2958}
2959
2960.tabbrowser-tab:not([visuallyselected=true]),
2961.tabbrowser-tab:-moz-lwtheme {
2962}
2963
2964/* tabbrowser-tab focus ring */
2965.tabbrowser-tab:focus {
2966 outline: 1px dotted;
2967}
2968
2969/* Selected tab */
2970
2971.tabbrowser-tab[visuallyselected="true"] {
2972}
2973
2974/* End selected tab */
2975
2976/* Tab pointer-events */
2977/*
2978.tabbrowser-tab {
2979 pointer-events: none;
2980}
2981
2982.tab-background-middle,
2983.tabs-newtab-button,
2984.tab-icon-overlay[soundplaying],
2985.tab-icon-overlay[muted]:not([crashed]),
2986.tab-icon-overlay[blocked]:not([crashed]),
2987.tab-icon-sound,
2988.tab-close-button {
2989 pointer-events: auto;
2990}
2991*/
2992/* Pinned tabs */
2993
2994/*
2995.tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
2996.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
2997*/
2998.tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
2999 background-color: #E7ADE7;
3000}
3001
3002.tab-label[attention]:not([selected="true"]) {
3003 font-weight: bold;
3004}
3005
3006.tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3007 background-color: #3333FF;
3008 color: #000000;
3009}
3010
3011/* Tab separators */
3012/*
3013.tabbrowser-tab::after,
3014.tabbrowser-tab::before {
3015 width: 1px;
3016 margin-inline-start: -1px;
3017 background-image: linear-gradient(transparent 5px,
3018 currentColor 5px,
3019 currentColor calc(100% - 4px),
3020 transparent calc(100% - 4px));
3021 opacity: 0.2;
3022}
3023
3024#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3025#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3026 opacity: 0.4;
3027}
3028*/
3029/* Also show separators beside the selected tab when dragging it. */
3030/*
3031#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3032.tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3033#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
3034 content: "";
3035 display: -moz-box;
3036}
3037*/
3038/* New tab button */
3039
3040.tabs-newtab-button {
3041 width: 28px;
3042 /* width: calc(36px + var(--tab-curve-width)); */
3043}
3044@media (min-resolution: 1.1dppx) {
3045 /* image preloading hack from like lowdpi styles */
3046 #tabbrowser-tabs::before {
3047 }
3048
3049 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
3050 .tabs-newtab-button:hover {
3051 }
3052
3053 .tab-background-middle[selected=true] {
3054 }
3055
3056 .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
3057 .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
3058 }
3059
3060 .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
3061 .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
3062 }
3063
3064 .tab-icon-image {
3065 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
3066 }
3067}
3068
3069/* All tabs menupopup */
3070
3071.alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3072 background-color: #402800;
3073}
3074
3075.alltabs-endimage[soundplaying],
3076.alltabs-endimage[muted],
3077.alltabs-endimage[blocked] {
3078 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
3079 filter: url(chrome://browser/skin/filters.svg#fill);
3080 fill: currentColor;
3081}
3082
3083.alltabs-endimage[muted] {
3084 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
3085}
3086
3087.alltabs-endimage[blocked] {
3088 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
3089}
3090
3091/* === END tabs.inc.css === */
3092
3093/* Tab DnD indicator */
3094.tab-drop-indicator {
3095 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3096 margin-bottom: -11px;
3097}
3098
3099/* Tab close button */
3100.tab-close-button {
3101 list-style-image: url("chrome://global/skin/icons/close-button.gif") !important;
3102 -moz-image-region: auto !important;
3103}
3104
3105.tab-close-button:hover,
3106.tab-close-button:hover[selected="true"] {
3107 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3108 -moz-image-region: auto !important;
3109}
3110
3111.tab-close-button:hover:active,
3112.tab-close-button:hover:active[selected="true"] {
3113 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3114 -moz-image-region: auto !important;
3115}
3116
3117.tab-close-button > .button-icon,
3118.tab-close-button > .button-box > .button-icon,
3119.tab-close-button > .toolbarbutton-icon {
3120 width: auto !important;
3121}
3122
3123
3124/* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3125
3126.tabbrowser-arrowscrollbox > .scrollbutton-up,
3127.tabbrowser-arrowscrollbox > .scrollbutton-down {
3128 margin: 0;
3129 padding-top: 0;
3130 padding-bottom: 0;
3131 background-origin: border-box;
3132}
3133
3134#main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3135#main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3136.tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3137.tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3138 }
3139
3140.tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3141.tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3142 }
3143
3144.tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3145.tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3146/* transform: scaleX(-1);*/
3147}
3148
3149.tabbrowser-arrowscrollbox > .scrollbutton-down {
3150 transition: 1s background-color ease-out;
3151}
3152
3153.tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3154 background-color: #008484;
3155}
3156
3157.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3158.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3159/* border-width: 0 2px 0 0;
3160 border-style: solid;
3161 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3162}
3163
3164.tabs-newtab-button > .toolbarbutton-icon {
3165 margin-top: -1px;
3166 margin-bottom: -1px;
3167}
3168
3169.tabs-newtab-button,
3170#TabsToolbar > #new-tab-button,
3171#TabsToolbar > toolbarpaletteitem > #new-tab-button,
3172#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3173 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3174 -moz-image-region: auto;
3175}
3176
3177.tabs-newtab-button,
3178.tabs-newtab-button:hover,
3179#TabsToolbar > #new-tab-button,
3180#TabsToolbar > #new-tab-button:hover {
3181}
3182
3183#main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3184#main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3185#main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3186.tabs-newtab-button:-moz-lwtheme-brighttext,
3187#TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3188#TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3189}
3190
3191#TabsToolbar > #new-tab-button {
3192 width: 26px;
3193}
3194
3195#alltabs-button {
3196 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3197}
3198
3199#alltabs-button:hover,
3200#alltabs-button:hover:active,
3201#alltabs-button[open="true"] {
3202 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3203}
3204
3205#main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3206#alltabs-button:-moz-lwtheme-brighttext {
3207}
3208
3209#alltabs-button > .toolbarbutton-icon {
3210/* margin: 0 2px;*/
3211}
3212
3213#alltabs-button > .toolbarbutton-menu-dropmarker {
3214 display: none;
3215}
3216
3217/* All tabs menupopup */
3218.alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3219 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3220 -moz-image-region: auto;
3221}
3222
3223.alltabs-item[selected="true"] {
3224 font-weight: bold;
3225}
3226
3227.alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3228 list-style-image: url("chrome://global/skin/icons/loading.png");
3229}
3230
3231@media (min-resolution: 1.1dppx) {
3232 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3233 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3234 }
3235}
3236
3237toolbarbutton.chevron {
3238 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3239}
3240
3241toolbarbutton.chevron:hover {
3242 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3243}
3244/*
3245toolbar[brighttext] toolbarbutton.chevron {
3246 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3247}
3248*/
3249toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3250toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3251 transform: scaleX(-1);
3252}
3253
3254toolbarbutton.chevron > .toolbarbutton-text,
3255toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3256 display: none;
3257}
3258
3259toolbarbutton.chevron > .toolbarbutton-icon {
3260 margin: 0;
3261}
3262
3263#sidebar-throbber[loading="true"] {
3264 list-style-image: url("chrome://global/skin/icons/loading.png");
3265 margin-inline-end: 4px;
3266}
3267
3268@media (min-resolution: 1.1dppx) {
3269 #sidebar-throbber[loading="true"] {
3270 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3271 width: 16px;
3272 }
3273}
3274
3275/* Bookmarks toolbar */
3276#PlacesToolbarDropIndicator {
3277 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3278}
3279
3280toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3281 background-color: #008484 !important;
3282 color: #FFCF00 !important;
3283}
3284
3285/* rules for menupopup drop indicators */
3286.menupopup-drop-indicator-bar {
3287 position: relative;
3288 /* these two margins must together compensate the indicator's height */
3289 margin-top: -1px;
3290 margin-bottom: -1px;
3291}
3292
3293.menupopup-drop-indicator {
3294 list-style-image: none;
3295 height: 2px;
3296 margin-inline-end: -4em;
3297 background-color: #008484;
3298}
3299
3300/* === BEGIN notification-icons.inc.css === */
3301
3302#notification-popup-box {
3303 border-radius: 3px 0 0 3px;
3304 padding: 5px 0px;
3305 margin: -5px 0px;
3306 margin-inline-end: -5px;
3307 padding-inline-end: 5px;
3308}
3309
3310.notification-anchor-icon,
3311#blocked-permissions-container > .blocked-permission-icon {
3312 width: 16px;
3313 height: 16px;
3314 margin-inline-start: 2px;
3315}
3316
3317/* This class can be used alone or in combination with the class defining the
3318 type of icon displayed. This rule must be defined before the others in order
3319 for its list-style-image to be overridden. */
3320.notification-anchor-icon {
3321 list-style-image: url("chrome://global/skin/icons/information-16.png");
3322}
3323
3324.notification-anchor-icon:-moz-focusring {
3325 outline: 1px dotted #008484;
3326}
3327
3328@media (min-resolution: 1.1dppx) {
3329 .notification-anchor-icon {
3330 list-style-image: url(chrome://global/skin/icons/information-32.png);
3331 }
3332}
3333
3334.popup-notification-icon {
3335 width: 64px;
3336 height: 64px;
3337 margin-inline-end: 10px;
3338}
3339
3340.notification-anchor-icon:not(.plugin-blocked),
3341#blocked-permissions-container > .blocked-permission-icon {
3342 filter: url(chrome://global/skin/filters.svg#fill);
3343 fill: currentColor;
3344}
3345
3346.notification-anchor-icon:not(.plugin-blocked):not(:hover) {
3347}
3348
3349/* INDIVIDUAL NOTIFICATIONS */
3350
3351.popup-notification-icon[popupid="web-notifications"],
3352.desktop-notification-icon {
3353 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
3354}
3355
3356.desktop-notification-icon.blocked-permission-icon {
3357 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
3358}
3359
3360.geo-icon {
3361 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
3362}
3363
3364.geo-icon.blocked-permission-icon {
3365 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
3366}
3367
3368.popup-notification-icon[popupid="geolocation"] {
3369 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
3370}
3371
3372.popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3373.indexedDB-icon {
3374 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
3375}
3376
3377.indexedDB-icon.blocked-permission-icon {
3378 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
3379}
3380
3381.login-icon {
3382 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
3383}
3384
3385.popup-notification-icon[popupid="password"] {
3386 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
3387}
3388
3389.camera-icon {
3390 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
3391}
3392
3393.camera-icon.in-use {
3394 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing);
3395}
3396
3397.camera-icon.blocked-permission-icon {
3398 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
3399}
3400
3401.microphone-icon {
3402 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
3403}
3404
3405.microphone-icon.in-use {
3406 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing);
3407}
3408
3409.microphone-icon.blocked-permission-icon {
3410 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
3411}
3412
3413.popup-notification-icon.microphone-icon {
3414 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
3415}
3416
3417.screen-icon {
3418 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
3419}
3420
3421.screen-icon.in-use {
3422 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing);
3423}
3424
3425.screen-icon.blocked-permission-icon {
3426 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
3427}
3428
3429#webRTC-preview:not([hidden]) {
3430 display: -moz-stack;
3431 border-radius: 4px;
3432 border: 1px solid #A09090;
3433 overflow: hidden;
3434 min-width: 300px;
3435 min-height: 10em;
3436}
3437
3438html|*#webRTC-previewVideo {
3439 width: 300px;
3440 /* If we don't set the min-width, width is ignored. */
3441 min-width: 300px;
3442 max-height: 200px;
3443}
3444
3445#webRTC-previewWarning {
3446 background: #FF0000 url("chrome://browser/skin/warning-white.svg") no-repeat .75em .75em;
3447 margin: 0;
3448 padding: .5em;
3449 padding-inline-start: calc(1.5em + 16px);
3450 border-top: 1px solid #A09090;
3451}
3452
3453#webRTC-previewWarning > .text-link {
3454 margin-inline-start: 0;
3455}
3456
3457/* This icon has a block sign in it, so we don't need a blocked version. */
3458.popup-icon {
3459 list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
3460}
3461
3462/* EME */
3463
3464.popup-notification-icon[popupid="drmContentPlaying"],
3465.drm-icon {
3466 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3467}
3468
3469.drm-icon:hover:active {
3470 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3471}
3472
3473#eme-notification-icon[firstplay=true] {
3474 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3475}
3476
3477@keyframes emeTeachingMoment {
3478 0% {transform: translateX(0); }
3479 25% {transform: translateX(3px) }
3480 75% {transform: translateX(-3px) }
3481 100% { transform: translateX(0); }
3482}
3483
3484/* INSTALL ADDONS */
3485
3486.install-icon {
3487 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3488}
3489
3490.popup-notification-icon[popupid="xpinstall-disabled"],
3491.popup-notification-icon[popupid="addon-install-blocked"],
3492.popup-notification-icon[popupid="addon-install-origin-blocked"] {
3493 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3494}
3495
3496.popup-notification-icon[popupid="addon-progress"] {
3497 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3498}
3499
3500.popup-notification-icon[popupid="addon-install-failed"] {
3501 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3502}
3503
3504.popup-notification-icon[popupid="addon-install-confirmation"] {
3505 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3506}
3507
3508#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3509 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3510}
3511
3512.popup-notification-icon[popupid="addon-install-complete"] {
3513 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3514}
3515
3516.popup-notification-icon[popupid="addon-install-restart"] {
3517 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3518}
3519
3520.popup-notification-icon[popupid="click-to-play-plugins"] {
3521 list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
3522}
3523
3524/* OFFLINE APPS */
3525
3526.popup-notification-icon[popupid*="offline-app-requested"],
3527.popup-notification-icon[popupid="offline-app-usage"] {
3528 list-style-image: url(chrome://global/skin/icons/question-64.png);
3529}
3530
3531/* PLUGINS */
3532
3533.plugin-icon {
3534 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
3535}
3536
3537.plugin-icon.plugin-blocked {
3538 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
3539}
3540
3541#notification-popup-box[hidden] {
3542 /* Override display:none to make the pluginBlockedNotification animation work
3543 when showing the notification repeatedly. */
3544 display: -moz-box;
3545 visibility: collapse;
3546}
3547
3548#plugins-notification-icon.plugin-blocked[showing] {
3549 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3550}
3551
3552@keyframes pluginBlockedNotification {
3553 from {
3554 opacity: 0;
3555 }
3556 to {
3557 opacity: 1;
3558 }
3559}
3560
3561/* SOCIAL API */
3562
3563.popup-notification-icon[popupid="servicesInstall"] {
3564 list-style-image: url(chrome://browser/skin/social/services-64.png);
3565}
3566
3567.service-icon {
3568 list-style-image: url(chrome://browser/skin/social/services-16.png);
3569}
3570
3571/* TRANSLATION */
3572
3573.translation-icon {
3574 list-style-image: url(chrome://browser/skin/translation-16.png);
3575 -moz-image-region: rect(0px, 16px, 16px, 0px);
3576}
3577
3578.translation-icon.in-use {
3579 -moz-image-region: rect(0px, 32px, 16px, 16px);
3580}
3581
3582/* === END notification-icons.inc.css === */
3583
3584.popup-notification-body[popupid="addon-progress"],
3585.popup-notification-body[popupid="addon-install-confirmation"] {
3586 width: 28em;
3587 max-width: 28em;
3588}
3589
3590/* Translation infobar */
3591
3592/* === BEGIN infobar.inc.css === */
3593
3594notification[value="translation"] .messageImage {
3595 list-style-image: url("chrome://browser/skin/translation-16.png");
3596 -moz-image-region: rect(0, 32px, 16px, 16px);
3597}
3598
3599@media (min-resolution: 1.25dppx) {
3600 notification[value="translation"] .messageImage {
3601 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3602 -moz-image-region: rect(0, 64px, 32px, 32px);
3603 }
3604}
3605
3606notification[value="translation"][state="translating"] .messageImage {
3607 list-style-image: url("chrome://browser/skin/translating-16.png");
3608 -moz-image-region: auto;
3609}
3610
3611@media (min-resolution: 1.25dppx) {
3612 notification[value="translation"][state="translating"] .messageImage {
3613 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3614 }
3615}
3616
3617notification[value="translation"] hbox[anonid="details"] {
3618 overflow: hidden;
3619}
3620
3621notification[value="translation"] button,
3622notification[value="translation"] menulist {
3623 min-width: 0;
3624}
3625
3626notification[value="translation"] menulist > .menulist-dropmarker {
3627}
3628
3629.translation-menupopup arrowscrollbox {
3630 padding-bottom: 0;
3631}
3632
3633.translation-attribution {
3634 cursor: pointer;
3635 -moz-box-align: end;
3636 font-size: small;
3637}
3638
3639.translation-attribution > label {
3640 margin-bottom: 0;
3641}
3642
3643.translation-attribution > image {
3644 width: 70px;
3645}
3646
3647.translation-welcome-panel {
3648 width: 305px;
3649}
3650
3651.translation-welcome-logo {
3652 height: 32px;
3653 width: 32px;
3654 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3655 -moz-image-region: rect(0, 64px, 32px, 32px);
3656}
3657
3658.translation-welcome-content {
3659 margin-inline-start: 16px;
3660}
3661
3662.translation-welcome-headline {
3663 font-size: larger;
3664 font-weight: bold;
3665}
3666
3667.translation-welcome-body {
3668 padding: 1em 0;
3669 margin: 0 0;
3670}
3671
3672/* === END infobar.inc.css === */
3673
3674notification[value="translation"] {
3675 min-height: 40px;
3676}
3677
3678.translation-menupopup {
3679 -moz-appearance: none;
3680}
3681
3682/* Bookmarks roots menu-items */
3683#subscribeToPageMenuitem:not([disabled]),
3684#subscribeToPageMenupopup {
3685 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3686}
3687
3688#bookmarksToolbarFolderMenu,
3689#BMB_bookmarksToolbar,
3690#panelMenu_bookmarksToolbar {
3691 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3692 -moz-image-region: auto;
3693}
3694
3695#BMB_unsortedBookmarks,
3696#panelMenu_unsortedBookmarks {
3697 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3698 -moz-image-region: auto;
3699}
3700
3701/* Status panel */
3702
3703.statuspanel-label {
3704 margin: 0;
3705 padding: 2px 4px;
3706 background: #404000;
3707 border: 1px none #9C9CFF;
3708 border-top-style: solid;
3709 color: #FF9F00;
3710 text-shadow: none;
3711}
3712
3713.statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3714.statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3715 border-right-style: solid;
3716 border-top-right-radius: .3em;
3717 margin-right: 1em;
3718}
3719
3720.statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3721.statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3722 border-left-style: solid;
3723 border-top-left-radius: .3em;
3724 margin-left: 1em;
3725}
3726
3727/* HACK to abolish devily color on main content */
3728
3729#content {
3730 background-color: transparent !important;
3731}
3732
3733/* === BEGIN fullscreen/warning.inc.css === */
3734
3735html|*.pointerlockfswarning {
3736 align-items: center;
3737 background: rgba(0, 0, 0, 0.9);
3738 border: 2px solid #A09090;
3739 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3740 border-radius: 8px;
3741 padding: 24px 16px;
3742 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3743}
3744
3745html|*.pointerlockfswarning::before {
3746 margin: 0;
3747 width: 24px; height: 24px;
3748}
3749
3750html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
3751html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
3752 content: url("chrome://browser/skin/fullscreen/secure.svg");
3753}
3754
3755html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
3756 content: url("chrome://browser/skin/fullscreen/insecure.svg");
3757}
3758
3759html|*.pointerlockfswarning-domain-text,
3760html|*.pointerlockfswarning-generic-text {
3761 font-size: 21px;
3762 font-weight: lighter;
3763 color: #A09090;
3764 margin: 0 16px;
3765}
3766
3767html|*.pointerlockfswarning-domain {
3768 font-weight: bold;
3769 margin: 0;
3770}
3771
3772html|*.pointerlockfswarning-exit-button {
3773 padding: 5px 30px;
3774 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3775 font-size: 14px;
3776 font-weight: lighter;
3777 margin: 0;
3778 box-sizing: content-box;
3779
3780 border-radius: 300px;
3781 border: none;
3782 background-color: #C09070;
3783 color: #000000;
3784}
3785
3786/* === END fullscreen/warning.inc.css === */
3787
3788/* === BEGIN ctrlTab.inc.css === */
3789
3790/* Ctrl-Tab */
3791
3792#ctrlTab-panel {
3793 -moz-appearance: none;
3794 background: rgba(0%,0%,0%,.7);
3795 color: #FF9F00;
3796 border-style: none;
3797 padding: 20px 10px 10px;
3798 font-weight: bold;
3799}
3800
3801.ctrlTab-favicon[src] {
3802 background-color: #000000;
3803 width: 20px;
3804 height: 20px;
3805 padding: 2px;
3806}
3807
3808.ctrlTab-preview-inner > .tabPreview-canvas {
3809/* box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
3810}
3811
3812.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3813 margin-bottom: 2px;
3814}
3815
3816.ctrlTab-preview-inner {
3817 padding: 8px;
3818 border: 2px solid transparent;
3819 border-radius: .5em;
3820}
3821
3822.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner {
3823 margin: -10px -10px 0;
3824}
3825
3826#ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3827 background-color: #000000;
3828}
3829
3830.ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3831 color: #A09090;
3832 background-color: #000000;
3833 text-shadow: none;
3834 border-color: #9C9CFF;
3835}
3836
3837#ctrlTab-showAll {
3838 margin-top: .5em;
3839}
3840
3841/* === END ctrlTab.inc.css === */
3842
3843/* === BEGIN commandline.inc.css === */
3844
3845/* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
3846 We are copy/pasting variables from light-theme and dark-theme,
3847 since they aren't loaded in this context (within browser.css). */
3848:root #developer-toolbar {
3849 --gcli-background-color: #000000; /* --theme-toolbar-background */
3850 --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
3851 --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
3852 --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
3853 --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
3854 --selection-background: #008484; /* --theme-selection-background */
3855 --selection-color: #000000; /* --theme-selection-color */
3856 --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
3857 --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
3858}
3859
3860/* Developer toolbar */
3861
3862#developer-toolbar {
3863 border-top: 3px solid var(--gcli-background-color);
3864 border-bottom: none;
3865}
3866
3867#developer-toolbar .toolbar-holder {
3868 background-color: #8050B0;
3869 color: #FFCF00;
3870}
3871
3872#developer-toolbar .toolbar-holder {
3873 background-color: #8050B0;
3874 color: #FFCF00;
3875}
3876
3877#developer-toolbar .toolbar-startcap,
3878#developer-toolbar .toolbar-endcap{
3879 background-color: #6000CF;
3880}
3881
3882#developer-toolbar {
3883/* padding: 0;
3884 min-height: 32px; */
3885}
3886
3887#developer-toolbar > toolbarbutton {
3888/* border: none;
3889 background-color: transparent;
3890 margin: 0;
3891 padding: 0 10px;
3892 width: 32px; */
3893}
3894
3895.developer-toolbar-button > image {
3896/* margin: auto 10px; */
3897}
3898
3899#developer-toolbar-toolbox-button > label {
3900 display: none;
3901}
3902
3903.developer-toolbar-button > .toolbarbutton-icon {
3904 width: 16px;
3905 height: 16px;
3906}
3907
3908#developer-toolbar-toolbox-button {
3909 list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
3910 -moz-image-region: rect(0px, 16px, 16px, 0px);
3911}
3912
3913#developer-toolbar-toolbox-button > label {
3914 display: none;
3915}
3916
3917#developer-toolbar-toolbox-button:hover,
3918#developer-toolbar-toolbox-button:hover:active,
3919#developer-toolbar-toolbox-button[checked=true] {
3920 -moz-image-region: rect(0px, 32px, 16px, 16px);
3921}
3922
3923@media (min-resolution: 2dppx) {
3924 #developer-toolbar-toolbox-button {
3925 list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
3926 -moz-image-region: rect(0px, 32px, 32px, 0px);
3927 }
3928
3929 #developer-toolbar-toolbox-button:hover,
3930 #developer-toolbar-toolbox-button:hover:active,
3931 #developer-toolbar-toolbox-button[checked=true] {
3932 -moz-image-region: rect(0px, 64px, 32px, 32px);
3933 }
3934}
3935
3936/* GCLI */
3937
3938html|*#gcli-tooltip-frame,
3939html|*#gcli-output-frame {
3940 padding: 0;
3941 border-width: 0;
3942 background-color: transparent;
3943}
3944
3945#gcli-output,
3946#gcli-tooltip {
3947 border-width: 0;
3948 background-color: transparent;
3949}
3950
3951.gclitoolbar-input-node,
3952.gclitoolbar-complete-node {
3953 margin: 1px 3px;
3954 -moz-box-align: center;
3955 padding-top: 0;
3956 padding-bottom: 0;
3957 padding-right: 8px;
3958 background-color: transparent;
3959}
3960
3961.gclitoolbar-input-node {
3962/* line-height: 32px;
3963 outline-style: none; */
3964 background-repeat: no-repeat;
3965 background-color: var(--gcli-input-background);
3966}
3967
3968.gclitoolbar-input-node[focused="true"] {
3969 background-color: var(--gcli-input-focused-background);
3970}
3971
3972.gclitoolbar-input-node::before {
3973 content: "";
3974 display: inline-block;
3975 -moz-box-ordinal-group: 0;
3976 width: 16px;
3977 height: 16px;
3978 margin: 0 2px;
3979 background-image: var(--command-line-image);
3980}
3981
3982.gclitoolbar-input-node[focused="true"]::before {
3983 background-image: var(--command-line-image-focus);
3984}
3985
3986.gclitoolbar-input-node:not([focused="true"]) {
3987 border-color: transparent;
3988}
3989
3990.gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
3991 background-color: var(--selection-background);
3992 color: var(--selection-color);
3993}
3994
3995.gclitoolbar-complete-node {
3996 padding-left: 21px;
3997 background-color: transparent;
3998 color: transparent;
3999 z-index: 100;
4000 pointer-events: none;
4001}
4002
4003.gcli-in-incomplete,
4004.gcli-in-error,
4005.gcli-in-ontab,
4006.gcli-in-todo,
4007.gcli-in-closebrace,
4008.gcli-in-param,
4009.gcli-in-valid {
4010 margin: 0;
4011 padding: 0;
4012}
4013
4014.gcli-in-incomplete {
4015 border-bottom: 2px dotted #8050B0;
4016}
4017
4018.gcli-in-error {
4019 border-bottom: 2px dotted #FF0000;
4020}
4021
4022.gcli-in-ontab {
4023 color: #9C9CFF;
4024}
4025
4026.gcli-in-todo {
4027 color: #795900;
4028}
4029
4030.gcli-in-closebrace {
4031 color: #8050B0;
4032}
4033
4034/* === END commandline.inc.css === */
4035
4036/* === BEGIN responsivedesign.inc.css === */
4037
4038/* Responsive Mode */
4039
4040.browserContainer[responsivemode] {
4041 background-color: #221500;
4042 padding: 0 20px 20px 20px;
4043}
4044
4045.browserStack[responsivemode] {
4046 box-shadow: 0 0 7px #9C9CFF;
4047}
4048
4049.devtools-responsiveui-toolbar {
4050 background: transparent;
4051 /* text color is textColor from dark theme, since no theme is applied to
4052 * the responsive toolbar.
4053 */
4054 color: #FF9F00;
4055 margin: 10px 0;
4056 padding: 0;
4057 box-shadow: none;
4058 border-bottom-width: 0;
4059}
4060
4061.devtools-responsiveui-textinput {
4062/* -moz-appearance: none;
4063 background: #333;
4064 color: #fff;
4065 border: 1px solid #111;
4066 border-radius: 2px;
4067 padding: 0 5px;*/
4068 width: 200px;
4069 margin: 0;
4070}
4071
4072.devtools-responsiveui-textinput[attention] {
4073/* border-color: #38ace6;
4074 background: rgba(56,172,230,0.4);*/
4075}
4076
4077.devtools-responsiveui-menulist,
4078.devtools-responsiveui-toolbarbutton {
4079 -moz-box-align: center;
4080 min-width: 32px;
4081/* min-height: 22px;*/
4082/* margin: 0 3px; */
4083}
4084
4085.devtools-responsiveui-menulist .menulist-editable-box {
4086 background-color: transparent;
4087}
4088
4089.devtools-responsiveui-menulist html|*.menulist-editable-input {
4090 color: inherit;
4091 text-align: center;
4092}
4093
4094.devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4095/* background: hsla(212,7%,57%,.35);*/
4096}
4097
4098.devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4099 width: 16px;
4100 height: 16px;
4101}
4102
4103.devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4104 -moz-box-orient: horizontal;
4105}
4106
4107.devtools-responsiveui-menulist:-moz-focusring,
4108.devtools-responsiveui-toolbarbutton:-moz-focusring {
4109/* outline: 1px dotted hsla(210,30%,85%,0.7);
4110 outline-offset: -4px;*/
4111}
4112
4113.devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4114 display: none;
4115}
4116
4117.devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4118/* border-color: hsla(210,8%,5%,.6);
4119 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4120 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); */
4121}
4122
4123.devtools-responsiveui-menulist[open=true],
4124.devtools-responsiveui-toolbarbutton[open=true],
4125.devtools-responsiveui-toolbarbutton[checked=true] {
4126/* border-color: hsla(210,8%,5%,.6) !important;
4127 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4128 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); */
4129}
4130
4131.devtools-responsiveui-toolbarbutton[checked=true] {
4132/* color: hsl(208,100%,60%); */
4133}
4134
4135.devtools-responsiveui-toolbarbutton[checked=true]:hover {
4136/* background-color: transparent !important;*/
4137}
4138
4139.devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4140/* background-color: hsla(210,8%,5%,.2) !important;*/
4141}
4142
4143.devtools-responsiveui-menulist > .menulist-label-box {
4144 text-align: center;
4145}
4146
4147.devtools-responsiveui-menulist > .menulist-dropmarker {
4148/* display: -moz-box;
4149 background-color: transparent;
4150 list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4151 -moz-box-align: center;
4152 border-width: 0;
4153 min-width: 16px;*/
4154}
4155
4156.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4157/* color: inherit;
4158 border-width: 0;
4159 border-inline-end: 1px solid hsla(210,8%,5%,.45);
4160 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4161}
4162
4163.devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4164/* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4165}
4166
4167.devtools-responsiveui-toolbarbutton[type=menu-button] {
4168/* padding: 0 1px;*/
4169 -moz-box-align: stretch;
4170}
4171
4172.devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4173.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4174/* list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4175 -moz-box-align: center;
4176 padding: 0 3px;*/
4177}
4178
4179.devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4180.devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4181 margin-left: 3px;
4182}
4183
4184.devtools-responsiveui-close {
4185 list-style-image: url("chrome://devtools/skin/close.svg");
4186}
4187
4188.devtools-responsiveui-close:hover {
4189 filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
4190}
4191
4192.devtools-responsiveui-close > image {
4193 filter: invert(1);
4194}
4195
4196.devtools-responsiveui-rotate {
4197 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate.png");
4198 -moz-image-region: rect(0px,16px,16px,0px);
4199}
4200
4201.devtools-responsiveui-rotate:hover {
4202 -moz-image-region: rect(0px,32px,16px,16px);
4203}
4204
4205@media (min-resolution: 2dppx) {
4206 .devtools-responsiveui-rotate {
4207 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate@2x.png");
4208 }
4209
4210 .devtools-responsiveui-rotate:hover {
4211 -moz-image-region: rect(0px,64px,32px,32px);
4212 }
4213}
4214
4215.devtools-responsiveui-touch {
4216 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch.png");
4217 -moz-image-region: rect(0px,16px,16px,0px);
4218}
4219
4220.devtools-responsiveui-touch:hover,
4221.devtools-responsiveui-touch[checked],
4222.devtools-responsiveui-touch[checked]:hover {
4223 -moz-image-region: rect(0px,32px,16px,16px);
4224}
4225
4226@media (min-resolution: 2dppx) {
4227 .devtools-responsiveui-touch {
4228 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch@2x.png");
4229 -moz-image-region: rect(0px,32px,32px,0px);
4230 }
4231
4232 .devtools-responsiveui-touch:hover,
4233 .devtools-responsiveui-touch[checked],
4234 .devtools-responsiveui-touch[checked]:hover {
4235 -moz-image-region: rect(0px,64px,32px,32px);
4236 }
4237}
4238
4239.devtools-responsiveui-screenshot {
4240 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot.png");
4241 -moz-image-region: rect(0px,16px,16px,0px);
4242}
4243
4244.devtools-responsiveui-screenshot:hover {
4245 -moz-image-region: rect(0px,32px,16px,16px);
4246}
4247
4248@media (min-resolution: 2dppx) {
4249 .devtools-responsiveui-screenshot {
4250 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot@2x.png");
4251 }
4252
4253 .devtools-responsiveui-screenshot:hover {
4254 -moz-image-region: rect(0px,64px,32px,32px);
4255 }
4256}
4257
4258.devtools-responsiveui-resizebarV {
4259 width: 7px;
4260 height: 24px;
4261 cursor: ew-resize;
4262 transform: translate(12px, -12px);
4263 background-size: cover;
4264 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer.png");
4265}
4266
4267.devtools-responsiveui-resizebarH {
4268 width: 24px;
4269 height: 7px;
4270 cursor: ns-resize;
4271 transform: translate(-12px, 12px);
4272 background-size: cover;
4273 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer.png");
4274}
4275
4276.devtools-responsiveui-resizehandle {
4277 width: 16px;
4278 height: 16px;
4279 cursor: se-resize;
4280 transform: translate(12px, 12px);
4281 background-size: cover;
4282 background-image: url("chrome://devtools/skin/images/responsive-se-resizer.png");
4283}
4284
4285/* FxOS custom mode with additional buttons and phone look'n feel */
4286
4287/* Hide devtools manual resizer */
4288.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4289.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4290.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4291 display: none;
4292}
4293
4294/* Gives responsive mode a phone look'n feel */
4295.browserStack[responsivemode].fxos-mode {
4296 padding: 60px 15px 0;
4297
4298 border-radius: 25px / 20px;
4299 border-bottom-left-radius: 0;
4300 border-bottom-right-radius: 0;
4301 border: 1px solid #FFFFFF;
4302 border-bottom-width: 0;
4303
4304 background-color: #353535;
4305
4306 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4307
4308 background-image: linear-gradient(to right, #111 11%, #333 56%);
4309 min-width: 320px;
4310}
4311
4312.devtools-responsiveui-hardware-buttons {
4313 -moz-appearance: none;
4314 padding: 20px;
4315
4316 border: 1px solid #FFFFFF;
4317 border-bottom-left-radius: 25px;
4318 border-bottom-right-radius: 25px;
4319 border-top-width: 0;
4320
4321 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4322
4323 background-image: linear-gradient(to right, #111 11%, #333 56%);
4324}
4325
4326.devtools-responsiveui-home-button {
4327 -moz-user-focus: ignore;
4328 width: 40px;
4329 height: 30px;
4330 list-style-image: url("chrome://devtools/skin/images/responsiveui-home.png");
4331}
4332
4333.devtools-responsiveui-sleep-button {
4334 -moz-user-focus: ignore;
4335 -moz-appearance: none;
4336 /* compensate browserStack top padding */
4337 margin-top: -67px;
4338 margin-right: 10px;
4339
4340 min-width: 10px;
4341 width: 50px;
4342 height: 5px;
4343
4344 border: 1px solid #444;
4345 border-top-right-radius: 12px;
4346 border-top-left-radius: 12px;
4347 border-bottom-color: transparent;
4348
4349 background-image: linear-gradient(to top, #111 11%, #333 56%);
4350}
4351
4352.devtools-responsiveui-sleep-button:hover:active {
4353 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4354}
4355
4356.devtools-responsiveui-volume-buttons {
4357 margin-left: -29px;
4358}
4359
4360.devtools-responsiveui-volume-up-button,
4361.devtools-responsiveui-volume-down-button {
4362 -moz-user-focus: ignore;
4363 -moz-appearance: none;
4364 border: 1px solid red;
4365 min-width: 8px;
4366 height: 40px;
4367
4368 border: 1px solid #444;
4369 border-right-color: transparent;
4370
4371 background-image: linear-gradient(to right, #111 11%, #333 56%);
4372}
4373
4374.devtools-responsiveui-volume-up-button:hover:active,
4375.devtools-responsiveui-volume-down-button:hover:active {
4376 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4377}
4378
4379.devtools-responsiveui-volume-up-button {
4380 border-top-left-radius: 12px;
4381}
4382
4383.devtools-responsiveui-volume-down-button {
4384 border-bottom-left-radius: 12px;
4385}
4386
4387@media (min-resolution: 2dppx) {
4388 .devtools-responsiveui-resizebarV {
4389 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer@2x.png");
4390 }
4391
4392 .devtools-responsiveui-resizebarH {
4393 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer@2x.png");
4394 }
4395
4396 .devtools-responsiveui-resizehandle {
4397 background-image: url("chrome://devtools/skin/images/responsive-se-resizer@2x.png");
4398 }
4399}
4400
4401/* === END responsivedesign.inc.css === */
4402
4403/* === including indicator.css is done at the start of the file === */
4404
4405/* Error counter */
4406
4407#developer-toolbar-toolbox-button[error-count]:before {
4408 color: #000000;
4409 min-width: 16px;
4410 text-shadow: none;
4411 background-color: #FF0000;
4412 border-radius: 1px;
4413 margin-inline-end: 5px;
4414}
4415
4416/* === BEGIN plugin-doorhanger.inc.css === */
4417
4418/**
4419 * Plugin Doorhanger Styles
4420 */
4421
4422#notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4423 padding: 6px 1px 2px;
4424}
4425
4426.click-to-play-plugins-notification-center-box {
4427}
4428
4429.plugin-popupnotification-centeritem:nth-child(odd) {
4430/* background-color: rgba(0,0,0,0.1);*/
4431}
4432
4433.center-item-label {
4434 margin-bottom: 0;
4435 text-overflow: ellipsis;
4436}
4437
4438.center-item-warning-icon {
4439 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg");
4440 background-repeat: no-repeat;
4441 width: 16px;
4442 height: 15px;
4443 margin-inline-start: 6px;
4444}
4445
4446.click-to-play-plugins-notification-button-container {
4447}
4448
4449.click-to-play-popup-button {
4450 width: 50%;
4451}
4452
4453.click-to-play-plugins-notification-description-box {
4454 margin-left: 5px;
4455 margin-right: 5px;
4456 margin-top: 0;
4457 padding-bottom: 3px;
4458}
4459
4460.click-to-play-plugins-outer-description {
4461 margin-top: 1px;
4462}
4463
4464.click-to-play-plugins-notification-link,
4465.center-item-link {
4466 margin: 0;
4467}
4468
4469.messageImage[value="plugin-hidden"] {
4470 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
4471}
4472
4473/* Keep any changes to this style in sync with pluginProblem.css */
4474notification.pluginVulnerable {
4475}
4476
4477notification.pluginVulnerable .messageImage {
4478 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
4479}
4480
4481/* === END plugin-doorhanger.inc.css === */
4482
4483/* === BEGIN customizeMode.inc.css === */
4484
4485/* Customization mode */
4486
4487:root {
4488 --drag-drop-transition-duration: .3s;
4489}
4490
4491#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4492 margin-bottom: 1em;
4493}
4494
4495#main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4496#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4497#main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4498 margin-left: 1em;
4499 margin-right: 1em;
4500}
4501
4502#main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4503 pointer-events: none;
4504}
4505
4506#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4507#PanelUI-contents > .panel-customization-placeholder {
4508 -moz-outline-radius: 2.5px;
4509 outline: 1px dashed transparent;
4510}
4511
4512#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4513 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4514 -moz-box-ordinal-group: 0;
4515 content: "";
4516 display: -moz-box;
4517 height: 100%;
4518 left: 0;
4519 outline-offset: -2px;
4520 pointer-events: none;
4521 position: absolute;
4522 top: 0;
4523 width: 100%;
4524}
4525
4526/* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4527 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4528 offset from the bottom effectively the same as other targets (-2px). */
4529#main-window[customize-entered] #TabsToolbar.customization-target::before {
4530/* top: -2px;*/
4531}
4532
4533/* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4534#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4535#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4536#main-window[customize-entered] #nav-bar-customization-target.customization-target {
4537 position: relative;
4538}
4539
4540/* Most target outlines are shown on hover and drag over but the panel menu uses
4541 placeholders instead. */
4542#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4543#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4544/* nav-bar and panel outlines are always shown */
4545#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4546 outline-color: currentColor;
4547}
4548
4549#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4550 transition: outline-color 250ms linear;
4551}
4552
4553#PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4554 transition: outline-color 250ms linear;
4555 outline-color: var(--panel-separator-color);
4556}
4557
4558#PanelUI-contents > .panel-customization-placeholder {
4559 cursor: auto;
4560 outline-offset: -5px;
4561}
4562
4563#main-window[customizing] .customization-target:not(#PanelUI-contents) {
4564 min-width: 100px;
4565/* padding-left: 10px;
4566 padding-right: 10px;*/
4567}
4568
4569#main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4570 padding: 0 2em 2em;
4571}
4572
4573#customization-container {
4574 background-color: #000000;
4575 color: #FF9F00;
4576}
4577
4578#customization-palette,
4579#customization-empty {
4580 padding: 0 15px 15px;
4581}
4582
4583#customization-header {
4584 font-size: 1.75em;
4585 line-height: 1.75em;
4586 color: #9C9CFF;
4587 font-weight: 200;
4588 margin: 25px 25px 12px;
4589 padding-bottom: 12px;
4590 border-bottom: 1px solid #A09090;
4591}
4592
4593#customization-panel-container {
4594 padding: 10px 10px 0px;
4595}
4596
4597#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4598#customization-footer {
4599 /*background-color: rgb(236,236,236);*/
4600}
4601
4602#customization-footer {
4603 border-top: 1px solid #9C9CFF;
4604 padding: 10px;
4605}
4606
4607.customizationmode-button {
4608 margin: 5px;
4609}
4610
4611.customizationmode-button:hover {
4612}
4613
4614.customizationmode-button > .box-inherit {
4615}
4616
4617.customizationmode-button > .button-icon {
4618}
4619
4620.customizationmode-button:not([type=menu]) > .button-text {
4621}
4622
4623.customizationmode-button > .button-menu-dropmarker {
4624}
4625
4626
4627
4628.customizationmode-button[checked] {
4629 background-color: #008484;
4630}
4631
4632.customizationmode-button[checked]:hover:not([disabled]),
4633.customizationmode-button:hover:not([disabled]) {
4634 background-color: #FFCF00;
4635}
4636
4637.customizationmode-button[checked]:hover:active:not([disabled]),
4638.customizationmode-button:hover:active:not([disabled]),
4639.customizationmode-button[open] {
4640 background-color: #FF9F00;
4641}
4642
4643.customizationmode-button[disabled="true"] {
4644}
4645
4646.customizationmode-button > .box-inherit > .box-inherit > .button-icon,
4647.customizationmode-button > .button-box > .button-icon {
4648/* height: 24px;*/
4649}
4650
4651#customization-titlebar-visibility-button {
4652 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4653 -moz-image-region: rect(0, 16px, 16px, 0);
4654}
4655
4656#customization-titlebar-visibility-button:hover {
4657 -moz-image-region: rect(16px, 16px, 32px, 0);
4658}
4659
4660#customization-titlebar-visibility-button > .button-box {
4661 padding-top: 0;
4662 padding-bottom: 1px;
4663}
4664
4665#customization-titlebar-visibility-button:hover:active > .button-box {
4666 padding-top: 1px;
4667 padding-bottom: 0;
4668}
4669
4670#customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
4671#customization-titlebar-visibility-button > .button-box > .button-text {
4672 /* Sadly, button.css thinks its margins are perfect for everyone. */
4673 margin-inline-start: 5px !important;
4674}
4675
4676#customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
4677 width: 20px;
4678 height: 20px;
4679 border-radius: 2px;
4680 background-image: url("chrome://browser/skin/theme-switcher-icon.png");
4681 background-size: contain;
4682}
4683
4684#customization-titlebar-visibility-button > .button-box > .button-icon {
4685 vertical-align: middle;
4686}
4687
4688#customization-titlebar-visibility-button[checked] {
4689 -moz-image-region: rect(0, 32px, 16px, 16px);
4690 background-color: #008484;
4691}
4692
4693#customization-titlebar-visibility-button[checked]:hover {
4694 -moz-image-region: rect(16px, 32px, 32px, 16px);
4695 background-color: #FFCF00;
4696}
4697
4698#customization-titlebar-visibility-button[checked]:hover:active {
4699 background-color: #FF9F00;
4700}
4701
4702@media (min-resolution: 1.1dppx) {
4703 #customization-titlebar-visibility-button {
4704 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
4705 -moz-image-region: rect(0, 48px, 48px, 0);
4706 }
4707
4708 #customization-titlebar-visibility-button:hover {
4709 -moz-image-region: rect(48px, 48px, 96px, 0);
4710 }
4711
4712 #customization-titlebar-visibility-button[checked] {
4713 -moz-image-region: rect(0, 96px, 48px, 48px);
4714 }
4715
4716 #customization-titlebar-visibility-button[checked]:hover {
4717 -moz-image-region: rect(48px, 96px, 96px, 48px);
4718 }
4719}
4720
4721#main-window[customize-entered] #customization-panel-container {
4722 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4723 background-position: left top;
4724 background-repeat: repeat;
4725 background-size: auto;
4726 background-attachment: fixed;
4727}
4728
4729toolbarpaletteitem[place="toolbar"] {
4730 transition: border-width 250ms ease-in-out;
4731}
4732
4733toolbarpaletteitem[mousedown] {
4734 outline: 1px solid #008484;
4735 cursor: -moz-grabbing;
4736 opacity: 0.8;
4737}
4738
4739.panel-customization-placeholder,
4740toolbarpaletteitem[place="palette"],
4741toolbarpaletteitem[place="panel"] {
4742 transition: transform var(--drag-drop-transition-duration) ease-in-out;
4743}
4744
4745#customization-palette {
4746 transition: opacity .3s ease-in-out;
4747 opacity: 0;
4748}
4749
4750#customization-palette[showing="true"] {
4751 opacity: 1;
4752}
4753
4754toolbarpaletteitem toolbarbutton[disabled] {
4755/* color: inherit !important;*/
4756}
4757
4758toolbarpaletteitem[notransition].panel-customization-placeholder,
4759toolbarpaletteitem[notransition][place="toolbar"],
4760toolbarpaletteitem[notransition][place="palette"],
4761toolbarpaletteitem[notransition][place="panel"] {
4762 transition: none;
4763}
4764
4765toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4766toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
4767toolbarpaletteitem > toolbaritem.panel-wide-item,
4768toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4769 transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
4770}
4771
4772toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
4773toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
4774 transform: scale(1.3);
4775}
4776
4777toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4778toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4779 transform: scale(1.1);
4780}
4781
4782/* Override the toolkit styling for items being dragged over. */
4783toolbarpaletteitem[place="toolbar"] {
4784 border-left-width: 0;
4785 border-right-width: 0;
4786 margin-right: 0;
4787 margin-left: 0;
4788}
4789
4790#customization-palette:not([hidden]) {
4791 margin-bottom: 25px;
4792}
4793
4794toolbarpaletteitem[place="palette"]:-moz-focusring,
4795toolbarpaletteitem[place="panel"]:-moz-focusring,
4796toolbarpaletteitem[place="toolbar"]:-moz-focusring {
4797 outline-width: 0;
4798}
4799
4800toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
4801toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
4802toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4803 /* Delay adding the focusring back until after the transform transition completes. */
4804 transition: outline-width .01s linear var(--drag-drop-transition-duration);
4805 outline: 1px dotted;
4806 -moz-outline-radius: 2.5px;
4807}
4808
4809toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4810 outline-offset: -5px;
4811}
4812
4813#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4814#wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4815#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4816#wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4817 margin-top: 20px;
4818}
4819
4820#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4821#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4822 margin-left: 0;
4823 margin-right: 0;
4824 max-width: 24px;
4825 min-width: 24px;
4826 max-height: 24px;
4827 min-height: 24px;
4828 padding: 4px;
4829}
4830
4831#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4832#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4833 width: 16px;
4834}
4835
4836#wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4837 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4838}
4839
4840#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4841#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
4842 display: none;
4843}
4844
4845#wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
4846 -moz-box-pack: center;
4847 min-height: 48px;
4848}
4849
4850#personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
4851 margin-inline-end: 5px;
4852}
4853
4854#customization-palette > toolbarpaletteitem > label {
4855 text-align: center;
4856 margin-left: 0;
4857 margin-right: 0;
4858}
4859
4860#customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
4861 -moz-box-orient: vertical;
4862 /* Make the panel padding uniform across all platforms due to the
4863 styling of the section headers and footer. */
4864 padding: 10px;
4865}
4866
4867.customization-lwtheme-menu-theme > .toolbarbutton-icon {
4868 width: 32px;
4869 height: 32px;
4870}
4871
4872.customization-lwtheme-menu-theme {
4873 -moz-appearance: none;
4874 margin: 0 -5px 5px;
4875 padding-top: 0;
4876 padding-inline-end: 5px;
4877 padding-bottom: 0;
4878 padding-inline-start: 0;
4879}
4880
4881.customization-lwtheme-menu-theme[defaulttheme] {
4882 list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
4883}
4884
4885.customization-lwtheme-menu-theme[active="true"] {
4886 background-color: #008484;
4887}
4888
4889.customization-lwtheme-menu-theme > .toolbarbutton-icon {
4890 margin: 5px;
4891}
4892
4893.customization-lwtheme-menu-theme > .toolbarbutton-text {
4894 text-align: start;
4895}
4896
4897#customization-lwtheme-menu-header,
4898#customization-lwtheme-menu-recommended {
4899 padding: 10px;
4900 margin-bottom: 5px;
4901}
4902
4903#customization-lwtheme-menu-header,
4904#customization-lwtheme-menu-recommended,
4905#customization-lwtheme-menu-footer {
4906 background-color: #A09090;
4907 color: #000000;
4908 margin-right: -10px;
4909 margin-left: -10px;
4910}
4911
4912#customization-lwtheme-menu-header {
4913 margin-top: -10px;
4914 border-top-right-radius: 3px;
4915 border-top-left-radius: 3px;
4916}
4917
4918#customization-lwtheme-menu-recommended {
4919}
4920
4921#customization-lwtheme-menu-footer {
4922 margin-bottom: -10px;
4923 border-bottom-right-radius: 3px;
4924 border-bottom-left-radius: 3px;
4925}
4926
4927.customization-lwtheme-menu-footeritem {
4928 -moz-appearance: none;
4929 -moz-box-flex: 1;
4930 background-color: #C09070;
4931 color: #000000;
4932 border: 1px solid transparent;
4933 padding: 10px;
4934 margin-left: 0;
4935 margin-right: 0;
4936}
4937
4938.customization-lwtheme-menu-footeritem:hover {
4939 background-color: #FFCF00;
4940}
4941
4942.customization-lwtheme-menu-footeritem:first-child {
4943}
4944
4945/* === END customizeMode.inc.css === */
4946
4947/* === BEGIN customizeTip.inc.css === */
4948
4949#customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
4950 padding: 0;
4951 margin: 0;
4952 min-width: 400px;
4953 max-width: 1000px;
4954 min-height: 200px;
4955 border-radius: 3px;
4956/* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
4957 border: 1px solid #9C9CFF;
4958 color: #FF9F00;
4959}
4960
4961#customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
4962/* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
4963}
4964
4965.customization-tipPanel-infoBox {
4966 margin: 20px 25px 25px;
4967 width: 25px;
4968 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
4969 background-repeat: no-repeat;
4970}
4971
4972.customization-tipPanel-content {
4973 margin: 25px 0;
4974 font-size: 12px;
4975 line-height: 18px;
4976}
4977
4978.customization-tipPanel-em {
4979 margin: 0;
4980 font-weight: bold;
4981}
4982
4983.customization-tipPanel-contentImage {
4984 margin-top: 25px;
4985 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
4986 min-width: 300px;
4987 max-width: 300px;
4988 min-height: 190px;
4989 max-height: 190px;
4990 display: -moz-box;
4991}
4992
4993.customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
4994 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
4995}
4996
4997.customization-tipPanel-link {
4998 -moz-appearance: none;
4999 background: transparent;
5000 border: none;
5001 box-shadow: none;
5002 color: #3333FF;
5003 margin: 0;
5004 cursor: pointer;
5005}
5006
5007.customization-tipPanel-link > .button-box > .button-text {
5008 margin: 0 !important;
5009}
5010
5011.customization-tipPanel-closeBox > .close-icon {
5012 -moz-appearance: none;
5013 border: 0;
5014 margin-inline-end: -25px;
5015}
5016
5017#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5018#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5019 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5020}
5021
5022/* === END customizeTip.inc.css === */
5023
5024/**
5025 * This next rule is a hack to disable subpixel anti-aliasing on all
5026 * labels during the customize mode transition. Subpixel anti-aliasing
5027 * on Windows with Direct2D layers acceleration is particularly slow to
5028 * paint, so this hack is how we sidestep that performance bottleneck.
5029 */
5030#main-window:-moz-any([customize-entering],[customize-exiting]) label {
5031 transform: perspective(0.01px);
5032}
5033
5034#main-window[customize-entered] > #tab-view-deck {
5035 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5036 background-attachment: fixed;
5037}
5038
5039#main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
5040 background-repeat: no-repeat;
5041 background-position: right top;
5042 background-attachment: fixed;
5043 /* The image will get set from CustomizeMode.jsm */
5044 background-image: none;
5045 background-color: transparent;
5046}
5047
5048#main-window[customization-lwtheme]:-moz-lwtheme {
5049 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5050 background-repeat: repeat;
5051 background-attachment: fixed;
5052 background-position: left top;
5053}
5054
5055#main-window[customize-entered] #browser-bottombox,
5056#main-window[customize-entered] #customization-container {
5057 border-left: 1px solid #9C9CFF;
5058 border-right: 1px solid #9C9CFF;
5059 background-clip: padding-box;
5060}
5061
5062#main-window[customize-entered] #browser-bottombox {
5063 border-bottom: 1px solid #9C9CFF;
5064}
5065
5066#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5067 margin-right: -2px;
5068}
5069
5070#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5071 margin-left: -2px;
5072}
5073
5074/* End customization mode */
5075
5076/* Private browsing indicators */
5077
5078/**
5079 * Currently, we have two places where we put private browsing indicators on
5080 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5081 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5082 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5083 * want the bottom border of the image to line up with the bottom of the window
5084 * caption buttons. That's why there's so much special-casing going on in here.
5085 */
5086.private-browsing-indicator {
5087 display: none;
5088 pointer-events: none;
5089}
5090
5091#private-browsing-indicator-titlebar {
5092 display: block;
5093 position: absolute;
5094}
5095
5096#main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5097 display: block;
5098}
5099
5100#main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5101 display: -moz-box;
5102}
5103
5104#TabsToolbar > .private-browsing-indicator {
5105 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5106 margin-inline-start: 4px;
5107 width: 48px;
5108}
5109
5110/* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5111 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5112 * min/max/close window buttons.
5113 */
5114#private-browsing-indicator-titlebar > .private-browsing-indicator,
5115#main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5116 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5117 margin-inline-end: 4px;
5118 width: 40px;
5119 height: 20px;
5120 position: relative;
5121}
5122
5123/* This one is for Linux */
5124#main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5125 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5126 width: 48px;
5127}
5128
5129/* End private browsing indicators */
5130
5131/* === BEGIN UITour.inc.css === */
5132
5133/* UI Tour */
5134
5135#UITourHighlightContainer {
5136 -moz-appearance: none;
5137 border: none;
5138 background-color: transparent;
5139 /* This is a buffer to compensate for the movement in the "wobble" effect,
5140 and for the box-shadow of #UITourHighlight. */
5141 padding: 4px;
5142}
5143
5144#UITourHighlight {
5145 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5146 border-radius: 40px;
5147 border: 1px solid #9C9CFF;
5148 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5149 on Linux without an X compositor where opacity is either 0 or 1. */
5150 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5151 min-height: 32px;
5152 min-width: 32px;
5153}
5154
5155#UITourTooltipBody {
5156 -moz-box-align: start;
5157}
5158
5159#UITourTooltipTitleContainer {
5160 -moz-box-align: start;
5161 margin-bottom: 10px;
5162}
5163
5164#UITourTooltipIcon {
5165 width: 48px;
5166 height: 48px;
5167 margin-inline-end: 10px;
5168}
5169
5170#UITourTooltipTitle,
5171#UITourTooltipDescription {
5172 max-width: 20rem;
5173}
5174
5175#UITourTooltipTitle {
5176 font-size: 1.45rem;
5177 font-weight: bold;
5178 margin: 0;
5179}
5180
5181#UITourTooltipDescription {
5182 margin-inline-start: 0;
5183 margin-inline-end: 0;
5184 font-size: 1.15rem;
5185 line-height: 1.8rem;
5186 margin-bottom: 0; /* Override global.css */
5187}
5188
5189#UITourTooltipClose {
5190 position: relative;
5191 -moz-appearance: none;
5192 border: none;
5193 background-color: transparent;
5194 min-width: 0;
5195 margin-inline-start: 4px;
5196 margin-top: -2px;
5197}
5198
5199#UITourTooltipClose > .toolbarbutton-text {
5200 display: none;
5201}
5202
5203#UITourTooltipButtons {
5204 -moz-box-pack: end;
5205 background-color: rgba(0,0,0,.2);
5206 border-top: 1px solid rgba(0,0,0,.4);
5207 margin: 10px -16px -16px;
5208 padding: 16px;
5209}
5210
5211#UITourTooltipButtons > label,
5212#UITourTooltipButtons > button {
5213 margin: 0 15px;
5214}
5215
5216#UITourTooltipButtons > label:first-child,
5217#UITourTooltipButtons > button:first-child {
5218 margin-inline-start: 0;
5219}
5220
5221#UITourTooltipButtons > label:last-child,
5222#UITourTooltipButtons > button:last-child {
5223 margin-inline-end: 0;
5224}
5225
5226#UITourTooltipButtons > button[image] > .button-box > .button-icon {
5227 width: 16px;
5228 height: 16px;
5229 margin-inline-end: 5px;
5230}
5231
5232#UITourTooltipButtons > label,
5233#UITourTooltipButtons > button .button-text {
5234 font-size: 1.15rem;
5235}
5236
5237#UITourTooltipButtons > button:not(.button-link) {
5238 -moz-appearance: none;
5239 background-color: #C09070;
5240 border-radius: 3000px;
5241 border: none;
5242 color: #000000;
5243 padding: 4px 30px;
5244 transition-property: background-color, color;
5245 transition-duration: 150ms;
5246}
5247
5248#UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5249 background-color: #FFCF00;
5250 color: #000000;
5251}
5252
5253#UITourTooltipButtons > label,
5254#UITourTooltipButtons > button.button-link {
5255 -moz-appearance: none;
5256 background: transparent;
5257 border: none;
5258 box-shadow: none;
5259 color: rgba(0,0,0,0.35);
5260 padding-left: 10px;
5261 padding-right: 10px;
5262}
5263
5264#UITourTooltipButtons > button.button-link:hover {
5265 color: black;
5266}
5267
5268/* The primary button gets the same color as the customize button. */
5269#UITourTooltipButtons > button.button-primary {
5270 background-color: #A06060; /* LCARS default button background color */
5271 color: #000000;
5272 padding-left: 30px;
5273 padding-right: 30px;
5274}
5275
5276#UITourTooltipButtons > button.button-primary:not(:active):hover {
5277 background-color: #FFCF00;
5278 color: #000000;
5279}
5280
5281/* Notification overrides for Heartbeat UI */
5282
5283notification.heartbeat {
5284 background-color: #A09090;
5285/* height: 40px;*/
5286}
5287
5288@keyframes pulse-onshow {
5289 0% {
5290 opacity: 0;
5291 transform: scale(1.0);
5292 }
5293 25% {
5294 opacity: 1;
5295 transform: scale(1.1);
5296 }
5297 50% {
5298 transform: scale(1.0);
5299 }
5300 75% {
5301 transform: scale(1.1);
5302 }
5303 100% {
5304 transform: scale(1.0);
5305 }
5306}
5307
5308@keyframes pulse-twice {
5309 0% {
5310 transform: scale(1.1);
5311 }
5312 50% {
5313 transform: scale(0.8);
5314 }
5315 100% {
5316 transform: scale(1);
5317 }
5318}
5319
5320.messageText.heartbeat {
5321 color: #000000;
5322/* text-shadow: none; */
5323 margin-inline-start: 0px;
5324}
5325
5326.messageImage.heartbeat {
5327 width: 24px;
5328 height: 24px;
5329 margin-inline-start: 8px;
5330 margin-inline-end: 8px;
5331}
5332
5333.messageImage.heartbeat.pulse-onshow {
5334 animation-name: pulse-onshow;
5335 animation-duration: 1.5s;
5336 animation-iteration-count: 1;
5337 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5338}
5339
5340.messageImage.heartbeat.pulse-twice {
5341 animation-name: pulse-twice;
5342 animation-duration: 1s;
5343 animation-iteration-count: 2;
5344 animation-timing-function: linear;
5345}
5346
5347/* Learn More link styles */
5348.heartbeat > .text-link {
5349 color: #3333FF;
5350 margin-inline-start: 0px;
5351}
5352
5353.heartbeat > .text-link:hover {
5354 color: #9C9CFF;
5355 text-decoration: none;
5356}
5357
5358.heartbeat > .text-link:hover:active {
5359 color: #FF9F00;
5360}
5361
5362/* Heartbeat UI Rating Star Classes */
5363.heartbeat > #star-rating-container {
5364 display: -moz-box;
5365/* margin-bottom: 4px;*/
5366}
5367
5368.heartbeat > #star-rating-container > #star5 {
5369 -moz-box-ordinal-group: 5;
5370}
5371
5372.heartbeat > #star-rating-container > #star4 {
5373 -moz-box-ordinal-group: 4;
5374}
5375
5376.heartbeat > #star-rating-container > #star3 {
5377 -moz-box-ordinal-group: 3;
5378}
5379
5380.heartbeat > #star-rating-container > #star2 {
5381 -moz-box-ordinal-group: 2;
5382}
5383
5384.heartbeat > #star-rating-container > .star-x {
5385 background: url("chrome://browser/skin/heartbeat-star-off.svg");
5386 cursor: pointer;
5387 /* Overrides the margin-inline-end for all platforms defined in the .plain class */
5388 margin-inline-end: 4px !important;
5389 width: 16px;
5390 height: 16px;
5391}
5392
5393.heartbeat > #star-rating-container > .star-x:hover,
5394.heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5395 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
5396}
5397
5398/* === END UITour.inc.css === */
5399
5400#UITourTooltipButtons {
5401 /**
5402 * Override the --arrowpanel-padding so the background extends
5403 * to the sides and bottom of the panel.
5404 */
5405 margin-left: -10px;
5406 margin-right: -10px;
5407 margin-bottom: -10px;
5408}
5409
5410/* === BEGIN contextmenu.inc.css === */
5411
5412menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5413}
5414
5415#context-navigation > .menuitem-iconic {
5416 -moz-box-flex: 1;
5417 -moz-box-pack: center;
5418 -moz-box-align: center;
5419}
5420
5421#context-navigation > .menuitem-iconic[disabled="true"] {
5422 background-color: transparent;
5423}
5424
5425#context-navigation > .menuitem-iconic > .menu-iconic-left {
5426 -moz-appearance: none;
5427}
5428
5429#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5430 width: 16px;
5431 height: 16px;
5432 margin: 7px;
5433 filter: url(chrome://browser/skin/filters.svg#fill);
5434 fill: currentColor;
5435}
5436
5437#context-back {
5438 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back");
5439}
5440
5441#context-forward {
5442 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward");
5443}
5444
5445#context-reload {
5446 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload");
5447}
5448
5449#context-stop {
5450 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop");
5451}
5452
5453#context-bookmarkpage {
5454 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark");
5455}
5456
5457#context-bookmarkpage[starred=true] {
5458 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked");
5459}
5460
5461#context-back:-moz-locale-dir(rtl),
5462#context-forward:-moz-locale-dir(rtl),
5463#context-reload:-moz-locale-dir(rtl) {
5464 transform: scaleX(-1);
5465}
5466
5467#context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
5468#context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
5469 width: 14px;
5470 height: 14px;
5471 margin: 9px;
5472}
5473
5474#context-media-eme-learnmore {
5475 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5476}
5477
5478#context-media-eme-learnmore {
5479 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5480}
5481
5482/* === END contextmenu.inc.css === */
5483
5484#context-navigation {
5485}
5486
5487#context-sep-navigation {
5488/* margin-top: -4px; */
5489}
5490
5491.browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
5492 padding: 0;
5493 overflow: hidden;
5494}
5495
5496.webextension-popup-browser {
5497 border-radius: inherit;
5498}
5499
5500.contentSelectDropdown-ingroup > .menu-iconic-text {
5501 padding-inline-start: 20px;
5502}
5503
5504#ContentSelectDropdown > menupopup {
5505 background-color: #000000;
5506 -moz-border-top-colors: #A09090;
5507 -moz-border-right-colors: #A09090;
5508 -moz-border-bottom-colors: #A09090;
5509 -moz-border-left-colors: #A09090;
5510}
5511
5512#ContentSelectDropdown > menupopup > menucaption,
5513#ContentSelectDropdown > menupopup > menuitem {
5514 padding: 4px 6px;
5515}
5516
5517#ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text,
5518#ContentSelectDropdown > menupopup > menuitem > .menu-iconic-text {
5519 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
5520 font-size: 11px;
5521 /**
5522 * Remove the extra vertical padding set by menu.css since
5523 * the menuitem itself will include enough padding.
5524 */
5525 padding-top: 0px;
5526 padding-bottom: 0px;
5527}
5528
5529#ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text {
5530 font-weight: bold;
5531}
5532
5533#ContentSelectDropdown > menupopup > menuitem[_moz-menuactive="true"][disabled="true"] {
5534 color: #A09090;
5535 background-color: unset;
5536}
5537
5538#ContentSelectDropdown > menupopup > menucaption {
5539 background-color: buttonface;
5540}
5541
5542#ContentSelectDropdown > menupopup > menucaption[disabled="true"] {
5543 color: #A09090;
5544}
5545
5546#ContentSelectDropdown > .isOpenedViaTouch > menucaption,
5547#ContentSelectDropdown > .isOpenedViaTouch > menuitem {
5548 padding-top: 11px;
5549 padding-bottom: 11px;
5550}
KaiRo's SeaMonkey themes