Fixing toolbar appearance on Classic Skin Mac, Win, Linux. Bug 41272. Written by German r=hangas
This commit is contained in:
Родитель
c72131d00d
Коммит
75d70bf2ab
|
@ -6,27 +6,28 @@
|
|||
{
|
||||
border : 1px solid transparent;
|
||||
margin : 1px 0px 1px 0px;
|
||||
-moz-border-radius : 0px;
|
||||
color : black;
|
||||
padding : 0px;
|
||||
font : 3mm arial;
|
||||
min-width : 0px;
|
||||
}
|
||||
|
||||
.button-toolbar:hover
|
||||
{
|
||||
border : 1px solid #FFFFFF;
|
||||
border : 1px solid #000000;
|
||||
}
|
||||
|
||||
.button-toolbar:hover:active
|
||||
{
|
||||
border : 1px solid #336699;
|
||||
border : 1px solid #000000;
|
||||
}
|
||||
|
||||
.button-toolbar > .button-internal-box,
|
||||
.button-toolbar:hover > .button-internal-box
|
||||
{
|
||||
border-left : 1px solid #FFFFFF;
|
||||
border-top : 1px solid #FFFFFF;
|
||||
border-right : 1px soild #9D9D9D;
|
||||
border-bottom : 1px soild #9D9D9D;
|
||||
padding : 1px 3px 1px 3px;
|
||||
border : none;
|
||||
}
|
||||
|
||||
.button-toolbar > .button-internal-box > .button-text-container,
|
||||
|
@ -42,170 +43,112 @@
|
|||
border : none;
|
||||
}
|
||||
|
||||
.button-toolbar[toggled="true"]
|
||||
.button-toolbar[toggled="true"] > .button-internal-box
|
||||
{
|
||||
border : 1px solid #999999;
|
||||
background-color : #EEEEEE;
|
||||
border-left : 1px solid #9D9D9D;
|
||||
border-top : 1px solid #9D9D9D;
|
||||
border-right : 1px solid #FFFFFF;
|
||||
border-bottom : 1px solid #FFFFFF;
|
||||
background-color : #DDDDDD;
|
||||
background-image : url("chrome://global/skin/scrollbar-bg.gif");
|
||||
}
|
||||
|
||||
.button-toolbar[disabled="true"],
|
||||
.button-toolbar[disabled="true"] > .button-internal-box,
|
||||
.button-toolbar[disabled="true"]:hover,
|
||||
.button-toolbar[disabled="true"]:hover:active
|
||||
.button-toolbar[disabled="true"]:hover > .button-internal-box,
|
||||
.button-toolbar[disabled="true"]:hover:active,
|
||||
.button-toolbar[disabled="true"]:hover:active > .button-internal-box
|
||||
{
|
||||
color : #999999;
|
||||
border : none;
|
||||
border : 1px solid #DDDDDD;
|
||||
}
|
||||
|
||||
/** The largest type of toolbar buttons. In the Seamonkey implementation,
|
||||
* these are only used in the navigation toolbar in the navigator package.
|
||||
**/
|
||||
|
||||
/* outer frame */
|
||||
.button-toolbar-1
|
||||
{
|
||||
behavior : url("chrome://global/content/xulBindings.xml#buttontop");
|
||||
background-repeat : no-repeat;
|
||||
background-color : transparent;
|
||||
background-position : 0px 0px;
|
||||
color : black;
|
||||
width : 36px;
|
||||
height : 36px;
|
||||
margin : 2px 6px 1px 1px;
|
||||
font-size : smaller;
|
||||
border : none;
|
||||
}
|
||||
|
||||
.button-toolbar-1:hover
|
||||
{
|
||||
border : 1px solid black
|
||||
}
|
||||
|
||||
.button-toolbar-1:hover:active
|
||||
{
|
||||
margin : 3px 5px 0px 2px;
|
||||
border : 1px solid black;
|
||||
background-color : #666666;
|
||||
}
|
||||
|
||||
.button-toolbar-1[disabled="true"],
|
||||
.button-toolbar-1[disabled="true"]:hover,
|
||||
.button-toolbar-1[disabled="true"]:hover:active
|
||||
{
|
||||
margin : 2px 6px 1px 1px;
|
||||
border : none;
|
||||
}
|
||||
|
||||
/* internal frame */
|
||||
.button-toolbar-1[disabled="true"] > .button-internal-box,
|
||||
.button-toolbar-1[disabled="true"]:hover > .button-internal-box,
|
||||
.button-toolbar-1[disabled="true"]:hover:active > .button-internal-box
|
||||
{
|
||||
border : none;
|
||||
}
|
||||
|
||||
.button-toolbar-1 > .button-internal-box
|
||||
{
|
||||
border : none;
|
||||
vertical-align : middle;
|
||||
}
|
||||
|
||||
.button-toolbar-1:hover > .button-internal-box
|
||||
{
|
||||
border-left : 1px solid #FFFFFF;
|
||||
border-top : 1px solid #FFFFFF;
|
||||
border-right : 1px solid #999999;
|
||||
border-bottom : 1px solid #999999;
|
||||
}
|
||||
|
||||
.button-toolbar-1:hover:active > .button-internal-box
|
||||
{
|
||||
border-left : 1px solid #444444;
|
||||
border-top : 1px solid #444444;
|
||||
border-right : 1px solid #CCCCCC;
|
||||
border-bottom : 1px solid #CCCCCC;
|
||||
}
|
||||
|
||||
.button-toolbar-1 > .button-internal-box > .button-text-container
|
||||
{
|
||||
text-align : center;
|
||||
}
|
||||
|
||||
/** Styles for the standard 'large' toolbar button, these buttons are used for
|
||||
* toolbar buttons that are the most commonly used elements on a toolbar, e.g.
|
||||
* 'GetMsg' in Mailnews or 'Send' in Mail/Compose.
|
||||
**/
|
||||
.button-toolbar-2
|
||||
/* outer frame */
|
||||
.button-toolbar-1,
|
||||
.button-toolbar-2
|
||||
{
|
||||
background-repeat : no-repeat;
|
||||
background-position : 50% 0px;
|
||||
background-color : transparent;
|
||||
color : #CCFFFF;
|
||||
min-width : 28px;
|
||||
min-height : 28px;
|
||||
margin : 2px 6px 1px 1px;
|
||||
/* padding : 3px 0px 0px 1px;*/
|
||||
font-size : smaller;
|
||||
border : none;
|
||||
behavior : url("chrome://global/skin/buttonBindings.xml#buttontop");
|
||||
min-width : 52px;
|
||||
margin : 1px;
|
||||
border : 1px solid #DDDDDD;
|
||||
}
|
||||
|
||||
.button-toolbar-2:hover
|
||||
.button-toolbar-1:hover,
|
||||
.button-toolbar-2:hover
|
||||
{
|
||||
border : 1px solid black;
|
||||
border : 1px solid #000000;
|
||||
color : ButtonText;
|
||||
}
|
||||
|
||||
.button-toolbar-2:hover:active
|
||||
.button-toolbar-1 > .button-box-1,
|
||||
.button-toolbar-2 > .button-box-1
|
||||
{
|
||||
border : 1px solid black;
|
||||
background-color : #666666
|
||||
}
|
||||
|
||||
.button-toolbar-2[disabled="true"],
|
||||
padding : 0px 2px 1px 1px;
|
||||
vertical-align : middle;
|
||||
text-align : center;
|
||||
border : 1px solid #DDDDDD;
|
||||
}
|
||||
|
||||
.button-toolbar-1 > .button-box-2,
|
||||
.button-toolbar-2 > .button-box-2
|
||||
{
|
||||
border-bottom : none;
|
||||
}
|
||||
|
||||
|
||||
.button-toolbar-1[disabled="true"],
|
||||
.button-toolbar-1[disabled="true"]:hover,
|
||||
.button-toolbar-1[disabled="true"]:hover:active,
|
||||
.button-toolbar-2[disabled="true"],
|
||||
.button-toolbar-2[disabled="true"]:hover,
|
||||
.button-toolbar-2[disabled="true"]:hover:active
|
||||
{
|
||||
margin : 3px 7px 1px 1px;
|
||||
border : none;
|
||||
border : 1px solid #DDDDDD;
|
||||
color : #9D9D9D;
|
||||
}
|
||||
|
||||
/* internal frame */
|
||||
.button-toolbar-2[disabled="true"] > .button-internal-box,
|
||||
.button-toolbar-2[disabled="true"]:hover > .button-internal-box,
|
||||
.button-toolbar-2[disabled="true"]:hover:active > .button-internal-box
|
||||
.button-toolbar-1:hover > .button-box-1,
|
||||
.button-toolbar-2:hover > .button-box-1
|
||||
{
|
||||
border : none;
|
||||
vertical-align : middle;
|
||||
border-left : 1px solid #FFFFFF;
|
||||
border-top : 1px solid #FFFFFF;
|
||||
border-right : 1px solid #9D9D9D;
|
||||
border-bottom : 1px solid #9D9D9D;
|
||||
}
|
||||
|
||||
.button-toolbar-2 > .button-internal-box
|
||||
|
||||
.button-toolbar-1:hover:active > .button-box-1,
|
||||
.button-toolbar-2:hover:active > .button-box-1
|
||||
{
|
||||
border : none;
|
||||
vertical-align : middle;
|
||||
padding : 1px 1px 0px 2px;
|
||||
border-left : 1px solid #9D9D9D !important;
|
||||
border-top : 1px solid #9D9D9D !important;
|
||||
border-right : 1px solid #FFFFFF !important;
|
||||
border-bottom : 1px solid #FFFFFF !important;
|
||||
}
|
||||
|
||||
.button-toolbar-2:hover > .button-internal-box
|
||||
|
||||
.button-toolbar-1 > .button-internal-box > .button-text-container
|
||||
.button-toolbar-2 > .button-internal-box > .button-text-container
|
||||
{
|
||||
border-left : 1px solid #FFFFFF;
|
||||
border-top : 1px solid #FFFFFF;
|
||||
border-right : 1px solid #999999;
|
||||
border-bottom : 1px solid #999999;
|
||||
}
|
||||
|
||||
.button-toolbar-2:hover:active > .button-internal-box
|
||||
{
|
||||
border-left : 1px solid #444444;
|
||||
border-top : 1px solid #444444;
|
||||
border-right : 1px solid #CCCCCC;
|
||||
border-bottom : 1px solid #CCCCCC;
|
||||
}
|
||||
|
||||
/* text wrapper frame */
|
||||
.button-toolbar-2 > .button-internal-box > .button-text-container
|
||||
{
|
||||
padding-top : 3px;
|
||||
text-align : center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.button-toolbar-1[disabled="true"] > .button-box-1,
|
||||
.button-toolbar-1[disabled="true"]:hover > .button-box-1,
|
||||
.button-toolbar-1[disabled="true"]:hover:active > .button-box-1,
|
||||
.button-toolbar-2[disabled="true"] > .button-box-1,
|
||||
.button-toolbar-2[disabled="true"]:hover > .button-box-1,
|
||||
.button-toolbar-2[disabled="true"]:hover:active > .button-box-1
|
||||
{
|
||||
padding : 0px 2px 1px 1px !important;
|
||||
border : 1px solid transparent !important;
|
||||
}
|
||||
|
||||
/** "Green" buttons, e.g. "Search"
|
||||
* class="button-toolbar-3"
|
||||
**/
|
||||
|
@ -271,7 +214,7 @@
|
|||
**/
|
||||
.button-toolbar-4
|
||||
{
|
||||
color : #99CCCC;
|
||||
color : ButtonText;
|
||||
background : inherit;
|
||||
font : inherit;
|
||||
border : none;
|
||||
|
@ -282,27 +225,35 @@
|
|||
.button-toolbar-4:hover
|
||||
{
|
||||
text-decoration : none;
|
||||
background-color : #336699;
|
||||
color : #CCFFFF;
|
||||
color : ButtonText;
|
||||
}
|
||||
|
||||
.button-toolbar-4:hover:active
|
||||
{
|
||||
text-decoration : none;
|
||||
color : #CCFFFF;
|
||||
color : ButtonText;
|
||||
padding : 2px 0px 0px 2px !important;
|
||||
}
|
||||
|
||||
.button-toolbar-4:hover > .button-box-1,
|
||||
.button-toolbar-4:hover:active > .button-box-1
|
||||
{
|
||||
border-left : 1px solid ButtonHighlight;
|
||||
border-top : 1px solid ButtonHighlight;
|
||||
border-right : 1px solid ButtonShadow;
|
||||
border-bottom : 1px solid ButtonShadow;
|
||||
}
|
||||
|
||||
menubutton.button-toolbar-4
|
||||
{
|
||||
behavior : url("chrome://global/content/menulistBindings.xml#menubutton-single-right");
|
||||
}
|
||||
|
||||
.button-toolbar-4 > .button-internal-box,
|
||||
.button-toolbar-4 > .button-box-1,
|
||||
.button-toolbar-4 > .menubutton-internal-box
|
||||
{
|
||||
border : none !important;
|
||||
padding : 0px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
/** Standard toolbar buttons
|
||||
* class="button-toolbar"
|
||||
**/
|
||||
|
@ -63,49 +62,58 @@
|
|||
border : 1px solid threedface;
|
||||
}
|
||||
|
||||
/** The largest type of toolbar buttons. In the Seamonkey implementation,
|
||||
* these are only used in the navigation toolbar in the navigator package.
|
||||
|
||||
/** Styles for the standard 'large' toolbar button, these buttons are used for
|
||||
* toolbar buttons that are the most commonly used elements on a toolbar, e.g.
|
||||
* 'GetMsg' in Mailnews or 'Send' in Mail/Compose.
|
||||
**/
|
||||
|
||||
/* outer frame */
|
||||
.button-toolbar-1
|
||||
.button-toolbar-1,
|
||||
.button-toolbar-2
|
||||
{
|
||||
behavior : url("chrome://global/content/xulBindings.xml#buttontop");
|
||||
min-width : 0px;
|
||||
margin : 2px 2px 0px 4px;
|
||||
border : 1px solid transparent;
|
||||
behavior : url("chrome://global/skin/buttonBindings.xml#buttontop");
|
||||
min-width : 52px;
|
||||
margin : 1px;
|
||||
border : 1px solid ButtonFace;
|
||||
}
|
||||
|
||||
.button-toolbar-1:hover
|
||||
.button-toolbar-1:hover,
|
||||
.button-toolbar-2:hover
|
||||
{
|
||||
border : 1px solid threeddarkshadow;
|
||||
color : ButtonText;
|
||||
}
|
||||
|
||||
.button-toolbar-1 > .button-internal-box
|
||||
.button-toolbar-1 > .button-box-1,
|
||||
.button-toolbar-2 > .button-box-1
|
||||
{
|
||||
padding : 2px;
|
||||
padding : 0px 2px 1px 1px;
|
||||
vertical-align : middle;
|
||||
text-align : center;
|
||||
border : 1px solid transparent;
|
||||
border : 1px solid ButtonFace;
|
||||
}
|
||||
|
||||
.button-toolbar-1 > .button-box-2,
|
||||
.button-toolbar-2 > .button-box-2
|
||||
{
|
||||
border-bottom : none;
|
||||
}
|
||||
|
||||
|
||||
.button-toolbar-1[disabled="true"],
|
||||
.button-toolbar-1[disabled="true"]:hover,
|
||||
.button-toolbar-1[disabled="true"]:hover:active
|
||||
.button-toolbar-1[disabled="true"]:hover:active,
|
||||
.button-toolbar-2[disabled="true"],
|
||||
.button-toolbar-2[disabled="true"]:hover,
|
||||
.button-toolbar-2[disabled="true"]:hover:active
|
||||
{
|
||||
border : 1px solid transparent;
|
||||
border : 1px solid ButtonFace;
|
||||
color : graytext;
|
||||
}
|
||||
|
||||
/* internal frame */
|
||||
.button-toolbar-1[disabled="true"] > .button-internal-box,
|
||||
.button-toolbar-1[disabled="true"]:hover > .button-internal-box,
|
||||
.button-toolbar-1[disabled="true"]:hover:active > .button-internal-box
|
||||
{
|
||||
padding : 2px;
|
||||
border : 1px solid transparent;
|
||||
}
|
||||
|
||||
.button-toolbar-1:hover > .button-internal-box
|
||||
.button-toolbar-1:hover > .button-box-1,
|
||||
.button-toolbar-2:hover > .button-box-1
|
||||
{
|
||||
border-left : 1px solid threedhighlight;
|
||||
border-top : 1px solid threedhighlight;
|
||||
|
@ -113,83 +121,33 @@
|
|||
border-bottom : 1px solid threedshadow;
|
||||
}
|
||||
|
||||
.button-toolbar-1:hover:active > .button-internal-box
|
||||
.button-toolbar-1:hover:active > .button-box-1,
|
||||
.button-toolbar-2:hover:active > .button-box-1
|
||||
{
|
||||
padding : 3px 1px 1px 3px;
|
||||
border-left : 1px solid threedshadow;
|
||||
border-top : 1px solid threedshadow;
|
||||
border-right : 1px solid threedhighlight;
|
||||
border-bottom : 1px solid threedhighlight;
|
||||
padding : 1px 1px 0px 2px;
|
||||
border-left : 1px solid threedshadow !important;
|
||||
border-top : 1px solid threedshadow !important;
|
||||
border-right : 1px solid threedhighlight !important;
|
||||
border-bottom : 1px solid threedhighlight !important;
|
||||
}
|
||||
|
||||
.button-toolbar-1 > .button-internal-box > .button-text-container
|
||||
.button-toolbar-2 > .button-internal-box > .button-text-container
|
||||
{
|
||||
text-align : center;
|
||||
}
|
||||
|
||||
/** Styles for the standard 'large' toolbar button, these buttons are used for
|
||||
* toolbar buttons that are the most commonly used elements on a toolbar, e.g.
|
||||
* 'GetMsg' in Mailnews or 'Send' in Mail/Compose.
|
||||
**/
|
||||
.button-toolbar-2
|
||||
.button-toolbar-1[disabled="true"] > .button-box-1,
|
||||
.button-toolbar-1[disabled="true"]:hover > .button-box-1,
|
||||
.button-toolbar-1[disabled="true"]:hover:active > .button-box-1,
|
||||
.button-toolbar-2[disabled="true"] > .button-box-1,
|
||||
.button-toolbar-2[disabled="true"]:hover > .button-box-1,
|
||||
.button-toolbar-2[disabled="true"]:hover:active > .button-box-1
|
||||
{
|
||||
background-repeat : no-repeat;
|
||||
background-position : 50% 0px;
|
||||
background-color : transparent;
|
||||
background-image : url("chrome://global/skin/button28-bg.gif");
|
||||
color : #CCFFFF;
|
||||
min-width : 0px;
|
||||
margin : 4px 7px 1px 1px;
|
||||
padding : 3px 0px 0px 1px;
|
||||
font-size : smaller;
|
||||
border : none;
|
||||
padding : 0px 2px 1px 1px !important;
|
||||
border : 1px solid transparent !important;
|
||||
}
|
||||
|
||||
.button-toolbar-2:hover
|
||||
{
|
||||
background-image : url("chrome://global/skin/button28-bg-hover.gif");
|
||||
border : none;
|
||||
}
|
||||
|
||||
.button-toolbar-2:hover:active
|
||||
{
|
||||
margin : 5px 6px 0px 2px;
|
||||
border : none;
|
||||
}
|
||||
|
||||
.button-toolbar-2[disabled="true"],
|
||||
.button-toolbar-2[disabled="true"]:hover,
|
||||
.button-toolbar-2[disabled="true"]:hover:active
|
||||
{
|
||||
background-image : url("chrome://global/skin/button28-bg-disabled.gif");
|
||||
margin : 3px 7px 1px 1px;
|
||||
border : none;
|
||||
}
|
||||
|
||||
/* internal frame */
|
||||
.button-toolbar-2[disabled="true"] > .button-internal-box,
|
||||
.button-toolbar-2[disabled="true"]:hover > .button-internal-box,
|
||||
.button-toolbar-2[disabled="true"]:hover:active > .button-internal-box
|
||||
{
|
||||
border : none;
|
||||
vertical-align : middle;
|
||||
}
|
||||
|
||||
.button-toolbar-2 > .button-internal-box,
|
||||
.button-toolbar-2:hover > .button-internal-box,
|
||||
.button-toolbar-2:hover:active > .button-internal-box
|
||||
{
|
||||
border : none;
|
||||
}
|
||||
|
||||
/* text wrapper frame */
|
||||
.button-toolbar-2 > .button-internal-box > .button-text-container
|
||||
{
|
||||
padding-top : 3px;
|
||||
text-align : center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/** "Green" buttons, e.g. "Search"
|
||||
* class="button-toolbar-3"
|
||||
**/
|
||||
|
@ -255,7 +213,7 @@
|
|||
**/
|
||||
.button-toolbar-4
|
||||
{
|
||||
color : #99CCCC;
|
||||
color : ButtonText;
|
||||
background : inherit;
|
||||
font : inherit;
|
||||
border : none;
|
||||
|
@ -266,27 +224,36 @@
|
|||
.button-toolbar-4:hover
|
||||
{
|
||||
text-decoration : none;
|
||||
background-color : #336699;
|
||||
color : #CCFFFF;
|
||||
/*background-color : #336699;*/
|
||||
color : ButtonText;
|
||||
}
|
||||
|
||||
.button-toolbar-4:hover:active
|
||||
{
|
||||
text-decoration : none;
|
||||
color : #CCFFFF;
|
||||
color : ButtonText;
|
||||
padding : 2px 0px 0px 2px !important;
|
||||
}
|
||||
|
||||
.button-toolbar-4:hover > .button-box-1,
|
||||
.button-toolbar-4:hover:active > .button-box-1
|
||||
{
|
||||
border-left : 1px solid ButtonHighlight;
|
||||
border-top : 1px solid ButtonHighlight;
|
||||
border-right : 1px solid ButtonShadow;
|
||||
border-bottom : 1px solid ButtonShadow;
|
||||
}
|
||||
|
||||
menubutton.button-toolbar-4
|
||||
{
|
||||
behavior : url("chrome://global/content/menulistBindings.xml#menubutton-single-right");
|
||||
}
|
||||
|
||||
.button-toolbar-4 > .button-internal-box,
|
||||
.button-toolbar-4 > .button-box-1,
|
||||
.button-toolbar-4 > .menubutton-internal-box
|
||||
{
|
||||
border : none !important;
|
||||
padding : 0px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
/** Standard toolbar buttons
|
||||
* class="button-toolbar"
|
||||
**/
|
||||
|
@ -63,43 +62,58 @@
|
|||
border : 1px solid threedface;
|
||||
}
|
||||
|
||||
/** The largest type of toolbar buttons. In the Seamonkey implementation,
|
||||
* these are only used in the navigation toolbar in the navigator package.
|
||||
|
||||
/** Styles for the standard 'large' toolbar button, these buttons are used for
|
||||
* toolbar buttons that are the most commonly used elements on a toolbar, e.g.
|
||||
* 'GetMsg' in Mailnews or 'Send' in Mail/Compose.
|
||||
**/
|
||||
|
||||
/* outer frame */
|
||||
.button-toolbar-1
|
||||
.button-toolbar-1,
|
||||
.button-toolbar-2
|
||||
{
|
||||
behavior : url("chrome://global/content/xulBindings.xml#buttontop");
|
||||
min-width : 0px;
|
||||
behavior : url("chrome://global/skin/buttonBindings.xml#buttontop");
|
||||
min-width : 52px;
|
||||
margin : 1px;
|
||||
border : 1px solid transparent;
|
||||
border : 1px solid ButtonFace;
|
||||
}
|
||||
|
||||
.button-toolbar-1:hover
|
||||
.button-toolbar-1:hover,
|
||||
.button-toolbar-2:hover
|
||||
{
|
||||
border : 1px solid threeddarkshadow;
|
||||
color : #0000FF;
|
||||
color : ButtonText;
|
||||
}
|
||||
|
||||
.button-toolbar-1 > .button-internal-box
|
||||
.button-toolbar-1 > .button-box-1,
|
||||
.button-toolbar-2 > .button-box-1
|
||||
{
|
||||
padding : 2px 8px 2px 7px;
|
||||
padding : 0px 2px 1px 1px;
|
||||
vertical-align : middle;
|
||||
text-align : center;
|
||||
border : 1px solid transparent;
|
||||
border : 1px solid ButtonFace;
|
||||
}
|
||||
|
||||
.button-toolbar-1 > .button-box-2,
|
||||
.button-toolbar-2 > .button-box-2
|
||||
{
|
||||
border-bottom : none;
|
||||
}
|
||||
|
||||
|
||||
.button-toolbar-1[disabled="true"],
|
||||
.button-toolbar-1[disabled="true"]:hover,
|
||||
.button-toolbar-1[disabled="true"]:hover:active
|
||||
.button-toolbar-1[disabled="true"]:hover:active,
|
||||
.button-toolbar-2[disabled="true"],
|
||||
.button-toolbar-2[disabled="true"]:hover,
|
||||
.button-toolbar-2[disabled="true"]:hover:active
|
||||
{
|
||||
border : 1px solid transparent;
|
||||
border : 1px solid ButtonFace;
|
||||
color : graytext;
|
||||
}
|
||||
|
||||
/* internal frame */
|
||||
.button-toolbar-1:hover > .button-internal-box
|
||||
.button-toolbar-1:hover > .button-box-1,
|
||||
.button-toolbar-2:hover > .button-box-1
|
||||
{
|
||||
border-left : 1px solid threedhighlight;
|
||||
border-top : 1px solid threedhighlight;
|
||||
|
@ -107,9 +121,10 @@
|
|||
border-bottom : 1px solid threedshadow;
|
||||
}
|
||||
|
||||
.button-toolbar-1:hover:active > .button-internal-box
|
||||
.button-toolbar-1:hover:active > .button-box-1,
|
||||
.button-toolbar-2:hover:active > .button-box-1
|
||||
{
|
||||
padding : 3px 7px 1px 8px;
|
||||
padding : 1px 1px 0px 2px;
|
||||
border-left : 1px solid threedshadow !important;
|
||||
border-top : 1px solid threedshadow !important;
|
||||
border-right : 1px solid threedhighlight !important;
|
||||
|
@ -117,82 +132,22 @@
|
|||
}
|
||||
|
||||
.button-toolbar-1 > .button-internal-box > .button-text-container
|
||||
.button-toolbar-2 > .button-internal-box > .button-text-container
|
||||
{
|
||||
text-align : center;
|
||||
}
|
||||
|
||||
.button-toolbar-1[disabled="true"] > .button-internal-box,
|
||||
.button-toolbar-1[disabled="true"]:hover > .button-internal-box,
|
||||
.button-toolbar-1[disabled="true"]:hover:active > .button-internal-box
|
||||
.button-toolbar-1[disabled="true"] > .button-box-1,
|
||||
.button-toolbar-1[disabled="true"]:hover > .button-box-1,
|
||||
.button-toolbar-1[disabled="true"]:hover:active > .button-box-1,
|
||||
.button-toolbar-2[disabled="true"] > .button-box-1,
|
||||
.button-toolbar-2[disabled="true"]:hover > .button-box-1,
|
||||
.button-toolbar-2[disabled="true"]:hover:active > .button-box-1
|
||||
{
|
||||
padding : 2px 8px 2px 7px !important;
|
||||
padding : 0px 2px 1px 1px !important;
|
||||
border : 1px solid transparent !important;
|
||||
}
|
||||
|
||||
|
||||
/** Styles for the standard 'large' toolbar button, these buttons are used for
|
||||
* toolbar buttons that are the most commonly used elements on a toolbar, e.g.
|
||||
* 'GetMsg' in Mailnews or 'Send' in Mail/Compose.
|
||||
**/
|
||||
.button-toolbar-2
|
||||
{
|
||||
background-repeat : no-repeat;
|
||||
background-position : 50% 0px;
|
||||
background-color : transparent;
|
||||
background-image : url("chrome://global/skin/button28-bg.gif");
|
||||
color : #CCFFFF;
|
||||
min-width : 0px;
|
||||
margin : 4px 7px 1px 1px;
|
||||
padding : 3px 0px 0px 1px;
|
||||
font-size : smaller;
|
||||
border : none;
|
||||
}
|
||||
|
||||
.button-toolbar-2:hover
|
||||
{
|
||||
background-image : url("chrome://global/skin/button28-bg-hover.gif");
|
||||
border : none;
|
||||
}
|
||||
|
||||
.button-toolbar-2:hover:active
|
||||
{
|
||||
margin : 5px 6px 0px 2px;
|
||||
border : none;
|
||||
}
|
||||
|
||||
.button-toolbar-2[disabled="true"],
|
||||
.button-toolbar-2[disabled="true"]:hover,
|
||||
.button-toolbar-2[disabled="true"]:hover:active
|
||||
{
|
||||
background-image : url("chrome://global/skin/button28-bg-disabled.gif");
|
||||
margin : 3px 7px 1px 1px;
|
||||
border : none;
|
||||
}
|
||||
|
||||
/* internal frame */
|
||||
.button-toolbar-2[disabled="true"] > .button-internal-box,
|
||||
.button-toolbar-2[disabled="true"]:hover > .button-internal-box,
|
||||
.button-toolbar-2[disabled="true"]:hover:active > .button-internal-box
|
||||
{
|
||||
border : none;
|
||||
vertical-align : middle;
|
||||
}
|
||||
|
||||
.button-toolbar-2 > .button-internal-box,
|
||||
.button-toolbar-2:hover > .button-internal-box,
|
||||
.button-toolbar-2:hover:active > .button-internal-box
|
||||
{
|
||||
border : none;
|
||||
}
|
||||
|
||||
/* text wrapper frame */
|
||||
.button-toolbar-2 > .button-internal-box > .button-text-container
|
||||
{
|
||||
padding-top : 3px;
|
||||
text-align : center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/** "Green" buttons, e.g. "Search"
|
||||
* class="button-toolbar-3"
|
||||
**/
|
||||
|
@ -258,7 +213,7 @@
|
|||
**/
|
||||
.button-toolbar-4
|
||||
{
|
||||
color : #99CCCC;
|
||||
color : ButtonText;
|
||||
background : inherit;
|
||||
font : inherit;
|
||||
border : none;
|
||||
|
@ -269,27 +224,36 @@
|
|||
.button-toolbar-4:hover
|
||||
{
|
||||
text-decoration : none;
|
||||
background-color : #336699;
|
||||
color : #CCFFFF;
|
||||
/*background-color : #336699;*/
|
||||
color : ButtonText;
|
||||
}
|
||||
|
||||
.button-toolbar-4:hover:active
|
||||
{
|
||||
text-decoration : none;
|
||||
color : #CCFFFF;
|
||||
color : ButtonText;
|
||||
padding : 2px 0px 0px 2px !important;
|
||||
}
|
||||
|
||||
.button-toolbar-4:hover > .button-box-1,
|
||||
.button-toolbar-4:hover:active > .button-box-1
|
||||
{
|
||||
border-left : 1px solid ButtonHighlight;
|
||||
border-top : 1px solid ButtonHighlight;
|
||||
border-right : 1px solid ButtonShadow;
|
||||
border-bottom : 1px solid ButtonShadow;
|
||||
}
|
||||
|
||||
menubutton.button-toolbar-4
|
||||
{
|
||||
behavior : url("chrome://global/content/menulistBindings.xml#menubutton-single-right");
|
||||
}
|
||||
|
||||
.button-toolbar-4 > .button-internal-box,
|
||||
.button-toolbar-4 > .button-box-1,
|
||||
.button-toolbar-4 > .menubutton-internal-box
|
||||
{
|
||||
border : none !important;
|
||||
padding : 0px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -5,150 +5,119 @@
|
|||
**/
|
||||
|
||||
/* outer frame */
|
||||
button
|
||||
button, button.left
|
||||
{
|
||||
behavior : url("chrome://global/skin/buttonBindings.xml#buttonleft");
|
||||
border : 1px solid #000000;
|
||||
-moz-border-radius : 3px 2px 2px 3px;
|
||||
margin : 1px 5px 2px 5px;
|
||||
background-color : #DDDDDD;
|
||||
min-width : 8em;
|
||||
font : sans-serif;
|
||||
color : #000000;
|
||||
-moz-border-radius : 2px;
|
||||
}
|
||||
|
||||
button[disabled="true"],
|
||||
button[disabled="true"]:hover,
|
||||
button[disabled="true"]:hover:active
|
||||
.button-box-1
|
||||
{
|
||||
border : 1px solid #999999;
|
||||
color : #999999;
|
||||
}
|
||||
|
||||
/* internal frame */
|
||||
button > .button-internal-box
|
||||
{
|
||||
vertical-align : middle;
|
||||
text-align : center;
|
||||
border-left : 1px solid #FFFFFF;
|
||||
border-top : 1px solid #FFFFFF;
|
||||
border-right : 1px solid #9D9D9D;
|
||||
border-bottom : 1px solid #9D9D9D;
|
||||
padding : 2px;
|
||||
}
|
||||
|
||||
.button-box-2
|
||||
{
|
||||
|
||||
border : 1px solid #DDDDDD;
|
||||
}
|
||||
|
||||
button:hover:active > .button-internal-box
|
||||
button:hover:active
|
||||
{
|
||||
border : 1px solid #000000;
|
||||
}
|
||||
|
||||
button:hover:active > .button-box-1
|
||||
{
|
||||
border-left : 1px solid #9D9D9D;
|
||||
border-top : 1px solid #9D9D9D;
|
||||
border-right : 1px solid #FFFFFF;
|
||||
border-bottom : 1px solid #FFFFFF;
|
||||
padding : 3px 1px 1px 3px;
|
||||
}
|
||||
|
||||
button:hover:active > .button-box-1 > .button-box-2
|
||||
{
|
||||
border : 1px solid #DDDDDD;
|
||||
}
|
||||
|
||||
button:hover:active > .button-box-1 > .button-box-2 > .button-box-text
|
||||
{
|
||||
padding : 1px 2px 0px 3px;
|
||||
}
|
||||
|
||||
button[disabled="true"] > .button-internal-box,
|
||||
button[disabled="true"]:hover > .button-internal-box,
|
||||
button[disabled="true"]:hover:active > .button-internal-box
|
||||
.button-box-text
|
||||
{
|
||||
border-left : 1px solid #FFFFFF;
|
||||
border-top : 1px solid #FFFFFF;
|
||||
border-right : 1px solid #9D9D9D;
|
||||
border-bottom : 1px solid #9D9D9D;
|
||||
-moz-border-radius : 0px;
|
||||
padding : 2px;
|
||||
/*debug */
|
||||
}
|
||||
|
||||
button[disabled="true"],
|
||||
button[disabled="true"]:hover:active
|
||||
{
|
||||
color : #9D9D9D;
|
||||
}
|
||||
|
||||
button[disabled="true"] > .button-box-1 > .button-box-2 > .button-box-text,
|
||||
button[disabled="true"]:hover:active > .button-box-1 > .button-box-2 > .button-box-text
|
||||
{
|
||||
padding : 0px 3px 1px 2px;
|
||||
}
|
||||
|
||||
/* text wrapping frame (hack because <text> does not support alignment) */
|
||||
.button-text-container
|
||||
.button-box-text,
|
||||
button[disabled]:focus > .button-box-1 > .button-box-2 > .button-box-text
|
||||
{
|
||||
text-align : center;
|
||||
vertical-align : middle;
|
||||
padding : 0px 3px 1px 2px;
|
||||
border : 1px solid #DDDDDD;
|
||||
margin : 1px;
|
||||
}
|
||||
|
||||
/* text frame */
|
||||
.button-text
|
||||
button:focus > .button-box-1 > .button-box-2 > .button-box-text
|
||||
{
|
||||
padding : 0px 2px 0px 2px;
|
||||
}
|
||||
|
||||
button[orient="vertical"] > .button-internal-box > .button-text-container > .button-text
|
||||
{
|
||||
padding : 2px 2px 0px 2px;
|
||||
}
|
||||
|
||||
border : 1px dotted #000000;
|
||||
}
|
||||
|
||||
/** Styles for "DEFAULT" buttons (usually 'OK' or equivalent in dialogs.
|
||||
* To activate, set 'default' attribute on button.
|
||||
**/
|
||||
|
||||
/* outer frame */
|
||||
button[default]
|
||||
{
|
||||
/* XXX this is a HACK until 'orient' is supported in CSS! XXX */
|
||||
/* strictly speaking not necessary because default for buttonright is
|
||||
* to lay image out horizontally, but leaving here as a reminder to
|
||||
* implement this feature */
|
||||
behavior : url(chrome://global/content/xulBindings.xml#buttonright);
|
||||
font-weight : bold;
|
||||
list-style-image : url("chrome://global/skin/return.gif");
|
||||
}
|
||||
|
||||
button[default][disabled="true"]
|
||||
{
|
||||
list-style-image : url("chrome://global/skin/return-disabled.gif");
|
||||
}
|
||||
|
||||
/** Styles for 'dialog' buttons (usually any command button in a dialog)
|
||||
* This class gives buttons 10px of padding on each side to increase the
|
||||
* strike area and make buttons with small amounts of text (e.g. 'OK')
|
||||
* look less silly.
|
||||
**/
|
||||
|
||||
/* internal frame */
|
||||
.button-dialog > .button-internal-box,
|
||||
.button-dialog:hover > .button-internal-box
|
||||
{
|
||||
padding : 2px 10px 2px 10px;
|
||||
}
|
||||
|
||||
.button-dialog:hover:hover:active > .button-internal-box
|
||||
{
|
||||
padding : 3px 9px 1px 11px;
|
||||
}
|
||||
|
||||
/** Styles for grey toolbar buttons. These buttons are used in places like
|
||||
* editor's formatting toolbar or toolbars wanting a button similar to a command
|
||||
* button but without an initial outset frame.
|
||||
**/
|
||||
.button-borderless
|
||||
{
|
||||
border : 1px solid #DDDDDD;
|
||||
}
|
||||
|
||||
.button-borderless:hover
|
||||
button[default], button:focus
|
||||
{
|
||||
border : 1px solid #000000;
|
||||
}
|
||||
|
||||
.button-borderless > .button-internal-box
|
||||
{
|
||||
border : 1px solid #DDDDDD;
|
||||
}
|
||||
|
||||
.button-borderless:hover > .button-internal-box
|
||||
|
||||
button[default] > .button-box-1,
|
||||
button:focus > .button-box-1
|
||||
{
|
||||
border-left : 1px solid #FFFFFF;
|
||||
border-top : 1px solid #FFFFFF;
|
||||
border-right : 1px solid #000000;
|
||||
border-bottom : 1px solid #000000;
|
||||
}
|
||||
|
||||
button[default] > .button-box-1 > .button-box-2,
|
||||
button:focus > .button-box-1 > .button-box-2
|
||||
{
|
||||
border-left : 1px solid #DDDDDD;
|
||||
border-top : 1px solid #DDDDDD;
|
||||
border-right : 1px solid #9D9D9D;
|
||||
border-bottom : 1px solid #9D9D9D;
|
||||
}
|
||||
|
||||
.button-borderless:hover:active > .button-internal-box
|
||||
{
|
||||
border-left : 1px solid #9D9D9D;
|
||||
border-top : 1px solid #9D9D9D;
|
||||
border-right : 1px solid #FFFFFF;
|
||||
border-bottom : 1px solid #FFFFFF;
|
||||
}
|
||||
|
||||
/** plain (raw) buttons, class="plain" **/
|
||||
button.plain, button.plain:hover, button.plain:hover:active,
|
||||
button.plain:hover:active > .button-internal-box,
|
||||
button:hover:active > .button-internal-box,
|
||||
button.plain > .button-internal-box,
|
||||
button.plain > .button-internal-box:hover:active,
|
||||
button.plain > .button-internal-box > .button-text-container,
|
||||
|
@ -163,14 +132,4 @@
|
|||
padding : 0px;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* utility class for buttons with associated popup
|
||||
**/
|
||||
.button-popup
|
||||
{
|
||||
list-style-image : url(chrome://global/skin/taskbar-popup-arrow.gif);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
<binding id="buttontop" extends="chrome://global/content/xulBindings.xml#basetext">
|
||||
<content excludes="observes,template">
|
||||
<xul:box class="button-box-1" autostretch="never" flex="1">
|
||||
<xul:box class="button-box-2" autostretch="never" flex="1" orient="vertical">
|
||||
<xul:box class="button-box-2" autostretch="never" flex="1" orient="vertical" align="center">
|
||||
<xul:image class="button-icon" inherits="src"/>
|
||||
<xul:box class="button-box-text" flex="1" autostretch="never">
|
||||
<xul:text class="button-text" inherits="disabled,value,accesskey,crop"/>
|
||||
|
@ -46,7 +46,7 @@
|
|||
<binding id="buttonbottom" extends="chrome://global/content/xulBindings.xml#basetext">
|
||||
<content excludes="observes,template">
|
||||
<xul:box class="button-box-1" autostretch="never" flex="1">
|
||||
<xul:box class="button-box-2" autostretch="never" flex="1" orient="vertical">
|
||||
<xul:box class="button-box-2" autostretch="never" flex="1" orient="vertical" align="center">
|
||||
<xul:box class="button-box-text" flex="1" autostretch="never">
|
||||
<xul:text class="button-text" inherits="disabled,value,accesskey,crop"/>
|
||||
</xul:box>
|
||||
|
|
|
@ -15,21 +15,22 @@
|
|||
margin : 1px 5px 2px 5px;
|
||||
background-color : buttonface;
|
||||
min-width : 8em;
|
||||
font : button;
|
||||
font : button,sans-serif;
|
||||
color : buttontext;
|
||||
}
|
||||
|
||||
.button-box-1
|
||||
{
|
||||
border-left : 1px solid threedface;
|
||||
border-top : 1px solid threedface;
|
||||
border-right : 1px solid threedshadow;
|
||||
border-bottom : 1px solid threedshadow;
|
||||
border-left : 1px solid buttonhighlight;
|
||||
border-top : 1px solid buttonhighlight;
|
||||
border-right : 1px solid buttonshadow;
|
||||
border-bottom : 1px solid buttonshadow;
|
||||
}
|
||||
|
||||
.button-box-2
|
||||
{
|
||||
border : 1px solid threedface;
|
||||
|
||||
border : 1px solid ButtonFace;
|
||||
}
|
||||
|
||||
button:hover:active
|
||||
|
@ -49,7 +50,12 @@
|
|||
|
||||
button:hover:active > .button-box-1 > .button-box-2 > .button-box-text
|
||||
{
|
||||
padding : 1px 2px 0px 3px;
|
||||
padding : 1px 2px 0px 3px;
|
||||
}
|
||||
|
||||
.button-box-text
|
||||
{
|
||||
/*debug */
|
||||
}
|
||||
|
||||
button[disabled="true"],
|
||||
|
@ -126,5 +132,3 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
<binding id="buttontop" extends="chrome://global/content/xulBindings.xml#basetext">
|
||||
<content excludes="observes,template">
|
||||
<xul:box class="button-box-1" autostretch="never" flex="1">
|
||||
<xul:box class="button-box-2" autostretch="never" flex="1" orient="vertical">
|
||||
<xul:box class="button-box-2" autostretch="never" flex="1" orient="vertical" align="center">
|
||||
<xul:image class="button-icon" inherits="src"/>
|
||||
<xul:box class="button-box-text" flex="1" autostretch="never">
|
||||
<xul:text class="button-text" inherits="disabled,value,accesskey,crop"/>
|
||||
|
@ -46,7 +46,7 @@
|
|||
<binding id="buttonbottom" extends="chrome://global/content/xulBindings.xml#basetext">
|
||||
<content excludes="observes,template">
|
||||
<xul:box class="button-box-1" autostretch="never" flex="1">
|
||||
<xul:box class="button-box-2" autostretch="never" flex="1" orient="vertical">
|
||||
<xul:box class="button-box-2" autostretch="never" flex="1" orient="vertical" align="center">
|
||||
<xul:box class="button-box-text" flex="1" autostretch="never">
|
||||
<xul:text class="button-text" inherits="disabled,value,accesskey,crop"/>
|
||||
</xul:box>
|
||||
|
|
|
@ -15,21 +15,22 @@
|
|||
margin : 1px 5px 2px 5px;
|
||||
background-color : buttonface;
|
||||
min-width : 8em;
|
||||
font : button;
|
||||
font : button,sans-serif;
|
||||
color : buttontext;
|
||||
}
|
||||
|
||||
.button-box-1
|
||||
{
|
||||
border-left : 1px solid threedface;
|
||||
border-top : 1px solid threedface;
|
||||
border-right : 1px solid threedshadow;
|
||||
border-bottom : 1px solid threedshadow;
|
||||
border-left : 1px solid buttonhighlight;
|
||||
border-top : 1px solid buttonhighlight;
|
||||
border-right : 1px solid buttonshadow;
|
||||
border-bottom : 1px solid buttonshadow;
|
||||
}
|
||||
|
||||
.button-box-2
|
||||
{
|
||||
border : 1px solid threedface;
|
||||
|
||||
border : 1px solid ButtonFace;
|
||||
}
|
||||
|
||||
button:hover:active
|
||||
|
@ -49,7 +50,12 @@
|
|||
|
||||
button:hover:active > .button-box-1 > .button-box-2 > .button-box-text
|
||||
{
|
||||
padding : 1px 2px 0px 3px;
|
||||
padding : 1px 2px 0px 3px;
|
||||
}
|
||||
|
||||
.button-box-text
|
||||
{
|
||||
/*debug */
|
||||
}
|
||||
|
||||
button[disabled="true"],
|
||||
|
@ -126,5 +132,3 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
<binding id="buttontop" extends="chrome://global/content/xulBindings.xml#basetext">
|
||||
<content excludes="observes,template">
|
||||
<xul:box class="button-box-1" autostretch="never" flex="1">
|
||||
<xul:box class="button-box-2" autostretch="never" flex="1" orient="vertical">
|
||||
<xul:box class="button-box-2" autostretch="never" flex="1" orient="vertical" align="center">
|
||||
<xul:image class="button-icon" inherits="src"/>
|
||||
<xul:box class="button-box-text" flex="1" autostretch="never">
|
||||
<xul:text class="button-text" inherits="disabled,value,accesskey,crop"/>
|
||||
|
@ -46,7 +46,7 @@
|
|||
<binding id="buttonbottom" extends="chrome://global/content/xulBindings.xml#basetext">
|
||||
<content excludes="observes,template">
|
||||
<xul:box class="button-box-1" autostretch="never" flex="1">
|
||||
<xul:box class="button-box-2" autostretch="never" flex="1" orient="vertical">
|
||||
<xul:box class="button-box-2" autostretch="never" flex="1" orient="vertical" align="center">
|
||||
<xul:box class="button-box-text" flex="1" autostretch="never">
|
||||
<xul:text class="button-text" inherits="disabled,value,accesskey,crop"/>
|
||||
</xul:box>
|
||||
|
|
Загрузка…
Ссылка в новой задаче