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: /* all localizable skin settings shall live here */
michael@0: @import url("chrome://global/locale/intl.css");
michael@0: 
michael@0: %include shared.inc
michael@0: @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
michael@0: 
michael@0: /* ::::: XBL bindings ::::: */
michael@0: 
michael@0: menulist > menupopup,
michael@0: .menulist-menupopup {
michael@0:   -moz-binding: url("chrome://global/content/bindings/popup.xml#popup-scrollbars");
michael@0: }
michael@0: 
michael@0: .menulist-compact {
michael@0:   -moz-binding: url("chrome://global/content/bindings/menulist.xml#menulist-compact");
michael@0: }
michael@0: 
michael@0: /* ::::: draggable elements ::::: */
michael@0: 
michael@0: toolbar:not([nowindowdrag="true"]) {
michael@0:   -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-drag");
michael@0: }
michael@0: 
michael@0: statusbar:not([nowindowdrag="true"]) {
michael@0:   -moz-binding: url("chrome://global/content/bindings/general.xml#statusbar-drag");
michael@0: }
michael@0: 
michael@0: windowdragbox {
michael@0:   -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
michael@0: }
michael@0: 
michael@0: /* ::::: root elements ::::: */
michael@0: 
michael@0: window,
michael@0: page,
michael@0: dialog,
michael@0: wizard,
michael@0: prefwindow { 
michael@0:   -moz-appearance: dialog;
michael@0:   background-color: #FFFFFF;
michael@0:   color: -moz-DialogText;
michael@0:   font: message-box;
michael@0: }
michael@0: 
michael@0: prefwindow[type="child"] {
michael@0:   padding-top: 18px;
michael@0:   padding-bottom: 15px;
michael@0:   -moz-padding-start: 18px;
michael@0:   -moz-padding-end: 20px;
michael@0: }
michael@0: 
michael@0: /* deprecated */
michael@0: window.dialog {
michael@0:   padding-top: 8px;
michael@0:   padding-bottom: 10px;
michael@0:   -moz-padding-start: 8px;
michael@0:   -moz-padding-end: 10px;
michael@0: }
michael@0: 
michael@0: /* ::::: alert icons :::::*/
michael@0: 
michael@0: .message-icon,
michael@0: .alert-icon,
michael@0: .error-icon,
michael@0: .question-icon {
michael@0:   width: 64px;
michael@0:   height: 64px;
michael@0:   margin: 6px;
michael@0:   -moz-margin-end: 20px;
michael@0: }
michael@0: 
michael@0: .message-icon {
michael@0:   list-style-image: url("chrome://global/skin/icons/information-64.png");
michael@0: }
michael@0: 
michael@0: .alert-icon {
michael@0:   list-style-image: url("chrome://global/skin/icons/warning-64.png");
michael@0: }
michael@0: 
michael@0: .error-icon {
michael@0:   list-style-image: url("chrome://global/skin/icons/error-64.png");
michael@0: }
michael@0: 
michael@0: .question-icon {
michael@0:   list-style-image: url("chrome://global/skin/icons/question-64.png");
michael@0: }
michael@0: 
michael@0: /* ::::: iframe ::::: */
michael@0: 
michael@0: iframe {
michael@0:   border: none;
michael@0:   width: 100px;
michael@0:   height: 100px;
michael@0:   min-width: 10px;
michael@0:   min-height: 10px;
michael@0: }
michael@0: 
michael@0: /* ::::: statusbar ::::: */
michael@0: 
michael@0: statusbar {
michael@0:   min-width: 1px; /* DON'T DELETE!
michael@0:   Prevents hiding of scrollbars in browser when window is made smaller.*/
michael@0:   min-height: 15px !important;
michael@0:   margin: 0px !important;
michael@0:   /* need to use -moz-padding-end when/if bug 631729 gets fixed: */
michael@0:   padding: 0px 16px 1px 1px;
michael@0:   -moz-appearance: statusbar;
michael@0:   text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
michael@0: }
michael@0: 
michael@0: statusbarpanel {
michael@0:   -moz-box-align: center;
michael@0:   -moz-box-pack: center;
michael@0:   padding: 0 4px;
michael@0: }
michael@0: 
michael@0: .statusbarpanel-iconic {
michael@0:   padding: 0px;
michael@0: }    
michael@0: 
michael@0: /* ::::: miscellaneous formatting ::::: */
michael@0: 
michael@0: :root:-moz-lwtheme,
michael@0: [lwthemefooter="true"] {
michael@0:   -moz-appearance: none;
michael@0: }
michael@0: 
michael@0: :root:-moz-lwtheme-darktext {
michael@0:   text-shadow: 0 -0.5px 1.5px white;
michael@0: }
michael@0: 
michael@0: :root:-moz-lwtheme-brighttext {
michael@0:   text-shadow: 1px 1px 1.5px black;
michael@0: }
michael@0: 
michael@0: statusbar:-moz-lwtheme {
michael@0:   -moz-appearance: none;
michael@0:   background: none;
michael@0:   border-style: none;
michael@0:   text-shadow: inherit;
michael@0: }
michael@0: 
michael@0: .inset {
michael@0:   border: 1px solid ThreeDShadow;
michael@0:   border-right-color: ThreeDHighlight;
michael@0:   border-bottom-color: ThreeDHighlight;
michael@0:   margin: 0 5px 5px;
michael@0: }
michael@0:   
michael@0: .outset {
michael@0:   border: 1px solid ThreeDShadow;
michael@0:   border-left-color: ThreeDHighlight;
michael@0:   border-top-color: ThreeDHighlight;
michael@0: }
michael@0: 
michael@0: separator:not([orient="vertical"]) {
michael@0:   height: 1.5em;
michael@0: }
michael@0: separator[orient="vertical"] {
michael@0:   width: 1.5em;
michael@0: }
michael@0: 
michael@0: separator.thin:not([orient="vertical"]) {
michael@0:   height: 0.5em;
michael@0: }  
michael@0: separator.thin[orient="vertical"] {
michael@0:   width: 0.5em;
michael@0: }
michael@0: 
michael@0: separator.groove:not([orient="vertical"]) {
michael@0:   border-top: 1px solid #A3A3A3;
michael@0:   height: 0;
michael@0:   margin-top: 0.4em;
michael@0:   margin-bottom: 0.4em;
michael@0: }
michael@0: separator.groove[orient="vertical"] {
michael@0:   border-left: 1px solid #A3A3A3;
michael@0:   width: 0;
michael@0:   margin-left: 0.4em;
michael@0:   margin-right: 0.4em;
michael@0: }
michael@0:     
michael@0: .plain {
michael@0:   -moz-appearance: none;
michael@0:   margin: 0 !important;
michael@0:   border: none;
michael@0:   padding: 0;
michael@0: }
michael@0: 
michael@0: description,
michael@0: label {
michael@0:   cursor: default;
michael@0: }
michael@0: 
michael@0: label {
michael@0:   margin: 2px 6px;
michael@0: }
michael@0: 
michael@0: label[disabled="true"] {
michael@0:   color: GrayText;
michael@0: }
michael@0: 
michael@0: .tooltip-label {
michael@0:   margin: 0;
michael@0: }
michael@0: 
michael@0: description {
michael@0:   margin-bottom: 4px;
michael@0: }
michael@0: 
michael@0: .header {
michael@0:   margin-bottom: 6px;
michael@0:   font-weight: bold;
michael@0: }
michael@0: 
michael@0: .monospace {
michael@0:   font-family: monospace;
michael@0: }
michael@0: 
michael@0: .indent {
michael@0:   -moz-margin-start: 23px;
michael@0: }
michael@0: 
michael@0: .box-padded {
michael@0:   padding: 5px;
michael@0: }
michael@0: 
michael@0: .spaced {
michael@0:   margin: 3px 5px 4px;
michael@0: }
michael@0: 
michael@0: .wizard-box {
michael@0:   padding: 20px 44px 10px;
michael@0: }
michael@0: 
michael@0: .text-link {
michael@0:   color: -moz-nativehyperlinktext;
michael@0:   cursor: pointer;
michael@0: }
michael@0: 
michael@0: .text-link:hover {
michael@0:   text-decoration: underline;
michael@0: }
michael@0:   
michael@0: .text-link:-moz-focusring {
michael@0:   box-shadow: @focusRingShadow@;
michael@0: }
michael@0: 
michael@0: .toolbar-focustarget {
michael@0:   -moz-user-focus: ignore !important;
michael@0: }
michael@0: 
michael@0: notification > button {
michael@0:   margin: 0 3px;
michael@0:   padding: 1px 10px;
michael@0:   min-width: 60px;
michael@0:   min-height: 16px;
michael@0:   -moz-appearance: none;
michael@0:   border-radius: 10000px;
michael@0:   border: @roundButtonBorder@;
michael@0:   text-shadow: @loweredShadow@;
michael@0:   background: @roundButtonBackground@;
michael@0:   box-shadow: @roundButtonShadow@;
michael@0: }
michael@0: 
michael@0: notification > button:active:hover {
michael@0:   background: @roundButtonPressedBackground@;
michael@0:   box-shadow: @roundButtonPressedShadow@;
michael@0: }
michael@0: 
michael@0: notification > button:-moz-focusring {
michael@0:   box-shadow: @focusRingShadow@, @roundButtonShadow@;
michael@0: }
michael@0: 
michael@0: notification > button:active:hover:-moz-focusring {
michael@0:   box-shadow: @focusRingShadow@, @roundButtonPressedShadow@;
michael@0: }
michael@0: 
michael@0: notification > button > .button-box > .button-text {
michael@0:   margin: 0 !important;
michael@0: }
michael@0: 
michael@0: /* :::::: autoscroll popup ::::: */
michael@0: 
michael@0: .autoscroller {
michael@0:   height: 28px;
michael@0:   width: 28px;
michael@0:   border: none;
michael@0:   margin: -14px;
michael@0:   padding: 0;
michael@0:   background-image: url("chrome://global/skin/icons/autoscroll.png");
michael@0:   background-color: transparent;
michael@0:   background-position: right top;
michael@0:   -moz-appearance: none;
michael@0:   -moz-window-shadow: none;
michael@0: }
michael@0: 
michael@0: .autoscroller[scrolldir="NS"] {
michael@0:   background-position: right center;
michael@0: }
michael@0: 
michael@0: .autoscroller[scrolldir="EW"] {
michael@0:   background-position: right bottom;
michael@0: }
michael@0: 
michael@0: /* autorepeatbuttons in menus */
michael@0: 
michael@0: .popup-internal-box > autorepeatbutton {
michael@0:   height: 15px;
michael@0:   position: relative;
michael@0:   /* Here we're using a little magic.
michael@0:    * The arrow button is supposed to overlay the scrollbox, blocking
michael@0:    * everything under it from reaching the screen. However, the menu background
michael@0:    * is slightly transparent, so how can we block something completely without
michael@0:    * messing up the transparency? It's easy: The native theming of the
michael@0:    * "menuitem" appearance uses CGContextClearRect before drawing, which
michael@0:    * clears everything under it.
michael@0:    * Without help from native theming this effect wouldn't be achievable.
michael@0:    */
michael@0:   -moz-appearance: menuitem;
michael@0: }
michael@0: 
michael@0: .popup-internal-box > .autorepeatbutton-up {
michael@0:   margin-bottom: -15px;
michael@0: }
michael@0: 
michael@0: .popup-internal-box > .autorepeatbutton-down {
michael@0:   margin-top: -15px;
michael@0: }
michael@0: 
michael@0: .popup-internal-box > autorepeatbutton[disabled="true"] {
michael@0:   visibility: collapse;
michael@0: }
michael@0: 
michael@0: /* :::::: Close button icons ::::: */
michael@0: 
michael@0: .close-icon {
michael@0:   list-style-image: url("chrome://global/skin/icons/close.png");
michael@0:   -moz-image-region: rect(0, 16px, 16px, 0);
michael@0: }
michael@0: 
michael@0: .close-icon:hover {
michael@0:   -moz-image-region: rect(0, 32px, 16px, 16px);
michael@0: }
michael@0: 
michael@0: .close-icon:hover:active {
michael@0:   -moz-image-region: rect(0, 48px, 16px, 32px);
michael@0: }
michael@0: 
michael@0: @media (min-resolution: 2dppx) {
michael@0:   .close-icon > .button-icon,
michael@0:   .close-icon > .toolbarbutton-icon {
michael@0:     width: 16px;
michael@0:   }
michael@0: 
michael@0:   .close-icon {
michael@0:     list-style-image: url("chrome://global/skin/icons/close@2x.png");
michael@0:     -moz-image-region: rect(0, 32px, 32px, 0);
michael@0:   }
michael@0: 
michael@0:   .close-icon:hover {
michael@0:     -moz-image-region: rect(0, 64px, 32px, 32px);
michael@0:   }
michael@0: 
michael@0:   .close-icon:hover:active {
michael@0:     -moz-image-region: rect(0, 96px, 32px, 64px);
michael@0:   }
michael@0: }