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