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