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