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