mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-08 20:47:44 +00:00
356 lines
11 KiB
CSS
356 lines
11 KiB
CSS
/********************************/
|
|
/* nine slice menulist - This is the default style used for all menulists.
|
|
* This style is fully scalable in 2 dimensions. It supports menulists in
|
|
* both active and disabled states, which includes 3 sets of sliced images.
|
|
********************************/
|
|
|
|
menulist {
|
|
-moz-binding : url(chrome://global/skin/globalBindings.xml#nine-slice-menulist);
|
|
margin : 0px 1px 0px 1px;
|
|
border : 3px solid transparent;
|
|
padding : 0px;
|
|
min-height : 19px;
|
|
font : message-box;
|
|
}
|
|
|
|
.menulist-text-mid {
|
|
color : #000000;
|
|
padding-right : 2px;
|
|
}
|
|
|
|
.menulist-icon-mid {
|
|
padding-right : 2px;
|
|
}
|
|
|
|
.menulist-dropmarker {
|
|
list-style-image : url("chrome://global/skin/menulist-arrow.gif");
|
|
width : 9px;
|
|
height : 6px;
|
|
}
|
|
|
|
/* .......... focused state .......... */
|
|
|
|
menulist:focus {
|
|
border-color : #8C9EB5;
|
|
-moz-border-radius : 10px 7px 11px 10px;
|
|
}
|
|
|
|
/* .......... normal state .......... */
|
|
|
|
.menulist-box-left {
|
|
width : 8px;
|
|
}
|
|
|
|
.menulist-left-top {
|
|
background : url("chrome://global/skin/menulist-left-top.gif") no-repeat;
|
|
height : 10px;
|
|
}
|
|
|
|
.menulist-left-mid {
|
|
background : url("chrome://global/skin/menulist-left-mid.gif") repeat-y;
|
|
}
|
|
|
|
.menulist-left-btm {
|
|
background : url("chrome://global/skin/menulist-left-btm.gif") no-repeat;
|
|
height : 7px;
|
|
}
|
|
|
|
.menulist-box-mid {
|
|
background-color : #A5BABD;
|
|
}
|
|
|
|
.menulist-mid-top {
|
|
background : url("chrome://global/skin/menulist-mid-top.gif") repeat-x;
|
|
height : 3px;
|
|
vertical-align : top;
|
|
}
|
|
|
|
.menulist-mid-mid {
|
|
background : url("chrome://global/skin/menulist-mid-mid.gif") repeat-x;
|
|
}
|
|
|
|
.menulist-mid-btm {
|
|
background : url("chrome://global/skin/menulist-mid-btm.gif") repeat-x;
|
|
height : 4px;
|
|
vertical-align : bottom;
|
|
}
|
|
|
|
.menulist-text-box {
|
|
vertical-align : middle;
|
|
text-align : left;
|
|
padding : 1px 0px 2px 0px;
|
|
}
|
|
|
|
.menulist-box-right {
|
|
width : 22px;
|
|
}
|
|
|
|
.menulist-right-mid {
|
|
background : url("chrome://global/skin/menulist-right-mid.gif") repeat-y;
|
|
}
|
|
|
|
.menulist-right-mid2 {
|
|
background : url("chrome://global/skin/menulist-right-top.gif") no-repeat;
|
|
padding-left : 3px;
|
|
padding-right : 2px;
|
|
padding-top : 6px;
|
|
text-align : center;
|
|
vertical-align : middle;
|
|
}
|
|
|
|
.menulist-right-btm {
|
|
background : url("chrome://global/skin/menulist-right-btm.gif") no-repeat;
|
|
height : 7px;
|
|
}
|
|
|
|
/* .......... active state .......... */
|
|
|
|
menulist:hover:active > .menulist-box-left > .menulist-left-top,
|
|
menulist[open="true"] > .menulist-box-left > .menulist-left-top {
|
|
background-image : url("chrome://global/skin/menulist-active-left-top.gif");
|
|
}
|
|
|
|
menulist:hover:active > .menulist-box-left > .menulist-left-mid,
|
|
menulist[open="true"] > .menulist-box-left > .menulist-left-mid {
|
|
background-image : url("chrome://global/skin/menulist-active-left-mid.gif");
|
|
}
|
|
|
|
menulist:hover:active > .menulist-box-left > .menulist-left-btm,
|
|
menulist[open="true"] > .menulist-box-left > .menulist-left-btm {
|
|
background-image : url("chrome://global/skin/menulist-active-left-btm.gif");
|
|
}
|
|
|
|
menulist:hover:active > .menulist-stack > .menulist-box-mid,
|
|
menulist[open="true"] > .menulist-stack > .menulist-box-mid {
|
|
background-color : #84969C;
|
|
}
|
|
|
|
menulist:hover:active > .menulist-stack > .menulist-box-mid > .menulist-mid-top,
|
|
menulist[open="true"] > .menulist-stack > .menulist-box-mid > .menulist-mid-top {
|
|
background-image : url("chrome://global/skin/menulist-active-mid-top.gif");
|
|
}
|
|
|
|
menulist:hover:active > .menulist-stack > .menulist-box-mid > .menulist-mid-mid,
|
|
menulist[open="true"] > .menulist-stack > .menulist-box-mid > .menulist-mid-mid {
|
|
background-image : url("chrome://global/skin/menulist-active-mid-mid.gif");
|
|
}
|
|
|
|
menulist:hover:active > .menulist-stack > .menulist-text-box > .menulist-text-mid,
|
|
menulist[open="true"] > .menulist-stack > .menulist-text-box > .menulist-text-mid {
|
|
color: #ffffff;
|
|
}
|
|
|
|
menulist:hover:active > .menulist-stack > .menulist-box-mid > .menulist-mid-btm,
|
|
menulist[open="true"] > .menulist-stack > .menulist-box-mid > .menulist-mid-btm {
|
|
background-image : url("chrome://global/skin/menulist-active-mid-btm.gif");
|
|
}
|
|
|
|
menulist:hover:active > .menulist-box-right > .menulist-right-mid,
|
|
menulist[open="true"] > .menulist-box-right > .menulist-right-mid {
|
|
background-image : url("chrome://global/skin/menulist-active-right-mid.gif");
|
|
}
|
|
|
|
menulist:hover:active > .menulist-box-right > .menulist-right-mid > .menulist-right-mid2,
|
|
menulist[open="true"] > .menulist-box-right > .menulist-right-mid > .menulist-right-mid2 {
|
|
background-image : url("chrome://global/skin/menulist-active-right-top.gif");
|
|
}
|
|
|
|
menulist:hover:active > .menulist-box-right > .menulist-right-btm,
|
|
menulist[open="true"] > .menulist-box-right > .menulist-right-btm {
|
|
background-image : url("chrome://global/skin/menulist-active-right-btm.gif");
|
|
}
|
|
|
|
/* .......... disabled state .......... */
|
|
|
|
menulist:hover:active > .menulist-box-left > .menulist-left-top[disabled="true"],
|
|
.menulist-left-top[disabled="true"] {
|
|
background-image : url("chrome://global/skin/menulist-dis-left-top.gif");
|
|
}
|
|
|
|
menulist:hover:active > .menulist-box-left > .menulist-left-mid[disabled="true"],
|
|
.menulist-left-mid[disabled="true"] {
|
|
background-image : url("chrome://global/skin/menulist-dis-left-mid.gif");
|
|
}
|
|
|
|
menulist:hover:active > .menulist-box-left > .menulist-left-btm[disabled="true"],
|
|
.menulist-left-btm[disabled="true"] {
|
|
background-image : url("chrome://global/skin/menulist-dis-left-btm.gif");
|
|
}
|
|
|
|
menulist:hover:active > .menulist-stack > .menulist-text-box > .menulist-text-mid[disabled="true"],
|
|
.menulist-text-mid[disabled="true"] {
|
|
color : #7F8997;
|
|
}
|
|
|
|
menulist:hover:active > .menulist-stack > .menulist-box-mid[disabled="true"],
|
|
.menulist-box-mid[disabled="true"] {
|
|
background-color : #ADBEC6;
|
|
}
|
|
|
|
menulist:hover:active > .menulist-stack > .menulist-box-mid > .menulist-mid-top[disabled="true"],
|
|
.menulist-mid-top[disabled="true"] {
|
|
background-image : url("chrome://global/skin/menulist-dis-mid-top.gif");
|
|
}
|
|
|
|
menulist:hover:active > .menulist-stack > .menulist-box-mid > .menulist-mid-mid[disabled="true"],
|
|
.menulist-mid-mid[disabled="true"] {
|
|
background-image : url("chrome://global/skin/menulist-dis-mid-mid.gif");
|
|
}
|
|
|
|
menulist:hover:active > .menulist-stack > .menulist-box-mid > .menulist-mid-btm[disabled="true"],
|
|
.menulist-mid-btm[disabled="true"] {
|
|
background-image : url("chrome://global/skin/menulist-dis-mid-btm.gif");
|
|
}
|
|
|
|
menulist:hover:active > .menulist-box-right > .menulist-right-mid[disabled="true"],
|
|
.menulist-right-mid[disabled="true"] {
|
|
background-image : url("chrome://global/skin/menulist-dis-right-mid.gif");
|
|
}
|
|
|
|
menulist:hover:active > .menulist-box-right > .menulist-right-mid > .menulist-right-mid2[disabled="true"],
|
|
.menulist-right-mid2[disabled="true"] {
|
|
background-image : url("chrome://global/skin/menulist-dis-right-top.gif");
|
|
}
|
|
|
|
menulist:hover:active > .menulist-box-right > .menulist-right-btm[disabled="true"],
|
|
.menulist-right-btm[disabled="true"] {
|
|
background-image : url("chrome://global/skin/menulist-dis-right-btm.gif");
|
|
}
|
|
|
|
.menulist-dropmarker[disabled="true"] {
|
|
list-style-image : url("chrome://global/skin/menulist-dis-arrow.gif");
|
|
}
|
|
|
|
/** rules for EDITABLE menulists (aka 'comboboxes').
|
|
**/
|
|
|
|
/* outer frame */
|
|
menulist[editable="true"]
|
|
{
|
|
padding : 0px;
|
|
}
|
|
|
|
/* icon display frame */
|
|
menulist[editable="true"] > .menu-icon
|
|
{
|
|
list-style-image : url("chrome://communicator/skin/bookmarks/bookmark-item.gif");
|
|
background-color : white;
|
|
padding : 1px;
|
|
border-left : 1px inset #CCCCCC;
|
|
border-top : 1px inset #CCCCCC;
|
|
border-right : none;
|
|
border-bottom : 1px inset #CCCCCC;
|
|
}
|
|
|
|
/* text display frame */
|
|
menulist[editable="true"] > .menu-text
|
|
{
|
|
border-left : none;
|
|
border-top : 1px inset #CCCCCC;
|
|
border-right : 1px inset #CCCCCC;
|
|
border-bottom : 1px inset #CCCCCC;
|
|
margin : 0px 2px 0px 0px;
|
|
}
|
|
|
|
/* drop marker display frame */
|
|
menulist[editable="true"] > .menu-dropmarker
|
|
{
|
|
border : 1px outset #CCCCCC;
|
|
}
|
|
|
|
menulist[editable="true"][open="true"] > .menu-dropmarker
|
|
{
|
|
border : 1px inset #CCCCCC;
|
|
}
|
|
|
|
/* rules for popups and separators associated with menulists */
|
|
menulist > menupopup {
|
|
border : 1px solid #313948;
|
|
padding : 0px;
|
|
min-width : 0px;
|
|
background-color : #C2D0D0;
|
|
}
|
|
|
|
menulist > menupopup > .popup-internal-box
|
|
{
|
|
border: 0px;
|
|
}
|
|
|
|
menulist > menupopup > menuseparator
|
|
{
|
|
border-top: 1px solid #919FA3;
|
|
border-bottom: 1px solid #E6EFEE;
|
|
}
|
|
|
|
menulist > menupopup > menuitem,
|
|
menulist > menupopup > menu
|
|
{
|
|
padding-right : 12px;
|
|
padding-top : 1px;
|
|
padding-bottom : 1px;
|
|
min-width : 0px;
|
|
max-width : none !important;
|
|
color : #000000;
|
|
font : message-box;
|
|
}
|
|
|
|
|
|
menulist > menupopup > menuitem[menuactive="true"]
|
|
{
|
|
background-color : #465B75;
|
|
color : #FFFFFF;
|
|
}
|
|
|
|
menulist > menupopup > menuitem[selected="true"] > .menu-iconic-left
|
|
{
|
|
list-style-image : url(chrome://global/skin/menu-check.gif);
|
|
}
|
|
|
|
menulist > menupopup > menuitem[menuactive="true"][selected="true"] > .menu-iconic-left
|
|
{
|
|
list-style-image : url(chrome://global/skin/menu-check-hover.gif);
|
|
}
|
|
|
|
menulist > menupopup > arrowscrollbox > vbox > autorepeatbutton:hover
|
|
{
|
|
background-color: #B2BFBF;
|
|
border: 1px inset #B2BFBF;
|
|
}
|
|
|
|
/* :::::::::: compact menulists :::::::::: */
|
|
|
|
.menulist-compact {
|
|
-moz-binding: url("chrome://global/skin/globalBindings.xml#menulist-compact");
|
|
margin: 0px;
|
|
border: 1px solid #000000;
|
|
min-width: 0px;
|
|
min-height: 0px;
|
|
background-color: #D6DFDF;
|
|
-moz-user-focus: normal;
|
|
}
|
|
|
|
.menulist-compact-text {
|
|
margin-right: 3px;
|
|
}
|
|
|
|
.menulist-compact-internal-box {
|
|
border-left: 1px solid #F7F7F7;
|
|
border-top: 1px solid #F7F7F7;
|
|
border-right: 1px solid #8CA2A5;
|
|
border-bottom: 1px solid #8CA2A5;
|
|
padding: 1px;
|
|
}
|
|
|
|
.menulist-compact-dropmarker {
|
|
list-style-image: url("chrome://global/skin/menulist-compact-arrow.gif");
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.menulist-compact:hover:active > .menulist-compact-internal-box,
|
|
.menulist-compact[open="true"] > .menulist-compact-internal-box {
|
|
background-color: #949EA5;
|
|
border: 1px solid #808080;
|
|
}
|
|
|
|
|