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