browser/themes/osx/browser.css@b8a032363ba2
browser/themes/osx/browser.css
Thu, 22 Jan 2015 13:21:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 22 Jan 2015 13:21:57 +0100
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
- permissions
- -rw-r--r--
Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6
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/. */
5 @import url("chrome://global/skin/");
7 %include shared.inc
8 %filter substitution
9 %define forwardTransitionLength 150ms
10 %define conditionalForwardWithUrlbar window:not([chromehidden~="toolbar"]) #urlbar-wrapper
11 %define conditionalForwardWithUrlbarWidth 32
12 %define spaceAboveTabbar 9px
13 %define toolbarButtonPressed :hover:active:not([disabled="true"]):not([cui-areatype="menu-panel"])
14 %define windowButtonMarginTop 11px
16 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
17 @namespace html url("http://www.w3.org/1999/xhtml");
18 @namespace svg url("http://www.w3.org/2000/svg");
20 #urlbar:-moz-lwtheme:not([focused="true"]),
21 .searchbar-textbox:-moz-lwtheme:not([focused="true"]) {
22 opacity: .9;
23 }
25 #navigator-toolbox::after {
26 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
27 background-image: linear-gradient(to top, hsla(0,0%,0%,.15), hsla(0,0%,0%,.15) 1px, hsla(0,0%,100%,.15) 1px, hsla(0,0%,100%,.15) 2px, transparent 3px);
28 content: "";
29 display: -moz-box;
30 height: 2px;
31 margin-top: -2px;
32 position: relative;
33 z-index: 2; /* navbar is at 1 */
34 }
36 #navigator-toolbox toolbarbutton:-moz-lwtheme {
37 color: inherit;
38 text-shadow: inherit;
39 }
41 #main-window {
42 -moz-appearance: none;
43 background-color: #eeeeee;
44 }
46 /** Begin titlebar **/
48 #titlebar-buttonbox > .titlebar-button {
49 display: none;
50 }
52 /* NB: these would be -moz-margin-start/end if it wasn't for the fact that OS X
53 * doesn't reverse the order of the items in the titlebar in RTL mode. */
54 .titlebar-placeholder[type="caption-buttons"],
55 #titlebar-buttonbox {
56 margin-left: 7px;
57 }
59 @media (-moz-mac-lion-theme) {
60 .titlebar-placeholder[type="fullscreen-button"],
61 #titlebar-secondary-buttonbox {
62 margin-right: 7px;
63 margin-left: 7px;
64 }
65 }
67 #main-window:not(:-moz-lwtheme) > #titlebar {
68 -moz-appearance: -moz-window-titlebar;
69 }
71 #main-window:not([tabsintitlebar]) > #titlebar {
72 height: 22px; /* The native titlebar on OS X is 22px tall. */
73 }
75 /**
76 * For tabs in titlebar on OS X, we stretch the titlebar down so that the
77 * tabstrip can overlap it.
78 */
79 #main-window[tabsintitlebar] > #titlebar {
80 min-height: calc(@tabMinHeight@ + @spaceAboveTabbar@ - @tabToolbarNavbarOverlap@);
81 }
83 /**
84 * We also vertically center the window buttons.
85 */
86 #main-window[tabsintitlebar] > #titlebar > #titlebar-content > #titlebar-buttonbox-container,
87 #main-window[tabsintitlebar] > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > #titlebar-fullscreen-button {
88 margin-top: @windowButtonMarginTop@;
89 }
91 #main-window[customize-entered] > #titlebar {
92 -moz-appearance: none;
93 }
95 /** End titlebar **/
97 #main-window[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] {
98 border-top: 1px solid rgba(0,0,0,0.65);
99 }
101 /* Because of -moz-box-align: center above, separators will be invisible unless
102 we set their min-height. See bug 583510 for more information. */
103 toolbarseparator {
104 min-height: 22px;
105 }
107 #navigator-toolbox > toolbar:not(#TabsToolbar):not(#nav-bar):not(:-moz-lwtheme) {
108 -moz-appearance: none;
109 background: url(chrome://browser/skin/Toolbar-background-noise.png) hsl(0,0%,83%);
110 }
112 #TabsToolbar:not([collapsed="true"]) + #nav-bar {
113 margin-top: -@tabToolbarNavbarOverlap@; /* Move up into the TabsToolbar */
114 /* Position the toolbar above the bottom of background tabs */
115 position: relative;
116 z-index: 1;
117 }
119 #nav-bar {
120 -moz-appearance: none;
121 background: url(chrome://browser/skin/Toolbar-background-noise.png),
122 linear-gradient(hsl(0,0%,93%), hsl(0,0%,83%));
123 background-clip: border-box;
124 background-origin: border-box !important;
126 /* Move the noise texture out of the top 1px strip because that overlaps
127 with the tabbar and we don't want to repaint it when animating tabs.
128 The noise image is at least 100px high, so repeating it only horizontally
129 is enough. */
130 background-repeat: repeat-x, no-repeat;
131 background-position: 0 1px, 0 0;
133 box-shadow: inset 0 1px 0 hsla(0,0%,100%,.4);
134 }
136 @media (min-resolution: 2dppx) {
137 #nav-bar {
138 background-size: 100px 100px, auto;
139 }
140 }
142 #nav-bar-customization-target {
143 padding: 4px;
144 }
146 #PersonalToolbar {
147 padding: 0 4px 4px;
148 /* 4px padding ^ plus 19px personal-bookmarks (see below) */
149 min-height: 23px;
150 }
152 #navigator-toolbox > toolbar:not(#TabsToolbar):-moz-lwtheme {
153 background-color: @toolbarColorLWT@;
154 background-image: url(chrome://browser/skin/Toolbar-background-noise.png);
155 }
157 #PersonalToolbar:not(:-moz-lwtheme):-moz-window-inactive,
158 #nav-bar:not(:-moz-lwtheme):-moz-window-inactive {
159 background-color: -moz-mac-chrome-inactive;
160 }
162 /* ----- BOOKMARK TOOLBAR ----- */
164 #personal-bookmarks {
165 min-height: 19px; /* 16px button height + 2px padding + 1px margin-bottom */
166 }
168 toolbarbutton.chevron {
169 list-style-image: url("chrome://global/skin/icons/chevron.png");
170 margin: 1px 0 0;
171 padding: 0;
172 }
174 toolbarbutton.chevron > .toolbarbutton-text {
175 display: none;
176 }
178 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon {
179 transform: scaleX(-1);
180 }
182 @media (min-resolution: 2dppx) {
183 toolbarbutton.chevron {
184 list-style-image: url("chrome://global/skin/icons/chevron@2x.png");
185 }
187 toolbarbutton.chevron > .toolbarbutton-icon {
188 width: 13px;
189 }
190 }
192 /* ----- BOOKMARK BUTTONS ----- */
194 toolbarbutton.bookmark-item:not(.subviewbutton):not(#bookmarks-menu-button),
195 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
196 border: 0;
197 border-radius: 10000px;
198 padding: 1px 8px;
199 margin: 0 0 1px;
200 }
202 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
203 -moz-box-orient: horizontal;
204 }
206 .bookmark-item > .toolbarbutton-menu-dropmarker {
207 list-style-image: url("chrome://browser/skin/places/folderDropArrow.png");
208 -moz-image-region: rect(0, 7px, 5px, 0);
209 margin-top: 1px;
210 -moz-margin-start: 3px;
211 -moz-margin-end: -2px;
212 }
214 @media (min-resolution: 2dppx) {
215 .bookmark-item > .toolbarbutton-menu-dropmarker {
216 list-style-image: url("chrome://browser/skin/places/folderDropArrow@2x.png");
217 -moz-image-region: rect(0, 14px, 10px, 0);
218 }
220 .bookmark-item > .toolbarbutton-menu-dropmarker > .dropmarker-icon {
221 width: 7px;
222 }
223 }
225 .bookmark-item > .toolbarbutton-text,
226 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
227 display: -moz-box !important; /* Force the display of the label for bookmarks */
228 margin: 0 !important;
229 }
231 toolbarbutton.bookmark-item:not(.subviewbutton):not(#bookmarks-menu-button):hover {
232 background-color: rgba(0, 0, 0, .205);
233 }
235 toolbarbutton.bookmark-item:hover:not(.subviewbutton),
236 toolbarbutton.bookmark-item[open="true"]:not(.subviewbutton) {
237 color: #FFF !important;
238 text-shadow: 0 1px rgba(0, 0, 0, .4) !important;
239 }
241 .bookmark-item:hover > .toolbarbutton-menu-dropmarker,
242 .bookmark-item[open="true"] > .toolbarbutton-menu-dropmarker {
243 -moz-image-region: rect(5px, 7px, 10px, 0);
244 }
246 @media (min-resolution: 2dppx) {
247 .bookmark-item:hover > .toolbarbutton-menu-dropmarker,
248 .bookmark-item[open="true"] > .toolbarbutton-menu-dropmarker {
249 -moz-image-region: rect(10px, 14px, 20px, 0);
250 }
251 }
253 toolbarbutton.bookmark-item:not(.subviewbutton):not(#bookmarks-menu-button):active:hover,
254 toolbarbutton.bookmark-item:not(.subviewbutton):not(#bookmarks-menu-button)[open="true"] {
255 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.4);
256 background-color: rgba(0, 0, 0, .5);
257 }
259 toolbarbutton.bookmark-item > menupopup {
260 margin-top: 2px;
261 -moz-margin-start: 3px;
262 }
264 .bookmark-item:not(#home-button) > .toolbarbutton-icon,
265 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
266 width: 16px;
267 min-height: 16px;
268 max-height: 16px;
269 }
271 .bookmark-item > .toolbarbutton-icon[label]:not([label=""]),
272 .bookmark-item > .toolbarbutton-icon[type="menu"],
273 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon[label]:not([label=""]) {
274 -moz-margin-end: 5px;
275 }
277 .bookmark-item[container] {
278 list-style-image: url("chrome://global/skin/tree/folder.png");
279 }
281 .bookmark-item[container][livemark] {
282 list-style-image: url("chrome://browser/skin/page-livemarks.png");
283 }
285 .bookmark-item[container][livemark] .bookmark-item {
286 list-style-image: url("chrome://browser/skin/places/livemark-item.png");
287 -moz-image-region: rect(0px, 16px, 16px, 0px);
288 }
290 .bookmark-item[container][livemark] .bookmark-item[visited] {
291 -moz-image-region: rect(0px, 32px, 16px, 16px);
292 }
294 .bookmark-item[container][query] {
295 list-style-image: url("chrome://browser/skin/places/query.png");
296 }
298 .bookmark-item[query][tagContainer] {
299 list-style-image: url("chrome://browser/skin/places/tag.png");
300 }
302 .bookmark-item[query][dayContainer] {
303 list-style-image: url("chrome://browser/skin/places/history.png");
304 }
306 .bookmark-item[query][hostContainer] {
307 list-style-image: url("chrome://global/skin/tree/folder.png");
308 }
310 .bookmark-item[query][hostContainer][open] {
311 list-style-image: url("chrome://global/skin/tree/folder.png");
312 }
314 @media (min-resolution: 2dppx) {
315 .bookmark-item[container] {
316 list-style-image: url("chrome://global/skin/tree/folder@2x.png");
317 }
319 .bookmark-item[container][livemark] {
320 list-style-image: url("chrome://browser/skin/page-livemarks@2x.png");
321 }
323 .bookmark-item[container][livemark] .bookmark-item {
324 list-style-image: url("chrome://browser/skin/places/livemark-item.png");
325 }
327 .bookmark-item[container][query] {
328 list-style-image: url("chrome://browser/skin/places/query@2x.png");
329 }
331 .bookmark-item[query][tagContainer] {
332 list-style-image: url("chrome://browser/skin/places/tag@2x.png");
333 }
335 .bookmark-item[query][dayContainer] {
336 list-style-image: url("chrome://browser/skin/places/history@2x.png");
337 }
339 .bookmark-item[query][hostContainer] {
340 list-style-image: url("chrome://global/skin/tree/folder@2x.png");
341 }
343 .bookmark-item[query][hostContainer][open] {
344 list-style-image: url("chrome://global/skin/tree/folder@2x.png");
345 }
346 }
348 /* Workaround for native menubar inheritance */
349 .openintabs-menuitem,
350 .openlivemarksite-menuitem,
351 .livemarkstatus-menuitem {
352 list-style-image: none;
353 }
355 .bookmark-item[cutting] > .toolbarbutton-icon,
356 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
357 opacity: 0.5;
358 }
360 .bookmark-item[cutting] > .toolbarbutton-text,
361 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
362 opacity: 0.7;
363 }
365 @media (min-resolution: 2dppx) {
366 .bookmark-item > .toolbarbutton-icon,
367 .bookmark-item > .menu-iconic-left > .menu-iconic-icon,
368 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
369 image-rendering: -moz-crisp-edges;
370 }
371 }
373 #bookmarks-toolbar-placeholder {
374 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png") !important;
375 }
377 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
378 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
379 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
380 }
382 @media (min-resolution: 2dppx) {
383 #bookmarks-toolbar-placeholder {
384 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar@2x.png") !important;
385 }
387 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
388 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
389 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel@2x.png") !important;
390 }
392 #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
393 width: 16px;
394 }
395 }
397 /* ----- BOOKMARK STAR ANIMATION ----- */
399 @keyframes animation-bookmarkAdded {
400 from { transform: rotate(0deg) translateX(-14px) rotate(0deg) scale(1); opacity: 0; }
401 60% { transform: rotate(180deg) translateX(-14px) rotate(-180deg) scale(2.2); opacity: 1; }
402 80% { opacity: 1; }
403 to { transform: rotate(180deg) translateX(-14px) rotate(-180deg) scale(1); opacity: 0; }
404 }
406 @keyframes animation-bookmarkPulse {
407 from { transform: scale(1); }
408 50% { transform: scale(1.3); }
409 to { transform: scale(1); }
410 }
412 #bookmarked-notification-container {
413 min-height: 1px;
414 min-width: 1px;
415 height: 1px;
416 margin-bottom: -1px;
417 z-index: 5;
418 position: relative;
419 }
421 #bookmarked-notification {
422 background-size: 16px;
423 background-position: center;
424 background-repeat: no-repeat;
425 width: 16px;
426 height: 16px;
427 opacity: 0;
428 }
430 #bookmarked-notification-dropmarker-anchor {
431 z-index: -1;
432 position: relative;
433 }
435 #bookmarked-notification-dropmarker-icon {
436 width: 18px;
437 height: 18px;
438 visibility: hidden;
439 }
441 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
442 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
443 animation: animation-bookmarkAdded 800ms;
444 animation-timing-function: ease, ease, ease;
445 }
447 @media (min-resolution: 2dppx) {
448 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
449 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish@2x.png");
450 }
451 }
453 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
454 list-style-image: none !important;
455 }
457 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
458 visibility: visible;
459 animation: animation-bookmarkPulse 300ms;
460 animation-delay: 600ms;
461 animation-timing-function: ease-out;
462 }
464 /* ----- BOOKMARK MENUS ----- */
466 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
467 width: 16px;
468 height: 16px;
469 }
471 #bookmarksToolbarFolderMenu,
472 #BMB_bookmarksToolbar,
473 #panelMenu_bookmarksToolbar {
474 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png");
475 }
477 #BMB_unsortedBookmarks,
478 #panelMenu_unsortedBookmarks {
479 list-style-image: url("chrome://browser/skin/places/unfiledBookmarks.png");
480 }
482 @media (min-resolution: 2dppx) {
483 #bookmarksToolbarFolderMenu,
484 #BMB_bookmarksToolbar {
485 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar@2x.png");
486 }
488 #BMB_unsortedBookmarks {
489 list-style-image: url("chrome://browser/skin/places/unfiledBookmarks@2x.png");
490 }
491 }
493 /* ----- PRIMARY TOOLBAR BUTTONS ----- */
495 toolbar .toolbarbutton-1:not([type="menu-button"]),
496 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
497 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
498 -moz-box-orient: vertical;
499 height: 24px;
500 padding: 0;
501 border: 0;
502 }
504 toolbar .toolbarbutton-1:not(:-moz-any([type="menu-button"],#back-button,#forward-button)),
505 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
506 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
507 border: 1px solid transparent;
508 border-radius: @toolbarbuttonCornerRadius@;
509 transition-property: background, border-color;
510 transition-duration: 250ms;
511 }
513 toolbar .toolbarbutton-1:not(:-moz-any([type="menu-button"],#back-button,#forward-button)) {
514 padding: 0 4px;
515 }
517 toolbar .toolbarbutton-1:not(:-moz-any([type="menu-button"],[disabled],[open],#back-button,#forward-button)):hover,
518 toolbar .toolbarbutton-1[type="menu-button"]:not([disabled]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker,
519 toolbar .toolbarbutton-1[type="menu-button"]:not([disabled]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button,
520 toolbar .toolbarbutton-1[type="menu-button"]:not([disabled]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker,
521 toolbar .toolbaritem-combined-buttons:hover > .toolbarbutton-combined {
522 border-color: hsla(0,0%,0%,.2);
523 box-shadow: 0 1px 0 hsla(0,0%,100%,.5),
524 0 1px 0 hsla(0,0%,100%,.5) inset;
525 }
527 toolbar .toolbarbutton-1:not(:-moz-any([type="menu-button"],[disabled],[open],#back-button,#forward-button)):hover,
528 toolbar .toolbarbutton-1[type="menu-button"]:not(:-moz-any([disabled],[open]))[buttonover] > .toolbarbutton-menubutton-button,
529 toolbar .toolbarbutton-1[type="menu-button"]:not(:-moz-any([disabled],[open],[buttonover])):hover > .toolbarbutton-menubutton-dropmarker {
530 background: hsla(0,0%,100%,.1) linear-gradient(hsla(0,0%,100%,.3), hsla(0,0%,100%,.1)) padding-box;
531 }
533 toolbar .toolbarbutton-1:not(:-moz-any([type="menu-button"],[disabled],#back-button,#forward-button)):-moz-any(:hover:active,[open],[checked]),
534 toolbar .toolbarbutton-1[type="menu-button"]:not([disabled]) > .toolbarbutton-menubutton-button[open],
535 toolbar .toolbarbutton-1[type="menu-button"]:not(:-moz-any([disabled],[open]))[buttonover]:active > .toolbarbutton-menubutton-button,
536 toolbar .toolbarbutton-1[type="menu-button"]:not(:-moz-any([disabled],[open],[buttonover])):hover:active > .toolbarbutton-menubutton-dropmarker,
537 toolbar .toolbarbutton-1[type="menu-button"][open]:not([disabled]) > .toolbarbutton-menubutton-dropmarker {
538 background: hsla(0,0%,0%,.02) linear-gradient(hsla(0,0%,0%,.12), hsla(0,0%,0%,0)) border-box;
539 border-color: hsla(0,0%,0%,.3);
540 box-shadow: 0 1px 0 hsla(0,0%,100%,.5),
541 0 1px 0 hsla(0,0%,0%,.05) inset,
542 0 1px 1px hsla(0,0%,0%,.2) inset;
543 transition-duration: 10ms;
544 }
546 toolbar .toolbarbutton-1[checked]:not(:active):hover {
547 background-color: hsla(0,0%,0%,.09);
548 transition: background-color 250ms;
549 }
551 .toolbarbutton-1[type="menu-button"]:not([overflowedItem=true]) {
552 padding: 0;
553 }
555 toolbar .toolbarbutton-1[type="menu-button"] {
556 margin: 0;
557 }
559 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
560 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
561 margin: 0;
562 }
564 .toolbarbutton-1 {
565 margin: 0 4px;
566 }
568 toolbar .toolbarbutton-1:not([type="menu-button"]) {
569 margin: 0 2px;
570 }
572 /**
573 * Draw seperators before toolbar button dropmarkers, as well as between
574 * consecutive toolbarbutton-1's within a toolbaritem.
575 */
576 toolbar .toolbaritem-combined-buttons > separator,
577 toolbar .toolbarbutton-1:not(:-moz-any([open],:hover)) > .toolbarbutton-menubutton-dropmarker::before {
578 content: "";
579 display: -moz-box;
580 position: relative;
581 top: calc(50% - 9px);
582 width: 1px;
583 height: 18px;
584 -moz-margin-start: -1px;
585 background-image: linear-gradient(hsla(0,0%,0%,.15) 0, hsla(0,0%,0%,.15) 18px);
586 background-clip: padding-box;
587 background-position: center;
588 background-repeat: no-repeat;
589 background-size: 1px 18px;
590 box-shadow: 0 0 0 1px hsla(0,0%,100%,.15);
591 }
593 toolbar .toolbaritem-combined-buttons:hover > separator {
594 display: none;
595 }
597 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
598 -moz-box-orient: horizontal;
599 }
601 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
602 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
603 margin: 0 4px;
604 }
606 #nav-bar .toolbarbutton-1:not(#back-button):not(#forward-button) {
607 margin-top: 4px;
608 margin-bottom: 4px;
609 }
611 #nav-bar #PanelUI-button {
612 -moz-box-align: center;
613 }
615 #nav-bar #PanelUI-menu-button {
616 margin-top: 0;
617 margin-bottom: 0;
618 padding-top: 1px;
619 padding-bottom: 1px;
620 -moz-margin-start: 9px;
621 -moz-margin-end: 7px;
622 }
624 @media not all and (min-resolution: 2dppx) {
625 %include ../shared/toolbarbuttons.inc.css
626 %include ../shared/menupanel.inc.css
628 #back-button:hover:active:not([disabled="true"]) {
629 -moz-image-region: rect(18px, 36px, 36px, 18px);
630 }
632 #forward-button:hover:active:not([disabled="true"]) {
633 -moz-image-region: rect(18px, 72px, 36px, 54px);
634 }
636 #home-button@toolbarButtonPressed@ {
637 -moz-image-region: rect(18px, 126px, 36px, 108px);
638 }
640 #bookmarks-menu-button[buttonover]@toolbarButtonPressed@ {
641 -moz-image-region: rect(18px, 144px, 36px, 126px);
642 }
644 #bookmarks-menu-button[starred][buttonover]@toolbarButtonPressed@ {
645 -moz-image-region: rect(18px, 162px, 36px, 144px);
646 }
648 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
649 -moz-image-region: rect(0px, 630px, 18px, 612px);
650 }
652 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker:hover:active:not([disabled="true"]) > .dropmarker-icon {
653 -moz-image-region: rect(18px, 630px, 36px, 612px);
654 }
656 #history-panelmenu@toolbarButtonPressed@ {
657 -moz-image-region: rect(18px, 180px, 36px, 162px);
658 }
660 #downloads-button@toolbarButtonPressed@ {
661 -moz-image-region: rect(18px, 198px, 36px, 180px);
662 }
664 #add-ons-button@toolbarButtonPressed@ {
665 -moz-image-region: rect(18px, 216px, 36px, 198px);
666 }
668 #open-file-button@toolbarButtonPressed@ {
669 -moz-image-region: rect(18px, 234px, 36px, 216px);
670 }
672 #save-page-button@toolbarButtonPressed@ {
673 -moz-image-region: rect(18px, 252px, 36px, 234px);
674 }
676 #sync-button@toolbarButtonPressed@ {
677 -moz-image-region: rect(18px, 270px, 36px, 252px);
678 }
680 #feed-button@toolbarButtonPressed@ {
681 -moz-image-region: rect(18px, 288px, 36px, 270px);
682 }
684 #social-share-button@toolbarButtonPressed@ {
685 -moz-image-region: rect(18px, 306px, 36px, 288px);
686 }
688 #characterencoding-button@toolbarButtonPressed@ {
689 -moz-image-region: rect(18px, 324px, 36px, 306px);
690 }
692 #new-window-button@toolbarButtonPressed@ {
693 -moz-image-region: rect(18px, 342px, 36px, 324px);
694 }
696 #e10s-button@toolbarButtonPressed@ {
697 -moz-image-region: rect(18px, 342px, 36px, 324px);
698 }
700 #new-tab-button@toolbarButtonPressed@ {
701 -moz-image-region: rect(18px, 360px, 36px, 342px);
702 }
704 #privatebrowsing-button@toolbarButtonPressed@ {
705 -moz-image-region: rect(18px, 378px, 36px, 360px);
706 }
708 #find-button@toolbarButtonPressed@ {
709 -moz-image-region: rect(18px, 396px, 36px, 378px);
710 }
712 #print-button@toolbarButtonPressed@ {
713 -moz-image-region: rect(18px, 414px, 36px, 396px);
714 }
716 #restore-button@toolbarButtonPressed@,
717 #fullscreen-button@toolbarButtonPressed@ {
718 -moz-image-region: rect(18px, 432px, 36px, 414px);
719 }
721 #developer-button@toolbarButtonPressed@ {
722 -moz-image-region: rect(18px, 450px, 36px, 432px);
723 }
725 #preferences-button@toolbarButtonPressed@ {
726 -moz-image-region: rect(18px, 468px, 36px, 450px);
727 }
729 #PanelUI-menu-button@toolbarButtonPressed@ {
730 -moz-image-region: rect(18px, 486px, 36px, 468px);
731 }
733 #cut-button@toolbarButtonPressed@ {
734 -moz-image-region: rect(18px, 504px, 36px, 486px);
735 }
737 #copy-button@toolbarButtonPressed@ {
738 -moz-image-region: rect(18px, 522px, 36px, 504px);
739 }
741 #paste-button@toolbarButtonPressed@ {
742 -moz-image-region: rect(18px, 540px, 36px, 522px);
743 }
745 #zoom-out-button@toolbarButtonPressed@ {
746 -moz-image-region: rect(18px, 558px, 36px, 540px);
747 }
749 #zoom-in-button@toolbarButtonPressed@ {
750 -moz-image-region: rect(18px, 576px, 36px, 558px);
751 }
753 #webrtc-status-button@toolbarButtonPressed@ {
754 -moz-image-region: rect(18px, 594px, 36px, 576px);
755 }
757 #nav-bar-overflow-button@toolbarButtonPressed@ {
758 -moz-image-region: rect(18px, 612px, 36px, 594px);
759 }
761 #tabview-button@toolbarButtonPressed@ {
762 -moz-image-region: rect(18px, 648px, 36px, 630px);
763 }
765 #email-link-button@toolbarButtonPressed@ {
766 -moz-image-region: rect(18px, 666px, 36px, 648px);
767 }
769 #sidebar-button@toolbarButtonPressed@ {
770 -moz-image-region: rect(18px, 684px, 36px, 666px);
771 }
773 /**
774 * OSX has a unique set of icons when fullscreen is in the checked state.
775 */
777 #fullscreen-button[checked="true"]:not([cui-areatype="menu-panel"]) {
778 -moz-image-region: rect(36px, 432px, 54px, 414px);
779 }
781 #fullscreen-button[checked="true"]@toolbarButtonPressed@ {
782 -moz-image-region: rect(54px, 432px, 72px, 414px);
783 }
784 }
786 @media (min-resolution: 2dppx) {
787 /* Whitelist built-in buttons, instead of .toolbarbutton-1,
788 to avoid potentially breaking add-on toolbar buttons. */
790 :-moz-any(@primaryToolbarButtons@),
791 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
792 list-style-image: url("chrome://browser/skin/Toolbar@2x.png");
793 }
795 toolbar[brighttext] :-moz-any(@primaryToolbarButtons@),
796 toolbar[brighttext] #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
797 list-style-image: url("chrome://browser/skin/Toolbar-inverted@2x.png");
798 }
800 #back-button {
801 -moz-image-region: rect(0, 72px, 36px, 36px);
802 }
804 #back-button:hover:active:not([disabled="true"]) {
805 -moz-image-region: rect(36px, 72px, 72px, 36px);
806 }
808 #forward-button {
809 -moz-image-region: rect(0, 144px, 36px, 108px);
810 }
812 #forward-button:hover:active:not([disabled="true"]) {
813 -moz-image-region: rect(36px, 144px, 72px, 108px);
814 }
816 #home-button[cui-areatype="toolbar"] {
817 -moz-image-region: rect(0, 252px, 36px, 216px);
818 }
820 #home-button[cui-areatype="toolbar"]:hover:active {
821 -moz-image-region: rect(36px, 252px, 72px, 216px);
822 }
824 #bookmarks-menu-button[cui-areatype="toolbar"] {
825 -moz-image-region: rect(0, 288px, 36px, 252px);
826 }
828 #bookmarks-menu-button[cui-areatype="toolbar"][buttonover]:hover:active:not([disabled="true"]) {
829 -moz-image-region: rect(36px, 288px, 72px, 252px);
830 }
832 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
833 -moz-image-region: rect(0, 324px, 36px, 288px);
834 }
836 #bookmarks-menu-button[cui-areatype="toolbar"][starred][buttonover]:hover:active:not([disabled="true"]) {
837 -moz-image-region: rect(36px, 324px, 72px, 288px);
838 }
840 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
841 -moz-image-region: rect(0px, 1260px, 36px, 1224px);
842 }
844 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker:hover:active:not([disabled="true"]) > .dropmarker-icon {
845 -moz-image-region: rect(36px, 1260px, 72px, 1224px);
846 }
848 #history-panelmenu[cui-areatype="toolbar"] {
849 -moz-image-region: rect(0, 360px, 36px, 324px);
850 }
852 #history-panelmenu[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) {
853 -moz-image-region: rect(36px, 360px, 72px, 324px);
854 }
856 #downloads-button[cui-areatype="toolbar"] {
857 -moz-image-region: rect(0, 396px, 36px, 360px);
858 }
860 #downloads-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) {
861 -moz-image-region: rect(36px, 396px, 72px, 360px);
862 }
864 #add-ons-button[cui-areatype="toolbar"] {
865 -moz-image-region: rect(0, 432px, 36px, 396px);
866 }
868 #add-ons-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) {
869 -moz-image-region: rect(36px, 432px, 72px, 396px);
870 }
872 #open-file-button[cui-areatype="toolbar"] {
873 -moz-image-region: rect(0, 468px, 36px, 432px);
874 }
876 #open-file-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) {
877 -moz-image-region: rect(36px, 468px, 72px, 432px);
878 }
880 #save-page-button[cui-areatype="toolbar"] {
881 -moz-image-region: rect(0, 504px, 36px, 468px);
882 }
884 #save-page-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) {
885 -moz-image-region: rect(36px, 504px, 72px, 468px);
886 }
888 #sync-button[cui-areatype="toolbar"] {
889 -moz-image-region: rect(0, 540px, 36px, 504px);
890 }
892 #sync-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) {
893 -moz-image-region: rect(36px, 540px, 72px, 504px);
894 }
896 #sync-button[cui-areatype="toolbar"][status="active"],
897 #sync-button[cui-areatype="toolbar"][status="active"]:hover:active:not([disabled="true"]) {
898 list-style-image: url("chrome://browser/skin/syncProgress-toolbar@2x.png");
899 -moz-image-region: rect(0, 36px, 36px, 0px);
900 }
902 toolbar[brighttext] #sync-button[cui-areatype="toolbar"][status="active"],
903 toolbar[brighttext] #sync-button[cui-areatype="toolbar"][status="active"]:hover:active:not([disabled="true"]) {
904 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted@2x.png");
905 }
907 #feed-button[cui-areatype="toolbar"] {
908 -moz-image-region: rect(0, 576px, 36px, 540px);
909 }
911 #feed-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) {
912 -moz-image-region: rect(36px, 576px, 72px, 540px);
913 }
915 #social-share-button[cui-areatype="toolbar"] {
916 -moz-image-region: rect(0, 612px, 36px, 576px);
917 }
919 #social-share-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) {
920 -moz-image-region: rect(36px, 612px, 72px, 576px);
921 }
923 #characterencoding-button[cui-areatype="toolbar"] {
924 -moz-image-region: rect(0, 648px, 36px, 612px);
925 }
927 #characterencoding-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) {
928 -moz-image-region: rect(36px, 648px, 72px, 612px);
929 }
931 #new-window-button[cui-areatype="toolbar"] {
932 -moz-image-region: rect(0, 684px, 36px, 648px);
933 }
935 #new-window-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) {
936 -moz-image-region: rect(36px, 684px, 72px, 648px);
937 }
939 #e10s-button[cui-areatype="toolbar"] {
940 -moz-image-region: rect(0, 684px, 36px, 648px);
941 }
943 #e10s-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) {
944 -moz-image-region: rect(36px, 684px, 72px, 648px);
945 }
947 #e10s-button > .toolbarbutton-icon {
948 transform: scaleY(-1);
949 }
951 #new-tab-button[cui-areatype="toolbar"] {
952 -moz-image-region: rect(0, 720px, 36px, 684px);
953 }
955 #new-tab-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) {
956 -moz-image-region: rect(36px, 720px, 72px, 684px);
957 }
959 #privatebrowsing-button[cui-areatype="toolbar"] {
960 -moz-image-region: rect(0, 756px, 36px, 720px);
961 }
963 #privatebrowsing-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) {
964 -moz-image-region: rect(36px, 756px, 72px, 720px);
965 }
967 #find-button[cui-areatype="toolbar"] {
968 -moz-image-region: rect(0, 792px, 36px, 756px);
969 }
971 #find-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) {
972 -moz-image-region: rect(36px, 792px, 72px, 756px);
973 }
975 #print-button[cui-areatype="toolbar"] {
976 -moz-image-region: rect(0, 828px, 36px, 792px);
977 }
979 #print-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) {
980 -moz-image-region: rect(36px, 828px, 72px, 792px);
981 }
983 #restore-button,
984 #fullscreen-button[cui-areatype="toolbar"] {
985 -moz-image-region: rect(0, 864px, 36px, 828px);
986 }
988 #restore-button:hover:active:not([disabled="true"]),
989 #fullscreen-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) {
990 -moz-image-region: rect(36px, 864px, 72px, 828px);
991 }
993 #fullscreen-button[cui-areatype="toolbar"][checked="true"] {
994 -moz-image-region: rect(72px, 864px, 108px, 828px);
995 }
997 #fullscreen-button[cui-areatype="toolbar"][checked="true"]:hover:active:not([disabled="true"]) {
998 -moz-image-region: rect(108px, 864px, 144px, 828px);
999 }
1001 #developer-button[cui-areatype="toolbar"] {
1002 -moz-image-region: rect(0, 900px, 36px, 864px);
1003 }
1005 #developer-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) {
1006 -moz-image-region: rect(36px, 900px, 72px, 864px);
1007 }
1009 #preferences-button[cui-areatype="toolbar"] {
1010 -moz-image-region: rect(0, 936px, 36px, 900px);
1011 }
1013 #preferences-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) {
1014 -moz-image-region: rect(36px, 936px, 72px, 900px);
1015 }
1017 #PanelUI-menu-button {
1018 -moz-image-region: rect(0, 972px, 36px, 936px);
1019 }
1021 #PanelUI-menu-button:hover:active:not([disabled="true"]) {
1022 -moz-image-region: rect(36px, 972px, 72px, 936px);
1023 }
1025 #edit-controls[cui-areatype="toolbar"] > #cut-button {
1026 -moz-image-region: rect(0, 1008px, 36px, 972px);
1027 }
1029 #edit-controls[cui-areatype="toolbar"] > #cut-button:hover:active:not([disabled="true"]) {
1030 -moz-image-region: rect(36px, 1008px, 72px, 972px);
1031 }
1033 #edit-controls[cui-areatype="toolbar"] > #copy-button {
1034 -moz-image-region: rect(0, 1044px, 36px, 1008px);
1035 }
1037 #edit-controls[cui-areatype="toolbar"] > #copy-button:hover:active:not([disabled="true"]) {
1038 -moz-image-region: rect(36px, 1044px, 72px, 1008px);
1039 }
1041 #edit-controls[cui-areatype="toolbar"] > #paste-button {
1042 -moz-image-region: rect(0, 1080px, 36px, 1044px);
1043 }
1045 #edit-controls[cui-areatype="toolbar"] > #paste-button:hover:active:not([disabled="true"]) {
1046 -moz-image-region: rect(36px, 1080px, 72px, 1044px);
1047 }
1049 #zoom-controls[cui-areatype="toolbar"] > #zoom-out-button {
1050 -moz-image-region: rect(0, 1116px, 36px, 1080px);
1051 }
1053 #zoom-controls[cui-areatype="toolbar"] > #zoom-out-button:hover:active:not([disabled="true"]) {
1054 -moz-image-region: rect(36px, 1116px, 72px, 1080px);
1055 }
1057 #zoom-controls[cui-areatype="toolbar"] > #zoom-in-button {
1058 -moz-image-region: rect(0, 1152px, 36px, 1116px);
1059 }
1061 #zoom-controls[cui-areatype="toolbar"] > #zoom-in-button:hover:active:not([disabled="true"]) {
1062 -moz-image-region: rect(36px, 1152px, 72px, 1116px);
1063 }
1065 #webrtc-status-button[cui-areatype="toolbar"] {
1066 -moz-image-region: rect(0, 1188px, 36px, 1152px);
1067 }
1069 #webrtc-status-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) {
1070 -moz-image-region: rect(36px, 1188px, 72px, 1152px);
1071 }
1073 #nav-bar-overflow-button {
1074 -moz-image-region: rect(0, 1224px, 36px, 1188px);
1075 }
1077 #nav-bar-overflow-button:hover:active:not([disabled="true"]) {
1078 -moz-image-region: rect(36px, 1224px, 72px, 1188px);
1079 }
1081 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1082 transform: scaleX(-1);
1083 }
1085 #tabview-button {
1086 -moz-image-region: rect(0, 1296px, 36px, 1260px);
1087 }
1089 #tabview-button@toolbarButtonPressed@ {
1090 -moz-image-region: rect(36px, 1296px, 72px, 1260px);
1091 }
1093 #email-link-button[cui-areatype="toolbar"] {
1094 -moz-image-region: rect(0, 1332px, 36px, 1296px);
1095 }
1097 #email-link-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) {
1098 -moz-image-region: rect(36px, 1332px, 72px, 1296px);
1099 }
1101 #sidebar-button[cui-areatype="toolbar"] {
1102 -moz-image-region: rect(0, 1368px, 36px, 1332px);
1103 }
1105 #sidebar-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) {
1106 -moz-image-region: rect(36px, 1368px, 72px, 1332px);
1107 }
1109 :-moz-any(@primaryToolbarButtons@) > .toolbarbutton-icon,
1110 :-moz-any(@primaryToolbarButtons@) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1111 width: 18px;
1112 }
1114 /* Menu panel and palette styles */
1116 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
1117 :-moz-any(@primaryToolbarButtons@)[cui-areatype="menu-panel"],
1118 toolbarpaletteitem[place="palette"] > :-moz-any(@primaryToolbarButtons@) {
1119 list-style-image: url(chrome://browser/skin/menuPanel@2x.png);
1120 }
1122 #home-button[cui-areatype="menu-panel"],
1123 toolbarpaletteitem[place="palette"] > #home-button {
1124 -moz-image-region: rect(0px, 256px, 64px, 192px);
1125 }
1127 #bookmarks-menu-button[cui-areatype="menu-panel"],
1128 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
1129 -moz-image-region: rect(0px, 384px, 64px, 320px);
1130 }
1132 #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1133 -moz-image-region: rect(64px, 384px, 128px, 320px);
1134 }
1136 #history-panelmenu[cui-areatype="menu-panel"],
1137 toolbarpaletteitem[place="palette"] > #history-panelmenu {
1138 -moz-image-region: rect(0px, 448px, 64px, 384px);
1139 }
1141 #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1142 -moz-image-region: rect(64px, 448px, 128px, 384px);
1143 }
1145 #downloads-button[cui-areatype="menu-panel"],
1146 toolbarpaletteitem[place="palette"] > #downloads-button {
1147 -moz-image-region: rect(0px, 512px, 64px, 448px);
1148 }
1150 #add-ons-button[cui-areatype="menu-panel"],
1151 toolbarpaletteitem[place="palette"] > #add-ons-button {
1152 -moz-image-region: rect(0px, 576px, 64px, 512px);
1153 }
1155 #open-file-button[cui-areatype="menu-panel"],
1156 toolbarpaletteitem[place="palette"] > #open-file-button {
1157 -moz-image-region: rect(0px, 640px, 64px, 576px);
1158 }
1160 #save-page-button[cui-areatype="menu-panel"],
1161 toolbarpaletteitem[place="palette"] > #save-page-button {
1162 -moz-image-region: rect(0px, 704px, 64px, 640px);
1163 }
1165 #sync-button[cui-areatype="menu-panel"],
1166 toolbarpaletteitem[place="palette"] > #sync-button {
1167 -moz-image-region: rect(0px, 768px, 64px, 704px);
1168 }
1170 #sync-button[cui-areatype="menu-panel"][status="active"] {
1171 list-style-image: url(chrome://browser/skin/syncProgress-menuPanel@2x.png);
1172 -moz-image-region: rect(0px, 64px, 64px, 0px);
1173 }
1175 #feed-button[cui-areatype="menu-panel"],
1176 toolbarpaletteitem[place="palette"] > #feed-button {
1177 -moz-image-region: rect(0px, 832px, 64px, 768px);
1178 }
1180 #social-share-button[cui-areatype="menu-panel"],
1181 toolbarpaletteitem[place="palette"] > #social-share-button {
1182 -moz-image-region: rect(0px, 896px, 64px, 832px);
1183 }
1185 #characterencoding-button[cui-areatype="menu-panel"],
1186 toolbarpaletteitem[place="palette"] > #characterencoding-button {
1187 -moz-image-region: rect(0, 960px, 64px, 896px);
1188 }
1190 #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1191 -moz-image-region: rect(64px, 960px, 128px, 896px);
1192 }
1194 #new-window-button[cui-areatype="menu-panel"],
1195 toolbarpaletteitem[place="palette"] > #new-window-button {
1196 -moz-image-region: rect(0px, 1024px, 64px, 960px);
1197 }
1199 #e10s-button[cui-areatype="menu-panel"],
1200 toolbarpaletteitem[place="palette"] > #e10s-button {
1201 -moz-image-region: rect(0px, 1024px, 64px, 960px);
1202 }
1204 #new-tab-button[cui-areatype="menu-panel"],
1205 toolbarpaletteitem[place="palette"] > #new-tab-button {
1206 -moz-image-region: rect(0px, 1088px, 64px, 1024px);
1207 }
1209 #privatebrowsing-button[cui-areatype="menu-panel"],
1210 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1211 -moz-image-region: rect(0px, 1152px, 64px, 1088px);
1212 }
1214 #tabview-button[cui-areatype="menu-panel"],
1215 toolbarpaletteitem[place="palette"] > #tabview-button {
1216 -moz-image-region: rect(0px, 1216px, 64px, 1152px);
1217 }
1219 #find-button[cui-areatype="menu-panel"],
1220 toolbarpaletteitem[place="palette"] > #find-button {
1221 -moz-image-region: rect(0px, 1280px, 64px, 1216px);
1222 }
1224 #print-button[cui-areatype="menu-panel"],
1225 toolbarpaletteitem[place="palette"] > #print-button {
1226 -moz-image-region: rect(0px, 1344px, 64px, 1280px);
1227 }
1229 #fullscreen-button[cui-areatype="menu-panel"],
1230 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1231 -moz-image-region: rect(0px, 1408px, 64px, 1344px);
1232 }
1234 #developer-button[cui-areatype="menu-panel"],
1235 toolbarpaletteitem[place="palette"] > #developer-button {
1236 -moz-image-region: rect(0px, 1472px, 64px, 1408px);
1237 }
1239 #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1240 -moz-image-region: rect(64px, 1472px, 128px, 1408px);
1241 }
1243 #preferences-button[cui-areatype="menu-panel"],
1244 toolbarpaletteitem[place="palette"] > #preferences-button {
1245 -moz-image-region: rect(0px, 1536px, 64px, 1472px);
1246 }
1248 #email-link-button[cui-areatype="menu-panel"],
1249 toolbarpaletteitem[place="palette"] > #email-link-button {
1250 -moz-image-region: rect(0px, 1600px, 64px, 1536px);
1251 }
1253 #sidebar-button[cui-areatype="menu-panel"],
1254 toolbarpaletteitem[place="palette"] > #sidebar-button {
1255 -moz-image-region: rect(0px, 1728px, 64px, 1664px);
1256 }
1258 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1259 -moz-image-region: rect(0, 1664px, 64px, 1600px);
1260 }
1262 /* Footer and wide panel control icons */
1263 #edit-controls@inAnyPanel@ > toolbarbutton,
1264 #zoom-controls@inAnyPanel@ > toolbarbutton,
1265 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1266 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1267 list-style-image: url(chrome://browser/skin/menuPanel-small@2x.png);
1268 }
1270 /* Wide items like the Cut/Copy/Paste and Zoom controls are special in that their icons
1271 are 16x16 when in the panel, but 18x18 when in a toolbar. */
1272 #edit-controls@inAnyPanel@ > toolbarbutton > .toolbarbutton-icon,
1273 #zoom-controls@inAnyPanel@ > toolbarbutton > .toolbarbutton-icon,
1274 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
1275 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
1276 width: 16px;
1277 }
1279 #edit-controls@inAnyPanel@ > #cut-button,
1280 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1281 -moz-image-region: rect(0px, 64px, 32px, 32px);
1282 }
1284 #edit-controls@inAnyPanel@ > #copy-button,
1285 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1286 -moz-image-region: rect(0px, 96px, 32px, 64px);
1287 }
1289 #edit-controls@inAnyPanel@ > #paste-button,
1290 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1291 -moz-image-region: rect(0px, 128px, 32px, 96px);
1292 }
1294 #zoom-controls@inAnyPanel@ > #zoom-out-button,
1295 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1296 -moz-image-region: rect(0px, 160px, 32px, 128px);
1297 }
1299 #zoom-controls@inAnyPanel@ > #zoom-in-button,
1300 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1301 -moz-image-region: rect(0px, 192px, 32px, 160px);
1302 }
1304 #PanelUI-fxa-status > .toolbarbutton-icon,
1305 #PanelUI-quit > .toolbarbutton-icon,
1306 #PanelUI-customize > .toolbarbutton-icon,
1307 #PanelUI-help > .toolbarbutton-icon {
1308 width: 16px;
1309 }
1310 }
1312 toolbar .toolbarbutton-1:not([type="menu-button"]),
1313 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1314 min-width: 28px;
1315 }
1317 /* Help 16px icons fit: */
1318 .toolbarbutton-1[cui-areatype="toolbar"]:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon {
1319 margin: 2px;
1320 }
1322 /* Help SDK icons fit: */
1323 toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1324 width: 16px;
1325 }
1327 #main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-icon,
1328 #main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-badge-container > .toolbarbutton-icon,
1329 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled="true"] > .toolbarbutton-icon {
1330 opacity: .4;
1331 }
1333 @media (-moz-mac-lion-theme) {
1334 #main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-icon,
1335 #main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-badge-container > .toolbarbutton-icon,
1336 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled="true"] > .toolbarbutton-icon,
1337 #main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-menu-dropmarker,
1338 #main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-menubutton-dropmarker,
1339 .toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-icon,
1340 .toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-text,
1341 .toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-badge-container > .toolbarbutton-icon,
1342 .toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-menu-dropmarker,
1343 .toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1344 .toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1345 opacity: .5;
1346 }
1348 #main-window:not([customizing]) .toolbarbutton-1:-moz-window-inactive[disabled="true"] > .toolbarbutton-icon,
1349 #main-window:not([customizing]) .toolbarbutton-1:-moz-window-inactive[disabled="true"] > .toolbarbutton-badge-container > .toolbarbutton-icon,
1350 #main-window:not([customizing]) .toolbarbutton-1:-moz-window-inactive > .toolbarbutton-menubutton-button[disabled="true"] > .toolbarbutton-icon {
1351 opacity: .25;
1352 }
1353 }
1355 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1356 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1357 list-style-image: url(chrome://browser/skin/toolbarbutton-dropmarker.png);
1358 }
1360 @media (min-resolution: 2dppx) {
1361 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1362 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1363 list-style-image: url(chrome://browser/skin/toolbarbutton-dropmarker@2x.png);
1364 }
1366 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker > .dropmarker-icon,
1367 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1368 width: 7px;
1369 }
1370 }
1372 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1373 -moz-margin-end: 1px;
1374 }
1376 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1377 -moz-border-end: none !important;
1378 }
1380 .toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-locale-dir(rtl),
1381 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(ltr) {
1382 border-top-left-radius: 0;
1383 border-bottom-left-radius: 0;
1384 }
1386 .toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-locale-dir(ltr),
1387 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
1388 border-top-right-radius: 0;
1389 border-bottom-right-radius: 0;
1390 }
1392 .toolbarbutton-1 > .toolbarbutton-text,
1393 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1394 margin: 2px 0 0;
1395 }
1397 .toolbarbutton-1 > menupopup {
1398 margin-top: 1px;
1399 }
1401 .toolbarbutton-1 > menupopup.cui-widget-panel {
1402 margin-top: -5px;
1403 }
1405 /* Common back and forward button styles */
1407 #back-button,
1408 #forward-button {
1409 background: linear-gradient(rgba(255,255,255,0.5),
1410 rgba(255,255,255,0.2) 50%,
1411 rgba(255,255,255,0.1) 50%,
1412 rgba(255,255,255,0.2)) repeat-x;
1413 }
1415 #back-button:-moz-lwtheme,
1416 #forward-button:-moz-lwtheme {
1417 background-origin: border-box;
1418 border: 1px solid rgba(0,0,0,0.4);
1419 box-shadow: inset 0 1px rgba(255,255,255,0.3), 0 1px rgba(255,255,255,0.2);
1420 }
1422 #back-button:active:hover:-moz-lwtheme,
1423 #forward-button:active:hover:-moz-lwtheme {
1424 background-color: rgba(0,0,0,0.2);
1425 box-shadow: inset 0 2px 5px rgba(0,0,0,0.6), 0 1px rgba(255,255,255,0.2);
1426 }
1428 #back-button:-moz-window-inactive,
1429 #forward-button:-moz-window-inactive {
1430 background-color: rgba(0,0,0,0.04);
1431 border-color: rgba(0,0,0,0.2);
1432 }
1434 #back-button:-moz-locale-dir(rtl) {
1435 transform: scaleX(-1);
1436 }
1438 /* Back button styles */
1440 #back-button {
1441 width: 32px;
1442 height: 32px;
1443 padding: 4px 5px 4px 3px;
1444 -moz-margin-end: 0;
1445 border-radius: 10000px;
1446 }
1448 #back-button:not(:-moz-lwtheme) {
1449 height: 33px;
1450 padding: 4px 5px 5px 3px;
1451 margin-bottom: -1px;
1452 background: url(chrome://browser/skin/keyhole-circle.png) 0 0 no-repeat;
1453 }
1455 @media (min-resolution: 2dppx) {
1456 #back-button:not(:-moz-lwtheme) {
1457 background-image: url(chrome://browser/skin/keyhole-circle@2x.png);
1458 background-size: 96px;
1459 }
1460 }
1462 #back-button:-moz-window-inactive:not(:-moz-lwtheme) {
1463 background-position: -64px 0;
1464 }
1466 #back-button:not([disabled="true"]):active:hover:not(:-moz-lwtheme),
1467 #back-button[open="true"]:not(:-moz-lwtheme) {
1468 background-position: -32px 0;
1469 }
1471 /* Forward button styles */
1473 #forward-button {
1474 margin-left: -2px;
1475 margin-right: 0;
1476 padding-left: 2px;
1477 width: 32px;
1478 }
1480 #forward-button > .toolbarbutton-icon {
1481 /* shift the icon away from the back button */
1482 margin-left: 3px;
1483 margin-right: -1px;
1484 }
1486 #forward-button:not(:-moz-lwtheme) {
1487 background: linear-gradient(hsl(0,0%,99%), hsl(0,0%,67%)) padding-box;
1488 border: 1px solid;
1489 border-color: hsl(0,0%,31%) hsla(0,0%,29%,.6) hsl(0,0%,27%);
1490 box-shadow: inset 0 1px 0 hsla(0,0%,100%,.35),
1491 0 1px 0 hsla(0,0%,100%,.2);
1492 }
1494 #forward-button:hover:active:not(:-moz-lwtheme) {
1495 background-image: linear-gradient(hsl(0,0%,74%), hsl(0,0%,61%));
1496 box-shadow: inset rgba(0,0,0,.3) 0 -6px 10px,
1497 inset #000 0 1px 3px,
1498 inset rgba(0,0,0,.2) 0 1px 3px,
1499 0 1px 0 hsla(0,0%,100%,.2);
1500 }
1502 #forward-button:-moz-window-inactive:not(:-moz-lwtheme) {
1503 border-color: hsl(0,0%,64%) hsl(0,0%,65%) hsl(0,0%,66%);
1504 background-image: linear-gradient(hsl(0,0%,99%), hsl(0,0%,82%));
1505 box-shadow: inset 0 1px 0 hsla(0,0%,100%,.35);
1506 }
1508 @media (-moz-mac-lion-theme) {
1509 #forward-button:not(:-moz-lwtheme) {
1510 background-image: linear-gradient(hsla(0,0%,100%,.73), hsla(0,0%,100%,.05) 85%);
1511 border-color: hsla(0,0%,0%,.35) hsla(0,0%,0%,.25) hsla(0,0%,0%,.2);
1512 box-shadow: inset 0 1px 0 hsla(0,0%,100%,.2),
1513 inset 0 0 1px hsla(0,0%,100%,.1),
1514 0 1px 0 hsla(0,0%,100%,.2);
1515 }
1517 #forward-button:hover:active:not(:-moz-lwtheme) {
1518 background-image: linear-gradient(hsla(0,0%,60%,.37), hsla(0,0%,100%,.35) 95%);
1519 border-color: hsla(0,0%,0%,.43) hsla(0,0%,0%,.25) hsla(0,0%,0%,.37);
1520 box-shadow: inset 0 1px 0 hsla(0,0%,0%,.02),
1521 inset 0 1px 2px hsla(0,0%,0%,.2),
1522 0 1px 0 hsla(0,0%,100%,.2);
1523 }
1525 #forward-button:-moz-window-inactive:not(:-moz-lwtheme) {
1526 background-image: none;
1527 border-color: hsla(0,0%,0%,.2);
1528 }
1529 }
1531 @conditionalForwardWithUrlbar@:not([switchingtabs]) > #forward-button {
1532 transition: margin-left @forwardTransitionLength@ ease-out;
1533 }
1535 @conditionalForwardWithUrlbar@ > #forward-button[disabled] {
1536 margin-left: -@conditionalForwardWithUrlbarWidth@px;
1537 }
1539 @conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] {
1540 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1541 transition-delay: 100s;
1542 }
1544 @conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] {
1545 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1546 margin-left: -@conditionalForwardWithUrlbarWidth@.01px;
1547 }
1549 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1550 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1551 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1552 }
1554 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1555 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1556 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1557 }
1559 /* home button */
1561 #home-button.bookmark-item {
1562 /* We need to use !important here, because other selectors that apply padding
1563 are more specific. */
1564 padding-top: 0 !important;
1565 padding-bottom: 0 !important;
1566 }
1568 #home-button.bookmark-item > .toolbarbutton-icon {
1569 display: -moz-box !important;
1570 -moz-margin-start: -2px;
1571 -moz-margin-end: 3px;
1572 }
1574 /* tabview menu item */
1576 #menu_tabview {
1577 list-style-image: url(chrome://browser/skin/tabview/tabview.png);
1578 }
1580 #menu_tabview {
1581 -moz-image-region: rect(2px, 98px, 18px, 82px);
1582 }
1584 #menu_tabview[groups="0"] {
1585 -moz-image-region: rect(2px, 18px, 18px, 2px);
1586 }
1588 #menu_tabview[groups="1"] {
1589 -moz-image-region: rect(2px, 38px, 18px, 22px);
1590 }
1592 #menu_tabview[groups="2"] {
1593 -moz-image-region: rect(2px, 58px, 18px, 42px);
1594 }
1596 #menu_tabview[groups="3"] {
1597 -moz-image-region: rect(2px, 78px, 18px, 62px);
1598 }
1600 #cut-button {
1601 -moz-margin-end: 0;
1602 }
1604 #edit-controls[cui-areatype="toolbar"] > #cut-button {
1605 -moz-border-end: 0;
1606 }
1608 #paste-button {
1609 -moz-border-start: none;
1610 -moz-margin-start: 0;
1611 }
1613 #cut-button:-moz-locale-dir(ltr),
1614 #paste-button:-moz-locale-dir(rtl) {
1615 border-top-right-radius: 0;
1616 border-bottom-right-radius: 0;
1617 }
1619 #cut-button:-moz-locale-dir(rtl),
1620 #paste-button:-moz-locale-dir(ltr) {
1621 border-top-left-radius: 0;
1622 border-bottom-left-radius: 0;
1623 }
1625 #copy-button {
1626 border-radius: 0;
1627 margin-right: 0;
1628 margin-left: 0;
1629 }
1631 /* zoom controls */
1633 #zoom-out-button {
1634 -moz-margin-end: 0;
1635 }
1637 #zoom-in-button {
1638 -moz-margin-start: 0;
1639 -moz-border-start: 0;
1640 }
1642 #zoom-controls[cui-areatype="toolbar"] > #zoom-out-button {
1643 -moz-border-end: 0;
1644 }
1646 #zoom-controls[cui-areatype="toolbar"] > #zoom-in-button {
1647 -moz-border-start-width: 1px;
1648 }
1650 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button {
1651 border-radius: 0;
1652 }
1654 #zoom-out-button:-moz-locale-dir(ltr),
1655 #zoom-in-button:-moz-locale-dir(rtl) {
1656 border-top-right-radius: 0;
1657 border-bottom-right-radius: 0;
1658 }
1660 #zoom-out-button:-moz-locale-dir(rtl),
1661 #zoom-in-button:-moz-locale-dir(ltr) {
1662 border-top-left-radius: 0;
1663 border-bottom-left-radius: 0;
1664 }
1666 #zoom-controls[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zoom-reset-button {
1667 min-width: 0;
1668 margin: 0;
1669 -moz-box-orient: horizontal;
1670 -moz-box-align: center;
1671 }
1673 #zoom-controls[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zoom-reset-button > .toolbarbutton-text {
1674 margin-top: 0;
1675 }
1677 /* ----- FULLSCREEN WINDOW CONTROLS ----- */
1679 #minimize-button,
1680 #close-button,
1681 #fullscreen-button ~ #window-controls > #restore-button {
1682 display: none;
1683 }
1685 /* ::::: nav-bar-inner ::::: */
1687 #urlbar,
1688 .searchbar-textbox {
1689 font: icon;
1690 -moz-appearance: none;
1691 box-shadow: 0 1px rgba(255, 255, 255, 0.2), inset 0 1px hsla(0,0%,0%,.05);
1692 margin: 0 4px;
1693 padding: 1px 0;
1694 border: 1px solid;
1695 border-color: #626262 #787878 #8c8c8c;
1696 background-clip: padding-box;
1697 }
1699 @media (-moz-mac-lion-theme) {
1700 #urlbar,
1701 .searchbar-textbox {
1702 background-image: linear-gradient(hsl(0,0%,97%), hsl(0,0%,100%));
1703 border-color: hsla(0,0%,0%,.35) hsla(0,0%,0%,.25) hsla(0,0%,0%,.15);
1704 box-shadow: 0 1px 0 hsla(0,0%,100%,.2),
1705 inset 0 0 1px hsla(0,0%,0%,.05),
1706 inset 0 1px 2px hsla(0,0%,0%,.1);
1707 }
1708 }
1710 @media not all and (-moz-mac-lion-theme) {
1711 #urlbar:-moz-window-inactive,
1712 .searchbar-textbox:-moz-window-inactive {
1713 border-color: @toolbarbuttonInactiveBorderColor@;
1714 }
1715 }
1717 #urlbar[focused="true"],
1718 .searchbar-textbox[focused="true"] {
1719 border-color: -moz-mac-focusring;
1720 box-shadow: @focusRingShadow@;
1721 }
1723 #urlbar-container {
1724 -moz-box-align: center;
1725 }
1727 #urlbar {
1728 -moz-padding-end: 4px;
1729 border-radius: @toolbarbuttonCornerRadius@;
1730 }
1732 @conditionalForwardWithUrlbar@ > #urlbar {
1733 -moz-border-start: none;
1734 margin-left: 0;
1735 }
1737 @conditionalForwardWithUrlbar@ > #urlbar:-moz-locale-dir(ltr) {
1738 border-top-left-radius: 0;
1739 border-bottom-left-radius: 0;
1740 }
1742 @conditionalForwardWithUrlbar@ > #urlbar:-moz-locale-dir(rtl) {
1743 border-top-right-radius: 0;
1744 border-bottom-right-radius: 0;
1745 }
1747 @conditionalForwardWithUrlbar@ {
1748 clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");
1749 -moz-margin-start: -6px;
1750 }
1752 @conditionalForwardWithUrlbar@:-moz-locale-dir(rtl),
1753 @conditionalForwardWithUrlbar@ > #urlbar:-moz-locale-dir(rtl) {
1754 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1755 transform: scaleX(-1);
1756 }
1758 @conditionalForwardWithUrlbar@:-moz-locale-dir(rtl) {
1759 -moz-box-direction: reverse;
1760 }
1762 #identity-box {
1763 -moz-margin-end: 3px;
1764 padding-top: 1px;
1765 padding-bottom: 1px;
1766 -moz-padding-start: 4px;
1767 -moz-padding-end: 0;
1768 font-size: .9em;
1769 }
1771 #identity-box:-moz-locale-dir(ltr) {
1772 border-top-left-radius: 2px;
1773 border-bottom-left-radius: 2px;
1774 }
1776 #identity-box:-moz-locale-dir(rtl) {
1777 border-top-right-radius: 2px;
1778 border-bottom-right-radius: 2px;
1779 }
1781 #notification-popup-box:not([hidden]) + #identity-box {
1782 -moz-padding-start: 10px;
1783 border-radius: 0;
1784 }
1786 @conditionalForwardWithUrlbar@ > #urlbar > #identity-box {
1787 border-radius: 0;
1788 }
1790 @conditionalForwardWithUrlbar@:not([switchingtabs]) > #urlbar > #identity-box {
1791 transition: padding-left, padding-right;
1792 }
1794 @conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
1795 padding-left: 10px;
1796 }
1798 @conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
1799 padding-right: 10px;
1800 }
1802 @conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box {
1803 /* forward button hiding is delayed when hovered */
1804 transition-delay: 100s;
1805 }
1807 @conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
1808 padding-left: 10.01px;
1809 }
1811 @conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
1812 padding-right: 10.01px;
1813 }
1815 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI,
1816 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1817 -moz-padding-end: 4px;
1818 }
1820 #identity-box:-moz-focusring {
1821 box-shadow: 0 0 2px 1px -moz-mac-focusring inset,
1822 0 0 2px 2px -moz-mac-focusring;
1823 -moz-border-end-style: none;
1824 -moz-padding-end: 5px;
1825 }
1827 #identity-icon-labels {
1828 -moz-margin-start: 4px;
1829 }
1831 .urlbar-input-box {
1832 -moz-margin-start: 0;
1833 padding: 3px 0 2px;
1834 }
1836 .urlbar-history-dropmarker {
1837 padding: 0 3px;
1838 list-style-image: url("chrome://browser/skin/urlbar-history-dropmarker.png");
1839 -moz-image-region: rect(0px, 11px, 14px, 0px);
1840 }
1842 .urlbar-history-dropmarker[open="true"],
1843 .urlbar-history-dropmarker:hover:active {
1844 -moz-image-region: rect(0px, 22px, 14px, 11px);
1845 background-image: radial-gradient(circle closest-side, hsla(205,100%,70%,.3), hsla(205,100%,70%,0));
1846 }
1848 @media (min-resolution: 2dppx) {
1849 .urlbar-history-dropmarker {
1850 list-style-image: url("chrome://browser/skin/urlbar-history-dropmarker@2x.png");
1851 -moz-image-region: rect(0px, 22px, 28px, 0px);
1852 }
1854 .urlbar-history-dropmarker[open="true"],
1855 .urlbar-history-dropmarker:hover:active {
1856 -moz-image-region: rect(0px, 44px, 28px, 22px);
1857 }
1859 .urlbar-history-dropmarker > .dropmarker-icon {
1860 width: 11px;
1861 }
1862 }
1864 #urlbar-icons {
1865 -moz-box-align: center;
1866 }
1868 .urlbar-icon {
1869 padding: 0 3px;
1870 }
1872 .urlbar-icon[open="true"],
1873 .urlbar-icon:hover:active {
1874 background-image: radial-gradient(circle closest-side, hsla(205,100%,70%,.3), hsla(205,100%,70%,0));
1875 }
1877 #urlbar-search-splitter {
1878 min-width: 8px;
1879 width: 8px;
1880 background-image: none;
1881 margin: 0 -4px;
1882 position: relative;
1883 height: 22px;
1884 }
1886 #search-container {
1887 min-width: calc(54px + 11ch);
1888 }
1890 %include ../shared/identity-block.inc.css
1892 #page-proxy-favicon {
1893 margin: 0px;
1894 padding: 0px;
1895 -moz-image-region: rect(0, 16px, 16px, 0);
1896 }
1898 #identity-box:hover:active > #page-proxy-favicon,
1899 #identity-box[open=true] > #page-proxy-favicon {
1900 -moz-image-region: rect(0, 32px, 16px, 16px);
1901 }
1903 /* The chromeUI identity-icon set includes three states,
1904 but OS X only uses two of them. */
1905 #identity-box.chromeUI:hover:active > #page-proxy-favicon,
1906 #identity-box.chromeUI[open=true] > #page-proxy-favicon {
1907 -moz-image-region: rect(0, 48px, 16px, 32px);
1908 }
1910 @media (min-resolution: 2dppx) {
1911 #page-proxy-favicon {
1912 list-style-image: url(chrome://browser/skin/identity-icons-generic@2x.png);
1913 -moz-image-region: rect(0, 32px, 32px, 0);
1914 }
1916 .chromeUI > #page-proxy-favicon[pageproxystate="valid"] {
1917 list-style-image: url(chrome://branding/content/identity-icons-brand@2x.png);
1918 }
1920 .verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] {
1921 list-style-image: url(chrome://browser/skin/identity-icons-https@2x.png);
1922 }
1924 .verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] {
1925 list-style-image: url(chrome://browser/skin/identity-icons-https-ev@2x.png);
1926 }
1928 .mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] {
1929 list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active@2x.png);
1930 }
1932 .mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] {
1933 list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display@2x.png);
1934 }
1936 .mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] {
1937 list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display@2x.png);
1938 }
1940 #identity-box:hover:active > #page-proxy-favicon,
1941 #identity-box[open=true] > #page-proxy-favicon {
1942 -moz-image-region: rect(0, 64px, 32px, 32px);
1943 }
1945 /* The chromeUI identity-icon set includes three states,
1946 but OS X only uses two of them. */
1947 #identity-box.chromeUI:hover:active > #page-proxy-favicon,
1948 #identity-box.chromeUI[open=true] > #page-proxy-favicon {
1949 -moz-image-region: rect(0, 96px, 32px, 64px);
1950 }
1951 }
1953 #wrapper-urlbar-container[place="palette"] {
1954 max-width: 20em;
1955 }
1957 #urlbar-display-box {
1958 -moz-border-end: 1px solid #AAA;
1959 -moz-margin-end: 3px;
1960 }
1962 #urlbar-display {
1963 margin-top: 0;
1964 margin-bottom: 0;
1965 color: GrayText;
1966 }
1968 #PopupAutoCompleteRichResult {
1969 margin-top: 2px;
1970 }
1972 /* ----- AUTOCOMPLETE ----- */
1974 #treecolAutoCompleteImage {
1975 max-width: 36px;
1976 }
1978 .ac-result-type-bookmark,
1979 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
1980 list-style-image: url("chrome://browser/skin/places/star-icons.png");
1981 -moz-image-region: rect(0, 48px, 16px, 32px);
1982 }
1984 .ac-result-type-keyword,
1985 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
1986 list-style-image: url(chrome://global/skin/icons/search-textbox.png);
1987 margin: 2px;
1988 width: 12px;
1989 height: 12px;
1990 }
1992 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
1993 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
1994 list-style-image: url("chrome://browser/skin/places/star-icons.png");
1995 -moz-image-region: rect(0, 64px, 16px, 48px);
1996 }
1998 .ac-result-type-tag,
1999 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2000 list-style-image: url("chrome://browser/skin/places/tag.png");
2001 width: 16px;
2002 height: 16px;
2003 }
2005 .ac-extra > .ac-comment {
2006 font-size: inherit;
2007 }
2009 .ac-url-text,
2010 .ac-action-text {
2011 color: -moz-nativehyperlinktext;
2012 font: message-box;
2013 }
2015 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2016 list-style-image: url("chrome://browser/skin/actionicon-tab.png");
2017 -moz-image-region: rect(0, 16px, 11px, 0);
2018 padding: 0 3px;
2019 }
2021 richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
2022 -moz-image-region: rect(11px, 16px, 22px, 0);
2023 }
2025 @media (min-resolution: 2dppx) {
2026 .ac-result-type-bookmark {
2027 list-style-image: url("chrome://browser/skin/places/star-icons@2x.png");
2028 -moz-image-region: rect(0, 64px, 32px, 32px);
2029 }
2031 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark {
2032 list-style-image: url("chrome://browser/skin/places/star-icons@2x.png");
2033 -moz-image-region: rect(0, 128px, 32px, 96px);
2034 }
2036 .ac-result-type-tag {
2037 list-style-image: url("chrome://browser/skin/places/tag@2x.png");
2038 }
2040 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2041 list-style-image: url("chrome://browser/skin/actionicon-tab@2x.png");
2042 -moz-image-region: rect(0, 32px, 22px, 0);
2043 width: 22px;
2044 }
2046 richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
2047 -moz-image-region: rect(22px, 32px, 44px, 0);
2048 }
2049 }
2051 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
2052 color: GrayText;
2053 }
2055 .ac-comment[selected="true"],
2056 .ac-url-text[selected="true"],
2057 .ac-action-text[selected="true"] {
2058 color: inherit !important;
2059 }
2061 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2062 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2063 {
2064 color: GrayText;
2065 font-size: smaller;
2066 }
2068 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2069 border-top: 1px solid GrayText;
2070 }
2073 /* ----- COMBINED GO/RELOAD/STOP BUTTON IN LOCATION BAR ----- */
2075 #urlbar > toolbarbutton {
2076 margin: 0;
2077 -moz-padding-start: 2px;
2078 -moz-padding-end: 1px;
2079 background-origin: border-box;
2080 list-style-image: url("chrome://browser/skin/reload-stop-go.png");
2081 }
2083 #urlbar > toolbarbutton:not([disabled]):hover:active {
2084 background-image: radial-gradient(circle closest-side, hsla(205,100%,70%,.3), hsla(205,100%,70%,0));
2085 }
2087 #urlbar-go-button {
2088 -moz-image-region: rect(0, 42px, 14px, 28px);
2089 }
2091 #urlbar-go-button:hover:active {
2092 -moz-image-region: rect(14px, 42px, 28px, 28px);
2093 }
2095 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2096 transform: scaleX(-1);
2097 }
2099 #urlbar-reload-button {
2100 -moz-image-region: rect(0, 14px, 14px, 0);
2101 }
2103 #urlbar-reload-button:not([disabled]):hover:active {
2104 -moz-image-region: rect(14px, 14px, 28px, 0);
2105 }
2107 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2108 transform: scaleX(-1);
2109 }
2111 #urlbar-stop-button {
2112 -moz-image-region: rect(0, 28px, 14px, 14px);
2113 }
2115 #urlbar-stop-button:hover:active {
2116 -moz-image-region: rect(14px, 28px, 28px, 14px);
2117 }
2119 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2120 width: 18px;
2121 height: 18px;
2122 }
2124 #bookmarks-menu-button[cui-areatype="toolbar"].bookmark-item > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2125 width: 16px;
2126 height: 16px;
2127 }
2129 #BMB_bookmarksPopup[side="top"],
2130 #BMB_bookmarksPopup[side="bottom"] {
2131 margin-left: -26px;
2132 margin-right: -26px;
2133 }
2135 #BMB_bookmarksPopup[side="left"],
2136 #BMB_bookmarksPopup[side="right"] {
2137 margin-top: -26px;
2138 margin-bottom: -26px;
2139 }
2141 @media (min-resolution: 2dppx) {
2142 #urlbar > toolbarbutton {
2143 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2144 }
2146 #urlbar-go-button {
2147 -moz-image-region: rect(0, 84px, 28px, 56px);
2148 }
2150 #urlbar-go-button:hover:active {
2151 -moz-image-region: rect(28px, 84px, 56px, 56px);
2152 }
2154 #urlbar-reload-button {
2155 -moz-image-region: rect(0, 28px, 28px, 0);
2156 }
2158 #urlbar-reload-button:not([disabled]):hover:active {
2159 -moz-image-region: rect(28px, 28px, 56px, 0);
2160 }
2162 #urlbar-stop-button {
2163 -moz-image-region: rect(0, 56px, 28px, 28px);
2164 }
2166 #urlbar-stop-button:hover:active {
2167 -moz-image-region: rect(28px, 56px, 56px, 28px);
2168 }
2170 #urlbar > toolbarbutton > .toolbarbutton-icon {
2171 width: 14px;
2172 }
2173 }
2175 /* POPUP BLOCKER BUTTON */
2176 #page-report-button {
2177 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2178 -moz-image-region: rect(0, 16px, 16px, 0);
2179 }
2181 #page-report-button:hover:active,
2182 #page-report-button[open="true"] {
2183 -moz-image-region: rect(0, 32px, 16px, 16px);
2184 }
2186 @media (min-resolution: 2dppx) {
2187 #page-report-button {
2188 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked@2x.png");
2189 -moz-image-region: rect(0, 32px, 32px, 0);
2190 width: 22px;
2191 }
2193 #page-report-button:hover:active,
2194 #page-report-button[open="true"] {
2195 -moz-image-region: rect(0, 64px, 32px, 32px);
2196 }
2197 }
2199 /* social share panel */
2200 .social-share-frame {
2201 background: linear-gradient(to bottom, rgba(242,242,242,.99), rgba(242,242,242,.95));
2202 border-left: 1px solid #f8f8f8;
2203 width: 330px;
2204 height: 150px;
2205 /* we resize our panels dynamically, make it look nice */
2206 transition: height 100ms ease-out, width 100ms ease-out;
2207 }
2209 .social-share-toolbar {
2210 border-right: 1px solid #dedede;
2211 background: linear-gradient(to bottom, rgba(247,247,247,.99), rgba(247,247,247,.95));
2212 }
2214 #social-share-provider-buttons {
2215 border-right: 1px solid #fbfbfb;
2216 padding: 6px;
2217 }
2219 #social-share-provider-buttons > .share-provider-button {
2220 padding: 6px;
2221 margin: 0;
2222 border: none;
2223 border-radius: 2px;
2224 }
2226 #social-share-provider-buttons > .share-provider-button[checked],
2227 #social-share-provider-buttons > .share-provider-button:active {
2228 padding: 5px;
2229 border: 1px solid #b5b5b8;
2230 box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.2);
2231 }
2233 #social-share-provider-buttons > .share-provider-button[checked] {
2234 background: linear-gradient(to bottom, #d9d9d9, #e3e3e3);
2235 }
2237 #social-share-provider-buttons > .share-provider-button > .toolbarbutton-text {
2238 display: none;
2239 }
2240 #social-share-provider-buttons > .share-provider-button > .toolbarbutton-icon {
2241 width: 16px;
2242 min-height: 16px;
2243 max-height: 16px;
2244 }
2246 /* social recommending panel */
2248 #social-mark-button {
2249 -moz-image-region: rect(0, 16px, 16px, 0);
2250 }
2252 /* bookmarks menu-button */
2254 #bookmarks-menu-button.bookmark-item,
2255 #bookmarks-menu-button.bookmark-item[open] {
2256 list-style-image: url("chrome://browser/skin/places/star-icons.png");
2257 -moz-image-region: rect(0px 16px 16px 0px);
2258 }
2260 #bookmarks-menu-button.bookmark-item[starred] {
2261 -moz-image-region: rect(0px 32px 16px 16px);
2262 }
2264 #bookmarks-menu-button.bookmark-item > .toolbarbutton-menubutton-button {
2265 padding: 0;
2266 }
2268 @media (min-resolution: 2dppx) {
2269 #bookmarks-menu-button.bookmark-item,
2270 #bookmarks-menu-button.bookmark-item[open] {
2271 list-style-image: url("chrome://browser/skin/places/star-icons@2x.png");
2272 -moz-image-region: rect(0px 32px 32px 0px);
2273 }
2275 #bookmarks-menu-button.bookmark-item[starred] {
2276 -moz-image-region: rect(0px 64px 32px 32px);
2277 }
2279 #bookmarks-menu-button.bookmark-item > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
2280 width: 16px;
2281 }
2282 }
2284 /* BOOKMARKING PANEL */
2285 #editBookmarkPanelStarIcon {
2286 list-style-image: url("chrome://browser/skin/places/starred48.png");
2287 width: 48px;
2288 height: 48px;
2289 }
2291 #editBookmarkPanelStarIcon[unstarred] {
2292 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2293 }
2295 @media (min-resolution: 2dppx) {
2296 #editBookmarkPanelStarIcon {
2297 list-style-image: url("chrome://browser/skin/places/starred48@2x.png");
2298 -moz-image-region: rect(0px 96px 96px 0px);
2299 }
2300 }
2302 #editBookmarkPanelTitle {
2303 font-size: 130%;
2304 font-weight: bold;
2305 }
2307 #editBMPanel_rows > row {
2308 margin-bottom: 8px;
2309 }
2311 #editBMPanel_rows > row:last-of-type {
2312 margin-bottom: 0;
2313 }
2315 /**** Input elements ****/
2317 #editBMPanel_rows > row > textbox,
2318 #editBMPanel_rows > row > hbox > textbox {
2319 -moz-appearance: none;
2320 background: linear-gradient(#fafafa, #fff);
2321 background-clip: padding-box;
2322 border-radius: 3px;
2323 border: 1px solid rgba(0,0,0,.3) !important;
2324 box-shadow: inset 0 1px 1px 1px rgba(0,0,0,.05),
2325 0 1px rgba(255,255,255,.3);
2326 margin: 0;
2327 padding: 3px 6px;
2328 }
2330 #editBMPanel_rows > row > textbox[focused="true"],
2331 #editBMPanel_rows > row > hbox > textbox[focused="true"] {
2332 border-color: -moz-mac-focusring !important;
2333 box-shadow: @focusRingShadow@;
2334 }
2336 /**** HUD style buttons ****/
2338 .editBookmarkPanelHeaderButton,
2339 .editBookmarkPanelBottomButton {
2340 @hudButton@
2341 margin: 0;
2342 min-width: 82px;
2343 min-height: 22px;
2344 }
2346 .editBookmarkPanelHeaderButton:hover:active,
2347 .editBookmarkPanelBottomButton:hover:active {
2348 @hudButtonPressed@
2349 }
2351 .editBookmarkPanelHeaderButton:-moz-focusring,
2352 .editBookmarkPanelBottomButton:-moz-focusring {
2353 @hudButtonFocused@
2354 }
2356 .editBookmarkPanelBottomButton[default="true"] {
2357 background-color: #666;
2358 }
2360 #editBookmarkPanelHeader {
2361 margin-bottom: 6px;
2362 }
2364 .editBookmarkPanelBottomButton:last-child {
2365 -moz-margin-start: 8px;
2366 }
2368 /* The following elements come from editBookmarkOverlay.xul. Styling that's
2369 specific to the editBookmarkPanel should be in browser.css. Styling that
2370 should be shared by all editBookmarkOverlay.xul consumers should be in
2371 editBookmarkOverlay.css. */
2373 #editBMPanel_newFolderBox {
2374 background: linear-gradient(#fff, #f2f2f2);
2375 background-origin: padding-box;
2376 background-clip: padding-box;
2377 border-radius: 0 0 3px 3px;
2378 border: 1px solid #a5a5a5;
2379 box-shadow: inset 0 1px rgba(255,255,255,.8),
2380 inset 0 0 1px rgba(255,255, 255,.25),
2381 0 1px rgba(255,255,255,.3);
2382 margin: 0;
2383 padding: 0;
2384 height: 20px;
2385 }
2387 #editBMPanel_newFolderButton {
2388 -moz-appearance: none;
2389 border: 0 solid #a5a5a5;
2390 -moz-border-end-width: 1px;
2391 padding: 0 9px;
2392 margin: 0;
2393 min-width: 21px;
2394 min-height: 20px;
2395 height: 20px;
2396 color: #fff;
2397 list-style-image: url("chrome://browser/skin/panel-plus-sign.png");
2398 position: relative;
2399 }
2401 #editBMPanel_newFolderButton:hover:active {
2402 background: linear-gradient(rgba(40,40,40,.9), rgba(70,70,70,.9));
2403 box-shadow: inset 0 0 3px rgba(0,0,0,.2), inset 0 1px 7px rgba(0,0,0,.4);
2404 }
2406 #editBMPanel_newFolderButton:-moz-focusring {
2407 @hudButtonFocused@
2408 }
2410 #editBMPanel_newFolderButton .button-text {
2411 display: none;
2412 }
2414 #editBMPanel_folderMenuList {
2415 @hudButton@
2416 background-clip: padding-box;
2417 margin: 0;
2418 min-height: 22px;
2419 padding-top: 2px;
2420 padding-bottom: 1px;
2421 -moz-padding-start: 8px;
2422 -moz-padding-end: 4px;
2423 }
2425 #editBMPanel_folderMenuList:-moz-focusring {
2426 @hudButtonFocused@
2427 }
2429 #editBMPanel_folderMenuList[open="true"],
2430 #editBMPanel_folderMenuList:hover:active {
2431 @hudButtonPressed@
2432 }
2434 #editBMPanel_folderMenuList > .menulist-dropmarker {
2435 -moz-appearance: none;
2436 display: -moz-box;
2437 background-color: transparent;
2438 border: 0;
2439 margin: 0;
2440 padding: 0;
2441 -moz-padding-end: 4px;
2442 width: 7px;
2443 }
2445 #editBMPanel_folderMenuList > .menulist-dropmarker > .dropmarker-icon {
2446 list-style-image: url("chrome://global/skin/icons/panel-dropmarker.png");
2447 }
2449 /**** folder tree and tag selector ****/
2451 #editBMPanel_folderTree,
2452 #editBMPanel_tagsSelector {
2453 -moz-appearance: none;
2454 background: linear-gradient(#fafafa, #fff);
2455 background-clip: padding-box;
2456 border-radius: 3px;
2457 border: 1px solid rgba(0,0,0,.3);
2458 box-shadow: inset 0 1px 1px 1px rgba(0,0,0,.05),
2459 0 1px rgba(255,255,255,.3);
2460 margin: 0;
2461 }
2463 #editBMPanel_folderTree:-moz-focusring,
2464 #editBMPanel_tagsSelector:-moz-focusring {
2465 border-color: -moz-mac-focusring;
2466 box-shadow: @focusRingShadow@;
2467 }
2469 #editBMPanel_folderTree {
2470 border-bottom: none;
2471 border-bottom-left-radius: 0;
2472 border-bottom-right-radius: 0;
2473 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2474 margin: 0 !important;
2475 min-width: 27em;
2476 position: relative;
2477 }
2479 /**** expanders ****/
2481 #editBookmarkPanel .expander-up,
2482 #editBookmarkPanel .expander-down {
2483 @hudButton@
2484 margin: 0;
2485 -moz-margin-start: 4px;
2486 min-width: 27px;
2487 min-height: 22px;
2488 }
2490 #editBookmarkPanel .expander-up:-moz-focusring,
2491 #editBookmarkPanel .expander-down:-moz-focusring {
2492 @hudButtonFocused@
2493 }
2495 #editBookmarkPanel .expander-up:hover:active,
2496 #editBookmarkPanel .expander-down:hover:active {
2497 @hudButtonPressed@
2498 }
2500 #editBookmarkPanel .expander-up {
2501 list-style-image: url("chrome://browser/skin/panel-expander-open.png");
2502 }
2504 #editBookmarkPanel .expander-down {
2505 list-style-image: url("chrome://browser/skin/panel-expander-closed.png");
2506 }
2508 #editBookmarkPanel .expander-up > .button-box > .button-icon,
2509 #editBookmarkPanel .expander-down > .button-box > .button-icon {
2510 margin: 1px 0 0;
2511 }
2513 #editBookmarkPanel .expander-up > .button-box > .button-text,
2514 #editBookmarkPanel .expander-down > .button-box > .button-text {
2515 display: none;
2516 }
2518 @media (min-resolution: 2dppx) {
2519 #editBookmarkPanel .expander-up {
2520 list-style-image: url("chrome://browser/skin/panel-expander-open@2x.png");
2521 }
2523 #editBookmarkPanel .expander-down {
2524 list-style-image: url("chrome://browser/skin/panel-expander-closed@2x.png");
2525 }
2527 #editBookmarkPanel .expander-up > .button-box > .button-icon,
2528 #editBookmarkPanel .expander-down > .button-box > .button-icon {
2529 width: 9px;
2530 }
2531 }
2533 #editBMPanel_tagsField > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
2534 opacity: 1.0;
2535 color: #bbb;
2536 }
2538 .editBMPanel_rowLabel {
2539 text-align: end;
2540 }
2542 .panel-promo-box {
2543 margin: 8px -16px -16px -16px;
2544 padding: 8px 16px;
2545 background-color: hsla(210,4%,10%,.07);
2546 border-top: 1px solid hsla(210,4%,10%,.12);
2547 border-radius: 0 0 5px 5px;
2548 box-shadow: 0 -1px hsla(0,0%,100%,.5) inset, 0 1px 1px hsla(0,0%,0%,.03) inset;
2549 color: hsl(0,0%,30%);
2550 }
2552 .panel-promo-icon {
2553 list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2554 -moz-margin-end: 10px;
2555 vertical-align: middle;
2556 }
2558 .panel-promo-closebutton {
2559 border: none;
2560 -moz-margin-end: -14px;
2561 margin-top: -8px;
2562 }
2564 .panel-promo-closebutton > .toolbarbutton-text {
2565 padding: 0;
2566 margin: 0;
2567 }
2569 @media (min-resolution: 2dppx) {
2570 .panel-promo-closebutton > .toolbarbutton-icon {
2571 width: 16px;
2572 }
2573 }
2575 /* History Swipe Animation */
2577 #historySwipeAnimationCurrentPage,
2578 #historySwipeAnimationNextPage {
2579 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
2580 }
2582 #historySwipeAnimationContainer {
2583 background: url("chrome://browser/skin/subtle-pattern.png") #B3B9C1;
2584 }
2586 /* ----- SIDEBAR ELEMENTS ----- */
2588 #sidebar,
2589 sidebarheader {
2590 background-color: #e2e7ed;
2591 }
2593 #sidebar:-moz-window-inactive,
2594 sidebarheader:-moz-window-inactive {
2595 background-color: #e8e8e8;
2596 }
2598 sidebarheader {
2599 padding: 2px;
2600 text-shadow: none;
2601 }
2603 sidebarheader > .close-icon > .toolbarbutton-text {
2604 display: none;
2605 }
2607 #sidebar-box {
2608 -moz-appearance: dialog;
2609 -moz-appearance: none;
2610 }
2612 .sidebar-splitter {
2613 -moz-border-start: none;
2614 -moz-border-end: 1px solid #bdbdbd;
2615 min-width: 1px;
2616 width: 3px;
2617 background-image: none !important;
2618 background-color: transparent;
2619 -moz-margin-start: -3px;
2620 position: relative;
2621 }
2623 #appcontent ~ .sidebar-splitter {
2624 -moz-border-start: 1px solid #ccc;
2625 -moz-border-end: none;
2626 -moz-margin-start: 0;
2627 -moz-margin-end: -3px;
2628 }
2630 .sidebar-title,
2631 #sidebar-title {
2632 color: #535f6d;
2633 font-weight: bold;
2634 }
2636 .sidebar-throbber[loading="true"],
2637 #sidebar-throbber[loading="true"] {
2638 list-style-image: url("chrome://global/skin/icons/loading_16.png");
2639 }
2641 /* ----- CONTENT ----- */
2643 .browserContainer > findbar {
2644 background: @scopeBarBackground@;
2645 border-top: @scopeBarSeparatorBorder@;
2646 color: -moz-DialogText;
2647 text-shadow: none;
2648 }
2650 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
2651 display: none;
2652 }
2654 .bookmark-item {
2655 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2656 }
2658 @media (min-resolution: 2dppx) {
2659 .bookmark-item {
2660 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
2661 }
2663 image.bookmark-item {
2664 width: 16px;
2665 }
2666 }
2668 .openintabs-menuitem {
2669 list-style-image: none;
2670 }
2672 /* ::::: tabbrowser ::::: */
2674 .tabbrowser-tabbox {
2675 margin: 0;
2676 }
2678 %include ../shared/tabs.inc.css
2680 .tab-label {
2681 margin-top: 1px;
2682 margin-bottom: 0;
2683 text-align: center;
2684 }
2686 @media (min-resolution: 2dppx) {
2687 /* image preloading hack from shared/tabs.inc.css */
2688 #tabbrowser-tabs::before {
2689 background-image:
2690 url(chrome://browser/skin/tabbrowser/tab-background-end@2x.png),
2691 url(chrome://browser/skin/tabbrowser/tab-background-middle@2x.png),
2692 url(chrome://browser/skin/tabbrowser/tab-background-start@2x.png);
2693 }
2695 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
2696 .tabs-newtab-button:hover {
2697 background-image: url(chrome://browser/skin/tabbrowser/tab-background-start@2x.png),
2698 url(chrome://browser/skin/tabbrowser/tab-background-middle@2x.png),
2699 url(chrome://browser/skin/tabbrowser/tab-background-end@2x.png);
2700 }
2702 .tab-background-middle[selected=true] {
2703 background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle@2x.png),
2704 @fgTabTexture@,
2705 none;
2706 }
2708 .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
2709 .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
2710 background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-start@2x.png);
2711 }
2713 .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
2714 .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
2715 background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-end@2x.png);
2716 }
2718 .tab-icon-image {
2719 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
2720 image-rendering: -moz-crisp-edges;
2721 }
2723 .tab-throbber {
2724 list-style-image: url("chrome://browser/skin/tabbrowser/connecting@2x.png");
2725 }
2727 .tab-throbber[progress] {
2728 list-style-image: url("chrome://browser/skin/tabbrowser/loading@2x.png");
2729 }
2731 /* Background tab separators */
2732 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
2733 .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
2734 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
2735 background-image: url(chrome://browser/skin/tabbrowser/tab-separator@2x.png);
2736 }
2737 }
2739 .tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-icon-image:not([selected="true"]) {
2740 opacity: .9;
2741 }
2743 .tab-label:not([selected="true"]) {
2744 opacity: .7;
2745 }
2747 .tabbrowser-tab,
2748 .tabs-newtab-button {
2749 font: message-box;
2750 border: none;
2751 }
2753 .tabbrowser-tab[selected=true]:not(:-moz-lwtheme) {
2754 /* overriding tabbox.css */
2755 color: inherit;
2756 }
2758 .tabbrowser-tab[selected=true] {
2759 /* overriding tabbox.css */
2760 text-shadow: inherit;
2761 }
2763 .tabs-newtab-button > .toolbarbutton-icon {
2764 -moz-box-align: center;
2765 border: solid transparent;
2766 border-width: 0 11px;
2767 }
2769 .tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-label {
2770 box-shadow: @focusRingShadow@;
2771 }
2773 /* We want the titlebar to be unified, but we still want to be able
2774 * to give #TabsToolbar a background. So we can't set -moz-appearance:
2775 * toolbar on #TabsToolbar itself. Instead, we set it on a box of the
2776 * right size which is put underneath #TabsToolbar.
2777 *
2778 * Because of Bug 941309, we make sure this pseudoelement always exists,
2779 * but we only make it visible when we need it.
2780 */
2781 #navigator-toolbox::before {
2782 content: '';
2783 display: block;
2784 -moz-appearance: toolbar;
2785 height: @tabMinHeight@;
2786 margin-bottom: -@tabMinHeight@;
2787 visibility: hidden;
2788 }
2790 #main-window:not([customizing]) #navigator-toolbox[inFullscreen]:not(:-moz-lwtheme)::before,
2791 #main-window:not(:-moz-any([customizing],[tabsintitlebar])) #navigator-toolbox:not(:-moz-lwtheme)::before {
2792 visibility: visible;
2793 }
2795 #TabsToolbar {
2796 position: relative;
2797 -moz-appearance: none;
2798 background-repeat: repeat-x;
2799 }
2801 #TabsToolbar:not(:-moz-lwtheme) {
2802 color: #333;
2803 text-shadow: @loweredShadow@;
2804 }
2806 /*
2807 * Draw the bottom border of the tabstrip when core doesn't do it for us.
2808 * Because of Bug 941309, we make sure this pseudoelement always exists,
2809 * but we only make it visible when we need it.
2810 */
2811 #TabsToolbar::after {
2812 content: '';
2813 /* Because we use placeholders for window controls etc. in the tabstrip,
2814 * and position those with ordinal attributes, and because our layout code
2815 * expects :before/:after nodes to come first/last in the frame list,
2816 * we have to reorder this element to come last, hence the
2817 * ordinal group value (see bug 853415). */
2818 -moz-box-ordinal-group: 1001;
2819 position: absolute;
2820 bottom: @tabToolbarNavbarOverlap@;
2821 left: 0;
2822 right: 0;
2823 z-index: 0;
2824 border-bottom: 1px solid hsla(0,0%,0%,.3);
2825 visibility: hidden;
2826 }
2828 #main-window:-moz-any([sizemode="fullscreen"],[customize-entered]) #TabsToolbar::after,
2829 #main-window:not([tabsintitlebar]) #TabsToolbar::after,
2830 #TabsToolbar:-moz-lwtheme::after {
2831 visibility: visible;
2832 }
2834 #tabbrowser-tabs {
2835 -moz-box-align: stretch;
2836 }
2838 .tabs-newtab-button > .toolbarbutton-icon {
2839 padding: 6px 0 4px;
2840 }
2842 /* Background tabs:
2843 *
2844 * Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
2845 * of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
2846 * the titlebar. We don't need this in fullscreen since window dragging is not an issue there.
2847 */
2848 #main-window[tabsintitlebar]:not([inFullscreen]) .tab-background-middle:not([selected=true]) {
2849 clip-path: url(chrome://browser/content/browser.xul#tab-hover-clip-path);
2850 }
2852 /**
2853 * Tab Drag and Drop
2854 */
2856 .tab-drop-indicator {
2857 list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator.png);
2858 margin-top: -2px;
2859 z-index: 3;
2860 }
2862 @media (min-resolution: 2dppx) {
2863 .tab-drop-indicator {
2864 list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator@2x.png);
2865 width: 12px;
2866 }
2867 }
2869 /**
2870 * In-tab close button
2871 */
2873 .tab-close-button > .toolbarbutton-icon {
2874 -moz-margin-end: 0px !important;
2875 }
2877 .tab-close-button {
2878 -moz-appearance: none;
2879 border: none !important;
2880 background: none;
2881 cursor: default;
2882 }
2884 .tab-close-button.close-icon:not([selected=true]):not(:hover):-moz-lwtheme-brighttext {
2885 -moz-image-region: rect(0, 64px, 16px, 48px);
2886 }
2888 @media (min-resolution: 2dppx) {
2889 .tab-close-button.close-icon:not([selected=true]):not(:hover):-moz-lwtheme-brighttext {
2890 -moz-image-region: rect(0, 128px, 32px, 96px);
2891 }
2892 }
2894 .tabbrowser-arrowscrollbox > .scrollbutton-up,
2895 .tabbrowser-arrowscrollbox > .scrollbutton-down {
2896 -moz-image-region: rect(0, 13px, 20px, 0);
2897 margin: 0 0 @tabToolbarNavbarOverlap@;
2898 padding: 0 4px;
2899 border: none;
2900 }
2902 .tabbrowser-arrowscrollbox > .scrollbutton-up {
2903 -moz-border-end: 2px solid transparent;
2904 }
2906 .tabbrowser-arrowscrollbox > .scrollbutton-down {
2907 -moz-border-start: 2px solid transparent;
2908 transition: 1s background-color ease-out;
2909 }
2911 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
2912 background-color: Highlight;
2913 transition: none;
2914 }
2916 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(ltr),
2917 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(rtl) {
2918 list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-left.png");
2919 }
2921 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr),
2922 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl) {
2923 list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-right.png");
2924 }
2926 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(ltr):-moz-lwtheme-brighttext,
2927 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(rtl):-moz-lwtheme-brighttext {
2928 list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-left-inverted.png");
2929 }
2931 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr):-moz-lwtheme-brighttext,
2932 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl):-moz-lwtheme-brighttext {
2933 list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-right-inverted.png");
2934 }
2936 .tabbrowser-arrowscrollbox > .scrollbutton-up:hover,
2937 .tabbrowser-arrowscrollbox > .scrollbutton-down:hover {
2938 -moz-image-region: rect(0, 26px, 20px, 13px);
2939 }
2941 .tabbrowser-arrowscrollbox > .scrollbutton-up:hover:active,
2942 .tabbrowser-arrowscrollbox > .scrollbutton-down:hover:active {
2943 -moz-image-region: rect(0, 39px, 20px, 26px);
2944 }
2946 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled] > .toolbarbutton-icon,
2947 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] > .toolbarbutton-icon {
2948 -moz-image-region: rect(0, 13px, 20px, 0) !important;
2949 opacity: .5;
2950 }
2952 @media (min-resolution: 2dppx) {
2953 .tabbrowser-arrowscrollbox > .scrollbutton-up,
2954 .tabbrowser-arrowscrollbox > .scrollbutton-down {
2955 -moz-image-region: rect(0, 26px, 40px, 0);
2956 }
2958 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(ltr),
2959 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(rtl) {
2960 list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-left@2x.png");
2961 }
2963 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr),
2964 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl) {
2965 list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-right@2x.png");
2966 }
2968 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(ltr):-moz-lwtheme-brighttext,
2969 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(rtl):-moz-lwtheme-brighttext {
2970 list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-left-inverted@2x.png");
2971 }
2973 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr):-moz-lwtheme-brighttext,
2974 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl):-moz-lwtheme-brighttext {
2975 list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-right-inverted@2x.png");
2976 }
2978 .tabbrowser-arrowscrollbox > .scrollbutton-up:hover,
2979 .tabbrowser-arrowscrollbox > .scrollbutton-down:hover {
2980 -moz-image-region: rect(0, 52px, 40px, 26px);
2981 }
2983 .tabbrowser-arrowscrollbox > .scrollbutton-up:hover:active,
2984 .tabbrowser-arrowscrollbox > .scrollbutton-down:hover:active {
2985 -moz-image-region: rect(0, 78px, 40px, 52px);
2986 }
2988 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled] > .toolbarbutton-icon,
2989 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] > .toolbarbutton-icon {
2990 -moz-image-region: rect(0, 26px, 40px, 0) !important;
2991 }
2993 .tabbrowser-arrowscrollbox > .scrollbutton-up > .toolbarbutton-icon,
2994 .tabbrowser-arrowscrollbox > .scrollbutton-down > .toolbarbutton-icon {
2995 width: 13px;
2996 }
2997 }
2999 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):-moz-locale-dir(ltr),
3000 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):-moz-locale-dir(rtl) {
3001 border-width: 0 2px 0 0;
3002 border-style: solid;
3003 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;
3004 }
3006 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):-moz-locale-dir(ltr),
3007 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):-moz-locale-dir(rtl) {
3008 border-width: 0 0 0 2px;
3009 border-style: solid;
3010 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;
3011 }
3013 /**
3014 * Tabstrip & add-on bar toolbar buttons
3015 */
3017 #TabsToolbar .toolbarbutton-1,
3018 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
3019 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
3020 -moz-appearance: none;
3021 margin: 0;
3022 /* !important flags needed because of bug 561154: */
3023 /* Bug 990390: -moz-any is no longer used in the selector so the !important aren't necessary for that anymore. */
3024 padding: 0 !important;
3025 border: none !important;
3026 border-radius: 0 !important;
3027 background: none !important;
3028 box-shadow: none !important;
3029 }
3031 #TabsToolbar .toolbarbutton-1:not([type="menu-button"]),
3032 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
3033 padding: 0 1px;
3034 }
3036 #TabsToolbar .toolbarbutton-1 {
3037 margin-bottom: @tabToolbarNavbarOverlap@;
3038 }
3040 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
3041 padding-left: 4px;
3042 padding-right: 4px;
3043 }
3045 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):hover,
3046 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):hover,
3047 #TabsToolbar .toolbarbutton-1:not([type="menu-button"]):not([disabled=true]):not([open]):hover,
3048 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
3049 #TabsToolbar .toolbarbutton-1:not([disabled=true]):not([buttonover]):hover > .toolbarbutton-menubutton-dropmarker {
3050 background-image: linear-gradient(transparent, rgba(0,0,0,.15)) !important;
3051 }
3053 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):hover:active,
3054 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):hover:active,
3055 #TabsToolbar .toolbarbutton-1:not([type="menu-button"]):not([disabled=true]):hover:active,
3056 #TabsToolbar .toolbarbutton-1[type="menu"][open],
3057 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover:active,
3058 #TabsToolbar .toolbarbutton-1[open]:not([disabled=true]):hover > .toolbarbutton-menubutton-dropmarker {
3059 background-image: linear-gradient(transparent, rgba(0,0,0,.3)) !important;
3060 }
3062 .tabs-newtab-button,
3063 #TabsToolbar > #new-tab-button,
3064 #TabsToolbar > toolbarpaletteitem > #new-tab-button {
3065 list-style-image: url(chrome://browser/skin/tabbrowser/newtab.png);
3066 -moz-image-region: rect(0, 18px, 20px, 0);
3067 }
3069 .tabs-newtab-button:-moz-lwtheme-brighttext,
3070 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3071 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3072 list-style-image: url(chrome://browser/skin/tabbrowser/newtab-inverted.png);
3073 }
3075 .tabs-newtab-button:hover,
3076 #TabsToolbar > #new-tab-button:hover {
3077 -moz-image-region: rect(0, 36px, 20px, 18px);
3078 }
3080 .tabs-newtab-button:hover:active,
3081 #TabsToolbar > #new-tab-button:hover:active {
3082 -moz-image-region: rect(0, 54px, 20px, 36px);
3083 }
3085 @media (min-resolution: 2dppx) {
3086 .tabs-newtab-button,
3087 #TabsToolbar > #new-tab-button,
3088 #TabsToolbar > toolbarpaletteitem > #new-tab-button {
3089 list-style-image: url(chrome://browser/skin/tabbrowser/newtab@2x.png);
3090 -moz-image-region: rect(0, 36px, 40px, 0);
3091 }
3093 .tabs-newtab-button:-moz-lwtheme-brighttext,
3094 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3095 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3096 list-style-image: url(chrome://browser/skin/tabbrowser/newtab-inverted@2x.png);
3097 }
3099 .tabs-newtab-button:hover,
3100 #TabsToolbar > #new-tab-button:hover {
3101 -moz-image-region: rect(0, 72px, 40px, 36px);
3102 }
3104 .tabs-newtab-button:hover:active,
3105 #TabsToolbar > #new-tab-button:hover:active {
3106 -moz-image-region: rect(0, 108px, 40px, 72px);
3107 }
3109 .tabs-newtab-button > .toolbarbutton-icon {
3110 width: 40px;
3111 }
3113 #TabsToolbar > #new-tab-button > .toolbarbutton-icon,
3114 #TabsToolbar > toolbarpaletteitem > #new-tab-button > .toolbarbutton-icon {
3115 width: 18px;
3116 }
3117 }
3119 #alltabs-button {
3120 list-style-image: url(chrome://browser/skin/tabbrowser/alltabs-box-bkgnd-icon.png);
3121 -moz-image-region: rect(0, 17px, 20px, 0);
3122 }
3124 #alltabs-button:-moz-lwtheme-brighttext {
3125 list-style-image: url(chrome://browser/skin/tabbrowser/alltabs-box-bkgnd-icon-inverted.png);
3126 }
3128 #alltabs-button:not([disabled="true"]):hover {
3129 -moz-image-region: rect(0, 34px, 20px, 17px);
3130 }
3132 #alltabs-button[open="true"]:not([disabled="true"]),
3133 #alltabs-button:not([disabled="true"]):hover:active {
3134 -moz-image-region: rect(0, 51px, 20px, 34px);
3135 }
3137 @media (min-resolution: 2dppx) {
3138 #alltabs-button {
3139 list-style-image: url(chrome://browser/skin/tabbrowser/alltabs-box-bkgnd-icon@2x.png);
3140 -moz-image-region: rect(0, 34px, 40px, 0);
3141 }
3143 #alltabs-button:-moz-lwtheme-brighttext {
3144 list-style-image: url(chrome://browser/skin/tabbrowser/alltabs-box-bkgnd-icon-inverted@2x.png);
3145 }
3147 #alltabs-button:not([disabled="true"]):hover {
3148 -moz-image-region: rect(0, 68px, 40px, 34px);
3149 }
3151 #alltabs-button[open="true"]:not([disabled="true"]),
3152 #alltabs-button:not([disabled="true"]):hover:active {
3153 -moz-image-region: rect(0, 102px, 40px, 68px);
3154 }
3156 #alltabs-button > .toolbarbutton-icon {
3157 width: 17px;
3158 }
3159 }
3161 #alltabs-button > .toolbarbutton-menu-dropmarker {
3162 display: none;
3163 }
3165 #alltabs-button > .toolbarbutton-icon {
3166 -moz-margin-end: 2px;
3167 }
3169 /* All Tabs Menupopup */
3170 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3171 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3172 }
3174 @media (min-resolution: 2dppx) {
3175 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3176 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
3177 }
3178 }
3180 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3181 list-style-image: url("chrome://global/skin/icons/loading_16.png") !important;
3182 }
3184 .alltabs-item[tabIsVisible] {
3185 /* box-shadow instead of background-color to work around native styling */
3186 box-shadow: inset -5px 0 ThreeDShadow;
3187 }
3189 /* Bookmarks toolbar */
3190 #PlacesToolbarDropIndicator {
3191 list-style-image: url(chrome://browser/skin/places/toolbarDropMarker.png);
3192 }
3194 /* Bookmark drag and drop styles */
3196 .bookmark-item[dragover-into="true"] {
3197 background: Highlight !important;
3198 color: HighlightText !important;
3199 }
3201 /* rules for menupopup drop indicators */
3202 .menupopup-drop-indicator-bar {
3203 position: relative;
3204 /* these two margins must together compensate the indicator's height */
3205 margin-top: -1px;
3206 margin-bottom: -1px;
3207 }
3209 .menupopup-drop-indicator {
3210 list-style-image: none;
3211 height: 2px;
3212 -moz-margin-end: -4em;
3213 background-color: Highlight;
3214 }
3216 /* Popup Icons */
3217 #identity-popup-icon {
3218 height: 64px;
3219 width: 64px;
3220 padding: 0;
3221 list-style-image: url("chrome://browser/skin/identity.png");
3222 -moz-image-region: rect(0px, 64px, 64px, 0px);
3223 }
3225 #identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon {
3226 -moz-image-region: rect(64px, 64px, 128px, 0px);
3227 }
3229 #identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon {
3230 -moz-image-region: rect(128px, 64px, 192px, 0px);
3231 }
3233 @media (min-resolution: 2dppx) {
3234 #identity-popup-icon {
3235 list-style-image: url("chrome://browser/skin/identity@2x.png");
3236 -moz-image-region: rect(0px, 128px, 128px, 0px);
3237 }
3239 #identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon {
3240 -moz-image-region: rect(128px, 128px, 256px, 0px);
3241 }
3243 #identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon {
3244 -moz-image-region: rect(256px, 128px, 384px, 0px);
3245 }
3247 #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon {
3248 list-style-image: url("chrome://branding/content/icon128.png");
3249 }
3250 }
3252 /* Popup Body Text */
3253 .identity-popup-description {
3254 white-space: pre-wrap;
3255 -moz-padding-start: 15px;
3256 margin: 2px 0 4px;
3257 }
3259 .identity-popup-label {
3260 white-space: pre-wrap;
3261 -moz-padding-start: 15px;
3262 margin: 0;
3263 }
3265 #identity-popup-content-host ,
3266 #identity-popup-content-owner {
3267 font-weight: bold;
3268 max-width: 300px;
3269 }
3271 #identity-popup-content-host ,
3272 #identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner {
3273 font-size: 140%;
3274 }
3276 #identity-popup-content-owner {
3277 margin-bottom: 0 !important;
3278 }
3280 #identity-popup-content-verifier {
3281 margin: 4px 0 2px;
3282 }
3284 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption ,
3285 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption {
3286 margin-top: 10px;
3287 -moz-margin-start: -24px;
3288 }
3290 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon ,
3291 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon {
3292 margin-top: 5px;
3293 list-style-image: url("chrome://browser/skin/Secure-Glyph.png");
3294 }
3296 #identity-popup-help-icon {
3297 -moz-appearance: none;
3298 border: none;
3299 margin: 10px 0 0 2px;
3300 background: none;
3301 min-width: 0;
3302 list-style-image: url("chrome://global/skin/icons/question-16.png");
3303 cursor: pointer;
3304 }
3306 #identity-popup-help-icon > .button-box > .button-text {
3307 display: none;
3308 }
3310 #identity-popup-help-icon > .button-box > .button-icon {
3311 height: 16px;
3312 width: 16px;
3313 }
3315 #identity-popup-help-icon:focus {
3316 @hudButtonFocused@
3317 }
3319 #identity-popup-help-icon:hover:active {
3320 @hudButtonPressed@
3321 }
3323 @media (min-resolution: 2dppx) {
3324 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon ,
3325 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon {
3326 list-style-image: url("chrome://browser/skin/Secure-Glyph@2x.png");
3327 width: 24px;
3328 }
3330 #identity-popup-help-icon {
3331 list-style-image: url("chrome://global/skin/icons/question-32.png");
3332 }
3333 }
3335 #identity-popup {
3336 margin-top: 1px;
3337 }
3339 #identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
3340 padding: 0;
3341 }
3343 #identity-popup-container {
3344 padding: 16px;
3345 }
3347 #identity-popup-button-container {
3348 background-color: hsla(210,4%,10%,.07);
3349 border-top: 1px solid hsla(210,4%,10%,.12);
3350 padding: 16px;
3351 margin-top: 5px;
3352 }
3354 #notification-popup-box {
3355 position: relative;
3356 background-color: #fff;
3357 background-clip: padding-box;
3358 padding-left: 3px;
3359 border-radius: 2px 0 0 2px;
3360 border-width: 0 8px 0 0;
3361 border-style: solid;
3362 border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 fill;
3363 -moz-margin-end: -8px;
3364 }
3366 @media (min-resolution: 2dppx) {
3367 #notification-popup-box {
3368 border-image: url("chrome://browser/skin/urlbar-arrow@2x.png") 0 16 0 0 fill;
3369 }
3370 }
3372 @conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box {
3373 padding-left: 7px;
3374 }
3376 #notification-popup-box:-moz-locale-dir(rtl),
3377 .notification-anchor-icon:-moz-locale-dir(rtl) {
3378 transform: scaleX(-1);
3379 }
3381 .notification-anchor-icon {
3382 width: 16px;
3383 height: 16px;
3384 margin: 0 2px;
3385 }
3387 .notification-anchor-icon:-moz-focusring {
3388 box-shadow: 0 0 2px 1px -moz-mac-focusring inset,
3389 0 0 3px 2px -moz-mac-focusring;
3390 }
3392 #social-notification-icon > .toolbarbutton-icon {
3393 height: 16px;
3394 }
3396 .default-notification-icon,
3397 #default-notification-icon {
3398 list-style-image: url(chrome://global/skin/icons/information-16.png);
3399 }
3400 @media (min-resolution: 2dppx) {
3401 .default-notification-icon,
3402 #default-notification-icon {
3403 list-style-image: url(chrome://global/skin/icons/information-32.png);
3404 }
3405 }
3407 .identity-notification-icon,
3408 #identity-notification-icon {
3409 list-style-image: url(chrome://mozapps/skin/profile/profileicon.png);
3410 }
3411 /* XXX: need HiDPI version */
3413 .geo-notification-icon,
3414 #geo-notification-icon {
3415 list-style-image: url(chrome://browser/skin/Geolocation-16.png);
3416 }
3417 @media (min-resolution: 2dppx) {
3418 .geo-notification-icon,
3419 #geo-notification-icon {
3420 list-style-image: url(chrome://browser/skin/Geolocation-16@2x.png);
3421 }
3422 }
3425 #canvas-notification-icon {
3426 list-style-image: url(chrome://browser/skin/canvas-popup.svg);
3427 }
3429 .indexedDB-notification-icon,
3430 #indexedDB-notification-icon {
3431 list-style-image: url(chrome://global/skin/icons/question-16.png);
3432 }
3433 @media (min-resolution: 2dppx) {
3434 .indexedDB-notification-icon,
3435 #indexedDB-notification-icon {
3436 list-style-image: url(chrome://global/skin/icons/question-32.png);
3437 }
3438 }
3440 #addons-notification-icon {
3441 list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.png);
3442 }
3443 @media (min-resolution: 2dppx) {
3444 #addons-notification-icon {
3445 list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png);
3446 }
3447 }
3449 #password-notification-icon {
3450 list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png);
3451 }
3452 @media (min-resolution: 2dppx) {
3453 #password-notification-icon {
3454 list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16@2x.png);
3455 }
3456 }
3458 .webapps-notification-icon,
3459 #webapps-notification-icon {
3460 list-style-image: url(chrome://global/skin/icons/webapps-16.png);
3461 }
3462 @media (min-resolution: 2dppx) {
3463 .webapps-notification-icon,
3464 #webapps-notification-icon {
3465 list-style-image: url(chrome://global/skin/icons/webapps-16@2x.png);
3466 }
3467 }
3469 #plugins-notification-icon {
3470 list-style-image: url(chrome://browser/skin/notification-pluginNormal.png);
3471 }
3473 #plugins-notification-icon.plugin-hidden {
3474 list-style-image: url(chrome://browser/skin/notification-pluginAlert.png);
3475 }
3477 #plugins-notification-icon.plugin-blocked {
3478 list-style-image: url(chrome://browser/skin/notification-pluginBlocked.png);
3479 }
3481 #plugins-notification-icon {
3482 -moz-image-region: rect(0, 16px, 16px, 0);
3483 }
3485 #plugins-notification-icon:hover {
3486 -moz-image-region: rect(0, 32px, 16px, 16px);
3487 }
3489 #plugins-notification-icon:active {
3490 -moz-image-region: rect(0, 48px, 16px, 32px);
3491 }
3493 @media (min-resolution: 2dppx) {
3494 #plugins-notification-icon {
3495 list-style-image: url(chrome://browser/skin/notification-pluginNormal@2x.png);
3496 }
3498 #plugins-notification-icon.plugin-hidden {
3499 list-style-image: url(chrome://browser/skin/notification-pluginAlert@2x.png);
3500 }
3502 #plugins-notification-icon.plugin-blocked {
3503 list-style-image: url(chrome://browser/skin/notification-pluginBlocked@2x.png);
3504 }
3506 #plugins-notification-icon {
3507 -moz-image-region: rect(0, 32px, 32px, 0);
3508 }
3510 #plugins-notification-icon:hover {
3511 -moz-image-region: rect(0, 64px, 32px, 32px);
3512 }
3514 #plugins-notification-icon:active {
3515 -moz-image-region: rect(0, 96px, 32px, 64px);
3516 }
3517 }
3519 #plugin-install-notification-icon {
3520 list-style-image: url(chrome://browser/skin/pluginInstall-16.png);
3521 }
3522 @media (min-resolution: 2dppx) {
3523 #plugin-install-notification-icon {
3524 list-style-image: url(chrome://browser/skin/pluginInstall-16@2x.png);
3525 }
3526 }
3528 #notification-popup-box[hidden] {
3529 /* Override display:none to make the pluginBlockedNotification animation work
3530 when showing the notification repeatedly. */
3531 display: -moz-box;
3532 visibility: collapse;
3533 }
3535 #plugins-notification-icon.plugin-blocked[showing] {
3536 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3537 }
3539 @keyframes pluginBlockedNotification {
3540 from {
3541 opacity: 0;
3542 }
3543 to {
3544 opacity: 1;
3545 }
3546 }
3548 #mixed-content-blocked-notification-icon {
3549 list-style-image: url(chrome://browser/skin/mixed-content-blocked-16.png);
3550 }
3551 @media (min-resolution: 2dppx) {
3552 #mixed-content-blocked-notification-icon {
3553 list-style-image: url(chrome://browser/skin/mixed-content-blocked-16@2x.png);
3554 }
3555 }
3557 .webRTC-shareDevices-notification-icon,
3558 #webRTC-shareDevices-notification-icon {
3559 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16.png);
3560 }
3561 @media (min-resolution: 2dppx) {
3562 .webRTC-shareDevices-notification-icon,
3563 #webRTC-shareDevices-notification-icon {
3564 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png);
3565 }
3566 }
3568 .webRTC-sharingDevices-notification-icon,
3569 #webRTC-sharingDevices-notification-icon {
3570 list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16.png);
3571 }
3572 @media (min-resolution: 2dppx) {
3573 .webRTC-sharingDevices-notification-icon,
3574 #webRTC-sharingDevices-notification-icon {
3575 list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png);
3576 }
3577 }
3579 .webRTC-shareMicrophone-notification-icon,
3580 #webRTC-shareMicrophone-notification-icon {
3581 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16.png);
3582 }
3583 @media (min-resolution: 2dppx) {
3584 .webRTC-shareMicrophone-notification-icon,
3585 #webRTC-shareMicrophone-notification-icon {
3586 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png);
3587 }
3588 }
3590 .webRTC-sharingMicrophone-notification-icon,
3591 #webRTC-sharingMicrophone-notification-icon {
3592 list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16.png);
3593 }
3594 @media (min-resolution: 2dppx) {
3595 .webRTC-sharingMicrophone-notification-icon,
3596 #webRTC-sharingMicrophone-notification-icon {
3597 list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png);
3598 }
3599 }
3601 .web-notifications-notification-icon,
3602 #web-notifications-notification-icon {
3603 list-style-image: url(chrome://browser/skin/notification-16.png);
3604 }
3605 @media (min-resolution: 2dppx) {
3606 .web-notifications-notification-icon,
3607 #web-notifications-notification-icon {
3608 list-style-image: url(chrome://browser/skin/notification-16@2x.png);
3609 }
3610 }
3612 .pointerLock-notification-icon,
3613 #pointerLock-notification-icon {
3614 list-style-image: url(chrome://browser/skin/pointerLock-16.png);
3615 }
3616 @media (min-resolution: 2dppx) {
3617 .pointerLock-notification-icon,
3618 #pointerLock-notification-icon {
3619 list-style-image: url(chrome://browser/skin/pointerLock-16@2x.png);
3620 }
3621 }
3623 .translate-notification-icon,
3624 #translate-notification-icon {
3625 list-style-image: url(chrome://browser/skin/translation-16.png);
3626 -moz-image-region: rect(0px, 16px, 16px, 0px);
3627 }
3628 @media (min-resolution: 2dppx) {
3629 .translate-notification-icon,
3630 #translate-notification-icon {
3631 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3632 -moz-image-region: rect(0px, 32px, 32px, 0px);
3633 }
3634 }
3636 .translated-notification-icon,
3637 #translated-notification-icon {
3638 list-style-image: url(chrome://browser/skin/translation-16.png);
3639 -moz-image-region: rect(0px, 32px, 16px, 16px);
3640 }
3641 @media (min-resolution: 2dppx) {
3642 .translated-notification-icon,
3643 #translated-notification-icon {
3644 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3645 -moz-image-region: rect(0px, 64px, 32px, 32px);
3646 }
3647 }
3650 .popup-notification-icon {
3651 width: 64px;
3652 height: 64px;
3653 -moz-margin-end: 10px;
3654 }
3656 .popup-notification-icon[popupid="geolocation"] {
3657 list-style-image: url(chrome://browser/skin/Geolocation-64.png);
3658 }
3659 @media (min-resolution: 2dppx) {
3660 .popup-notification-icon[popupid="geolocation"] {
3661 list-style-image: url(chrome://browser/skin/Geolocation-64@2x.png);
3662 }
3663 }
3665 .popup-notification-icon[popupid="web-notifications"] {
3666 list-style-image: url(chrome://browser/skin/notification-64.png);
3667 }
3668 @media (min-resolution: 2dppx) {
3669 .popup-notification-icon[popupid="web-notifications"] {
3670 list-style-image: url(chrome://browser/skin/notification-64@2x.png);
3671 }
3672 }
3674 .popup-notification-icon[popupid="xpinstall-disabled"],
3675 .popup-notification-icon[popupid="addon-progress"],
3676 .popup-notification-icon[popupid="addon-install-cancelled"],
3677 .popup-notification-icon[popupid="addon-install-blocked"],
3678 .popup-notification-icon[popupid="addon-install-failed"],
3679 .popup-notification-icon[popupid="addon-install-complete"] {
3680 list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png);
3681 width: 32px;
3682 height: 32px;
3683 }
3685 .popup-notification-icon[popupid="click-to-play-plugins"] {
3686 list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
3687 }
3689 .popup-notification-icon[popupid="plugins-not-found"] {
3690 list-style-image: url(chrome://browser/skin/pluginInstall-64.png);
3691 }
3692 @media (min-resolution: 2dppx) {
3693 .popup-notification-icon[popupid="plugins-not-found"] {
3694 list-style-image: url(chrome://browser/skin/pluginInstall-64\@2x.png);
3695 }
3696 }
3698 .addon-progress-description {
3699 width: 350px;
3700 max-width: 350px;
3701 }
3703 .popup-progress-label,
3704 .popup-progress-meter {
3705 -moz-margin-start: 0;
3706 -moz-margin-end: 0;
3707 }
3709 .popup-progress-cancel {
3710 -moz-appearance: none;
3711 min-height: 16px;
3712 min-width: 16px;
3713 max-height: 16px;
3714 max-width: 16px;
3715 padding: 0;
3716 margin: 0 1px 0 1px;
3717 list-style-image: url(chrome://mozapps/skin/downloads/buttons.png);
3718 -moz-image-region: rect(0px, 16px, 16px, 0px);
3719 }
3721 .popup-progress-cancel:hover {
3722 -moz-image-region: rect(0px, 32px, 16px, 16px);
3723 }
3725 .popup-progress-cancel:active {
3726 -moz-image-region: rect(0px, 48px, 16px, 32px);
3727 }
3729 .popup-notification-icon[popupid="canvas-permissions-prompt"] {
3730 list-style-image: url(chrome://browser/skin/canvas-popup.svg);
3731 }
3733 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3734 .popup-notification-icon[popupid="indexedDB-quota-prompt"],
3735 .popup-notification-icon[popupid*="offline-app-requested"],
3736 .popup-notification-icon[popupid="offline-app-usage"] {
3737 list-style-image: url(chrome://global/skin/icons/question-64.png);
3738 }
3740 .popup-notification-icon[popupid="password-save"],
3741 .popup-notification-icon[popupid="password-change"] {
3742 list-style-image: url(chrome://mozapps/skin/passwordmgr/key-64.png);
3743 }
3745 .popup-notification-icon[popupid="webapps-install-progress"],
3746 .popup-notification-icon[popupid="webapps-install"] {
3747 list-style-image: url(chrome://global/skin/icons/webapps-64.png);
3748 }
3750 .popup-notification-icon[popupid="mixed-content-blocked"] {
3751 list-style-image: url(chrome://browser/skin/mixed-content-blocked-64.png);
3752 }
3753 @media (min-resolution: 2dppx) {
3754 .popup-notification-icon[popupid="mixed-content-blocked"] {
3755 list-style-image: url(chrome://browser/skin/mixed-content-blocked-64@2x.png);
3756 }
3757 }
3759 .popup-notification-icon[popupid="pointerLock"] {
3760 list-style-image: url(chrome://browser/skin/pointerLock-64.png);
3761 }
3762 @media (min-resolution: 2dppx) {
3763 .popup-notification-icon[popupid="pointerLock"] {
3764 list-style-image: url(chrome://browser/skin/pointerLock-64@2x.png);
3765 }
3766 }
3767 #pointerLock-cancel {
3768 margin: 0px;
3769 }
3772 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3773 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3774 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64.png);
3775 }
3776 @media (min-resolution: 2dppx) {
3777 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3778 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3779 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64@2x.png);
3780 }
3781 }
3783 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3784 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3785 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64.png);
3786 }
3787 @media (min-resolution: 2dppx) {
3788 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3789 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3790 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png);
3791 }
3792 }
3794 /* Popup Buttons */
3795 #identity-popup-more-info-button {
3796 @hudButton@
3797 margin: 10px 0 0;
3798 min-height: 0px;
3799 }
3801 #identity-popup-more-info-button:focus {
3802 @hudButtonFocused@
3803 }
3805 #identity-popup-more-info-button:hover:active {
3806 @hudButtonPressed@
3807 }
3809 /* ::::: Keyboard UI Panel ::::: */
3811 .KUI-panel {
3812 -moz-appearance: none;
3813 background: rgba(27%,27%,27%,.9) url(KUI-background.png) repeat-x;
3814 color: white;
3815 border-style: none;
3816 border-radius: 20px;
3817 }
3819 .KUI-panel[level="top"] {
3820 background-color: rgba(27%,27%,27%,.65);
3821 -moz-window-shadow: none;
3822 }
3824 /* Ctrl-Tab */
3826 #ctrlTab-panel {
3827 padding: 20px 10px 10px;
3828 text-shadow: 0 0 1px rgb(27%,27%,27%), 0 0 2px rgb(27%,27%,27%);
3829 }
3831 .ctrlTab-favicon[src] {
3832 background-color: white;
3833 width: 20px;
3834 height: 20px;
3835 padding: 2px;
3836 }
3838 .ctrlTab-preview-inner > .tabPreview-canvas {
3839 box-shadow: 1px 1px 2px rgb(12%,12%,12%);
3840 }
3842 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3843 margin-bottom: 2px;
3844 }
3846 .ctrlTab-preview-inner {
3847 padding-bottom: 10px;
3848 }
3850 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3851 padding: 10px;
3852 background-color: rgba(255,255,255,.2);
3853 border-radius: .5em;
3854 }
3856 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3857 color: white;
3858 background-color: rgba(0,0,0,.6);
3859 text-shadow: none;
3860 padding: 8px;
3861 border: 2px solid white;
3862 border-radius: .5em;
3863 }
3865 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3866 margin: -10px -10px 0;
3867 }
3869 #ctrlTab-showAll {
3870 margin-top: .5em;
3871 }
3873 /* Sync Panels */
3875 .sync-panel-icon {
3876 height:32px;
3877 width: 32px;
3878 background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
3879 }
3881 @media (min-resolution: 2dppx) {
3882 .sync-panel-icon {
3883 background: url("chrome://browser/content/abouthome/sync@2x.png") top left no-repeat;
3884 background-size: 32px 32px;
3885 }
3886 }
3888 .sync-panel-inner {
3889 width: 0;
3890 padding-left: 10px;
3891 }
3893 .sync-panel-button-box {
3894 margin-top: 1em;
3895 }
3897 .sync-panel-button {
3898 @hudButton@
3899 margin: 0;
3900 min-width: 72px;
3901 min-height: 22px;
3902 }
3904 .sync-panel-button:hover:active {
3905 @hudButtonPressed@
3906 }
3908 .sync-panel-button:-moz-focusring {
3909 @hudButtonFocused@
3910 }
3912 #sync-error-panel-title,
3913 #sync-start-panel-title {
3914 font-size: 120%;
3915 font-weight: bold;
3916 margin-bottom: 5px;
3917 }
3919 #sync-start-panel-subtitle,
3920 #sync-error-panel-subtitle {
3921 margin: 0;
3922 }
3924 /* Status panel */
3926 .statuspanel-label {
3927 margin: 0;
3928 padding: 2px 4px;
3929 background: linear-gradient(#fff, #ddd);
3930 border: 1px none #ccc;
3931 border-top-style: solid;
3932 color: #333;
3933 text-shadow: none;
3934 }
3936 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3937 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3938 border-right-style: solid;
3939 border-top-right-radius: .3em;
3940 margin-right: 1em;
3941 }
3943 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3944 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3945 border-left-style: solid;
3946 border-top-left-radius: .3em;
3947 margin-left: 1em;
3948 }
3950 /* Lion Fullscreen window styling */
3951 @media (-moz-mac-lion-theme) {
3952 #navigator-toolbox[inFullscreen]::before {
3953 /* Adjust by the full element height of #titlebar, since that element is
3954 * not displayed in native full-screen.
3955 * Also add the height of the tabs, since we're calculating the
3956 * total height of this pseudo-element, not just the top-padding. */
3957 height: calc(@tabMinHeight@ + @spaceAboveTabbar@) !important;
3958 }
3959 }
3961 #full-screen-warning-message {
3962 background-image: url("chrome://browser/skin/fullscreen-darknoise.png");
3963 color: white;
3964 border-radius: 4px;
3965 margin-top: 30px;
3966 padding: 30px 50px;
3967 box-shadow: 0 0 2px white;
3968 }
3970 #full-screen-warning-container[obscure-browser] {
3971 background-color: rgba(0,0,0,0.3);
3972 }
3974 .full-screen-description {
3975 font-size: 150%;
3976 }
3978 #full-screen-domain-text {
3979 font-size: 300%;
3980 }
3982 .full-screen-approval-button,
3983 #full-screen-remember-decision {
3984 font-size: 120%;
3985 }
3987 %include ../shared/devtools/responsivedesign.inc.css
3988 %include ../shared/devtools/highlighter.inc.css
3989 %include ../shared/devtools/commandline.inc.css
3990 %include ../shared/plugin-doorhanger.inc.css
3992 %include downloads/indicator.css
3994 /* On mac, the popup notification contents are indented by default and so
3995 the default closebutton margins from notification.css require adjustment */
3997 .click-to-play-plugins-notification-description-box > .popup-notification-closebutton {
3998 -moz-margin-end: -6px;
3999 margin-top: -7px;
4000 }
4004 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
4005 color: hsl(210,11%,16%);
4006 }
4008 /* Developer Toolbar */
4010 #developer-toolbar-closebutton {
4011 margin-left: 8px;
4012 margin-right: 8px;
4013 }
4015 /* Error counter */
4017 #developer-toolbar-toolbox-button[error-count]:before {
4018 color: #FDF3DE;
4019 min-width: 16px;
4020 text-shadow: none;
4021 background-image: linear-gradient(#B4211B, #8A1915);
4022 border-radius: 1px;
4023 }
4025 /* === social toolbar button === */
4027 #social-toolbar-item > .toolbarbutton-1 {
4028 margin-left: 0;
4029 margin-right: 0;
4030 border-top-left-radius: 0;
4031 border-bottom-left-radius: 0;
4032 border-top-right-radius: 0;
4033 border-bottom-right-radius: 0;
4034 }
4036 #social-toolbar-item > .toolbarbutton-1:-moz-locale-dir(ltr) {
4037 -moz-border-end-width: 0;
4038 }
4039 #social-toolbar-item > .toolbarbutton-1:last-child:-moz-locale-dir(ltr) {
4040 -moz-border-end-width: 1px;
4041 }
4042 #social-toolbar-item > .toolbarbutton-1:-moz-locale-dir(rtl) {
4043 -moz-border-start-width: 0;
4044 }
4045 #social-toolbar-item > .toolbarbutton-1:first-child:-moz-locale-dir(rtl) {
4046 -moz-border-start-width: 1px;
4047 }
4049 #social-toolbar-item > .toolbarbutton-1:-moz-locale-dir(ltr):first-child,
4050 #social-toolbar-item > .toolbarbutton-1:-moz-locale-dir(rtl):last-child {
4051 margin-left: 4px;
4052 border-top-left-radius: 3px;
4053 border-bottom-left-radius: 3px;
4054 }
4055 #social-toolbar-item > .toolbarbutton-1:-moz-locale-dir(rtl):first-child,
4056 #social-toolbar-item > .toolbarbutton-1:-moz-locale-dir(ltr):last-child {
4057 margin-right: 4px;
4058 border-top-right-radius: 3px;
4059 border-bottom-right-radius: 3px;
4060 }
4062 #social-toolbar-item > toolbaritem {
4063 margin: 0;
4064 }
4066 #social-provider-button {
4067 list-style-image: url(chrome://browser/skin/social/services-16.png);
4068 }
4070 @media (min-resolution: 2dppx) {
4071 #social-provider-button {
4072 list-style-image: url(chrome://browser/skin/social/services-16@2x.png);
4073 }
4074 #social-provider-button > .toolbarbutton-icon {
4075 width: 16px;
4076 }
4077 }
4079 #social-provider-button > .toolbarbutton-menu-dropmarker {
4080 display: none;
4081 }
4083 .toolbarbutton-badge-container {
4084 margin: 0;
4085 padding: 0;
4086 position: relative;
4087 }
4089 .toolbarbutton-badge[badge]:not([badge=""]) {
4090 /* The |content| property is set in the content stylesheet. */
4091 font-size: 9px;
4092 font-weight: bold;
4093 padding: 0 1px;
4094 color: #fff;
4095 background-color: rgb(240,61,37);
4096 border: 1px solid rgb(216,55,34);
4097 border-radius: 2px;
4098 box-shadow: 0 1px 0 rgba(0,39,121,0.77);
4099 position: absolute;
4100 top: 0;
4101 right: 0;
4102 z-index: 1;
4103 }
4105 .toolbarbutton-badge[badge]:not([badge=""]):-moz-window-inactive {
4106 background-color: rgb(230,230,230);
4107 box-shadow: none;
4108 border: 1px solid rgb(206,206,206);
4109 color: rgb(192,192,192);
4110 }
4112 .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl) {
4113 left: 0;
4114 right: auto;
4115 }
4117 toolbar[mode="icons"] > *|* > .toolbarbutton-badge[badge]:not([badge=""]) {
4118 right: -2px;
4119 }
4121 toolbar[mode="icons"] > *|* > .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl) {
4122 left: -2px;
4123 }
4125 .popup-notification-icon[popupid="servicesInstall"] {
4126 list-style-image: url(chrome://browser/skin/social/services-64.png);
4127 }
4128 #servicesInstall-notification-icon {
4129 list-style-image: url(chrome://browser/skin/social/services-16.png);
4130 }
4132 @media (min-resolution: 2dppx) {
4133 .popup-notification-icon[popupid="servicesInstall"] {
4134 list-style-image: url(chrome://browser/skin/social/services-64@2x.png);
4135 }
4136 #servicesInstall-notification-icon {
4137 list-style-image: url(chrome://browser/skin/social/services-16@2x.png);
4138 }
4139 }
4141 #social-undoactivation-button {
4142 -moz-margin-start: 0; /* override default label margin to match description margin */
4143 }
4145 .social-activation-icon {
4146 width: auto;
4147 height: auto;
4148 max-height: 64px;
4149 max-width: 64px;
4150 }
4152 #social-activation-message {
4153 max-width: 250px;
4154 }
4156 #social-activation-message > label {
4157 margin: 0;
4158 }
4160 #social-activation-button {
4161 @hudButton@
4162 min-height: 0px;
4163 }
4165 #social-activation-button:focus {
4166 @hudButtonFocused@
4167 }
4169 #social-activation-button:hover:active {
4170 @hudButtonPressed@
4171 }
4173 /* === end of social toolbar button === */
4175 /* === social toolbar provider menu === */
4177 .social-statusarea-user {
4178 list-style-image:url("chrome://global/skin/icons/information-32.png");
4179 }
4181 .social-statusarea-user-portrait {
4182 width: 32px;
4183 height: 32px;
4184 margin: 4px;
4185 -moz-margin-start: 0;
4186 }
4188 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
4189 padding: 0;
4190 }
4192 /* fixup rounded corners for osx panels */
4193 .social-panel > .social-panel-frame {
4194 border-radius: inherit;
4195 }
4197 #social-share-panel {
4198 max-height: 600px;
4199 min-height: 100px;
4200 max-width: 800px;
4201 min-width: 300px;
4202 }
4204 .social-share-frame:-moz-locale-dir(ltr) {
4205 border-top-left-radius: 0;
4206 border-bottom-left-radius: 0;
4207 border-top-right-radius: inherit;
4208 border-bottom-right-radius: inherit;
4209 }
4211 .social-share-frame:-moz-locale-dir(rtl) {
4212 border-top-left-radius: inherit;
4213 border-bottom-left-radius: inherit;
4214 border-top-right-radius: 0;
4215 border-bottom-right-radius: 0;
4216 }
4218 #social-share-panel > .social-share-toolbar:-moz-locale-dir(ltr) {
4219 border-top-left-radius: inherit;
4220 border-bottom-left-radius: inherit;
4221 }
4223 #social-share-panel > .social-share-toolbar:-moz-locale-dir(rtl) {
4224 border-top-right-radius: inherit;
4225 border-bottom-right-radius: inherit;
4226 }
4228 #social-share-provider-buttons:-moz-locale-dir(ltr) {
4229 border-top-left-radius: inherit;
4230 border-bottom-left-radius: inherit;
4231 }
4233 #social-share-provider-buttons:-moz-locale-dir(rtl) {
4234 border-top-right-radius: inherit;
4235 border-bottom-right-radius: inherit;
4236 }
4238 /* === end of social toolbar provider menu === */
4240 %include ../shared/social/chat.inc.css
4242 .chat-titlebar {
4243 background-color: #d9d9d9;
4244 background-image: linear-gradient(rgba(255,255,255,.43), rgba(255,255,255,0));
4245 }
4247 .chat-titlebar[selected] {
4248 background-color: #f0f0f0;
4249 }
4251 .chatbar-button {
4252 background-color: #d9d9d9;
4253 background-image: linear-gradient(rgba(255,255,255,.43), rgba(255,255,255,0));
4254 border-top-left-radius: @toolbarbuttonCornerRadius@;
4255 border-top-right-radius: @toolbarbuttonCornerRadius@;
4256 }
4258 .chatbar-button:hover,
4259 .chatbar-button[open="true"] {
4260 background-color: #f0f0f0;
4261 }
4263 .chatbar-button[activity]:not([open]) {
4264 background-image: radial-gradient(circle farthest-corner at center 2px, rgb(254,254,255) 3%, rgba(210,235,255,0.9) 12%, rgba(148,205,253,0.6) 30%, rgba(148,205,253,0.2) 70%);
4265 }
4267 chatbox {
4268 border-top-left-radius: @toolbarbuttonCornerRadius@;
4269 border-top-right-radius: @toolbarbuttonCornerRadius@;
4270 }
4272 window > chatbox {
4273 border-top-left-radius: @toolbarbuttonCornerRadius@;
4274 border-top-right-radius: @toolbarbuttonCornerRadius@;
4275 border-bottom-left-radius: @toolbarbuttonCornerRadius@;
4276 border-bottom-right-radius: @toolbarbuttonCornerRadius@;
4277 }
4279 /* Customization mode */
4281 %include ../shared/customizableui/customizeMode.inc.css
4283 #main-window[customizing] {
4284 background-color: rgb(178,178,178);
4285 }
4287 #main-window[tabsintitlebar][customize-entered] > #titlebar,
4288 #main-window[privatebrowsingmode=temporary]:not([tabsintitlebar])[customize-entered] > #titlebar,
4289 #main-window[customize-entered] > #tab-view-deck {
4290 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"),
4291 url("chrome://browser/skin/customizableui/background-noise-toolbar.png"),
4292 linear-gradient(to bottom, rgb(233,233,233), rgb(178,178,178) 40px);
4293 background-attachment: fixed;
4294 }
4296 #main-window[customize-entered] #browser-bottombox,
4297 #main-window[customize-entered] #navigator-toolbox > toolbar:not(#TabsToolbar),
4298 #main-window[customize-entered] #customization-container {
4299 border: 3px solid hsla(0,0%,0%,.1);
4300 border-top-width: 0;
4301 background-clip: padding-box;
4302 background-origin: padding-box;
4303 -moz-border-right-colors: hsla(0,0%,0%,.05) hsla(0,0%,0%,.1) hsla(0,0%,0%,.2);
4304 -moz-border-bottom-colors: hsla(0,0%,0%,.05) hsla(0,0%,0%,.1) hsla(0,0%,0%,.2);
4305 -moz-border-left-colors: hsla(0,0%,0%,.05) hsla(0,0%,0%,.1) hsla(0,0%,0%,.2);
4306 }
4308 #main-window[customize-entered] #customization-container,
4309 #main-window[customize-entered] #navigator-toolbox > toolbar:not(#TabsToolbar) {
4310 border-bottom-width: 0;
4311 }
4313 #main-window[customize-entered] #TabsToolbar {
4314 background-clip: padding-box;
4315 border-right: 3px solid transparent;
4316 border-left: 3px solid transparent;
4317 }
4319 @media (min-resolution: 2dppx) {
4320 #customization-titlebar-visibility-button {
4321 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
4322 -moz-image-region: rect(0, 48px, 48px, 0);
4323 }
4325 #customization-titlebar-visibility-button[checked] {
4326 -moz-image-region: rect(0, 96px, 48px, 48px);
4327 }
4329 #customization-titlebar-visibility-button > .button-box > .button-icon {
4330 width: 24px;
4331 }
4333 .customization-tipPanel-infoBox {
4334 background-image: url(chrome://browser/skin/customizableui/info-icon-customizeTip@2x.png);
4335 background-size: 25px 25px;
4336 }
4338 .customization-tipPanel-contentImage {
4339 list-style-image: url(chrome://browser/skin/customizableui/customize-illustration@2x.png);
4340 }
4342 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
4343 list-style-image: url(chrome://browser/skin/customizableui/customize-illustration-rtl@2x.png);
4344 }
4346 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
4347 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4348 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip@2x.png");
4349 }
4350 }
4352 /* End customization mode */
4354 .private-browsing-indicator {
4355 background-image: url("chrome://browser/skin/privatebrowsing-mask.png");
4356 background-repeat: no-repeat;
4357 background-size: 100% auto;
4358 width: 38px;
4359 height: 28px;
4360 /**
4361 * The private browsing mask graphic has a 3px flare at the top. The distance
4362 * we want between the mask and items on either side is 7px, so we use 4px,
4363 * since the other 3px is accounted for by the empty space on either side.
4364 */
4365 margin-left: 4px;
4366 margin-right: 4px;
4367 }
4369 #titlebar-secondary-buttonbox > .private-browsing-indicator {
4370 position: relative;
4371 }
4373 #main-window[privatebrowsingmode=temporary]:not([tabsintitlebar]) > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > .private-browsing-indicator {
4374 background-image: url("chrome://browser/skin/privatebrowsing-mask-short.png");
4375 height: 20px;
4376 }
4378 #main-window:not([privatebrowsingmode=temporary]) .private-browsing-indicator,
4379 #main-window[privatebrowsingmode=temporary][inFullscreen] > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > .private-browsing-indicator,
4380 #main-window[privatebrowsingmode=temporary]:not([inFullscreen]) > #tab-view-deck > #browser-panel > #navigator-toolbox > #TabsToolbar > .private-browsing-indicator {
4381 display: none;
4382 }
4384 @media (min-resolution: 2dppx) {
4385 .private-browsing-indicator {
4386 background-image: url("chrome://browser/skin/privatebrowsing-mask@2x.png");
4387 }
4388 #main-window[privatebrowsingmode=temporary]:not([tabsintitlebar]) > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > .private-browsing-indicator {
4389 background-image: url("chrome://browser/skin/privatebrowsing-mask-short@2x.png");
4390 }
4391 }
4393 @media (-moz-mac-lion-theme) {
4394 #TabsToolbar > .private-browsing-indicator {
4395 transform: translateY(-@spaceAboveTabbar@);
4396 /* We offset by 38px for mask graphic, plus 4px to account for the
4397 * margin-left, which sums to 42px.
4398 */
4399 margin-right: -42px;
4400 }
4402 #main-window[privatebrowsingmode=temporary] .titlebar-placeholder[type="fullscreen-button"],
4403 #main-window[privatebrowsingmode=temporary] > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > #titlebar-fullscreen-button {
4404 margin-left: 0px;
4405 }
4407 #main-window[privatebrowsingmode=temporary][inFullscreen] .titlebar-placeholder[type="fullscreen-button"] {
4408 /* Override display:none for .titlebar-placeholder in fullscreen so we can have consistent
4409 position and padding for the private browsing indicator. */
4410 display: -moz-box;
4411 }
4412 }
4414 #TabsToolbar > .private-browsing-indicator:-moz-locale-dir(rtl) {
4415 -moz-box-ordinal-group: 0;
4416 }
4418 %include ../shared/UITour.inc.css
4420 #UITourTooltipDescription {
4421 font-size: 1.18rem;
4422 line-height: 2rem;
4423 }
4425 #UITourTooltipClose {
4426 -moz-margin-end: -10px;
4427 margin-top: -14px;
4428 }
4430 @media (min-resolution: 2dppx) {
4431 #UITourTooltipClose > .toolbarbutton-icon {
4432 width: 16px;
4433 }
4434 }
