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