accomodate recent XUL 1.0 changes

[themes.git] / EarlyBlue / editor / skin / EditorToolbars.css

/* \r
 * The contents of this file are subject to the Netscape Public\r
 * License Version 1.1 (the "License"); you may not use this file\r
 * except in compliance with the License. You may obtain a copy of\r
 * the License at http://www.mozilla.org/NPL/\r
 *  \r
 * Software distributed under the License is distributed on an "AS\r
 * IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or\r
 * implied. See the License for the specific language governing\r
 * rights and limitations under the License.\r
 *  \r
 * The Original Code is Mozilla Communicator client code, released\r
 * March 31, 1998.\r
 * \r
 * The Initial Developer of the Original Code is Netscape\r
 * Communications Corporation. Portions created by Netscape are\r
 * Copyright (C) 1998-1999 Netscape Communications Corporation. All\r
 * Rights Reserved.\r
 * \r
 * Contributor(s): \r
 */\r
\r
/* This contains CSS just for editor toolbars */\r
\r
#EditorToolbox {\r
  min-width: 1px;\r
}\r
\r
#FormatToolbar {\r
  border-bottom: 1px solid #9999CC;\r
}\r
\r
.separator_small { \r
  width: 1em; \r
}\r
\r
.margin-left-right {\r
  margin-left:  3px;\r
  margin-right: 3px;\r
}\r
\r
/* From button.css: */\r
/* margin: 4px 7px 1px 1px; */\r
/* We have too many buttons - must be closer! */\r
\r
.toolbar, .key-toolbar {\r
  margin-right: 2px;\r
}\r
\r
.inset-border {\r
  border: 1px inset CCCCDD;\r
}\r
\r
/* THIS DOESN'T WORK ON <text>! */\r
.center {\r
  text-align: center;\r
}\r
\r
/* end of SHOULD GO IN GLOBAL */\r
\r
#EditModeToolbar {\r
  padding:       0px;\r
  /* Same as "standard" toolbar background */\r
  border-top:    1px solid #9999CC;\r
  border-bottom: none;\r
  margin-bottom: 0px;\r
  min-width:     1px;\r
  color:         #000000;\r
  background-color: #CCD0DD;\r
  overflow:      hidden;\r
}\r
/*\r
#EditModeToolbar > toolbargrippy {\r
  height: 100%;\r
}\r
*/\r
/* BORDERS ARE NOT WORKING! global class="plain" is fighting us! */\r
/* !important in for now as a workaround to above problem! */\r
button.edit-mode:hover, button.edit-mode:hover:active,\r
button.edit-mode {\r
  -moz-border-radius: 0px 0px 7px 7px;\r
  padding: 0px 4px 1px 4px;\r
  margin: 0px;\r
  color: #CCD0DD;\r
  background-color: #666699;\r
  border-top: 1px solid #666699 !important; /* Must be same as background */\r
  border-bottom: 1px solid #9999CC !important;\r
  border-left: 1px solid #9999CC !important;\r
  border-right: 1px solid #9999CC !important;\r
}\r
\r
button.edit-mode > .button-internal-box,\r
button.edit-mode:hover > .button-internal-box,\r
button.edit-mode:hover:active > .button-internal-box  {\r
  border: none;\r
}\r
\r
button.edit-mode:hover {\r
  border:  1px solid #3366FF !important;\r
}\r
\r
button.edit-mode:hover:active {\r
  padding: 1px 5px 0px 3px;\r
  border:  1px solid #99CCFF !important;\r
}\r
\r
button.edit-mode[selected="1"] {\r
  padding: 0px 4px 1px 4px;\r
  margin: -1px 0px 0px 0px;\r
/* Not resizing well! - use color instead\r
  font-weight: bold; \r
*/\r
  background-color: #FFFFFF;\r
  color: #000000;\r
}\r
\r
button.edit-mode[selected="1"]:active,\r
button.edit-mode[selected="1"]:hover:active {\r
  padding: 1px 5px 0px 3px;\r
}\r
\r
#NormalModeButton[type="image"] {\r
  list-style-image:url(chrome://editor/skin/images/editmode-normal.gif); \r
}\r
\r
#TagModeButton[type="image"] {\r
  list-style-image:url(chrome://editor/skin/images/editmode-tags.gif); \r
}\r
#SourceModeButton[type="image"] {\r
  list-style-image:url(chrome://editor/skin/images/editmode-html.gif); \r
}\r
#PreviewModeButton[type="image"] {\r
  list-style-image:url(chrome://editor/skin/images/editmode-preview.gif); \r
}\r
#ToggleEditModeType {\r
  list-style-image:url(chrome://editor/skin/images/editmode-toggle.gif); \r
  border: 1px outset #CCD0DD;\r
}\r
\r
#ToggleEditModeType:hover {\r
  border: 1px solid #99CCFF;\r
}\r
\r
#ToggleEditModeType:hover:active {\r
  border: 1px inset #99CCFF;\r
}\r
\r
/* Image URLs for all Editor toolbar buttons */\r
\r
#boldButton {\r
  list-style-image:url(chrome://editor/skin/images/bold.gif); \r
}\r
\r
#italicButton {\r
  list-style-image:url(chrome://editor/skin/images/italic.gif); \r
}\r
\r
#underlineButton {\r
  list-style-image:url(chrome://editor/skin/images/underline.gif); \r
}\r
\r
#newButton {\r
	list-style-image:url("chrome://editor/skin/images/newfile.gif");\r
}\r
#newButton[disabled="true"] {\r
	list-style-image:url("chrome://editor/skin/images/newfile_dis.gif");\r
}\r
\r
#openButton {\r
	list-style-image:url("chrome://editor/skin/images/openfile.gif");\r
}\r
#openButton[disabled="true"] {\r
	list-style-image:url("chrome://editor/skin/images/openfile_dis.gif");\r
}\r
\r
#saveButton {\r
	list-style-image:url("chrome://editor/skin/images/savefile.gif");\r
}\r
#saveButton[disabled="true"] {\r
	list-style-image:url("chrome://editor/skin/images/savefile_dis.gif");\r
}\r
#saveButton[dirty="true"] {\r
  list-style-image:url(chrome://editor/skin/images/savemod.gif); \r
}\r
\r
#publishButton {\r
	list-style-image:url("chrome://editor/skin/images/publish.gif");\r
}\r
\r
#previewButton {\r
	list-style-image:url("chrome://editor/skin/images/preview.gif");\r
}\r
#previewButton[disabled="true"] {\r
	list-style-image:url("chrome://editor/skin/images/preview_dis.gif");\r
}\r
\r
#printButton \r
  {\r
	  list-style-image      : url("chrome://editor/skin/images/print.gif");\r
  }\r
#printButton[disabled="true"] {\r
	list-style-image:url("chrome://editor/skin/images/print_dis.gif");\r
}\r
\r
#findButton {\r
	list-style-image:url("chrome://editor/skin/images/find.gif");\r
}\r
#findButton[disabled="true"] {\r
	list-style-image:url("chrome://editor/skin/images/find_dis.gif");\r
}\r
\r
#linkButton {\r
	list-style-image:url("chrome://editor/skin/images/link.gif");\r
}\r
#linkButton[disabled="true"] {\r
	list-style-image:url("chrome://editor/skin/images/link_dis.gif");\r
}\r
\r
#imageButton {\r
	list-style-image:url("chrome://editor/skin/images/image.gif");\r
}\r
#imageButton[disabled="true"] {\r
	list-style-image:url("chrome://editor/skin/images/image_dis.gif");\r
}\r
\r
#namedAnchorButton {\r
	list-style-image:url("chrome://editor/skin/images/anchor.gif");\r
}\r
#namedAnchorButton[disabled="true"] {\r
	list-style-image:url("chrome://editor/skin/images/anchor_dis.gif");\r
}\r
\r
#hlineButton {\r
	list-style-image:url("chrome://editor/skin/images/hline.gif");\r
}\r
#hlineButton[disabled="true"] {\r
	list-style-image:url("chrome://editor/skin/images/hline_dis.gif");\r
}\r
\r
#tableButton {\r
	list-style-image:url("chrome://editor/skin/images/table.gif");\r
}\r
#tableButton[disabled="true"] {\r
	list-style-image:url("chrome://editor/skin/images/table_dis.gif");\r
}\r
\r
#linkButton-dark {\r
	list-style-image:url("chrome://editor/skin/images/link.gif");\r
}\r
#imageButton-dark {\r
	list-style-image:url("chrome://editor/skin/images/image.gif");\r
}\r
#namedAnchorButton-dark {\r
	list-style-image:url("chrome://editor/skin/images/anchor.gif");\r
}\r
#hlineButton-dark {\r
	list-style-image:url("chrome://editor/skin/images/hline.gif");\r
}\r
#tableButton-dark {\r
	list-style-image:url("chrome://editor/skin/images/table.gif");\r
}\r
#spellingButton {\r
	list-style-image:url("chrome://editor/skin/images/spell.gif");\r
}\r
\r
#DecreaseFontSizeButton {\r
	list-style-image:url("chrome://editor/skin/images/dec-font-size.gif");\r
}\r
\r
#IncreaseFontSizeButton {\r
	list-style-image:url("chrome://editor/skin/images/inc-font-size.gif");\r
}\r
\r
#ulButton {\r
	list-style-image:url("chrome://editor/skin/images/bullets.gif");\r
}\r
#olButton {\r
	list-style-image:url("chrome://editor/skin/images/numbers.gif");\r
}\r
#outdentButton {\r
	list-style-image:url("chrome://editor/skin/images/outdent.gif");\r
}\r
#outdentButton[disabled="true"] {\r
	list-style-image:url("chrome://editor/skin/images/outdent_dis.gif");\r
}\r
\r
#indentButton {\r
	list-style-image:url("chrome://editor/skin/images/indent.gif");\r
}\r
\r
#FormatToolbar > button,\r
#FormatToolbar > button:hover,\r
#FormatToolbar > button:active,\r
#FormatToolbar > button[disabled="true"] {\r
        margin: 0px 3px 0px 0px;\r
        border: none;\r
        min-width: 23px;\r
        min-height: 23px;\r
}\r
#FormatToolbar > button > .button-internal-box {\r
        margin: 0px;\r
        padding: 1px;\r
        border: 1px solid transparent;\r
        text-align: center;\r
}\r
#FormatToolbar > button:hover > .button-internal-box {\r
        border: 1px outset #CCD0DD;\r
}\r
#FormatToolbar > button:active > .button-internal-box {\r
        padding: 2px 0px 0px 2px;\r
        border: 1px inset #CCD0DD;\r
}\r
#FormatToolbar > button[disabled="true"] > .button-internal-box {\r
        border: 1px solid transparent;\r
}\r
\r
#FormatToolbar > button > .button-internal-box > .button-text-container\r
  {\r
    display               : none;\r
  } \r
\r
#ParagraphSelect {\r
        margin-top: 2px;\r
}\r
\r
#AlignPopupButton {\r
	list-style-image:url("chrome://editor/skin/images/align.gif");\r
}\r
\r
#AlignPopupButton > .button-internal-box {\r
	border:1px solid transparent;\r
}\r
#AlignPopupButton:hover > .button-internal-box {\r
	border:1px outset #CCD0DD;\r
}\r
#AlignPopupButton:active > .button-internal-box,\r
#AlignPopupButton[open="true"] > .button-internal-box {\r
	border:1px inset #CCD0DD;\r
}\r
\r
#InsertPopupButton {\r
	list-style-image:url("chrome://editor/skin/images/object-popup.gif");\r
}\r
\r
#text-align-left,\r
#align-left-button\r
  {\r
	  list-style-image      : url("chrome://editor/skin/images/left.gif");\r
  } \r
\r
#text-align-left[disabled="true"],\r
#text-align-left[disabled="true"]:hover,\r
#text-align-left[disabled="true"]:hover:active,\r
#align-left-button[disabled="true"],\r
#align-left-button[disabled="true"]:hover,\r
#align-left-button[disabled="true"]:hover:active,\r
  {\r
    list-style-image      : url("chrome://editor/skin/images/left-disabled.gif");\r
  } \r
\r
#text-align-center,\r
#align-center-button\r
  {\r
	  list-style-image      : url("chrome://editor/skin/images/center.gif");\r
  } \r
\r
#text-align-center[disabled="true"],\r
#text-align-center[disabled="true"]:hover,\r
#text-align-center[disabled="true"]:hover:active,\r
#align-center-button[disabled="true"],\r
#align-center-button[disabled="true"]:hover,\r
#align-center-button[disabled="true"]:hover:active\r
  {\r
    list-style-image      : url("chrome://editor/skin/images/center-disabled.gif");\r
  } \r
\r
#text-align-right,\r
#align-right-button\r
  {\r
	  list-style-image      : url("chrome://editor/skin/images/right.gif");\r
  } \r
\r
#text-align-right[disabled="true"],\r
#text-align-right[disabled="true"]:hover,\r
#text-align-right[disabled="true"]:hover:active\r
#align-right-button[disabled="true"],\r
#align-right-button[disabled="true"]:hover,\r
#align-right-button[disabled="true"]:hover:active \r
 {\r
    list-style-image      : url("chrome://editor/skin/images/right-disabled.gif");\r
  } \r
\r
#text-align-justify, #align-justify-button\r
  {\r
	  list-style-image      : url("chrome://editor/skin/images/justify.gif");\r
  }\r
\r
#text-align-justify[disabled="true"],\r
#text-align-justify[disabled="true"]:hover,\r
#text-align-justify[disabled="true"]:hover:active\r
#align-justify-button[disabled="true"],\r
#align-justify-button[disabled="true"]:hover,\r
#align-justify-button[disabled="true"]:hover:active \r
 {\r
    list-style-image      : url("chrome://editor/skin/images/justify-disabled.gif");\r
  } \r
\r
.ColorPickerLabel {\r
  border:     1px inset white;\r
  margin:     0px;\r
  padding:    2px;\r
  text-align: center;\r
}\r
\r
/* TODO: How to make inset color skinable? */\r
.color-button {\r
  border: 1px inset #CCD0DD;\r
  padding: 0px;\r
  width:  19px;\r
  height: 19px;\r
  margin:  1px;\r
}\r
\r
.color-button:hover {\r
  border:  1px solid #666699;\r
}\r
\r
#TextColorPopupButton {\r
  margin: 2px 9px 9px 2px;\r
  /* TEMP: Set color here. TODO: Set color from page */\r
  background-color: #AA0000;\r
}\r
\r
#BackColorPopupButton {\r
  margin: 9px 2px 2px 9px;\r
  /* TEMP: Set color here. TODO: Set color from page */\r
  background-color: #FFFF00;\r
}\r