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