browser/metro/theme/browser.css@b8a032363ba2
browser/metro/theme/browser.css
Thu, 22 Jan 2015 13:21:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 22 Jan 2015 13:21:57 +0100
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
- permissions
- -rw-r--r--
Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6
1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
5 %filter substitution
6 %include defines.inc
8 %define forward_transition_length 200ms
9 %define forward_spacing 50px
11 /* Tab/StartUI tray ======================================================== */
13 #tray {
14 transition: transform @metro_animation_duration@ @metro_animation_easing@;
15 transform: translateY(-@tabs_height@);
16 width: 100%;
17 }
19 #tray {
20 position: fixed;
21 }
23 #tray[expanded]:not([viewstate="snapped"]) {
24 transform: none;
25 }
27 /* Tabs -------------------------------------------------------------------- */
29 #tabs-container {
30 background: @panel_dark_color@ @panel_dark_background@;
31 padding: 0;
32 -moz-padding-start: @metro_spacing_normal@;
33 width: 100%;
34 }
36 #tabs {
37 -moz-padding-start: 0;
38 }
40 #tabs .tabs-list {
41 display: block;
42 -moz-user-focus: ignore;
43 padding: 0;
44 background-color: transparent;
45 margin: 0;
46 overflow: auto;
47 }
49 .tabs-scrollbox > .scrollbutton-up[collapsed],
50 .tabs-scrollbox > .scrollbutton-down[collapsed],
51 #tabs[input="imprecise"] > .tabs-scrollbox > .scrollbutton-up,
52 #tabs[input="imprecise"] > .tabs-scrollbox > .scrollbutton-down {
53 visibility: hidden !important;
54 pointer-events: none;
55 }
57 #tabs > .tabs-scrollbox > .scrollbutton-down:-moz-locale-dir(rtl),
58 #tabs > .tabs-scrollbox > .scrollbutton-up {
59 list-style-image: url("images/tab-arrows.png") !important;
60 -moz-image-region: rect(15px 58px 63px 14px) !important;
61 padding-right: 15px;
62 width: @tabs_scrollarrow_width@;
63 }
64 #tabs > .tabs-scrollbox > .scrollbutton-down:hover:-moz-locale-dir(rtl),
65 #tabs > .tabs-scrollbox > .scrollbutton-up:hover {
66 -moz-image-region: rect(14px 102px 62px 58px) !important;
67 }
68 #tabs > .tabs-scrollbox > .scrollbutton-down:active:-moz-locale-dir(rtl),
69 #tabs > .tabs-scrollbox > .scrollbutton-up:active {
70 -moz-image-region: rect(14px 152px 62px 108px) !important;
71 }
72 #tabs > .tabs-scrollbox > .scrollbutton-down[disabled]:-moz-locale-dir(rtl),
73 #tabs > .tabs-scrollbox > .scrollbutton-up[disabled] {
74 -moz-image-region: rect(15px 196px 63px 152px) !important;
75 }
77 #tabs > .tabs-scrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
78 #tabs > .tabs-scrollbox > .scrollbutton-down {
79 list-style-image: url("images/tab-arrows.png") !important;
80 -moz-image-region: rect(73px 58px 121px 14px) !important;
81 padding-left: 15px;
82 width: @tabs_scrollarrow_width@;
83 }
84 #tabs > .tabs-scrollbox > .scrollbutton-up:hover:-moz-locale-dir(rtl),
85 #tabs > .tabs-scrollbox > .scrollbutton-down:hover {
86 -moz-image-region: rect(72px 102px 120px 58px) !important;
87 }
88 #tabs > .tabs-scrollbox > .scrollbutton-up:active:-moz-locale-dir(rtl),
89 #tabs > .tabs-scrollbox > .scrollbutton-down:active {
90 -moz-image-region: rect(72px 152px 120px 108px) !important;
91 }
92 #tabs > .tabs-scrollbox > .scrollbutton-up[disabled]:-moz-locale-dir(rtl),
93 #tabs > .tabs-scrollbox > .scrollbutton-down[disabled] {
94 -moz-image-region: rect(73px 196px 121px 152px) !important;
95 }
97 .tabs-scrollbox > .scrollbutton-up:not([disabled]):not([collapsed]):-moz-locale-dir(rtl)::after {
98 right: calc(@tabs_scrollarrow_width@ + @metro_spacing_normal@);
99 }
101 .tabs-scrollbox > .scrollbutton-down:not([disabled]):not([collapsed]):-moz-locale-dir(rtl)::before {
102 right: auto;
103 left: calc(@tabs_scrollarrow_width@ + @newtab_button_width@);
104 }
106 .tabs-scrollbox > .scrollbutton-up:not([disabled]):not([collapsed])::after {
107 content: "";
108 visibility: visible;
109 display: block;
110 background-color: rgb(90, 91, 95);
111 position: absolute;
112 top: 0;
113 left: calc(@tabs_scrollarrow_width@ + @metro_spacing_normal@); /* .scrollbutton-up width + #tabs-container left padding */
114 width: 1px;
115 height: @tabs_height@;
116 }
118 .tabs-scrollbox > .scrollbutton-down:not([disabled]):not([collapsed])::before {
119 content: "";
120 visibility: visible;
121 display: block;
122 background-color: rgb(90, 91, 95);
123 position: absolute;
124 top: 0;
125 right: calc(@tabs_scrollarrow_width@ + @newtab_button_width@); /* .scrollbutton-down width + #newtab-button width */
126 width: 1px;
127 height: @tabs_height@;
128 }
130 /* Hack for bug 965550 */
131 .tabs-scrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
132 -moz-padding-start: calc(2 * @tabs_scrollarrow_width@);
133 -moz-margin-start: calc(-2 * @tabs_scrollarrow_width@);
134 }
136 #tabs-container[viewstate="snapped"] {
137 visibility: hidden;
138 }
140 @-moz-keyframes open-documenttab {
141 0% {
142 opacity: 0;
143 transform: scale(0, 0);
144 }
146 100% {
147 opacity: 1;
148 transform: scale(1, 1);
149 }
150 }
152 @-moz-keyframes close-documenttab {
153 0% {
154 opacity: 1;
155 transform: scale(1, 1);
156 }
158 100% {
159 opacity: 0;
160 transform: scale(0, 0);
161 }
162 }
164 .documenttab-container {
165 animation: open-documenttab 0.4s ease-out;
166 }
168 documenttab[closing] > .documenttab-container {
169 animation: close-documenttab 0.4s ease-out;
170 animation-fill-mode: forwards;
171 }
173 .documenttab-favicon {
174 visibility: collapse;
175 }
177 .documenttab-thumbnail {
178 margin: @metro_spacing_normal@ @metro_spacing_snormal@;
179 background: white none center top no-repeat;
180 background-size: cover;
181 min-width: @thumbnail_width@;
182 width: @thumbnail_width@;
183 height: @thumbnail_height@;
184 }
185 #tray:not([expanded]) .documenttab-thumbnail {
186 background-image: none!important;
187 }
189 /* TODO: Decide how and where to display private tabs.
190 * For now, display them in the main tab strip but hide the thumbnail. */
191 documenttab[private] .documenttab-thumbnail {
192 background-color: purple;
193 }
195 .documenttab-title {
196 margin: @metro_spacing_normal@ @metro_spacing_snormal@;
197 margin-top: 0;
198 font-size: @metro_font_normal@;
199 width: @thumbnail_width@;
200 padding: 4px @metro_spacing_snormal@ 8px;
202 background: #000;
203 opacity: 0.95;
204 color: #fff;
205 box-shadow: 0 0 @metro_spacing_snormal@ rgba(0, 0, 0, 0.25);
206 }
208 .documenttab-crop {
209 background: transparent url("chrome://browser/skin/images/tab-crop.png") 50% 50% no-repeat;
210 }
212 .documenttab-selection {
213 background: transparent -moz-image-rect(url("chrome://browser/skin/images/tab-overlay.png"), 0%, 100%, 50%, 0%) 50% 50% no-repeat;
214 }
216 documenttab[selected] .documenttab-selection {
217 background: transparent -moz-image-rect(url("chrome://browser/skin/images/tab-overlay.png"), 50%, 100%, 100%, 0%) 50% 50% no-repeat;
218 }
220 .documenttab-crop:-moz-locale-dir(rtl),
221 .documenttab-selection:-moz-locale-dir(rtl),
222 documenttab[selected] .documenttab-selection:-moz-locale-dir(rtl) {
223 transform: scaleX(-1);
224 }
226 .documenttab-close {
227 background: none !important;
228 padding: @metro_spacing_small@ !important;
229 margin-top: @metro_spacing_snormal@;
230 -moz-margin-end: @metro_spacing_xsmall@;
231 border-color: transparent !important;
232 list-style-image: url("chrome://browser/skin/images/closetab-default.png");
233 }
235 .documenttab-close > .button-box > .button-text {
236 display: none;
237 }
239 #tabs-controls {
240 -moz-box-align: start;
241 -moz-box-orient: vertical;
242 }
244 #newtab-button {
245 list-style-image: url(chrome://browser/skin/images/newtab-default.png);
247 /* Add some extra padding for a larger target */
248 padding: 18px 20px 30px 20px;
249 width: @newtab_button_width@;
250 }
252 /* Start UI ----------------------------------------------------------------- */
254 #urlbar-autocomplete[viewstate="snapped"],
255 #urlbar-autocomplete[viewstate="portrait"]{
256 -moz-box-orient: vertical;
257 }
259 #autocomplete-overlay {
260 display: none;
261 background-color: black;
262 opacity: .3;
263 position: fixed;
264 top: 0;
265 left: 0;
266 right: 0;
267 bottom: 0;
268 }
270 #stack[autocomplete] > #page > #content-viewport > #autocomplete-overlay {
271 display: -moz-box;
272 }
274 /* Browser Content Areas ==================================================== */
276 /* a 'margin-top' is applied dynamically in ContentAreaObserver */
277 #browsers {
278 background: white;
279 transition-property: margin-top;
280 transition-duration: .3s;
281 transition-timing-function: ease-in-out;
282 }
283 #browsers browser {
284 /* unset padding-bottom immediately */
285 transition-duration: 0s;
286 transition-delay: 0s;
287 transition-property: padding-bottom;
288 }
289 /* Selection overlay and monocles */
290 #page,
291 .selection-overlay {
292 -moz-stack-sizing: ignore;
293 }
295 .selection-overlay {
296 pointer-events: none;
297 }
299 .selection-overlay:-moz-focusring {
300 outline: 0 !important;
301 }
303 .selection-overlay-hidden {
304 display: none;
305 }
307 .selectionhandle {
308 background-image: url("chrome://browser/skin/images/selection-monocle.png");
309 background-repeat: no-repeat;
310 background-size: 18px 18px;
311 padding: 0px;
312 margin-top: -19px;
313 margin-left: -9px;
314 pointer-events: auto;
315 }
317 @media (min-resolution: @min_res_140pc@) {
318 /* Load 140% image when scaled by 140% */
319 .selectionhandle {
320 background-image: url("chrome://browser/skin/images/selection-monocle@1.4x.png");
321 }
322 }
324 @media (min-resolution: @min_res_180pc@) {
325 /* Load 180% image when scaled by 180% */
326 .selectionhandle {
327 background-image: url("chrome://browser/skin/images/selection-monocle@1.8x.png");
328 }
329 }
331 /* content scrollbars */
332 .scroller {
333 opacity: 0;
334 background-color: rgba(0, 0, 0, 0.4) !important;
335 -moz-border-top-colors: none !important;
336 -moz-border-bottom-colors: none !important;
337 -moz-border-right-colors: none !important;
338 -moz-border-left-colors: none !important;
339 border-radius: @border_radius_tiny@;
340 border: @border_width_tiny@ solid rgba(255, 255, 255, 0.4) !important;
341 }
343 .scroller[panning] {
344 opacity: 1;
345 }
347 .scroller[orient="vertical"] {
348 min-width: @scroller_thickness@;
349 width: @scroller_thickness@;
350 min-height: @scroller_minimum@;
351 }
353 .scroller[orient="horizontal"] {
354 min-height: @scroller_thickness@;
355 height: @scroller_thickness@;
356 min-width: @scroller_minimum@;
357 }
359 /* overlay buttons */
361 .overlay-button {
362 position: fixed;
363 top: 50%;
364 margin-top: -65px;
365 width: 118px;
366 height: 118px;
367 background-color: hsla(210,30%,10%,.2);
368 background-size: 60px;
369 background-repeat: no-repeat;
370 background-origin: padding-box;
371 background-clip: padding-box;
372 border: 6px solid hsla(0,0%,100%,.7);
373 border-radius: 50%;
374 box-shadow: 0 0 0 1px hsla(0,0%,0%,.04),
375 0 0 9px 0 hsla(0,0%,0%,.1);
376 transition-property: left, right, transform, background-position,
377 background-color, background-size, border-color,
378 visibility, box-shadow, top;
379 transition-duration: 550ms;
380 transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
381 }
383 #overlay-back {
384 background-image: url(chrome://browser/skin/images/overlay-back.png);
385 }
387 #overlay-plus {
388 background-image: url(chrome://browser/skin/images/overlay-plus.png);
389 }
391 @media (min-resolution: @min_res_140pc@) {
392 #overlay-back {
393 background-image: url(chrome://browser/skin/images/overlay-back@1.4x.png);
394 }
396 #overlay-plus {
397 background-image: url(chrome://browser/skin/images/overlay-plus@1.4x.png);
398 }
399 }
401 @media (min-resolution: @min_res_180pc@) {
402 #overlay-back {
403 background-image: url(chrome://browser/skin/images/overlay-back@1.8x.png);
404 }
406 #overlay-plus {
407 background-image: url(chrome://browser/skin/images/overlay-plus@1.8x.png);
408 }
409 }
411 #overlay-back:-moz-locale-dir(ltr),
412 #overlay-plus:-moz-locale-dir(rtl) {
413 left: -70px;
414 background-position: right 6px center;
415 }
417 #overlay-plus:-moz-locale-dir(ltr) {
418 right: -70px;
419 background-position: left 6px center;
420 }
422 #stack[viewstate="snapped"] > .overlay-button,
423 #stack[keyboardVisible] > .overlay-button,
424 #stack[autocomplete] > .overlay-button,
425 #stack[fullscreen] > .overlay-button,
426 #appbar[visible] ~ .overlay-button,
427 .overlay-button[disabled] {
428 box-shadow: none;
429 visibility: collapse;
430 }
432 #stack[keyboardVisible] > #overlay-back:-moz-locale-dir(ltr),
433 #stack[keyboardVisible] > #overlay-plus:-moz-locale-dir(rtl),
434 #stack[autocomplete] > #overlay-back:-moz-locale-dir(ltr),
435 #stack[autocomplete] > #overlay-plus:-moz-locale-dir(rtl),
436 #stack[fullscreen] > #overlay-back:-moz-locale-dir(ltr),
437 #stack[fullscreen] > #overlay-plus:-moz-locale-dir(rtl),
438 #appbar[visible] ~ #overlay-back:-moz-locale-dir(ltr),
439 #appbar[visible] ~ #overlay-plus:-moz-locale-dir(rtl),
440 #overlay-back[disabled]:-moz-locale-dir(ltr),
441 #overlay-plus[disabled]:-moz-locale-dir(rtl) {
442 transform: translateX(-60px);
443 }
445 #stack[keyboardVisible] > #overlay-plus:-moz-locale-dir(ltr),
446 #stack[keyboardVisible] > #overlay-back:-moz-locale-dir(rtl),
447 #stack[autocomplete] > #overlay-plus:-moz-locale-dir(ltr),
448 #stack[autocomplete] > #overlay-back:-moz-locale-dir(rtl),
449 #stack[fullscreen] > #overlay-plus:-moz-locale-dir(ltr),
450 #stack[fullscreen] > #overlay-back:-moz-locale-dir(rtl),
451 #appbar[visible] ~ #overlay-plus:-moz-locale-dir(ltr),
452 #appbar[visible] ~ #overlay-back:-moz-locale-dir(rtl),
453 #overlay-plus[disabled]:-moz-locale-dir(ltr),
454 #overlay-back[disabled]:-moz-locale-dir(rtl) {
455 transform: translateX(60px);
456 }
458 .overlay-button:hover {
459 background-color: hsla(210,30%,10%,.4);
460 background-size: 90px;
461 border-color: hsla(0,0%,100%,.9);
462 }
464 #overlay-back:-moz-locale-dir(ltr):hover,
465 #overlay-plus:-moz-locale-dir(rtl):hover {
466 background-position: right 12px center;
467 transform: translateX(40px) scale(1.2);
468 }
470 #overlay-plus:-moz-locale-dir(ltr):hover {
471 background-position: left 12px center;
472 transform: translateX(-40px) scale(1.2);
473 }
475 #overlay-back:-moz-locale-dir(rtl):hover {
476 transform: translateX(-40px) scale(1.2) scaleX(-1);
477 }
479 #overlay-back:-moz-locale-dir(rtl) {
480 transform: scaleX(-1);
481 right: -70px;
482 background-position: right 9px center;
483 }
485 #overlay-back[mousedrag],
486 #overlay-plus[mousedrag] {
487 transition-property: left, right, transform, background-position,
488 background-color, background-size, border-color,
489 visibility, box-shadow;
490 }
492 /* Navigation bar ========================================================== */
494 /* Most appbars are hidden by default, but we want to keep #navbar visible so
495 * we can show the progress bar at all times. Instead, we hide only the
496 * toolbar portion of the navbar. */
497 #navbar {
498 visibility: visible;
499 }
500 #navbar:not([hiding]):not([visible]) > #toolbar-overlay {
501 visibility: hidden;
502 }
504 #content-viewport[navbar="visible"] .active-tab-notificationbox:not([count="0"]):not([notificationsVisible="false"]) {
505 padding-bottom: @toolbar_height@;
506 }
509 /* Progress meter ---------------------------------------------------------- */
511 #progress-container {
512 display: block;
513 position: absolute;
514 top: -@progress_height@;
515 height: @progress_height@;
516 width: 100%;
517 background-color: hsla(210,5%,80%,1);
518 box-shadow: 0 1px 0 hsla(210,5%,50%,.1) inset;
519 -moz-user-focus: ignore;
520 }
521 #progress-container[startpage] {
522 visibility: collapse;
523 }
525 #progress-control {
526 display: block;
527 height: @progress_height@;
528 background-image: -moz-linear-gradient(left, hsla(200,100%,83%,.5),
529 hsla(200,100%,83%,0)),
530 -moz-linear-gradient(top, #1ab2ff, #0091ff);
531 border-right: 1px solid #0082e5;
532 transition: width .3s ease-in;
533 -moz-user-focus: ignore;
534 }
536 #progress-control:-moz-dir(rtl) {
537 transform: scaleX(-1);
538 }
540 #progress-control[fade] {
541 opacity: 0;
542 transition: width .3s ease-in, .5s opacity ease-in;
543 }
545 /* Toolbar ----------------------------------------------------------------- */
547 #toolbar-overlay {
548 background-color: @panel_light_color@;
549 }
551 #urlbar-autocomplete {
552 padding-top: 0;
553 }
555 #toolbar {
556 padding: 0 @toolbar_horizontal_padding@;
557 }
559 #toolbar[viewstate="snapped"] {
560 padding: 0 @toolbar_snapped_horizontal_padding@;
561 }
563 #toolbar[viewstate="snapped"] > toolbarbutton {
564 margin: 0 @toolbar_snapped_horizontal_spacing@;
565 }
567 /* Combined back/forward buttons */
569 #back-button {
570 list-style-image: url(chrome://browser/skin/images/navbar-back.png);
571 position: relative;
572 z-index: 1;
573 transition: opacity @forward_transition_length@ ease-out;
574 }
576 #back-button:-moz-locale-dir(rtl),
577 #forward-button:-moz-locale-dir(rtl) {
578 transform: scaleX(-1);
579 }
581 #back-button[disabled] {
582 visibility: visible;
583 opacity: 0.5;
584 }
586 #forward-button {
587 list-style-image: url(chrome://browser/skin/images/navbar-forward.png);
588 transition: margin @forward_transition_length@ ease-out,
589 visibility @forward_transition_length@ ease-out,
590 opacity @forward_transition_length@ ease-out;
591 }
593 #forward-button[disabled] {
594 -moz-margin-start: -@forward_spacing@ !important;
595 visibility: hidden;
596 opacity: 0;
597 pointer-events: none;
598 }
600 @media (min-resolution: @min_res_140pc@) {
601 #back-button {
602 list-style-image: url(chrome://browser/skin/images/navbar-back@1.4x.png);
603 }
605 #forward-button {
606 list-style-image: url(chrome://browser/skin/images/navbar-forward@1.4x.png);
607 }
608 }
610 @media (min-resolution: @min_res_180pc@) {
611 #back-button {
612 list-style-image: url(chrome://browser/skin/images/navbar-back@1.8x.png);
613 }
615 #forward-button {
616 list-style-image: url(chrome://browser/skin/images/navbar-forward@1.8x.png);
617 }
618 }
620 /* URL bar */
621 #urlbar {
622 border: @metro_border_thick@ solid @urlbar_border_color@;
623 margin: 0 @toolbar_horizontal_spacing@;
624 padding: 0;
625 background-color: @field_background_color@;
626 overflow: hidden;
627 }
629 #urlbar[editing] {
630 border-color: @metro_orange@;
631 }
633 /* Identity widget */
634 #identity-icon {
635 margin: 0;
636 padding: 0 @metro_spacing_snormal@;
637 list-style-image: url("chrome://browser/skin/images/identity-icons-generic.png");
638 }
640 #identity-box.verifiedDomain > #identity-icon {
641 list-style-image: url("chrome://browser/skin/images/identity-icons-https.png");
642 }
644 #identity-box.verifiedIdentity > #identity-icon {
645 list-style-image: url("chrome://browser/skin/images/identity-icons-https-ev.png");
646 }
648 #toolbar[startpage] > #urlbar:not([autocomplete]) > #identity-box > #identity-icon {
649 list-style-image: url("chrome://browser/skin/images/icons-identity-firefox.png");
650 }
652 #urlbar[autocomplete] > #identity-box > #identity-icon {
653 list-style-image: url("chrome://browser/skin/images/icon-autocomplete-search.png");
654 }
656 /* Main URL textbox */
657 #urlbar-edit {
658 margin: 0 !important;
659 min-height: @urlbar_edit_height@;
660 -moz-appearance: none !important;
661 border-radius: 0;
662 border: 0 none !important;
663 padding: 0 !important;
664 }
666 #urlbar-edit > hbox > .textbox-input-box > .textbox-input:invalid {
667 /* Hide error glow around the address bar that shows by default
668 * when URLs are made invalid by trmming. */
669 box-shadow: none !important;
670 }
672 /* Combined stop-reload button */
673 .urlbar-button {
674 margin: 0;
675 -moz-image-region: rect(0px, 30px, 30px, 0px);
676 }
678 .urlbar-button:hover:not(:active) {
679 -moz-image-region: rect(0px, 60px, 30px, 30px);
680 background-color: #dedfdf;
681 }
683 .urlbar-button:active {
684 -moz-image-region: rect(0px, 90px, 30px, 60px);
685 background-color: #6d7073;
686 }
688 .urlbar-button > .toolbarbutton-icon {
689 width: 30px;
690 height: 30px;
691 }
693 #go-button {
694 list-style-image: url(chrome://browser/skin/images/urlbar-go.png)
695 }
697 #reload-button {
698 list-style-image: url(chrome://browser/skin/images/urlbar-reload.png);
699 }
701 #stop-button {
702 list-style-image: url(chrome://browser/skin/images/urlbar-stop.png);
703 }
705 @media (min-resolution: @min_res_140pc@) {
706 .urlbar-button {
707 -moz-image-region: rect(0px, 42px, 42px, 0px);
708 }
710 .urlbar-button:hover:not(:active) {
711 -moz-image-region: rect(0px, 84px, 42px, 42px);
712 }
714 .urlbar-button:active {
715 -moz-image-region: rect(0px, 126px, 42px, 84px);
716 }
718 #go-button {
719 list-style-image: url(chrome://browser/skin/images/urlbar-go@1.4x.png)
720 }
722 #reload-button {
723 list-style-image: url(chrome://browser/skin/images/urlbar-reload@1.4x.png);
724 }
726 #stop-button {
727 list-style-image: url(chrome://browser/skin/images/urlbar-stop@1.4x.png);
728 }
730 #toolbar[startpage] > #urlbar:not([autocomplete]) > #identity-box > #identity-icon {
731 list-style-image: url("chrome://browser/skin/images/icons-identity-firefox@1.4x.png");
732 }
734 #urlbar[autocomplete] > #identity-box > #identity-icon {
735 list-style-image: url("chrome://browser/skin/images/icon-autocomplete-search@1.4x.png");
736 }
737 }
739 @media (min-resolution: @min_res_180pc@) {
740 .urlbar-button {
741 -moz-image-region: rect(0px, 54px, 54px, 0px);
742 }
744 .urlbar-button:hover:not(:active) {
745 -moz-image-region: rect(0px, 108px, 54px, 54px);
746 }
748 .urlbar-button:active {
749 -moz-image-region: rect(0px, 162px, 54px, 108px);
750 }
752 #go-button {
753 list-style-image: url(chrome://browser/skin/images/urlbar-go@1.8x.png)
754 }
756 #reload-button {
757 list-style-image: url(chrome://browser/skin/images/urlbar-reload@1.8x.png);
758 }
760 #stop-button {
761 list-style-image: url(chrome://browser/skin/images/urlbar-stop@1.8x.png);
762 }
764 #toolbar[startpage] > #urlbar:not([autocomplete]) > #identity-box > #identity-icon {
765 list-style-image: url("chrome://browser/skin/images/icons-identity-firefox@1.8x.png");
766 }
768 #urlbar[autocomplete] > #identity-box > #identity-icon {
769 list-style-image: url("chrome://browser/skin/images/icon-autocomplete-search@1.8x.png");
770 }
771 }
773 /* navbar edit button: one button out of three - when editing: go, when !editing,
774 loading: stop, when !editing, !loading: reload */
776 #go-button, #reload-button, #stop-button {
777 visibility: collapse;
778 }
780 #urlbar[editing] > #go-button,
781 #urlbar:not([editing])[loading] > #stop-button,
782 #urlbar:not([editing]):not([loading]) > #reload-button {
783 visibility: visible;
784 }
786 /* Contextual toolbar controls */
788 #toolbar-context-autocomplete,
789 .hide-on-start,
790 #toolbar-context-page {
791 transition-property: opacity, visibility;
792 transition-duration: @forward_transition_length@;
793 transition-timing-function: @metro_animation_easing@;
794 }
796 #toolbar-contextual:not([autocomplete]) #toolbar-context-autocomplete,
797 #toolbar-contextual[startpage] .hide-on-start,
798 #toolbar-contextual[autocomplete] #toolbar-context-page {
799 opacity: 0;
800 visibility: hidden;
801 pointer-events: none;
802 }
804 #toolbar[viewstate="snapped"] #toolbar-contextual {
805 visibility: collapse;
806 }
808 #download-progress:not([progress]) {
809 visibility: collapse;
810 }
812 #download-progress {
813 list-style-image: url(chrome://browser/skin/images/navbar-download.png);
814 }
816 #download-progress[progress="100"] {
817 list-style-image: url(chrome://browser/skin/images/navbar-download-finished.png);
818 }
820 #pin-button {
821 list-style-image: url(chrome://browser/skin/images/navbar-pin.png);
822 }
824 #star-button {
825 list-style-image: url(chrome://browser/skin/images/navbar-star.png);
826 }
828 #menu-button {
829 list-style-image: url(chrome://browser/skin/images/navbar-menu.png);
830 }
832 #close-button {
833 list-style-image: url(chrome://browser/skin/images/navbar-close.png);
834 }
836 @media (min-resolution: @min_res_140pc@) {
837 #download-progress {
838 list-style-image: url(chrome://browser/skin/images/navbar-download@1.4x.png);
839 }
841 #download-progress[progress="100"] {
842 list-style-image: url(chrome://browser/skin/images/navbar-download-finished@1.4x.png);
843 }
845 #pin-button {
846 list-style-image: url(chrome://browser/skin/images/navbar-pin@1.4x.png);
847 }
849 #star-button {
850 list-style-image: url(chrome://browser/skin/images/navbar-star@1.4x.png);
851 }
853 #menu-button {
854 list-style-image: url(chrome://browser/skin/images/navbar-menu@1.4x.png);
855 }
857 #close-button {
858 list-style-image: url(chrome://browser/skin/images/navbar-close@1.4x.png);
859 }
860 }
862 @media (min-resolution: @min_res_180pc@) {
863 #download-progress {
864 list-style-image: url(chrome://browser/skin/images/navbar-download@1.8x.png);
865 }
867 #download-progress[progress="100"] {
868 list-style-image: url(chrome://browser/skin/images/navbar-download-finished@1.8x.png);
869 }
871 #pin-button {
872 list-style-image: url(chrome://browser/skin/images/navbar-pin@1.8x.png);
873 }
875 #star-button {
876 list-style-image: url(chrome://browser/skin/images/navbar-star@1.8x.png);
877 }
879 #menu-button {
880 list-style-image: url(chrome://browser/skin/images/navbar-menu@1.8x.png);
881 }
883 #close-button {
884 list-style-image: url(chrome://browser/skin/images/navbar-close@1.8x.png);
885 }
886 }
888 /* Panel UI ================================================================ */
890 #panel-container {
891 padding: 60px 40px;
892 }
894 #panel-container[viewstate="snapped"] .canSnapTiles .richgrid-item-content {
895 -moz-box-orient: horizontal;
896 }
898 #panel-close-button {
899 -moz-margin-end: 40px;
900 list-style-image: url(chrome://browser/skin/images/navbar-back.png);
901 -moz-box-pack: center;
902 }
904 #panel-close-button:-moz-locale-dir(rtl) {
905 transform: scaleX(-1);
906 }
908 @media (min-resolution: @min_res_140pc@) {
909 #panel-close-button {
910 list-style-image: url(chrome://browser/skin/images/navbar-back@1.4x.png);
911 }
912 }
914 @media (min-resolution: @min_res_180pc@) {
915 #panel-close-button {
916 list-style-image: url(chrome://browser/skin/images/navbar-back@1.8x.png);
917 }
918 }
920 #panel-items {
921 padding-top: 20px;
922 -moz-padding-start: 88px;
923 }
925 #panel-container[viewstate="snapped"] #panel-items {
926 padding-left: 0px;
927 }
929 /* Console Section - Panel UI ---------------------------------------------- */
931 #console-filter-warnings,
932 #console-filter-messages {
933 visibility: visible;
934 }
936 @media (max-width: 499px) {
937 #console-filter-warnings,
938 #console-filter-messages {
939 visibility: collapse;
940 }
941 }
943 .console-error-msg,
944 .console-msg-text {
945 white-space: pre-wrap;
946 }
948 /* Find bar ================================================================ */
950 #findbar {
951 background-color: @metro_orange@;
952 padding: 0;
953 }
955 #findbar > toolbar {
956 min-height: @findbar_height@ !important;
957 }
959 #findbar-textbox {
960 border: none !important;
961 width: 20em;
962 }
964 /* Override the default box ordering and make the find textbox appear to the
965 right of the icon */
966 #findbar-textbox input {
967 -moz-box-ordinal-group: 2
968 }
970 #findbar-textbox[status="1"] { /* Ci.nsITypeAheadFind.FIND_NOTFOUND */
971 background: rgb(255,200,200);
972 }
974 #findbar-textbox:hover:active {
975 background: #8db8d8;
976 }
978 .textbox-search-icon {
979 list-style-image: url("chrome://browser/skin/images/search-glass-30.png");
980 -moz-image-region: auto;
981 }
983 #findbar-previous-button {
984 -moz-image-region: rect(0px, 400px, 40px, 360px);
985 }
987 #findbar-previous-button:hover:not(:active) {
988 -moz-image-region: rect(40px, 400px, 80px, 360px);
989 }
991 #findbar-previous-button:active {
992 -moz-image-region: rect(80px, 400px, 120px, 360px);
993 }
995 #findbar-next-button {
996 -moz-image-region: rect(0px, 440px, 40px, 400px);
997 }
999 #findbar-next-button:hover:not(:active) {
1000 -moz-image-region: rect(40px, 440px, 80px, 400px);
1001 }
1003 #findbar-next-button:active {
1004 -moz-image-region: rect(80px, 440px, 120px, 400px);
1005 }
1007 #findbar-close-button {
1008 -moz-image-region: rect(0px, 480px, 40px, 440px);
1009 }
1011 #findbar-close-button:hover:not(:active) {
1012 -moz-image-region: rect(40px, 480px, 80px, 440px);
1013 }
1015 #findbar-close-button:active {
1016 -moz-image-region: rect(80px, 480px, 120px, 440px);
1017 }
1019 /* Contextual appbar ======================================================= */
1021 #contextualactions-tray {
1022 background-color: @metro_orange@;
1023 }
1025 #contextualactions-tray > toolbarbutton {
1026 opacity: 1;
1027 }
1028 #contextualactions-tray > toolbarbutton[fade] {
1029 opacity: 0;
1030 }
1031 #contextualactions-tray > toolbarbutton:not([immediate]) {
1032 transition-property: opacity;
1033 transition-duration: .3s;
1034 transition-timing-function: ease-in;
1035 transition-delay: 80ms;
1036 }
1037 #contextualactions-tray > toolbarbutton > .toolbarbutton-text {
1038 color: white;
1039 }
1041 #pin-selected-button {
1042 list-style-image: url(chrome://browser/skin/images/navbar-contextual-pin.png);
1043 }
1045 #unpin-selected-button {
1046 list-style-image: url(chrome://browser/skin/images/navbar-contextual-unpin.png);
1047 }
1049 #hide-selected-button {
1050 list-style-image: url(chrome://browser/skin/images/navbar-contextual-hide.png);
1051 }
1053 #delete-selected-button {
1054 list-style-image: url(chrome://browser/skin/images/navbar-contextual-delete.png);
1055 }
1057 #clear-selected-button {
1058 list-style-image: url(chrome://browser/skin/images/navbar-contextual-clear.png);
1059 }
1061 #restore-selected-button {
1062 list-style-image: url(chrome://browser/skin/images/navbar-contextual-restore.png);
1063 }
1065 @media (min-resolution: @min_res_140pc@) {
1066 #pin-selected-button {
1067 list-style-image: url(chrome://browser/skin/images/navbar-contextual-pin@1.4x.png);
1068 }
1070 #unpin-selected-button {
1071 list-style-image: url(chrome://browser/skin/images/navbar-contextual-unpin@1.4x.png);
1072 }
1074 #hide-selected-button {
1075 list-style-image: url(chrome://browser/skin/images/navbar-contextual-hide@1.4x.png);
1076 }
1078 #delete-selected-button {
1079 list-style-image: url(chrome://browser/skin/images/navbar-contextual-delete@1.4x.png);
1080 }
1082 #clear-selected-button {
1083 list-style-image: url(chrome://browser/skin/images/navbar-contextual-clear@1.4x.png);
1084 }
1086 #restore-selected-button {
1087 list-style-image: url(chrome://browser/skin/images/navbar-contextual-restore@1.4x.png);
1088 }
1089 }
1091 @media (min-resolution: @min_res_180pc@) {
1092 #pin-selected-button {
1093 list-style-image: url(chrome://browser/skin/images/navbar-contextual-pin@1.8x.png);
1094 }
1096 #unpin-selected-button {
1097 list-style-image: url(chrome://browser/skin/images/navbar-contextual-unpin@1.8x.png);
1098 }
1100 #hide-selected-button {
1101 list-style-image: url(chrome://browser/skin/images/navbar-contextual-hide@1.8x.png);
1102 }
1104 #delete-selected-button {
1105 list-style-image: url(chrome://browser/skin/images/navbar-contextual-delete@1.8x.png);
1106 }
1108 #clear-selected-button {
1109 list-style-image: url(chrome://browser/skin/images/navbar-contextual-clear@1.8x.png);
1110 }
1112 #restore-selected-button {
1113 list-style-image: url(chrome://browser/skin/images/navbar-contextual-restore@1.8x.png);
1114 }
1115 }
1117 /* Download notifications ======================================================= */
1119 .download-filename-text {
1120 font-weight: bold;
1121 }
1122 .download-host-text {
1123 font-weight: bold;
1124 }
1126 /* Autoscroll popup ======================================================== */
1128 .autoscroller {
1129 height: 28px;
1130 width: 28px;
1131 border: none;
1132 margin: -14px;
1133 padding: 0;
1134 background-image: url("chrome://browser/skin/images/autoscroll.png");
1135 background-color: transparent;
1136 position: fixed;
1137 visibility: hidden;
1138 background-repeat: no-repeat;
1139 background-origin: padding-box;
1140 background-clip: padding-box;
1141 background-position: right top;
1142 -moz-appearance: none;
1143 }
1145 .autoscroller[scrolldir="NS"] {
1146 background-position: right center;
1147 }
1149 .autoscroller[scrolldir="EW"] {
1150 background-position: right bottom;
1151 }
1153 /* Flyouts ================================================================= */
1155 /* don't add a margin to the very top settings entry in flyouts */
1156 flyoutpanel > settings:first-child {
1157 margin-top: 0px;
1158 }
1160 /* Sync flyout pane -------------------------------------------------------- */
1162 #sync-flyoutpanel {
1163 font-size: @metro_font_normal@;
1164 font-weight: 400;
1165 }
1167 #sync-flyoutpanel button {
1168 font-weight: 700;
1169 }
1171 #sync-flyoutpanel .syncHeader {
1172 font-weight: 600;
1173 }
1175 #sync-flyoutpanel .syncSecondaryText {
1176 font-weight: 100;
1177 font-size: @metro_font_snormal@;
1178 }
1180 #sync-flyoutpanel .syncInstructionText {
1181 font-style: italic;
1182 }
1184 .syncThrobber .progressBall {
1185 margin: 2px;
1186 width: 22px;
1187 height: 22px;
1188 }
1190 .syncThrobber .progressBallInner {
1191 width: 5px;
1192 height: 5px;
1193 border-radius: 3px;
1194 }
1196 #sync-flyoutpanel .syncErrorText {
1197 color: red;
1198 }
1200 #sync-flyoutpanel textbox {
1201 margin: @metro_spacing_small@;
1202 padding: @metro_spacing_xsmall@ @metro_spacing_snormal@;
1203 background: @field_background_color@;
1204 border: @metro_border_thick@ solid @field_mid_foreground_color@ !important;
1205 color: @field_foreground_color@;
1206 }
1208 #sync-setup-throbber {
1209 margin-top: 15px;
1210 margin-left: 25px;
1211 }
1213 #sync-connected-device {
1214 width: 200px;
1215 }
1217 #sync-manualsetup-failure {
1218 width: 200px;
1219 }
1221 #sync-flyoutpanel .syncJPAKECode {
1222 margin: @metro_spacing_small@;
1223 padding: @metro_spacing_xsmall@ @metro_spacing_snormal@;
1224 background: @field_background_color@;
1225 border: @metro_border_thick@ solid @field_mid_foreground_color@ !important;
1226 color: @field_foreground_color@;
1227 display: block !important;
1228 font-size: @metro_font_large@ !important;
1229 font-weight: 600;
1230 letter-spacing: 0.4em;
1231 text-align: center;
1232 width: 175px;
1233 }
1235 #sync-connected-device {
1236 margin-bottom: 0px;
1237 padding-bottom: 0px;
1238 }
1240 #sync-connected-lastSynced {
1241 margin-top: 0px;
1242 padding-top: 0px;
1243 }
1245 #sync-connected-throbber {
1246 margin-top: 12px;
1247 margin-left: 15px;
1248 }
1250 /* About flyout pane ------------------------------------------------------- */
1252 /* Colors are defined in /browser/branding/<dir>/content/metro-about.css */
1254 #about-flyoutpanel {
1255 background-image: url('chrome://branding/content/metro-about-footer.png');
1256 background-repeat: no-repeat;
1257 background-attachment: fixed;
1258 background-position: right bottom;
1259 }
1261 #about-flyoutpanel .text-link {
1262 color: inherit;
1263 }
1265 #about-flyoutpanel > .flyoutpanel-wrapper > .flyoutpanel-header,
1266 #about-flyoutpanel > .flyoutpanel-wrapper > .flyoutpanel-contents {
1267 background-color: inherit;
1268 border: none;
1269 }
1271 #about-policy-label {
1272 padding: 1.5em @metro_spacing_large@;
1273 margin: 1em -@metro_spacing_large@;
1274 }
1276 #about-version-label {
1277 margin-top: 11pt;
1278 }
1280 #currentChannel {
1281 margin: 0;
1282 padding: 0;
1283 font-weight: bold;
1284 }
1286 /* Preferences flyout pane ------------------------------------------------- */
1288 /* Lay out each <setting> in a single row */
1289 setting {
1290 min-height: @touch_row@; /* row size */
1291 -moz-box-align: center;
1292 -moz-box-orient: horizontal;
1293 }
1295 /* ...except for some exceptions */
1296 .setting-expanded {
1297 -moz-box-align: start;
1298 -moz-box-orient: vertical;
1299 }
1301 setting > vbox {
1302 -moz-box-flex: 1;
1303 }
1305 settings {
1306 margin-top: 32px;
1307 }
1309 .settings-title {
1310 font-weight: bold;
1311 }
1313 /* <setting> elements that are not in a <settings> group get special treatment */
1314 #prefs-flyoutpanel > setting,
1315 #sync-flyoutpanel > setting {
1316 margin-top: 16px;
1317 }
1319 #prefs-flyoutpanel > setting .preferences-title {
1320 font-weight: bold;
1321 }
1323 setting[type="integer"] > .preferences-alignment,
1324 setting[type="string"] > .preferences-alignment {
1325 -moz-box-flex: 3;
1326 }
1328 setting[type="file"] > .preferences-alignment,
1329 setting[type="directory"] > .preferences-alignment {
1330 -moz-box-align: center;
1331 }
1333 /* Removes the left side title vbox on radio setting */
1334 setting[type="radio"] > vbox {
1335 display: none;
1336 }
1338 #prefs-homepage-options, #prefs-homepage-popup {
1339 min-width: 200px;
1340 }
1342 .options-box {
1343 -moz-margin-start: 28px; /* sized based on the 32px addon image */
1344 }
1346 .options-box > setting:last-child {
1347 border-bottom: 0;
1348 }
1350 .preferences-description {
1351 font-size: @font_small@ !important;
1352 color: grey;
1353 }
1355 .preferences-description:empty {
1356 display: none;
1357 }
1359 /* Clear private data prefs */
1361 /* hide subitems when other data checkbox is not checked */
1362 #prefs-privdata-other:not([checked]) + #prefs-privdata-subitems {
1363 display: none;
1364 }
1366 #prefs-privdata-subitems {
1367 display: block;
1368 padding-left: @metro_spacing_xnormal@;
1369 font-size: @metro_font_snormal@;
1370 }
1372 /* arrange sub-items in two columns */
1373 .privdata-subitem-item {
1374 display: inline-block;
1375 vertical-align: middle;
1376 margin: 0;
1377 width: 50%;
1378 }
1380 #clear-notification {
1381 max-height: 25px;
1382 }
1384 #clearprivacythrobber {
1385 max-width: 25px;
1386 max-height: 25px;
1387 }
1389 #clearprivacythrobber .progressContainer {
1390 width: 25px;
1391 height: 25px;
1392 }
1394 #clearprivacythrobber .progressBall {
1395 margin: 2px;
1396 width: 22px;
1397 height: 22px;
1398 }
1400 #clear-notification-done {
1401 font-weight: bold;
1402 }
