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