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: @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
michael@0: 
michael@0: menu,
michael@0: menuitem {
michael@0:   -moz-appearance: menuitem;
michael@0:   -moz-box-align: center;
michael@0:   color: MenuText;
michael@0:   font: -moz-pull-down-menu;
michael@0:   list-style-image: none;
michael@0:   -moz-image-region: auto;
michael@0:   padding: 0 21px 2px;
michael@0: }
michael@0: 
michael@0: menu[disabled="true"], menuitem[disabled="true"],
michael@0: menu[_moz-menuactive="true"][disabled="true"],
michael@0: menuitem[_moz-menuactive="true"][disabled="true"] {
michael@0:   color: -moz-mac-menutextdisable;
michael@0: }
michael@0: 
michael@0: /* ..... internal content .... */
michael@0: 
michael@0: .menu-text,
michael@0: .menu-iconic-text,
michael@0: .menu-accel,
michael@0: .menu-iconic-accel {
michael@0:   margin: 0 !important;
michael@0: }
michael@0: 
michael@0: .menu-text,
michael@0: .menu-iconic-text {
michael@0:   font-weight: inherit;
michael@0:   color: inherit;
michael@0: }
michael@0: 
michael@0: .menu-description {
michael@0:   font-style: italic;
michael@0:   color: -moz-mac-menutextdisable;
michael@0:   -moz-margin-start: 1ex !important;
michael@0: }
michael@0: 
michael@0: .menu-iconic-icon {
michael@0:   height: 16px;
michael@0:   margin-top: -2px;
michael@0:   margin-bottom: -2px;
michael@0:   -moz-margin-end: 5px;
michael@0:   /* Empty icons shouldn't take up room, so we need to compensate
michael@0:    * the 5px margin-end with a negative margin-start.
michael@0:    */
michael@0:   -moz-margin-start: -5px;
michael@0: }
michael@0: 
michael@0: /* menuitems with icons */
michael@0: .menuitem-iconic,
michael@0: .menu-iconic,
michael@0: menuitem[image],
michael@0: menuitem[src] {
michael@0:   /* 2px higher than those without icons */
michael@0:   padding-top: 1px;
michael@0:   padding-bottom: 3px;
michael@0: }
michael@0: 
michael@0: .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon,
michael@0: .menu-iconic > .menu-iconic-left > .menu-iconic-icon,
michael@0: menuitem[image] > .menu-iconic-left > .menu-iconic-icon,
michael@0: menuitem[src] > .menu-iconic-left > .menu-iconic-icon {
michael@0:   -moz-margin-start: 0;
michael@0:   width: 16px;
michael@0: }
michael@0: 
michael@0: /* ..... menu arrow box ..... */
michael@0: 
michael@0: .menu-right,
michael@0: .menu-accel-container {
michael@0:   -moz-margin-start: 21px;
michael@0:   -moz-box-pack: end;
michael@0: }
michael@0: 
michael@0: .menu-accel-container {
michael@0:   -moz-margin-end: -9px;
michael@0: }
michael@0: 
michael@0: .menu-right {
michael@0:   -moz-margin-end: -10px;
michael@0:   width: 9px;
michael@0:   list-style-image: url("chrome://global/skin/menu/menu-arrow.png");
michael@0:   -moz-image-region: rect(0, 9px, 10px, 0);
michael@0: }
michael@0: 
michael@0: .menu-right[_moz-menuactive="true"]:not([disabled="true"]) {
michael@0:   -moz-image-region: rect(0, 18px, 10px, 9px);
michael@0: }
michael@0: 
michael@0: .menu-right[disabled="true"] {
michael@0:   -moz-image-region: rect(0, 27px, 10px, 18px);
michael@0: }
michael@0: 
michael@0: .menu-right:-moz-locale-dir(rtl) {
michael@0:   transform: scaleX(-1);
michael@0: }
michael@0: 
michael@0: @media (min-resolution: 2dppx) {
michael@0:   .menu-right > image {
michael@0:     list-style-image: url("chrome://global/skin/menu/menu-arrow@2x.png");
michael@0:     -moz-image-region: rect(0, 18px, 20px, 0);
michael@0:     width: 9px;
michael@0:     height: 10px;
michael@0:   }
michael@0: 
michael@0:   .menu-right[_moz-menuactive="true"]:not([disabled="true"]) > image {
michael@0:     -moz-image-region: rect(0, 36px, 20px, 18px);
michael@0:   }
michael@0: 
michael@0:   .menu-right[disabled="true"] > image {
michael@0:     -moz-image-region: rect(0, 54px, 20px, 36px);
michael@0:   }
michael@0: }
michael@0: 
michael@0: /* ::::: menu/menuitems in menubar ::::: */
michael@0: 
michael@0: menubar > menu {
michael@0:   -moz-appearance: none;
michael@0:   padding: 2px 5px 2px 7px;
michael@0:   margin: 1px 0;
michael@0: }
michael@0: 
michael@0: menubar > menu[_moz-menuactive="true"] {
michael@0:   color: inherit;
michael@0:   background-color: transparent;
michael@0: }
michael@0: 
michael@0: menubar > menu[_moz-menuactive="true"][open="true"] {
michael@0:   -moz-appearance: menuitem;
michael@0:   color: -moz-mac-menutextselect;
michael@0: }
michael@0: 
michael@0: /* ..... internal content .... */
michael@0: 
michael@0: .menubar-left {
michael@0:   margin: 0 2px;
michael@0:   color: inherit;
michael@0: }
michael@0: 
michael@0: .menubar-text {
michael@0:   margin: 0 1px !important;
michael@0:   color: inherit;
michael@0: }
michael@0: 
michael@0: /* ::::: menu/menuitems in popups ::::: */
michael@0: 
michael@0: menupopup > menu,
michael@0: menupopup > menuitem {
michael@0:   max-width: 42em;
michael@0: }
michael@0: 
michael@0: menu[_moz-menuactive="true"],
michael@0: menuitem[_moz-menuactive="true"] {
michael@0:   color: -moz-mac-menutextselect;
michael@0:   background-color: Highlight;
michael@0: }
michael@0: 
michael@0: /* ::::: menu/menuitems in menulist popups ::::: */
michael@0: 
michael@0: .menulist-menupopup > menuitem,
michael@0: menulist > menupopup > menuitem,
michael@0: .menulist-menupopup > menu,
michael@0: menulist > menupopup > menu {
michael@0:   max-width: none;
michael@0:   font: inherit;
michael@0:   color: -moz-FieldText;
michael@0: }
michael@0: 
michael@0: /* ::::: menuitems in editable menulist popups ::::: */
michael@0: 
michael@0: menulist[editable="true"] > menupopup > menuitem {
michael@0:   -moz-appearance: none;
michael@0: }
michael@0: 
michael@0: menulist[editable="true"] > menupopup > menuitem > .menu-iconic-left {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: /* ::::: checked menuitems ::::: */
michael@0: 
michael@0: :not(menulist) > menupopup > menuitem[checked="true"] > .menu-iconic-left,
michael@0: :not(menulist) > menupopup > menuitem[selected="true"] > .menu-iconic-left {
michael@0:   padding-top: 1px;
michael@0:   -moz-margin-start: -15px;
michael@0:   -moz-padding-start: 15px;
michael@0:   background: -moz-image-rect("chrome://global/skin/menu/menu-check.png", 0, 11, 11, 0) bottom left no-repeat transparent;
michael@0: }
michael@0: 
michael@0: :not(menulist) > menupopup > menuitem[checked="true"] > .menu-iconic-left:-moz-locale-dir(rtl),
michael@0: :not(menulist) > menupopup > menuitem[selected="true"] > .menu-iconic-left:-moz-locale-dir(rtl) {
michael@0:   background-position: bottom right;
michael@0: }
michael@0: 
michael@0: :not(menulist) > menupopup > menuitem[checked="true"][_moz-menuactive="true"]:not([disabled="true"]) > .menu-iconic-left,
michael@0: :not(menulist) > menupopup > menuitem[selected="true"][_moz-menuactive="true"]:not([disabled="true"]) > .menu-iconic-left {
michael@0:   background-image: -moz-image-rect("chrome://global/skin/menu/menu-check.png", 0, 22, 11, 11);
michael@0: }
michael@0: 
michael@0: @media (min-resolution: 2dppx) {
michael@0:   :not(menulist) > menupopup > menuitem[checked="true"] > .menu-iconic-left,
michael@0:   :not(menulist) > menupopup > menuitem[selected="true"] > .menu-iconic-left {
michael@0:     background-size: 11px 11px;
michael@0:     background-image: -moz-image-rect("chrome://global/skin/menu/menu-check@2x.png", 0, 22, 22, 0);
michael@0:   }
michael@0: 
michael@0:   :not(menulist) > menupopup > menuitem[checked="true"][_moz-menuactive="true"]:not([disabled="true"]) > .menu-iconic-left,
michael@0:   :not(menulist) > menupopup > menuitem[selected="true"][_moz-menuactive="true"]:not([disabled="true"]) > .menu-iconic-left {
michael@0:     background-image: -moz-image-rect("chrome://global/skin/menu/menu-check@2x.png", 0, 44, 22, 22);
michael@0:   }
michael@0: }
michael@0: 
michael@0: menulist:not([editable="true"]) > menupopup > menuitem[checked="true"]::before,
michael@0: menulist:not([editable="true"]) > menupopup > menuitem[selected="true"]::before {
michael@0:   content: '\2713'; /* a checkmark */
michael@0:   display: block;
michael@0:   width: 15px;
michael@0:   -moz-margin-start: -15px;
michael@0: }
michael@0: 
michael@0: /* ::::: menuseparator ::::: */
michael@0: 
michael@0: menuseparator {
michael@0:   -moz-appearance: menuseparator;
michael@0:   margin: 5px 0;
michael@0:   padding: 1px 0 !important;
michael@0: }
michael@0: 
michael@0: /* ::::: autocomplete ::::: */
michael@0: 
michael@0: .autocomplete-history-popup > menuitem {
michael@0:   max-width: none !important;
michael@0:   font: message-box;
michael@0: }
michael@0: 
michael@0: /* ::::: tree column picker ::::: */
michael@0: 
michael@0: .treecell-popupcell-menu {
michael@0:   margin-left: -2px;
michael@0:   list-style-image: url("chrome://global/skin/columnselect.gif");
michael@0:   -moz-image-region: auto;
michael@0: }