sources/skins/moono/dialog.css

   1 /*
   2 Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
   3 For licensing, see LICENSE.md or http://ckeditor.com/license
   4 */
   5
   6 /*
   7 dialog.css
   8 ============
   9
  10 This file styles dialogs and all widgets available inside of it (tabs, buttons,
  11 fields, etc.).
  12
  13 Dialogs are a complex system because they're very flexible. The CKEditor API
  14 makes it easy to create and customize dialogs by code, by making use of several
  15 different widgets inside its contents.
  16
  17 All dialogs share a main dialog strucuture, which can be visually represented
  18 as follows:
  19
  20 +-- .cke_dialog -------------------------------------------------+
  21 | +-- .cke_dialog_body ----------------------------------------+ |
  22 | | +-- .cke_dialog_title --+ +-- .cke_dialog_close_button --+ | |
  23 | | |                       | |                              | | |
  24 | | +-----------------------+ +------------------------------+ | |
  25 | | +-- .cke_dialog_tabs ------------------------------------+ | |
  26 | | |                                                        | | |
  27 | | +--------------------------------------------------------+ | |
  28 | | +-- .cke_dialog_contents --------------------------------+ | |
  29 | | | +-- .cke_dialog_contents_body -----------------------+ | | |
  30 | | | |                                                    | | | |
  31 | | | +----------------------------------------------------+ | | |
  32 | | | +-- .cke_dialog_footer ------------------------------+ | | |
  33 | | | |                                                    | | | |
  34 | | | +----------------------------------------------------+ | | |
  35 | | +--------------------------------------------------------+ | |
  36 | +------------------------------------------------------------+ |
  37 +----------------------------------------------------------------+
  38
  39 Comments in this file will give more details about each of the above blocks.
  40 */
  41
  42 /* The outer container of the dialog. */
  43 .cke_dialog
  44 {
  45         /* Mandatory: Because the dialog.css file is loaded on demand, we avoid
  46                 showing an unstyled dialog by hidding it. Here, we restore its visibility. */
  47         visibility: visible;
  48 }
  49
  50 /* The inner boundary container. */
  51 .cke_dialog_body
  52 {
  53         z-index: 1;
  54         background: #eaeaea;
  55         border: 1px solid #b2b2b2;
  56         border-bottom-color: #999;
  57         border-radius: 3px;
  58         box-shadow: 0 0 3px rgba(0, 0, 0, .15);
  59 }
  60
  61 /* Due to our reset we have to recover the styles of some elements. */
  62 .cke_dialog strong
  63 {
  64         font-weight: bold;
  65 }
  66
  67 /* The dialog title. */
  68 .cke_dialog_title
  69 {
  70         font-weight: bold;
  71         font-size: 13px;
  72         cursor: move;
  73         position: relative;
  74
  75         color: #474747;
  76         text-shadow: 0 1px 0 rgba(255,255,255,.75);
  77
  78         border-bottom: 1px solid #999;
  79         padding: 6px 10px;
  80
  81         border-radius: 2px 2px 0 0;
  82         box-shadow: 0 1px 0 #fff inset;
  83
  84         background: #cfd1cf;
  85         background-image: linear-gradient(to bottom, #f5f5f5, #cfd1cf);
  86         filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#f5f5f5', endColorstr='#cfd1cf');
  87 }
  88
  89 .cke_dialog_spinner
  90 {
  91         border-radius: 50%;
  92
  93         width: 12px;
  94         height: 12px;
  95         overflow: hidden;
  96
  97         text-indent: -9999em;
  98
  99         border-top: 2px solid rgba(102, 102, 102, 0.2);
 100         border-right: 2px solid rgba(102, 102, 102, 0.2);
 101         border-bottom: 2px solid rgba(102, 102, 102, 0.2);
 102         border-left: 2px solid rgba(102, 102, 102, 1);
 103
 104         -webkit-animation: dialog_spinner 1s infinite linear;
 105         animation: dialog_spinner 1s infinite linear;
 106 }
 107
 108 /* A GIF fallback for IE8 and IE9 which does not support CSS animations. */
 109 .cke_browser_ie8 .cke_dialog_spinner,
 110 .cke_browser_ie9 .cke_dialog_spinner
 111 {
 112         background: url(images/spinner.gif) center top no-repeat;
 113         width: 16px;
 114         height: 16px;
 115         border: 0;
 116 }
 117
 118 @-webkit-keyframes dialog_spinner
 119 {
 120         0% {
 121                 -webkit-transform: rotate(0deg);
 122                 transform: rotate(0deg);
 123         }
 124         100% {
 125                 -webkit-transform: rotate(360deg);
 126                 transform: rotate(360deg);
 127         }
 128 }
 129
 130 @keyframes dialog_spinner
 131 {
 132         0% {
 133                 -webkit-transform: rotate(0deg);
 134                 transform: rotate(0deg);
 135         }
 136         100% {
 137                 -webkit-transform: rotate(360deg);
 138                 transform: rotate(360deg);
 139         }
 140 }
 141
 142 /* The outer part of the dialog contants, which contains the contents body
 143    and the footer. */
 144 .cke_dialog_contents
 145 {
 146         background-color: #fff;
 147         overflow: auto;
 148         padding: 15px 10px 5px 10px;
 149         margin-top: 30px;
 150         border-top: 1px solid #bfbfbf;
 151         border-radius: 0 0 3px 3px;
 152 }
 153
 154 /* The contents body part, which will hold all elements available in the dialog. */
 155 .cke_dialog_contents_body
 156 {
 157         overflow: auto;
 158         padding: 17px 10px 5px 10px;
 159         margin-top: 22px;
 160 }
 161
 162 /* The dialog footer, which usually contains the "Ok" and "Cancel" buttons as
 163    well as a resize handler. */
 164 .cke_dialog_footer
 165 {
 166         text-align: right;
 167         position: relative;
 168         border: none;
 169         outline: 1px solid #bfbfbf;
 170         box-shadow: 0 1px 0 #fff inset;
 171         border-radius: 0 0 2px 2px;
 172         background: #cfd1cf;
 173         background-image: linear-gradient(to bottom, #ebebeb, #cfd1cf);
 174         filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ebebeb', endColorstr='#cfd1cf');
 175 }
 176
 177 .cke_rtl .cke_dialog_footer
 178 {
 179         text-align: left;
 180 }
 181
 182 .cke_hc .cke_dialog_footer
 183 {
 184         outline: none;
 185         border-top: 1px solid #fff;
 186 }
 187
 188 .cke_dialog .cke_resizer
 189 {
 190         margin-top: 22px;
 191 }
 192
 193 .cke_dialog .cke_resizer_rtl
 194 {
 195         margin-left: 5px;
 196 }
 197
 198 .cke_dialog .cke_resizer_ltr
 199 {
 200         margin-right: 5px;
 201 }
 202
 203 /*
 204 Dialog tabs
 205 -------------
 206
 207 Tabs are presented on some of the dialogs to make it possible to have its
 208 contents split on different groups, visible one after the other.
 209
 210 The main element that holds the tabs can be made hidden, in case of no tabs
 211 available.
 212
 213 The following is the visual representation of the tabs block:
 214
 215 +-- .cke_dialog_tabs ------------------------------------+
 216 |  +-- .cke_dialog_tab --+ +-- .cke_dialog_tab --+ ...   |
 217 |  |                     | |                     |       |
 218 |  +---------------------+ +---------------------+       |
 219 +--------------------------------------------------------+
 220
 221 The .cke_dialog_tab_selected class is appended to the active tab.
 222 */
 223
 224 /* The main tabs container. */
 225 .cke_dialog_tabs
 226 {
 227         height: 24px;
 228         display: inline-block;
 229         margin: 5px 0 0;
 230         position: absolute;
 231         z-index: 2;
 232         left: 10px;
 233 }
 234
 235 .cke_rtl .cke_dialog_tabs
 236 {
 237         right: 10px;
 238 }
 239
 240 /* A single tab (an <a> element). */
 241 a.cke_dialog_tab
 242 {
 243
 244         height: 16px;
 245         padding: 4px 8px;
 246         margin-right: 3px;
 247         display: inline-block;
 248         cursor: pointer;
 249         line-height: 16px;
 250         outline: none;
 251         color: #595959;
 252         border: 1px solid #bfbfbf;
 253
 254         border-radius: 3px 3px 0 0;
 255
 256         background: #d4d4d4;
 257         background-image: linear-gradient(to bottom, #fafafa, #ededed);
 258         filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#fafafa', endColorstr='#ededed');
 259 }
 260
 261 .cke_rtl a.cke_dialog_tab
 262 {
 263         margin-right: 0;
 264         margin-left: 3px;
 265 }
 266
 267 /* A hover state of a regular inactive tab. */
 268 a.cke_dialog_tab:hover,
 269 a.cke_dialog_tab:focus
 270 {
 271         background: #ebebeb;
 272         background: linear-gradient(to bottom, #ebebeb 0%,#dfdfdf 100%);
 273         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebebeb', endColorstr='#dfdfdf',GradientType=0 );
 274 }
 275
 276 a.cke_dialog_tab_selected
 277 {
 278         background: #fff;
 279         color: #383838;
 280         border-bottom-color: #fff;
 281         cursor: default;
 282         filter: none;
 283 }
 284
 285 /* A hover state for selected tab. */
 286 a.cke_dialog_tab_selected:hover,
 287 a.cke_dialog_tab_selected:focus
 288 {
 289         background: #ededed;
 290         background: linear-gradient(to bottom, #ededed 0%,#ffffff 100%);
 291         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 );
 292 }
 293
 294 .cke_hc a.cke_dialog_tab:hover,
 295 .cke_hc a.cke_dialog_tab:focus,
 296 .cke_hc a.cke_dialog_tab_selected
 297 {
 298         border: 3px solid;
 299         padding: 2px 6px;
 300 }
 301
 302 a.cke_dialog_tab_disabled
 303 {
 304         color: #bababa;
 305         cursor: default;
 306 }
 307
 308 /* The .cke_single_page class is appended to the dialog outer element in case
 309    of dialogs that has no tabs. */
 310 .cke_single_page .cke_dialog_tabs
 311 {
 312         display: none;
 313 }
 314
 315 .cke_single_page .cke_dialog_contents
 316 {
 317         padding-top: 5px;
 318         margin-top: 0;
 319         border-top: none;
 320 }
 321
 322 /* The close button at the top of the dialog. */
 323
 324 a.cke_dialog_close_button
 325 {
 326         background-image: url(images/close.png);
 327         background-repeat: no-repeat;
 328         background-position: 50%;
 329         position: absolute;
 330         cursor: pointer;
 331         text-align: center;
 332         height: 20px;
 333         width: 20px;
 334         top: 4px;
 335         z-index: 5;
 336         opacity: 0.8;
 337         filter: alpha(opacity = 80);
 338 }
 339
 340 .cke_dialog_close_button:hover
 341 {
 342         opacity: 1;
 343         filter: alpha(opacity = 100);
 344 }
 345
 346 .cke_hidpi .cke_dialog_close_button
 347 {
 348         background-image: url(images/hidpi/close.png);
 349         background-size: 16px;
 350 }
 351
 352 .cke_dialog_close_button span
 353 {
 354         display: none;
 355 }
 356
 357 .cke_hc .cke_dialog_close_button span
 358 {
 359         display: inline;
 360         cursor: pointer;
 361         font-weight: bold;
 362         position: relative;
 363         top: 3px;
 364 }
 365
 366 .cke_ltr .cke_dialog_close_button
 367 {
 368         right: 5px;
 369 }
 370
 371 .cke_rtl .cke_dialog_close_button
 372 {
 373         left: 6px;
 374 }
 375
 376 .cke_dialog_close_button
 377 {
 378         top: 4px;
 379 }
 380
 381 /*
 382 Dialog UI Elements
 383 --------------------
 384
 385 The remaining styles define the UI elements that can be used inside dialog
 386 contents.
 387
 388 Most of the UI elements on dialogs contain a textual label. All of them share
 389 the same labelling structure, having the label text inside an element with
 390 .cke_dialog_ui_labeled_label and the element specific part inside the
 391 .cke_dialog_ui_labeled_content class.
 392 */
 393
 394 /* If an element is supposed to be disabled, the .cke_disabled class is
 395    appended to it. */
 396 div.cke_disabled .cke_dialog_ui_labeled_content div *
 397 {
 398         background-color: #ddd;
 399         cursor: default;
 400 }
 401
 402 /*
 403 Horizontal-Box and Vertical-Box
 404 ---------------------------------
 405
 406 There are basic layou element used by the editor to properly align elements in
 407 the dialog. They're basically tables that have each cell filled by UI elements.
 408
 409 The following is the visual representation of a H-Box:
 410
 411 +-- .cke_dialog_ui_hbox --------------------------------------------------------------------------------+
 412 |  +-- .cke_dialog_ui_hbox_first --+ +-- .cke_dialog_ui_hbox_child --+ +-- .cke_dialog_ui_hbox_last --+ |
 413 |  +                               + +                               + +                              + |
 414 |  +-------------------------------+ +-------------------------------+ +------------------------------+ |
 415 +-------------------------------------------------------------------------------------------------------+
 416
 417 It is possible to have nested V/H-Boxes.
 418 */
 419
 420 .cke_dialog_ui_vbox table,
 421 .cke_dialog_ui_hbox table
 422 {
 423         margin: auto;
 424 }
 425
 426 .cke_dialog_ui_vbox_child
 427 {
 428         padding: 5px 0px;
 429 }
 430
 431 .cke_dialog_ui_hbox
 432 {
 433         width: 100%;
 434 }
 435
 436 .cke_dialog_ui_hbox_first,
 437 .cke_dialog_ui_hbox_child,
 438 .cke_dialog_ui_hbox_last
 439 {
 440         vertical-align: top;
 441 }
 442
 443 .cke_ltr .cke_dialog_ui_hbox_first,
 444 .cke_ltr .cke_dialog_ui_hbox_child
 445 {
 446         padding-right: 10px;
 447 }
 448
 449 .cke_rtl .cke_dialog_ui_hbox_first,
 450 .cke_rtl .cke_dialog_ui_hbox_child
 451 {
 452         padding-left: 10px;
 453 }
 454
 455 .cke_ltr .cke_dialog_footer_buttons .cke_dialog_ui_hbox_first,
 456 .cke_ltr .cke_dialog_footer_buttons .cke_dialog_ui_hbox_child
 457 {
 458         padding-right: 5px;
 459 }
 460
 461 .cke_rtl .cke_dialog_footer_buttons .cke_dialog_ui_hbox_first,
 462 .cke_rtl .cke_dialog_footer_buttons .cke_dialog_ui_hbox_child
 463 {
 464         padding-left: 5px;
 465         padding-right: 0;
 466 }
 467
 468 /* Applies to all labeled dialog fields */
 469 .cke_hc div.cke_dialog_ui_input_text,
 470 .cke_hc div.cke_dialog_ui_input_password,
 471 .cke_hc div.cke_dialog_ui_input_textarea,
 472 .cke_hc div.cke_dialog_ui_input_select,
 473 .cke_hc div.cke_dialog_ui_input_file
 474 {
 475         border: 1px solid;
 476 }
 477
 478 /*
 479 Text Input
 480 ------------
 481
 482 The basic text field to input text.
 483
 484 +-- .cke_dialog_ui_text --------------------------+
 485 |  +-- .cke_dialog_ui_labeled_label ------------+ |
 486 |  |                                            | |
 487 |  +--------------------------------------------+ |
 488 |  +-- .cke_dialog_ui_labeled_content ----------+ |
 489 |  | +-- div.cke_dialog_ui_input_text --------+ | |
 490 |  | | +-- input.cke_dialog_ui_input_text --+ | | |
 491 |  | | |                                    | | | |
 492 |  | | +------------------------------------+ | | |
 493 |  | +----------------------------------------+ | |
 494 |  +--------------------------------------------+ |
 495 +-------------------------------------------------+
 496 */
 497
 498 /*
 499 Textarea
 500 ----------
 501
 502 The textarea field to input larger text.
 503
 504 +-- .cke_dialog_ui_textarea --------------------------+
 505 |  +-- .cke_dialog_ui_labeled_label ----------------+ |
 506 |  |                                                | |
 507 |  +------------------------------------------------+ |
 508 |  +-- .cke_dialog_ui_labeled_content --------------+ |
 509 |  | +-- div.cke_dialog_ui_input_textarea --------+ | |
 510 |  | | +-- input.cke_dialog_ui_input_textarea --+ | | |
 511 |  | | |                                        | | | |
 512 |  | | +----------------------------------------+ | | |
 513 |  | +--------------------------------------------+ | |
 514 |  +------------------------------------------------+ |
 515 +-----------------------------------------------------+
 516 */
 517
 518 textarea.cke_dialog_ui_input_textarea
 519 {
 520         overflow: auto;
 521         resize: none;
 522 }
 523
 524 input.cke_dialog_ui_input_text,
 525 input.cke_dialog_ui_input_password,
 526 textarea.cke_dialog_ui_input_textarea
 527 {
 528         background-color: #fff;
 529         border: 1px solid #c9cccf;
 530         border-top-color: #aeb3b9;
 531         padding: 4px 6px;
 532         outline: none;
 533         width: 100%;
 534         *width: 95%;
 535
 536         box-sizing: border-box;
 537
 538         border-radius: 3px;
 539
 540         box-shadow: 0 1px 2px rgba(0,0,0,.15) inset;
 541 }
 542
 543 input.cke_dialog_ui_input_text:hover,
 544 input.cke_dialog_ui_input_password:hover,
 545 textarea.cke_dialog_ui_input_textarea:hover
 546 {
 547         border: 1px solid #aeb3b9;
 548         border-top-color: #a0a6ad;
 549 }
 550
 551 input.cke_dialog_ui_input_text:focus,
 552 input.cke_dialog_ui_input_password:focus,
 553 textarea.cke_dialog_ui_input_textarea:focus,
 554 select.cke_dialog_ui_input_select:focus
 555 {
 556         outline: none;
 557         border: 1px solid #139ff7;
 558         border-top-color: #1392e9;
 559 }
 560
 561 /*
 562 Button
 563 --------
 564
 565 The buttons used in the dialog footer or inside the contents.
 566
 567 +-- a.cke_dialog_ui_button -----------+
 568 |  +-- span.cke_dialog_ui_button --+  |
 569 |  |                               |  |
 570 |  +-------------------------------+  |
 571 +-------------------------------------+
 572 */
 573
 574 /* The outer part of the button. */
 575 a.cke_dialog_ui_button
 576 {
 577         display: inline-block;
 578         *display: inline;
 579         *zoom: 1;
 580
 581         padding: 4px 0;
 582         margin: 0;
 583
 584         text-align: center;
 585         color: #333;
 586         vertical-align: middle;
 587         cursor: pointer;
 588
 589         border: 1px solid #b6b6b6;
 590         border-bottom-color: #999;
 591         border-radius: 3px;
 592         box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 0 2px rgba(255,255,255,.15) inset, 0 1px 0 rgba(255,255,255,.15) inset;
 593
 594         background: #e4e4e4;
 595         background-image: linear-gradient(to bottom, #ffffff, #e4e4e4);
 596         filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffffff', endColorstr='#e4e4e4');
 597
 598 }
 599
 600 span.cke_dialog_ui_button
 601 {
 602         padding: 0 10px;
 603 }
 604
 605 a.cke_dialog_ui_button:hover
 606 {
 607         border-color: #9e9e9e;
 608
 609         background: #ccc;
 610         background-image: linear-gradient(to bottom, #f2f2f2, #ccc);
 611         filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
 612 }
 613
 614 /*      :focus/:active styles for dialog buttons: regular and footer. */
 615 a.cke_dialog_ui_button:focus,
 616 a.cke_dialog_ui_button:active
 617 {
 618         border-color: #969696;
 619         outline: none;
 620         box-shadow: 0 0 6px rgba(0,0,0,.4) inset;
 621 }
 622
 623 .cke_hc a.cke_dialog_ui_button:hover,
 624 .cke_hc a.cke_dialog_ui_button:focus,
 625 .cke_hc a.cke_dialog_ui_button:active
 626 {
 627         border: 3px solid;
 628         padding-top: 1px;
 629         padding-bottom: 1px;
 630 }
 631
 632 .cke_hc a.cke_dialog_ui_button:hover span,
 633 .cke_hc a.cke_dialog_ui_button:focus span,
 634 .cke_hc a.cke_dialog_ui_button:active span
 635 {
 636         padding-left: 10px;
 637         padding-right: 10px;
 638 }
 639
 640 /*
 641 a.cke_dialog_ui_button[style*="width"]
 642 {
 643         display: block !important;
 644         width: auto !important;
 645 }
 646 */
 647 /* The inner part of the button (both in dialog tabs and dialog footer). */
 648 .cke_dialog_footer_buttons a.cke_dialog_ui_button span
 649 {
 650         color: inherit;
 651         font-size: 12px;
 652         font-weight: bold;
 653         line-height: 18px;
 654         padding: 0 12px;
 655 }
 656
 657 /* Special class appended to the Ok button. */
 658 a.cke_dialog_ui_button_ok
 659 {
 660         color: #fff;
 661         text-shadow: 0 -1px 0 #55830c;
 662         border-color: #62a60a #62a60a #4d9200;
 663
 664         background: #69b10b;
 665         background-image: linear-gradient(to bottom, #9ad717, #69b10b);
 666         filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#9ad717', endColorstr='#69b10b');
 667 }
 668
 669 a.cke_dialog_ui_button_ok:hover
 670 {
 671         border-color: #5b9909 #5b9909 #478500;
 672
 673         background: #88be14;
 674         background: linear-gradient(to bottom, #88be14 0%,#5d9c0a 100%);
 675         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88be14', endColorstr='#5d9c0a',GradientType=0 );
 676 }
 677
 678 a.cke_dialog_ui_button_ok.cke_disabled {
 679         border-color: #7D9F51;
 680
 681         background: #8DAD62;
 682         background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#B3D271), to(#8DAD62));
 683         background-image: -webkit-linear-gradient(top, #B3D271, #8DAD62);
 684         background-image: -o-linear-gradient(top, #B3D271, #8DAD62);
 685         background-image: linear-gradient(to bottom, #B3D271, #8DAD62);
 686         background-image: -moz-linear-gradient(top, #B3D271, #8DAD62);
 687         filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#B3D271', endColorstr='#8DAD62');
 688 }
 689
 690 a.cke_dialog_ui_button_ok.cke_disabled span {
 691         color: #E0E8D1;
 692 }
 693
 694 /* Default text shadow used for inner parts of all dialog buttons (both in dialog tabs and dialog footer). */
 695 a.cke_dialog_ui_button span
 696 {
 697         text-shadow: 0 1px 0 #fff;
 698 }
 699
 700 /* Text shadow used for inner part of OK dialog button in footer. */
 701 a.cke_dialog_ui_button_ok span
 702 {
 703         text-shadow: 0 -1px 0 #55830c;
 704 }
 705
 706 span.cke_dialog_ui_button
 707 {
 708         cursor: pointer;
 709 }
 710
 711 /*      :focus/:active styles for dialog footer buttons (ok & cancel) */
 712 a.cke_dialog_ui_button_ok:focus,
 713 a.cke_dialog_ui_button_ok:active,
 714 a.cke_dialog_ui_button_cancel:focus,
 715 a.cke_dialog_ui_button_cancel:active
 716 {
 717         border-width: 2px;
 718         padding: 3px 0;
 719 }
 720
 721 a.cke_dialog_ui_button_ok:focus,
 722 a.cke_dialog_ui_button_ok:active
 723 {
 724         border-color: #568C0A;
 725 }
 726
 727 a.cke_dialog_ui_button_ok.cke_disabled:focus,
 728 a.cke_dialog_ui_button_ok.cke_disabled:active
 729 {
 730         border-color: #6F8C49;
 731 }
 732
 733 /*      :focus/:active styles for dialog footer buttons (ok & cancel) spans */
 734 a.cke_dialog_ui_button_ok:focus span,
 735 a.cke_dialog_ui_button_ok:active span,
 736 a.cke_dialog_ui_button_cancel:focus span,
 737 a.cke_dialog_ui_button_cancel:active span
 738 {
 739         padding: 0 11px;        /* Thick button border must be compensated. */
 740 }
 741
 742 /* A special container that holds the footer buttons. */
 743 .cke_dialog_footer_buttons
 744 {
 745         display: inline-table;
 746         margin: 5px;
 747         width: auto;
 748         position: relative;
 749         vertical-align: middle;
 750 }
 751
 752 /*
 753 Styles for other dialog element types.
 754 */
 755
 756 div.cke_dialog_ui_input_select
 757 {
 758         display: table;
 759 }
 760
 761 select.cke_dialog_ui_input_select
 762 {
 763         height: 25px;
 764         line-height: 25px;
 765
 766         background-color: #fff;
 767         border: 1px solid #c9cccf;
 768         border-top-color: #aeb3b9;
 769         padding: 3px 3px 3px 6px;
 770         outline: none;
 771         border-radius: 3px;
 772         box-shadow: 0 1px 2px rgba(0,0,0,.15) inset;
 773 }
 774
 775 .cke_dialog_ui_input_file
 776 {
 777         width: 100%;
 778         height: 25px;
 779 }
 780
 781 .cke_hc .cke_dialog_ui_labeled_content input:focus,
 782 .cke_hc .cke_dialog_ui_labeled_content select:focus,
 783 .cke_hc .cke_dialog_ui_labeled_content textarea:focus
 784 {
 785         outline: 1px dotted;
 786 }
 787
 788 /*
 789  * Some utility CSS classes for dialog authors.
 790  */
 791 .cke_dialog .cke_dark_background
 792 {
 793         background-color: #DEDEDE;
 794 }
 795
 796 .cke_dialog .cke_light_background
 797 {
 798         background-color: #EBEBEB;
 799 }
 800
 801 .cke_dialog .cke_centered
 802 {
 803         text-align: center;
 804 }
 805
 806 .cke_dialog a.cke_btn_reset
 807 {
 808         float: right;
 809         background: url(images/refresh.png) top left no-repeat;
 810         width: 16px;
 811         height: 16px;
 812         border: 1px none;
 813         font-size: 1px;
 814 }
 815
 816 .cke_hidpi .cke_dialog a.cke_btn_reset {
 817         background-size: 16px;
 818         background-image: url(images/hidpi/refresh.png);
 819 }
 820
 821 .cke_rtl .cke_dialog a.cke_btn_reset
 822 {
 823         float: left;
 824 }
 825
 826 .cke_dialog a.cke_btn_locked,
 827 .cke_dialog a.cke_btn_unlocked
 828 {
 829         float: left;
 830         width: 16px;
 831         height: 16px;
 832         background-repeat: no-repeat;
 833         border: none 1px;
 834         font-size: 1px;
 835 }
 836
 837 .cke_dialog a.cke_btn_locked .cke_icon
 838 {
 839         display: none;
 840 }
 841
 842 .cke_rtl .cke_dialog a.cke_btn_locked,
 843 .cke_rtl .cke_dialog a.cke_btn_unlocked
 844 {
 845         float: right;
 846 }
 847
 848 .cke_dialog a.cke_btn_locked
 849 {
 850         background-image: url(images/lock.png);
 851 }
 852
 853 .cke_dialog a.cke_btn_unlocked
 854 {
 855         background-image: url(images/lock-open.png);
 856 }
 857
 858 .cke_hidpi .cke_dialog a.cke_btn_unlocked,
 859 .cke_hidpi .cke_dialog a.cke_btn_locked {
 860         background-size: 16px;
 861 }
 862
 863 .cke_hidpi .cke_dialog a.cke_btn_locked {
 864         background-image: url(images/hidpi/lock.png);
 865 }
 866
 867 .cke_hidpi .cke_dialog a.cke_btn_unlocked {
 868         background-image: url(images/hidpi/lock-open.png);
 869 }
 870
 871 .cke_dialog .cke_btn_over
 872 {
 873         border: outset 1px;
 874         cursor: pointer;
 875 }
 876
 877 /*
 878 The rest of the file contains style used on several common plugins. There is a
 879 tendency that these will be moved to the plugins code in the future.
 880 */
 881
 882 .cke_dialog  .ImagePreviewBox
 883 {
 884         border: 2px ridge black;
 885         overflow: scroll;
 886         height: 200px;
 887         width: 300px;
 888         padding: 2px;
 889         background-color: white;
 890 }
 891
 892 .cke_dialog .ImagePreviewBox table td
 893 {
 894         white-space: normal;
 895 }
 896
 897 .cke_dialog  .ImagePreviewLoader
 898 {
 899         position: absolute;
 900         white-space: normal;
 901         overflow: hidden;
 902         height: 160px;
 903         width: 230px;
 904         margin: 2px;
 905         padding: 2px;
 906         opacity: 0.9;
 907         filter: alpha(opacity = 90);
 908
 909         background-color: #e4e4e4;
 910 }
 911
 912 .cke_dialog .FlashPreviewBox
 913 {
 914         white-space: normal;
 915         border: 2px ridge black;
 916         overflow: auto;
 917         height: 160px;
 918         width: 390px;
 919         padding: 2px;
 920         background-color: white;
 921 }
 922
 923 .cke_dialog .cke_pastetext
 924 {
 925         width: 346px;
 926         height: 170px;
 927 }
 928
 929 .cke_dialog .cke_pastetext textarea
 930 {
 931         width: 340px;
 932         height: 170px;
 933         resize: none;
 934 }
 935
 936 .cke_dialog iframe.cke_pasteframe
 937 {
 938         width: 346px;
 939         height: 130px;
 940         background-color: white;
 941         border: 1px solid #aeb3b9;
 942         border-radius: 3px;
 943 }
 944
 945 .cke_dialog .cke_hand
 946 {
 947         cursor: pointer;
 948 }
 949
 950 .cke_disabled
 951 {
 952         color: #a0a0a0;
 953 }
 954
 955 .cke_dialog_body .cke_label
 956 {
 957         display: none;
 958 }
 959
 960 .cke_dialog_body label
 961 {
 962         display: inline;
 963         margin-bottom: auto;
 964         cursor: default;
 965 }
 966
 967 .cke_dialog_body label.cke_required
 968 {
 969         font-weight: bold;
 970 }
 971
 972 a.cke_smile
 973 {
 974         overflow: hidden;
 975         display: block;
 976         text-align: center;
 977         padding: 0.3em 0;
 978 }
 979
 980 a.cke_smile img
 981 {
 982         vertical-align: middle;
 983 }
 984
 985 a.cke_specialchar
 986 {
 987         cursor: inherit;
 988         display: block;
 989         height: 1.25em;
 990         padding: 0.2em 0.3em;
 991         text-align: center;
 992 }
 993
 994 a.cke_smile,
 995 a.cke_specialchar
 996 {
 997         border: 1px solid transparent;
 998 }
 999
1000 a.cke_smile:hover,
1001 a.cke_smile:focus,
1002 a.cke_smile:active,
1003 a.cke_specialchar:hover,
1004 a.cke_specialchar:focus,
1005 a.cke_specialchar:active
1006 {
1007         background: #fff;
1008         outline: 0;
1009 }
1010
1011 a.cke_smile:hover,
1012 a.cke_specialchar:hover
1013 {
1014         border-color: #888;
1015 }
1016
1017 a.cke_smile:focus,
1018 a.cke_smile:active,
1019 a.cke_specialchar:focus,
1020 a.cke_specialchar:active
1021 {
1022         border-color: #139FF7;
1023 }
1024
1025 /**
1026  * Styles specific to "cellProperties" dialog.
1027  */
1028
1029 .cke_dialog_contents a.colorChooser
1030 {
1031         display: block;
1032         margin-top: 6px;
1033         margin-left: 10px;
1034         width: 80px;
1035 }
1036
1037 .cke_rtl .cke_dialog_contents a.colorChooser
1038 {
1039         margin-right: 10px;
1040 }
1041
1042 /* Compensate focus outline for some input elements. (#6200) */
1043 .cke_dialog_ui_checkbox_input:focus,
1044 .cke_dialog_ui_radio_input:focus,
1045 .cke_btn_over
1046 {
1047         outline: 1px dotted #696969;
1048 }
1049
1050 .cke_iframe_shim
1051 {
1052         display: block;
1053         position: absolute;
1054         top: 0;
1055         left: 0;
1056         z-index: -1;
1057         filter: alpha(opacity = 0);
1058         width: 100%;
1059         height: 100%;
1060 }