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