browser/themes/linux/browser.css@6474c204b198
browser/themes/linux/browser.css
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
1 %if 0
2 /* This Source Code Form is subject to the terms of the Mozilla Public
3 * License, v. 2.0. If a copy of the MPL was not distributed with this
4 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
5 %endif
7 @import url("chrome://global/skin/");
9 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
10 @namespace html url("http://www.w3.org/1999/xhtml");
11 @namespace svg url("http://www.w3.org/2000/svg");
13 %include ../shared/browser.inc
14 %include linuxShared.inc
15 %filter substitution
17 %define forwardTransitionLength 150ms
18 %define conditionalForwardWithUrlbar window:not([chromehidden~="toolbar"]) #urlbar-wrapper
19 %define conditionalForwardWithUrlbarWidth 30
21 #menubar-items {
22 -moz-box-orient: vertical; /* for flex hack */
23 }
25 #main-menubar {
26 -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
27 }
29 #navigator-toolbox {
30 -moz-appearance: none;
31 background-color: transparent;
32 border-top: none;
33 }
35 #navigator-toolbox::after {
36 content: "";
37 display: -moz-box;
38 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
39 height: 1px;
40 background-color: ThreeDShadow;
41 }
43 #navigator-toolbox > toolbar:not(:-moz-lwtheme):not(#toolbar-menubar):not(#TabsToolbar) {
44 -moz-appearance: none;
45 border-style: none;
46 background-color: -moz-Dialog;
47 }
49 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar) {
50 padding-top: 1px;
51 padding-bottom: 1px;
52 }
54 #TabsToolbar:not([collapsed="true"]) + #nav-bar {
55 margin-top: -@tabToolbarNavbarOverlap@; /* Move up into the TabsToolbar */
56 /* Position the toolbar above the bottom of background tabs */
57 position: relative;
58 z-index: 1;
59 }
61 #nav-bar {
62 background-image: linear-gradient(@toolbarHighlight@, rgba(255,255,255,0));
63 box-shadow: 0 1px 0 @toolbarHighlight@ inset;
64 padding-top: 2px;
65 padding-bottom: 2px;
66 }
68 #nav-bar-overflow-button {
69 -moz-image-region: rect(-5px, 12px, 11px, -4px);
70 }
72 /* This only has an effect when this element is placed on the bookmarks toolbar.
73 * It's 30px to make sure buttons with 18px icons fit along with the default 16px
74 * icons, without changing the size of the toolbar.
75 */
76 #personal-bookmarks {
77 min-height: 30px;
78 }
80 #browser-bottombox {
81 /* opaque for layers optimization */
82 background-color: -moz-Dialog;
83 }
85 #urlbar:-moz-lwtheme:not([focused="true"]),
86 .searchbar-textbox:-moz-lwtheme:not([focused="true"]) {
87 opacity: .85;
88 }
90 /* Places toolbar */
91 toolbarbutton.bookmark-item:not(.subviewbutton),
92 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
93 margin: 0;
94 padding: 2px 3px;
95 }
97 toolbarbutton.bookmark-item:not(.subviewbutton):hover:active,
98 toolbarbutton.bookmark-item[open="true"] {
99 padding-top: 3px;
100 padding-bottom: 1px;
101 -moz-padding-start: 4px;
102 -moz-padding-end: 2px;
103 }
105 .bookmark-item:not(#home-button) > .toolbarbutton-icon,
106 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
107 width: 16px;
108 height: 16px;
109 }
111 /* Force the display of the label for bookmarks */
112 .bookmark-item > .toolbarbutton-text,
113 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
114 display: -moz-box !important;
115 }
117 .bookmark-item > .toolbarbutton-menu-dropmarker {
118 display: none;
119 }
121 /* Dropmarker for folder bookmarks */
122 .bookmark-item[container] > .toolbarbutton-menu-dropmarker {
123 display: -moz-box !important;
124 }
126 #bookmarks-toolbar-placeholder {
127 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png") !important;
128 }
130 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
131 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
132 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
133 }
135 /* ----- BOOKMARK STAR ANIMATION ----- */
137 @keyframes animation-bookmarkAdded {
138 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
139 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
140 80% { opacity: 1; }
141 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
142 }
144 @keyframes animation-bookmarkPulse {
145 from { transform: scale(1); }
146 50% { transform: scale(1.3); }
147 to { transform: scale(1); }
148 }
150 #bookmarked-notification-container {
151 min-height: 1px;
152 min-width: 1px;
153 height: 1px;
154 margin-bottom: -1px;
155 z-index: 5;
156 position: relative;
157 }
159 #bookmarked-notification {
160 background-size: 16px;
161 background-position: center;
162 background-repeat: no-repeat;
163 width: 16px;
164 height: 16px;
165 opacity: 0;
166 }
168 #bookmarked-notification-dropmarker-anchor {
169 z-index: -1;
170 position: relative;
171 }
173 #bookmarked-notification-dropmarker-icon {
174 width: 18px;
175 height: 18px;
176 visibility: hidden;
177 }
179 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
180 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
181 animation: animation-bookmarkAdded 800ms;
182 animation-timing-function: ease, ease, ease;
183 }
185 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
186 list-style-image: none !important;
187 }
189 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
190 visibility: visible;
191 animation: animation-bookmarkPulse 300ms;
192 animation-delay: 600ms;
193 animation-timing-function: ease-out;
194 }
196 /* Bookmark menus */
197 menu.bookmark-item,
198 menuitem.bookmark-item {
199 min-width: 0;
200 max-width: 32em;
201 }
203 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
204 margin-top: 0;
205 margin-bottom: 0;
206 }
208 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
209 -moz-padding-start: 0px;
210 }
212 /* Bookmark drag and drop styles */
213 .bookmark-item[dragover-into="true"] {
214 background: Highlight !important;
215 color: HighlightText !important;
216 }
218 /* rules for menupopup drop indicators */
219 .menupopup-drop-indicator-bar {
220 position: relative;
221 /* these two margins must together compensate the indicator's height */
222 margin-top: -1px;
223 margin-bottom: -1px;
224 }
226 .menupopup-drop-indicator {
227 list-style-image: none;
228 height: 2px;
229 -moz-margin-end: -4em;
230 background-color: Highlight;
231 }
233 /* Bookmarks toolbar */
234 #PlacesToolbarDropIndicator {
235 list-style-image: url(chrome://browser/skin/places/toolbarDropMarker.png);
236 }
238 /* Bookmark items */
239 .bookmark-item {
240 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
241 }
243 .bookmark-item[container] {
244 list-style-image: url("moz-icon://stock/gtk-directory?size=menu");
245 }
247 .bookmark-item[container][livemark] {
248 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
249 }
251 .bookmark-item[container][livemark] .bookmark-item {
252 list-style-image: url("chrome://browser/skin/places/livemark-item.png");
253 -moz-image-region: rect(0px, 16px, 16px, 0px);
254 }
256 .bookmark-item[container][livemark] .bookmark-item[visited] {
257 -moz-image-region: rect(0px, 32px, 16px, 16px);
258 }
260 .bookmark-item[container][query] {
261 list-style-image: url("chrome://browser/skin/places/query.png");
262 }
264 .bookmark-item[query][tagContainer] {
265 list-style-image: url("chrome://browser/skin/places/tag.png");
266 }
268 .bookmark-item[query][dayContainer] {
269 list-style-image: url("chrome://browser/skin/places/calendar.png");
270 }
272 .bookmark-item[query][hostContainer] {
273 list-style-image: url("moz-icon://stock/gtk-directory?size=menu");
274 }
276 .bookmark-item[query][hostContainer][open] {
277 list-style-image: url("moz-icon://stock/gtk-directory?size=menu");
278 }
280 .bookmark-item[cutting] > .toolbarbutton-icon,
281 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
282 opacity: 0.5;
283 }
285 .bookmark-item[cutting] > .toolbarbutton-text,
286 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
287 opacity: 0.7;
288 }
290 /* Stock icons for the menu bar items */
291 menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) {
292 -moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic");
293 }
295 #placesContext_open\:newwindow,
296 #menu_newNavigator,
297 #context-openlink,
298 #context-openframe {
299 list-style-image: url("chrome://browser/skin/Toolbar-small.png");
300 -moz-image-region: rect(0px 80px 16px 64px);
301 }
303 #placesContext_open\:newtab,
304 #placesContext_openContainer\:tabs,
305 #menu_newNavigatorTab,
306 #context-openlinkintab,
307 #context-openframeintab {
308 list-style-image: url("chrome://browser/skin/Toolbar-small.png");
309 -moz-image-region: rect(0px 64px 16px 48px);
310 }
312 #menu_openFile {
313 list-style-image: url("moz-icon://stock/gtk-open?size=menu");
314 }
316 #menu_close {
317 list-style-image: url("moz-icon://stock/gtk-close?size=menu");
318 }
320 #context-media-play {
321 list-style-image: url("moz-icon://stock/gtk-media-play?size=menu");
322 }
324 #context-media-pause {
325 list-style-image: url("moz-icon://stock/gtk-media-pause?size=menu");
326 }
328 #menu_savePage,
329 #context-savelink,
330 #context-saveimage,
331 #context-savevideo,
332 #context-saveaudio,
333 #context-savepage,
334 #context-saveframe {
335 list-style-image: url("moz-icon://stock/gtk-save-as?size=menu");
336 }
338 #menu_printPreview {
339 list-style-image: url("moz-icon://stock/gtk-print-preview?size=menu");
340 }
342 #menu_print,
343 #context-printframe {
344 list-style-image: url("moz-icon://stock/gtk-print?size=menu");
345 }
347 #menu_FileQuitItem {
348 list-style-image: url("moz-icon://stock/gtk-quit?size=menu");
349 }
351 #menu_undo,
352 #context-undo {
353 list-style-image: url("moz-icon://stock/gtk-undo?size=menu");
354 }
356 #menu_undo[disabled],
357 #context-undo[disabled] {
358 list-style-image: url("moz-icon://stock/gtk-undo?size=menu&state=disabled");
359 }
361 #menu_redo {
362 list-style-image: url("moz-icon://stock/gtk-redo?size=menu");
363 }
365 #menu_redo[disabled] {
366 list-style-image: url("moz-icon://stock/gtk-redo?size=menu&state=disabled");
367 }
369 #menu_cut,
370 #placesContext_cut,
371 #context-cut {
372 list-style-image: url("moz-icon://stock/gtk-cut?size=menu");
373 }
375 #menu_cut[disabled],
376 #placesContext_cut[disabled],
377 #context-cut[disabled] {
378 list-style-image: url("moz-icon://stock/gtk-cut?size=menu&state=disabled");
379 }
381 #menu_copy,
382 #placesContext_copy,
383 #context-copy,
384 #context-copyimage,
385 #context-copyvideourl,
386 #context-copyaudiourl,
387 #context-copylink,
388 #context-copyemail {
389 list-style-image: url("moz-icon://stock/gtk-copy?size=menu");
390 }
392 #menu_copy[disabled],
393 #placesContext_copy[disabled],
394 #context-copy[disabled] {
395 list-style-image: url("moz-icon://stock/gtk-copy?size=menu&state=disabled");
396 }
398 #menu_paste,
399 #placesContext_paste,
400 #context-paste {
401 list-style-image: url("moz-icon://stock/gtk-paste?size=menu");
402 }
404 #menu_paste[disabled],
405 #placesContext_paste[disabled],
406 #context-paste[disabled] {
407 list-style-image: url("moz-icon://stock/gtk-paste?size=menu&state=disabled");
408 }
410 #menu_delete,
411 #placesContext_delete,
412 #placesContext_delete_history,
413 #context-delete {
414 list-style-image: url("moz-icon://stock/gtk-delete?size=menu");
415 }
417 #menu_delete[disabled],
418 #placesContext_delete[disabled],
419 #placesContext_delete_history[disabled],
420 #context-delete[disabled] {
421 list-style-image: url("moz-icon://stock/gtk-delete?size=menu&state=disabled");
422 }
424 #menu_selectAll,
425 #context-selectall {
426 list-style-image: url("moz-icon://stock/gtk-select-all?size=menu");
427 }
429 #menu_find {
430 list-style-image: url("moz-icon://stock/gtk-find?size=menu");
431 }
433 #menu_find[disabled] {
434 list-style-image: url("moz-icon://stock/gtk-find?size=menu&state=disabled");
435 }
437 #menu_preferences {
438 list-style-image: url("moz-icon://stock/gtk-preferences?size=menu");
439 }
441 #context-stop {
442 list-style-image: url("moz-icon://stock/gtk-stop?size=menu");
443 }
445 #context-stop[disabled] {
446 list-style-image: url("moz-icon://stock/gtk-stop?size=menu&state=disabled");
447 }
449 #placesContext_reload,
450 #context-reload,
451 #context-reloadframe {
452 list-style-image: url("moz-icon://stock/gtk-refresh?size=menu");
453 }
455 #context-reload[disabled] {
456 list-style-image: url("moz-icon://stock/gtk-refresh?size=menu&state=disabled");
457 }
459 #menu_zoomEnlarge {
460 list-style-image: url("moz-icon://stock/gtk-zoom-in?size=menu");
461 }
463 #menu_zoomReduce {
464 list-style-image: url("moz-icon://stock/gtk-zoom-out?size=menu");
465 }
467 #menu_zoomReset {
468 list-style-image: url("moz-icon://stock/gtk-zoom-100?size=menu");
469 }
471 #context-back {
472 list-style-image: url("moz-icon://stock/gtk-go-back-ltr?size=menu");
473 }
475 #context-back[disabled] {
476 list-style-image: url("moz-icon://stock/gtk-go-back-ltr?size=menu&state=disabled");
477 }
479 #context-back:-moz-locale-dir(rtl) {
480 list-style-image: url("moz-icon://stock/gtk-go-back-rtl?size=menu");
481 }
483 #context-back[disabled]:-moz-locale-dir(rtl) {
484 list-style-image: url("moz-icon://stock/gtk-go-back-rtl?size=menu&state=disabled");
485 }
487 #context-forward {
488 list-style-image: url("moz-icon://stock/gtk-go-forward-ltr?size=menu");
489 }
491 #context-forward[disabled] {
492 list-style-image: url("moz-icon://stock/gtk-go-forward-ltr?size=menu&state=disabled");
493 }
495 #context-forward:-moz-locale-dir(rtl) {
496 list-style-image: url("moz-icon://stock/gtk-go-forward-rtl?size=menu");
497 }
499 #context-forward[disabled]:-moz-locale-dir(rtl) {
500 list-style-image: url("moz-icon://stock/gtk-go-forward-rtl?size=menu&state=disabled");
501 }
503 #menu_showAllHistory {
504 list-style-image: url("chrome://browser/skin/Toolbar-small.png");
505 -moz-image-region: rect(0px 32px 16px 16px);
506 }
508 #bookmarksShowAll {
509 list-style-image: url("chrome://browser/skin/Toolbar-small.png");
510 -moz-image-region: rect(0px 48px 16px 32px);
511 }
513 #subscribeToPageMenuitem:not([disabled]),
514 #subscribeToPageMenupopup,
515 #BMB_subscribeToPageMenuitem:not([disabled]),
516 #BMB_subscribeToPageMenupopup {
517 list-style-image: url("chrome://browser/skin/page-livemarks.png");
518 }
520 #bookmarksToolbarFolderMenu,
521 #BMB_bookmarksToolbar,
522 #panelMenu_bookmarksToolbar {
523 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png");
524 }
526 #BMB_unsortedBookmarks,
527 #panelMenu_unsortedBookmarks {
528 list-style-image: url("chrome://browser/skin/places/unsortedBookmarks.png");
529 }
531 #menu_openDownloads {
532 list-style-image: url("chrome://browser/skin/Toolbar-small.png");
533 -moz-image-region: rect(0px 16px 16px 0px);
534 }
536 #menu_openAddons {
537 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric-16.png");
538 }
540 #menu_pageInfo,
541 #context-viewinfo,
542 #context-viewframeinfo {
543 list-style-image: url("moz-icon://stock/gtk-info?size=menu");
544 }
546 #privateBrowsingItem {
547 list-style-image: url("chrome://browser/skin/Privacy-16.png");
548 }
550 #placesContext_show\:info {
551 list-style-image: url("moz-icon://stock/gtk-properties?size=menu");
552 }
554 #sanitizeItem {
555 list-style-image: url("moz-icon://stock/gtk-clear?size=menu");
556 }
558 #menu_openHelp {
559 list-style-image: url("moz-icon://stock/gtk-help?size=menu");
560 }
562 #aboutName {
563 list-style-image: url("moz-icon://stock/gtk-about?size=menu");
564 }
566 #javascriptConsole {
567 list-style-image: url("chrome://global/skin/console/console.png");
568 }
570 /* Primary toolbar buttons */
571 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button,
572 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 {
573 -moz-appearance: none;
574 }
576 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open="true"],
577 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:hover:active {
578 padding: 3px;
579 }
581 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
582 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
583 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon,
584 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-icon {
585 -moz-margin-end: 0;
586 padding: 2px 6px;
587 border: 1px solid transparent;
588 border-radius: 2px;
589 transition-property: background-color, border-color;
590 transition-duration: 150ms;
591 }
593 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
594 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-container > .toolbarbutton-icon,
595 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
596 padding: 3px 7px;
597 }
599 toolbarbutton[type="badged"] > .toolbarbutton-badge-container > .toolbarbutton-icon,
600 toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
601 max-width: 32px !important;
602 }
604 /* Help SDK icons fit: */
605 toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
606 width: 16px;
607 }
609 :-moz-any(#TabsToolbar, #nav-bar) toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
610 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
611 width: 32px;
612 }
614 #nav-bar #PanelUI-menu-button {
615 -moz-padding-start: 7px;
616 -moz-padding-end: 5px;
617 }
619 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
620 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
621 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
622 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-container > .toolbarbutton-icon,
623 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-icon {
624 background-color: hsla(0,0%,100%,.3);
625 background-image: linear-gradient(hsla(0,0%,100%,.7), hsla(0,0%,100%,.2));
626 border: 1px solid rgb(154,154,154);
627 box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset,
628 0 0 0 1px hsla(0,0%,100%,.2) inset,
629 0 1px 0 hsla(0,0%,0%,.03);
630 }
632 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
633 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
634 margin-top: 4px;
635 margin-bottom: 4px;
636 }
638 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open="true"]) > .toolbarbutton-icon,
639 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
640 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-container > .toolbarbutton-icon,
641 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon {
642 background-color: rgba(154,154,154,.5);
643 background-image: linear-gradient(hsla(0,0%,100%,.7), hsla(0,0%,100%,.4));
644 border: 1px solid rgb(154,154,154);
645 box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset,
646 0 0 1px hsla(0,0%,0%,.3) inset;
647 transition-duration: 10ms;
648 }
650 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon {
651 background-color: rgba(90%,90%,90%,.4);
652 transition: background-color 150ms;
653 }
655 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button[open],
656 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button:hover:active,
657 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:hover:active {
658 padding: 3px;
659 }
661 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
662 content: "";
663 display: -moz-box;
664 width: 1px;
665 height: 18px;
666 -moz-margin-end: -1px;
667 background-image: linear-gradient(hsla(210,54%,20%,.2) 0, hsla(210,54%,20%,.2) 18px);
668 background-clip: padding-box;
669 background-position: center;
670 background-repeat: no-repeat;
671 background-size: 1px 18px;
672 box-shadow: 0 0 0 1px hsla(0,0%,100%,.2);
673 }
675 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
676 -moz-margin-start: -4px;
677 margin-top: 3px;
678 margin-bottom: 3px;
679 }
681 #back-button {
682 padding-top: 3px;
683 padding-bottom: 3px;
684 -moz-padding-start: 5px;
685 -moz-padding-end: 0;
686 position: relative;
687 z-index: 1;
688 border-radius: 0 10000px 10000px 0;
689 }
691 #back-button:-moz-locale-dir(rtl) {
692 border-radius: 10000px 0 0 10000px;
693 }
695 #back-button > menupopup {
696 margin-top: -1px;
697 }
699 #back-button > .toolbarbutton-icon {
700 border-radius: 10000px;
701 background-clip: padding-box;
702 padding: 6px;
703 border: none;
704 box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset,
705 0 0 0 1px hsla(0,0%,100%,.3) inset,
706 0 0 0 1px hsla(210,54%,20%,.25),
707 0 1px 0 hsla(210,54%,20%,.35);
708 background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1));
709 transition-property: background-color, box-shadow;
710 transition-duration: 250ms;
711 }
713 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
714 background-color: hsla(210,48%,96%,.75);
715 box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset,
716 0 0 0 1px hsla(0,0%,100%,.3) inset,
717 0 0 0 1px hsla(210,54%,20%,.3),
718 0 1px 0 hsla(210,54%,20%,.4),
719 0 0 4px hsla(210,54%,20%,.2);
720 }
722 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
723 #back-button[open="true"] > .toolbarbutton-icon {
724 background-color: hsla(210,54%,20%,.15);
725 box-shadow: 0 1px 1px hsla(210,54%,20%,.1) inset,
726 0 0 1px hsla(210,54%,20%,.2) inset,
727 0 0 0 1px hsla(210,54%,20%,.4),
728 0 1px 0 hsla(210,54%,20%,.2);
729 transition: none;
730 }
732 #main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon {
733 box-shadow: 0 0 0 1px hsla(210,54%,20%,.55),
734 0 1px 0 hsla(210,54%,20%,.65) !important;
735 transition: none;
736 }
738 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
739 transform: scaleX(-1);
740 }
742 #forward-button {
743 -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
744 padding: 0;
745 }
747 #forward-button > .toolbarbutton-icon {
748 background-clip: padding-box;
749 padding-left: 9px;
750 padding-right: 3px;
751 border: 1px solid #9a9a9a;
752 border-left-style: none;
753 border-radius: 0;
754 }
756 @conditionalForwardWithUrlbar@:not([switchingtabs]) > #forward-button {
757 transition: margin-left @forwardTransitionLength@ ease-out;
758 }
760 @conditionalForwardWithUrlbar@ > #forward-button[disabled] {
761 margin-left: -@conditionalForwardWithUrlbarWidth@px;
762 }
764 @conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] {
765 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
766 transition-delay: 100s;
767 }
769 @conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] {
770 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
771 margin-left: -@conditionalForwardWithUrlbarWidth@.01px;
772 }
774 /* tabview menu item */
776 #menu_tabview {
777 list-style-image: url(chrome://browser/skin/tabview/tabview.png);
778 -moz-image-region: rect(0, 80px, 16px, 64px);
779 }
781 #menu_tabview[groups="0"] {
782 -moz-image-region: rect(0, 16px, 16px, 0);
783 }
785 #menu_tabview[groups="1"] {
786 -moz-image-region: rect(0, 32px, 16px, 16px);
787 }
789 #menu_tabview[groups="2"] {
790 -moz-image-region: rect(0, 48px, 16px, 32px);
791 }
793 #menu_tabview[groups="3"] {
794 -moz-image-region: rect(0, 64px, 16px, 48px);
795 }
797 #bookmarks-button {
798 -moz-image-region: rect(0px 72px 24px 48px);
799 }
801 #new-tab-button {
802 -moz-image-region: rect(0px 96px 24px 72px);
803 }
805 #new-window-button {
806 -moz-image-region: rect(0px 120px 24px 96px);
807 }
809 #sync-button {
810 -moz-image-region: rect(0px 144px 24px 120px);
811 }
812 #sync-button[cui-areatype="toolbar"][status="active"] {
813 list-style-image: url("chrome://browser/skin/syncProgress-toolbar.png");
814 -moz-image-region: rect(0px 18px 18px 0px);
815 }
816 #sync-button[cui-areatype="menu-panel"][status="active"] {
817 list-style-image: url("chrome://browser/skin/syncProgress-menuPanel.png");
818 -moz-image-region: rect(0px 32px 32px 0px);
819 }
821 #feed-button {
822 -moz-image-region: rect(0px 168px 24px 144px);
823 }
825 #feed-button[disabled] > .toolbarbutton-icon {
826 opacity: .4;
827 }
829 #webrtc-status-button {
830 -moz-image-region: rect(0px 192px 24px 168px);
831 }
833 .unified-nav-back[_moz-menuactive] {
834 list-style-image: url("moz-icon://stock/gtk-go-back-ltr?size=menu") !important;
835 }
836 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
837 list-style-image: url("moz-icon://stock/gtk-go-back-rtl?size=menu") !important;
838 }
839 .unified-nav-forward[_moz-menuactive] {
840 list-style-image: url("moz-icon://stock/gtk-go-forward-ltr?size=menu") !important;
841 }
842 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
843 list-style-image: url("moz-icon://stock/gtk-go-forward-rtl?size=menu") !important;
844 }
846 /* Menu panel buttons */
848 %include ../shared/toolbarbuttons.inc.css
849 %include ../shared/menupanel.inc.css
851 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
852 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
853 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
854 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
855 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
856 opacity: 0.4;
857 }
859 /* Fullscreen window controls */
860 #window-controls {
861 -moz-box-align: start;
862 -moz-margin-start: 10px;
863 }
865 #minimize-button {
866 list-style-image: url("chrome://global/skin/icons/Minimize.gif");
867 }
868 #restore-button {
869 list-style-image: url("chrome://global/skin/icons/Restore.gif");
870 }
871 #close-button {
872 list-style-image: url("chrome://global/skin/icons/Close.gif");
873 }
875 /* Location bar */
876 #urlbar,
877 .searchbar-textbox {
878 -moz-appearance: none;
879 padding: 1px;
880 border: 1px solid ThreeDShadow;
881 border-radius: 2px;
882 margin: 0 3px;
883 }
885 #urlbar[focused],
886 .searchbar-textbox[focused] {
887 border-color: Highlight;
888 }
890 #urlbar {
891 background-color: -moz-field;
892 }
894 .urlbar-textbox-container {
895 -moz-appearance: none;
896 -moz-box-align: stretch;
897 }
899 .urlbar-input-box {
900 -moz-margin-start: 0;
901 }
903 .urlbar-history-dropmarker {
904 -moz-appearance: toolbarbutton-dropdown;
905 }
907 #urlbar-container {
908 -moz-box-align: center;
909 }
911 @conditionalForwardWithUrlbar@ > #urlbar {
912 -moz-border-start: none;
913 margin-left: 0;
914 }
916 @conditionalForwardWithUrlbar@ > #urlbar:-moz-locale-dir(ltr) {
917 border-top-left-radius: 0;
918 border-bottom-left-radius: 0;
919 }
921 @conditionalForwardWithUrlbar@ > #urlbar:-moz-locale-dir(rtl) {
922 border-top-right-radius: 0;
923 border-bottom-right-radius: 0;
924 }
926 @conditionalForwardWithUrlbar@ {
927 clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");
928 -moz-margin-start: -5px;
929 }
931 @conditionalForwardWithUrlbar@:-moz-locale-dir(rtl),
932 @conditionalForwardWithUrlbar@ > #urlbar:-moz-locale-dir(rtl) {
933 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
934 transform: scaleX(-1);
935 }
937 @conditionalForwardWithUrlbar@:-moz-locale-dir(rtl) {
938 -moz-box-direction: reverse;
939 }
941 #urlbar-icons {
942 -moz-box-align: center;
943 }
945 .urlbar-icon {
946 cursor: pointer;
947 padding: 0 3px;
948 }
950 #urlbar-search-splitter {
951 -moz-appearance: none;
952 width: 8px;
953 -moz-margin-start: -4px;
954 }
956 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
957 -moz-margin-start: 0;
958 }
960 #urlbar-display-box {
961 margin-top: -1px;
962 margin-bottom: -1px;
963 -moz-border-end: 1px solid #AAA;
964 -moz-margin-end: 3px;
965 }
967 #urlbar-display {
968 margin-top: 0;
969 margin-bottom: 0;
970 -moz-margin-start: 0;
971 color: GrayText;
972 }
974 #search-container {
975 min-width: calc(54px + 11ch);
976 }
978 /* identity box */
980 #identity-box {
981 padding: 1px;
982 font-size: .9em;
983 }
985 #identity-box:-moz-locale-dir(ltr) {
986 border-top-left-radius: 1.5px;
987 border-bottom-left-radius: 1.5px;
988 }
990 #identity-box:-moz-locale-dir(rtl) {
991 border-top-right-radius: 1.5px;
992 border-bottom-right-radius: 1.5px;
993 }
995 #notification-popup-box:not([hidden]) + #identity-box {
996 -moz-padding-start: 10px;
997 border-radius: 0;
998 }
1000 @conditionalForwardWithUrlbar@ > #urlbar > #identity-box {
1001 border-radius: 0;
1002 }
1004 @conditionalForwardWithUrlbar@:not([switchingtabs]) > #urlbar > #identity-box {
1005 transition: padding-left, padding-right;
1006 }
1008 @conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
1009 padding-left: 5px;
1010 }
1012 @conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
1013 padding-right: 5px;
1014 }
1016 @conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box {
1017 /* forward button hiding is delayed when hovered */
1018 transition-delay: 100s;
1019 }
1021 @conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
1022 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
1023 padding-left: 5.01px;
1024 }
1026 @conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
1027 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
1028 padding-right: 5.01px;
1029 }
1031 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI,
1032 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1033 -moz-margin-end: 4px;
1034 }
1036 #identity-box.verifiedIdentity:not(:-moz-lwtheme) {
1037 background-color: #fff;
1038 }
1040 #identity-box:-moz-focusring {
1041 outline: 1px dotted #000;
1042 outline-offset: -3px;
1043 }
1045 #identity-icon-labels {
1046 -moz-padding-start: 2px;
1047 -moz-padding-end: 5px;
1048 }
1050 %include ../shared/identity-block.inc.css
1052 #page-proxy-favicon {
1053 margin-top: 1px;
1054 margin-bottom: 1px;
1055 -moz-margin-start: 3px;
1056 -moz-margin-end: 1px;
1057 -moz-image-region: rect(0, 16px, 16px, 0);
1058 }
1060 #identity-box:hover > #page-proxy-favicon {
1061 -moz-image-region: rect(0, 32px, 16px, 16px);
1062 }
1064 #identity-box:hover:active > #page-proxy-favicon,
1065 #identity-box[open=true] > #page-proxy-favicon {
1066 -moz-image-region: rect(0, 48px, 16px, 32px);
1067 }
1069 /* Identity popup icons */
1070 #identity-popup-icon {
1071 height: 64px;
1072 width: 64px;
1073 padding: 0;
1074 list-style-image: url("chrome://browser/skin/identity.png");
1075 -moz-image-region: rect(0px, 64px, 64px, 0px);
1076 }
1078 #identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon {
1079 -moz-image-region: rect(64px, 64px, 128px, 0px);
1080 }
1082 #identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon {
1083 -moz-image-region: rect(128px, 64px, 192px, 0px);
1084 }
1086 /* Identity popup body text */
1087 .identity-popup-description {
1088 white-space: pre-wrap;
1089 -moz-padding-start: 15px;
1090 margin: 2px 0 4px;
1091 }
1093 .identity-popup-label {
1094 white-space: pre-wrap;
1095 -moz-padding-start: 15px;
1096 margin: 0;
1097 }
1099 #identity-popup-content-host ,
1100 #identity-popup-content-owner {
1101 font-weight: bold;
1102 max-width: 300px;
1103 }
1105 #identity-popup-content-host ,
1106 #identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner {
1107 font-size: 140%;
1108 }
1110 #identity-popup-content-owner {
1111 margin-bottom: 0 !important;
1112 }
1114 #identity-popup-content-verifier {
1115 margin: 4px 0 2px;
1116 }
1118 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption ,
1119 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption {
1120 margin-top: 10px;
1121 -moz-margin-start: -18px;
1122 }
1124 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon ,
1125 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon {
1126 list-style-image: url("chrome://browser/skin/Secure.png");
1127 }
1129 #identity-popup-help-icon {
1130 -moz-appearance: none;
1131 margin-left: 0px;
1132 border: none;
1133 background: none;
1134 min-width: 0;
1135 list-style-image: url("chrome://global/skin/icons/question-16.png");
1136 cursor: pointer;
1137 }
1139 #identity-popup-help-icon > .button-box > .button-text {
1140 display: none;
1141 }
1143 #identity-popup-help-icon > .button-box > .button-icon {
1144 height: 16px;
1145 width: 16px;
1146 }
1148 #identity-popup-help-icon:-moz-focusring {
1149 outline: 1px dotted;
1150 outline-offset: 1px;
1151 }
1153 #identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
1154 padding: 0;
1155 }
1157 #identity-popup-container {
1158 min-width: 280px;
1159 padding: 10px;
1160 }
1162 #identity-popup-button-container {
1163 background: linear-gradient(to bottom, rgba(0,0,0,0.04) 60%, transparent);
1164 padding: 10px;
1165 margin-top: 5px;
1166 }
1168 /* Notification popup */
1169 #notification-popup {
1170 min-width: 280px;
1171 }
1173 .popup-notification-icon {
1174 width: 64px;
1175 height: 64px;
1176 -moz-margin-end: 10px;
1177 }
1179 .popup-notification-icon[popupid="geolocation"] {
1180 list-style-image: url(chrome://browser/skin/Geolocation-64.png);
1181 }
1183 .popup-notification-icon[popupid="xpinstall-disabled"],
1184 .popup-notification-icon[popupid="addon-progress"],
1185 .popup-notification-icon[popupid="addon-install-cancelled"],
1186 .popup-notification-icon[popupid="addon-install-blocked"],
1187 .popup-notification-icon[popupid="addon-install-failed"],
1188 .popup-notification-icon[popupid="addon-install-complete"] {
1189 list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png);
1190 width: 32px;
1191 height: 32px;
1192 }
1194 .popup-notification-icon[popupid="click-to-play-plugins"] {
1195 list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
1196 }
1198 .popup-notification-icon[popupid="plugins-not-found"] {
1199 list-style-image: url(chrome://browser/skin/pluginInstall-64.png);
1200 }
1202 .popup-notification-icon[popupid="web-notifications"] {
1203 list-style-image: url(chrome://browser/skin/notification-64.png);
1204 }
1206 .addon-progress-description {
1207 width: 350px;
1208 max-width: 350px;
1209 }
1211 .popup-progress-label,
1212 .popup-progress-meter {
1213 -moz-margin-start: 0;
1214 -moz-margin-end: 0;
1215 }
1217 .popup-progress-cancel {
1218 -moz-appearance: none;
1219 background: transparent;
1220 border: none;
1221 padding: 0;
1222 margin: 0;
1223 -moz-margin-start: 5px;
1224 min-height: 0;
1225 min-width: 0;
1226 list-style-image: url("moz-icon://stock/gtk-cancel?size=menu");
1227 }
1229 .popup-notification-icon[popupid="canvas-permissions-prompt"] {
1230 list-style-image: url(chrome://browser/skin/canvas-popup.svg);
1231 }
1233 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
1234 .popup-notification-icon[popupid="indexedDB-quota-prompt"],
1235 .popup-notification-icon[popupid*="offline-app-requested"],
1236 .popup-notification-icon[popupid="offline-app-usage"] {
1237 list-style-image: url(chrome://global/skin/icons/question-64.png);
1238 }
1240 .popup-notification-icon[popupid="password-save"],
1241 .popup-notification-icon[popupid="password-change"] {
1242 list-style-image: url(chrome://mozapps/skin/passwordmgr/key-64.png);
1243 }
1245 .popup-notification-icon[popupid="webapps-install-progress"],
1246 .popup-notification-icon[popupid="webapps-install"] {
1247 list-style-image: url(chrome://global/skin/icons/webapps-64.png);
1248 }
1250 .popup-notification-icon[popupid="mixed-content-blocked"] {
1251 list-style-image: url(chrome://browser/skin/mixed-content-blocked-64.png);
1252 }
1254 .popup-notification-icon[popupid="webRTC-sharingDevices"],
1255 .popup-notification-icon[popupid="webRTC-shareDevices"] {
1256 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64.png);
1257 }
1259 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
1260 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
1261 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64.png);
1262 }
1264 .popup-notification-icon[popupid="pointerLock"] {
1265 list-style-image: url(chrome://browser/skin/pointerLock-64.png);
1266 }
1268 /* Notification icon box */
1269 #notification-popup-box {
1270 position: relative;
1271 background-color: #fff;
1272 background-clip: padding-box;
1273 padding-left: 3px;
1274 border-radius: 2.5px 0 0 2.5px;
1275 border-width: 0 8px 0 0;
1276 border-style: solid;
1277 border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 fill;
1278 -moz-margin-end: -8px;
1279 margin-top: -1px;
1280 margin-bottom: -1px;
1281 }
1283 @conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box {
1284 padding-left: 7px;
1285 }
1287 #notification-popup-box:not([hidden]) + #identity-box {
1288 -moz-padding-start: 10px;
1289 border-radius: 0;
1290 }
1292 #notification-popup-box:-moz-locale-dir(rtl),
1293 .notification-anchor-icon:-moz-locale-dir(rtl) {
1294 transform: scaleX(-1);
1295 }
1297 .notification-anchor-icon {
1298 width: 16px;
1299 height: 16px;
1300 margin: 0 2px;
1301 }
1303 .notification-anchor-icon:-moz-focusring {
1304 outline: 1px dotted -moz-DialogText;
1305 }
1307 .default-notification-icon,
1308 #default-notification-icon {
1309 list-style-image: url(chrome://global/skin/icons/information-16.png);
1310 }
1312 .identity-notification-icon,
1313 #identity-notification-icon {
1314 list-style-image: url(chrome://mozapps/skin/profile/profileicon.png);
1315 }
1317 .geo-notification-icon,
1318 #geo-notification-icon {
1319 list-style-image: url(chrome://browser/skin/Geolocation-16.png);
1320 }
1322 #addons-notification-icon {
1323 list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.png);
1324 }
1326 #canvas-notification-icon {
1327 list-style-image: url(chrome://browser/skin/canvas-popup.svg);
1328 }
1330 .indexedDB-notification-icon,
1331 #indexedDB-notification-icon {
1332 list-style-image: url(chrome://global/skin/icons/question-16.png);
1333 }
1335 #password-notification-icon {
1336 list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png);
1337 }
1339 #webapps-notification-icon {
1340 list-style-image: url(chrome://global/skin/icons/webapps-16.png);
1341 }
1343 #plugins-notification-icon {
1344 list-style-image: url(chrome://browser/skin/notification-pluginNormal.png);
1345 }
1346 #plugins-notification-icon.plugin-hidden {
1347 list-style-image: url(chrome://browser/skin/notification-pluginAlert.png);
1348 }
1349 #plugins-notification-icon.plugin-blocked {
1350 list-style-image: url(chrome://browser/skin/notification-pluginBlocked.png);
1351 }
1353 #plugins-notification-icon {
1354 -moz-image-region: rect(0, 16px, 16px, 0);
1355 }
1357 #plugins-notification-icon:hover {
1358 -moz-image-region: rect(0, 32px, 16px, 16px);
1359 }
1361 #plugins-notification-icon:active {
1362 -moz-image-region: rect(0, 48px, 16px, 32px);
1363 }
1365 #plugin-install-notification-icon {
1366 list-style-image: url(chrome://browser/skin/pluginInstall-16.png);
1367 }
1369 #notification-popup-box[hidden] {
1370 /* Override display:none to make the pluginBlockedNotification animation work
1371 when showing the notification repeatedly. */
1372 display: -moz-box;
1373 visibility: collapse;
1374 }
1376 #plugins-notification-icon.plugin-blocked[showing] {
1377 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
1378 }
1380 @keyframes pluginBlockedNotification {
1381 from {
1382 opacity: 0;
1383 }
1384 to {
1385 opacity: 1;
1386 }
1387 }
1389 .mixed-content-blocked-notification-icon,
1390 #mixed-content-blocked-notification-icon {
1391 list-style-image: url(chrome://browser/skin/mixed-content-blocked-16.png);
1392 }
1394 .webRTC-shareDevices-notification-icon,
1395 #webRTC-shareDevices-notification-icon {
1396 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16.png);
1397 }
1399 .webRTC-sharingDevices-notification-icon,
1400 #webRTC-sharingDevices-notification-icon {
1401 list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16.png);
1402 }
1404 .webRTC-shareMicrophone-notification-icon,
1405 #webRTC-shareMicrophone-notification-icon {
1406 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16.png);
1407 }
1409 .webRTC-sharingMicrophone-notification-icon,
1410 #webRTC-sharingMicrophone-notification-icon {
1411 list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16.png);
1412 }
1414 .web-notifications-notification-icon,
1415 #web-notifications-notification-icon {
1416 list-style-image: url(chrome://browser/skin/notification-16.png);
1417 }
1419 #pointerLock-notification-icon {
1420 list-style-image: url(chrome://browser/skin/pointerLock-16.png);
1421 }
1422 #pointerLock-cancel {
1423 margin: 0px;
1424 }
1426 .translate-notification-icon,
1427 #translate-notification-icon {
1428 list-style-image: url(chrome://browser/skin/translation-16.png);
1429 -moz-image-region: rect(0px, 16px, 16px, 0px);
1430 }
1432 .translated-notification-icon,
1433 #translated-notification-icon {
1434 list-style-image: url(chrome://browser/skin/translation-16.png);
1435 -moz-image-region: rect(0px, 32px, 16px, 16px);
1436 }
1438 #treecolAutoCompleteImage {
1439 max-width : 36px;
1440 }
1442 .ac-result-type-bookmark,
1443 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
1444 list-style-image: url("chrome://browser/skin/places/star-icons.png");
1445 -moz-image-region: rect(0px 32px 16px 16px);
1446 width: 16px;
1447 height: 16px;
1448 }
1450 .ac-result-type-keyword,
1451 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
1452 list-style-image: url(moz-icon://stock/gtk-find?size=menu);
1453 width: 16px;
1454 height: 16px;
1455 }
1457 .ac-result-type-tag,
1458 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
1459 list-style-image: url("chrome://browser/skin/places/tag.png");
1460 width: 16px;
1461 height: 16px;
1462 }
1464 .ac-comment {
1465 font-size: 1.05em;
1466 }
1468 .ac-extra > .ac-comment {
1469 font-size: inherit;
1470 }
1472 .ac-url-text,
1473 .ac-action-text {
1474 color: -moz-nativehyperlinktext;
1475 font-size: 0.9em;
1476 }
1478 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
1479 list-style-image: url("chrome://browser/skin/actionicon-tab.png");
1480 padding: 0 3px;
1481 }
1483 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
1484 color: GrayText;
1485 }
1487 .ac-comment[selected="true"],
1488 .ac-url-text[selected="true"],
1489 .ac-action-text[selected="true"] {
1490 color: inherit !important;
1491 }
1493 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
1494 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment) {
1495 color: GrayText;
1496 font-size: smaller;
1497 }
1499 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
1500 border-top: 1px solid GrayText;
1501 }
1503 /* Combined go/reload/stop button in location bar */
1505 #urlbar > toolbarbutton {
1506 -moz-appearance: none;
1507 padding: 0 2px;
1508 cursor: pointer;
1509 list-style-image: url("chrome://browser/skin/reload-stop-go.png");
1510 }
1512 #urlbar-reload-button {
1513 -moz-image-region: rect(0, 14px, 14px, 0);
1514 }
1516 #urlbar-reload-button:not([disabled]):hover {
1517 background-image: radial-gradient(circle closest-side, hsla(200,100%,70%,.2), hsla(200,100%,70%,0));
1518 -moz-image-region: rect(14px, 14px, 28px, 0);
1519 }
1521 #urlbar-reload-button:not([disabled]):hover:active {
1522 background-image: radial-gradient(circle closest-side, hsla(200,100%,60%,.1), hsla(200,100%,60%,0));
1523 -moz-image-region: rect(28px, 14px, 42px, 0);
1524 }
1526 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1527 transform: scaleX(-1);
1528 }
1530 #urlbar-go-button {
1531 -moz-image-region: rect(0, 42px, 14px, 28px);
1532 }
1534 #urlbar-go-button:hover {
1535 background-image: radial-gradient(circle closest-side, hsla(110,70%,50%,.2), hsla(110,70%,50%,0));
1536 -moz-image-region: rect(14px, 42px, 28px, 28px);
1537 }
1539 #urlbar-go-button:hover:active {
1540 background-image: radial-gradient(circle closest-side, hsla(110,70%,50%,.1), hsla(110,70%,50%,0));
1541 -moz-image-region: rect(28px, 42px, 42px, 28px);
1542 }
1544 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1545 transform: scaleX(-1);
1546 }
1548 #urlbar-stop-button {
1549 -moz-image-region: rect(0, 28px, 14px, 14px);
1550 }
1552 #urlbar-stop-button:not([disabled]):hover {
1553 background-image: radial-gradient(circle closest-side, hsla(5,100%,75%,.3), hsla(5,100%,75%,0));
1554 -moz-image-region: rect(14px, 28px, 28px, 14px);
1555 }
1557 #urlbar-stop-button:hover:active {
1558 background-image: radial-gradient(circle closest-side, hsla(5,100%,75%,.1), hsla(5,100%,75%,0));
1559 -moz-image-region: rect(28px, 28px, 42px, 14px);
1560 }
1562 /* Popup blocker button */
1563 #page-report-button {
1564 list-style-image: url("chrome://browser/skin/Info.png");
1565 }
1568 /* social share panel */
1570 .social-share-frame {
1571 background: linear-gradient(to bottom, rgba(242,242,242,.99), rgba(242,242,242,.95));
1572 border-left: 1px solid #f8f8f8;
1573 width: 330px;
1574 height: 150px;
1575 /* we resize our panels dynamically, make it look nice */
1576 transition: height 100ms ease-out, width 100ms ease-out;
1577 }
1579 .social-share-toolbar {
1580 border-right: 1px solid #dedede;
1581 background: linear-gradient(to bottom, rgba(247,247,247,.99), rgba(247,247,247,.95));
1582 }
1584 #social-share-provider-buttons {
1585 border-right: 1px solid #fbfbfb;
1586 padding: 6px;
1587 }
1589 #social-share-provider-buttons > .share-provider-button {
1590 padding: 6px;
1591 margin: 0;
1592 border: none;
1593 border-radius: 2px;
1594 }
1596 #social-share-provider-buttons > .share-provider-button[checked],
1597 #social-share-provider-buttons > .share-provider-button:active {
1598 padding: 5px;
1599 border: 1px solid #b5b5b8;
1600 box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.2);
1601 }
1603 #social-share-provider-buttons > .share-provider-button[checked] {
1604 background: linear-gradient(to bottom, #d9d9d9, #e3e3e3);
1605 }
1607 #social-share-provider-buttons > .share-provider-button > .toolbarbutton-text {
1608 display: none;
1609 }
1610 #social-share-provider-buttons > .share-provider-button > .toolbarbutton-icon {
1611 width: 16px;
1612 min-height: 16px;
1613 max-height: 16px;
1614 }
1616 /* social recommending panel */
1618 #social-mark-button {
1619 -moz-image-region: rect(0, 16px, 16px, 0);
1620 }
1622 /* bookmarks menu-button */
1624 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
1625 -moz-appearance: none !important;
1626 -moz-box-align: center;
1627 }
1629 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1630 margin-top: 3px;
1631 margin-bottom: 3px;
1632 }
1634 #bookmarks-menu-button[disabled][cui-areatype="toolbar"] > .toolbarbutton-icon,
1635 #bookmarks-menu-button[disabled][cui-areatype="toolbar"] > .toolbarbutton-menu-dropmarker,
1636 #bookmarks-menu-button[disabled][cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker,
1637 #bookmarks-menu-button[disabled][cui-areatype="toolbar"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1638 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled] > .toolbarbutton-icon {
1639 opacity: .4;
1640 }
1642 #BMB_bookmarksPopup[side="top"],
1643 #BMB_bookmarksPopup[side="bottom"] {
1644 margin-left: -16px;
1645 margin-right: -16px;
1646 }
1648 #BMB_bookmarksPopup[side="left"],
1649 #BMB_bookmarksPopup[side="right"] {
1650 margin-top: -16px;
1651 margin-bottom: -16px;
1652 }
1654 #nav-bar .toolbarbutton-1 > menupopup[side="top"].cui-widget-panel,
1655 #nav-bar .toolbarbutton-1 > menupopup[side="bottom"].cui-widget-panel {
1656 margin-top: -4px;
1657 }
1659 /* Bookmarking panel */
1660 #editBookmarkPanelStarIcon {
1661 list-style-image: url("chrome://browser/skin/places/starred48.png");
1662 width: 48px;
1663 height: 48px;
1664 }
1666 #editBookmarkPanelStarIcon[unstarred] {
1667 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
1668 }
1670 #editBookmarkPanelTitle {
1671 font-size: 130%;
1672 }
1674 #editBookmarkPanelHeader,
1675 #editBookmarkPanelContent {
1676 margin-bottom: .5em;
1677 }
1679 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
1680 #editBMPanel_folderTree {
1681 min-width: 27em;
1682 }
1684 .panel-promo-box {
1685 margin: 8px -10px -10px -10px;
1686 padding: 8px 10px;
1687 border-top: 1px solid ThreeDShadow;
1688 background-image: linear-gradient(hsla(0,0%,0%,.15), hsla(0,0%,0%,.08) 6px);
1689 }
1691 .panel-promo-icon {
1692 list-style-image: url("chrome://browser/skin/sync-notification-24.png");
1693 -moz-margin-end: 10px;
1694 vertical-align: middle;
1695 }
1697 .panel-promo-closebutton {
1698 -moz-appearance: none;
1699 height: 16px;
1700 width: 16px;
1701 }
1703 .panel-promo-closebutton > .toolbarbutton-text {
1704 padding: 0;
1705 margin: 0;
1706 }
1708 /* Content area */
1709 #sidebar {
1710 background-color: Window;
1711 }
1713 .browserContainer > findbar {
1714 background-color: -moz-dialog;
1715 color: -moz-DialogText;
1716 text-shadow: none;
1717 }
1719 /* Tabstrip */
1721 %include ../shared/tabs.inc.css
1723 #tabbrowser-tabs {
1724 /* override the global style to allow the selected tab to be above the nav-bar */
1725 z-index: auto;
1726 }
1728 #TabsToolbar {
1729 min-height: 0;
1730 padding: 0;
1731 position: relative;
1732 }
1734 /*
1735 * Draw the bottom border of the tabstrip:
1736 */
1737 #TabsToolbar::after {
1738 content: "";
1739 position: absolute;
1740 bottom: @tabToolbarNavbarOverlap@;
1741 left: 0;
1742 right: 0;
1743 z-index: 0;
1744 border-bottom: 1px solid hsla(0,0%,0%,.3);
1745 }
1747 #TabsToolbar:not(:-moz-lwtheme) {
1748 -moz-appearance: menubar;
1749 color: -moz-menubartext;
1750 }
1752 #toolbar-menubar:not([autohide="true"]):not(:-moz-lwtheme):-moz-system-metric(menubar-drag),
1753 #TabsToolbar:not(:-moz-lwtheme):-moz-system-metric(menubar-drag) {
1754 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-drag");
1755 }
1757 .tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-label {
1758 outline: 1px dotted;
1759 }
1761 #context_reloadTab {
1762 list-style-image: url("moz-icon://stock/gtk-refresh?size=menu");
1763 }
1765 #context_closeOtherTabs {
1766 list-style-image: url("moz-icon://stock/gtk-clear?size=menu");
1767 }
1769 #context_closeOtherTabs[disabled] {
1770 list-style-image: url("moz-icon://stock/gtk-clear?size=menu&state=disabled");
1771 }
1773 #context_undoCloseTab {
1774 list-style-image: url("moz-icon://stock/gtk-undelete?size=menu");
1775 }
1777 #context_closeTab {
1778 list-style-image: url("moz-icon://stock/gtk-close?size=menu");
1779 }
1781 /* Tab drag and drop */
1782 .tab-drop-indicator {
1783 list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator.png);
1784 margin-bottom: -9px;
1785 z-index: 3;
1786 }
1788 /* Tab close button */
1789 .tab-close-button:not([selected]):not(:hover) {
1790 background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 64, 16, 48);
1791 }
1793 .tab-close-button:not([selected]):not(:hover):-moz-lwtheme-brighttext {
1794 background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64);
1795 }
1797 .tab-close-button:not([selected]):not(:hover):-moz-lwtheme-darktext {
1798 background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 96, 16, 80);
1799 }
1801 /* Tabstrip new tab button */
1802 .tabs-newtab-button,
1803 #TabsToolbar > #new-tab-button ,
1804 #TabsToolbar > #wrapper-new-tab-button > #new-tab-button {
1805 list-style-image: url("moz-icon://stock/gtk-add?size=menu");
1806 -moz-image-region: auto;
1807 }
1809 /* Tabbrowser arrowscrollbox arrows */
1810 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1811 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1812 -moz-appearance: none;
1813 margin: 0 0 @tabToolbarNavbarOverlap@;
1814 }
1816 .tabbrowser-arrowscrollbox > .scrollbutton-up {
1817 -moz-border-start: 0;
1818 -moz-border-end: 2px solid transparent;
1819 }
1821 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1822 -moz-border-start: 2px solid transparent;
1823 -moz-border-end: 0;
1824 transition: 1s box-shadow ease-out;
1825 border-radius: 4px;
1826 }
1828 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
1829 box-shadow: 0 0 5px 5px Highlight inset;
1830 transition: none;
1831 }
1833 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):-moz-locale-dir(ltr),
1834 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):-moz-locale-dir(rtl) {
1835 border-width: 0 2px 0 0;
1836 border-style: solid;
1837 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;
1838 }
1840 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):-moz-locale-dir(ltr),
1841 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):-moz-locale-dir(rtl) {
1842 border-width: 0 0 0 2px;
1843 border-style: solid;
1844 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;
1845 }
1847 #TabsToolbar .toolbarbutton-1 {
1848 margin-bottom: @tabToolbarNavbarOverlap@;
1849 }
1851 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon,
1852 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1853 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1854 margin-top: -2px;
1855 margin-bottom: -2px;
1856 }
1858 #alltabs-button > .toolbarbutton-menu-dropmarker {
1859 margin-bottom: -2px;
1860 }
1862 #alltabs-button > .toolbarbutton-icon {
1863 display: none;
1864 }
1866 /* All tabs menupopup */
1867 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
1868 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
1869 }
1871 .alltabs-item[selected="true"] {
1872 font-weight: bold;
1873 }
1875 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
1876 list-style-image: url("chrome://global/skin/icons/loading_16.png");
1877 }
1879 .alltabs-item[tabIsVisible] {
1880 /* box-shadow instead of background-color to work around native styling */
1881 box-shadow: inset -5px 0 ThreeDShadow;
1882 }
1884 /* Sidebar */
1885 #sidebar-throbber[loading="true"] {
1886 list-style-image: url("chrome://global/skin/icons/loading_16.png");
1887 -moz-margin-end: 4px;
1888 }
1890 toolbarbutton.chevron {
1891 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
1892 }
1894 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1895 transform: scaleX(-1);
1896 }
1898 toolbarbutton.chevron > .toolbarbutton-text,
1899 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
1900 display: none;
1901 }
1903 toolbarbutton.chevron > .toolbarbutton-icon {
1904 margin: 0;
1905 }
1907 /* Ctrl-Tab */
1909 .ctrlTab-preview {
1910 -moz-appearance: toolbarbutton;
1911 }
1913 .tabPreview-canvas {
1914 box-shadow: 0 0 5px ThreeDShadow;
1915 }
1917 .ctrlTab-preview:focus .tabPreview-canvas,
1918 .ctrlTab-preview:hover .tabPreview-canvas {
1919 box-shadow: none;
1920 }
1922 .ctrlTab-favicon[src] {
1923 background-color: white;
1924 width: 20px;
1925 height: 20px;
1926 padding: 2px;
1927 }
1929 #ctrlTab-panel {
1930 padding: 10px;
1931 }
1933 .ctrlTab-preview:not(#ctrlTab-showAll) .tabPreview-canvas {
1934 margin-bottom: 2px;
1935 }
1937 #ctrlTab-showAll {
1938 -moz-appearance: button;
1939 color: ButtonText;
1940 padding: 0 3px;
1941 margin-top: 10px;
1942 }
1944 /* Sync Panel */
1946 .sync-panel-icon {
1947 height:32px;
1948 width: 32px;
1949 background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
1950 }
1952 .sync-panel-inner {
1953 width: 0;
1954 padding-left: 10px;
1955 }
1957 .sync-panel-button-box {
1958 margin-top: 1em;
1959 }
1961 #sync-error-panel-title,
1962 #sync-start-panel-title {
1963 font-size: 120%;
1964 font-weight: bold;
1965 margin-bottom: 5px;
1966 }
1968 #sync-start-panel-subtitle,
1969 #sync-error-panel-subtitle {
1970 margin: 0;
1971 }
1973 /* Status panel */
1975 .statuspanel-label {
1976 margin: 0;
1977 padding: 2px 4px;
1978 background: linear-gradient(#fff, #ddd);
1979 border: 1px none #ccc;
1980 border-top-style: solid;
1981 color: #333;
1982 text-shadow: none;
1983 }
1985 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
1986 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
1987 border-right-style: solid;
1988 border-top-right-radius: .3em;
1989 margin-right: 1em;
1990 }
1992 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
1993 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
1994 border-left-style: solid;
1995 border-top-left-radius: .3em;
1996 margin-left: 1em;
1997 }
1999 #full-screen-warning-message {
2000 background-image: url("chrome://browser/skin/fullscreen-darknoise.png");
2001 color: white;
2002 border-radius: 4px;
2003 margin-top: 30px;
2004 padding: 30px 50px;
2005 box-shadow: 0 0 2px white;
2006 }
2008 #full-screen-warning-container[obscure-browser] {
2009 background-color: rgba(0,0,0,0.3);
2010 }
2012 .full-screen-description {
2013 font-size: 150%;
2014 }
2016 #full-screen-domain-text {
2017 font-size: 300%;
2018 }
2020 .full-screen-approval-button,
2021 #full-screen-remember-decision {
2022 font-size: 120%;
2023 }
2025 %include ../shared/devtools/responsivedesign.inc.css
2026 %include ../shared/devtools/highlighter.inc.css
2027 %include ../shared/devtools/commandline.inc.css
2028 %include ../shared/plugin-doorhanger.inc.css
2030 %include downloads/indicator.css
2032 .gcli-panel {
2033 padding: 0;
2034 }
2036 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
2037 color: hsl(210,11%,16%);
2038 }
2040 /* Error counter */
2042 #developer-toolbar-toolbox-button[error-count]:before {
2043 color: #FDF3DE;
2044 min-width: 16px;
2045 text-shadow: none;
2046 background-image: linear-gradient(#B4211B, #8A1915);
2047 border-radius: 1px;
2048 -moz-margin-end: 2px;
2049 }
2051 /* Social toolbar item */
2053 #social-provider-button {
2054 -moz-image-region: rect(0, 16px, 16px, 0);
2055 list-style-image: url(chrome://browser/skin/social/services-16.png);
2056 }
2058 #social-provider-button > .toolbarbutton-menu-dropmarker {
2059 display: none;
2060 }
2062 .toolbarbutton-badge-container {
2063 margin: 5px 3px;
2064 position: relative;
2065 }
2067 toolbar[iconsize="small"] .toolbarbutton-badge-container {
2068 margin: 0;
2069 }
2071 .toolbarbutton-badge[badge]:not([badge=""])::after {
2072 /* The |content| property is set in the content stylesheet. */
2073 font-size: 9px;
2074 font-weight: bold;
2075 padding: 0 1px;
2076 color: #fff;
2077 background-color: rgb(240,61,37);
2078 border: 1px solid rgb(216,55,34);
2079 border-radius: 2px;
2080 box-shadow: 0 1px 0 rgba(0,39,121,0.77);
2081 position: absolute;
2082 top: 0;
2083 right: 0;
2084 }
2086 .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
2087 left: 2px;
2088 right: auto;
2089 }
2091 .popup-notification-icon[popupid="servicesInstall"] {
2092 list-style-image: url(chrome://browser/skin/social/services-64.png);
2093 }
2094 #servicesInstall-notification-icon {
2095 list-style-image: url(chrome://browser/skin/social/services-16.png);
2096 }
2097 #social-undoactivation-button {
2098 -moz-margin-start: 0; /* override default label margin to match description margin */
2099 }
2101 .social-activation-icon {
2102 width: auto;
2103 height: auto;
2104 max-height: 64px;
2105 max-width: 64px;
2106 }
2108 #social-activation-message {
2109 max-width: 250px;
2110 }
2112 #social-activation-message > label {
2113 margin: 0;
2114 }
2116 /* social toolbar provider menu */
2117 #social-statusarea-popup {
2118 margin-top: 0;
2119 margin-left: -12px;
2120 margin-right: -12px;
2121 }
2123 .social-statusarea-user {
2124 list-style-image:url("chrome://global/skin/icons/information-32.png");
2125 }
2127 .social-statusarea-user-portrait {
2128 width: 32px;
2129 height: 32px;
2130 border-radius: 2px;
2131 margin: 10px;
2132 }
2134 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
2135 padding: 0;
2136 }
2138 %include ../shared/social/chat.inc.css
2140 .chat-titlebar {
2141 background-color: #d9d9d9;
2142 background-image: linear-gradient(@toolbarHighlight@, rgba(255,255,255,0));
2143 }
2145 .chat-titlebar[selected] {
2146 background-color: #f0f0f0;
2147 }
2149 .chatbar-button {
2150 -moz-appearance: none;
2151 background-color: #d9d9d9;
2152 background-image: linear-gradient(@toolbarHighlight@, rgba(255,255,255,0));
2153 }
2155 .chatbar-button > .toolbarbutton-icon {
2156 -moz-margin-end: 0;
2157 }
2159 .chatbar-button:hover,
2160 .chatbar-button[open="true"] {
2161 background-color: #f0f0f0;
2162 }
2164 .chatbar-button[activity] {
2165 background-image: radial-gradient(circle farthest-corner at center 3px, rgb(233,242,252) 3%, rgba(172,206,255,0.75) 40%, rgba(87,151,201,0.5) 80%, rgba(87,151,201,0));
2166 }
2168 chatbox {
2169 border-top-left-radius: 2.5px;
2170 border-top-right-radius: 2.5px;
2171 }
2173 /* Customization mode */
2175 %include ../shared/customizableui/customizeMode.inc.css
2177 #main-window[customizing] > #tab-view-deck {
2178 background: linear-gradient(to bottom, #bcbcbc, #b5b5b5);
2179 }
2181 #main-window[customize-entered] > #tab-view-deck {
2182 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"),
2183 url("chrome://browser/skin/customizableui/background-noise-toolbar.png"),
2184 linear-gradient(to bottom, #bcbcbc, #b5b5b5);
2185 background-attachment: fixed;
2186 }
2188 #main-window[customize-entered] #browser-bottombox,
2189 #main-window[customize-entered] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar),
2190 #main-window[customize-entered] #customization-container {
2191 border: 3px solid hsla(0,0%,0%,.1);
2192 border-top-width: 0;
2193 background-clip: padding-box;
2194 background-origin: padding-box;
2195 -moz-border-right-colors: hsla(0,0%,0%,.05) hsla(0,0%,0%,.1) hsla(0,0%,0%,.2);
2196 -moz-border-bottom-colors: hsla(0,0%,0%,.05) hsla(0,0%,0%,.1) hsla(0,0%,0%,.2);
2197 -moz-border-left-colors: hsla(0,0%,0%,.05) hsla(0,0%,0%,.1) hsla(0,0%,0%,.2);
2198 }
2200 #main-window[customize-entered] #customization-container,
2201 #main-window[customize-entered] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
2202 border-bottom-width: 0;
2203 }
2205 #main-window[customize-entered] #TabsToolbar {
2206 -moz-appearance: none;
2207 background-clip: padding-box;
2208 border-right: 3px solid transparent;
2209 border-left: 3px solid transparent;
2210 }
2212 /* The :hover:active style from toolkit doesn't seem to work in this panel so just use :active. */
2213 .customization-tipPanel-closeBox > .close-icon:active {
2214 background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 48, 16, 32);
2215 }
2217 /* End customization mode */
2220 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
2221 background: url("chrome://browser/skin/privatebrowsing-mask.png") center no-repeat;
2222 width: 40px;
2223 }
2225 %include ../shared/UITour.inc.css
2227 #UITourHighlight {
2228 /* Below are some fixes for people without an X compositor on Linux.
2229 This is why we can't have nice things: */
2230 /* Animations don't repaint properly without an X compositor. */
2231 animation-name: none !important;
2232 /* Opacity rounds to 0 or 1 on Linux without an X compositor so make the
2233 background be transparent in that case by having all alpha values < 0.5 */
2234 background-image: radial-gradient(50% 100%, rgba(0,149,220,0.3) 50%, rgba(0,149,220,0.49) 100%);
2235 /* The highlight isn't anti-aliased without an X compositor so make it thicker.
2236 Make it a darker color since we don't have the box-shadow in this case. */
2237 border: 4px solid rgb(0,149,220);
2238 }
2240 #UITourTooltipDescription {
2241 font-size: 1.05rem;
2242 }
2244 #UITourTooltipClose {
2245 -moz-margin-end: -4px;
2246 height: 16px;
2247 width: 16px;
2248 }
2250 #UITourTooltipButtons {
2251 margin-bottom: -10px;
2252 }
