1.mce-container { 2 position: static; 3 box-sizing: content-box; 4 float: none; 5 width: auto; 6 height: auto; 7 padding: 0; 8 margin: 0; 9 font-size: 12px; 10 font-weight: 500; 11 line-height: normal; 12 color: #333; 13 text-decoration: none; 14 white-space: nowrap; 15 vertical-align: top; 16 direction: ltr; 17 cursor: inherit; 18 background: transparent; 19 border: 0; 20 outline: 0; 21 -webkit-tap-highlight-color: transparent; 22 @include text-align(left); 23 24 * { 25 position: static; 26 box-sizing: content-box; 27 float: none; 28 width: auto; 29 height: auto; 30 padding: 0; 31 margin: 0; 32 font-size: 12px; 33 font-weight: 500; 34 line-height: normal; 35 color: #333; 36 text-align: left; 37 text-decoration: none; 38 white-space: nowrap; 39 vertical-align: top; 40 direction: ltr; 41 cursor: inherit; 42 background: transparent; 43 border: 0; 44 outline: 0; 45 -webkit-tap-highlight-color: transparent; 46 } 47} 48 49.mce-widget { 50 position: static; 51 box-sizing: content-box; 52 float: none; 53 width: auto; 54 height: auto; 55 padding: 0; 56 margin: 0; 57 font-size: 12px; 58 font-weight: 500; 59 line-height: normal; 60 color: #333; 61 text-align: left; 62 text-decoration: none; 63 white-space: nowrap; 64 vertical-align: top; 65 direction: ltr; 66 cursor: inherit; 67 background: transparent; 68 border: 0; 69 outline: 0; 70 -webkit-tap-highlight-color: transparent; 71 72 * { 73 position: static; 74 box-sizing: content-box; 75 float: none; 76 width: auto; 77 height: auto; 78 padding: 0; 79 margin: 0; 80 font-size: 12px; 81 font-weight: 500; 82 line-height: normal; 83 color: #333; 84 text-align: left; 85 text-decoration: none; 86 white-space: nowrap; 87 vertical-align: top; 88 direction: ltr; 89 cursor: inherit; 90 background: transparent; 91 border: 0; 92 outline: 0; 93 -webkit-tap-highlight-color: transparent; 94 } 95 96 button { 97 box-sizing: border-box; 98 } 99} 100 101.mce-container *[unselectable] { 102 -moz-user-select: none; 103 -webkit-user-select: none; 104 -o-user-select: none; 105 user-select: none; 106} 107 108.mce-fade { 109 opacity: 0; 110 -webkit-transition: opacity 0.15s linear; 111 transition: opacity 0.15s linear; 112 113 &.mce-in { 114 opacity: 1; 115 } 116} 117 118.mce-tinymce { 119 position: relative; 120 display: block; 121 // stylelint-disable-next-line 122 visibility: visible !important; 123 border-radius: 2px; 124 125 > .mce-container-body { 126 border: 1px solid #c7d6db; 127 } 128} 129 130.mce-fullscreen { 131 z-index: 100; 132 height: 100%; 133 padding: 0; 134 margin: 0; 135 overflow: hidden; 136 background: #fff; 137 border: 0; 138 139 .mce-resizehandle { 140 display: none; 141 } 142} 143 144div.mce-fullscreen { 145 position: fixed; 146 top: 0; 147 width: 100%; 148 height: auto; 149 @include left(0); 150} 151 152.mce-wordcount { 153 position: absolute; 154 top: 0; 155 padding: 8px; 156 @include right(0); 157} 158 159div.mce-edit-area { 160 max-height: 400px; 161 padding: 1px; 162 overflow: auto; 163 background: #fff; 164 filter: none; 165} 166 167.mce-statusbar { 168 position: relative; 169 170 .mce-container-body { 171 position: relative; 172 } 173} 174 175.mce-charmap { 176 border-collapse: collapse; 177 178 td { 179 width: 20px; 180 height: 20px; 181 padding: 2px; 182 line-height: 20px; 183 text-align: center; 184 vertical-align: middle; 185 cursor: default; 186 border: 1px solid #9e9e9e; 187 188 div { 189 text-align: center; 190 } 191 192 &:hover { 193 background: #d9d9d9; 194 } 195 } 196} 197 198.mce-grid { 199 td div { 200 width: 12px; 201 height: 12px; 202 margin: 2px; 203 cursor: pointer; 204 border-spacing: 2px; 205 border-collapse: separate; 206 border: 1px solid #d6d6d6; 207 } 208 209 a { 210 display: block; 211 border: 1px solid transparent; 212 213 &:hover { 214 border-color: #a1a1a1; 215 } 216 } 217} 218 219.mce-grid-border { 220 margin: 0 4px; 221 222 a { 223 width: 13px; 224 height: 13px; 225 border-color: #d6d6d6; 226 227 &:hover, 228 &.mce-active { 229 background: #dff5f9; 230 border-color: #a1a1a1; 231 } 232 } 233} 234 235.mce-text-center { 236 text-align: center; 237} 238 239div.mce-tinymce-inline { 240 width: 100%; 241 -webkit-box-shadow: none; 242 -moz-box-shadow: none; 243 box-shadow: none; 244} 245 246.mce-toolbar-grp { 247 padding-bottom: 2px; 248 249 .mce-flow-layout-item { 250 margin-bottom: 0; 251 } 252} 253 254.mce-container, 255.mce-container-body { 256 display: block; 257} 258 259.mce-autoscroll { 260 overflow: hidden; 261} 262 263.mce-scrollbar { 264 position: absolute; 265 top: 2px; 266 width: 7px; 267 height: 100%; 268 zoom: 1; 269 filter: alpha(opacity = 40); 270 opacity: 0.4; 271 @include right(2px); 272 273 &:hover, 274 &.mce-active { 275 zoom: 1; 276 background-color: #aaa; 277 filter: alpha(opacity = 60); 278 opacity: 0.6; 279 @include border-radius(7px); 280 } 281} 282 283.mce-scrollbar-h { 284 top: auto; 285 bottom: 2px; 286 width: 100%; 287 height: 7px; 288 @include right(auto); 289 @include left(2px); 290} 291 292.mce-scrollbar-thumb { 293 position: absolute; 294 width: 5px; 295 height: 100%; 296 background-color: #000; 297 border: 1px solid #888; 298 border-color: rgba(85, 85, 85, 0.6); 299 @include border-radius(7px); 300} 301 302.mce-scrollbar-h .mce-scrollbar-thumb { 303 width: 100%; 304 height: 5px; 305} 306 307.mce-scroll { 308 position: relative; 309} 310 311.mce-panel { 312 background-color: #fcfdfe; 313 border: 0 solid #ccc; 314} 315 316.mce-floatpanel { 317 position: absolute; 318 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 319 320 &.mce-fixed { 321 position: fixed; 322 } 323 324 .mce-arrow { 325 position: absolute; 326 display: block; 327 width: 0; 328 height: 0; 329 border-color: transparent; 330 border-style: solid; 331 border-width: 11px; 332 333 &::after { 334 position: absolute; 335 display: block; 336 width: 0; 337 height: 0; 338 content: ""; 339 border-color: transparent; 340 border-style: solid; 341 border-width: 10px; 342 } 343 } 344 345 &.mce-popover { 346 top: 0; 347 background: transparent; 348 background: #fff; 349 border: 1px solid rgba(0, 0, 0, 0.25); 350 @include border-radius(6px); 351 @include box-shadow(0 5px 10px rgba(0, 0, 0, 0.2)); 352 @include left(0); 353 354 &.mce-bottom { 355 margin-top: 10px; 356 *margin-top: 0; 357 358 > .mce-arrow { 359 top: -11px; 360 border-top-width: 0; 361 border-bottom-color: #9e9e9e; 362 border-bottom-color: rgba(0, 0, 0, 0.25); 363 @include left(50%); 364 @include margin-left(-11px); 365 366 &::after { 367 top: 1px; 368 border-top-width: 0; 369 border-bottom-color: #fff; 370 @include margin-left(-10px); 371 } 372 } 373 374 &.mce-start { 375 @include margin-left(-22px); 376 377 > .mce-arrow { 378 @include left(20px); 379 } 380 } 381 382 &.mce-end { 383 @include margin-left(22px); 384 385 > .mce-arrow { 386 @include right(10px); 387 @include left(auto); 388 } 389 } 390 } 391 } 392} 393 394#mce-modal-block { 395 position: fixed; 396 top: 0; 397 width: 100%; 398 height: 100%; 399 zoom: 1; 400 background: #000; 401 filter: alpha(opacity = 0); 402 opacity: 0; 403 @include left(0); 404 405 &.mce-in { 406 zoom: 1; 407 filter: alpha(opacity = 30); 408 opacity: 0.3; 409 } 410} 411 412.mce-window-move { 413 cursor: move; 414} 415 416.mce-window { 417 position: fixed; 418 top: 0; 419 background: transparent; 420 background: #fff; 421 opacity: 0; 422 -webkit-transition: opacity 150ms ease-in; 423 transition: opacity 150ms ease-in; 424 @include left(0); 425 @include box-shadow(0 3px 7px rgba(0, 0, 0, 0.3)); 426 @include border-radius(6px); 427 428 &.mce-in { 429 opacity: 1; 430 } 431 432 .mce-container-body { 433 display: block; 434 } 435 436 iframe { 437 width: 100%; 438 height: 100%; 439 } 440 441 &.mce-fullscreen { 442 @include border-radius(0); 443 444 .mce-foot { 445 @include border-radius(0); 446 } 447 } 448} 449 450.mce-window-head { 451 position: relative; 452 padding: 9px 15px; 453 border-bottom: 1px solid #c5c5c5; 454 455 .mce-close { 456 position: absolute; 457 top: 9px; 458 height: 20px; 459 overflow: hidden; 460 font-size: 18px; 461 font-weight: 600; 462 line-height: 20px; 463 color: #858585; 464 cursor: pointer; 465 @include right(15px); 466 } 467} 468 469.mce-close:hover { 470 color: #adadad; 471} 472 473.mce-window-head .mce-title { 474 font-size: 14px; 475 font-weight: 500; 476 line-height: 20px; 477 text-rendering: optimizeLegibility; 478 @include padding-right(10px); 479} 480 481.mce-foot { 482 display: block; 483 background-color: #fff; 484 border-top: 1px solid #c5c5c5; 485 @include border-radius(0 0 6px 6px); 486} 487 488.mce-window-head .mce-dragh { 489 position: absolute; 490 top: 0; 491 width: 90%; 492 height: 100%; 493 cursor: move; 494 @include left(0); 495} 496 497.mce-abs-layout { 498 position: relative; 499} 500 501body .mce-abs-layout-item { 502 position: absolute; 503} 504 505.mce-abs-end { 506 position: absolute; 507 width: 1px; 508 height: 1px; 509} 510 511.mce-container-body.mce-abs-layout { 512 overflow: hidden; 513} 514 515.mce-tooltip { 516 position: absolute; 517 padding: 5px; 518 zoom: 1; 519} 520 521.mce-tooltip-inner { 522 max-width: 200px; 523 font-size: 12px; 524 color: #fff; 525 text-align: center; 526 white-space: normal; 527 background-color: #000; 528 @include border-radius(3px); 529 @include padding(5px, 8px, 4px, 8px); 530} 531 532.mce-tooltip-arrow { 533 position: absolute; 534 width: 0; 535 height: 0; 536 line-height: 0; 537 border: 5px dashed #000; 538} 539 540.mce-tooltip-arrow-n { 541 border-bottom-color: #000; 542} 543 544.mce-tooltip-arrow-s { 545 border-top-color: #000; 546} 547 548.mce-tooltip-arrow-e { 549 @include rtl () { 550 border-left-color: #000; 551 } 552 @include ltr () { 553 border-right-color: #000; 554 } 555} 556 557.mce-tooltip-arrow-w { 558 @include rtl () { 559 border-right-color: #000; 560 } 561 @include ltr () { 562 border-left-color: #000; 563 } 564} 565 566.mce-tooltip-nw, 567.mce-tooltip-sw { 568 @include margin-left(-14px); 569} 570 571.mce-tooltip-n .mce-tooltip-arrow { 572 top: 0; 573 border-top: none; 574 border-right-color: transparent; 575 border-bottom-style: solid; 576 border-left-color: transparent; 577 @include left(50%); 578 @include margin-left(-5px); 579} 580 581.mce-tooltip-nw .mce-tooltip-arrow { 582 top: 0; 583 border-top: none; 584 border-right-color: transparent; 585 border-bottom-style: solid; 586 border-left-color: transparent; 587 @include left(10px); 588} 589 590.mce-tooltip-ne .mce-tooltip-arrow { 591 top: 0; 592 border-top: none; 593 border-right-color: transparent; 594 border-bottom-style: solid; 595 border-left-color: transparent; 596 @include right(10px); 597} 598 599.mce-tooltip-s .mce-tooltip-arrow { 600 bottom: 0; 601 border-top-style: solid; 602 border-right-color: transparent; 603 border-bottom: none; 604 border-left-color: transparent; 605 @include left(50%); 606 @include margin-left(-5px); 607} 608 609.mce-tooltip-sw .mce-tooltip-arrow { 610 bottom: 0; 611 border-top-style: solid; 612 border-right-color: transparent; 613 border-bottom: none; 614 border-left-color: transparent; 615 @include left(10px); 616} 617 618.mce-tooltip-se .mce-tooltip-arrow { 619 bottom: 0; 620 border-top-style: solid; 621 border-right-color: transparent; 622 border-bottom: none; 623 border-left-color: transparent; 624 @include right(10px); 625} 626 627.mce-tooltip-e .mce-tooltip-arrow { 628 top: 50%; 629 margin-top: -5px; 630 border-top-color: transparent; 631 border-right: none; 632 border-bottom-color: transparent; 633 border-left-style: solid; 634 @include right(0); 635} 636 637.mce-tooltip-w .mce-tooltip-arrow { 638 top: 50%; 639 margin-top: -5px; 640 border-top-color: transparent; 641 border-bottom-color: transparent; 642 @include left(0); 643 @include rtl () { 644 border-right: none; 645 border-left-style: solid; 646 } 647 @include ltr () { 648 border-right: none; 649 border-left-style: solid; 650 } 651} 652 653.mce-btn { 654 position: relative; 655 display: inline-block; 656 *display: inline; 657 *zoom: 1; 658 background-color: #fff; 659 @include box-shadow(rgba(#eee,1) 0 0 0 inset); 660 661 &:hover, 662 &:focus { 663 color: #eee; 664 background-color: #eee; 665 @include box-shadow(rgba(#ddd,1) 0 0 0 inset); 666 } 667 668 &.mce-disabled { 669 button, 670 &:hover button { 671 cursor: default; 672 zoom: 1; 673 filter: alpha(opacity = 40); 674 box-shadow: none; 675 opacity: 0.4; 676 } 677 } 678 679 &.mce-active { 680 background-color: #d6d6d6; 681 682 &:hover { 683 background-color: #d6d6d6; 684 } 685 } 686 687 &:not(.mce-disabled):active { 688 background-color: #d6d6d6; 689 } 690 691 button { 692 padding: 2px 6px; 693 overflow: visible; 694 font-size: 12px; 695 color: #333; 696 text-align: center; 697 cursor: pointer; 698 -webkit-appearance: none; 699 700 &::-moz-focus-inner { 701 padding: 0; 702 border: 0; 703 } 704 } 705} 706 707.mce-primary.mce-btn { 708 min-width: 50px; 709 color: #fff; 710 background-color: #006dcc; 711 border: 1px solid #b1b1b1; 712 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.25); 713 714 &:hover, 715 &:focus { 716 // stylelint-disable-next-line 717 background-color: #005fb3 !important; 718 } 719 720 &.mce-disabled { 721 button, 722 &:hover button { 723 cursor: default; 724 zoom: 1; 725 filter: alpha(opacity = 40); 726 opacity: 0.4; 727 @include box-shadow(none); 728 } 729 } 730 731 &.mce-active { 732 background-color: #005299; 733 734 &:hover { 735 background-color: #005299; 736 } 737 } 738 739 &:not(.mce-disabled):active { 740 background-color: #005299; 741 } 742 743 button { 744 color: #fff; 745 746 i { 747 color: #fff; 748 } 749 } 750} 751 752.mce-btn-large { 753 button { 754 padding: 9px 14px; 755 font-size: 12px; 756 line-height: normal; 757 @include border-radius(5px); 758 } 759 760 i { 761 margin-top: 2px; 762 } 763} 764 765.mce-btn-small { 766 button { 767 padding: 1px 5px; 768 *padding-bottom: 2px; 769 font-size: 12px; 770 } 771 772 i { 773 line-height: 20px; 774 *line-height: 18px; 775 vertical-align: top; 776 } 777} 778 779.mce-btn .mce-caret, 780.mce-btn-small .mce-caret { 781 margin-top: 8px; 782 @include margin-left(0); 783} 784 785.mce-caret { 786 display: inline-block; 787 *display: inline; 788 width: 0; 789 height: 0; 790 vertical-align: top; 791 *zoom: 1; 792 content: ""; 793 border-top: 4px solid #333; 794 border-right: 4px solid transparent; 795 border-left: 4px solid transparent; 796} 797 798.mce-disabled .mce-caret { 799 border-top-color: #aaa; 800} 801 802.mce-caret.mce-up { 803 border-top: 0; 804 border-bottom: 4px solid #333; 805} 806 807.mce-btn-group { 808 .mce-btn { 809 border: solid 1px #ccc; 810 border-radius: 0; 811 @include border-right(none); 812 } 813 814 .mce-first { 815 @include border-radius(3px, 0, 0, 3px); 816 } 817 818 .mce-last { 819 @include border-right(solid 1px #ccc); 820 @include border-radius(0 3px 3px 0); 821 } 822 823 .mce-first.mce-last { 824 border-radius: 3px; 825 } 826 827 .mce-btn.mce-flow-layout-item { 828 margin: 0; 829 } 830} 831 832i.mce-i-checkbox { 833 display: inline-block; 834 width: 14px; 835 height: 14px; 836 overflow: hidden; 837 *font-size: 0; 838 *line-height: 0; 839 text-align: center; 840 text-indent: -10em; 841 *text-indent: 0; 842 background-color: #f0f0f0; 843 border: 1px solid #c5c5c5; 844 border-radius: 3px; 845 @include margin(0, 3px, 0, 0); 846} 847 848.mce-checked i.mce-i-checkbox { 849 font-size: 12px; 850 line-height: 16px; 851 color: #333; 852 text-indent: 0; 853} 854 855.mce-checkbox { 856 cursor: pointer; 857 858 &:focus i.mce-i-checkbox, 859 &.mce-focus i.mce-i-checkbox { 860 border: 1px solid rgba(82, 168, 236, 0.8); 861 @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.65)); 862 } 863 864 &.mce-disabled { 865 .mce-label, 866 i.mce-i-checkbox { 867 color: #acacac; 868 } 869 } 870} 871 872.mce-colorbutton .mce-ico { 873 position: relative; 874} 875 876.mce-colorbutton-grid { 877 margin: 4px; 878} 879 880.mce-colorbutton { 881 button { 882 @include padding-right(4px); 883 } 884 885 .mce-preview { 886 position: absolute; 887 top: 50%; 888 display: block; 889 width: 13px; 890 height: 2px; 891 margin-top: 7px; 892 overflow: hidden; 893 background: #808080; 894 @include margin-left(-14px); 895 @include left(50%); 896 @include padding-right(3px); 897 } 898 899 &.mce-btn-small .mce-preview { 900 width: 16px; 901 @include padding-right(0); 902 @include margin-left(-16px); 903 } 904 905 .mce-open { 906 border-right: 1px solid transparent; 907 border-left: 1px solid transparent; 908 @include padding-left(4px); 909 } 910 911 &:hover .mce-open { 912 border-right-color: #bdbdbd; 913 border-left-color: #bdbdbd; 914 } 915 916 &.mce-btn-small .mce-open { 917 @include padding(0, 3px, 0, 3px); 918 } 919} 920 921.mce-combobox { 922 display: inline-block; 923 *display: inline; 924 *height: 32px; 925 *zoom: 1; 926 927 input { 928 height: 28px; 929 border: 1px solid #c5c5c5; 930 border-right-color: #c5c5c5; 931 } 932 933 &.mce-disabled input { 934 color: #adadad; 935 } 936 937 &.mce-has-open input { 938 @include border-radius(4px 0 0 4px); 939 } 940 941 .mce-btn { 942 @include border-left(0); 943 @include border-radius(0 4px 4px 0); 944 background-color: #c5c5c5; 945 @include box-shadow(rgba(#aaa,1) 0 -2px 0 inset); 946 } 947 948 button { 949 height: 26px; 950 } 951 952 &.mce-disabled .mce-btn button { 953 cursor: default; 954 zoom: 1; 955 filter: alpha(opacity = 40); 956 box-shadow: none; 957 opacity: 0.4; 958 } 959} 960 961.mce-path { 962 display: inline-block; 963 *display: inline; 964 padding: 8px; 965 white-space: normal; 966 *zoom: 1; 967 968 .mce-txt { 969 display: inline-block; 970 @include padding-right(3px); 971 } 972 973 .mce-path-body { 974 display: inline-block; 975 } 976} 977 978.mce-path-item { 979 display: inline-block; 980 *display: inline; 981 color: #333; 982 cursor: pointer; 983 *zoom: 1; 984 985 &:hover { 986 text-decoration: underline; 987 } 988 989 &:focus { 990 color: #fff; 991 background: #666; 992 } 993} 994 995.mce-path .mce-divider { 996 display: inline; 997} 998 999.mce-disabled .mce-path-item { 1000 color: #aaa; 1001} 1002 1003.mce-fieldset { 1004 border: 0 solid #9e9e9e; 1005 border-radius: 3px; 1006 1007 > .mce-container-body { 1008 margin-top: -15px; 1009 } 1010} 1011 1012.mce-fieldset-title { 1013 @include margin-left(5px); 1014 @include padding(0, 5px, 0, 5px); 1015} 1016 1017.mce-fit-layout { 1018 display: inline-block; 1019 *display: inline; 1020 *zoom: 1; 1021} 1022 1023.mce-fit-layout-item { 1024 position: absolute; 1025} 1026 1027.mce-flow-layout-item { 1028 display: inline-block; 1029 *display: inline; 1030 *zoom: 1; 1031 @include margin(2px, 0, 2px, 2px); 1032 1033 &.mce-last { 1034 @include margin-right(2px); 1035 } 1036} 1037 1038.mce-flow-layout { 1039 white-space: normal; 1040} 1041 1042.mce-tinymce-inline .mce-flow-layout { 1043 white-space: nowrap; 1044} 1045 1046.mce-rtl { 1047 .mce-path { 1048 direction: rtl; 1049 } 1050 1051 .mce-colorbutton { 1052 direction: rtl; 1053 1054 .mce-preview { 1055 @include margin-left(0); 1056 @include padding-right(0); 1057 @include padding-left(4px); 1058 @include margin-right(14px); 1059 } 1060 1061 &.mce-btn-small .mce-preview { 1062 @include margin-left(0); 1063 @include padding-right(0); 1064 @include margin-right(-17px); 1065 @include padding-left(0); 1066 } 1067 1068 button { 1069 padding-right: 10px; 1070 padding-left: 10px; 1071 } 1072 1073 .mce-open { 1074 padding-right: 4px; 1075 padding-left: 4px; 1076 } 1077 } 1078 1079 .mce-window-head { 1080 .mce-close { 1081 position: absolute; 1082 @include right(auto); 1083 @include left(15px); 1084 } 1085 1086 .mce-dragh { 1087 @include left(auto); 1088 @include right(0); 1089 } 1090 1091 .mce-title { 1092 direction: rtl; 1093 @include text-align(right); 1094 } 1095 } 1096 1097 .mce-wordcount { 1098 @include left(0); 1099 @include right(auto); 1100 } 1101 1102 .mce-splitbtn { 1103 text-align: right; 1104 direction: rtl; 1105 1106 button { 1107 padding-right: 10px; 1108 padding-left: 10px; 1109 } 1110 1111 .mce-open { 1112 padding-right: 4px; 1113 padding-left: 4px; 1114 } 1115 } 1116 1117 .mce-menubtn button { 1118 text-align: right; 1119 direction: rtl; 1120 } 1121 1122 .mce-label { 1123 @include text-align(right); 1124 direction: rtl; 1125 } 1126 1127 .mce-flow-layout { 1128 @include text-align(right); 1129 direction: rtl; 1130 } 1131 1132 .mce-flow-layout-item { 1133 @include margin(2px, 2px, 2px, 0); 1134 1135 &.mce-last { 1136 @include margin-left(2px); 1137 } 1138 } 1139 1140 .mce-listbox { 1141 .mce-caret { 1142 right: auto; 1143 left: 8px; 1144 } 1145 1146 button { 1147 padding-right: 10px; 1148 padding-left: 20px; 1149 } 1150 } 1151 1152 .mce-menu-item { 1153 padding: 6px 12px 6px 15px; 1154 text-align: right; 1155 direction: rtl; 1156 1157 .mce-caret { 1158 margin-right: 0; 1159 margin-left: 6px; 1160 border-right: 4px solid #333; 1161 border-left: 0; 1162 } 1163 1164 &.mce-selected .mce-caret, 1165 &:focus .mce-caret, 1166 &:hover .mce-caret { 1167 border-right-color: #fff; 1168 border-left-color: transparent; 1169 } 1170 } 1171 1172 .mce-tabs { 1173 text-align: right; 1174 direction: rtl; 1175 } 1176 1177 .mce-tab { 1178 border-width: 0 0 0 1px; 1179 } 1180 1181 .mce-textbox { 1182 text-align: right; 1183 direction: rtl; 1184 } 1185 1186 .mce-btn button { 1187 direction: rtl; 1188 } 1189 1190 .mce-checkbox { 1191 direction: rtl; 1192 @include text-align(right); 1193 } 1194 1195 i.mce-i-checkbox { 1196 @include margin(0, 0, 0, 3px); 1197 } 1198} 1199 1200.mce-iframe { 1201 width: 100%; 1202 height: 100%; 1203 border: 0 solid #9e9e9e; 1204} 1205 1206.mce-label { 1207 display: inline-block; 1208 *display: inline; 1209 overflow: hidden; 1210 *zoom: 1; 1211 border: 0; 1212 1213 &.mce-autoscroll { 1214 overflow: auto; 1215 } 1216 1217 &.mce-disabled { 1218 color: #aaa; 1219 } 1220 1221 &.mce-multiline { 1222 white-space: pre-wrap; 1223 } 1224} 1225 1226.mce-menubar { 1227 border: 1px solid #eee; 1228 1229 .mce-caret { 1230 border-top-color: #333; 1231 } 1232 1233 .mce-menubtn { 1234 background: transparent; 1235 filter: none; 1236 border-color: transparent; 1237 border-radius: 0; 1238 box-shadow: none; 1239 1240 button span { 1241 color: #333; 1242 } 1243 1244 &:hover, 1245 &.mce-active, 1246 &:focus { 1247 background: #e6e6e6; 1248 filter: none; 1249 border-color: transparent; 1250 box-shadow: none; 1251 } 1252 } 1253} 1254 1255.mce-menubtn { 1256 &.mce-disabled span { 1257 color: #aaa; 1258 } 1259 1260 span { 1261 margin-right: 2px; 1262 line-height: 20px; 1263 *line-height: 16px; 1264 color: #333; 1265 } 1266 1267 &.mce-btn-small span { 1268 font-size: 12px; 1269 } 1270 1271 &.mce-fixed-width { 1272 span { 1273 display: inline-block; 1274 overflow-x: hidden; 1275 text-overflow: ellipsis; 1276 } 1277 1278 &.mce-btn-small span { 1279 width: 70px; 1280 } 1281 } 1282 1283 .mce-caret { 1284 *margin-top: 6px; 1285 } 1286} 1287 1288.mce-listbox { 1289 button { 1290 position: relative; 1291 padding-right: 20px; 1292 text-align: left; 1293 } 1294 1295 .mce-caret { 1296 position: absolute; 1297 top: 50%; 1298 right: 8px; 1299 margin-top: -2px; 1300 } 1301} 1302 1303.mce-menu-shortcut { 1304 display: inline-block; 1305 *display: inline; 1306 padding: 0 15px 0 20px; 1307 color: #adadad; 1308 *zoom: 1; 1309} 1310 1311.mce-menu-item { 1312 display: block; 1313 padding: 6px 15px 6px 12px; 1314 margin-bottom: 1px; 1315 clear: both; 1316 font-weight: 500; 1317 line-height: 20px; 1318 line-height: normal; 1319 color: #333; 1320 white-space: nowrap; 1321 cursor: pointer; 1322 border-left: 4px solid transparent; 1323 1324 &:hover, 1325 &.mce-selected, 1326 &:focus { 1327 color: #fff; 1328 text-decoration: none; 1329 background-color: #3ed2f0; 1330 } 1331 1332 .mce-ico, 1333 .mce-text { 1334 color: #333; 1335 } 1336 1337 &.mce-disabled { 1338 .mce-text, 1339 .mce-ico { 1340 color: #adadad; 1341 } 1342 } 1343 1344 &:hover .mce-text, 1345 &.mce-selected .mce-text, 1346 &:hover .mce-ico, 1347 &.mce-selected .mce-ico, 1348 &:focus .mce-ico { 1349 color: #fff; 1350 } 1351 1352 &.mce-disabled:hover { 1353 background: #ccc; 1354 } 1355 1356 &:hover .mce-menu-shortcut, 1357 &.mce-selected .mce-menu-shortcut, 1358 &:focus .mce-menu-shortcut { 1359 color: #fff; 1360 } 1361 1362 .mce-caret { 1363 margin-top: 4px; 1364 *margin-top: 3px; 1365 margin-right: 6px; 1366 border-top: 4px solid transparent; 1367 border-bottom: 4px solid transparent; 1368 border-left: 4px solid #333; 1369 } 1370 1371 &.mce-selected .mce-caret, 1372 &:focus .mce-caret, 1373 &:hover .mce-caret { 1374 border-left-color: #fff; 1375 } 1376} 1377 1378.mce-menu-align { 1379 .mce-menu-shortcut { 1380 position: absolute; 1381 right: 0; 1382 *margin-top: -2px; 1383 } 1384 1385 .mce-caret { 1386 position: absolute; 1387 right: 0; 1388 } 1389} 1390 1391.mce-menu-item.mce-active i { 1392 visibility: visible; 1393} 1394 1395.mce-menu-item-preview.mce-active { 1396 border-left: 5px solid #aaa; 1397} 1398 1399.mce-menu-item-normal.mce-active { 1400 background-color: #dff5f9; 1401 1402 .mce-text { 1403 color: #333; 1404 } 1405 1406 &:hover { 1407 .mce-text, 1408 .mce-ico { 1409 color: #fff; 1410 } 1411 } 1412} 1413 1414div.mce-menu .mce-menu-item-sep, 1415.mce-menu-item-sep:hover { 1416 height: 1px; 1417 padding: 0; 1418 margin: 9px 1px; 1419 overflow: hidden; 1420 cursor: default; 1421 background: #cbcbcb; 1422 filter: none; 1423 border: 0; 1424 border-bottom: 1px solid #fff; 1425} 1426 1427.mce-menu.mce-rtl { 1428 direction: rtl; 1429} 1430 1431.mce-menu-align.mce-rtl { 1432 .mce-menu-shortcut, 1433 .mce-caret { 1434 right: auto; 1435 left: 0; 1436 } 1437} 1438 1439.mce-menu { 1440 position: absolute; 1441 top: 0; 1442 left: 0; 1443 z-index: 1000; 1444 z-index: 1002; 1445 min-width: 160px; 1446 max-height: 400px; 1447 padding: 5px 0; 1448 margin: 2px 0 0; 1449 overflow: auto; 1450 overflow-x: hidden; 1451 background: transparent; 1452 background: #fff; 1453 border: 1px solid #989898; 1454 border: 1px solid rgba(0, 0, 0, 0.2); 1455 border-radius: 6px; 1456 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 1457 1458 i { 1459 display: none; 1460 } 1461} 1462 1463.mce-menu-has-icons i { 1464 display: inline-block; 1465 *display: inline; 1466} 1467 1468.mce-menu-sub-tr-tl { 1469 margin: -6px 0 0 -1px; 1470} 1471 1472.mce-menu-sub-br-bl { 1473 margin: 6px 0 0 -1px; 1474} 1475 1476.mce-menu-sub-tl-tr { 1477 margin: -6px 0 0 1px; 1478} 1479 1480.mce-menu-sub-bl-br { 1481 margin: 6px 0 0 1px; 1482} 1483 1484.mce-container-body { 1485 .mce-resizehandle { 1486 position: absolute; 1487 right: 0; 1488 bottom: 0; 1489 width: 16px; 1490 height: 16px; 1491 margin: 0; 1492 cursor: s-resize; 1493 visibility: visible; 1494 } 1495 1496 .mce-resizehandle-both { 1497 cursor: se-resize; 1498 } 1499} 1500 1501i.mce-i-resize { 1502 color: #333; 1503} 1504 1505.mce-spacer { 1506 visibility: hidden; 1507} 1508 1509.mce-splitbtn { 1510 button { 1511 padding-right: 4px; 1512 } 1513 1514 .mce-open { 1515 padding-left: 4px; 1516 border-right: 1px solid transparent; 1517 border-left: 1px solid transparent; 1518 1519 &.mce-active { 1520 box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); 1521 } 1522 } 1523 1524 &.mce-btn-small .mce-open { 1525 padding: 0 3px; 1526 } 1527} 1528 1529.mce-stack-layout-item { 1530 display: block; 1531} 1532 1533.mce-tabs { 1534 display: block; 1535 border-bottom: 1px solid #c5c5c5; 1536} 1537 1538.mce-tab { 1539 display: inline-block; 1540 *display: inline; 1541 height: 13px; 1542 padding: 8px; 1543 cursor: pointer; 1544 *zoom: 1; 1545 background: #e3e3e3; 1546 border: 1px solid #c5c5c5; 1547 border-width: 0 1px 0 0; 1548 1549 &:hover { 1550 background: #fdfdfd; 1551 } 1552 1553 &.mce-active { 1554 height: 14px; 1555 margin-bottom: -1px; 1556 background: #fdfdfd; 1557 border-bottom-color: transparent; 1558 } 1559} 1560 1561.mce-textbox { 1562 display: inline-block; 1563 height: 28px; 1564 padding: 0 4px; 1565 color: #333; 1566 white-space: pre-wrap; 1567 *white-space: pre; 1568 resize: none; 1569 background: #fff; 1570 border: 1px solid #c5c5c5; 1571 border-radius: 3px; 1572 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 1573 transition: border linear 0.2s, box-shadow linear 0.2s; 1574 1575 &:focus, 1576 &.mce-focus { 1577 border-color: rgba(82, 168, 236, 0.8); 1578 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.65); 1579 } 1580 1581 &.mce-multiline { 1582 padding: 4px; 1583 } 1584 1585 &.mce-disabled { 1586 color: #adadad; 1587 } 1588} 1589 1590.mce-placeholder .mce-textbox { 1591 color: #aaa; 1592} 1593 1594.mce-throbber { 1595 position: absolute; 1596 top: 0; 1597 left: 0; 1598 width: 100%; 1599 height: 100%; 1600 zoom: 1; 1601 background: #fff url("../img/loader.gif") no-repeat center center; 1602 filter: alpha(opacity = 60); 1603 opacity: 0.6; 1604} 1605 1606.mce-i-none { 1607 width: 16px; 1608 height: 16px; 1609 margin: 2px 0; 1610} 1611 1612.mce-ico { 1613 @extend .icon; 1614 font-size: $icon-size-base; 1615 line-height: 20px; 1616} 1617 1618.mce-i-save::before { 1619 content: "\f0c7"; 1620} 1621 1622.mce-i-newdocument::before { 1623 content: "\f016"; 1624} 1625 1626.mce-i-fullpage::before { 1627 content: "\f065"; 1628} 1629 1630.mce-i-alignleft::before { 1631 content: "\f036"; 1632} 1633 1634.mce-i-aligncenter::before { 1635 content: "\f037"; 1636} 1637 1638.mce-i-alignright::before { 1639 content: "\f038"; 1640} 1641 1642.mce-i-alignjustify::before { 1643 content: "\f039"; 1644} 1645 1646.mce-i-cut::before { 1647 content: "\f0c4"; 1648} 1649 1650.mce-i-paste::before { 1651 content: "\f0ea"; 1652} 1653 1654.mce-i-searchreplace::before { 1655 content: "\e009"; 1656} 1657 1658.mce-i-bullist::before { 1659 content: "\f0ca"; 1660} 1661 1662.mce-i-numlist::before { 1663 content: "\f0cb"; 1664} 1665 1666.mce-i-indent::before { 1667 content: "\f03c"; 1668} 1669 1670.mce-i-outdent::before { 1671 content: "\f03b"; 1672} 1673 1674.mce-i-blockquote::before { 1675 content: "\f10e"; 1676} 1677 1678.mce-i-undo::before { 1679 content: "\f112"; 1680} 1681 1682.mce-i-redo::before { 1683 content: "\f064"; 1684} 1685 1686.mce-i-link::before { 1687 content: "\f0c1"; 1688} 1689 1690.mce-i-unlink::before { 1691 content: "\f127"; 1692} 1693 1694.mce-i-anchor::before { 1695 content: "\f13d"; 1696} 1697 1698.mce-i-image::before { 1699 content: "\f03e"; 1700} 1701 1702.mce-i-media::before { 1703 content: "\f008"; 1704} 1705 1706.mce-i-help::before { 1707 content: "\f059"; 1708} 1709 1710.mce-i-code::before { 1711 content: "\f121"; 1712} 1713 1714.mce-i-inserttime::before { 1715 content: "\f017"; 1716} 1717 1718.mce-i-preview::before { 1719 content: "\f06e"; 1720} 1721 1722.mce-i-forecolor::before, 1723.mce-i-backcolor::before { 1724 content: ""; 1725} 1726 1727.mce-i-table::before { 1728 content: "\f0ce"; 1729} 1730 1731.mce-i-hr::before { 1732 content: ""; 1733} 1734 1735.mce-i-removeformat::before { 1736 content: ""; 1737} 1738 1739.mce-i-subscript::before { 1740 content: "\f12c"; 1741} 1742 1743.mce-i-superscript::before { 1744 content: "\f12b"; 1745} 1746 1747.mce-i-charmap::before { 1748 content: ""; 1749} 1750 1751.mce-i-emoticons::before { 1752 content: "\f11a"; 1753} 1754 1755.mce-i-print::before { 1756 content: "\f02f"; 1757} 1758 1759.mce-i-fullscreen::before { 1760 content: "\f065"; 1761} 1762 1763.mce-i-spellchecker::before { 1764 content: ""; 1765} 1766 1767.mce-i-nonbreaking::before { 1768 content: ""; 1769} 1770 1771.mce-i-template::before { 1772 content: ""; 1773} 1774 1775.mce-i-pagebreak::before { 1776 content: ""; 1777} 1778 1779.mce-i-restoredraft::before { 1780 content: ""; 1781} 1782 1783.mce-i-untitled::before { 1784 content: ""; 1785} 1786 1787.mce-i-bold::before { 1788 content: "\f032"; 1789} 1790 1791.mce-i-italic::before { 1792 content: "\f033"; 1793} 1794 1795.mce-i-underline::before { 1796 content: "\f0cd"; 1797} 1798 1799.mce-i-strikethrough::before { 1800 content: "\f0cc"; 1801} 1802 1803.mce-i-visualchars::before, 1804.mce-i-visualblocks::before { 1805 content: ""; 1806} 1807 1808.mce-i-ltr::before { 1809 content: ""; 1810} 1811 1812.mce-i-rtl::before { 1813 content: "\e030"; 1814} 1815 1816.mce-i-copy::before { 1817 content: "\f0c5"; 1818} 1819 1820.mce-i-resize::before { 1821 content: "\f07d"; 1822} 1823 1824.mce-i-browse::before { 1825 content: "\f07c"; 1826} 1827 1828.mce-i-pastetext::before { 1829 content: ""; 1830} 1831 1832.mce-i-checkbox::before { 1833 content: "\f00c"; 1834} 1835 1836.mce-i-selected { 1837 visibility: hidden; 1838 1839 &::before { 1840 content: "\f00c"; 1841 } 1842} 1843 1844i.mce-i-backcolor { 1845 background: #bbb; 1846} 1847