EarlyBlue/editor/skin/EditorToolbars.css

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