2009-05-13

[Firefox 套件開發] 預設樣式 (Style classes)

Mozilla Developer Center 中找到 Style classes 所列出的樣式,為了明確的瞭解詳細屬性,找了一下在 Firefox 中的原始碼,除了官網中所列出的樣式外,你也可以使用其他預設的樣式。

其他的預設樣式,可以將 C:\Program Files\Mozilla Firefox\chrome 下的 classic.jar 解壓縮,就可以看到許多的預設樣式,像 chrome://browser/skin/browser.css(C:\Program Files\Mozilla Firefox\chrome\classic\skin\classic\browser\browser.css) 中的 tabs-closebutton , bookmark-item 等等都是不錯用的樣式,可以多加利用。



/*=[ alert-icon ]==================*/
/*=[ error-icon ]==================*/
/*=[ message-icon ]==================*/
/*=[ question-icon ]==================*/
.message-icon,
.alert-icon,
.error-icon,
.question-icon {
width: 32px; height: 32px;
}
.message-icon { /*圖片不存在*/
list-style-image: url("chrome://global/skin/icons/Message.png");
}
.alert-icon {
list-style-image: url("chrome://global/skin/icons/Warning.png");
}
.error-icon {
list-style-image: url("chrome://global/skin/icons/Error.png");
}
.question-icon {
list-style-image: url("chrome://global/skin/icons/Question.png");
}

Firefox 3.0.10 預設圖



/*=[ chromeclass-toolbar ]==================*/
window[chromehidden~="menubar"] .chromeclass-menubar,
window[chromehidden~="directories"] .chromeclass-directories,
window[chromehidden~="status"] .chromeclass-status,
window[chromehidden~="extrachrome"] .chromeclass-extrachrome,
window[chromehidden~="location"] .chromeclass-location,
window[chromehidden~="location"][chromehidden~="toolbar"] .chromeclass-toolbar,
window[chromehidden~="toolbar"] .chromeclass-toolbar-additional{
display: none;
}
prefwindow[chromehidden~="toolbar"] .chromeclass-toolbar{
display: none;
}


/*=[ groove ]==================*/
separator.groove,
separator.groove[orient="horizontal"] {
border-top: 1px solid ThreeDShadow;
border-bottom: 1px solid ThreeDHighlight;
height: 0px;
margin-top: 0.4em;
margin-bottom: 0.4em;
}
separator.groove[orient="vertical"] {
border-left: 1px solid ThreeDShadow;
border-right: 1px solid ThreeDHighlight;
-moz-margin-start: 0.4em;
-moz-margin-end: 0.4em;
}


/*=[ header ]==================*/
.header {
font-weight : bold;
}
textbox.header {
-moz-margin-start : 0;
}


/*=[ indent ]==================*/
.indent {
-moz-margin-start : 23px;
}


/*=[ listcell-iconic ]==================*/
.listcell-iconic {
-moz-binding: url("chrome://global/content/bindings/listbox.xml#listcell-iconic");
}
listcell[type="checkbox"].listcell-iconic {
-moz-binding: url("chrome://global/content/bindings/listbox.xml#listcell-checkbox-iconic");
}


/*=[ listitem-iconic ]==================*/
.listitem-iconic {
-moz-binding: url("chrome://global/content/bindings/listbox.xml#listitem-iconic");
}
listitem[type="checkbox"].listitem-iconic {
-moz-binding: url("chrome://global/content/bindings/listbox.xml#listitem-checkbox-iconic");
}


/*=[ menuitem-iconic ]==================*/
menu.menu-iconic > .menu-iconic-left,
menuitem.menuitem-iconic > .menu-iconic-left {
-moz-appearance: menuimage;
}
menu.menu-iconic > .menu-iconic-left > .menu-iconic-icon,
menuitem.menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
/* reduce icon-text crowding */
-moz-margin-start: -1px;
-moz-margin-end: 1px;
}


/*=[ menuitem-non-iconic ]==================*/
menuitem.menuitem-non-iconic {
-moz-binding: url("chrome://global/content/bindings/menu.xml#menubutton-item");
}


/*=[ monospace ]==================*/
.monospace {
font-family : monospace;
}


/*=[ plain ]==================*/
.plain {
margin: 0px !important;
border: none;
padding: 0px;
}

/* ::::: plain buttons ::::: */
button.plain {
border: 0px !important;
margin: 0px !important;
padding: 0px !important;
}

/* ::::: plain textbox ::::: */
textbox.plain {
-moz-appearance: none !important;
padding: 0px !important;
margin: 0px !important;
border: none !important;
}


/*=[ small-margin ]==================*/
.small-margin {
margin : 1px 2px 1px 2px;
}


/*=[ statusbarpanel-iconic ]==================*/
/*=[ statusbarpanel-iconic-text ]==================*/
/*=[ statusbarpanel-menu-iconic ]==================*/
.statusbarpanel-iconic,
.statusbarpanel-iconic-text,
.statusbarpanel-menu-iconic {
padding: 0px 1px 0px 1px;
}


/*=[ text-link ]==================*/
.console-row-code[selected="true"],
.console-row-content[selected="true"] > .console-row-file > .console-error-source > .text-link {
color: inherit !important;
}
richlistitem[selected="true"] .text-link {
color: inherit;
}

/* class for text with a 'link' appearance */
.text-link {
color : blue;
text-decoration : underline;
border : 1px solid transparent;
}
.text-link:focus {
color : red;
border : 1px dotted -moz-DialogText;
}
.text-link:hover {
cursor : pointer;
}
.text-link:hover:active {
color : red;
}
.text-link[visited="true"] {
color : purple;
}


/*=[ thin ]==================*/
/* thinner separators (50% size) */
separator.thin, separator.thin[orient="horizontal"] {
height: 0.5em;
}
separator.thin[orient="vertical"] {
width: 0.5em;
}


/*=[ tree-splitter ]==================*/
.tree-splitter {
width: 0px;
max-width: 0px;
min-width: 0% ! important;
min-height: 0% ! important;
-moz-box-ordinal-group: 2147483646;
}


/*=[ treecol-image ]==================*/
.treecol-image {
padding: 0px 1px;
}


列表外的其他樣式


/* inset areas */
.inset {
border-left : 1px solid ThreeDShadow;
border-top : 1px solid ThreeDShadow;
border-right : 1px solid ThreeDHighlight;
border-bottom : 1px solid ThreeDHighlight;
margin : 0px 5px 5px 5px;
}


.box-inset {
margin: 2px 4px;
border: 2px solid;
-moz-border-top-colors: ThreeDShadow ThreeDDarkShadow;
-moz-border-right-colors: ThreeDHighlight ThreeDLightShadow;
-moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow;
-moz-border-left-colors: ThreeDShadow ThreeDDarkShadow;
background-color: -moz-Field;
color: -moz-FieldText;
}


/* formatting */
.groove-top {
border-top : 2px groove ThreeDFace;
}
.groove-right {
border-right : 2px groove ThreeDFace;
}
.groove-left {
border-left : 2px groove ThreeDFace;
}
.groove-bottom {
border-bottom : 2px groove ThreeDFace;
}


.outset {
border-left : 1px solid ThreeDHighlight;
border-top : 1px solid ThreeDHighlight;
border-right : 1px solid ThreeDShadow;
border-bottom : 1px solid ThreeDShadow;
}
.outset-top-bottom {
border-top : 1px solid ThreeDHighlight;
border-bottom : 1px solid ThreeDShadow;
}


/* groove separators (0 padding, for dividing effects) */
separator.groove-thin {
border-top: 1px solid ThreeDShadow;
border-bottom: 1px solid ThreeDHighlight;
height: 0px;
}
separator[orient="vertical"].groove-thin {
border-left: 1px solid ThreeDShadow;
border-right: 1px solid ThreeDHighlight;
}


.larger-text {
font-size : larger;
}

.smaller-text {
font-size : smaller;
}


.box-padded {
padding : 5px;
}


.spaced {
margin : 3px 5px 4px 5px;
}


.wizard-box {
padding : 20px 44px 10px 44px;
}


.caption-text {
margin-top: 0px !important;
margin-bottom: 0px !important;
-moz-margin-start: 1px !important;
-moz-margin-end: 2px !important;
}


.treecol-text {
margin: 0px !important;
}

0 回應: