gecko-dev/themes/modern/editor/EditorToolbars.css
2000-10-05 21:06:46 +00:00

729 lines
20 KiB
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 > toolbargrippy {
margin-left: 0px;
}
.separator_small {
width: 1em;
}
.margin-left-right {
margin-left: 3px;
margin-right: 3px;
}
.toolbar, .key-toolbar {
margin-right: 2px;
}
.inset-border {
border: 1px inset white;
}
.button-toolbar-2 {
min-width: 3.4em;
}
/* THIS DOESN'T WORK ON <text>! */
.center {
text-align: center;
}
#EditModeToolbar {
padding: 0px;
/* Same as "standard" toolbar background */
border-bottom: 1px solid #B4C3D4;
margin-bottom: 0px;
min-width: 1px;
color: white;
background-color: #B4C3D4;
overflow: hidden;
padding-bottom: 2px;
}
#EditModeToolbar > toolbargrippy {
display: none;
}
button.edit-mode:hover, button.edit-mode:hover:active,
button.edit-mode {
-moz-border-radius: 0px 0px 8px 8px;
padding: 1px 5px 1px 4px;
margin: 0px 1px;
color: black;
background-color: #CCCCCC;
border-top: 0px;
border-bottom: 1px solid #666666;
border-left: 1px solid white;
border-right: 1px solid #666666;
}
button.edit-mode:hover {
border: 1px solid white;
border-top: 0px;
}
button.edit-mode:hover:active {
padding: 2px 4px 0px 5px;
}
button.edit-mode[selected="1"] {
/* Not resizing well! - use color instead
font-weight: bold;
*/
background-color: #FFFFFF;
}
button.edit-mode[selected="1"]:active,
button.edit-mode[selected="1"]:hover:active {
padding: 2px 4px 0px 5px;
}
#NormalModeButton {
list-style-image:url(chrome://editor/skin/images/editmode-normal.gif);
}
#TagModeButton {
list-style-image:url(chrome://editor/skin/images/editmode-tags.gif);
}
#SourceModeButton {
list-style-image:url(chrome://editor/skin/images/editmode-html.gif);
}
#PreviewModeButton {
list-style-image:url(chrome://editor/skin/images/editmode-preview.gif);
}
/* Needed to suppress inner box settings - same as button.plain
(we can't use 'plain', else we get no outer borders!)
*/
button.edit-mode:hover:active > .button-internal-box,
button.edit-mode > .button-internal-box,
button.edit-mode > .button-internal-box:hover:active,
button.edit-mode > .button-internal-box > .button-text-container,
button.edit-mode > .button-internal-box > .button-text-container:hover:active,
button.edit-mode > .button-internal-box > .button-text-container > .button-text,
button.edit-mode > .button-internal-box > .button-text-container > .button.text:hover:active,
button.edit-mode > .button-internal-box > .button-icon,
button.edit-mode > .button-internal-box > .button.icon:hover:active
{
border : 0px ! important;
margin : 0px;
padding : 0px;
}
/* Image URLs for all Editor toolbar buttons */
#newButton, #openButton, #saveButton, #previewButton, #printButton, #linkButton, #imageButton, #namedAnchorButton,
#hlineButton, #tableButton {
min-width : 42px;
}
#newButton {
list-style-image:url("chrome://editor/skin/images/newfile.gif");
}
#newButton[disabled="true"],
#newButton[disabled="true"]:hover,
#newButton[disabled="true"]:hover:active
{
list-style-image : url("chrome://editor/skin/images/newfile-disabled.gif");
}
#newButton:hover
{
list-style-image : url("chrome://editor/skin/images/newfile-hover.gif");
}
#newButton:hover:active
{
list-style-image : url("chrome://editor/skin/images/newfile-clicked.gif");
}
#openButton {
list-style-image:url("chrome://editor/skin/images/openfile.gif");
}
#openButton[disabled="true"],
#openButton[disabled="true"]:hover,
#openButton[disabled="true"]:hover:active
{
list-style-image : url("chrome://editor/skin/images/openfile-disabled.gif");
}
#openButton:hover
{
list-style-image : url("chrome://editor/skin/images/openfile-hover.gif");
}
#openButton:hover:active
{
list-style-image : url("chrome://editor/skin/images/openfile-clicked.gif");
}
#saveButton {
list-style-image:url("chrome://editor/skin/images/savefile.gif");
}
#saveButton[disabled="true"],
#saveButton[disabled="true"]:hover,
#saveButton[disabled="true"]:hover:active
{
list-style-image : url("chrome://editor/skin/images/savefile-disabled.gif");
}
#saveButton:hover
{
list-style-image : url("chrome://editor/skin/images/savefile-hover.gif");
}
#saveButton:hover:active
{
list-style-image : url("chrome://editor/skin/images/savefile-clicked.gif");
}
#saveButton[dirty="true"] {
list-style-image:url(chrome://editor/skin/images/savemod.gif);
}
#publishButton {
list-style-image:url("chrome://editor/skin/images/publish.gif");
}
#previewButton {
list-style-image:url("chrome://editor/skin/images/preview.gif");
}
#previewButton[disabled="true"],
#previewButton[disabled="true"]:hover,
#previewButton[disabled="true"]:hover:active
{
list-style-image : url("chrome://editor/skin/images/preview-disabled.gif");
}
#previewButton:hover
{
list-style-image : url("chrome://editor/skin/images/preview-hover.gif");
}
#previewButton:hover:active
{
list-style-image : url("chrome://editor/skin/images/preview-clicked.gif");
}
#printButton
{
-moz-binding : url("chrome://communicator/skin/menubuttonBindings.xml#menubutton-dual-standard");
list-style-image : url("chrome://global/skin/print.gif");
margin : 3px 3px 1px 3px;
text-align : center;
}
#printButton > .menubutton-dual-stack > .menubutton-dual-button
{
margin : 0px;
padding : 0px;
}
#printButton[disabled="true"],
#printButton[disabled="true"]:hover,
#printButton[disabled="true"]:hover:active,
#printButton[disabled="true"] > .menubutton-dual-stack > .menubutton-dual-button,
#printButton[disabled="true"] > .menubutton-dual-stack > .menubutton-dual-button:hover,
#printButton[disabled="true"] > .menubutton-dual-stack > .menubutton-dual-button:hover:active
{
list-style-image : url("chrome://global/skin/print-disabled.gif");
}
#printButton > .menubutton-dual-stack > .menubutton-dual-button:hover
{
list-style-image : url("chrome://global/skin/print-hover.gif");
}
#printButton > .menubutton-dual-stack > .menubutton-dual-button:hover:active
{
list-style-image : url("chrome://global/skin/print-clicked.gif");
}
#printButton > .menubutton-dual-stack > .menubutton-dual-dropmarker-box
{
margin-left : 19px;
margin-top : 21px;
}
#findButton {
list-style-image:url("chrome://editor/skin/images/find.gif");
}
#linkButton {
list-style-image:url("chrome://editor/skin/images/link.gif");
}
#linkButton[disabled="true"],
#linkButton[disabled="true"]:hover,
#linkButton[disabled="true"]:hover:active
{
list-style-image : url("chrome://editor/skin/images/link-disabled.gif");
}
#linkButton:hover
{
list-style-image : url("chrome://editor/skin/images/link-hover.gif");
}
#linkButton:hover:active
{
list-style-image : url("chrome://editor/skin/images/link-clicked.gif");
}
#imageButton {
list-style-image:url("chrome://editor/skin/images/image.gif");
}
#imageButton[disabled="true"],
#imageButton[disabled="true"]:hover,
#imageButton[disabled="true"]:hover:active
{
list-style-image : url("chrome://editor/skin/images/image-disabled.gif");
}
#imageButton:hover
{
list-style-image : url("chrome://editor/skin/images/image-hover.gif");
}
#imageButton:hover:active
{
list-style-image : url("chrome://editor/skin/images/image-clicked.gif");
}
#namedAnchorButton {
list-style-image:url("chrome://editor/skin/images/anchor.gif");
}
#namedAnchorButton[disabled="true"],
#namedAnchorButton[disabled="true"]:hover,
#namedAnchorButton[disabled="true"]:hover:active
{
list-style-image : url("chrome://editor/skin/images/anchor-disabled.gif");
}
#namedAnchorButton:hover
{
list-style-image : url("chrome://editor/skin/images/anchor-hover.gif");
}
#namedAnchorButton:hover:active
{
list-style-image : url("chrome://editor/skin/images/anchor-clicked.gif");
}
#hlineButton {
list-style-image:url("chrome://editor/skin/images/hline.gif");
}
#hlineButton[disabled="true"],
#hlineButton[disabled="true"]:hover,
#hlineButton[disabled="true"]:hover:active
{
list-style-image : url("chrome://editor/skin/images/hline-disabled.gif");
}
#hlineButton:hover
{
list-style-image : url("chrome://editor/skin/images/hline-hover.gif");
}
#hlineButton:hover:active
{
list-style-image : url("chrome://editor/skin/images/hline-clicked.gif");
}
#tableButton {
list-style-image:url("chrome://editor/skin/images/table.gif");
}
#tableButton[disabled="true"],
#tableButton[disabled="true"]:hover,
#tableButton[disabled="true"]:hover:active
{
list-style-image : url("chrome://editor/skin/images/table-disabled.gif");
}
#tableButton:hover
{
list-style-image : url("chrome://editor/skin/images/table-hover.gif");
}
#tableButton:hover:active
{
list-style-image : url("chrome://editor/skin/images/table-clicked.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");
}
#spellingButton[disabled="true"],
#spellingButton[disabled="true"]:hover,
#spellingButton[disabled="true"]:hover:active
{
list-style-image : url("chrome://editor/skin/images/spell-disabled.gif");
}
#spellingButton:hover
{
list-style-image : url("chrome://editor/skin/images/spell-hover.gif");
}
#spellingButton:hover:active
{
list-style-image : url("chrome://editor/skin/images/spell-clicked.gif");
}
/* formatting buttons */
/* This prevents all these formatting buttons from shifting when clicked */
.button-toolbar:hover:active > .button-internal-box
{
padding : 1px 3px 1px 3px;
}
#DecreaseFontSizeButton {
list-style-image:url("chrome://editor/skin/images/dec-font-size.gif");
}
#DecreaseFontSizeButton:hover, #DecreaseFontSizeButton[toggled="true"]:hover:active {
list-style-image:url("chrome://editor/skin/images/dec-font-size_hover.gif");
}
#DecreaseFontSizeButton[toggled="true"], #DecreaseFontSizeButton:hover:active{
list-style-image:url("chrome://editor/skin/images/dec-font-size_active.gif");
}
#DecreaseFontSizeButton[disabled="true"], #DecreaseFontSizeButton[disabled="true"]:hover:active {
list-style-image:url("chrome://editor/skin/images/dec-font-size_disabled.gif");
}
#IncreaseFontSizeButton {
list-style-image:url("chrome://editor/skin/images/inc-font-size.gif");
}
#IncreaseFontSizeButton:hover, #IncreaseFontSizeButton[toggled="true"]:hover:active {
list-style-image:url("chrome://editor/skin/images/inc-font-size_hover.gif");
}
#IncreaseFontSizeButton[toggled="true"], #IncreaseFontSizeButton:hover:active {
list-style-image:url("chrome://editor/skin/images/inc-font-size_active.gif");
}
#IncreaseFontSizeButton[disabled="true"], #IncreaseFontSizeButton[disabled="true"]:hover:active {
list-style-image:url("chrome://editor/skin/images/inc-font-size_disabled.gif");
}
#boldButton {
list-style-image:url(chrome://editor/skin/images/bold.gif);
}
#boldButton:hover, #boldButton[toggled="true"]:hover:active {
list-style-image:url(chrome://editor/skin/images/bold_hover.gif);
}
#boldButton[toggled="true"], #boldButton:hover:active {
list-style-image:url(chrome://editor/skin/images/bold_active.gif);
}
#boldButton[disabled="true"], #boldButton[disabled="true"]:hover:active {
list-style-image:url(chrome://editor/skin/images/bold_disabled.gif);
}
#italicButton {
list-style-image:url(chrome://editor/skin/images/italic.gif);
}
#italicButton:hover, #italicButton[toggled="true"]:hover:active {
list-style-image:url(chrome://editor/skin/images/italic_hover.gif);
}
#italicButton[toggled="true"], #italicButton:hover:active {
list-style-image:url(chrome://editor/skin/images/italic_active.gif);
}
#italicButton[disabled="true"], #italicButton[disabled="true"]:hover:active {
list-style-image:url(chrome://editor/skin/images/italic_disabled.gif);
}
#underlineButton {
list-style-image:url(chrome://editor/skin/images/underline.gif);
}
#underlineButton:hover, #underlineButton[toggled="true"]:hover:active {
list-style-image:url(chrome://editor/skin/images/underline_hover.gif);
}
#underlineButton[toggled="true"], #underlineButton:hover:active {
list-style-image:url(chrome://editor/skin/images/underline_active.gif);
}
#underlineButton[disabled="true"], #underlineButton[disabled="true"]:hover:active {
list-style-image:url(chrome://editor/skin/images/underline_disabled.gif);
}
#ulButton {
list-style-image:url("chrome://editor/skin/images/bullets.gif");
}
#ulButton:hover, #ulButton[toggled="true"]:hover:active {
list-style-image:url("chrome://editor/skin/images/bullets_hover.gif");
}
#ulButton[toggled="true"], #ulButton:hover:active {
list-style-image:url("chrome://editor/skin/images/bullets_active.gif");
}
#ulButton[disabled="true"], #ulButton[disabled="true"]:hover:active {
list-style-image:url("chrome://editor/skin/images/bullets_disabled.gif");
}
#olButton {
list-style-image:url("chrome://editor/skin/images/numbers.gif");
}
#olButton:hover, #olButton[toggled="true"]:hover:active {
list-style-image:url("chrome://editor/skin/images/numbers_hover.gif");
}
#olButton[toggled="true"], #olButton:hover:active {
list-style-image:url("chrome://editor/skin/images/numbers_active.gif");
}
#olButton[disabled="true"], #olButton[disabled="true"]:hover:active {
list-style-image:url("chrome://editor/skin/images/numbers_disabled.gif");
}
#outdentButton {
list-style-image:url("chrome://editor/skin/images/outdent.gif");
}
#outdentButton:hover, #outdentButton[toggled="true"]:hover:active {
list-style-image:url("chrome://editor/skin/images/outdent_hover.gif");
}
#outdentButton[toggled="true"], #outdentButton:hover:active {
list-style-image:url("chrome://editor/skin/images/outdent_active.gif");
}
#outdentButton[disabled="true"], #outdentButton[disabled="true"]:hover:active {
list-style-image:url("chrome://editor/skin/images/outdent_disabled.gif");
}
#indentButton {
list-style-image:url("chrome://editor/skin/images/indent.gif");
}
#indentButton:hover, #indentButton[toggled="true"]:hover:active {
list-style-image:url("chrome://editor/skin/images/indent_hover.gif");
}
#indentButton[toggled="true"], #indentButton:hover:active {
list-style-image:url("chrome://editor/skin/images/indent_active.gif");
}
#indentButton[disabled="true"], #indentButton[disabled="true"]:hover:active {
list-style-image:url("chrome://editor/skin/images/indent_disabled.gif");
}
#AlignPopupButton {
list-style-image:url("chrome://editor/skin/images/align.gif");
}
#InsertPopupButton {
list-style-image:url("chrome://editor/skin/images/object-popup.gif");
}
menu:hover > #AlignPopupButton,
menu:hover:active > #AlignPopupButton[toggled="true"] {
list-style-image:url("chrome://editor/skin/images/align_hover.gif");
}
menu:hover:active > #AlignPopupButton,
menu:hover > #AlignPopupButton[toggled="true"] {
list-style-image:url("chrome://editor/skin/images/align_active.gif");
}
#AlignPopupButton[disabled="true"],
menu:hover > #AlignPopupButton[disabled="true"],
menu:hover:active > #AlignPopupButton[disabled="true"] {
list-style-image:url("chrome://editor/skin/images/align_disabled.gif");
}
menu:hover > #InsertPopupButton,
menu:hover:active > #InsertPopupButton[toggled="true"] {
list-style-image:url("chrome://editor/skin/images/object-popup_hover.gif");
}
menu:hover:active > #InsertPopupButton,
menu:hover > #InsertPopupButton[toggled="true"] {
list-style-image:url("chrome://editor/skin/images/object-popup_active.gif");
}
#InsertPopupButton[disabled="true"],
menu:hover > #InsertPopupButton[disabled="true"],
menu:hover:active > #InsertPopupButton[disabled="true"] {
list-style-image:url("chrome://editor/skin/images/object-popup_disabled.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[toggled="true"], #text-align-left:hover:active,
#align-left-button[toggled="true"], #align-left-button:hover:active
{
list-style-image:url("chrome://editor/skin/images/left_active.gif");
}
#text-align-left[disabled="true"], #text-align-left[disabled="true"]:hover:active,
#align-left-button[disabled="true"], #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[toggled="true"], #text-align-center:hover:active,
#align-center-button[toggled="true"], #align-center-button:hover:active {
list-style-image:url("chrome://editor/skin/images/center_active.gif");
}
#text-align-center[disabled="true"], #text-align-center[disabled="true"]:hover:active,
#align-center-button[disabled="true"], #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[toggled="true"], #text-align-right:hover:active,
#align-right-button[toggled="true"], #align-right-button:hover:active {
list-style-image:url("chrome://editor/skin/images/right_active.gif");
}
#text-align-right[disabled="true"], #text-align-right[disabled="true"]:hover:active,
#align-right-button[disabled="true"], #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[toggled="true"], #text-align-justify:hover:active,
#align-justify-button[toggled="true"], #align-justify-button:hover:active {
list-style-image:url("chrome://editor/skin/images/justify_active.gif");
}
#text-align-justify[disabled="true"], #text-align-justify[disabled="true"]:hover:active,
#align-justify-button[disabled="true"], #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 #CCCCCC;
padding: 0px;
width: 14px;
height: 12px;
margin: 2px;
}
.color-button:hover {
border: 1px solid white;
}
#TextColorButton {
margin: 2px 9px 9px 2px;
}
#BackgroundColorButton {
margin: 9px 2px 2px 9px;
}