make us look even cooler, give outliner a border by default and disable it where...

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

/* 
 * The contents of this file are subject to the Netscape Public
 * License Version 1.1 (the "License"); you may not use this file
 * except in compliance with the License. You may obtain a copy of
 * the License at http://www.mozilla.org/NPL/
 *  
 * Software distributed under the License is distributed on an "AS
 * IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or
 * implied. See the License for the specific language governing
 * rights and limitations under the License.
 *  
 * The Original Code is Mozilla Communicator client code, released
 * March 31, 1998.
 * 
 * The Initial Developer of the Original Code is Netscape
 * Communications Corporation. Portions created by Netscape are
 * Copyright (C) 1998-1999 Netscape Communications Corporation. All
 * Rights Reserved.
 * 
 * Contributor(s): 
 */

/* This contains CSS just for editor toolbars */

#EditorToolbox {
  min-width: 1px;
}

#FormatToolbar > .toolbar-holder {
  background-image: url(chrome://editor/skin/images/format-toolbar-endcap.gif);
}

.separator_small { 
  width: 1em; 
}

.margin-left-right {
  margin-left:  3px;
  margin-right: 3px;
}

/* From button.css: */
/* margin: 4px 7px 1px 1px; */
/* We have too many buttons - must be closer! */

.toolbar, .key-toolbar {
  margin-right: 2px;
}

.inset-border {
  border: 1px inset FF9F00;
}

/* THIS DOESN'T WORK ON <text>! */
.center {
  text-align: center;
}

/* end of SHOULD GO IN GLOBAL */

#EditModeToolbar {
  padding:       0px;
  /* Same as "standard" toolbar background */
  border-top:    1px solid #9C9CFF; 
  min-width:     1px;
  overflow:      hidden;
}

/* BORDERS ARE NOT WORKING! global class="plain" is fighting us! */
/* !important in for now as a workaround to above problem! */
tab.edit-mode:hover, button.edit-mode:hover:active,
tab.edit-mode {
  -moz-border-radius: 0px 0px 7px 7px ;
  padding: 0px 4px 1px 4px;
  margin: 0px;
  border-top: 0px solid black !important; /* Must be same as background */
  border-bottom: 1px solid #9C9CFF !important;
  border-left: 1px solid #9C9CFF !important;
  border-right: 1px solid #9C9CFF !important;
}

tab.edit-mode > .button-internal-box,
tab.edit-mode:hover > .button-internal-box,
tab.edit-mode:hover:active > .button-internal-box  {
  border: none;
}

tab.edit-mode:hover {
/*  border:  1px solid #3366FF !important; */
}

tab.edit-mode:hover:active {
  padding: 1px 5px 0px 3px;
/*  border:  1px solid #99CCFF !important; */
}

/* selected="1" is from old times when edit-mode was a <button> - still left in xul */

tab.edit-mode[selected="1"],
tab.edit-mode[selected="true"] {
  padding: 0px 4px 1px 4px;
  margin: -1px 0px 0px 0px;
/* Not resizing well! - use color instead
  font-weight: bold; 
*/
  background-color: #008484;
  color: #000000;
}

tab.edit-mode[selected="1"]:active,
tab.edit-mode[selected="1"]:hover:active,
tab.edit-mode[selected="true"]:active,
tab.edit-mode[selected="true"]:hover:active {
  padding: 1px 5px 0px 3px;
}

#NormalModeButton[type="image"] {
  list-style-image:url(chrome://editor/skin/images/editmode-normal.gif); 
}

#TagModeButton[type="image"] {
  list-style-image:url(chrome://editor/skin/images/editmode-tags.gif); 
}

#SourceModeButton[type="image"] {
  list-style-image:url(chrome://editor/skin/images/editmode-html.gif); 
}

#PreviewModeButton[type="image"] {
  list-style-image:url(chrome://editor/skin/images/editmode-preview.gif); 
}

#ToggleEditModeType {
  list-style-image:url(chrome://editor/skin/images/editmode-toggle.gif); 
  border: 1px outset #CCCCDD;
}

#ToggleEditModeType:hover {
  border: 1px solid #99CCFF;
}

#ToggleEditModeType:hover:active {
  border: 1px inset #99CCFF;
}

/* Image URLs for all Editor toolbar buttons */

#boldButton {
  list-style-image:url(chrome://editor/skin/images/bold.gif); 
}

#boldButton:hover {
  list-style-image:url(chrome://editor/skin/images/bold-hover.gif); 
}

#italicButton {
  list-style-image:url(chrome://editor/skin/images/italic.gif); 
}

#italicButton:hover {
  list-style-image:url(chrome://editor/skin/images/italic-hover.gif); 
}

#underlineButton {
  list-style-image:url(chrome://editor/skin/images/underline.gif); 
}

#underlineButton:hover {
  list-style-image:url(chrome://editor/skin/images/underline-hover.gif); 
}

#newButton {
	list-style-image:url("chrome://editor/skin/images/newfile.gif");
}

#newButton:hover {
	list-style-image:url("chrome://editor/skin/images/newfile-hover.gif");
}

#newButton[disabled="true"] {
	list-style-image:url("chrome://editor/skin/images/newfile_dis.gif");
}

#openButton {
	list-style-image:url("chrome://editor/skin/images/openfile.gif");
}

#openButton:hover {
	list-style-image:url("chrome://editor/skin/images/openfile-hover.gif");
}

#openButton[disabled="true"] {
	list-style-image:url("chrome://editor/skin/images/openfile_dis.gif");
}

#saveButton {
	list-style-image:url("chrome://editor/skin/images/savefile.gif");
}

#saveButton:hover {
	list-style-image:url("chrome://editor/skin/images/savefile-hover.gif");
}

#saveButton[disabled="true"] {
	list-style-image:url("chrome://editor/skin/images/savefile_dis.gif");
}

#saveButton[dirty="true"] {
  list-style-image:url(chrome://editor/skin/images/savemod.gif); 
}

#saveButton[dirty="true"]:hover {
  list-style-image:url(chrome://editor/skin/images/savemod-hover.gif); 
}

#publishButton {
	list-style-image:url("chrome://editor/skin/images/publish.gif");
}

#previewButton {
	list-style-image:url("chrome://editor/skin/images/preview.gif");
}

#previewButton:hover {
	list-style-image:url("chrome://editor/skin/images/preview-hover.gif");
}

#previewButton[disabled="true"] {
	list-style-image:url("chrome://editor/skin/images/preview_dis.gif");
}

#printButton 
  {
    list-style-image      : url("chrome://global/skin/print.gif");
  }

#printButton:hover,
#printButton:hover:active,
#printButton[buttonover="true"],
#printButton[open="true"]
  {
    list-style-image      : url("chrome://global/skin/print-hover.gif");
  }

#printButton[disabled="true"],
#printButton[disabled="true"]:hover,
#printButton[disabled="true"]:hover:active,
#printButton[disabled="true"][buttonover="true"]
  {
    list-style-image      : url("chrome://global/skin/print_dis.gif");
  }

#findButton {
	list-style-image:url("chrome://editor/skin/images/find.gif");
}

#findButton[disabled="true"] {
	list-style-image:url("chrome://editor/skin/images/find_dis.gif");
}

#linkButton {
	list-style-image:url("chrome://editor/skin/images/link.gif");
}

#linkButton:hover {
	list-style-image:url("chrome://editor/skin/images/link-hover.gif");
}

#linkButton[disabled="true"] {
	list-style-image:url("chrome://editor/skin/images/link_dis.gif");
}

#imageButton {
	list-style-image:url("chrome://editor/skin/images/image.gif");
}

#imageButton:hover {
	list-style-image:url("chrome://editor/skin/images/image-hover.gif");
}

#imageButton[disabled="true"] {
	list-style-image:url("chrome://editor/skin/images/image_dis.gif");
}

#namedAnchorButton {
	list-style-image:url("chrome://editor/skin/images/anchor.gif");
}

#namedAnchorButton:hover {
	list-style-image:url("chrome://editor/skin/images/anchor-hover.gif");
}

#namedAnchorButton[disabled="true"] {
	list-style-image:url("chrome://editor/skin/images/anchor_dis.gif");
}

#hlineButton {
	list-style-image:url("chrome://editor/skin/images/hline.gif");
}

#hlineButton:hover {
	list-style-image:url("chrome://editor/skin/images/hline-hover.gif");
}

#hlineButton[disabled="true"] {
	list-style-image:url("chrome://editor/skin/images/hline_dis.gif");
}

#tableButton {
	list-style-image:url("chrome://editor/skin/images/table.gif");
}

#tableButton:hover {
	list-style-image:url("chrome://editor/skin/images/table-hover.gif");
}

#tableButton[disabled="true"] {
	list-style-image:url("chrome://editor/skin/images/table_dis.gif");
}

#linkButton-dark {
	list-style-image:url("chrome://editor/skin/images/link.gif");
}
#imageButton-dark {
	list-style-image:url("chrome://editor/skin/images/image.gif");
}
#namedAnchorButton-dark {
	list-style-image:url("chrome://editor/skin/images/anchor.gif");
}
#hlineButton-dark {
	list-style-image:url("chrome://editor/skin/images/hline.gif");
}
#tableButton-dark {
	list-style-image:url("chrome://editor/skin/images/table.gif");
}
#spellingButton {
	list-style-image:url("chrome://editor/skin/images/spell.gif");
}

#DecreaseFontSizeButton {
	list-style-image:url("chrome://editor/skin/images/dec-font-size.gif");
}

#DecreaseFontSizeButton:hover {
	list-style-image:url("chrome://editor/skin/images/dec-font-size-hover.gif");
}

#IncreaseFontSizeButton {
	list-style-image:url("chrome://editor/skin/images/inc-font-size.gif");
}

#IncreaseFontSizeButton:hover {
	list-style-image:url("chrome://editor/skin/images/inc-font-size-hover.gif");
}

#ulButton {
	list-style-image:url("chrome://editor/skin/images/bullets.gif");
}

#ulButton:hover {
	list-style-image:url("chrome://editor/skin/images/bullets-hover.gif");
}

#olButton {
	list-style-image:url("chrome://editor/skin/images/numbers.gif");
}

#olButton:hover {
	list-style-image:url("chrome://editor/skin/images/numbers-hover.gif");
}

#outdentButton {
	list-style-image:url("chrome://editor/skin/images/outdent.gif");
}

#outdentButton:hover {
	list-style-image:url("chrome://editor/skin/images/outdent-hover.gif");
}

#outdentButton[disabled="true"] {
	list-style-image:url("chrome://editor/skin/images/outdent_dis.gif");
}

#indentButton {
	list-style-image:url("chrome://editor/skin/images/indent.gif");
}

#indentButton:hover {
	list-style-image:url("chrome://editor/skin/images/indent-hover.gif");
}

#FormatToolbar > button,
#FormatToolbar > button:hover,
#FormatToolbar > button:active,
#FormatToolbar > button[disabled="true"] {
        min-width: 23px;
        min-height: 23px;
}

#FormatToolbar > button > .button-internal-box {
        margin: 0px;
        padding: 1px;
        text-align: center;
}

#FormatToolbar > button:active > .button-internal-box {
        padding: 2px 0px 0px 2px;
}

#FormatToolbar > button > .button-internal-box > .button-text-container
  {
    display               : none;
  } 

#ParagraphSelect {
        margin-top: 2px;
}

#AlignPopupButton {
	list-style-image:url("chrome://editor/skin/images/align.gif");
}

#AlignPopupButton:hover {
	list-style-image:url("chrome://editor/skin/images/align-hover.gif");
}

#AlignPopupButton > .button-internal-box {
	border:1px solid transparent;
}
#AlignPopupButton:hover > .button-internal-box {
	border:1px outset #CCCCDD;
}
#AlignPopupButton:active > .button-internal-box,
#AlignPopupButton[open="true"] > .button-internal-box {
	border:1px inset #CCCCDD;
}

#InsertPopupButton {
	list-style-image:url("chrome://editor/skin/images/object-popup.gif");
}

#text-align-left,
#align-left-button
  {
	  list-style-image      : url("chrome://editor/skin/images/left.gif");
  } 

#text-align-left:hover,
#align-left-button:hover
  {
	  list-style-image      : url("chrome://editor/skin/images/left-hover.gif");
  } 

#text-align-left[disabled="true"],
#text-align-left[disabled="true"]:hover,
#text-align-left[disabled="true"]:hover:active,
#align-left-button[disabled="true"],
#align-left-button[disabled="true"]:hover,
#align-left-button[disabled="true"]:hover:active,
  {
    list-style-image      : url("chrome://editor/skin/images/left-disabled.gif");
  } 

#text-align-center,
#align-center-button
  {
	  list-style-image      : url("chrome://editor/skin/images/center.gif");
  } 

#text-align-center:hover,
#align-center-button:hover
  {
	  list-style-image      : url("chrome://editor/skin/images/center-hover.gif");
  } 

#text-align-center[disabled="true"],
#text-align-center[disabled="true"]:hover,
#text-align-center[disabled="true"]:hover:active,
#align-center-button[disabled="true"],
#align-center-button[disabled="true"]:hover,
#align-center-button[disabled="true"]:hover:active
  {
    list-style-image      : url("chrome://editor/skin/images/center-disabled.gif");
  } 

#text-align-right,
#align-right-button
  {
	  list-style-image      : url("chrome://editor/skin/images/right.gif");
  } 

#text-align-right:hover,
#align-right-button:hover
  {
	  list-style-image      : url("chrome://editor/skin/images/right-hover.gif");
  } 

#text-align-right[disabled="true"],
#text-align-right[disabled="true"]:hover,
#text-align-right[disabled="true"]:hover:active
#align-right-button[disabled="true"],
#align-right-button[disabled="true"]:hover,
#align-right-button[disabled="true"]:hover:active 
 {
    list-style-image      : url("chrome://editor/skin/images/right-disabled.gif");
  } 

#text-align-justify, 
#align-justify-button
  {
	  list-style-image      : url("chrome://editor/skin/images/justify.gif");
  }

#text-align-justify:hover, 
#align-justify-button:hover
  {
	  list-style-image      : url("chrome://editor/skin/images/justify-hover.gif");
  }

#text-align-justify[disabled="true"],
#text-align-justify[disabled="true"]:hover,
#text-align-justify[disabled="true"]:hover:active
#align-justify-button[disabled="true"],
#align-justify-button[disabled="true"]:hover,
#align-justify-button[disabled="true"]:hover:active 
 {
    list-style-image      : url("chrome://editor/skin/images/justify-disabled.gif");
  } 

.ColorPickerLabel {
  border:     1px inset white;
  margin:     0px;
  padding:    2px;
  text-align: center;
}

/* TODO: How to make inset color skinable? */
.color-button {
  border: 1px inset #FF9F00;
  padding: 0px;
  width:  15px;
  height: 15px;
  margin:  1px;
}

.color-button:hover {
  border:  1px solid #FFCF00;
}

#ColorButtons {
  margin-right: 5px;
}

#TextColorButton {
  margin: 1px 7px 7px 1px;
  /* TEMP: Set color here. TODO: Set color from page */
  background-color: #AA0000;
}

#BackgroundColorButton {
  margin: 7px 1px 1px 7px;
  /* TEMP: Set color here. TODO: Set color from page */
  background-color: #FFFF00;
}