lib/yui/editor/assets/editor-core.css

   1 /*
   2 Copyright (c) 2007, Yahoo! Inc. All rights reserved.
   3 Code licensed under the BSD License:
   4 http://developer.yahoo.net/yui/license.txt
   5 version: 2.3.0
   6 */
   7 /* Setup the container with some padding and zoom it for IE's hasLayout */
   8 .yui-toolbar-container .yui-toolbar-subcont {
   9     padding: .25em 0;
  10     zoom: 1;
  11 }
  12 /* Setup the :after so that compliant browsers don't loose the bounding box */
  13 .yui-toolbar-container .yui-toolbar-subcont:after { display: block; clear: both; visibility: hidden; content: '.'; height: 0;}
  14
  15 /* Drag handle for the toolbar's draggable property */
  16 .yui-toolbar-container span.yui-toolbar-draghandle {
  17     cursor: move;
  18     border-left: 1px solid #999;
  19     border-right: 1px solid #999;
  20     overflow: hidden;
  21     text-indent: 77777px;
  22     width: 2px;
  23     height: 20px;
  24     display: block;
  25     clear: none;
  26     float: left;
  27     margin: 0 0 0 .2em;
  28 }
  29 /* If the titlebar is draggable, the set the cursor */
  30 .yui-toolbar-container .yui-toolbar-titlebar.draggable {
  31     cursor: move;
  32 }
  33 /* Set the titlebar to relative so we can position the collapse button */
  34 .yui-toolbar-container .yui-toolbar-titlebar {
  35     position: relative;
  36 }
  37 /* Toolbar's titlebar styles */
  38 .yui-toolbar-container .yui-toolbar-titlebar h2 {
  39     font-weight: bold;
  40     border: none;
  41     color: #000;
  42     margin: 0;
  43     padding: .2em;
  44 }
  45 /* If the toolbar is grouped the draghandle needs to be bigger */
  46 .yui-toolbar-container.yui-toolbar-grouped span.yui-toolbar-draghandle {
  47     height: 40px;
  48 }
  49
  50 /* Float the groups so they position nicely and zoom them for IE */
  51 .yui-toolbar-container .yui-toolbar-group {
  52     float: left;
  53     zoom: 1;
  54 }
  55 /* Setup the :after so that compliant browsers don't loose the bounding box */
  56 .yui-toolbar-container .yui-toolbar-group:after { display: block; clear: both; visibility: hidden; content: '.'; height: 0;}
  57 /* Grouped title styles */
  58 .yui-toolbar-container .yui-toolbar-group h3 {
  59     font-size: 75%;
  60     color: #999;
  61     padding-left: .25em;
  62 }
  63 /* Style the separators with a left border */
  64 .yui-toolbar-container span.yui-toolbar-separator {
  65     border-left: 1px solid #999;
  66     overflow: hidden;
  67     text-indent: 77777px;
  68     width: 2px;
  69     height: 18px;
  70     margin: .2em 0 .2em .1em;
  71     display: block;
  72     clear: none;
  73     float: left;
  74 }
  75 /* Set the height of a grouped separator to a little bit bigger */
  76 .yui-toolbar-container.yui-toolbar-grouped span.yui-toolbar-separator {
  77     height: 35px;
  78 }
  79
  80 /* Reset the height of a separator inside of a group */
  81 .yui-toolbar-container.yui-toolbar-grouped .yui-toolbar-group span.yui-toolbar-separator {
  82     height: 18px;
  83 }
  84
  85 /* Kill the default styles of the list */
  86 .yui-toolbar-container ul li {
  87     margin: 0;
  88     float: left;
  89 }
  90
  91 /* Setup the default style of a button in the toolbar */
  92 .yui-toolbar-container .yui-button {
  93     border: 1px solid #999999;
  94     background: none;
  95     padding: 0;
  96     cursor: pointer;
  97     height: 20px;
  98     width: 30px;
  99     overflow: hidden;
 100     display: block;
 101     float: left;
 102     margin: 0 1px;
 103     position: relative;
 104     filter: none; /* UNDO Button filter..*/
 105 }
 106
 107 /* setup the default style of the A inside of the toolbar button */
 108 .yui-toolbar-container .yui-button .first-child, .yui-toolbar-container .yui-button .first-child a {
 109     margin: 0;
 110     border: 0;
 111     display: block;
 112     text-indent: 50px !important; /* IE Fix */
 113     width: 200px;
 114     overflow:hidden;
 115 }
 116
 117 /* Setup the disabled state of a button */
 118 .yui-toolbar-container .yui-button-disabled {
 119     opacity: .5;
 120     filter: alpha(opacity=50);
 121     cursor: default;
 122 }
 123 /* remove any padding from the A */
 124 .yui-toolbar-container .yui-button a {
 125     padding: 0;
 126 }
 127 /* Fix a style inherited from the Button widget for IE */
 128 .yui-toolbar-container .yui-button.ie6.hover {
 129     background-color: #98D5FC !important;
 130 }
 131
 132 /* Select Button Emulation */
 133 .yui-toolbar-container .yui-toolbar-select {
 134     height: 20px;
 135     width: auto;
 136 }
 137
 138 /* Override the default Button style for select menu*/
 139 .yui-toolbar-container .yui-toolbar-select a {
 140     border: none;
 141     background-color: transparent;
 142     height: 19px;
 143     width: 100%;
 144     text-align: left;
 145     cursor: pointer;
 146     opacity: 1;
 147     filter: none;
 148 }
 149 /* Fix IE */
 150 .yui-toolbar-container .yui-toolbar-select .first-child {
 151     width: 100% !important; /* For IE */
 152 }
 153 /* Reset the text-indent because we want to see the text of a select menu */
 154 .yui-toolbar-container .yui-toolbar-select .first-child a {
 155     text-indent: 3px !important;
 156     width: 100% !important; /* For IE */
 157 }
 158
 159 /* Fix styles inherited from Button  */
 160 .yui-toolbar-container .yui-toolbar-select.yui-button-disabled a {
 161     cursor: default;
 162     opacity: 1;
 163     filter: none;
 164     display: block;
 165 }
 166
 167
 168 /* Font Family Drop Down */
 169 .yui-toolbar-container .yui-toolbar-fontname {
 170     width: 125px;
 171 }
 172
 173 /* Header Drop Down */
 174 .yui-toolbar-container .yui-toolbar-heading {
 175     width: 80px;
 176 }
 177
 178 /* Font Family Menu Style - This styles the menu items and the selected menu item */
 179 .yui-toolbar-fontname-arial { font-family: Arial; }
 180 .yui-toolbar-fontname-arial-black { font-family: Arial Black; }
 181 .yui-toolbar-fontname-comic-sans-ms { font-family: Comic Sans MS; }
 182 .yui-toolbar-fontname-courier-new { font-family: Courier New; }
 183 .yui-toolbar-fontname-times-new-roman { font-family: Times New Roman; }
 184 .yui-toolbar-fontname-verdana { font-family: Verdana; }
 185 .yui-toolbar-fontname-impact { font-family: Impact; }
 186 .yui-toolbar-fontname-lucida-console { font-family: Lucida Console; }
 187 .yui-toolbar-fontname-tahoma { font-family: Tahoma; }
 188 .yui-toolbar-fontname-trebuchet-ms { font-family: Trebuchet MS; }
 189
 190 /* Put a fake border around buttons that have focus */
 191 .yui-toolbar-container .yui-push-button-focus {
 192     border: 1px dotted #999;
 193 }
 194
 195 /* Spin Button */
 196 .yui-toolbar-container .yui-toolbar-spinbutton {
 197     position: relative;
 198     width: 35px;
 199 }
 200
 201 /* Set a default width */
 202 .yui-toolbar-container .yui-toolbar-spinbutton .first-child {
 203     width: 35px;
 204 }
 205 /* Setup the default style for the A */
 206 .yui-toolbar-container .yui-toolbar-spinbutton .first-child a {
 207     border: none;
 208     background-color: transparent;
 209     background-image: none;
 210     background-repeat: no-repeat;
 211     width: 28px;
 212     height: 20px;
 213     text-align: left;
 214     text-indent: 2px !important;
 215     z-index: 0;
 216     opacity: 1;
 217     filter: none;
 218 }
 219
 220 /* Setup the position and style for the up and down arrows */
 221 .yui-toolbar-container .yui-toolbar-spinbutton.yui-button a.up, .yui-toolbar-container .yui-toolbar-spinbutton.yui-button a.down {
 222     position: absolute;
 223     display: block
 224     right: 0;
 225     cursor: pointer;
 226     text-indent: 999px;
 227     overflow: hidden;
 228     z-index: 1;
 229     border: none;
 230 }
 231 /* Position all panels/overlays as absolute by default */
 232 .yui-toolbar-container .yui-overlay {
 233     position: absolute;
 234 }
 235 /* Smash the default style for lists */
 236 .yui-toolbar-container .yui-overlay ul li {
 237     float: none;
 238 }
 239
 240 /* Setup the default look of a color menu and Zoom it for IE */
 241 .yui-toolbar-colors {
 242     width: 133px;
 243     zoom: 1;
 244     display: none;
 245     z-index: 100;
 246     overflow: hidden;
 247 }
 248
 249 /* Setup the :after so that compliant browsers don't loose the bounding box */
 250 .yui-toolbar-colors:after { display: block; clear: both; visibility: hidden; content: '.'; height: 0;}
 251 /* Style all of the A's so the float properly */
 252 .yui-toolbar-colors a {
 253     height: 9px;
 254     width: 9px;
 255     float: left;
 256     display: block;
 257     overflow: hidden;
 258     text-indent: 999px;
 259     margin: 0;
 260     cursor: pointer;
 261     border: 1px solid #F6F7EE;
 262 }
 263 /* Put a little border around one that is hovered over */
 264 .yui-toolbar-colors a:hover {
 265     border: 1px solid black;
 266 }
 267
 268 /* Smash the inhertited Menu style */
 269 .yui-color-button-menu {
 270     overflow: hidden;
 271     background-color: transparent;
 272 }
 273
 274 /* This is the preview box at the bottom of the menu - Zoom it for IE */
 275 .yui-toolbar-colors span {
 276     position: relative;
 277     display: block;
 278     padding: 3px;
 279     overflow: hidden;
 280     float: left;
 281     width: 100%;
 282     zoom: 1;
 283 }
 284 /* Setup the :after so that compliant browsers don't loose the bounding box */
 285 .yui-toolbar-colors span:after { display: block; clear: both; visibility: hidden; content: '.'; height: 0;}
 286
 287 /* This is the box with the color preview in it */
 288 .yui-toolbar-colors span em {
 289     height: 35px;
 290     width: 30px;
 291     float: left;
 292     display: block;
 293     overflow: hidden;
 294     text-indent: 999px;
 295     margin: 0.75px;
 296     border: 1px solid black;
 297 }
 298
 299 /* The container for the name and hex code */
 300 .yui-toolbar-colors span strong {
 301     font-weight: normal;
 302     padding-left: 3px;
 303     display: block;
 304     font-size: 85%;
 305     float: left;
 306     width: 65%;
 307 }
 308
 309 /* Reset the z-index of the toolbar container so that menu's appear over the iframe in IE and Safari */
 310 .yui-toolbar-container {
 311     z-index: 1;
 312 }
 313
 314 /* The div around the iFrame */
 315 .yui-editor-container .yui-editor-editable-container {
 316     position: relative;
 317     z-index: 0;
 318 }
 319 /* The disbled state of the Editor */
 320 .yui-editor-container .yui-editor-masked {
 321     background-color: #CCC;
 322 }
 323 /* Style the eidtable iframe to hide it */
 324 .yui-editor-container iframe {
 325     border: 0px;
 326     padding: 0;
 327     margin: 0;
 328 }
 329 /* Reset some padding on the editable iframes container */
 330 .yui-editor-container .yui-editor-editable {
 331     padding: 0;
 332     margin: 0;
 333 }
 334 /* Style the dom path box at the bottom of the editor */
 335 .yui-editor-container .dompath {
 336     height: 1em;
 337     padding:0.25em;
 338     font-size: 85%;
 339 }
 340
 341 /* Header styles for the Property Editor */
 342 .yui-editor-panel .hd {
 343     text-align: left;
 344     position: relative;
 345 }
 346 /* Setup some padding around the h3 */
 347 .yui-editor-panel .hd h3 {
 348     font-weight: bold;
 349     padding: 0.25em 0pt 0.25em 0.25em;
 350 }
 351
 352 /* set it to relative so we can position the close button - Zoom it for IE */
 353 .yui-editor-panel .bd {
 354     width: 100%;
 355     zoom: 1;
 356     position: relative;
 357 }
 358 /* Setup some padding for the body container - Zoom it for IE */
 359 .yui-editor-panel .bd div.yui-editor-body-cont {
 360     padding: .25em .1em;
 361     zoom: 1;
 362 }
 363
 364 /* Setup the :after so that compliant browsers don't loose the bounding box */
 365 .yui-editor-panel .bd div.yui-editor-body-cont:after { display: block; clear: both; visibility: hidden; content: '.'; height: 0;}
 366
 367 /* style the footer of the property editor */
 368 .yui-editor-panel .ft {
 369     text-align: right;
 370     width: 99%;
 371     float: left;
 372     clear: both;
 373 }
 374
 375 /* Style the "tip" icon */
 376 .yui-editor-panel .ft span.tip {
 377     display: block;
 378     position: relative;
 379     padding-left:23px;
 380     text-align:left;
 381     margin: .5em;
 382     zoom: 1;
 383 }
 384
 385
 386 /* setup some form fields */
 387 .yui-editor-panel label {
 388     clear: both;
 389     float: left;
 390     padding: 0;
 391     overflow: auto; /* This fixes the caret issue in Firefox */
 392     width: 100%;
 393     zoom: 1;
 394     text-align: left;
 395 }
 396
 397 /* more form fields */
 398 .yui-editor-panel label strong {
 399     float: left;
 400     width: 6em;
 401 }
 402
 403 /* The remove link in the Link Property Editor */
 404 .yui-editor-panel .removeLink {
 405     width: 80%;
 406     text-align: right;
 407 }
 408
 409 /* More form styling */
 410 .yui-editor-panel label input {
 411     margin-left: .25em;
 412     float: left;
 413 }
 414
 415 /* Image Padding in the Property Editor */
 416 .yui-editor-panel .yui-toolbar-group-padding {
 417     width: 100px;
 418 }
 419
 420 /* Image Border in the Property Editor */
 421 .yui-editor-panel .yui-toolbar-group-border {
 422     width: 175px;
 423     *width: 190px;
 424 }
 425
 426 /* Image Text Flow in the Property Editor */
 427 .yui-editor-panel .yui-toolbar-group-textflow {
 428     width: 150px;
 429     *width: 180px;
 430 }
 431
 432 /* Image Height/Width in the Property Editor */
 433 .yui-editor-panel .height-width {
 434     float: left;
 435     width: 68%;
 436 }
 437 /* Image Height/Width title */
 438 .yui-editor-panel .height-width h3 {
 439     padding-right: 11px;
 440 }
 441 /* Image Height/Width container */
 442 .yui-editor-panel .height-width span {
 443     font-style: italic;
 444     display: block;
 445     float: left;
 446     overflow:auto;
 447 }
 448 /* Image Height/Width original info container */
 449 .yui-editor-panel .height-width span.info {
 450     font-size: 70%;
 451 }
 452
 453 /* Border Size/Type button widths */
 454 .yui-editor-panel .yui-toolbar-bordersize, .yui-editor-panel .yui-toolbar-bordertype {
 455     width: 50px;
 456     font-size: 75%;
 457 }
 458
 459 /* Kill the separators in the Property Editor */
 460 .yui-editor-panel .yui-toolbar-container span.yui-toolbar-separator {
 461     border: none;
 462 }
 463
 464 /* Undo the floats on the a's */
 465 .yui-editor-panel .yui-toolbar-container div.yuimenu li.yuimenuitem a {
 466     float: none;
 467 }
 468
 469 /* Border Type solid */
 470 .yui-editor-panel .yui-toolbar-bordertype span a span.yui-toolbar-bordertype-solid {
 471     border-bottom: 1px solid black;
 472     text-indent: 777px;
 473     overflow: hidden;
 474     display: block;
 475     width: 22px;
 476     height: 8px;
 477     position: absolute;
 478     left: 2px;
 479 }
 480 /* Border Type dotted */
 481 .yui-editor-panel .yui-toolbar-bordertype span a span.yui-toolbar-bordertype-dotted {
 482     border-bottom: 1px dotted black;
 483     text-indent: 777px;
 484     overflow: hidden;
 485     display: block;
 486     width: 22px;
 487     height: 8px;
 488     position: absolute;
 489     left: 2px;
 490 }
 491 /* Border Type dashed */
 492 .yui-editor-panel .yui-toolbar-bordertype span a span.yui-toolbar-bordertype-dashed {
 493     border-bottom: 1px dashed black;
 494     text-indent: 777px;
 495     overflow: hidden;
 496     display: block;
 497     width: 22px;
 498     height: 8px;
 499     position: absolute;
 500     left: 2px;
 501 }
 502 /* Border Size 1 */
 503 .yui-editor-panel .yui-toolbar-bordersize span a span.yui-toolbar-bordersize-1 {
 504     border-bottom: 1px solid black;
 505     text-indent: 777px;
 506     overflow: hidden;
 507     display: block;
 508     width: 22px;
 509     height: 8px;
 510     position: absolute;
 511     left: 2px;
 512 }
 513 /* Border Size 2 */
 514 .yui-editor-panel .yui-toolbar-bordersize span a span.yui-toolbar-bordersize-2 {
 515     border-bottom: 2px solid black;
 516     text-indent: 777px;
 517     overflow: hidden;
 518     display: block;
 519     width: 22px;
 520     height: 8px;
 521     position: absolute;
 522     left: 2px;
 523 }
 524 /* Border Size 3 */
 525 .yui-editor-panel .yui-toolbar-bordersize span a span.yui-toolbar-bordersize-3 {
 526     border-bottom: 3px solid black;
 527     text-indent: 777px;
 528     overflow: hidden;
 529     display: block;
 530     width: 22px;
 531     height: 8px;
 532     position: absolute;
 533     left: 2px;
 534 }
 535 /* Border Size 4 */
 536 .yui-editor-panel .yui-toolbar-bordersize span a span.yui-toolbar-bordersize-4 {
 537     border-bottom: 4px solid black;
 538     text-indent: 777px;
 539     overflow: hidden;
 540     display: block;
 541     width: 22px;
 542     height: 8px;
 543     position: absolute;
 544     left: 2px;
 545 }
 546 /* Border Size 5 */
 547 .yui-editor-panel .yui-toolbar-bordersize span a span.yui-toolbar-bordersize-5 {
 548     border-bottom: 5px solid black;
 549     text-indent: 777px;
 550     overflow: hidden;
 551     display: block;
 552     width: 22px;
 553     height: 8px;
 554     position: absolute;
 555     left: 2px;
 556 }
 557
 558 /* Border Size menu size */
 559 .yui-toolbar-container .yui-toolbar-bordersize-menu {
 560     width: 30px;
 561 }
 562 /* Border Size menu styles */
 563 .yui-toolbar-bordersize-menu .yuimenuitemlabel, .yui-toolbar-bordertype-menu .yuimenuitemlabel {
 564     display: block;
 565     width: 50px;
 566     color: #ffffff;
 567     position: relative;
 568     margin-left: 20px;
 569     padding: 0;
 570 }
 571 /* Border Size menu styles - Checked */
 572 .yui-toolbar-bordersize-menu .yuimenuitemlabel .checkedindicator, .yui-toolbar-bordertype-menu .yuimenuitemlabel .checkedindicator {
 573     position: absolute;
 574     left: -14px;
 575 }
 576 /* Border Size menu styles - Selected */
 577 .yui-toolbar-bordersize-menu .yuimenuitem a.selected, .yui-toolbar-bordertype-menu .yuimenuitem a.selected {
 578     color: #B3D4FF;
 579 }
 580
 581 /* Border Size 0 - Menu Item */
 582 div.yuimenu.yui-toolbar-bordersize-menu li.yui-toolbar-bordersize-0 a {
 583     color: #000;
 584 }
 585 /* Border Size 0 - Selected Menu Item */
 586 div.yuimenu.yui-toolbar-bordersize-menu li.yui-toolbar-bordersize-0 a.selected {
 587     color: #fff;
 588 }
 589 /* Border Size 1 - Menu Item */
 590 div.yuimenu.yui-toolbar-bordersize-menu li.yui-toolbar-bordersize-1 a {
 591     border-bottom: 1px solid black;
 592 }
 593 /* Border Size 2 - Menu Item */
 594 div.yuimenu.yui-toolbar-bordersize-menu li.yui-toolbar-bordersize-2 a {
 595     border-bottom: 2px solid black;
 596 }
 597 /* Border Size 3 - Menu Item */
 598 div.yuimenu.yui-toolbar-bordersize-menu li.yui-toolbar-bordersize-3 a {
 599     border-bottom: 3px solid black;
 600 }
 601 /* Border Size 4 - Menu Item */
 602 div.yuimenu.yui-toolbar-bordersize-menu li.yui-toolbar-bordersize-4 a {
 603     border-bottom: 4px solid black;
 604 }
 605 /* Border Size 5 - Menu Item */
 606 div.yuimenu.yui-toolbar-bordersize-menu li.yui-toolbar-bordersize-5 a {
 607     border-bottom: 5px solid black;
 608 }
 609
 610
 611 /* Border Type Solid - Menu Item */
 612 div.yuimenu.yui-toolbar-bordertype-menu li.yui-toolbar-bordertype-solid a {
 613     border-bottom: 1px solid black;
 614 }
 615 /* Border Type Dashed - Menu Item */
 616 div.yuimenu.yui-toolbar-bordertype-menu li.yui-toolbar-bordertype-dashed a {
 617     border-bottom: 1px dashed black;
 618 }
 619 /* Border Type Dotted - Menu Item */
 620 div.yuimenu.yui-toolbar-bordertype-menu li.yui-toolbar-bordertype-dotted a {
 621     border-bottom: 1px dotted black;
 622 }
 623 /* Hidden Headers for Accessibility */
 624 h2.yui-editor-skipheader, h3.yui-editor-skipheader {
 625     height: 0;
 626     margin: 0;
 627     padding: 0;
 628     border: none;
 629     width: 0;
 630     overflow: hidden;
 631     position: absolute;
 632 }
 633