diff --git a/xpfe/communicator/resources/skin/MANIFEST b/xpfe/communicator/resources/skin/MANIFEST index c3391504ec01..2c94f8d9b47b 100644 --- a/xpfe/communicator/resources/skin/MANIFEST +++ b/xpfe/communicator/resources/skin/MANIFEST @@ -1,2 +1,9 @@ +box.css +brand.css button.css communicator.css +menu.css +menubutton.css +splitter.css +toolbar.css +navbar-endbox.gif diff --git a/xpfe/communicator/resources/skin/Makefile.in b/xpfe/communicator/resources/skin/Makefile.in index 73127220dd2f..bb17357c34e7 100644 --- a/xpfe/communicator/resources/skin/Makefile.in +++ b/xpfe/communicator/resources/skin/Makefile.in @@ -27,8 +27,15 @@ VPATH = @srcdir@ include $(DEPTH)/config/autoconf.mk EXPORT_RESOURCE = \ + $(srcdir)/brand.css \ + $(srcdir)/box.css \ $(srcdir)/button.css \ $(srcdir)/communicator.css \ + $(srcdir)/menu.css \ + $(srcdir)/menubutton.css \ + $(srcdir)/splitter.css \ + $(srcdir)/toolbar.css \ + $(srcdir)/navbar-endbox.gif \ $(NULL) include $(topsrcdir)/config/rules.mk diff --git a/xpfe/communicator/resources/skin/box.css b/xpfe/communicator/resources/skin/box.css new file mode 100644 index 000000000000..5d71ceb77a49 --- /dev/null +++ b/xpfe/communicator/resources/skin/box.css @@ -0,0 +1,11 @@ + + +.box-toolbar-group + { + background-color : #FFFFFF; + -moz-border-radius : 5px; + padding : 3px 2px 2px 3px; + margin : 0px 10px 0px 5px; + } + + \ No newline at end of file diff --git a/xpfe/communicator/resources/skin/brand.css b/xpfe/communicator/resources/skin/brand.css new file mode 100644 index 000000000000..00cd05e6cc60 --- /dev/null +++ b/xpfe/communicator/resources/skin/brand.css @@ -0,0 +1,18 @@ + +#navigator-throbber + { + background-image : url("chrome://communicator/skin/navbar-endbox.gif"); + background-repeat : no-repeat; + list-style-image : url("chrome://global/skin/animthrob_single.gif"); + width : 68px; + max-width : 68px; + padding : 11px 3px 1px 23px; + margin : 0px; + } + +#navigator-throbber:hover:active + { + padding : 12px 2px 0px 24px; + margin : 0px; + } + diff --git a/xpfe/communicator/resources/skin/button.css b/xpfe/communicator/resources/skin/button.css index 07374756e750..f8019a8524b8 100644 --- a/xpfe/communicator/resources/skin/button.css +++ b/xpfe/communicator/resources/skin/button.css @@ -1,14 +1,15 @@ - /** Standard toolbar buttons * class="button-toolbar" **/ .button-toolbar { - border : 1px solid #CCCCCC; - margin : 0px; - padding : 0px; + border : 1px solid transparent; + margin : 1px 0px 1px 0px; -moz-border-radius : 0px; + color : black; + padding : 0px; + font : 3mm arial; } .button-toolbar:hover @@ -18,16 +19,155 @@ .button-toolbar:hover:active { - border : 1px inset #CCCCCC; + border : 1px solid #336699; } .button-toolbar > .button-internal-box, - .button-toolbar > .button-internal-box:hover, - .button-toolbar > .button-internal-box:hover:active + .button-toolbar:hover > .button-internal-box { + padding : 1px 3px 1px 3px; border : none; } + + .button-toolbar > .button-internal-box > .button-text-container, + .button-toolbar > .button-internal-box > .button-text-container > .button-text + { + padding : none; + margin : none; + } + + .button-toolbar:hover:active > .button-internal-box + { + padding : 2px 2px 0px 4px; + border : none; + } + +/** 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 + { + background-repeat : no-repeat; + background-color : transparent; + background-position : 0px 0px; + background-image : url("chrome://global/skin/button32-bg.gif"); + color : #CCFFFF; + width : 36px; + height : 36px; + margin : 2px 6px 1px 1px; + font-size : smaller; + border : none; + } + + .button-toolbar-1:hover + { + background-image : url("chrome://global/skin/button32-bg-hover.gif"); + border : none; + } + + .button-toolbar-1:hover:active + { + margin : 3px 5px 0px 2px; + border : none; + } + + .button-toolbar-1[disabled="true"], + .button-toolbar-1[disabled="true"]:hover, + .button-toolbar-1[disabled="true"]:hover:active + { + background-image : url("chrome://global/skin/button32-bg-disabled.gif"); + 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, + .button-toolbar-1:hover > .button-internal-box, + .button-toolbar-1:hover:active > .button-internal-box + { + border : none; + vertical-align : middle; + } + + .button-toolbar-1 > .button-internal-box > .button-text-container + { + display : none; + 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 + { + background-repeat : no-repeat; + background-position : 50% 0px; + background-color : transparent; + background-image : url("chrome://global/skin/button28-bg.gif"); + color : #CCFFFF; + min-width : 28px; + min-height : 28px; + 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" **/ @@ -50,6 +190,41 @@ padding : 2px 0px 0px 2px; } -/** Large toolbar buttons - * - **/ \ No newline at end of file +/** Expanding Region Button **/ + +/* outer frame */ + button.expander + { + border : none; + padding : none; + margin : 1px 5px 3px 1px; + background-color : inherit; + list-style-image : url("chrome://global/skin/closedtwisty.gif"); + } + + button[open="true"].expander + { + list-style-image : url("chrome://global/skin/opentwisty.gif"); + } + +/* internal frame */ + button.expander > .button-internal-box + { + border : none; + background-color : inherit; + padding : none; + margin : none; + } + +/* text frame */ + button.expander > .button-internal-box > .button-text-container > .button-text + { + color : #0000FF; + text-decoration : underline; + } + + button.expander:hover > .button-internal-box > .button-text-container > .button-text + { + color : #FF0000; + } + diff --git a/xpfe/communicator/resources/skin/communicator.css b/xpfe/communicator/resources/skin/communicator.css index 9c944ca571cc..cd8fc509291a 100644 --- a/xpfe/communicator/resources/skin/communicator.css +++ b/xpfe/communicator/resources/skin/communicator.css @@ -8,8 +8,19 @@ @import url(chrome://global/skin/); +@import url(chrome://communicator/skin/box.css); +@import url(chrome://communicator/skin/toolbar.css); @import url(chrome://communicator/skin/button.css); +@import url(chrome://communicator/skin/brand.css); +@import url(chrome://communicator/skin/menu.css); +@import url(chrome://communicator/skin/menubutton.css); +@import url(chrome://communicator/skin/splitter.css); + @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */ @namespace html url("http://www.w3.org/TR/REC-html40"); /* namespace for HTML elements */ +#status-bar + { + border-top : #003366; + } \ No newline at end of file diff --git a/xpfe/communicator/resources/skin/makefile.win b/xpfe/communicator/resources/skin/makefile.win index 2aee3b8eb86e..d37ea23a40d8 100644 --- a/xpfe/communicator/resources/skin/makefile.win +++ b/xpfe/communicator/resources/skin/makefile.win @@ -26,8 +26,15 @@ include <$(DEPTH)\config\rules.mak> DISTBROWSER=$(DIST)\bin\chrome\communicator\skin install:: - $(MAKE_INSTALL) button.css $(DISTBROWSER) \ + $(MAKE_INSTALL) box.css $(DISTBROWSER) + $(MAKE_INSTALL) brand.css $(DISTBROWSER) + $(MAKE_INSTALL) button.css $(DISTBROWSER) $(MAKE_INSTALL) communicator.css $(DISTBROWSER) + $(MAKE_INSTALL) menu.css $(DISTBROWSER) + $(MAKE_INSTALL) menubutton.css $(DISTBROWSER) + $(MAKE_INSTALL) splitter.css $(DISTBROWSER) + $(MAKE_INSTALL) toolbar.css $(DISTBROWSER) + $(MAKE_INSTALL) navbar-endbox.gif $(DISTBROWSER) clobber:: rm -f $(DIST)\bin\chrome\communicator\skin\*.* diff --git a/xpfe/communicator/resources/skin/menu.css b/xpfe/communicator/resources/skin/menu.css new file mode 100644 index 000000000000..9d74a7ece55f --- /dev/null +++ b/xpfe/communicator/resources/skin/menu.css @@ -0,0 +1,87 @@ + +menubar + { + background-color : white; + } + +menubar > toolbargrippy + { + display : none; + } + +menu, menuitem + { + color : #000000; + vertical-align : middle; + } + +menu[disabled="true"], menuitem[disabled="true"], +menu[menuactive="true"][disabled="true"], +menuitem[menuactive="true"][disabled="true"] + { + color : #999999; + } + +/* XXX menupopups have to have a color explicitly specified. this is a bug */ +menupopup, popup + { + background-color : #CCCCCC; + border : 1px solid #336699; + } + +menupopup > menu, popup > menu, +menupopup > menuitem, popup > menuitem + { + max-width : 250px; + min-width : 125px; + margin-left : 0px; + margin-right : 0px; + margin-top : 0px; + margin-bottom : 0px; + } + +menuseparator + { + border-bottom : 1px solid #336699; + margin : 2px 0px 2px 0px; + } + +menubar > menu + { + border : 1px solid #FFFFFF; + padding : 2px 3px 2px 3px; + margin : 2px 0px 2px 0px; + } + +menupopup > menu, menupopup > menuitem, +popup > menu, popup > menuitem + { + padding : 2px; + } + +menubar > menu[menuactive="true"] + { + border : 1px solid #CCCCCC; + background-color : #CCCCCC; + -moz-border-radius : 4px; + } + +menubar > menu[menuactive="true"][open="true"] + { + border : 1px solid #336699; + border-bottom : 1px solid #CCCCCC; + background-color : #CCCCCC; + -moz-border-radius : 4px 4px 0px 0px; + } + +menupopup > menu[menuactive="true"], +menupopup > menuitem[menuactive="true"], +popup > menu[menuactive="true"], +popup > menuitem[menuactive="true"] + { + background-color : #336699; + color : #FFFFFF; + } + + + diff --git a/xpfe/communicator/resources/skin/menubutton.css b/xpfe/communicator/resources/skin/menubutton.css new file mode 100644 index 000000000000..09978f2d12c5 --- /dev/null +++ b/xpfe/communicator/resources/skin/menubutton.css @@ -0,0 +1,55 @@ + +/** Styles applying to items in a button-toolbar-3 style menu + * menuitem class="button-toolbar-3" + **/ + .button-toolbar-3 > .menubutton-icon-internal-box + { + border : 1px outset #99CCCC; + } + + .button-toolbar-3[open="true"] > .menubutton-icon-internal-box, + .button-toolbar-3:hover:active > .menubutton-icon-internal-box + { + border : 1px inset #99CCCC; + } + + menupopup.button-toolbar-3 + { + border : 1px solid #000000; + } + + menuitem.button-toolbar-3 + { + font-weight : normal; + } + + .button-toolbar-3[menuactive="true"] + { + background-color : #669999; + color : #FFFFFF; + font-weight : normal; + } + +/** menubuttons on generic grey toolbars + * class="button-toolbar" + **/ + .button-toolbar > .menubutton-internal-box + { + border : none; + padding : 1px 3px 1px 3px; + } + + .button-toolbar[open="true"] > .menubutton-internal-box, + .button-toolbar:hover:active > .menubutton-internal-box + { + border : none; + padding : 1px 3px 1px 3px; + } + + .button-toolbar[open="true"] + { + border : 1px solid #336699; + border-bottom : 1px solid #CCCCCC; + } + + \ No newline at end of file diff --git a/xpfe/communicator/resources/skin/navbar-endbox.gif b/xpfe/communicator/resources/skin/navbar-endbox.gif new file mode 100644 index 000000000000..2dfabed57912 Binary files /dev/null and b/xpfe/communicator/resources/skin/navbar-endbox.gif differ diff --git a/xpfe/communicator/resources/skin/splitter.css b/xpfe/communicator/resources/skin/splitter.css new file mode 100644 index 000000000000..41bac5a05e9a --- /dev/null +++ b/xpfe/communicator/resources/skin/splitter.css @@ -0,0 +1,130 @@ +/******* Splitters *******/ + +splitter { + cursor: e-resize; + min-width: 5px; + min-height: 5px; +} + +splitter[state="dragging"] +{ + background-color: gray; +} + +grippy { + margin: 0px; + border: 2px solid #003366; + padding: 0px; + background-color: #6699CC; + list-style-image: none; + cursor: pointer; +} + +grippy:hover{ + background-color: #99CCFF; +} + +grippy:hover:active{ + background-color: #99CCFF; +} + +box[orient="vertical"]>splitter grippy { + /* a horizontal splitter */ + width: 60px; + height:8px; +} + +box>splitter grippy { + /* a vertical splitter */ + width: 8px; + height: 60px; +} + +window[orient="vertical"]>splitter grippy { + /* a horizontal splitter */ + width: 8px; + height: 10px; +} + +window>splitter grippy { + /* a vertical splitter */ + width: 8px; + height: 60px; +} + +box[orient="vertical"]>splitter { + /* a vertical splitter */ + cursor: n-resize; +} + +window[orient="vertical"]>splitter { + /* a vertical splitter */ + cursor: n-resize; +} + + +rows>splitter { + /* a vertical splitter */ + cursor: n-resize; +} + +/* for backwards compatibility */ +box[align="vertical"]>splitter grippy { + /* a horizontal splitter */ + width: 60px; + height: 8px; +} + +window[align="vertical"]>splitter grippy { + /* a horizontal splitter */ + width: 60px; + height: 8px; +} + +box[align="vertical"]>splitter { + /* a vertical splitter */ + cursor: n-resize; +} + +window[align="vertical"]>splitter { + /* a vertical splitter */ + cursor: n-resize; +} + +/** + * gray horizontal splitter for pane views + */ +splitter.gray-horizontal-splitter { + min-height: 8px; + background-color: #CCCCCC; + border: none; + padding: 0px; +} + +splitter.gray-horizontal-splitter grippy { + margin: 0px; + border: 2px solid #CCCCCC; + padding: 0px; + background-color: #6699CC; + list-style-image: none; +} +splitter.gray-horizontal-splitter grippy:hover { + background-color: #003366; +} + +splitter.gray-horizontal-splitter grippy:active { + background-color: #003366; +} + +splitter.gray-horizontal-splitter #begincap { + min-width: 8px; + width: 8px; + background-image: url("chrome://global/skin/gray-bottomleft.gif"); + background-repeat: no-repeat; + background-position: 0% 100%; +} + +splitter.gray-horizontal-splitter #endcap { + min-width: 8px; + width: 8px; +} diff --git a/xpfe/communicator/resources/skin/toolbar.css b/xpfe/communicator/resources/skin/toolbar.css new file mode 100644 index 000000000000..2c314e4011c3 --- /dev/null +++ b/xpfe/communicator/resources/skin/toolbar.css @@ -0,0 +1,57 @@ + +/******* ToolBox & ToolBar *******/ + +toolbar + { + background-color : #CCCCCC; + border-bottom : 1px solid #003366; + } + +toolbargrippy + { + background-image : url("chrome://global/skin/taskbar-tab-trans.gif"); + background-repeat : no-repeat; + border-right : 1px solid #003366; + width : 10px; + height : 10px; + } + +toolbar[collapsed="true"] > toolbargrippy + { + width : 30px; + } + +toolbargrippy:hover + { + background-color : #99cccc !important; + background-image : url("chrome://global/skin/taskbar-tab-hover.gif") !important; + } + + +.toolbar-primary + { + background-image : url("chrome://global/skin/navbar-bg.gif"); + background-color : #CCCCCC; + padding : 0px; + min-height : 47px; + border : none; + } + +.toolbar-primary > toolbargrippy, .toolbar-standard > toolbargrippy + { + background-color : #003366; + background-image : url("chrome://global/skin/taskbar-tab.gif"); + background-repeat : no-repeat; + } + +.toolbar-standard + { + color : white; + background-color : #003366; + padding : 0px; + margin : 0px; + border : none; + min-height : 46px; + } + +