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