EarlyBlue/editor/skin/EditorToolbars.css

   1 /*
   2  * The contents of this file are subject to the Netscape Public
   3  * License Version 1.1 (the "License"); you may not use this file
   4  * except in compliance with the License. You may obtain a copy of
   5  * the License at http://www.mozilla.org/NPL/
   6  *
   7  * Software distributed under the License is distributed on an "AS
   8  * IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or
   9  * implied. See the License for the specific language governing
  10  * rights and limitations under the License.
  11  *
  12  * The Original Code is Mozilla Communicator client code, released
  13  * March 31, 1998.
  14  *
  15  * The Initial Developer of the Original Code is Netscape
  16  * Communications Corporation. Portions created by Netscape are
  17  * Copyright (C) 1998-1999 Netscape Communications Corporation. All
  18  * Rights Reserved.
  19  *
  20  * Contributor(s):
  21  */
  22
  23 /* This contains CSS just for editor toolbars */
  24
  25 #EditorToolbox {
  26   min-width: 1px;
  27 }
  28
  29 #FormatToolbar {
  30   border-bottom: 1px solid #9999CC;
  31 }
  32
  33 .separator_small {
  34   width: 1em;
  35 }
  36
  37 .margin-left-right {
  38   margin-left:  3px;
  39   margin-right: 3px;
  40 }
  41
  42 /* From button.css: */
  43 /* margin: 4px 7px 1px 1px; */
  44 /* We have too many buttons - must be closer! */
  45
  46 .toolbar, .key-toolbar {
  47   margin-right: 2px;
  48 }
  49
  50 .inset-border {
  51   border: 1px inset CCCCDD;
  52 }
  53
  54 /* THIS DOESN'T WORK ON <text>! */
  55 .center {
  56   text-align: center;
  57 }
  58
  59 /* end of SHOULD GO IN GLOBAL */
  60
  61 #EditModeToolbar {
  62   padding:       0px;
  63   /* Same as "standard" toolbar background */
  64   border-top:    1px solid #9999CC;
  65   border-bottom: none;
  66   margin-bottom: 0px;
  67   min-width:     1px;
  68   color:         #000000;
  69   background-color: #CCD0DD;
  70   overflow:      hidden;
  71 }
  72 /*
  73 #EditModeToolbar > toolbargrippy {
  74   height: 100%;
  75 }
  76 */
  77 /* BORDERS ARE NOT WORKING! global class="plain" is fighting us! */
  78 /* !important in for now as a workaround to above problem! */
  79 button.edit-mode:hover, button.edit-mode:hover:active,
  80 button.edit-mode {
  81   -moz-border-radius: 0px 0px 7px 7px;
  82   padding: 0px 4px 1px 4px;
  83   margin: 0px;
  84   color: #CCD0DD;
  85   background-color: #666699;
  86   border-top: 1px solid #666699 !important; /* Must be same as background */
  87   border-bottom: 1px solid #9999CC !important;
  88   border-left: 1px solid #9999CC !important;
  89   border-right: 1px solid #9999CC !important;
  90 }
  91
  92 button.edit-mode > .button-internal-box,
  93 button.edit-mode:hover > .button-internal-box,
  94 button.edit-mode:hover:active > .button-internal-box  {
  95   border: none;
  96 }
  97
  98 button.edit-mode:hover {
  99   border:  1px solid #3366FF !important;
 100 }
 101
 102 button.edit-mode:hover:active {
 103   padding: 1px 5px 0px 3px;
 104   border:  1px solid #99CCFF !important;
 105 }
 106
 107 button.edit-mode[selected="1"] {
 108   padding: 0px 4px 1px 4px;
 109   margin: -1px 0px 0px 0px;
 110 /* Not resizing well! - use color instead
 111   font-weight: bold;
 112 */
 113   background-color: #FFFFFF;
 114   color: #000000;
 115 }
 116
 117 button.edit-mode[selected="1"]:active,
 118 button.edit-mode[selected="1"]:hover:active {
 119   padding: 1px 5px 0px 3px;
 120 }
 121
 122 #NormalModeButton[type="image"] {
 123   list-style-image:url(chrome://editor/skin/images/editmode-normal.gif);
 124 }
 125
 126 #TagModeButton[type="image"] {
 127   list-style-image:url(chrome://editor/skin/images/editmode-tags.gif);
 128 }
 129 #SourceModeButton[type="image"] {
 130   list-style-image:url(chrome://editor/skin/images/editmode-html.gif);
 131 }
 132 #PreviewModeButton[type="image"] {
 133   list-style-image:url(chrome://editor/skin/images/editmode-preview.gif);
 134 }
 135 #ToggleEditModeType {
 136   list-style-image:url(chrome://editor/skin/images/editmode-toggle.gif);
 137   border: 1px outset #CCD0DD;
 138 }
 139
 140 #ToggleEditModeType:hover {
 141   border: 1px solid #99CCFF;
 142 }
 143
 144 #ToggleEditModeType:hover:active {
 145   border: 1px inset #99CCFF;
 146 }
 147
 148 /* Image URLs for all Editor toolbar buttons */
 149
 150 #boldButton {
 151   list-style-image:url(chrome://editor/skin/images/bold.gif);
 152 }
 153
 154 #italicButton {
 155   list-style-image:url(chrome://editor/skin/images/italic.gif);
 156 }
 157
 158 #underlineButton {
 159   list-style-image:url(chrome://editor/skin/images/underline.gif);
 160 }
 161
 162 #newButton {
 163         list-style-image:url("chrome://editor/skin/images/newfile.gif");
 164 }
 165 #newButton[disabled="true"] {
 166         list-style-image:url("chrome://editor/skin/images/newfile_dis.gif");
 167 }
 168
 169 #openButton {
 170         list-style-image:url("chrome://editor/skin/images/openfile.gif");
 171 }
 172 #openButton[disabled="true"] {
 173         list-style-image:url("chrome://editor/skin/images/openfile_dis.gif");
 174 }
 175
 176 #saveButton {
 177         list-style-image:url("chrome://editor/skin/images/savefile.gif");
 178 }
 179 #saveButton[disabled="true"] {
 180         list-style-image:url("chrome://editor/skin/images/savefile_dis.gif");
 181 }
 182 #saveButton[dirty="true"] {
 183   list-style-image:url(chrome://editor/skin/images/savemod.gif);
 184 }
 185
 186 #publishButton {
 187         list-style-image:url("chrome://editor/skin/images/publish.gif");
 188 }
 189
 190 #previewButton {
 191         list-style-image:url("chrome://editor/skin/images/preview.gif");
 192 }
 193 #previewButton[disabled="true"] {
 194         list-style-image:url("chrome://editor/skin/images/preview_dis.gif");
 195 }
 196
 197 #printButton
 198   {
 199           list-style-image      : url("chrome://editor/skin/images/print.gif");
 200   }
 201 #printButton[disabled="true"] {
 202         list-style-image:url("chrome://editor/skin/images/print_dis.gif");
 203 }
 204
 205 #findButton {
 206         list-style-image:url("chrome://editor/skin/images/find.gif");
 207 }
 208 #findButton[disabled="true"] {
 209         list-style-image:url("chrome://editor/skin/images/find_dis.gif");
 210 }
 211
 212 #linkButton {
 213         list-style-image:url("chrome://editor/skin/images/link.gif");
 214 }
 215 #linkButton[disabled="true"] {
 216         list-style-image:url("chrome://editor/skin/images/link_dis.gif");
 217 }
 218
 219 #imageButton {
 220         list-style-image:url("chrome://editor/skin/images/image.gif");
 221 }
 222 #imageButton[disabled="true"] {
 223         list-style-image:url("chrome://editor/skin/images/image_dis.gif");
 224 }
 225
 226 #namedAnchorButton {
 227         list-style-image:url("chrome://editor/skin/images/anchor.gif");
 228 }
 229 #namedAnchorButton[disabled="true"] {
 230         list-style-image:url("chrome://editor/skin/images/anchor_dis.gif");
 231 }
 232
 233 #hlineButton {
 234         list-style-image:url("chrome://editor/skin/images/hline.gif");
 235 }
 236 #hlineButton[disabled="true"] {
 237         list-style-image:url("chrome://editor/skin/images/hline_dis.gif");
 238 }
 239
 240 #tableButton {
 241         list-style-image:url("chrome://editor/skin/images/table.gif");
 242 }
 243 #tableButton[disabled="true"] {
 244         list-style-image:url("chrome://editor/skin/images/table_dis.gif");
 245 }
 246
 247 #linkButton-dark {
 248         list-style-image:url("chrome://editor/skin/images/link.gif");
 249 }
 250 #imageButton-dark {
 251         list-style-image:url("chrome://editor/skin/images/image.gif");
 252 }
 253 #namedAnchorButton-dark {
 254         list-style-image:url("chrome://editor/skin/images/anchor.gif");
 255 }
 256 #hlineButton-dark {
 257         list-style-image:url("chrome://editor/skin/images/hline.gif");
 258 }
 259 #tableButton-dark {
 260         list-style-image:url("chrome://editor/skin/images/table.gif");
 261 }
 262 #spellingButton {
 263         list-style-image:url("chrome://editor/skin/images/spell.gif");
 264 }
 265
 266 #DecreaseFontSizeButton {
 267         list-style-image:url("chrome://editor/skin/images/dec-font-size.gif");
 268 }
 269
 270 #IncreaseFontSizeButton {
 271         list-style-image:url("chrome://editor/skin/images/inc-font-size.gif");
 272 }
 273
 274 #ulButton {
 275         list-style-image:url("chrome://editor/skin/images/bullets.gif");
 276 }
 277 #olButton {
 278         list-style-image:url("chrome://editor/skin/images/numbers.gif");
 279 }
 280 #outdentButton {
 281         list-style-image:url("chrome://editor/skin/images/outdent.gif");
 282 }
 283 #outdentButton[disabled="true"] {
 284         list-style-image:url("chrome://editor/skin/images/outdent_dis.gif");
 285 }
 286
 287 #indentButton {
 288         list-style-image:url("chrome://editor/skin/images/indent.gif");
 289 }
 290
 291 #FormatToolbar > button,
 292 #FormatToolbar > button:hover,
 293 #FormatToolbar > button:active,
 294 #FormatToolbar > button[disabled="true"] {
 295         margin: 0px 3px 0px 0px;
 296         border: none;
 297         min-width: 23px;
 298         min-height: 23px;
 299 }
 300 #FormatToolbar > button > .button-internal-box {
 301         margin: 0px;
 302         padding: 1px;
 303         border: 1px solid transparent;
 304         -moz-box-pack: center;
 305 }
 306 #FormatToolbar > button:hover > .button-internal-box {
 307         border: 1px outset #CCD0DD;
 308 }
 309 #FormatToolbar > button:active > .button-internal-box {
 310         padding: 2px 0px 0px 2px;
 311         border: 1px inset #CCD0DD;
 312 }
 313 #FormatToolbar > button[disabled="true"] > .button-internal-box {
 314         border: 1px solid transparent;
 315 }
 316
 317 #FormatToolbar > button > .button-internal-box > .button-text-container
 318   {
 319     display               : none;
 320   }
 321
 322 #ParagraphSelect {
 323         margin-top: 2px;
 324 }
 325
 326 #AlignPopupButton {
 327         list-style-image:url("chrome://editor/skin/images/align.gif");
 328 }
 329
 330 #AlignPopupButton > .button-internal-box {
 331         border:1px solid transparent;
 332 }
 333 #AlignPopupButton:hover > .button-internal-box {
 334         border:1px outset #CCD0DD;
 335 }
 336 #AlignPopupButton:active > .button-internal-box,
 337 #AlignPopupButton[open="true"] > .button-internal-box {
 338         border:1px inset #CCD0DD;
 339 }
 340
 341 #InsertPopupButton {
 342         list-style-image:url("chrome://editor/skin/images/object-popup.gif");
 343 }
 344
 345 #text-align-left,
 346 #align-left-button
 347   {
 348           list-style-image      : url("chrome://editor/skin/images/left.gif");
 349   }
 350
 351 #text-align-left[disabled="true"],
 352 #text-align-left[disabled="true"]:hover,
 353 #text-align-left[disabled="true"]:hover:active,
 354 #align-left-button[disabled="true"],
 355 #align-left-button[disabled="true"]:hover,
 356 #align-left-button[disabled="true"]:hover:active,
 357   {
 358     list-style-image      : url("chrome://editor/skin/images/left-disabled.gif");
 359   }
 360
 361 #text-align-center,
 362 #align-center-button
 363   {
 364           list-style-image      : url("chrome://editor/skin/images/center.gif");
 365   }
 366
 367 #text-align-center[disabled="true"],
 368 #text-align-center[disabled="true"]:hover,
 369 #text-align-center[disabled="true"]:hover:active,
 370 #align-center-button[disabled="true"],
 371 #align-center-button[disabled="true"]:hover,
 372 #align-center-button[disabled="true"]:hover:active
 373   {
 374     list-style-image      : url("chrome://editor/skin/images/center-disabled.gif");
 375   }
 376
 377 #text-align-right,
 378 #align-right-button
 379   {
 380           list-style-image      : url("chrome://editor/skin/images/right.gif");
 381   }
 382
 383 #text-align-right[disabled="true"],
 384 #text-align-right[disabled="true"]:hover,
 385 #text-align-right[disabled="true"]:hover:active
 386 #align-right-button[disabled="true"],
 387 #align-right-button[disabled="true"]:hover,
 388 #align-right-button[disabled="true"]:hover:active
 389  {
 390     list-style-image      : url("chrome://editor/skin/images/right-disabled.gif");
 391   }
 392
 393 #text-align-justify, #align-justify-button
 394   {
 395           list-style-image      : url("chrome://editor/skin/images/justify.gif");
 396   }
 397
 398 #text-align-justify[disabled="true"],
 399 #text-align-justify[disabled="true"]:hover,
 400 #text-align-justify[disabled="true"]:hover:active
 401 #align-justify-button[disabled="true"],
 402 #align-justify-button[disabled="true"]:hover,
 403 #align-justify-button[disabled="true"]:hover:active
 404  {
 405     list-style-image      : url("chrome://editor/skin/images/justify-disabled.gif");
 406   }
 407
 408 .ColorPickerLabel {
 409   border:     1px inset white;
 410   margin:     0px;
 411   padding:    2px;
 412   -moz-box-pack: center;
 413 }
 414
 415 /* TODO: How to make inset color skinable? */
 416 .color-button {
 417   border: 1px inset #CCD0DD;
 418   padding: 0px;
 419   width:  19px;
 420   height: 19px;
 421   margin:  1px;
 422 }
 423
 424 .color-button:hover {
 425   border:  1px solid #666699;
 426 }
 427
 428 #TextColorPopupButton {
 429   margin: 2px 9px 9px 2px;
 430   /* TEMP: Set color here. TODO: Set color from page */
 431   background-color: #AA0000;
 432 }
 433
 434 #BackColorPopupButton {
 435   margin: 9px 2px 2px 9px;
 436   /* TEMP: Set color here. TODO: Set color from page */
 437   background-color: #FFFF00;
 438 }