michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0:  * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: 
michael@0: %filter substitution
michael@0: %include defines.inc
michael@0: 
michael@0: flyoutpanel {
michael@0:   height: 100%;
michael@0:   background-color: #ffffff;
michael@0:   visibility: collapse;
michael@0:   position: fixed;
michael@0:   transition: transform @metro_animation_duration@ @metro_animation_easing@;
michael@0:   transform: translateX(100%);
michael@0:   font-size: 11pt;
michael@0:   right: 0;
michael@0: }
michael@0: 
michael@0: flyoutpanel:-moz-dir(rtl) {
michael@0:   left: 0;
michael@0:   right: auto;
michael@0:   transform: translateX(-100%);
michael@0: }
michael@0: 
michael@0: .flyoutpanel-slide-in {
michael@0:   transform: translateX(0);
michael@0: }
michael@0: 
michael@0: flyoutpanel[visible] {
michael@0:   visibility: visible;
michael@0: }
michael@0: 
michael@0: /* XUL flexbox layout doesn't work in a position:fixed container, so we have
michael@0:  * this normally-positioned inside for layout purposes. */
michael@0: .flyoutpanel-wrapper {
michael@0:   height: 100%;
michael@0:   width: 100%;
michael@0: }
michael@0: 
michael@0: .flyoutpanel-header {
michael@0:   border-width: 1px;
michael@0:   -moz-border-start-style: solid;
michael@0:   border-color: #1b1b1b;
michael@0:   background-color: #002147;
michael@0:   height: 80px;
michael@0:   width: 100%;
michael@0:   color: #ffffff;
michael@0:   font-weight: lighter;
michael@0:   font-size: 20pt;
michael@0: }
michael@0: 
michael@0: .flyout-close-button {
michael@0:   margin-top: 30px !important;
michael@0:   -moz-margin-start: 40px !important;
michael@0: }
michael@0: 
michael@0: .flyout-header-label {
michael@0:   margin-top: 30px !important;
michael@0:   -moz-margin-start: 10px !important;
michael@0: }
michael@0: 
michael@0: .flyoutpanel-contents {
michael@0:   border-width: 1px;
michael@0:   -moz-border-start-style: solid;
michael@0:   border-color: #c2c2c2;
michael@0:   padding: @metro_spacing_large@;
michael@0:   width: 100%;
michael@0: }
michael@0: 
michael@0: .flyoutpanel-contents[input="precise"] {
michael@0:   overflow-y: scroll;
michael@0:   overflow-x: hidden;
michael@0: }
michael@0: 
michael@0: .flyout-close-button {
michael@0:   border: 0 none;
michael@0:   -moz-appearance: none;
michael@0:   list-style-image: url(chrome://browser/skin/images/flyout-back-button.png);
michael@0:   -moz-image-region: rect(0 32px 32px 0);
michael@0: }
michael@0: 
michael@0: .flyout-close-button:-moz-locale-dir(rtl) {
michael@0:   transform: scaleX(-1);
michael@0: }
michael@0: 
michael@0: .flyout-close-button:hover {
michael@0:   -moz-image-region: rect(0 64px 32px 32px);
michael@0: }
michael@0: 
michael@0: .flyout-close-button:active {
michael@0:   -moz-image-region: rect(0 96px 32px 64px);
michael@0: }