make reload button a bit nicer and cover the whole 16x16 frame
[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;
50
c9b0a396 51 --urlbar-separator-color: #9C9CFF;
e548e22e
RK
52}
53
319c6529
RK
54#menubar-items {
55 -moz-box-orient: vertical; /* for flex hack */
acb0e9b8 56}
57
319c6529
RK
58#main-menubar {
59 -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
60}
61
63ada306
RK
62/* ::::: primary toolbar ::::: */
63
64.toolbar-primary > .toolbar-box > .toolbar-holder {
270cbf0c 65 background-color: #A09090;
63ada306
RK
66}
67
68.toolbar-primary > .toolbar-box > .toolbar-startcap,
69.toolbar-primary > .toolbar-box > .toolbar-endcap {
70 background-color: #9C9CFF;
71}
72
e20c83c3
RK
73/* Hides the titlebar-placeholder underneath the window caption buttons when we
74 are not autohiding the menubar. */
75#toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
76 display: none;
77}
78
43cc2806
RK
79/* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
80 toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
81 of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
db1c5db1
RK
82#toolbar-menubar:not([autohide=true]) ~ #TabsToolbar:not([inFullscreen]),
83#toolbar-menubar[autohide=true]:not([inactive]) ~ #TabsToolbar:not([inFullscreen]) {
43cc2806
RK
84/* margin-top: 3px;*/
85}
86
43371c9b
RK
87#main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
88#main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
19988d2d 89/* margin-top: var(--space-above-tabbar);*/
43cc2806
RK
90}
91
ee49f520
RK
92@media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
93 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
4711fba5 94 #main-window[tabsintitlebar]:not([inFullscreen="true"]) #TabsToolbar {
54d92f05
RK
95 padding-left: 60px;
96 }
43cc2806
RK
97}
98
018d70fb
RK
99#main-window[tabsintitlebar] #toolbar-menubar .toolbar-endcap {
100 /* 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 */
101 display: none;
43cc2806 102}
63ada306 103
e20c83c3
RK
104#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before,
105#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before,
106#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before,
107#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before {
108 outline-color: #A09090;
109}
110
319c6529
RK
111#navigator-toolbox {
112}
113
9abeb12c
RK
114#navigator-toolbox::after {
115 content: "";
116 display: -moz-box;
117 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
118 height: 1px;
119}
9abeb12c 120
6f5a7408 121#navigator-toolbox > toolbar {
319c6529
RK
122}
123
3d64e0ce
RK
124#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
125}
126
9168a62c
RK
127#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
128 overflow: -moz-hidden-unscrollable;
129 max-height: 4em;
130 transition: min-height 170ms ease-out, max-height 170ms ease-out;
131}
132
133#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
134 min-height: 0.1px;
135 max-height: 0;
136 transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
137}
138
ee49f520
RK
139@media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
140 /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
141 /* Indent also due to non-applicable aero rule in original Windows theme. */
c0f6797e
RK
142 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
143 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
144 /* like menubar */
145 background-color: #6000CF;
146 color: #FF9F00;
319c6529
RK
147 }
148
c0f6797e
RK
149 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
150 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
151 background-color: #8050B0;
152 color: #FF9F00;
319c6529
RK
153 }
154
dccbbf95
RK
155 #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
156 /*color: inherit;*/
157 }
158
c0f6797e
RK
159 #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
160 visibility: hidden;
161 }
319c6529 162
c0f6797e
RK
163 #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
164 -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
165 visibility: visible;
166 }
8d154261
RK
167}
168
ee49f520
RK
169@media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
170 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
8d154261
RK
171 #titlebar-buttonbox > .titlebar-button {
172 display: none;
173 }
8d154261 174}
319c6529 175
c0f6797e
RK
176#nav-bar {
177 /* Position the toolbar above the bottom of background tabs */
178 position: relative;
179 z-index: 1;
82b4252f
RK
180}
181
c0f6797e
RK
182#personal-bookmarks {
183/* min-height: 24px; */
319c6529
RK
184}
185
bc685759
RK
186#PersonalToolbar > #home-button {
187 -moz-box-orient: horizontal;
188}
189
190#PersonalToolbar > #home-button > .toolbarbutton-text {
191 display: block;
192}
193
c0f6797e
RK
194#print-preview-toolbar:not(:-moz-lwtheme) {
195 /* -moz-appearance: toolbox; */
82b4252f
RK
196}
197
c0f6797e 198#browser-bottombox:not(:-moz-lwtheme) {
319c6529
RK
199}
200
201/* ::::: titlebar ::::: */
202
5305ef8d
RK
203#titlebar {
204 /* like menubar */
205 background-color: #6000CF;
206 color: #FF9F00;
207}
208#titlebar:-moz-window-inactive {
209 background-color: #8050B0;
210 color: #FF9F00;
211}
212
319c6529 213#main-window[sizemode="normal"] > #titlebar {
5305ef8d
RK
214 margin-top: -3px;
215 margin-bottom: 3px;
319c6529
RK
216}
217
218#main-window[sizemode="maximized"] > #titlebar {
5305ef8d 219 margin-top: 4px;
319c6529
RK
220}
221
ee49f520
RK
222@media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
223 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
58d9f24a
RK
224 #main-window[sizemode="normal"] > #titlebar,
225 #main-window[sizemode="maximized"] > #titlebar {
4711fba5
RK
226 margin-top: 19px;
227 /* There is a margin-bottom set to -23 by code. */
54d92f05
RK
228 }
229}
230
43cc2806
RK
231/* The button box must appear on top of the navigator-toolbox in order for
232 * click and hover mouse events to work properly for the button in the restored
233 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
234 * can swallow those events. It will also place the buttons above the fog on
235 * themes with Aero Glass.
236 */
83ac1f44
RK
237#titlebar-buttonbox,
238#main-window[sizemode="maximized"] #titlebar-buttonbox {
b7f3670c
RK
239 -moz-appearance: none;
240 margin-top: 6px;
241 margin-top: 4px;
dae45075 242 margin-inline-end: 3px;
43cc2806 243 z-index: 1;
319c6529
RK
244}
245
319c6529
RK
246.titlebar-placeholder[type="appmenu-button"] {
247 margin-left: 4px;
248}
249
250.titlebar-placeholder[type="caption-buttons"] {
251 margin-left: 10px;
252}
253
254/* titlebar command buttons */
319c6529 255#titlebar-min {
19988d2d 256 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize");
5305ef8d
RK
257}
258
259#titlebar-min:hover {
19988d2d 260 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize-hover");
319c6529
RK
261}
262
263#titlebar-max {
19988d2d 264 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize");
5305ef8d
RK
265}
266
267#titlebar-max:hover {
19988d2d 268 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize-hover");
319c6529
RK
269}
270
271#main-window[sizemode="maximized"] #titlebar-max {
19988d2d 272 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore");
5305ef8d
RK
273}
274
275#main-window[sizemode="maximized"] #titlebar-max:hover {
19988d2d 276 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore-hover");
319c6529
RK
277}
278
279#titlebar-close {
19988d2d 280 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close");
5305ef8d
RK
281}
282
283#titlebar-close:hover {
19988d2d 284 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-hover");
acb0e9b8 285}
286
ee49f520
RK
287@media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
288 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
54d92f05
RK
289 #titlebar-fullscreen-button {
290 -moz-appearance: none;
291 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon.png");
292 -moz-image-region: rect(0px, 16px, 16px, 0px);
293 }
294
295 #titlebar-fullscreen-button:hover {
296 -moz-image-region: rect(0px, 32px, 16px, 16px);
297 }
298
299 @media (min-resolution: 2dppx) {
300 #titlebar-fullscreen-button {
301 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon@2x.png");
302 -moz-image-region: rect(0px, 32px, 32px, 0px);
303 }
304
305 #titlebar-fullscreen-button:hover {
306 -moz-image-region: rect(0px, 64px, 32px, 32px);
307 }
308 }
309}
310
311
acb0e9b8 312/* ::::: bookmark buttons ::::: */
313
c0f6797e
RK
314toolbarbutton.bookmark-item:not(.subviewbutton),
315#personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
316/* margin: 0;
db1c5db1
RK
317 padding: 2px 3px;
318 -moz-appearance: none;
319 border: 1px solid transparent;*/
c0f6797e
RK
320}
321
db1c5db1
RK
322toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]) {
323/* border-color: var(--toolbarbutton-hover-bordercolor);
324 background: var(--toolbarbutton-hover-background);*/
325}
326
327toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),toolbarbutton.bookmark-item[open="true"] {
328/* border-color: var(--toolbarbutton-active-bordercolor);
329 box-shadow: var(--toolbarbutton-active-boxshadow);
330 background: var(--toolbarbutton-active-background);*/
c0f6797e
RK
331}
332
26125509
RK
333.bookmark-item > .toolbarbutton-icon,
334#personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
acb0e9b8 335 width: 16px;
336 height: 16px;
dae45075
RK
337 margin-inline-start: 1px;
338 margin-inline-end: 2px;
bc685759
RK
339 margin-top: 1px;
340 margin-bottom: 1px;
acb0e9b8 341}
342
26125509
RK
343/* Force the display of the label for bookmarks */
344.bookmark-item > .toolbarbutton-text,
345#personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
acb0e9b8 346 display: -moz-box !important;
347}
348
319c6529
RK
349.bookmark-item > .toolbarbutton-menu-dropmarker {
350 display: none;
351}
352
26125509 353#bookmarks-toolbar-placeholder {
8da9da4e 354 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
9e88a441 355 -moz-box-orient: horizontal;
319c6529
RK
356}
357
e20c83c3
RK
358toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
359#personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
360 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
361}
362
363/* ----- BOOKMARK STAR ANIMATION ----- */
364
365@keyframes animation-bookmarkAdded {
366 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
367 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
368 80% { opacity: 1; }
369 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
370}
371
372@keyframes animation-bookmarkPulse {
373 from { transform: scale(1); }
374 50% { transform: scale(1.3); }
375 to { transform: scale(1); }
376}
377
378#bookmarked-notification-container {
379 min-height: 1px;
380 min-width: 1px;
381 height: 1px;
382 margin-bottom: -1px;
383 z-index: 5;
384 position: relative;
385}
386
387#bookmarked-notification {
388 background-size: 16px;
389 background-position: center;
390 background-repeat: no-repeat;
391 width: 16px;
392 height: 16px;
393 opacity: 0;
394}
395
c0f6797e
RK
396#bookmarked-notification-dropmarker-anchor {
397 z-index: -1;
398 position: relative;
399}
400
401#bookmarked-notification-dropmarker-icon {
402 width: 18px;
403 height: 18px;
404 visibility: hidden;
405}
406
e20c83c3
RK
407#bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
408 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
409 animation: animation-bookmarkAdded 800ms;
410 animation-timing-function: ease, ease, ease;
411}
412
413#bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
c0f6797e
RK
414 list-style-image: none !important;
415}
416
417#bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
418 visibility: visible;
e20c83c3
RK
419 animation: animation-bookmarkPulse 300ms;
420 animation-delay: 600ms;
421 animation-timing-function: ease-out;
422}
423
319c6529
RK
424/* ::::: bookmark menus ::::: */
425
426menu.bookmark-item,
427menuitem.bookmark-item {
428 min-width: 0;
ab799a7a 429 max-width: 32em;
319c6529
RK
430}
431
e20c83c3 432.bookmark-item:not(.subviewbutton) > .menu-iconic-left {
319c6529
RK
433 margin-top: 0;
434 margin-bottom: 0;
435}
436
437.bookmark-item > .menu-iconic-left > .menu-iconic-icon {
dae45075 438 padding-inline-start: 0px;
319c6529
RK
439}
440
441/* ::::: bookmark items ::::: */
442
443.bookmark-item {
dce90fef 444 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
8da9da4e 445 -moz-image-region: auto;
319c6529
RK
446}
447
448.bookmark-item[container] {
449 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
8da9da4e 450 -moz-image-region: auto;
319c6529
RK
451}
452
453.bookmark-item[container][open] {
454 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
8da9da4e 455 -moz-image-region: auto;
319c6529
RK
456}
457
8da9da4e
RK
458.bookmark-item[container][livemark] {
459 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
319c6529
RK
460 -moz-image-region: auto;
461}
462
463.bookmark-item[container][livemark] .bookmark-item {
8da9da4e 464 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
719b06bc 465 -moz-image-region: rect(0px, 16px, 16px, 0px);
319c6529
RK
466}
467
eec397be 468.bookmark-item[container][livemark] .bookmark-item[visited] {
719b06bc 469 -moz-image-region: rect(0px, 32px, 16px, 16px);
eec397be
RK
470}
471
319c6529 472.bookmark-item[container][query] {
8da9da4e 473 list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
319c6529
RK
474 -moz-image-region: auto;
475}
476
477.bookmark-item[query][tagContainer] {
478 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
479 -moz-image-region: auto;
480}
481
482.bookmark-item[query][dayContainer] {
8da9da4e 483 list-style-image: url("chrome://communicator/skin/history/calendar.png");
319c6529
RK
484 -moz-image-region: auto;
485}
486
487.bookmark-item[query][hostContainer] {
488 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
8da9da4e 489 -moz-image-region: auto;
319c6529
RK
490}
491
492.bookmark-item[query][hostContainer][open] {
493 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
8da9da4e 494 -moz-image-region: auto;
319c6529
RK
495}
496
b1234db8
RK
497.bookmark-item[cutting] > .toolbarbutton-icon,
498.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
499 opacity: 0.5;
500}
501
502.bookmark-item[cutting] > .toolbarbutton-text,
503.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
504 opacity: 0.7;
505}
506
319c6529
RK
507/* ::::: primary toolbar buttons ::::: */
508
43cc2806
RK
509/* === BEGIN toolbarbuttons.inc.css === */
510
511/* Whole section of this included file: */
51994fad
RK
512:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
513 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
d4d77dc0 514 #social-share-button, #open-file-button, #find-button, #developer-button,
a5cb6e53 515 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
51994fad
RK
516 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
517 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
9ff3770c 518 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu),
7d3f7f14 519#bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
43cc2806
RK
520 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
521}
522
7d3f7f14 523#back-button {
43cc2806
RK
524 -moz-image-region: rect(0, 36px, 18px, 18px);
525}
526
7d3f7f14 527#back-button:hover:not([disabled="true"]) {
43cc2806
RK
528 -moz-image-region: rect(18px, 36px, 36px, 18px);
529}
530
7d3f7f14 531#back-button[disabled="true"] {
43cc2806
RK
532 -moz-image-region: rect(36px, 36px, 54px, 18px);
533}
534
7d3f7f14 535#forward-button {
43cc2806
RK
536 -moz-image-region: rect(0, 72px, 18px, 54px);
537}
538
7d3f7f14 539#forward-button:hover:not([disabled="true"]) {
43cc2806
RK
540 -moz-image-region: rect(18px, 72px, 36px, 54px);
541}
542
7d3f7f14 543#forward-button[disabled="true"] {
43cc2806
RK
544 -moz-image-region: rect(36px, 72px, 54px, 54px);
545}
546
7d3f7f14
RK
547#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
548#forward-button:-moz-locale-dir(rtl) {
43cc2806
RK
549 transform: scaleX(-1);
550}
551
7d3f7f14 552#home-button[cui-areatype="toolbar"] {
43cc2806
RK
553 -moz-image-region: rect(0, 126px, 18px, 108px);
554}
555
7d3f7f14 556#home-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
557 -moz-image-region: rect(18px, 126px, 36px, 108px);
558}
559
7d3f7f14 560#bookmarks-menu-button[cui-areatype="toolbar"] {
43cc2806
RK
561 -moz-image-region: rect(0, 144px, 18px, 126px);
562}
563
7d3f7f14
RK
564#bookmarks-menu-button[cui-areatype="toolbar"]:hover,
565#bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
43cc2806
RK
566 -moz-image-region: rect(18px, 144px, 36px, 126px);
567}
568
43ee1307 569/* When "new tab" page shows up, the menubutton-button (star button) is disabled */
7d3f7f14 570#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
43ee1307
RK
571 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
572 background-color: transparent !important;
573}
574
7d3f7f14 575#bookmarks-menu-button[cui-areatype="toolbar"][starred] {
43cc2806
RK
576 -moz-image-region: rect(0, 162px, 18px, 144px);
577}
578
7d3f7f14 579#bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
83e3b5cf
RK
580#bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
581#bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
582 /* When starred and clicked (for edit/delete dialog),
583 * then only the menubutton-button itself is open, but not the whole menubutton. */
43cc2806
RK
584 -moz-image-region: rect(18px, 162px, 36px, 144px);
585}
586
7d3f7f14 587#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
43cc2806
RK
588 -moz-image-region: rect(0, 630px, 18px, 612px);
589}
590
7d3f7f14 591#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
43cc2806
RK
592 padding: 1px;
593 -moz-box-align: center;
594}
595
7d3f7f14
RK
596#bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
597#bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
43cc2806
RK
598 -moz-image-region: rect(18px, 630px, 36px, 612px);
599}
600
7d3f7f14
RK
601#bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
602#bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
43cc2806
RK
603 padding-top: 2px;
604 padding-bottom: 0px;
dae45075
RK
605 padding-inline-start: 2px;
606 padding-inline-end: 0px;
43cc2806
RK
607}
608
7d3f7f14 609#history-panelmenu[cui-areatype="toolbar"] {
43cc2806
RK
610 -moz-image-region: rect(0, 180px, 18px, 162px);
611}
612
7d3f7f14
RK
613#history-panelmenu[cui-areatype="toolbar"]:hover,
614#history-panelmenu[cui-areatype="toolbar"][open="true"] {
43cc2806
RK
615 -moz-image-region: rect(18px, 180px, 36px, 162px);
616}
617
7d3f7f14 618#downloads-button[cui-areatype="toolbar"] {
43cc2806
RK
619 -moz-image-region: rect(0, 198px, 18px, 180px);
620}
621
7d3f7f14
RK
622#downloads-button[cui-areatype="toolbar"]:hover,
623#downloads-button[cui-areatype="toolbar"][open="true"] {
43cc2806
RK
624 -moz-image-region: rect(18px, 198px, 36px, 180px);
625}
626
7d3f7f14 627#add-ons-button[cui-areatype="toolbar"] {
43cc2806
RK
628 -moz-image-region: rect(0, 216px, 18px, 198px);
629}
630
7d3f7f14 631#add-ons-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
632 -moz-image-region: rect(18px, 216px, 36px, 198px);
633}
634
7d3f7f14 635#open-file-button[cui-areatype="toolbar"] {
43cc2806
RK
636 -moz-image-region: rect(0, 234px, 18px, 216px);
637}
638
7d3f7f14 639#open-file-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
640 -moz-image-region: rect(18px, 234px, 36px, 216px);
641}
642
7d3f7f14 643#save-page-button[cui-areatype="toolbar"] {
43cc2806
RK
644 -moz-image-region: rect(0, 252px, 18px, 234px);
645}
646
7d3f7f14 647#save-page-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
648 -moz-image-region: rect(18px, 252px, 36px, 234px);
649}
650
7d3f7f14 651#sync-button[cui-areatype="toolbar"] {
8ab9ca8a 652 -moz-image-region: rect(0, 792px, 18px, 774px);
43cc2806
RK
653}
654
7d3f7f14 655#sync-button[cui-areatype="toolbar"]:hover {
8ab9ca8a 656 -moz-image-region: rect(18px, 792px, 36px, 774px);
43cc2806
RK
657}
658
9ff3770c
RK
659#containers-panelmenu[cui-areatype="toolbar"] {
660 -moz-image-region: rect(0, 810px, 18px, 792px);
661}
662
663#containers-panelmenu[cui-areatype="toolbar"]:hover {
664 -moz-image-region: rect(18px, 810px, 36px, 792px);
665}
666
7d3f7f14 667#feed-button[cui-areatype="toolbar"] {
43cc2806
RK
668 -moz-image-region: rect(0, 288px, 18px, 270px);
669}
670
05148fed 671#feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
7d3f7f14 672#feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
43cc2806
RK
673 -moz-image-region: rect(18px, 288px, 36px, 270px);
674}
675
7d3f7f14 676#feed-button[cui-areatype="toolbar"][disabled="true"] {
cc4b0b0d
RK
677 -moz-image-region: rect(36px, 288px, 54px, 270px);
678}
679
7d3f7f14 680#social-share-button[cui-areatype="toolbar"] {
43cc2806
RK
681 -moz-image-region: rect(0px, 306px, 18px, 288px);
682}
683
22180555
RK
684#social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
685#social-share-button[cui-areatype="toolbar"][open="true"] {
43cc2806
RK
686 -moz-image-region: rect(18px, 306px, 36px, 288px);
687}
688
22180555
RK
689#social-share-button[cui-areatype="toolbar"][disabled="true"] {
690 -moz-image-region: rect(36px, 306px, 54px, 288px);
691}
692
7d3f7f14 693#characterencoding-button[cui-areatype="toolbar"] {
43cc2806
RK
694 -moz-image-region: rect(0, 324px, 18px, 306px);
695}
696
7d3f7f14
RK
697#characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
698#characterencoding-button[cui-areatype="toolbar"][open="true"] {
43cc2806
RK
699 -moz-image-region: rect(18px, 324px, 36px, 306px);
700}
701
7d3f7f14 702#characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
cc4b0b0d
RK
703 -moz-image-region: rect(36px, 324px, 54px, 306px);
704}
705
7d3f7f14 706#new-window-button[cui-areatype="toolbar"] {
43cc2806
RK
707 -moz-image-region: rect(0, 342px, 18px, 324px);
708}
709
7d3f7f14 710#new-window-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
711 -moz-image-region: rect(18px, 342px, 36px, 324px);
712}
713
46e71434
RK
714#e10s-button[cui-areatype="toolbar"] {
715 -moz-image-region: rect(0, 342px, 18px, 324px);
716}
717
718#e10s-button[cui-areatype="toolbar"]:hover {
719 -moz-image-region: rect(18px, 342px, 36px, 324px);
720}
721
722#e10s-button > .toolbarbutton-icon {
723 transform: scaleY(-1);
724}
725
7d3f7f14 726#new-tab-button[cui-areatype="toolbar"] {
43cc2806
RK
727 -moz-image-region: rect(0, 360px, 18px, 342px);
728}
729
7d3f7f14 730#new-tab-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
731 -moz-image-region: rect(18px, 360px, 36px, 342px);
732}
733
7d3f7f14 734#privatebrowsing-button[cui-areatype="toolbar"] {
43cc2806
RK
735 -moz-image-region: rect(0, 378px, 18px, 360px);
736}
737
7d3f7f14 738#privatebrowsing-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
739 -moz-image-region: rect(18px, 378px, 36px, 360px);
740}
741
7d3f7f14 742#find-button[cui-areatype="toolbar"] {
43cc2806
RK
743 -moz-image-region: rect(0, 396px, 18px, 378px);
744}
745
7d3f7f14 746#find-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
747 -moz-image-region: rect(18px, 396px, 36px, 378px);
748}
749
7d3f7f14 750#print-button[cui-areatype="toolbar"] {
43cc2806
RK
751 -moz-image-region: rect(0, 414px, 18px, 396px);
752}
753
7d3f7f14 754#print-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
755 -moz-image-region: rect(18px, 414px, 36px, 396px);
756}
757
7d3f7f14 758#fullscreen-button[cui-areatype="toolbar"] {
43cc2806
RK
759 -moz-image-region: rect(0, 432px, 18px, 414px);
760}
761
7d3f7f14 762#fullscreen-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
763 -moz-image-region: rect(18px, 432px, 36px, 414px);
764}
765
7d3f7f14 766#developer-button[cui-areatype="toolbar"] {
43cc2806
RK
767 -moz-image-region: rect(0, 450px, 18px, 432px);
768}
769
7d3f7f14
RK
770#developer-button[cui-areatype="toolbar"]:hover,
771#developer-button[cui-areatype="toolbar"][open="true"] {
43cc2806
RK
772 -moz-image-region: rect(18px, 450px, 36px, 432px);
773}
774
7d3f7f14 775#preferences-button[cui-areatype="toolbar"] {
43cc2806
RK
776 -moz-image-region: rect(0, 468px, 18px, 450px);
777}
778
7d3f7f14 779#preferences-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
780 -moz-image-region: rect(18px, 468px, 36px, 450px);
781}
782
7d3f7f14 783#PanelUI-menu-button {
43cc2806
RK
784 -moz-image-region: rect(0, 486px, 18px, 468px);
785}
786
7d3f7f14
RK
787#PanelUI-menu-button:hover,
788#PanelUI-menu-button[open="true"] {
43cc2806
RK
789 -moz-image-region: rect(18px, 486px, 36px, 468px);
790}
791
51994fad 792#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
43cc2806
RK
793 -moz-image-region: rect(0, 504px, 18px, 486px);
794}
795
51994fad 796#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
43cc2806
RK
797 -moz-image-region: rect(18px, 504px, 36px, 486px);
798}
799
51994fad 800#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
cc4b0b0d
RK
801 -moz-image-region: rect(36px, 504px, 54px, 486px);
802}
803
51994fad 804#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
43cc2806
RK
805 -moz-image-region: rect(0, 522px, 18px, 504px);
806}
807
51994fad 808#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
43cc2806
RK
809 -moz-image-region: rect(18px, 522px, 36px, 504px);
810}
811
51994fad 812#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
cc4b0b0d
RK
813 -moz-image-region: rect(36px, 522px, 54px, 504px);
814}
815
51994fad 816#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
43cc2806
RK
817 -moz-image-region: rect(0, 540px, 18px, 522px);
818}
819
51994fad 820#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
43cc2806
RK
821 -moz-image-region: rect(18px, 540px, 36px, 522px);
822}
823
51994fad 824#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
cc4b0b0d
RK
825 -moz-image-region: rect(36px, 540px, 54px, 522px);
826}
827
51994fad 828#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
43cc2806
RK
829 -moz-image-region: rect(0, 558px, 18px, 540px);
830}
831
51994fad 832#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
43cc2806
RK
833 -moz-image-region: rect(18px, 558px, 36px, 540px);
834}
835
51994fad 836#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
cc4b0b0d
RK
837 -moz-image-region: rect(36px, 558px, 54px, 540px);
838}
839
51994fad 840#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
43cc2806
RK
841 -moz-image-region: rect(0, 576px, 18px, 558px);
842}
843
51994fad 844#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
43cc2806
RK
845 -moz-image-region: rect(18px, 576px, 36px, 558px);
846}
847
51994fad 848#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
cc4b0b0d
RK
849 -moz-image-region: rect(36px, 576px, 54px, 558px);
850}
851
7d3f7f14 852#nav-bar-overflow-button {
43cc2806
RK
853 -moz-image-region: rect(0, 612px, 18px, 594px);
854}
855
7d3f7f14
RK
856#nav-bar-overflow-button:hover,
857#nav-bar-overflow-button[open="true"] {
43cc2806
RK
858 -moz-image-region: rect(18px, 612px, 36px, 594px);
859}
860
46e71434
RK
861#nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
862 transform: scaleX(-1);
863}
864
c0f6797e
RK
865#tabview-button {
866 -moz-image-region: rect(0, 648px, 18px, 630px);
867}
868
869#tabview-button:hover {
870 -moz-image-region: rect(18px, 648px, 36px, 630px);
871}
872
873#email-link-button[cui-areatype="toolbar"] {
874 -moz-image-region: rect(0, 666px, 18px, 648px);
875}
876
22180555 877#email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
c0f6797e
RK
878 -moz-image-region: rect(18px, 666px, 36px, 648px);
879}
880
22180555
RK
881#email-button[cui-areatype="toolbar"][disabled="true"] {
882 -moz-image-region: rect(36px, 666px, 54px, 648px);
883}
884
c0f6797e
RK
885#sidebar-button[cui-areatype="toolbar"] {
886 -moz-image-region: rect(0, 684px, 18px, 666px);
887}
888
889#sidebar-button[cui-areatype="toolbar"]:hover {
890 -moz-image-region: rect(18px, 684px, 36px, 666px);
891}
892
22180555
RK
893#panic-button[cui-areatype="toolbar"] {
894 -moz-image-region: rect(0, 702px, 18px, 684px);
895}
896
897#panic-button[cui-areatype="toolbar"]:hover,
898#panic-button[cui-areatype="toolbar"][open] {
899 -moz-image-region: rect(18px, 702px, 36px, 684px);
900}
901
902#panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
903 transform: scaleX(-1);
904}
905
e548e22e
RK
906#webide-button[cui-areatype="toolbar"] {
907 -moz-image-region: rect(0, 738px, 18px, 720px);
908}
909
910#webide-button[cui-areatype="toolbar"]:hover {
911 -moz-image-region: rect(18px, 738px, 36px, 720px);
912}
913
43cc2806
RK
914/* === END toolbarbuttons.inc.css === */
915
916/* === BEGIN menupanel.inc.css === */
917
918/* Menu panel and palette styles */
919
e548e22e
RK
920:root {
921 /* avoid aero overrides with changed filenames */
922 --menupanel-list-style-image: url(chrome://browser/skin/menuPanelFx.png);
923 --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanelFx-small.png);
924}
925
51994fad 926toolbaritem[sdkstylewidget="true"] > toolbarbutton,
5401f433
RK
927:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
928 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1988bb88 929 #social-share-button, #open-file-button, #find-button, #developer-button,
a5cb6e53 930 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
5401f433
RK
931 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
932 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
9ff3770c 933 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"],
5401f433
RK
934toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
935 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1988bb88 936 #social-share-button, #open-file-button, #find-button, #developer-button,
a5cb6e53 937 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
5401f433
RK
938 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
939 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
9ff3770c 940 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) {
e548e22e 941 list-style-image: var(--menupanel-list-style-image);
43cc2806
RK
942}
943
944#home-button[cui-areatype="menu-panel"],
7d3f7f14 945toolbarpaletteitem[place="palette"] > #home-button {
43cc2806
RK
946 -moz-image-region: rect(0px, 128px, 32px, 96px);
947}
948
cc4b0b0d 949#home-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 950toolbarpaletteitem[place="palette"] > #home-button:hover {
cc4b0b0d
RK
951 -moz-image-region: rect(32px, 128px, 64px, 96px);
952}
953
43cc2806 954#bookmarks-menu-button[cui-areatype="menu-panel"],
7d3f7f14 955toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
46e71434 956 -moz-image-region: rect(0px, 192px, 32px, 160px);
43cc2806
RK
957}
958
cc4b0b0d 959#bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 960toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
46e71434
RK
961 -moz-image-region: rect(32px, 192px, 64px, 160px);
962}
963
964#bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
965 -moz-image-region: rect(32px, 192px, 64px, 160px);
cc4b0b0d
RK
966}
967
43cc2806 968#history-panelmenu[cui-areatype="menu-panel"],
7d3f7f14 969toolbarpaletteitem[place="palette"] > #history-panelmenu {
43cc2806
RK
970 -moz-image-region: rect(0px, 224px, 32px, 192px);
971}
972
cc4b0b0d 973#history-panelmenu[cui-areatype="menu-panel"]:hover,
7d3f7f14 974toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
cc4b0b0d
RK
975 -moz-image-region: rect(32px, 224px, 64px, 192px);
976}
977
46e71434
RK
978#history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
979 -moz-image-region: rect(32px, 224px, 64px, 192px);
980}
981
43cc2806 982#downloads-button[cui-areatype="menu-panel"],
7d3f7f14 983toolbarpaletteitem[place="palette"] > #downloads-button {
43cc2806
RK
984 -moz-image-region: rect(0px, 256px, 32px, 224px);
985}
986
cc4b0b0d 987#downloads-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 988toolbarpaletteitem[place="palette"] > #downloads-button:hover {
cc4b0b0d
RK
989 -moz-image-region: rect(32px, 256px, 64px, 224px);
990}
991
43cc2806 992#add-ons-button[cui-areatype="menu-panel"],
7d3f7f14 993toolbarpaletteitem[place="palette"] > #add-ons-button {
43cc2806
RK
994 -moz-image-region: rect(0px, 288px, 32px, 256px);
995}
996
cc4b0b0d 997#add-ons-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 998toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
cc4b0b0d
RK
999 -moz-image-region: rect(32px, 288px, 64px, 256px);
1000}
1001
43cc2806 1002#open-file-button[cui-areatype="menu-panel"],
7d3f7f14 1003toolbarpaletteitem[place="palette"] > #open-file-button {
43cc2806
RK
1004 -moz-image-region: rect(0px, 320px, 32px, 288px);
1005}
1006
cc4b0b0d 1007#open-file-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1008toolbarpaletteitem[place="palette"] > #open-file-button:hover {
cc4b0b0d
RK
1009 -moz-image-region: rect(32px, 320px, 64px, 288px);
1010}
1011
43cc2806 1012#save-page-button[cui-areatype="menu-panel"],
7d3f7f14 1013toolbarpaletteitem[place="palette"] > #save-page-button {
43cc2806
RK
1014 -moz-image-region: rect(0px, 352px, 32px, 320px);
1015}
1016
cc4b0b0d 1017#save-page-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1018toolbarpaletteitem[place="palette"] > #save-page-button:hover {
cc4b0b0d
RK
1019 -moz-image-region: rect(32px, 352px, 64px, 320px);
1020}
1021
43cc2806 1022#sync-button[cui-areatype="menu-panel"],
7d3f7f14 1023toolbarpaletteitem[place="palette"] > #sync-button {
7327c957 1024 -moz-image-region: rect(0px, 1024px, 32px, 992px);
43cc2806
RK
1025}
1026
cc4b0b0d 1027#sync-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1028toolbarpaletteitem[place="palette"] > #sync-button:hover {
7327c957 1029 -moz-image-region: rect(32px, 1024px, 64px, 992px);
5401f433
RK
1030}
1031
9ff3770c
RK
1032#containers-panelmenu[cui-areatype="menu-panel"],
1033toolbarpaletteitem[place="palette"] > #containers-panelmenu {
1034 -moz-image-region: rect(0px, 1056px, 32px, 1024px);
1035}
1036
1037#containers-panelmenu[cui-areatype="menu-panel"]:hover,
1038toolbarpaletteitem[place="palette"] > #containers-panelmenu:hover,
1039#containers-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1040 -moz-image-region: rect(32px, 1056px, 64px, 1024px);
1041}
1042
43cc2806 1043#feed-button[cui-areatype="menu-panel"],
7d3f7f14 1044toolbarpaletteitem[place="palette"] > #feed-button {
43cc2806
RK
1045 -moz-image-region: rect(0px, 416px, 32px, 384px);
1046}
1047
cc4b0b0d 1048#feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
7d3f7f14 1049toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
cc4b0b0d
RK
1050 -moz-image-region: rect(32px, 416px, 64px, 384px);
1051}
1052
1053#feed-button[cui-areatype="menu-panel"][disabled="true"],
7d3f7f14 1054toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
cc4b0b0d
RK
1055 -moz-image-region: rect(64px, 416px, 96px, 384px);
1056}
1057
43cc2806 1058#social-share-button[cui-areatype="menu-panel"],
7d3f7f14 1059toolbarpaletteitem[place="palette"] > #social-share-button {
43cc2806
RK
1060 -moz-image-region: rect(0px, 448px, 32px, 416px);
1061}
1062
22180555
RK
1063#social-share-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1064toolbarpaletteitem[place="palette"] > #social-share-button:hover:not([disabled="true"]) {
cc4b0b0d
RK
1065 -moz-image-region: rect(32px, 448px, 64px, 416px);
1066}
1067
22180555
RK
1068#social-share-button[cui-areatype="menu-panel"][disabled="true"],
1069toolbarpaletteitem[place="palette"] > #social-share-button[disabled="true"] {
1070 -moz-image-region: rect(64px, 448px, 96px, 416px);
1071}
1072
43cc2806 1073#characterencoding-button[cui-areatype="menu-panel"],
7d3f7f14 1074toolbarpaletteitem[place="palette"] > #characterencoding-button {
43cc2806
RK
1075 -moz-image-region: rect(0px, 480px, 32px, 448px);
1076}
1077
cc4b0b0d 1078#characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
7d3f7f14 1079toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
cc4b0b0d
RK
1080 -moz-image-region: rect(32px, 480px, 64px, 448px);
1081}
1082
1083#characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
7d3f7f14 1084toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
cc4b0b0d
RK
1085 -moz-image-region: rect(64px, 480px, 96px, 448px);
1086}
1087
46e71434
RK
1088#characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1089 -moz-image-region: rect(32px, 480px, 64px, 448px);
1090}
1091
43cc2806 1092#new-window-button[cui-areatype="menu-panel"],
7d3f7f14 1093toolbarpaletteitem[place="palette"] > #new-window-button {
43cc2806
RK
1094 -moz-image-region: rect(0px, 512px, 32px, 480px);
1095}
1096
cc4b0b0d 1097#new-window-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1098toolbarpaletteitem[place="palette"] > #new-window-button:hover {
cc4b0b0d
RK
1099 -moz-image-region: rect(32px, 512px, 64px, 480px);
1100}
1101
5401f433
RK
1102#e10s-button[cui-areatype="menu-panel"],
1103toolbarpaletteitem[place="palette"] > #e10s-button {
1104 -moz-image-region: rect(0px, 512px, 32px, 480px);
1105}
1106
1107#e10s-button[cui-areatype="menu-panel"]:hover,
1108toolbarpaletteitem[place="palette"] > #e10s-button:hover {
1109 -moz-image-region: rect(32px, 512px, 64px, 480px);
1110}
1111
43cc2806 1112#new-tab-button[cui-areatype="menu-panel"],
7d3f7f14 1113toolbarpaletteitem[place="palette"] > #new-tab-button {
43cc2806
RK
1114 -moz-image-region: rect(0px, 544px, 32px, 512px);
1115}
1116
cc4b0b0d 1117#new-tab-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1118toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
cc4b0b0d
RK
1119 -moz-image-region: rect(32px, 544px, 64px, 512px);
1120}
1121
43cc2806 1122#privatebrowsing-button[cui-areatype="menu-panel"],
7d3f7f14 1123toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
43cc2806
RK
1124 -moz-image-region: rect(0px, 576px, 32px, 544px);
1125}
1126
cc4b0b0d 1127#privatebrowsing-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1128toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
cc4b0b0d
RK
1129 -moz-image-region: rect(32px, 576px, 64px, 544px);
1130}
1131
46e71434
RK
1132#tabview-button[cui-areatype="menu-panel"],
1133toolbarpaletteitem[place="palette"] > #tabview-button {
1134 -moz-image-region: rect(0px, 608px, 32px, 576px);
1135}
1136
1137#tabview-button[cui-areatype="menu-panel"]:hover,
1138toolbarpaletteitem[place="palette"] > #tabview-button:hover {
1139 -moz-image-region: rect(32px, 608px, 64px, 576px);
1140}
1141
43cc2806 1142#find-button[cui-areatype="menu-panel"],
7d3f7f14 1143toolbarpaletteitem[place="palette"] > #find-button {
43cc2806
RK
1144 -moz-image-region: rect(0px, 640px, 32px, 608px);
1145}
1146
cc4b0b0d 1147#find-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1148toolbarpaletteitem[place="palette"] > #find-button:hover {
cc4b0b0d
RK
1149 -moz-image-region: rect(32px, 640px, 64px, 608px);
1150}
1151
43cc2806 1152#print-button[cui-areatype="menu-panel"],
7d3f7f14 1153toolbarpaletteitem[place="palette"] > #print-button {
43cc2806
RK
1154 -moz-image-region: rect(0px, 672px, 32px, 640px);
1155}
1156
cc4b0b0d 1157#print-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1158toolbarpaletteitem[place="palette"] > #print-button:hover {
cc4b0b0d
RK
1159 -moz-image-region: rect(32px, 672px, 64px, 640px);
1160}
1161
43cc2806 1162#fullscreen-button[cui-areatype="menu-panel"],
7d3f7f14 1163toolbarpaletteitem[place="palette"] > #fullscreen-button {
43cc2806
RK
1164 -moz-image-region: rect(0px, 704px, 32px, 672px);
1165}
1166
cc4b0b0d 1167#fullscreen-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1168toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
cc4b0b0d
RK
1169 -moz-image-region: rect(32px, 704px, 64px, 672px);
1170}
1171
43cc2806 1172#developer-button[cui-areatype="menu-panel"],
7d3f7f14 1173toolbarpaletteitem[place="palette"] > #developer-button {
43cc2806
RK
1174 -moz-image-region: rect(0px, 736px, 32px, 704px);
1175}
1176
cc4b0b0d 1177#developer-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1178toolbarpaletteitem[place="palette"] > #developer-button:hover {
cc4b0b0d
RK
1179 -moz-image-region: rect(32px, 736px, 64px, 704px);
1180}
1181
46e71434
RK
1182#developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1183 -moz-image-region: rect(32px, 736px, 64px, 704px);
1184}
1185
43cc2806 1186#preferences-button[cui-areatype="menu-panel"],
7d3f7f14 1187toolbarpaletteitem[place="palette"] > #preferences-button {
43cc2806
RK
1188 -moz-image-region: rect(0px, 768px, 32px, 736px);
1189}
1190
cc4b0b0d 1191#preferences-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1192toolbarpaletteitem[place="palette"] > #preferences-button:hover {
cc4b0b0d
RK
1193 -moz-image-region: rect(32px, 768px, 64px, 736px);
1194}
1195
46e71434
RK
1196#email-link-button[cui-areatype="menu-panel"],
1197toolbarpaletteitem[place="palette"] > #email-link-button {
1198 -moz-image-region: rect(0, 800px, 32px, 768px);
1199}
1200
22180555
RK
1201#email-link-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1202toolbarpaletteitem[place="palette"] > #email-link-button:hover:not([disabled="true"]) {
46e71434
RK
1203 -moz-image-region: rect(32px, 800px, 64px, 768px);
1204}
1205
22180555
RK
1206#email-link-button[cui-areatype="menu-panel"][disabled="true"],
1207toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1208 -moz-image-region: rect(64px, 800px, 96px, 768px);
1209}
1210
46e71434
RK
1211#sidebar-button[cui-areatype="menu-panel"],
1212toolbarpaletteitem[place="palette"] > #sidebar-button {
1213 -moz-image-region: rect(0, 864px, 32px, 832px);
1214}
1215
1216#sidebar-button[cui-areatype="menu-panel"]:hover,
22180555
RK
1217toolbarpaletteitem[place="palette"] > #sidebar-button:hover,
1218#sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
46e71434
RK
1219 -moz-image-region: rect(32px, 864px, 64px, 832px);
1220}
1221
22180555
RK
1222#panic-button[cui-areatype="menu-panel"],
1223toolbarpaletteitem[place="palette"] > #panic-button {
1224 -moz-image-region: rect(0, 896px, 32px, 864px);
1225}
1226
1227#panic-button[cui-areatype="menu-panel"]:hover,
1228toolbarpaletteitem[place="palette"] > #panic-button:hover,
1229#panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1230 -moz-image-region: rect(32px, 896px, 64px, 864px);
1231}
1232
e548e22e
RK
1233#webide-button[cui-areatype="menu-panel"],
1234toolbarpaletteitem[place="palette"] > #webide-button {
1235 -moz-image-region: rect(0px, 960px, 32px, 928px);
1236}
1237
1238#webide-button[cui-areatype="menu-panel"]:hover,
1239toolbarpaletteitem[place="palette"] > #webide-button:hover {
1240 -moz-image-region: rect(32px, 960px, 64px, 928px);
1241}
1242
46e71434
RK
1243toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1244 -moz-image-region: rect(0, 832px, 32px, 800px);
1245}
1246
43cc2806
RK
1247/* Wide panel control icons */
1248
51994fad
RK
1249#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1250#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
7d3f7f14
RK
1251toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1252toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
e548e22e 1253 list-style-image: var(--menupanel-small-list-style-image);
43cc2806
RK
1254}
1255
51994fad 1256#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
7d3f7f14 1257toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
43cc2806
RK
1258 -moz-image-region: rect(0px, 32px, 16px, 16px);
1259}
1260
51994fad 1261#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:hover:not([disabled="true"]),
7d3f7f14 1262toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
cc4b0b0d
RK
1263 -moz-image-region: rect(16px, 32px, 32px, 16px);
1264}
1265
51994fad 1266#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button[disabled="true"],
7d3f7f14 1267toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
cc4b0b0d
RK
1268 -moz-image-region: rect(32px, 32px, 48px, 16px);
1269}
1270
51994fad 1271#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
7d3f7f14 1272toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
43cc2806
RK
1273 -moz-image-region: rect(0px, 48px, 16px, 32px);
1274}
1275
51994fad 1276#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button:hover:not([disabled="true"]),
7d3f7f14 1277toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
cc4b0b0d
RK
1278 -moz-image-region: rect(16px, 48px, 32px, 32px);
1279}
1280
51994fad 1281#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button[disabled="true"],
7d3f7f14 1282toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
cc4b0b0d
RK
1283 -moz-image-region: rect(32px, 48px, 48px, 32px);
1284}
1285
51994fad 1286#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
7d3f7f14 1287toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
43cc2806
RK
1288 -moz-image-region: rect(0px, 64px, 16px, 48px);
1289}
1290
51994fad 1291#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:hover:not([disabled="true"]),
7d3f7f14 1292toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
cc4b0b0d
RK
1293 -moz-image-region: rect(16px, 64px, 32px, 48px);
1294}
1295
51994fad 1296#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button[disabled="true"],
7d3f7f14 1297toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
cc4b0b0d
RK
1298 -moz-image-region: rect(32px, 64px, 48px, 48px);
1299}
1300
51994fad 1301#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
7d3f7f14 1302toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
43cc2806
RK
1303 -moz-image-region: rect(0px, 80px, 16px, 64px);
1304}
1305
51994fad 1306#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:hover:not([disabled="true"]),
7d3f7f14 1307toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
cc4b0b0d
RK
1308 -moz-image-region: rect(16px, 80px, 32px, 64px);
1309}
1310
51994fad 1311#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button[disabled="true"],
7d3f7f14 1312toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
cc4b0b0d
RK
1313 -moz-image-region: rect(32px, 80px, 48px, 64px);
1314}
1315
51994fad 1316#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
7d3f7f14 1317toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
43cc2806
RK
1318 -moz-image-region: rect(0px, 96px, 16px, 80px);
1319}
1320
51994fad 1321#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:hover:not([disabled="true"]),
7d3f7f14 1322toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
cc4b0b0d
RK
1323 -moz-image-region: rect(16px, 96px, 32px, 80px);
1324}
1325
51994fad 1326#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button[disabled="true"],
7d3f7f14 1327toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
cc4b0b0d
RK
1328 -moz-image-region: rect(32px, 96px, 48px, 80px);
1329}
1330
e548e22e
RK
1331#add-share-provider {
1332 list-style-image: var(--menupanel-small-list-style-image);
1333 -moz-image-region: rect(0px, 96px, 16px, 80px);
1334}
1335
43cc2806
RK
1336/* === END menupanel.inc.css === */
1337
63ada306
RK
1338.toolbarbutton-1:not([type="menu-button"]) {
1339 -moz-box-orient: vertical;
1340}
1341
319c6529
RK
1342.toolbarbutton-1,
1343.toolbarbutton-1 > .toolbarbutton-menubutton-button {
c0f6797e
RK
1344/* min-width: 36px;
1345 min-height: 36px;*/
319c6529
RK
1346}
1347
1348.toolbarbutton-1,
1349.toolbarbutton-1 > .toolbarbutton-menubutton-button,
1350.toolbarbutton-1[disabled="true"]:hover:active,
1351.toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1352 padding: 1px 2px;
1353}
1354
1355.toolbarbutton-1:hover:active,
1356.toolbarbutton-1[open="true"],
1357.toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1358 padding-top: 2px;
1359 padding-bottom: 0px;
dae45075
RK
1360 padding-inline-start: 3px;
1361 padding-inline-end: 1px;
319c6529
RK
1362}
1363
c0f6797e
RK
1364#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1365#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1366#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1367#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1368#main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
e20c83c3
RK
1369}
1370
c0f6797e
RK
1371.toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1372.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
e20c83c3
RK
1373}
1374
c0f6797e
RK
1375toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1376toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
319c6529
RK
1377}
1378
c0f6797e
RK
1379.toolbarbutton-1 > .toolbarbutton-icon,
1380.toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
319c6529
RK
1381}
1382
20752032 1383.findbar-button,
c0f6797e
RK
1384#nav-bar .toolbarbutton-1,
1385#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
319c6529
RK
1386}
1387
c0f6797e
RK
1388#nav-bar .toolbarbutton-1:not([type=menu-button]),
1389#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1390#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
319c6529
RK
1391}
1392
c0f6797e 1393#nav-bar #PanelUI-menu-button {
dae45075
RK
1394/* padding-inline-start: 7px;
1395 padding-inline-end: 5px;*/
319c6529
RK
1396}
1397
b1dfcf32 1398#nav-bar .toolbarbutton-1[type=panel],
8c5bee4f 1399#nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
c0f6797e
RK
1400/* padding-left: 5px;
1401 padding-right: 5px;*/
319c6529
RK
1402}
1403
c0f6797e
RK
1404#nav-bar .toolbarbutton-1 > menupopup {
1405/* margin-top: -3px;*/
319c6529
RK
1406}
1407
c0f6797e 1408#nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
c1d2ce3e 1409 margin-top: -4px;
319c6529
RK
1410}
1411
c0f6797e 1412#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
dae45075 1413/* padding-inline-end: 0;*/
319c6529
RK
1414}
1415
c0f6797e 1416#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
dae45075 1417/* padding-inline-start: 0;
c0f6797e 1418 -moz-box-align: center;*/
319c6529
RK
1419}
1420
20752032 1421.findbar-button > .toolbarbutton-text,
c0f6797e
RK
1422#nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1423#nav-bar .toolbarbutton-1 > .toolbarbutton-text,
19988d2d 1424#nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
c0f6797e
RK
1425#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1426#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
2c62526c 1427window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
c0f6797e
RK
1428/* padding: 2px 6px;
1429 border: 1px solid;
1430 border-color: transparent;
1431 transition-property: background-color, border-color;
1432 transition-duration: 150ms;*/
d54f5b23 1433}
c0f6797e 1434/*
db1c5db1
RK
1435#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-icon,
1436#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-badge-stack,
1437#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1438 padding: calc(var(--toolbarbutton-vertical-inner-padding) + 1px) 7px;
d54f5b23 1439}
c0f6797e 1440*/
d54f5b23 1441
c0f6797e 1442/* Help SDK icons fit: */
a5cb6e53 1443toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
19988d2d 1444toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
c0f6797e 1445 width: 16px;
26125509
RK
1446}
1447
a5cb6e53 1448#nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
c0f6797e
RK
1449 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1450 width: 32px;
26125509 1451}
26125509 1452
b1dfcf32
RK
1453#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1454#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
1455#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon,
1456#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
c0f6797e 1457#nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
dae45075 1458/* padding-inline-end: 17px;*/
319c6529
RK
1459}
1460
fa703ff4
RK
1461#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1462#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon {
1463 /* horizontal padding + border + icon width */
1464/* max-width: 43px;*/
1465}
1466
c0f6797e 1467#nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
319c6529
RK
1468}
1469
c0f6797e 1470#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
319c6529
RK
1471}
1472
c0f6797e 1473#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
38cfeb47
RK
1474}
1475
c0f6797e
RK
1476#nav-bar .toolbaritem-combined-buttons {
1477/* margin-left: 2px;
1478 margin-right: 2px;*/
38cfeb47
RK
1479}
1480
c0f6797e
RK
1481#nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1482/* padding-left: 0;
1483 padding-right: 0;*/
319c6529
RK
1484}
1485
c0f6797e
RK
1486#nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1487#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 {
1488/*
1489 content: "";
1490 display: -moz-box;
1491 width: 1px;
1492 height: 16px;
dae45075 1493 margin-inline-end: -1px;
c0f6797e 1494*/
319c6529
RK
1495}
1496
2c62526c 1497window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
319c6529
RK
1498}
1499
20752032 1500.findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
43371c9b 1501#nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
c0f6797e
RK
1502#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1503#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1504#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1505#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
19988d2d 1506#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
2c62526c 1507window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
46e71434 1508#nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
319c6529
RK
1509}
1510
20752032 1511.findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
43371c9b 1512#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
c0f6797e
RK
1513#nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1514#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1515#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
19988d2d 1516#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
319c6529
RK
1517}
1518
c0f6797e
RK
1519#TabsToolbar .toolbarbutton-1,
1520#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1521.tabbrowser-arrowscrollbox > .scrollbutton-up,
1522.tabbrowser-arrowscrollbox > .scrollbutton-down {
e8519ae0
RK
1523}
1524
c0f6797e
RK
1525#TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1526#TabsToolbar .toolbarbutton-1[open],
1527#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1528.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1529.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
e8519ae0
RK
1530}
1531
c0f6797e 1532/* unified back/forward button */
319c6529 1533
c0f6797e 1534#forward-button {
589b5528 1535 -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
71bac478
RK
1536}
1537
c0f6797e
RK
1538#forward-button > menupopup {
1539 margin-top: 1px !important;
319c6529
RK
1540}
1541
c0f6797e
RK
1542#forward-button > .toolbarbutton-icon {
1543 background-clip: padding-box !important;
1544 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
5401f433 1545 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
71bac478
RK
1546}
1547
c0f6797e 1548#forward-button {
dae45075 1549 margin-inline-start: -4px !important;
9d1e25fa
RK
1550 padding-left: 5px;
1551 padding-right: 5px;
c0f6797e
RK
1552 margin-top: 3px;
1553 margin-bottom: 3px;
1554 border-radius: 0 10000px 10000px 0;
7327c957 1555/* max-width: calc(var(--forwardbutton-width) + var(--backbutton-urlbar-overlap)) !important; */
319c6529
RK
1556}
1557
c0f6797e
RK
1558#forward-button:-moz-locale-dir(rtl) {
1559 border-radius: 10000px 0 0 10000px;
8ad8bf83
RK
1560}
1561
2c62526c 1562window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
aec5dfad 1563 transition: margin-left 150ms ease-out;
2c62526c
RK
1564}
1565
1566window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
7327c957 1567 margin-left: calc(0px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
2c62526c
RK
1568}
1569
1570window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1571 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1572 transition-delay: 100s;
1573}
1574
1575window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1576 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
7327c957 1577 margin-left: calc(-0.01px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
2c62526c
RK
1578}
1579
c0f6797e
RK
1580#back-button {
1581/* padding-top: 3px !important;
1582 padding-bottom: 3px !important;
dae45075
RK
1583 padding-inline-start: 5px !important;
1584 padding-inline-end: 0 !important;*/
c0f6797e
RK
1585 position: relative;
1586 z-index: 1;
1587 border-radius: 10000px;
1588 width: 30px;
1589 height: 30px;
1590 margin-top: -2px;
1591 margin-bottom: -2px;
143c5409
RK
1592}
1593
c0f6797e 1594#back-button:-moz-locale-dir(rtl) {
319c6529
RK
1595}
1596
c0f6797e
RK
1597#back-button > menupopup {
1598 margin-top: -1px !important;
b36fc72e
RK
1599}
1600
c0f6797e
RK
1601#back-button > .toolbarbutton-icon {
1602 border-radius: 10000px !important;
1603 background-clip: padding-box !important;
1604/* background-color: hsla(210,25%,98%,.08) !important;
1605 padding: 6px !important;
589b5528
RK
1606 border-style: none !important;
1607 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1608 0 0 0 1px hsla(210,4%,10%,.25);*/
1609 transition-property: background-color, box-shadow !important;
c0f6797e 1610 transition-duration: 250ms !important;
143c5409
RK
1611}
1612
c0f6797e 1613#back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
589b5528 1614/* background-color: hsla(210,4%,10%,.08) !important;*/
143c5409
RK
1615}
1616
c0f6797e
RK
1617#back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1618#back-button[open="true"] > .toolbarbutton-icon {
1619/* background-color: hsla(210,4%,10%,.12) !important;
589b5528
RK
1620 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1621 0 0 0 1px hsla(210,4%,10%,.25),
1622 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
143c5409
RK
1623}
1624
2c62526c 1625#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
c0f6797e 1626 transform: scaleX(-1);
143c5409 1627}
c0f6797e
RK
1628/*
1629.unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1630.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1631 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
6adbc9a6
RK
1632}
1633
c0f6797e
RK
1634.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1635.unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1636 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
6adbc9a6
RK
1637}
1638
c0f6797e
RK
1639#home-button.bookmark-item {
1640 list-style-image: url("chrome://browser/skin/Toolbar.png");
6adbc9a6
RK
1641}
1642
c0f6797e
RK
1643#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),
1644#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),
1645#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1646#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1647#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1648#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1649#home-button.bookmark-item:-moz-lwtheme-brighttext {
1650 position: relative;
1651 z-index: 1;
1652 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
6adbc9a6
RK
1653}
1654
c0f6797e
RK
1655#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1656#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1657 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
6adbc9a6 1658}
c0f6797e 1659*/
6adbc9a6 1660
c0f6797e
RK
1661#downloads-button > .toolbarbutton-icon {
1662 margin: 0;
6adbc9a6
RK
1663}
1664
9168a62c 1665/* tabview menu item */
c0f6797e 1666
6adbc9a6 1667#menu_tabview {
832af407 1668 list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
6adbc9a6
RK
1669 -moz-image-region: rect(1px, 89px, 17px, 73px);
1670}
1671
1672#menu_tabview[groups="0"] {
1673 -moz-image-region: rect(1px, 17px, 17px, 1px);
1674}
1675
1676#menu_tabview[groups="1"] {
1677 -moz-image-region: rect(1px, 35px, 17px, 19px);
1678}
1679
1680#menu_tabview[groups="2"] {
1681 -moz-image-region: rect(1px, 53px, 17px, 37px);
1682}
1683
1684#menu_tabview[groups="3"] {
1685 -moz-image-region: rect(1px, 71px, 17px, 55px);
1686}
1687
9168a62c
RK
1688/* undo close tab menu item */
1689#alltabs_undoCloseTab {
1690 list-style-image: url(chrome://browser/skin/undoCloseTab.png);
1691}
1692
2e389898 1693@media (min-resolution: 1.1dppx) {
9168a62c
RK
1694 #alltabs_undoCloseTab {
1695 list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png);
1696 }
1697 #alltabs_undoCloseTab > .toolbarbutton-icon {
1698 width: 16px;
1699 }
1700}
1701
5401f433
RK
1702/* zoom control text (reset) button special case: */
1703
1704#nav-bar #zoom-reset-button > .toolbarbutton-text {
1705 /* To make this line up with the icons, it needs the same height (18px) +
1706 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1707 * increase in text sizes would break things...
1708 */
1709 min-height: 20px;
1710}
1711
319c6529
RK
1712/* ::::: fullscreen window controls ::::: */
1713
1714#minimize-button,
1715#restore-button,
1716#close-button {
db1c5db1
RK
1717 -moz-appearance: none;
1718 border: none;
1719/* margin: 0 !important;
1720 padding: 6px 12px;*/
319c6529
RK
1721}
1722
1723#minimize-button {
db1c5db1 1724 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
319c6529
RK
1725}
1726
1727#minimize-button:hover {
db1c5db1 1728 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-hover);
319c6529
RK
1729}
1730
1731#restore-button {
db1c5db1
RK
1732 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
1733}
1734
1735#restore-button:hover {
1736 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-hover);
319c6529
RK
1737}
1738
db1c5db1 1739#minimize-button:hover,
319c6529 1740#restore-button:hover {
db1c5db1
RK
1741/* background-color: hsla(0, 0%, 0%, .12);*/
1742}
1743
1744#minimize-button:hover:active,
1745#restore-button:hover:active {
1746/* background-color: hsla(0, 0%, 0%, .22);*/
319c6529
RK
1747}
1748
1749#close-button {
db1c5db1 1750 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
319c6529
RK
1751}
1752
1753#close-button:hover {
db1c5db1
RK
1754/* background-color: hsl(355, 86%, 49%);*/
1755 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-hover);
1756}
1757
1758#close-button:hover:active {
1759/* background-color: hsl(355, 82%, 69%);*/
319c6529
RK
1760}
1761
1762/* ::::: Location Bar ::::: */
1763
319c6529
RK
1764#urlbar,
1765.searchbar-textbox {
1766 border-radius: 5px;
aec5dfad 1767 margin: 2px 0;
dae45075 1768 margin-inline-start: 3px;
319c6529
RK
1769}
1770
ffce2402 1771#urlbar {
f0071a71
RK
1772 /* make color as light as possible to deal with dark non-domain parts */
1773 color: #FFBFFF;
ffce2402
RK
1774}
1775
319c6529
RK
1776#urlbar:-moz-lwtheme,
1777.searchbar-textbox:-moz-lwtheme {
1778 /* background-color: rgba(255,255,255,.8);
1779 @navbarTextboxCustomBorder@
1780 color: black; */
1781}
1782
c0f6797e
RK
1783#urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1784.searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1785/* background-color: rgba(255,255,255,.9);*/
1786}
1787
1788#urlbar:-moz-lwtheme[focused]:not([readonly]),
1789.searchbar-textbox:-moz-lwtheme[focused] {
1790/* background-color: white;*/
1791}
1792
2c62526c 1793window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
dae45075 1794/* border-inline-start: none;
2299146f 1795 margin-left: 0;*/
2c62526c
RK
1796}
1797
1798window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1799/* border-top-left-radius: 0;
1800 border-bottom-left-radius: 0; */
1801}
1802
1803window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1804/* border-top-right-radius: 0;
1805 border-bottom-right-radius: 0; */
1806}
1807
1808window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1809/* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
b1dfcf32 1810/* margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
2c62526c
RK
1811}
1812
fff8097b
RK
1813window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1814window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
2c62526c 1815 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
71a617ff 1816 transform: scaleX(-1);
8ad8bf83
RK
1817}
1818
2c62526c
RK
1819window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1820 -moz-box-direction: reverse;
1821}
1822
689d5552
RK
1823html|*.urlbar-input:-moz-lwtheme::placeholder,
1824.searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::placeholder {
319c6529
RK
1825 color: #E7ADE7;
1826}
1827
319c6529
RK
1828#urlbar-container {
1829 -moz-box-orient: horizontal;
1830 -moz-box-align: stretch;
1831}
1832
9abeb12c
RK
1833.urlbar-textbox-container {
1834 -moz-box-align: stretch;
1835}
1836
a40f6a79 1837.urlbar-input-box {
dae45075 1838 margin-inline-start: 0;
a40f6a79
RK
1839}
1840
db1c5db1 1841.urlbar-input-box,
db1c5db1
RK
1842#urlbar-display-box {
1843 padding-inline-start: 4px;
c877146a 1844/* border-inline-start: 1px solid var(--urlbar-separator-color);
db1c5db1
RK
1845 border-inline-end: 1px solid var(--urlbar-separator-color);
1846 border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
c877146a 1847 border-image-slice: 1; */
db1c5db1
RK
1848}
1849
319c6529 1850#urlbar-icons {
319c6529
RK
1851 -moz-box-align: center;
1852}
1853
1854.urlbar-icon {
b8384c33 1855 padding: 0 2px;
fa703ff4
RK
1856 /* 16x16 icon with border-box sizing */
1857 width: 20px;
1858 height: 16px;
ffce2402
RK
1859}
1860
ffce2402 1861.search-go-container {
4b686546
RK
1862 padding: 2px;
1863}
1864
1865.search-go-container > .search-go-button {
1866 padding: 0;
319c6529
RK
1867}
1868
1437a48c
RK
1869#urlbar-search-footer {
1870 border-top: 1px solid #A09090;
1871}
1872
1873#urlbar-search-settings {
1874}
1875
1876#urlbar-search-settings:hover {
1877}
1878
1879#urlbar-search-settings:hover:active {
1880}
1881
319c6529
RK
1882#urlbar-search-splitter {
1883 min-width: 6px;
dae45075 1884 margin-inline-start: -3px;
319c6529
RK
1885 border: none;
1886 background: transparent;
1887}
1888
f0071a71 1889#urlbar-search-splitter + #urlbar-container > #urlbar,
319c6529 1890#urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
dae45075 1891 margin-inline-start: 0;
319c6529
RK
1892}
1893
8922acc9 1894.urlbar-display {
dae45075
RK
1895 border-inline-end: 1px solid #9C9CFF;
1896 margin-inline-end: 3px;
ab799a7a
RK
1897 margin-top: 0;
1898 margin-bottom: 0;
dae45075 1899 margin-inline-start: 0;
ab799a7a
RK
1900 color: #8050B0;
1901}
1902
b1dfcf32 1903/* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
e20c83c3 1904
b1dfcf32
RK
1905#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1906 border-bottom: 1px solid #A09090;
1907 background-color: #000000;
1908 padding: 6px 0;
dae45075
RK
1909 padding-inline-start: 44px;
1910 padding-inline-end: 6px;
b1dfcf32
RK
1911 background-image: url("chrome://browser/skin/info.svg");
1912 background-clip: padding-box;
1913 background-position: 20px center;
1914 background-repeat: no-repeat;
1915 background-size: 16px 16px;
8ad8bf83
RK
1916}
1917
b1dfcf32
RK
1918#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1919 background-position: right 20px center;
8ad8bf83
RK
1920}
1921
b1dfcf32
RK
1922#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
1923 margin: 0;
1924 padding: 0;
2c62526c
RK
1925}
1926
b1dfcf32 1927#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
dae45075 1928 margin-inline-start: 0;
8ad8bf83
RK
1929}
1930
b1dfcf32
RK
1931#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
1932 -moz-appearance: none;
b1dfcf32
RK
1933 min-width: 80px;
1934 border-radius: 3px;
1935 padding: 4px 16px;
1936 margin: 0;
dae45075 1937 margin-inline-start: 10px;
8ad8bf83
RK
1938}
1939
b1dfcf32 1940#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
8ad8bf83
RK
1941}
1942
b1dfcf32 1943#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
8ad8bf83
RK
1944}
1945
b1dfcf32 1946#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
8ad8bf83
RK
1947}
1948
b1dfcf32 1949#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
319c6529
RK
1950}
1951
b1dfcf32 1952/* === END urlbarSearchSuggestionsNotification.inc.css === */
319c6529 1953
b1dfcf32
RK
1954#search-container {
1955 min-width: calc(54px + 11ch);
319c6529
RK
1956}
1957
b1dfcf32 1958/* identity box */
1437a48c 1959
19988d2d 1960#identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
f36031bd 1961 background-color: var(--identity-box-verified-background-color);
319c6529
RK
1962}
1963
1964#identity-box:-moz-focusring {
1965 outline: 1px dotted #008484;
f993773d 1966 outline-offset: -1px;
319c6529
RK
1967}
1968
1969#identity-box.verifiedDomain:-moz-focusring,
1970#identity-box.verifiedIdentity:-moz-focusring {
1971 outline-color: #000000;
1972}
1973
319c6529
RK
1974/* Location bar dropmarker */
1975
38cfeb47 1976.urlbar-history-dropmarker:not(:hover):not([open="true"]) {
319c6529 1977 background-color: transparent;
319c6529
RK
1978}
1979
00f971bc 1980#urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
c9b0a396
RK
1981#urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
1982#urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
38cfeb47
RK
1983 border: none;
1984 border-radius: 0px;
d7b7f7e1
RK
1985 transition: opacity 0.15s ease;
1986}
1987
7327c957
RK
1988#urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1989 transition: none;
1990}
1991
db1c5db1 1992#navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
d7b7f7e1 1993 opacity: 0;
319c6529
RK
1994}
1995
ffce2402
RK
1996.urlbar-history-dropmarker:hover {
1997}
1998
1999.urlbar-history-dropmarker:hover:active,
2000.urlbar-history-dropmarker[open="true"] {
2001}
2002
319c6529
RK
2003/* page proxy icon */
2004
e7c8bab1
RK
2005/* === BEGIN identity-block.inc.css === */
2006
b1dfcf32 2007#identity-box {
e548e22e 2008 --identity-box-verified-color: #008484;
e7c8bab1 2009 /* Default theme does different color per channel, we can't as they do it build-time. */
e548e22e 2010 --identity-box-chrome-color: #9C9CFF;
b1dfcf32 2011
b1dfcf32
RK
2012 font-size: .9em;
2013 border-radius: 2px;
024a65e9 2014 padding: 3px 5px;
b1dfcf32 2015 overflow: hidden;
024a65e9
RK
2016 /* The latter two properties have a transition to handle the delayed hiding of
2017 the forward button when hovered. */
2018 transition: background-color 150ms ease, padding-left, padding-right;
b1dfcf32
RK
2019}
2020
2021#identity-box:-moz-locale-dir(ltr) {
2022 border-top-right-radius: 0;
2023 border-bottom-right-radius: 0;
2024}
2025
2026#identity-box:-moz-locale-dir(rtl) {
2027 border-top-left-radius: 0;
2028 border-bottom-left-radius: 0;
e548e22e
RK
2029}
2030
2031#urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2032 color: var(--identity-box-chrome-color);
dae45075 2033 border-inline-end: 1px solid var(--identity-box-chrome-color);
e7c8bab1
RK
2034}
2035
2036#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
e548e22e 2037 color: var(--identity-box-verified-color);
dae45075 2038 border-inline-end: 1px solid var(--identity-box-verified-color);
e7c8bab1
RK
2039}
2040
7c1e433b
RK
2041#identity-icon-labels:-moz-locale-dir(ltr) {
2042 padding-left: 2px;
2043}
2044
2045#identity-icon-labels:-moz-locale-dir(rtl) {
2046 padding-right: 2px;
2047}
2048
b1dfcf32 2049window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
dc9d5d64
RK
2050/* border-radius: 0;
2051 padding-inline-start: 2px; */
2052 padding-inline-end: 2px;
2053 margin-inline-end: 1px;
b1dfcf32
RK
2054}
2055
db1c5db1 2056window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #identity-box {
b1dfcf32
RK
2057 padding-inline-start: 2px;
2058}
2059
db1c5db1 2060window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
024a65e9
RK
2061 /* Forward button hiding is delayed when hovered, so we should use the same
2062 delay for the identity box. We handle both horizontal paddings (for LTR and
2063 RTL), the latter two delays here are for padding-left and padding-right. */
2064 transition-delay: 0s, 100s, 100s;
b1dfcf32
RK
2065}
2066
db1c5db1 2067window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
b1dfcf32
RK
2068 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2069 padding-inline-start: 2.01px;
e7c8bab1
RK
2070}
2071
c9b0a396
RK
2072/* MAIN IDENTITY ICON */
2073
2074#identity-icon {
2075 width: 16px;
2076 height: 16px;
2077 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2078}
2079
db1c5db1 2080#identity-box:hover > #identity-icon:not(.no-hover),
c9b0a396
RK
2081#identity-box[open=true] > #identity-icon {
2082 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2083}
2084
db1c5db1
RK
2085#identity-box.grantedPermissions > #identity-icon {
2086 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
2087}
2088
2089#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
2090#identity-box.grantedPermissions[open=true] > #identity-icon {
2091 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
2092}
2093
c9b0a396
RK
2094#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2095 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2096}
2097
2098#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2099 opacity: 0.3;
2100}
2101
2102#urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2103 -moz-image-region: inherit;
2104 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2105 width: 16px;
2106 height: 16px;
2107 opacity: 1;
2108}
2109
2110/* TRACKING PROTECTION ICON */
2111
2112#tracking-protection-icon {
2113 width: 16px;
2114 height: 16px;
2115 margin-inline-start: 2px;
2116 margin-inline-end: 0;
2117 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
2118 opacity: 1;
2119}
2120
2121#tracking-protection-icon[state="loaded-tracking-content"] {
2122 list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
2123}
2124
2125#tracking-protection-icon[animate] {
2126 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2127}
2128
2129#tracking-protection-icon:not([state]) {
2130 margin-inline-end: -18px;
2131 pointer-events: none;
2132 opacity: 0;
2133 /* Only animate the shield in, when it disappears hide it immediately. */
2134 transition: none;
2135}
2136
2137#urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2138 visibility: collapse;
2139}
2140
2141/* CONNECTION ICON */
2142
2143#connection-icon {
2144 width: 16px;
2145 height: 16px;
2146 margin-inline-start: 2px;
2147 visibility: collapse;
2148}
2149
2150#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
db1c5db1
RK
2151#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
2152#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
c9b0a396
RK
2153 list-style-image: url(chrome://browser/skin/identity-secure.svg);
2154 visibility: visible;
2155}
2156
db1c5db1
RK
2157#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
2158 list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2159 visibility: visible;
2160}
2161
c9b0a396
RK
2162#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2163#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2164 list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
2165 visibility: visible;
2166}
2167
2168#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2169#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2170#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
2171 list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2172 visibility: visible;
2173}
2174
e7c8bab1
RK
2175/* === END identity-block.inc.css === */
2176
2177#page-proxy-favicon {
2178 -moz-image-region: rect(0, 16px, 16px, 0);
2179}
2180
3b1da406 2181window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
dae45075 2182/* margin-inline-end: 1px;*/
c0f6797e
RK
2183}
2184
2a5b7882 2185#identity-box:hover > #page-proxy-favicon {
a40f6a79
RK
2186 -moz-image-region: rect(0, 32px, 16px, 16px);
2187}
2188
2a5b7882
RK
2189#identity-box:hover:active > #page-proxy-favicon,
2190#identity-box[open=true] > #page-proxy-favicon {
a40f6a79 2191 -moz-image-region: rect(0, 48px, 16px, 32px);
acb0e9b8 2192}
2193
2a5b7882
RK
2194#identity-box:hover {
2195 background-color: #FFCF00;
7092015d 2196 color: #000000;
2a5b7882
RK
2197}
2198
2199#identity-box:hover:active,
2200#identity-box[open=true] {
c877146a 2201 background-color: #A09090;
7092015d 2202 color: #000000;
2a5b7882
RK
2203}
2204
56859d76
RK
2205#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2206#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2207#urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2208 background-color: #9C9CFF;
2209 color: #000000;
2210}
2211
387e6560
RK
2212#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2213#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2214#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2a5b7882
RK
2215 background-color: #008484;
2216 color: #000000;
2217}
2218
c877146a
RK
2219#identity-box:hover > image,
2220#identity-box:hover:active > image,
2221#identity-box[open=true] > image {
2a1534f1 2222 filter: url(chrome://global/skin/filters.svg#active-icon-state);
c877146a
RK
2223}
2224
319c6529
RK
2225/* autocomplete */
2226
319c6529
RK
2227#treecolAutoCompleteImage {
2228 max-width: 36px;
2229}
acb0e9b8 2230
7c1e433b
RK
2231/*
2232.autocomplete-richlistbox {
2233 padding: 4px;
2234}
2235
2236.autocomplete-richlistitem {
2237 height: 30px;
2238 min-height: 30px;
2239 font: message-box;
2240 border-radius: 2px;
2241 border: 1px solid transparent;
2242}
2243
2244.autocomplete-richlistitem[selected=true] {
2245 background-color: hsl(210, 80%, 52%);
2246}
2247*/
2248.ac-title {
2249 font-size: 14px;
2250/* color: hsl(0, 0%, 0%);*/
2251}
2252
2253.ac-tags {
2254 font-size: 12px;
2255}
2256/*
2257html|span.ac-tag {
2258 background-color: hsl(216, 0%, 88%);
2259 color: hsl(0, 0%, 0%);
2260 border-radius: 2px;
2261 border: 1px solid transparent;
2262 padding: 0 1px;
2263}
2264*/
2265
2266.ac-separator,
2267.ac-url,
2268.ac-action {
2269 font-size: 12px;
2270}
2271
2272.ac-separator {
2273/* color: hsl(0, 0%, 50%);*/
2274}
2275
2276.ac-url {
2277 color: #9C9CFF;
2278}
2279
2280.ac-action {
2281 color: #9C9CFF;
2282}
2283
2284.ac-title[selected=true],
2285.ac-separator[selected],
2286.ac-url[selected=true],
2287.ac-action[selected=true] {
2288 color: #000000;
2289}
2290
2291.ac-tags-text[selected] > html|span.ac-tag {
2292 background-color: #A09090;
2293 color: #000000;
2294}
2295
2296html|span.ac-emphasize-text-title,
2297html|span.ac-emphasize-text-tag,
2298html|span.ac-emphasize-text-url {
2299 font-weight: 600;
2300}
2301
2302.ac-type-icon[type=bookmark] {
2303 list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
2304}
2305
2306.ac-type-icon[type=bookmark][selected][current] {
2307/* list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
2308}
2309
319c6529
RK
2310.ac-result-type-bookmark,
2311.autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
71bac478 2312 list-style-image: url("chrome://browser/skin/places/bookmark.png");
319c6529 2313 -moz-image-region: rect(0px 16px 16px 0px);
c1f7cc84 2314 width: 16px;
319c6529 2315 height: 16px;
acb0e9b8 2316}
2317
c0f6797e
RK
2318richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2319.autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2320/* -moz-image-region: rect(0px 48px 16px 32px);*/
2321}
2322
7c1e433b
RK
2323.ac-type-icon[type=keyword],
2324.ac-site-icon[type=searchengine],
2325.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
8922acc9 2326 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
acb0e9b8 2327}
2328
7c1e433b
RK
2329.ac-type-icon[type=keyword][selected],
2330.ac-site-icon[type=searchengine][selected],
2331.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected) {
2332 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2333}
8922acc9 2334
319c6529
RK
2335.ac-result-type-tag,
2336.autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
8da9da4e 2337 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
c1f7cc84 2338 width: 16px;
319c6529
RK
2339 height: 16px;
2340}
acb0e9b8 2341
7c1e433b
RK
2342.ac-type-icon[type=switchtab],
2343.ac-type-icon[type=remotetab] {
2344 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
85cfb236
RK
2345}
2346
7c1e433b
RK
2347.ac-type-icon[type=switchtab][selected],
2348.ac-type-icon[type=remotetab][selected] {
2349 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
acb0e9b8 2350}
2351
c1f7cc84
RK
2352.autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2353.autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
319c6529
RK
2354{
2355 color: #8050B0;
2356 font-size: smaller;
acb0e9b8 2357}
319c6529
RK
2358
2359.autocomplete-treebody::-moz-tree-cell(suggesthint) {
2360 border-top: 1px solid #9C9CFF;
acb0e9b8 2361}
2362
319c6529
RK
2363/* combined go/reload/stop button in location bar */
2364
c9b0a396
RK
2365#urlbar-go-button,
2366#urlbar-reload-button,
2367#urlbar-stop-button {
2368 border-style: none;
52d7b436 2369 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
db1c5db1 2370/* margin: 0 9px; */
024a65e9 2371 margin-inline-start: 0px;
c9b0a396
RK
2372 border-inline-start: 1px solid var(--urlbar-separator-color);
2373 border-image: linear-gradient(transparent 15%,
2374 var(--urlbar-separator-color) 15%,
2375 var(--urlbar-separator-color) 85%,
2376 transparent 85%);
2377 border-image-slice: 1;
9abeb12c
RK
2378}
2379
2380#urlbar:-moz-locale-dir(ltr) > toolbarbutton {
38cfeb47
RK
2381 border-top-left-radius: 0px;
2382 border-bottom-left-radius: 0px;
acb0e9b8 2383}
acb0e9b8 2384
9abeb12c 2385#urlbar:-moz-locale-dir(rtl) > toolbarbutton {
38cfeb47
RK
2386 border-top-right-radius: 0px;
2387 border-bottom-right-radius: 0px;
9abeb12c
RK
2388}
2389
46e71434 2390#urlbar > toolbarbutton:not([disabled=true]):active:hover,
dce90fef 2391#urlbar-reload-button:not(:hover) {
dae45075
RK
2392 border-inline-start-style: none;
2393 padding-inline-start: 3px;
dce90fef
RK
2394}
2395
c0f6797e
RK
2396#urlbar-reload-button {
2397 -moz-image-region: rect(0px, 14px, 14px, 0px);
acb0e9b8 2398}
2399
46e71434 2400#urlbar-reload-button[disabled=true] {
c0f6797e 2401 -moz-image-region: rect(28px, 14px, 42px, 0px);
acb0e9b8 2402}
2403
46e71434 2404#urlbar-reload-button:not([disabled=true]):hover {
c0f6797e 2405 -moz-image-region: rect(14px, 14px, 28px, 0px);
ffce2402
RK
2406}
2407
c0f6797e
RK
2408#urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2409 transform: scaleX(-1);
acb0e9b8 2410}
2411
c0f6797e
RK
2412#urlbar-go-button {
2413 -moz-image-region: rect(0, 42px, 14px, 28px);
38cfeb47
RK
2414}
2415
fff8097b 2416#urlbar-go-button:hover {
c0f6797e 2417 -moz-image-region: rect(14px, 42px, 28px, 28px);
acb0e9b8 2418}
2419
c0f6797e
RK
2420#urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2421 transform: scaleX(-1);
acb0e9b8 2422}
319c6529
RK
2423
2424#urlbar-stop-button {
ffce2402 2425 -moz-image-region: rect(0px, 28px, 14px, 14px);
acb0e9b8 2426}
319c6529
RK
2427
2428#urlbar-stop-button:hover {
ffce2402 2429 -moz-image-region: rect(14px, 28px, 28px, 14px);
acb0e9b8 2430}
2431
2e389898 2432@media (min-resolution: 1.1dppx) {
c9b0a396
RK
2433 #urlbar-go-button,
2434 #urlbar-reload-button,
2435 #urlbar-stop-button {
2e389898
RK
2436 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2437 }
2438
c9b0a396
RK
2439 #urlbar-go-button > .toolbarbutton-icon,
2440 #urlbar-reload-button > .toolbarbutton-icon,
2441 #urlbar-stop-button > .toolbarbutton-icon {
2442 width: 14px;
2443 }
2444
2e389898
RK
2445 #urlbar-go-button {
2446 -moz-image-region: rect(0, 84px, 28px, 56px);
2447 }
2448
2449 #urlbar-go-button:hover {
2450 -moz-image-region: rect(28px, 84px, 56px, 56px);
2451 }
2452
2453 #urlbar-go-button:hover:active {
2454 -moz-image-region: rect(56px, 84px, 84px, 56px);
2455 }
2456
2457 #urlbar-reload-button {
2458 -moz-image-region: rect(0, 28px, 28px, 0);
2459 }
2460
2461 #urlbar-reload-button:not([disabled]):hover {
2462 -moz-image-region: rect(28px, 28px, 56px, 0);
2463 }
2464
2465 #urlbar-reload-button:not([disabled]):hover:active {
2466 -moz-image-region: rect(56px, 28px, 84px, 0);
2467 }
2468
2469 #urlbar-stop-button {
2470 -moz-image-region: rect(0, 56px, 28px, 28px);
2471 }
2472
2473 #urlbar-stop-button:not([disabled]):hover {
2474 -moz-image-region: rect(28px, 56px, 56px, 28px);
2475 }
2476
2477 #urlbar-stop-button:hover:active {
2478 -moz-image-region: rect(56px, 56px, 84px, 28px);
2479 }
2e389898
RK
2480}
2481
319c6529
RK
2482/* popup blocker button */
2483
2484#page-report-button {
2485 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2486 -moz-image-region: rect(0, 16px, 16px, 0);
acb0e9b8 2487}
319c6529 2488
71bac478 2489#page-report-button:hover ,
319c6529
RK
2490#page-report-button:hover:active,
2491#page-report-button[open="true"] {
71bac478 2492 -moz-image-region: rect(0, 32px, 16px, 16px);
acb0e9b8 2493}
2494
bcb9d005
RK
2495/* Reader mode button */
2496
2497#reader-mode-button {
2498 list-style-image: url("chrome://browser/skin/readerMode.svg");
2499 -moz-image-region: rect(0, 16px, 16px, 0);
2500}
2501
2502#reader-mode-button:hover,
2503#reader-mode-button[readeractive]:hover {
2504 -moz-image-region: rect(0, 32px, 16px, 16px);
2505}
2506
2507#reader-mode-button:hover:active,
2508#reader-mode-button[readeractive] {
2509 -moz-image-region: rect(0, 48px, 16px, 32px);
2510}
2511
c4460289
RK
2512/* social share panel */
2513
20752032
RK
2514.social-share-frame {
2515 min-width: 756px;
c4460289
RK
2516 height: 150px;
2517}
2518
20752032
RK
2519#share-container {
2520 min-width: 756px;
2521 background-color: white;
2522 background-repeat: no-repeat;
2523 background-position: center center;
c4460289 2524}
20752032
RK
2525#share-container[loading] {
2526 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2527}
2528#share-container > browser {
2529 transition: opacity 150ms ease-in-out;
2530 opacity: 1;
2531}
2532#share-container[loading] > browser {
2533 opacity: 0;
c4460289
RK
2534}
2535
20752032
RK
2536.social-share-toolbar {
2537 border-bottom: 1px solid #9C9CFF;
2538 padding: 2px;
c4460289
RK
2539}
2540
20752032
RK
2541#social-share-provider-buttons {
2542 padding: 0;
2543 margin: 0;
c4460289
RK
2544}
2545
20752032
RK
2546.share-provider-button {
2547 padding: 5px;
2548 margin: 2px;
c4460289
RK
2549}
2550
20752032 2551.share-provider-button > .toolbarbutton-text {
c4460289
RK
2552 display: none;
2553}
20752032 2554.share-provider-button > .toolbarbutton-icon {
c4460289
RK
2555 width: 16px;
2556 min-height: 16px;
2557 max-height: 16px;
2558}
2559
2560/* fixup corners for share panel */
2561.social-panel > .social-panel-frame {
2562 border-radius: inherit;
2563}
2564
2565#social-share-panel {
c4460289 2566 min-height: 100px;
20752032 2567 min-width: 766px;
c4460289
RK
2568}
2569
20752032 2570#share-container,
c4460289 2571.social-share-frame {
e2734cc7 2572 border-top-left-radius: 0;
c4460289 2573 border-bottom-left-radius: inherit;
e2734cc7 2574 border-top-right-radius: 0;
20752032 2575 border-bottom-right-radius: inherit;
c4460289
RK
2576}
2577
20752032 2578#social-share-panel > .social-share-toolbar {
e2734cc7 2579 border-top-left-radius: inherit;
e2734cc7 2580 border-top-right-radius: inherit;
e2734cc7
RK
2581}
2582
20752032 2583#social-share-provider-buttons {
c4460289 2584 border-top-left-radius: inherit;
e2734cc7 2585 border-top-right-radius: inherit;
e2734cc7
RK
2586}
2587
889649fd
RK
2588/* social recommending panel */
2589
a6757852 2590#social-mark-button {
d7cfd768 2591 -moz-image-region: rect(0, 16px, 16px, 0);
889649fd
RK
2592}
2593
c0f6797e 2594/* bookmarks menu-button */
319c6529 2595
c0f6797e
RK
2596#bookmarks-menu-button.bookmark-item {
2597 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2598 -moz-image-region: rect(0px 16px 16px 0px);
acb0e9b8 2599}
319c6529 2600
c0f6797e
RK
2601#bookmarks-menu-button.bookmark-item[starred] {
2602 -moz-image-region: rect(0px 32px 16px 16px);
acb0e9b8 2603}
319c6529 2604
e9fbfc3a 2605#nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
c0f6797e
RK
2606 padding-top: 2px;
2607 padding-bottom: 2px;
71bac478
RK
2608}
2609
c0f6797e
RK
2610#BMB_bookmarksPopup[side="top"],
2611#BMB_bookmarksPopup[side="bottom"] {
2612 margin-left: -20px;
2613 margin-right: -20px;
71bac478
RK
2614}
2615
c0f6797e
RK
2616#BMB_bookmarksPopup[side="left"],
2617#BMB_bookmarksPopup[side="right"] {
2618 margin-top: -20px;
2619 margin-bottom: -20px;
acb0e9b8 2620}
319c6529
RK
2621
2622/* bookmarking panel */
c0f6797e 2623
319c6529
RK
2624#editBookmarkPanelStarIcon {
2625 list-style-image: url("chrome://browser/skin/places/starred48.png");
2626 width: 48px;
2627 height: 48px;
acb0e9b8 2628}
319c6529
RK
2629
2630#editBookmarkPanelStarIcon[unstarred] {
2631 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
acb0e9b8 2632}
2633
319c6529
RK
2634#editBookmarkPanelTitle {
2635 font-size: 130%;
acb0e9b8 2636}
319c6529
RK
2637
2638#editBookmarkPanelHeader,
2639#editBookmarkPanelContent {
2640 margin-bottom: .5em;
acb0e9b8 2641}
319c6529
RK
2642
2643/* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2644#editBMPanel_folderTree {
2645 min-width: 27em;
acb0e9b8 2646}
2647
319c6529
RK
2648/* ::::: content area ::::: */
2649
bcb9d005
RK
2650#sidebar-box {
2651 background-color: #9C9CFF;
2652 color: #000000;
2653}
2654
319c6529 2655#sidebar {
bcb9d005
RK
2656 background-color: #000000;
2657}
2658
2659#sidebar-splitter {
dae45075 2660 margin-inline-start: 0;
bcb9d005
RK
2661}
2662
2663#sidebar-header {
2664 color: #000000;
2665 padding: 2px;
acb0e9b8 2666}
319c6529
RK
2667
2668#sidebar-title {
dae45075 2669 padding-inline-start: 0px;
acb0e9b8 2670}
319c6529 2671
589b5528
RK
2672#sidebar-header > .close-icon {
2673/* padding: 4px 2px;
2674 margin: 0;
2675 border: none;*/
2676 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2677}
2678
2679#sidebar-header > .close-icon:hover,
2680#sidebar-header > .close-icon:hover:active {
2681 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2682}
2683
bcb9d005
RK
2684#sidebar-splitter:-moz-locale-dir(ltr),
2685#sidebar:-moz-locale-dir(ltr) {
2686 border-radius: 0 5px 0 0;
2687}
2688
2689#sidebar-splitter:-moz-locale-dir(rtl),
2690#sidebar:-moz-locale-dir(rtl) {
2691 border-radius: 5px 0 0 0;
2692}
2693
fe524e0c
RK
2694.browserContainer > findbar {
2695/*
2696 background-color: -moz-dialog;
2697 color: -moz-DialogText;
2698*/
2699}
2700
319c6529 2701/* Tabstrip */
b36fc72e 2702
c0f6797e 2703#TabsToolbar {
e20c83c3
RK
2704 min-height: 0;
2705 padding: 0;
2706 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2707}
2708
b36fc72e 2709#TabsToolbar .toolbar-holder {
c1f7cc84 2710 background-color: #000000; /* correct effect of being an actual toolbar */
acb0e9b8 2711}
2712
b36fc72e 2713#main-window[disablechrome] #TabsToolbar,
319c6529 2714#TabsToolbar[tabsontop="false"] {
8b5fc82e 2715 border-bottom: 1px solid #008484;
acb0e9b8 2716}
319c6529 2717
6dc70335
RK
2718/* === BEGIN tabs.inc.css === */
2719
368d0b7f
RK
2720:root {
2721 /* --tab-toolbar-navbar-overlap: 1px; */
024a65e9 2722 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
368d0b7f 2723 /* --tab-min-height: 31px; */
024a65e9
RK
2724}
2725#TabsToolbar {
2726 /* --tab-stroke-background-size: auto 100%; */
368d0b7f
RK
2727}
2728
319c6529 2729.tabbrowser-tab,
43ee1307
RK
2730.tabs-newtab-button,
2731#TabsToolbar > #new-tab-button {
319c6529 2732 margin-top: 0px;
acb0e9b8 2733}
319c6529 2734
43ee1307 2735.tabbrowser-tab {
57fc408c
RK
2736 padding: 1px 4px 2px;
2737}
2738
2739.tabbrowser-tab:first-of-type {
dae45075 2740 margin-inline-start: 2px;
57fc408c
RK
2741}
2742
43ee1307 2743.tabs-newtab-button,
e0f773b9
RK
2744#TabsToolbar > #new-tab-button,
2745#TabsToolbar > toolbarpaletteitem > #new-tab-button,
2746#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
57fc408c 2747 border-radius: 8px 8px 0px 0px;
dae45075 2748 margin-inline-start: 0;
57fc408c
RK
2749}
2750
43ee1307 2751.tabs-newtab-button:not(:hover),
e0f773b9
RK
2752#TabsToolbar > #new-tab-button:not(:hover),
2753#TabsToolbar > toolbarpaletteitem > #new-tab-button,
2754#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
57fc408c
RK
2755 background-color: #C09070;
2756}
2757
c0f6797e 2758/* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
05148fed 2759.tabbrowser-tab[visuallyselected=true] {
c0f6797e
RK
2760/* position: relative;
2761 z-index: 2;*/
acb0e9b8 2762}
2763
c0f6797e 2764.tab-background-middle {
acb0e9b8 2765}
2766
c0f6797e 2767.tab-content {
acb0e9b8 2768}
319c6529 2769
d533ec21
RK
2770.tab-content[pinned] {
2771}
2772
2773.tab-throbber,
c0f6797e 2774.tab-icon-image,
db1c5db1 2775.tab-sharing-icon-overlay,
b1dfcf32 2776.tab-icon-sound,
c0f6797e 2777.tab-close-button {
acb0e9b8 2778}
2779
319c6529 2780.tab-throbber,
db1c5db1 2781.tab-sharing-icon-overlay,
319c6529 2782.tab-icon-image {
319c6529 2783 height: 16px;
c0f6797e 2784 width: 16px;
dae45075 2785 margin-inline-end: 3px;
c0f6797e
RK
2786}
2787
2788.tab-icon-image {
dce90fef 2789 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
613daf44 2790}
2791
db1c5db1
RK
2792.tab-icon-image[sharing]:not([selected]),
2793.tab-sharing-icon-overlay {
2794 animation: 3s linear pulse infinite;
2795}
2796
2797@keyframes pulse {
2798 0%, 16.66%, 83.33%, 100% {
2799 opacity: 0;
2800 }
2801 33.33%, 66.66% {
2802 opacity: 1;
2803 }
2804}
2805
2806.tab-icon-image[sharing]:not([selected]) {
2807 animation-delay: -1.5s;
2808}
2809
2810.tab-sharing-icon-overlay {
2811 /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
2812 margin-inline-start: -22px;
2813 position: relative;
2814}
2815
2816.tab-sharing-icon-overlay[sharing="camera"] {
2817 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera");
2818}
2819
2820.tab-sharing-icon-overlay[sharing="microphone"] {
2821 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone");
2822}
2823
2824.tab-sharing-icon-overlay[sharing="screen"] {
2825 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen");
2826}
2827
2828.tab-sharing-icon-overlay[sharing] {
2a1534f1 2829 filter: url("chrome://global/skin/filters.svg#fill");
db1c5db1
RK
2830 fill: #FFCF00;
2831}
2832
d533ec21
RK
2833.tab-icon-overlay {
2834 width: 16px;
2835 height: 16px;
d7b7f7e1 2836 margin-top: -8px;
dae45075 2837 margin-inline-start: -15px;
7327c957 2838 margin-inline-end: -1px;
b1dfcf32 2839 position: relative;
d533ec21
RK
2840}
2841
2842.tab-icon-overlay[crashed] {
d533ec21
RK
2843 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2844}
2845
024a65e9
RK
2846.tab-icon-overlay[soundplaying],
2847.tab-icon-overlay[muted]:not([crashed]) {
d7b7f7e1 2848 border-radius: 10px;
b1dfcf32
RK
2849}
2850
024a65e9
RK
2851.tab-icon-overlay[soundplaying]:hover,
2852.tab-icon-overlay[muted]:hover {
b1dfcf32
RK
2853 background-color: #FFCF00;
2854}
2855
024a65e9 2856.tab-icon-overlay[soundplaying] {
b1dfcf32
RK
2857 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2858}
2859
024a65e9 2860.tab-icon-overlay[muted]:not([crashed]) {
b1dfcf32
RK
2861 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2862}
2863
024a65e9
RK
2864#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2865 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
b1dfcf32
RK
2866}
2867
b1dfcf32 2868
024a65e9
RK
2869#TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2870 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
b1dfcf32
RK
2871}
2872
3d64e0ce 2873.tab-throbber[busy] {
95f333af 2874 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
613daf44 2875}
319c6529
RK
2876
2877.tab-throbber[progress] {
95f333af 2878 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
613daf44 2879}
319c6529 2880
85b6b932
RK
2881@media (min-resolution: 1.1dppx) {
2882 .tab-throbber[busy] {
2883 list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2884 }
2885
2886 .tab-throbber[progress] {
2887 list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2888 }
2889}
2890
319c6529
RK
2891.tab-throbber[pinned],
2892.tab-icon-image[pinned] {
dae45075
RK
2893 margin-inline-start: 2px;
2894 margin-inline-end: 2px;
613daf44 2895}
319c6529 2896
c0f6797e 2897.tab-label {
aec5dfad
RK
2898 /* this needs to add up to the 16px of the icon image */
2899 height: 12px;
2900 margin-top: 2px !important;
2901 margin-bottom: 2px !important;
c0f6797e
RK
2902}
2903
b1dfcf32 2904.tab-icon-sound {
dae45075 2905 margin-inline-start: 4px;
b1dfcf32
RK
2906 width: 16px;
2907 height: 16px;
2908 padding: 0;
2909}
2910
b1dfcf32
RK
2911.tab-icon-sound[muted] {
2912 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2913}
2914
2915.tab-icon-sound[muted]:hover {
2916 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2917}
2918
2919.tab-icon-sound[muted]:hover:active {
2920 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2921}
2922
2923.tab-icon-sound[soundplaying] {
024a65e9 2924 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
b1dfcf32
RK
2925}
2926
2927.tab-icon-sound[soundplaying]:hover {
024a65e9 2928 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
b1dfcf32
RK
2929}
2930
2931.tab-icon-sound[soundplaying]:hover:active {
024a65e9
RK
2932 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
2933}
2934
2935.tab-icon-sound[muted] {
2936 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
2937}
2938
2939.tab-icon-sound[muted]:hover {
2940 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
2941}
2942
2943.tab-icon-sound[muted]:hover:active {
2944 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
2945}
2946
2947.tab-icon-sound[visuallyselected=true][soundplaying] {
2948 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
2949}
2950
2951.tab-icon-sound[visuallyselected=true][soundplaying]:hover {
2952 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
2953}
2954
2955.tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
b1dfcf32
RK
2956 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
2957}
2958
024a65e9
RK
2959.tab-icon-sound[visuallyselected=true][muted] {
2960 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2961}
2962
2963.tab-icon-sound[visuallyselected=true][muted]:hover {
2964 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2965}
2966
2967.tab-icon-sound[visuallyselected=true][muted]:hover:active {
2968 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2969}
2970
b1dfcf32 2971#TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
024a65e9 2972 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
b1dfcf32
RK
2973}
2974
2975#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
024a65e9 2976 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
b1dfcf32
RK
2977}
2978
2979#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
024a65e9 2980 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
b1dfcf32
RK
2981}
2982
2983#TabsToolbar[brighttext] .tab-icon-sound[muted] {
024a65e9 2984 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
b1dfcf32
RK
2985}
2986
2987#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
024a65e9 2988 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
b1dfcf32
RK
2989}
2990
2991#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
024a65e9 2992 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
b1dfcf32
RK
2993}
2994
c0f6797e
RK
2995.tab-close-button {
2996 margin-top: 1px;
2997 padding: 0;
2998}
2999
3000.tab-background,
3001.tabs-newtab-button {
3002 /* overlap the tab curves */
3003}
3004
3005.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
3006}
3007
93c91f62
RK
3008/* Tab Overflow */
3009.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
3010.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3011}
3012
3013.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3014.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
3015}
3016
3017.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3018}
3019
3020.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3021}
3022
3023.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3024.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3025}
3026
3027.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3028.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3029}
3030
05148fed
RK
3031.tab-background-start[visuallyselected=true]::after,
3032.tab-background-start[visuallyselected=true]::before,
c0f6797e
RK
3033.tab-background-start,
3034.tab-background-end,
05148fed
RK
3035.tab-background-end[visuallyselected=true]::after,
3036.tab-background-end[visuallyselected=true]::before {
c0f6797e
RK
3037}
3038
05148fed 3039.tabbrowser-tab:not([visuallyselected=true]),
c0f6797e
RK
3040.tabbrowser-tab:-moz-lwtheme {
3041}
3042
319c6529 3043/* tabbrowser-tab focus ring */
c0f6797e 3044.tabbrowser-tab:focus {
319c6529 3045 outline: 1px dotted;
613daf44 3046}
319c6529 3047
c0f6797e
RK
3048/* Selected tab */
3049
05148fed 3050.tabbrowser-tab[visuallyselected="true"] {
c0f6797e
RK
3051}
3052
3053/* End selected tab */
3054
c0f6797e
RK
3055/* Tab pointer-events */
3056/*
3057.tabbrowser-tab {
3058 pointer-events: none;
3059}
3060
3061.tab-background-middle,
3062.tabs-newtab-button,
b1dfcf32
RK
3063.tab-icon-overlay[soundplaying],
3064.tab-icon-overlay[muted]:not([crashed]),
3065.tab-icon-sound,
c0f6797e
RK
3066.tab-close-button {
3067 pointer-events: auto;
3068}
3069*/
3070/* Pinned tabs */
3071
fa703ff4
RK
3072/*
3073.tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([visuallyselected="true"]),
3074.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([visuallyselected="true"]) {
3075*/
3076.tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
c0f6797e
RK
3077 background-color: #E7ADE7;
3078}
3079
fa703ff4
RK
3080.tab-label[attention]:not([visuallyselected="true"]) {
3081 font-weight: bold;
3082}
3083
3084.tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
c0f6797e
RK
3085 background-color: #3333FF;
3086 color: #000000;
3087}
3088
024a65e9
RK
3089/* Tab separators */
3090/*
3091.tabbrowser-tab::after,
3092.tabbrowser-tab::before {
3093 width: 1px;
dae45075 3094 margin-inline-start: -1px;
024a65e9
RK
3095 background-image: linear-gradient(transparent 5px,
3096 currentColor 5px,
3097 currentColor calc(100% - 4px),
3098 transparent calc(100% - 4px));
3099 opacity: 0.2;
3100}
3101
3102#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3103#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3104 opacity: 0.4;
3105}
3106*/
3107/* Also show separators beside the selected tab when dragging it. */
3108/*
3109#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3110.tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3111#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
3112 content: "";
3113 display: -moz-box;
3114}
3115*/
c0f6797e
RK
3116/* New tab button */
3117
3118.tabs-newtab-button {
3119 width: 28px;
d533ec21 3120 /* width: calc(36px + var(--tab-curve-width)); */
c0f6797e 3121}
db1c5db1
RK
3122@media (min-resolution: 1.1dppx) {
3123 /* image preloading hack from like lowdpi styles */
3124 #tabbrowser-tabs::before {
3125 }
c0f6797e 3126
db1c5db1
RK
3127 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([visuallyselected=true]),
3128 .tabs-newtab-button:hover {
3129 }
c0f6797e 3130
db1c5db1
RK
3131 .tab-background-middle[visuallyselected=true] {
3132 }
3133
3134 .tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr)::after,
3135 .tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl)::after {
3136 }
3137
3138 .tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr)::after,
3139 .tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl)::after {
3140 }
3141
3142 .tab-icon-image {
3143 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
3144 }
43371c9b
RK
3145}
3146
db1c5db1
RK
3147/* === END tabs.inc.css === */
3148
8ad8bf83 3149/* Tab DnD indicator */
319c6529
RK
3150.tab-drop-indicator {
3151 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
9abeb12c 3152 margin-bottom: -11px;
613daf44 3153}
3154
319c6529
RK
3155/* Tab close button */
3156.tab-close-button {
319c6529
RK
3157 list-style-image: url("chrome://global/skin/icons/close-button.gif");
3158}
acb0e9b8 3159
319c6529
RK
3160.tab-close-button:hover,
3161.tab-close-button:hover[selected="true"] {
3162 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
acb0e9b8 3163}
319c6529
RK
3164
3165.tab-close-button:hover:active,
3166.tab-close-button:hover:active[selected="true"] {
3167 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
acb0e9b8 3168}
319c6529 3169
319c6529
RK