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