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