classic skin work (not part of build)
This commit is contained in:
ben%netscape.com
Родитель
6f87e481eb
Коммит
90eb7d6257
|
|
@ -1,74 +1,83 @@
|
|||
/* stylesheet for XUL <checkbox> element */
|
||||
|
||||
/* default checkbox for dialogs */
|
||||
|
||||
/* outer checkbox frame */
|
||||
/* outer frame */
|
||||
checkbox
|
||||
{
|
||||
margin: 3px 5px 3px 5px;
|
||||
behavior : url("chrome://global/skin/classicBindings.xml#checkbox");
|
||||
margin : 3px 5px 3px 5px;
|
||||
}
|
||||
|
||||
/* checkmark outer frame */
|
||||
checkbox > .internal-box > .checkmark-box
|
||||
.checkbox-checkmark-box-1
|
||||
{
|
||||
border-left: 1px solid threedshadow;
|
||||
border-top: 1px solid threedshadow;
|
||||
border-right: 1px solid threedhighlight;
|
||||
border-bottom: 1px solid threedhighlight;
|
||||
background-color: window;
|
||||
margin-top: 2px;
|
||||
margin-right: 4px;
|
||||
border-top : 1px solid threedshadow;
|
||||
border-left : 1px solid threedshadow;
|
||||
border-right : 1px solid threedhighlight;
|
||||
border-bottom : 1px solid threedhighlight;
|
||||
background-color : #FFFFFF;
|
||||
margin : 2px 2px 0px 0px;
|
||||
width : 13px;
|
||||
height : 13px;
|
||||
}
|
||||
|
||||
/* checkmark inner frame */
|
||||
checkbox > .internal-box > .checkmark-box > .checkbox-check
|
||||
.checkbox-checkmark-box-1[disabled="true"]
|
||||
{
|
||||
border-left: 1px solid threeddarkshadow;
|
||||
border-top: 1px solid threeddarkshadow;
|
||||
border-right: 1px solid threedface;
|
||||
border-bottom: 1px solid threedface;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
list-style-image: none;
|
||||
background-color : threedface;
|
||||
}
|
||||
|
||||
checkbox[checked="true"] > .internal-box > .checkmark-box > .checkbox-check
|
||||
|
||||
.checkbox-checkmark-box-2
|
||||
{
|
||||
padding: 1px;
|
||||
list-style-image: url(chrome://global/skin/check-check.gif);
|
||||
}
|
||||
|
||||
checkbox[checked="true"][disabled="true"] > .internal-box > .checkmark-box > .checkbox-check
|
||||
{
|
||||
padding: 1px;
|
||||
list-style-image: url(chrome://global/skin/check-check-disabled.gif);
|
||||
border-left : 1px solid threeddarkshadow;
|
||||
border-top : 1px solid threeddarkshadow;
|
||||
border-right : 1px solid threedface;
|
||||
border-bottom : 1px solid threedface;
|
||||
padding : 1px;
|
||||
width : 11px;
|
||||
height : 11px;
|
||||
}
|
||||
|
||||
checkbox:hover:active > .internal-box > .checkmark-box,
|
||||
checkbox[disabled="true"] > .internal-box > .checkmark-box
|
||||
/* ensure that no list-style-image is inherited in from the Outside */
|
||||
.checkbox-check
|
||||
{
|
||||
background-color: threedface;
|
||||
}
|
||||
|
||||
checkbox > .internal-box > .checkbox-icon
|
||||
{
|
||||
list-style-image: inherit;
|
||||
}
|
||||
|
||||
/* checkmark label/icon frame */
|
||||
checkbox[value] > .internal-box > html
|
||||
{
|
||||
margin: 0px 0px 0px 4px;
|
||||
padding: 1px;
|
||||
list-style-image : none;
|
||||
}
|
||||
|
||||
checkbox[disabled="true"][value] > .internal-box > html
|
||||
.checkbox-check[checked="true"]
|
||||
{
|
||||
color: graytext;
|
||||
list-style-image : url(chrome://global/skin/check-check.gif);
|
||||
}
|
||||
|
||||
checkbox:focus > .internal-box > html
|
||||
|
||||
.checkbox-check[checked="true"][disabled="true"]
|
||||
{
|
||||
list-style-image : url(chrome://global/skin/check-check-disabled.gif);
|
||||
}
|
||||
|
||||
checkbox:hover:active > .checkbox-internal-box > .checkbox-checkmark-box-1
|
||||
{
|
||||
background-color : threedface;
|
||||
}
|
||||
|
||||
/* text/icon frames */
|
||||
.checkbox-text
|
||||
{
|
||||
margin : 0px 0px 0px 2px;
|
||||
padding : 1px;
|
||||
}
|
||||
|
||||
.checkbox-icon
|
||||
{
|
||||
list-style-image : inherit;
|
||||
}
|
||||
|
||||
.checkbox-text[disabled="true"]
|
||||
{
|
||||
color : graytext;
|
||||
}
|
||||
|
||||
checkbox:focus > .checkbox-internal-box > .checkbox-text
|
||||
{
|
||||
border : 1px dotted threeddarkshadow;
|
||||
padding : 0px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -36,7 +36,22 @@
|
|||
</xul:html>
|
||||
</xul:box>
|
||||
</content>
|
||||
|
||||
</binding>
|
||||
|
||||
<binding id="checkbox" extends="resource:/chrome/xulBindings.xml#checkbox">
|
||||
<content excludes="observes">
|
||||
<xul:box flex="1" class="checkbox-internal-box" autostretch="never" valign="middle">
|
||||
<xul:box class="checkbox-checkmark-box-1" autostretch="never" inherits="disabled">
|
||||
<xul:box class="checkbox-checkmark-box-2" autostretch="never" flex="1">
|
||||
<xul:image class="checkbox-check" inherits="checked,disabled"/>
|
||||
</xul:box>
|
||||
</xul:box>
|
||||
<xul:image class="checkbox-icon" inherits="src,disabled"/>
|
||||
<xul:html class="checkbox-text" inherits="value,accesskey,crop,disabled" flex="1">
|
||||
<children/>
|
||||
</xul:html>
|
||||
</xul:box>
|
||||
</content>
|
||||
</binding>
|
||||
|
||||
</bindings>
|
||||
|
|
@ -53,3 +53,4 @@ install::
|
|||
$(MAKE_INSTALL) buttonBindings.xml $(DIST)\bin\chrome\skins\$(THEME)\global\skin
|
||||
$(MAKE_INSTALL) classicBindings.xml $(DIST)\bin\chrome\skins\$(THEME)\global\skin
|
||||
$(MAKE_INSTALL) menulistBindings.xml $(DIST)\bin\chrome\skins\$(THEME)\global\skin
|
||||
$(MAKE_INSTALL) treeBindings.xml $(DIST)\bin\chrome\skins\$(THEME)\global\skin
|
||||
|
|
|
|||
|
|
@ -28,10 +28,23 @@
|
|||
border-bottom : 1px solid threedface;
|
||||
}
|
||||
|
||||
.menulist-display-box
|
||||
{
|
||||
border : 1px solid window;
|
||||
margin : 1px;
|
||||
}
|
||||
|
||||
menulist:focus > .menulist-internal-box > .menulist-display-box
|
||||
{
|
||||
border : 1px dotted #F5DB95;
|
||||
background-color : highlight;
|
||||
color : highlighttext;
|
||||
}
|
||||
|
||||
/* text display frame */
|
||||
.menulist-text
|
||||
{
|
||||
padding : 2px 4px 2px 4px;
|
||||
padding : 0px 2px 0px 2px;
|
||||
margin: : 0px;
|
||||
}
|
||||
|
||||
|
|
@ -65,12 +78,12 @@
|
|||
padding : 2px;
|
||||
}
|
||||
|
||||
.menulist-dropmarker-box-1[open="true"]
|
||||
menulist:hover:active > .menulist-internal-box > .menulist-dropmarker-box-1[open="true"]
|
||||
{
|
||||
border : 1px solid threedshadow;
|
||||
}
|
||||
|
||||
.menulist-dropmarker-box-2[open="true"]
|
||||
menulist:hover:active > .menulist-internal-box > .menulist-dropmarker-box-1 > .menulist-dropmarker-box-2[open="true"]
|
||||
{
|
||||
border : 1px solid threedface;
|
||||
padding : 3px 0px 1px 2px;
|
||||
|
|
|
|||
|
|
@ -12,8 +12,10 @@
|
|||
<binding id="menulist" extends="resource:/chrome/menulistBindings.xml#menulist">
|
||||
<content excludes="template,observes,menupopup" flex="1">
|
||||
<xul:box class="menulist-internal-box" flex="1">
|
||||
<xul:image class="menulist-icon" inherits="src"/>
|
||||
<xul:text class="menulist-text" inherits="value,accesskey,crop" crop="right" flex="1"/>
|
||||
<xul:box class="menulist-display-box" flex="1" valign="middle" autostretch="never">
|
||||
<xul:image class="menulist-icon" inherits="src"/>
|
||||
<xul:text class="menulist-text" inherits="value,accesskey,crop" crop="right"/>
|
||||
</xul:box>
|
||||
<xul:box class="menulist-dropmarker-box-1" valign="middle" inherits="open">
|
||||
<xul:box class="menulist-dropmarker-box-2" flex="1" autostretch="never" valign="middle" inherits="open">
|
||||
<xul:image class="menulist-dropmarker" inherits="disabled"/>
|
||||
|
|
|
|||
|
|
@ -5,67 +5,78 @@
|
|||
* basic tree widget for use in main windows where no decoration
|
||||
* is required.
|
||||
**/
|
||||
tree {
|
||||
background-color: window;
|
||||
border: none;
|
||||
border-spacing: 0px;
|
||||
font: list;
|
||||
}
|
||||
|
||||
/** class="inset" *************************************************
|
||||
* this is the tree class used by dialogs to create treeviews with
|
||||
* inset borders, and default dialog spacing.
|
||||
**/
|
||||
tree.inset {
|
||||
border-left: 1px solid threedshadow;
|
||||
border-top: 1px solid threedshadow;
|
||||
border-right: 1px solid threedhighlight;
|
||||
border-bottom: 1px soild threedhighlight;
|
||||
margin: 1px 5px 2px 5px;
|
||||
}
|
||||
tree
|
||||
{
|
||||
background-color : window;
|
||||
border-spacing : 0px;
|
||||
font : list;
|
||||
border-left : 1px solid threedshadow;
|
||||
border-top : 1px solid threedshadow;
|
||||
border-right : 1px solid threedhighlight;
|
||||
border-bottom : 1px soild threedhighlight;
|
||||
}
|
||||
|
||||
tree.inset
|
||||
{
|
||||
margin : 1px 5px 2px 5px;
|
||||
}
|
||||
|
||||
treeitem[selected="true"] > treerow {
|
||||
color: highlighttext;
|
||||
background-color: highlight;
|
||||
}
|
||||
|
||||
treecell {
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
padding: 1px 0px 1px 2px;
|
||||
}
|
||||
treecell
|
||||
{
|
||||
white-space : nowrap;
|
||||
vertical-align : middle;
|
||||
padding : 1px 0px 1px 2px;
|
||||
}
|
||||
|
||||
.treecell-header {
|
||||
background-color: threedface;
|
||||
color: windowtext;
|
||||
vertical-align: middle;
|
||||
padding: 0px 0px 0px 5px;
|
||||
}
|
||||
.treecell-header,
|
||||
.treecell-inset-header
|
||||
{
|
||||
behavior : url("chrome://global/skin/treeBindings.xml#treecell-header");
|
||||
border-left : 1px solid threedface !important;
|
||||
border-top : 1px solid threedface !important;
|
||||
border-right : 1px solid threeddarkshadow !important;
|
||||
border-bottom : 1px solid threeddarkshadow !important;
|
||||
background-color : threedface;
|
||||
padding : 0px;
|
||||
}
|
||||
|
||||
.treecell-inset-header {
|
||||
border-left: 1px solid threedhighlight;
|
||||
border-top: 1px solid threedhighlight;
|
||||
border-right: 1px solid threedshadow;
|
||||
border-bottom: 1px solid threedshadow;
|
||||
background-color: threedface;
|
||||
padding: 2px 5px 2px 4px;
|
||||
}
|
||||
|
||||
tree.inset > treehead > treerow > treecell.sortable:hover:active {
|
||||
border-left: 1px solid threedshadow;
|
||||
border-top: 1px solid threedshadow;
|
||||
border-right: 1px solid threedhighlight;
|
||||
border-bottom: 1px solid threedhighlight;
|
||||
}
|
||||
.treecell-header-box
|
||||
{
|
||||
border-left : 1px solid threedhighlight;
|
||||
border-top : 1px solid threedhighlight;
|
||||
border-right : 1px solid threedshadow;
|
||||
border-bottom : 1px solid threedshadow;
|
||||
padding : 2px 5px 2px 4px;
|
||||
}
|
||||
|
||||
.sortable.treecell-header:hover:active,
|
||||
.sortable.treecell-inset-header:hover:active
|
||||
{
|
||||
border : 1px solid threedshadow;
|
||||
}
|
||||
|
||||
.sortable.treecell-header:hover:active > .treecell-header-box,
|
||||
.sortable.treecell-inset-header:hover:active > .treecell-header-box
|
||||
{
|
||||
border : 1px solid threedface;
|
||||
padding : 3px 4px 1px 5px;
|
||||
}
|
||||
|
||||
|
||||
/** class="propertylist" ******************************************
|
||||
* class for cells in grid-formatted property lists.
|
||||
**/
|
||||
treecell.propertylist {
|
||||
padding-left: 5px;
|
||||
border-right: 1px solid threedface;
|
||||
border-bottom: 1px solid threedface;
|
||||
}
|
||||
treecell.propertylist
|
||||
{
|
||||
padding-left : 5px;
|
||||
border-right : 1px solid threedface;
|
||||
border-bottom : 1px solid threedface;
|
||||
}
|
||||
|
||||
.tree-cell-primary-icon {
|
||||
list-style-image: inherit;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
<?xml version="1.0"?>
|
||||
|
||||
<bindings id="treeBindings"
|
||||
xmlns="http://www.mozilla.org/xbl"
|
||||
xmlns:html="http://www.w3.org/TR/REC-html40"
|
||||
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
|
||||
<binding id="treecell-header">
|
||||
<content excludes="observes">
|
||||
<xul:box class="treecell-header-box" flex="1" autostretch="never" valign="middle">
|
||||
<xul:image class="tree-header-image" inherits="src"/>
|
||||
<xul:text class="tree-header-text" inherits="crop,value" flex="1" crop="right"/>
|
||||
<xul:image class="tree-header-sortdirection"/>
|
||||
</xul:box>
|
||||
</content>
|
||||
</binding>
|
||||
|
||||
</bindings>
|
||||
Загрузка…
Ссылка в новой задаче