LCARStrek/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 > .toolbar-holder {
  30   background-image: url(chrome://editor/skin/images/format-toolbar-endcap.gif);
  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 FF9F00;
  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 #9C9CFF;
  65   min-width:     1px;
  66   overflow:      hidden;
  67 }
  68
  69 /* BORDERS ARE NOT WORKING! global class="plain" is fighting us! */
  70 /* !important in for now as a workaround to above problem! */
  71 tab.edit-mode:hover, button.edit-mode:hover:active,
  72 tab.edit-mode {
  73   -moz-border-radius: 0px 0px 7px 7px ;
  74   padding: 0px 4px 1px 4px;
  75   margin: 0px;
  76   border-top: 0px solid black !important; /* Must be same as background */
  77   border-bottom: 1px solid #9C9CFF !important;
  78   border-left: 1px solid #9C9CFF !important;
  79   border-right: 1px solid #9C9CFF !important;
  80 }
  81
  82 tab.edit-mode > .button-internal-box,
  83 tab.edit-mode:hover > .button-internal-box,
  84 tab.edit-mode:hover:active > .button-internal-box  {
  85   border: none;
  86 }
  87
  88 tab.edit-mode:hover {
  89 /*  border:  1px solid #3366FF !important; */
  90 }
  91
  92 tab.edit-mode:hover:active {
  93   padding: 1px 5px 0px 3px;
  94 /*  border:  1px solid #99CCFF !important; */
  95 }
  96
  97 /* selected="1" is from old times when edit-mode was a <button> - still left in xul */
  98
  99 tab.edit-mode[selected="1"],
 100 tab.edit-mode[selected="true"] {
 101   padding: 0px 4px 1px 4px;
 102   margin: -1px 0px 0px 0px;
 103 /* Not resizing well! - use color instead
 104   font-weight: bold;
 105 */
 106   background-color: #008484;
 107   color: #000000;
 108 }
 109
 110 tab.edit-mode[selected="1"]:active,
 111 tab.edit-mode[selected="1"]:hover:active,
 112 tab.edit-mode[selected="true"]:active,
 113 tab.edit-mode[selected="true"]:hover:active {
 114   padding: 1px 5px 0px 3px;
 115 }
 116
 117 #NormalModeButton[type="image"] {
 118   list-style-image:url(chrome://editor/skin/images/editmode-normal.gif);
 119 }
 120
 121 #TagModeButton[type="image"] {
 122   list-style-image:url(chrome://editor/skin/images/editmode-tags.gif);
 123 }
 124
 125 #SourceModeButton[type="image"] {
 126   list-style-image:url(chrome://editor/skin/images/editmode-html.gif);
 127 }
 128
 129 #PreviewModeButton[type="image"] {
 130   list-style-image:url(chrome://editor/skin/images/editmode-preview.gif);
 131 }
 132
 133 #ToggleEditModeType {
 134   list-style-image:url(chrome://editor/skin/images/editmode-toggle.gif);
 135   border: 1px outset #CCCCDD;
 136 }
 137
 138 #ToggleEditModeType:hover {
 139   border: 1px solid #99CCFF;
 140 }
 141
 142 #ToggleEditModeType:hover:active {
 143   border: 1px inset #99CCFF;
 144 }
 145
 146 /* Image URLs for all Editor toolbar buttons */
 147
 148 #boldButton {
 149   list-style-image:url(chrome://editor/skin/images/bold.gif);
 150 }
 151
 152 #boldButton:hover {
 153   list-style-image:url(chrome://editor/skin/images/bold-hover.gif);
 154 }
 155
 156 #italicButton {
 157   list-style-image:url(chrome://editor/skin/images/italic.gif);
 158 }
 159
 160 #italicButton:hover {
 161   list-style-image:url(chrome://editor/skin/images/italic-hover.gif);
 162 }
 163
 164 #underlineButton {
 165   list-style-image:url(chrome://editor/skin/images/underline.gif);
 166 }
 167
 168 #underlineButton:hover {
 169   list-style-image:url(chrome://editor/skin/images/underline-hover.gif);
 170 }
 171
 172 #newButton {
 173         list-style-image:url("chrome://editor/skin/images/newfile.gif");
 174 }
 175
 176 #newButton:hover {
 177         list-style-image:url("chrome://editor/skin/images/newfile-hover.gif");
 178 }
 179
 180 #newButton[disabled="true"] {
 181         list-style-image:url("chrome://editor/skin/images/newfile_dis.gif");
 182 }
 183
 184 #openButton {
 185         list-style-image:url("chrome://editor/skin/images/openfile.gif");
 186 }
 187
 188 #openButton:hover {
 189         list-style-image:url("chrome://editor/skin/images/openfile-hover.gif");
 190 }
 191
 192 #openButton[disabled="true"] {
 193         list-style-image:url("chrome://editor/skin/images/openfile_dis.gif");
 194 }
 195
 196 #saveButton {
 197         list-style-image:url("chrome://editor/skin/images/savefile.gif");
 198 }
 199
 200 #saveButton:hover {
 201         list-style-image:url("chrome://editor/skin/images/savefile-hover.gif");
 202 }
 203
 204 #saveButton[disabled="true"] {
 205         list-style-image:url("chrome://editor/skin/images/savefile_dis.gif");
 206 }
 207
 208 #saveButton[dirty="true"] {
 209   list-style-image:url(chrome://editor/skin/images/savemod.gif);
 210 }
 211
 212 #saveButton[dirty="true"]:hover {
 213   list-style-image:url(chrome://editor/skin/images/savemod-hover.gif);
 214 }
 215
 216 #publishButton {
 217         list-style-image:url("chrome://editor/skin/images/publish.gif");
 218 }
 219
 220 #previewButton {
 221         list-style-image:url("chrome://editor/skin/images/preview.gif");
 222 }
 223
 224 #previewButton:hover {
 225         list-style-image:url("chrome://editor/skin/images/preview-hover.gif");
 226 }
 227
 228 #previewButton[disabled="true"] {
 229         list-style-image:url("chrome://editor/skin/images/preview_dis.gif");
 230 }
 231
 232 #printButton {
 233         list-style-image:url("chrome://editor/skin/images/print.gif");
 234 }
 235
 236 #printButton:hover,
 237 #printButton > .menubutton-internal-box > button:hover {
 238         list-style-image:url("chrome://editor/skin/images/print-hover.gif");
 239 }
 240
 241 #printButton[disabled="true"],
 242 #printButton[disabled="true"]:hover,
 243 #printButton[disabled="true"] > .menubutton-internal-box > button:hover {
 244         list-style-image:url("chrome://editor/skin/images/print_dis.gif");
 245 }
 246
 247 #findButton {
 248         list-style-image:url("chrome://editor/skin/images/find.gif");
 249 }
 250
 251 #findButton[disabled="true"] {
 252         list-style-image:url("chrome://editor/skin/images/find_dis.gif");
 253 }
 254
 255 #linkButton {
 256         list-style-image:url("chrome://editor/skin/images/link.gif");
 257 }
 258
 259 #linkButton:hover {
 260         list-style-image:url("chrome://editor/skin/images/link-hover.gif");
 261 }
 262
 263 #linkButton[disabled="true"] {
 264         list-style-image:url("chrome://editor/skin/images/link_dis.gif");
 265 }
 266
 267 #imageButton {
 268         list-style-image:url("chrome://editor/skin/images/image.gif");
 269 }
 270
 271 #imageButton:hover {
 272         list-style-image:url("chrome://editor/skin/images/image-hover.gif");
 273 }
 274
 275 #imageButton[disabled="true"] {
 276         list-style-image:url("chrome://editor/skin/images/image_dis.gif");
 277 }
 278
 279 #namedAnchorButton {
 280         list-style-image:url("chrome://editor/skin/images/anchor.gif");
 281 }
 282
 283 #namedAnchorButton:hover {
 284         list-style-image:url("chrome://editor/skin/images/anchor-hover.gif");
 285 }
 286
 287 #namedAnchorButton[disabled="true"] {
 288         list-style-image:url("chrome://editor/skin/images/anchor_dis.gif");
 289 }
 290
 291 #hlineButton {
 292         list-style-image:url("chrome://editor/skin/images/hline.gif");
 293 }
 294
 295 #hlineButton:hover {
 296         list-style-image:url("chrome://editor/skin/images/hline-hover.gif");
 297 }
 298
 299 #hlineButton[disabled="true"] {
 300         list-style-image:url("chrome://editor/skin/images/hline_dis.gif");
 301 }
 302
 303 #tableButton {
 304         list-style-image:url("chrome://editor/skin/images/table.gif");
 305 }
 306
 307 #tableButton:hover {
 308         list-style-image:url("chrome://editor/skin/images/table-hover.gif");
 309 }
 310
 311 #tableButton[disabled="true"] {
 312         list-style-image:url("chrome://editor/skin/images/table_dis.gif");
 313 }
 314
 315 #linkButton-dark {
 316         list-style-image:url("chrome://editor/skin/images/link.gif");
 317 }
 318 #imageButton-dark {
 319         list-style-image:url("chrome://editor/skin/images/image.gif");
 320 }
 321 #namedAnchorButton-dark {
 322         list-style-image:url("chrome://editor/skin/images/anchor.gif");
 323 }
 324 #hlineButton-dark {
 325         list-style-image:url("chrome://editor/skin/images/hline.gif");
 326 }
 327 #tableButton-dark {
 328         list-style-image:url("chrome://editor/skin/images/table.gif");
 329 }
 330 #spellingButton {
 331         list-style-image:url("chrome://editor/skin/images/spell.gif");
 332 }
 333
 334 #DecreaseFontSizeButton {
 335         list-style-image:url("chrome://editor/skin/images/dec-font-size.gif");
 336 }
 337
 338 #DecreaseFontSizeButton:hover {
 339         list-style-image:url("chrome://editor/skin/images/dec-font-size-hover.gif");
 340 }
 341
 342 #IncreaseFontSizeButton {
 343         list-style-image:url("chrome://editor/skin/images/inc-font-size.gif");
 344 }
 345
 346 #IncreaseFontSizeButton:hover {
 347         list-style-image:url("chrome://editor/skin/images/inc-font-size-hover.gif");
 348 }
 349
 350 #ulButton {
 351         list-style-image:url("chrome://editor/skin/images/bullets.gif");
 352 }
 353
 354 #ulButton:hover {
 355         list-style-image:url("chrome://editor/skin/images/bullets-hover.gif");
 356 }
 357
 358 #olButton {
 359         list-style-image:url("chrome://editor/skin/images/numbers.gif");
 360 }
 361
 362 #olButton:hover {
 363         list-style-image:url("chrome://editor/skin/images/numbers-hover.gif");
 364 }
 365
 366 #outdentButton {
 367         list-style-image:url("chrome://editor/skin/images/outdent.gif");
 368 }
 369
 370 #outdentButton:hover {
 371         list-style-image:url("chrome://editor/skin/images/outdent-hover.gif");
 372 }
 373
 374 #outdentButton[disabled="true"] {
 375         list-style-image:url("chrome://editor/skin/images/outdent_dis.gif");
 376 }
 377
 378 #indentButton {
 379         list-style-image:url("chrome://editor/skin/images/indent.gif");
 380 }
 381
 382 #indentButton:hover {
 383         list-style-image:url("chrome://editor/skin/images/indent-hover.gif");
 384 }
 385
 386 #FormatToolbar > button,
 387 #FormatToolbar > button:hover,
 388 #FormatToolbar > button:active,
 389 #FormatToolbar > button[disabled="true"] {
 390         min-width: 23px;
 391         min-height: 23px;
 392 }
 393
 394 #FormatToolbar > button > .button-internal-box {
 395         margin: 0px;
 396         padding: 1px;
 397         text-align: center;
 398 }
 399
 400 #FormatToolbar > button:active > .button-internal-box {
 401         padding: 2px 0px 0px 2px;
 402 }
 403
 404 #FormatToolbar > button > .button-internal-box > .button-text-container
 405   {
 406     display               : none;
 407   }
 408
 409 #ParagraphSelect {
 410         margin-top: 2px;
 411 }
 412
 413 #AlignPopupButton {
 414         list-style-image:url("chrome://editor/skin/images/align.gif");
 415 }
 416
 417 #AlignPopupButton:hover {
 418         list-style-image:url("chrome://editor/skin/images/align-hover.gif");
 419 }
 420
 421 #AlignPopupButton > .button-internal-box {
 422         border:1px solid transparent;
 423 }
 424 #AlignPopupButton:hover > .button-internal-box {
 425         border:1px outset #CCCCDD;
 426 }
 427 #AlignPopupButton:active > .button-internal-box,
 428 #AlignPopupButton[open="true"] > .button-internal-box {
 429         border:1px inset #CCCCDD;
 430 }
 431
 432 #InsertPopupButton {
 433         list-style-image:url("chrome://editor/skin/images/object-popup.gif");
 434 }
 435
 436 #text-align-left,
 437 #align-left-button
 438   {
 439           list-style-image      : url("chrome://editor/skin/images/left.gif");
 440   }
 441
 442 #text-align-left:hover,
 443 #align-left-button:hover
 444   {
 445           list-style-image      : url("chrome://editor/skin/images/left-hover.gif");
 446   }
 447
 448 #text-align-left[disabled="true"],
 449 #text-align-left[disabled="true"]:hover,
 450 #text-align-left[disabled="true"]:hover:active,
 451 #align-left-button[disabled="true"],
 452 #align-left-button[disabled="true"]:hover,
 453 #align-left-button[disabled="true"]:hover:active,
 454   {
 455     list-style-image      : url("chrome://editor/skin/images/left-disabled.gif");
 456   }
 457
 458 #text-align-center,
 459 #align-center-button
 460   {
 461           list-style-image      : url("chrome://editor/skin/images/center.gif");
 462   }
 463
 464 #text-align-center:hover,
 465 #align-center-button:hover
 466   {
 467           list-style-image      : url("chrome://editor/skin/images/center-hover.gif");
 468   }
 469
 470 #text-align-center[disabled="true"],
 471 #text-align-center[disabled="true"]:hover,
 472 #text-align-center[disabled="true"]:hover:active,
 473 #align-center-button[disabled="true"],
 474 #align-center-button[disabled="true"]:hover,
 475 #align-center-button[disabled="true"]:hover:active
 476   {
 477     list-style-image      : url("chrome://editor/skin/images/center-disabled.gif");
 478   }
 479
 480 #text-align-right,
 481 #align-right-button
 482   {
 483           list-style-image      : url("chrome://editor/skin/images/right.gif");
 484   }
 485
 486 #text-align-right:hover,
 487 #align-right-button:hover
 488   {
 489           list-style-image      : url("chrome://editor/skin/images/right-hover.gif");
 490   }
 491
 492 #text-align-right[disabled="true"],
 493 #text-align-right[disabled="true"]:hover,
 494 #text-align-right[disabled="true"]:hover:active
 495 #align-right-button[disabled="true"],
 496 #align-right-button[disabled="true"]:hover,
 497 #align-right-button[disabled="true"]:hover:active
 498  {
 499     list-style-image      : url("chrome://editor/skin/images/right-disabled.gif");
 500   }
 501
 502 #text-align-justify,
 503 #align-justify-button
 504   {
 505           list-style-image      : url("chrome://editor/skin/images/justify.gif");
 506   }
 507
 508 #text-align-justify:hover,
 509 #align-justify-button:hover
 510   {
 511           list-style-image      : url("chrome://editor/skin/images/justify-hover.gif");
 512   }
 513
 514 #text-align-justify[disabled="true"],
 515 #text-align-justify[disabled="true"]:hover,
 516 #text-align-justify[disabled="true"]:hover:active
 517 #align-justify-button[disabled="true"],
 518 #align-justify-button[disabled="true"]:hover,
 519 #align-justify-button[disabled="true"]:hover:active
 520  {
 521     list-style-image      : url("chrome://editor/skin/images/justify-disabled.gif");
 522   }
 523
 524 .ColorPickerLabel {
 525   border:     1px inset white;
 526   margin:     0px;
 527   padding:    2px;
 528   text-align: center;
 529 }
 530
 531 /* TODO: How to make inset color skinable? */
 532 .color-button {
 533   border: 1px inset #FF9F00;
 534   padding: 0px;
 535   width:  15px;
 536   height: 15px;
 537   margin:  1px;
 538 }
 539
 540 .color-button:hover {
 541   border:  1px solid #FFCF00;
 542 }
 543
 544 #ColorButtons {
 545   margin-right: 5px;
 546 }
 547
 548 #TextColorButton {
 549   margin: 1px 7px 7px 1px;
 550   /* TEMP: Set color here. TODO: Set color from page */
 551   background-color: #AA0000;
 552 }
 553
 554 #BackgroundColorButton {
 555   margin: 7px 1px 1px 7px;
 556   /* TEMP: Set color here. TODO: Set color from page */
 557   background-color: #FFFF00;
 558 }
 559
 560