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   {
 234     list-style-image      : url("chrome://global/skin/print.gif");
 235   }
 236
 237 #printButton:hover,
 238 #printButton:hover:active,
 239 #printButton[buttonover="true"],
 240 #printButton[open="true"]
 241   {
 242     list-style-image      : url("chrome://global/skin/print-hover.gif");
 243   }
 244
 245 #printButton[disabled="true"],
 246 #printButton[disabled="true"]:hover,
 247 #printButton[disabled="true"]:hover:active,
 248 #printButton[disabled="true"][buttonover="true"]
 249   {
 250     list-style-image      : url("chrome://global/skin/print_dis.gif");
 251   }
 252
 253 #findButton {
 254         list-style-image:url("chrome://editor/skin/images/find.gif");
 255 }
 256
 257 #findButton[disabled="true"] {
 258         list-style-image:url("chrome://editor/skin/images/find_dis.gif");
 259 }
 260
 261 #linkButton {
 262         list-style-image:url("chrome://editor/skin/images/link.gif");
 263 }
 264
 265 #linkButton:hover {
 266         list-style-image:url("chrome://editor/skin/images/link-hover.gif");
 267 }
 268
 269 #linkButton[disabled="true"] {
 270         list-style-image:url("chrome://editor/skin/images/link_dis.gif");
 271 }
 272
 273 #imageButton {
 274         list-style-image:url("chrome://editor/skin/images/image.gif");
 275 }
 276
 277 #imageButton:hover {
 278         list-style-image:url("chrome://editor/skin/images/image-hover.gif");
 279 }
 280
 281 #imageButton[disabled="true"] {
 282         list-style-image:url("chrome://editor/skin/images/image_dis.gif");
 283 }
 284
 285 #namedAnchorButton {
 286         list-style-image:url("chrome://editor/skin/images/anchor.gif");
 287 }
 288
 289 #namedAnchorButton:hover {
 290         list-style-image:url("chrome://editor/skin/images/anchor-hover.gif");
 291 }
 292
 293 #namedAnchorButton[disabled="true"] {
 294         list-style-image:url("chrome://editor/skin/images/anchor_dis.gif");
 295 }
 296
 297 #hlineButton {
 298         list-style-image:url("chrome://editor/skin/images/hline.gif");
 299 }
 300
 301 #hlineButton:hover {
 302         list-style-image:url("chrome://editor/skin/images/hline-hover.gif");
 303 }
 304
 305 #hlineButton[disabled="true"] {
 306         list-style-image:url("chrome://editor/skin/images/hline_dis.gif");
 307 }
 308
 309 #tableButton {
 310         list-style-image:url("chrome://editor/skin/images/table.gif");
 311 }
 312
 313 #tableButton:hover {
 314         list-style-image:url("chrome://editor/skin/images/table-hover.gif");
 315 }
 316
 317 #tableButton[disabled="true"] {
 318         list-style-image:url("chrome://editor/skin/images/table_dis.gif");
 319 }
 320
 321 #linkButton-dark {
 322         list-style-image:url("chrome://editor/skin/images/link.gif");
 323 }
 324 #imageButton-dark {
 325         list-style-image:url("chrome://editor/skin/images/image.gif");
 326 }
 327 #namedAnchorButton-dark {
 328         list-style-image:url("chrome://editor/skin/images/anchor.gif");
 329 }
 330 #hlineButton-dark {
 331         list-style-image:url("chrome://editor/skin/images/hline.gif");
 332 }
 333 #tableButton-dark {
 334         list-style-image:url("chrome://editor/skin/images/table.gif");
 335 }
 336 #spellingButton {
 337         list-style-image:url("chrome://editor/skin/images/spell.gif");
 338 }
 339
 340 #DecreaseFontSizeButton {
 341         list-style-image:url("chrome://editor/skin/images/dec-font-size.gif");
 342 }
 343
 344 #DecreaseFontSizeButton:hover {
 345         list-style-image:url("chrome://editor/skin/images/dec-font-size-hover.gif");
 346 }
 347
 348 #IncreaseFontSizeButton {
 349         list-style-image:url("chrome://editor/skin/images/inc-font-size.gif");
 350 }
 351
 352 #IncreaseFontSizeButton:hover {
 353         list-style-image:url("chrome://editor/skin/images/inc-font-size-hover.gif");
 354 }
 355
 356 #ulButton {
 357         list-style-image:url("chrome://editor/skin/images/bullets.gif");
 358 }
 359
 360 #ulButton:hover {
 361         list-style-image:url("chrome://editor/skin/images/bullets-hover.gif");
 362 }
 363
 364 #olButton {
 365         list-style-image:url("chrome://editor/skin/images/numbers.gif");
 366 }
 367
 368 #olButton:hover {
 369         list-style-image:url("chrome://editor/skin/images/numbers-hover.gif");
 370 }
 371
 372 #outdentButton {
 373         list-style-image:url("chrome://editor/skin/images/outdent.gif");
 374 }
 375
 376 #outdentButton:hover {
 377         list-style-image:url("chrome://editor/skin/images/outdent-hover.gif");
 378 }
 379
 380 #outdentButton[disabled="true"] {
 381         list-style-image:url("chrome://editor/skin/images/outdent_dis.gif");
 382 }
 383
 384 #indentButton {
 385         list-style-image:url("chrome://editor/skin/images/indent.gif");
 386 }
 387
 388 #indentButton:hover {
 389         list-style-image:url("chrome://editor/skin/images/indent-hover.gif");
 390 }
 391
 392 #FormatToolbar > button,
 393 #FormatToolbar > button:hover,
 394 #FormatToolbar > button:active,
 395 #FormatToolbar > button[disabled="true"] {
 396         min-width: 23px;
 397         min-height: 23px;
 398 }
 399
 400 #FormatToolbar > button > .button-internal-box {
 401         margin: 0px;
 402         padding: 1px;
 403         -moz-box-pack: center;
 404 }
 405
 406 #FormatToolbar > button:active > .button-internal-box {
 407         padding: 2px 0px 0px 2px;
 408 }
 409
 410 #FormatToolbar > button > .button-internal-box > .button-text-container
 411   {
 412     display               : none;
 413   }
 414
 415 #ParagraphSelect {
 416         margin-top: 2px;
 417 }
 418
 419 #AlignPopupButton {
 420         list-style-image:url("chrome://editor/skin/images/align.gif");
 421 }
 422
 423 #AlignPopupButton:hover {
 424         list-style-image:url("chrome://editor/skin/images/align-hover.gif");
 425 }
 426
 427 #AlignPopupButton > .button-internal-box {
 428         border:1px solid transparent;
 429 }
 430 #AlignPopupButton:hover > .button-internal-box {
 431         border:1px outset #CCCCDD;
 432 }
 433 #AlignPopupButton:active > .button-internal-box,
 434 #AlignPopupButton[open="true"] > .button-internal-box {
 435         border:1px inset #CCCCDD;
 436 }
 437
 438 #InsertPopupButton {
 439         list-style-image:url("chrome://editor/skin/images/object-popup.gif");
 440 }
 441
 442 #text-align-left,
 443 #align-left-button
 444   {
 445           list-style-image      : url("chrome://editor/skin/images/left.gif");
 446   }
 447
 448 #text-align-left:hover,
 449 #align-left-button:hover
 450   {
 451           list-style-image      : url("chrome://editor/skin/images/left-hover.gif");
 452   }
 453
 454 #text-align-left[disabled="true"],
 455 #text-align-left[disabled="true"]:hover,
 456 #text-align-left[disabled="true"]:hover:active,
 457 #align-left-button[disabled="true"],
 458 #align-left-button[disabled="true"]:hover,
 459 #align-left-button[disabled="true"]:hover:active,
 460   {
 461     list-style-image      : url("chrome://editor/skin/images/left-disabled.gif");
 462   }
 463
 464 #text-align-center,
 465 #align-center-button
 466   {
 467           list-style-image      : url("chrome://editor/skin/images/center.gif");
 468   }
 469
 470 #text-align-center:hover,
 471 #align-center-button:hover
 472   {
 473           list-style-image      : url("chrome://editor/skin/images/center-hover.gif");
 474   }
 475
 476 #text-align-center[disabled="true"],
 477 #text-align-center[disabled="true"]:hover,
 478 #text-align-center[disabled="true"]:hover:active,
 479 #align-center-button[disabled="true"],
 480 #align-center-button[disabled="true"]:hover,
 481 #align-center-button[disabled="true"]:hover:active
 482   {
 483     list-style-image      : url("chrome://editor/skin/images/center-disabled.gif");
 484   }
 485
 486 #text-align-right,
 487 #align-right-button
 488   {
 489           list-style-image      : url("chrome://editor/skin/images/right.gif");
 490   }
 491
 492 #text-align-right:hover,
 493 #align-right-button:hover
 494   {
 495           list-style-image      : url("chrome://editor/skin/images/right-hover.gif");
 496   }
 497
 498 #text-align-right[disabled="true"],
 499 #text-align-right[disabled="true"]:hover,
 500 #text-align-right[disabled="true"]:hover:active
 501 #align-right-button[disabled="true"],
 502 #align-right-button[disabled="true"]:hover,
 503 #align-right-button[disabled="true"]:hover:active
 504  {
 505     list-style-image      : url("chrome://editor/skin/images/right-disabled.gif");
 506   }
 507
 508 #text-align-justify,
 509 #align-justify-button
 510   {
 511           list-style-image      : url("chrome://editor/skin/images/justify.gif");
 512   }
 513
 514 #text-align-justify:hover,
 515 #align-justify-button:hover
 516   {
 517           list-style-image      : url("chrome://editor/skin/images/justify-hover.gif");
 518   }
 519
 520 #text-align-justify[disabled="true"],
 521 #text-align-justify[disabled="true"]:hover,
 522 #text-align-justify[disabled="true"]:hover:active
 523 #align-justify-button[disabled="true"],
 524 #align-justify-button[disabled="true"]:hover,
 525 #align-justify-button[disabled="true"]:hover:active
 526  {
 527     list-style-image      : url("chrome://editor/skin/images/justify-disabled.gif");
 528   }
 529
 530 .ColorPickerLabel {
 531   border:     1px inset white;
 532   margin:     0px;
 533   padding:    2px;
 534   -moz-box-pack: center;
 535 }
 536
 537 /* TODO: How to make inset color skinable? */
 538 .color-button {
 539   border: 1px inset #FF9F00;
 540   padding: 0px;
 541   width:  15px;
 542   height: 15px;
 543   margin:  1px;
 544 }
 545
 546 .color-button:hover {
 547   border:  1px solid #FFCF00;
 548 }
 549
 550 #ColorButtons {
 551   margin-right: 5px;
 552 }
 553
 554 #TextColorButton {
 555   margin: 1px 7px 7px 1px;
 556   /* TEMP: Set color here. TODO: Set color from page */
 557   background-color: #AA0000;
 558 }
 559
 560 #BackgroundColorButton {
 561   margin: 7px 1px 1px 7px;
 562   /* TEMP: Set color here. TODO: Set color from page */
 563   background-color: #FFFF00;
 564 }
 565
 566
 567
 568