preview.css (28016B)
1 html, 2 body { 3 /*transform: translateZ(0);*/ 4 /*transform-origin: top left;*/ 5 } 6 7 8 .y-move { 9 position: relative; 10 } 11 12 body [data-hover-fx] .overlay { 13 opacity: 0.7; 14 } 15 16 body [data-hover-fx] .swap-inner { 17 opacity: 1; 18 } 19 20 div { 21 -moz-user-select: none; 22 -ms-user-select: none; 23 -webkit-user-select: none; 24 user-select: none; 25 } 26 27 [contenteditable]:focus { 28 outline: 1px solid #ccc; 29 } 30 31 [contenteditable]:read-write:focus { 32 outline: 1px solid #ccc; 33 } 34 35 .drag-handle { 36 position: absolute !important; 37 top: -20px; 38 left: 0px; 39 background-color: #0F87FF; 40 width: 20px; 41 height: 20px; 42 } 43 44 div#cp-overlays { 45 position: absolute; 46 z-index: 999999; 47 top: 0px; 48 } 49 50 .add-content-overlay .buttons { 51 position: absolute; 52 } 53 54 .add-content-overlay .add { 55 width: 112px; 56 border-radius: 8px; 57 padding-left: 24px; 58 padding-right: 10px; 59 background-position: 7px 6px; 60 background-size: 11px; 61 line-height: 23px; 62 font-size: 10px; 63 text-align: center; 64 background-color: #0085ba; 65 border: 2px solid #fff; 66 -webkit-box-shadow: 0 2px 1px rgba(46, 68, 83, 0.15); 67 box-shadow: 0 2px 1px rgba(46, 68, 83, 0.15); 68 color: #ffffff; 69 font-family: sans-serif; 70 background-image: url('../images/plus.png'); 71 background-repeat: no-repeat; 72 cursor: pointer; 73 user-select: none; 74 text-transform: uppercase; 75 } 76 77 .add-content-overlay .add:hover { 78 background-color: #008ec2 !important; 79 } 80 81 .node-hover-overlay[is-dragging=true] { 82 opacity: 0; 83 /*display: none!important;*/ 84 } 85 86 .node-hover-overlay .remove, .add-content-overlay .remove, .item-hover-overlay .remove { 87 background-color: hsla(15, 100%, 59%, 1); 88 font-weight: inherit; 89 color: #ffffff; 90 text-rendering: geometricPrecision; 91 border-radius: 100%; 92 border: 2px solid #fff; 93 -webkit-box-shadow: 0 2px 1px rgba(46, 68, 83, 0.15); 94 background-image: url(../images/trash-o.png); 95 background-position: center center; 96 background-repeat: no-repeat; 97 image-rendering: pixelated; 98 text-align: left; 99 } 100 101 .node-hover-overlay .move { 102 background-color: #0084b8; 103 text-align: center; 104 font-weight: inherit; 105 color: #ffffff; 106 font-family: sans-serif; 107 text-rendering: geometricPrecision; 108 border-radius: 100%; 109 border: 2px solid #fff; 110 -webkit-box-shadow: 0 2px 1px rgba(46, 68, 83, 0.15); 111 background-image: url(../images/up-down.png); 112 background-position: center center; 113 background-repeat: no-repeat; 114 image-rendering: pixelated; 115 position: absolute; 116 top: -12px; 117 left: -12px; 118 width: 24px; 119 height: 24px; 120 cursor: pointer; 121 z-index: 1000; 122 } 123 124 .node-hover-overlay .move:hover { 125 background-color: #008ec2 !important; 126 } 127 128 .node-hover-overlay .remove, .add-content-overlay .remove, .item-hover-overlay .remove { 129 position: absolute; 130 display: inline-block; 131 width: 24px; 132 height: 24px; 133 cursor: pointer; 134 opacity: 1; 135 box-sizing: border-box; 136 top: -12px; 137 right: 0px; 138 left: auto; 139 line-height: 20px; 140 padding-left: 4px; 141 font-size: 15px; 142 } 143 144 .node-hover-overlay .remove:hover, .add-content-overlay .remove:hover, .item-hover-overlay .remove:hover { 145 background-color: hsla(8, 100%, 47%, 1); 146 } 147 148 .node-hover-overlay .remove { 149 float: none; 150 position: absolute; 151 top: -12px; 152 right: -12px; 153 z-index: 100; 154 } 155 156 .node-hover-overlay .remove:hover { 157 /* opacity: 0.8; */ 158 } 159 160 .node-hover-overlay .edit-text-btn { 161 /*background-color: #666;*/ 162 vertical-align: middle; 163 display: inline-block; 164 height: 24px; 165 line-height: 24px; 166 font-size: 10px; 167 float: left; 168 } 169 170 .node-hover-overlay, .node-content-overlay { 171 background-color: rgba(255, 255, 255, 0); 172 position: absolute; 173 } 174 175 .node-hover-overlay .overlay-border { 176 /*outline: 1px solid hsla(0, 0%, 90%, 1);*/ 177 border: 0px solid hsla(0, 0%, 90%, 1); 178 position: absolute; 179 } 180 181 .node-hover-overlay .overlay-left { 182 border-right-width: 1px; 183 } 184 185 .node-hover-overlay .overlay-right { 186 border-left-width: 1px; 187 } 188 189 .node-hover-overlay .overlay-top { 190 border-bottom-width: 1px; 191 } 192 193 .node-hover-overlay .overlay-bottom { 194 border-top-width: 1px; 195 196 } 197 198 .mce-edit-focus { 199 outline: none !important; 200 } 201 202 .node-overlay .overlay-border { 203 outline: 1px dashed rgba(204, 204, 204, 0.25); 204 position: absolute; 205 } 206 207 .node-hover-overlay .top-container { 208 position: absolute; 209 margin-top: -22px; 210 left: 50%; 211 font-weight: normal; 212 color: white; 213 height: 24px; 214 padding: 0px 6px; 215 text-align: center; 216 letter-spacing: normal; 217 text-transform: uppercase; 218 font-family: 'Open Sans'; 219 transform: translateX(-50%); 220 white-space: nowrap; 221 vertical-align: middle; 222 z-index: 999; 223 background-color: #666; 224 } 225 226 [data-editable] { 227 position: relative; 228 } 229 230 [data-editable]:hover { 231 /*outline: 2px dashed #666; */ 232 } 233 234 .node-overlay { 235 z-index: 100; 236 } 237 238 .overlay-toolbar { 239 height: 40px; 240 width: 40px; 241 background-color: #0085ba; 242 box-sizing: border-box; 243 text-transform: capitalize; 244 background-image: url('../images/toolbar-cog.png'); 245 background-size: cover; 246 margin: 20px 20px 0px 0px; 247 border-radius: 100%; 248 border: 2px solid #fff; 249 -webkit-box-shadow: 0 2px 1px rgba(46, 68, 83, 0.15); 250 box-shadow: 0 2px 1px rgba(46, 68, 83, 0.15); 251 cursor: pointer; 252 position: relative; 253 } 254 255 .cog-outside .overlay-toolbar { 256 margin: -20px 0px 0px 0px; 257 } 258 259 .overlay-tooltip-panel { 260 font-family: 'Open Sans'; 261 position: absolute; 262 z-index: 2; 263 top: 0px; 264 right: 0px; 265 left: auto; 266 visibility: visible; 267 display: block; 268 } 269 270 .overlay-tooltip-group.name-group { 271 min-width: 20px; 272 background-color: #666666; 273 line-height: 100%; 274 height: auto; 275 padding: 5px; 276 position: absolute; 277 top: 9px; 278 right: 41px; 279 left: auto; 280 opacity: 0; 281 transition: all .4s; 282 pointer-events: none; 283 } 284 285 .overlay-toolbar:hover .overlay-tooltip-group.name-group { 286 opacity: 1; 287 } 288 289 .overlay-tooltip-group { 290 font-size: 10px; 291 display: block; 292 display: block; 293 border-radius: 2px; 294 height: 47px; 295 padding-top: 0px; 296 padding-bottom: 0px; 297 position: relative; 298 line-height: 30px; 299 box-sizing: border-box; 300 /* width: 30px; */ 301 border-radius: 0px; 302 box-sizing: border-box; 303 right: 0px; 304 left: auto; 305 top: 0px; 306 position: absolute; 307 } 308 309 .overlay-toolbar:hover .options-group.cog { 310 left: -114px; 311 width: 158px; 312 } 313 314 .node-overlay.section-overlay { 315 z-index: 110000; 316 } 317 318 .node-overlay.section-overlay:hover { 319 z-index: 120000; 320 } 321 322 .name-group { 323 padding-right: 7px; 324 } 325 326 .overlay-tooltip-group.move-group, .overlay-tooltip-group.edit-group, .overlay-tooltip-group.image-group { 327 margin-left: 0px; 328 padding-right: 0px; 329 } 330 331 .overlay-tooltip-panel .tab_text { 332 color: white; 333 display: block; 334 white-space: nowrap; 335 font-size: 10px; 336 } 337 338 .node-overlay.inside { 339 z-index: 99; 340 } 341 342 .node-overlay.hide { 343 display: none !important; 344 } 345 346 .node-overlay.inside .overlay-toolbar { 347 top: 30px; 348 position: absolute; 349 } 350 351 .tab_showMore { 352 display: block; 353 width: 12px; 354 height: 12px; 355 margin-left: 3px; 356 margin-right: 3px; 357 float: left; 358 background-position: center center; 359 background-repeat: no-repeat; 360 cursor: pointer; 361 } 362 363 .options-group:hover { 364 } 365 366 .options-group.cog.overlay-tooltip-group.fixed-overlay.active a { 367 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABHNC…t58ZZ7zMHGX2M0XZuzPCa4iq1z+RLNOCfDda5wavN2g8syXLmy2TplAAAAABJRU5ErkJggg=='); 368 } 369 370 .tab_icon { 371 background-repeat: no-repeat; 372 background-position: center center; 373 margin-left: 3px; 374 margin-right: 3px; 375 width: 30px; 376 height: 30px; 377 float: left; 378 cursor: pointer; 379 padding: 0px; 380 margin: 0px; 381 display: block; 382 } 383 384 .overlay-tooltip-group.active .tab_icon { 385 background-color: white !important; 386 } 387 388 .tab_settings { 389 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwOC8yNi8xNRvoYHUAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAn0lEQVQYlYWQQQ4BQRBFX8wxbXCBWZi1hQ1XsJBwkZGMBYIjMEd5FlNNpxP8pJKu/yu/uj4qRTUOqEstPcZqq07VPoYf0Xehv4c7f6NVGTFgxwcXYA3cM24PQPztGQ4ntYptlXoNvlcbinWL4qhlLqbr01HfnB9qnRxmmcFZXam3jJvkabR/0ujyNLbAEZgBz+D66A/AJqVRVh1u81J7AThrZSlDDc2GAAAAAElFTkSuQmCC'); 390 background-repeat: no-repeat; 391 background-position: center center; 392 margin-left: 3px; 393 margin-right: 3px; 394 width: 30px; 395 height: 30px; 396 float: left; 397 cursor: pointer; 398 padding: 0px; 399 margin: 0px; 400 display: block; 401 } 402 403 .options-group.cog.overlay-tooltip-group.fixed-overlay.active a { 404 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwOC8yNi8xNRvoYHUAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAA1klEQVQYlW3RMUoDURAG4G9XDxK9goKNFhYWOYM2ibCWK6itlYWQxsZiA5EVyRlSprDRwitED2IYC2dxCf4wzPv/mXm894+I0A9NXGsiNFFv1oqIUEyd4hwvuMUAK9xhhCYq822/uMARjv1hF095/sa8TNL2mt5xj4+e9gyFJmrU2MEbDqOyLqa2ku/jC48lHrIRFlFZQ+ZF6gNMStzkJAzzRpmHqa9w2bkxxqz35iVOsJfaKCpt58ZZ7zMHGX2M0XZuzPCa4iq1z+RLNOCfDda5wavN2g8syXLmy2TplAAAAABJRU5ErkJggg=='); 405 } 406 407 .overlay-tooltip-group .edit-group-img, .overlay-tooltip-group .image-group-img { 408 display: block; 409 width: 30px; 410 height: 30px; 411 margin-left: 3px; 412 margin-right: 3px; 413 float: left; 414 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMTAvMzAvMTSLoWh2AAAAVUlEQVQYlX2MwQ2AMAzEXMSfJRiHTfgDA/NhCvMJUoG0lk6Kck4wh8iqzip8ijpHdKc6tcRHMub040/KxCWTMnFTL3WvdqoUVaDQRqAMHeHFWF11uQEsU9Gykw0/vQAAAABJRU5ErkJggg=='); 415 background-position: center center; 416 background-repeat: no-repeat; 417 cursor: pointer; 418 } 419 420 .options-group .overlay-contextual-menu { 421 float: left; 422 position: absolute; 423 right: 0px; 424 font-family: 'Open Sans', Arial, Helvetica, sans-serif; 425 font-size: 11px; 426 color: #fff; 427 margin: 0; 428 padding: 0; 429 border-radius: 3px; 430 background-color: #FFFFFF; 431 display: none; 432 box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.2); 433 top: 39px; 434 z-index: 999; 435 } 436 437 .options-group .overlay-contextual-menu span.cog-item.title { 438 cursor: default; 439 background-color: rgb(242, 242, 242); 440 font-family: Arial, Helvetica, sans-serif; 441 font-size: 10px; 442 font-weight: bold; 443 line-height: 120%; 444 color: rgb(121, 121, 121); 445 text-align: left; 446 } 447 448 .options-group .overlay-contextual-menu span { 449 position: relative; 450 left: 0px; 451 top: 0px; 452 cursor: pointer; 453 float: left; 454 z-index: 999; 455 padding: 10px; 456 -webkit-transition: all .2s; 457 margin: 0px; 458 text-indent: 0px; 459 font-weight: normal; 460 box-sizing: border-box; 461 min-width: 130px; 462 white-space: nowrap; 463 width: 100%; 464 font-family: Arial, Helvetica, sans-serif; 465 font-size: 12px; 466 line-height: 120%; 467 color: rgb(51, 51, 51); 468 text-align: left; 469 user-select: none; 470 -webkit-user-select: none; 471 } 472 473 .options-group.active .overlay-contextual-menu { 474 display: block; 475 } 476 477 .options-group.active.reverse .overlay-contextual-menu { 478 display: block; 479 top: auto; 480 bottom: 48px; 481 } 482 483 .options-group .overlay-contextual-menu > span:hover, .options-group .overlay-contextual-menu span .cog-subitems span:hover { 484 background-color: rgb(77, 165, 255); 485 color: white; 486 z-index: 1000; 487 } 488 489 .options-group .overlay-contextual-menu span .cog-subitems { 490 box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.2); 491 display: none; 492 position: absolute; 493 right: 100%; 494 left: auto; 495 top: 0px; 496 background-color: #ffffff; 497 } 498 499 .options-group .overlay-contextual-menu span .cog-subitems:after { 500 content: " "; 501 background: transparent; 502 position: absolute; 503 width: 10px; 504 height: 80px; 505 z-index: -1; 506 left: 100%; 507 top: 0px; 508 } 509 510 .options-group .overlay-contextual-menu span .cog-subitems:before { 511 content: " "; 512 background: transparent; 513 position: absolute; 514 width: 100%; 515 height: 80px; 516 left: 0px; 517 top: -36px; 518 z-index: -1; 519 } 520 521 .options-group .overlay-contextual-menu span .cog-subitems.big-heat-area:before { 522 height: 200%; 523 top: -50%; 524 width: 200%; 525 left: -50%; 526 display: inline-block; 527 } 528 529 span.cog-item.sortable-item { 530 background-image: url(../images/reorder-handler.png?x=3); 531 background-repeat: no-repeat; 532 background-position: 6px center; 533 padding-left: 20px; 534 border-bottom: 1px solid #a4a4a4; 535 cursor: ns-resize; 536 } 537 538 .options-group .overlay-contextual-menu span .cog-subitems span.ui-sortable:hover { 539 background-color: #ffffff; 540 color: rgb(51, 51, 51); 541 } 542 543 .cog-item .picker { 544 box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.2); 545 background-color: #FFFFFF; 546 width: 240px; 547 } 548 549 .options-group .overlay-contextual-menu span:hover .cog-subitems { 550 display: block; 551 } 552 553 .reiki-customizer-ordering-overlay { 554 position: absolute; 555 width: 100%; 556 height: 100%; 557 background: rgba(0, 133, 186, 0.4); 558 -webkit-animation: pulsate 1s infinite; 559 animation: pulsate 1s infinite; 560 z-index: 3; 561 top: 0px; 562 left: 0px; 563 } 564 565 @-webkit-keyframes pulsate { 566 0% { 567 background-color: rgba(0, 133, 186, 0.2); 568 } 569 50% { 570 background: rgba(0, 133, 186, 0.4) 571 } 572 100% { 573 background: rgba(0, 133, 186, 0.2); 574 } 575 } 576 577 .subitems-arrow::after { 578 content: '\27a4'; 579 position: absolute; 580 right: 4px; 581 font-size: 6px; 582 text-align: center; 583 color: inherit; 584 } 585 586 .brush { 587 background-image: url('icons/brush.png'); 588 } 589 590 .overlay-tooltip-group.active .brush { 591 background-image: url('icons/brush-hover.png'); 592 } 593 594 .overlay-tooltip-group.color .picker { 595 display: none; 596 position: absolute; 597 width: 229px; 598 height: auto; 599 background: #fff; 600 left: 0px; 601 top: 30px; 602 box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.28); 603 z-index: -1; 604 } 605 606 .overlay-tooltip-group.color.active .picker { 607 display: block; 608 } 609 610 .sp-container { 611 background-color: transparent; 612 border: none; 613 } 614 615 .sp-picker-container { 616 width: 188px; 617 border: none; 618 padding-top: 0px; 619 margin-bottom: -304px; 620 } 621 622 .sp-button-container.sp-cf { 623 display: none; 624 } 625 626 .sp-clear-enabled .sp-clear { 627 left: 94%; 628 height: 12px; 629 display: none; 630 } 631 632 .sp-clear-enabled .sp-hue { 633 left: 94%; 634 top: 0px; 635 height: 100%; 636 } 637 638 .sp-color { 639 right: 8%; 640 } 641 642 .sp-top.sp-cf { 643 margin-bottom: 30px; 644 } 645 646 .sp-alpha { 647 bottom: -20px; 648 height: 12px; 649 } 650 651 input.sp-input { 652 border: 1px solid #afafaf; 653 height: 30px; 654 } 655 656 button.reiki-button { 657 background: #f7f7f7; 658 padding: 5px 10px; 659 border: 1px solid #cccccc; 660 border-radius: 4px; 661 box-shadow: 0px 1px 0px 1px rgba(204, 204, 204, 0.32); 662 display: block; 663 width: auto; 664 clear: both; 665 margin: auto; 666 cursor: pointer; 667 } 668 669 button.reiki-button.active, button.reiki-button:hover { 670 background-color: #eaeaea; 671 } 672 673 button.reiki-button.blue { 674 background: #09f; 675 border-color: #0799fb; 676 color: #ffffff; 677 } 678 679 button.reiki-button.blue:hover { 680 background-color: #0799fb; 681 color: #ffffff; 682 border-color: #09f; 683 } 684 685 button.reiki-button.red { 686 background: rgb(255, 77, 77); 687 border-color: rgb(255, 48, 48); 688 color: #ffffff; 689 } 690 691 button.reiki-button.red:hover { 692 background: rgb(255, 48, 48); 693 border-color: rgb(255, 77, 77); 694 } 695 696 div.bg-picker { 697 margin: 0px 10px; 698 text-align: center; 699 padding: 15px 0px; 700 border-bottom: 1px dashed #999; 701 } 702 703 div.bg-picker:last-of-type { 704 border-bottom: none; 705 } 706 707 div.bg-picker .legend { 708 font-size: 12px; 709 text-transform: uppercase; 710 margin: 8px 0px; 711 font-weight: normal; 712 } 713 714 button.reiki-button.reiki-bg-button { 715 display: inline-block; 716 margin-right: 2px; 717 } 718 719 .overlay-toolbar .color { 720 display: none; 721 } 722 723 .pen-overlay { 724 position: absolute; 725 background-color: hsla(0, 0%, 90%, 0.23); 726 cursor: pointer; 727 overflow: hidden; 728 /*pointer-events: none;*/ 729 } 730 731 .pen-overlay svg { 732 height: 80%; 733 position: absolute; 734 max-height: 40px; 735 top: 50%; 736 left: 50%; 737 transform: translate(-50%, -50%); 738 border: 3px solid rgb(153, 153, 153); 739 border-radius: 100%; 740 padding: 2px; 741 background-color: rgba(153, 153, 153, 0.83); 742 fill: #ffffff; 743 min-height: 25px; 744 max-width: 40px; 745 } 746 747 .pen-overlay.small svg { 748 border: none; 749 background-color: rgb(153, 153, 153); 750 fill: #ffffff; 751 min-height: 16px; 752 padding: 2px; 753 } 754 755 .options-group .overlay-contextual-menu span.sp-thumb-el { 756 display: block; 757 float: left; 758 min-width: 0px; 759 box-sizing: border-box; 760 margin: 5px; 761 padding: 0px; 762 width: auto; 763 height: auto; 764 border-width: 2px; 765 border-color: #999; 766 position: relative; 767 } 768 769 .options-group .overlay-contextual-menu span.sp-thumb-inner { 770 display: block; 771 box-sizing: border-box; 772 border: none; 773 width: 11px; 774 min-width: 0px; 775 padding: 8px; 776 background: initial; 777 background-image: none; 778 } 779 780 .options-group .overlay-contextual-menu .sp-thumb-active span.sp-thumb-inner { 781 background-image: none; 782 } 783 784 .options-group .overlay-contextual-menu .sp-thumb-active span.sp-thumb-inner::before { 785 display: block; 786 width: 16px; 787 height: 16px; 788 content: ''; 789 position: absolute; 790 z-index: 1000; 791 background: #689F38; 792 top: -8px; 793 right: -6px; 794 border-radius: 100%; 795 background-image: url('../images/check.png'); 796 background-size: 80%; 797 background-position: center; 798 background-repeat: no-repeat; 799 border: 2px solid #999999; 800 } 801 802 .add-content-overlay .add .add-element-bubble.visible { 803 display: block; 804 } 805 806 .add-element-bubble { 807 position: absolute; 808 bottom: 100%; 809 padding-bottom: 10px; 810 border-radius: 10000px; 811 left: 50%; 812 transform: translateX(-50%); 813 display: none; 814 } 815 816 .element-bubble-close { 817 position: absolute; 818 top: -10px; 819 right: 10px; 820 z-index: 1; 821 } 822 .element-bubble-close:before { 823 font-family: Material Design Icons; 824 background-color: hsla(15, 100%, 59%, 1); 825 color: #ffffff; 826 font-style: normal; 827 font-size: 19px; 828 content: "\F156"; 829 border-radius: 100%; 830 border: 2px solid #fff; 831 } 832 833 .add-element-bubble .elements-container { 834 background-color: #0085ba; 835 padding: 10px 26px; 836 width: auto; 837 bottom: 0px; 838 border-radius: 10000px; 839 border: 2px solid #fff; 840 box-shadow: 0 2px 1px rgba(46, 68, 83, 0.15); 841 display: inline-flex; 842 position: relative; 843 } 844 845 .add-content-overlay { 846 z-index: 1000; 847 background: rebeccapurple; 848 } 849 850 .elements-container:after, .elements-container:before { 851 top: 100%; 852 left: 50%; 853 border: solid transparent; 854 content: " "; 855 height: 0; 856 width: 0; 857 position: absolute; 858 pointer-events: none; 859 } 860 861 .elements-container:after { 862 border-color: rgba(0, 133, 186, 0); 863 border-top-color: #0085ba; 864 border-width: 10px; 865 margin-left: -10px; 866 } 867 868 .elements-container:before { 869 border-color: rgba(255, 255, 255, 0); 870 border-top-color: #fff; 871 border-width: 13px; 872 margin-left: -13px; 873 } 874 875 .add-element-bubble i.mdi { 876 text-align: center; 877 font-size: 19px; 878 height: 30px; 879 line-height: 30px; 880 min-width: 30px; 881 border-radius: 100px; 882 display: block; 883 float: left; 884 color: #ffffff; 885 } 886 887 .add-element-bubble i.mdi.larger { 888 font-size: 21px; 889 } 890 891 .add-element-bubble i.mdi.big { 892 font-size: 23px; 893 } 894 895 .add-element-bubble i.mdi.small { 896 font-size: 14px; 897 } 898 899 i.mdi[data-parent-id].expanded, 900 .add-element-bubble i:hover { 901 background-color: rgba(0, 0, 0, 0.14); 902 } 903 904 i.mdi.mdi-header[data-content-id="subheading"] { 905 font-size: 14px; 906 } 907 908 .options-group .overlay-contextual-menu .cog-subitems.disabled { 909 background-color: #fcfcfc; 910 cursor: default; 911 } 912 913 .options-group .overlay-contextual-menu .cog-subitems.disabled * { 914 opacity: 0.5 !important; 915 pointer-events: none; 916 cursor: default !important; 917 } 918 919 .cog-subitems p.disable-reason { 920 display: none; 921 } 922 923 .cog-subitems.disabled p.disable-reason { 924 position: absolute; 925 z-index: 10000; 926 top: 28px; 927 left: 0px; 928 color: #4e4e4e; 929 text-align: center; 930 width: 100%; 931 max-width: 100%; 932 text-transform: none; 933 display: block; 934 white-space: normal; 935 line-height: 120%; 936 font-size: 16px; 937 } 938 939 i.mdi[data-parent-id] { 940 min-width: 30px; 941 white-space: nowrap; 942 padding-left: 10px; 943 padding-right: 10px; 944 display: inline-table; 945 } 946 947 i.mdi[data-parent-id].expanded:before { 948 margin-left: 10px; 949 position: absolute; 950 } 951 952 .elements-container i.mdi span.item-label { 953 font-family: "Source Sans Pro"; 954 } 955 956 .subitems-container { 957 display: none; 958 margin-left: 34px; 959 white-space: nowrap; 960 border-top-right-radius: 100px; 961 border-bottom-right-radius: 100px; 962 border: 1px solid #0073a1; 963 box-sizing: border-box; 964 height: 30px; 965 background-color: #008bc2; 966 line-height: 0px; 967 font-size: 0px; 968 border-left: none; 969 position: relative; 970 padding-left: 11px; 971 } 972 973 .subitems-container:before { 974 content: ' '; 975 top: 4px; 976 border-top: 10px solid transparent; 977 border-bottom: 10px solid transparent; 978 border-left: 10px solid #0073a1; 979 left: 0px; 980 position: absolute; 981 } 982 983 .subitems-container i.mdi { 984 display: inline-block; 985 float: none; 986 width: auto; 987 min-width: 20px; 988 clear: both; 989 height: 28px; 990 line-height: 28px; 991 font-size: 15px; 992 text-align: center; 993 border-radius: 0px; 994 padding-left: 8px; 995 padding-right: 8px; 996 } 997 998 .subitems-container i.mdi:last-of-type { 999 border-top-right-radius: 100px; 1000 border-bottom-right-radius: 100px; 1001 } 1002 1003 i.mdi[data-parent-id].expanded .subitems-container { 1004 display: inline-block; 1005 1006 } 1007 1008 i.mdi[data-parent-id].expanded { 1009 padding-left: 0px; 1010 padding-right: 0px; 1011 } 1012 1013 .overlay-contextual-menu:after { 1014 content: ' '; 1015 height: 20px; 1016 margin-bottom: -20px; 1017 width: 100%; 1018 } 1019 1020 [data-preview-empty] { 1021 height: 40px; 1022 outline: 2px dotted #d9d9d9; 1023 background-color: hsla(0, 0%, 85%, 0.33); 1024 background-image: url(../images/slash.png); 1025 } 1026 1027 [data-preview-empty]:before { 1028 content: "Empty Content Area"; 1029 position: relative; 1030 z-index: 1; 1031 width: auto; 1032 height: 30px; 1033 text-transform: uppercase; 1034 font-weight: 500; 1035 letter-spacing: 1px; 1036 margin: auto; 1037 background-color: rgb(255, 255, 255); 1038 color: #a9a9a9; 1039 padding: 0px 10px; 1040 box-sizing: border-box; 1041 border-radius: 2px; 1042 top: 50%; 1043 font-size: 10px; 1044 transform: translateY(-50%); 1045 display: block; 1046 line-height: 30px; 1047 width: auto; 1048 max-width: 188px; 1049 font-family: Helvetica, sans-serif; 1050 } 1051 1052 .subitems-container i.mdi1:before { 1053 font-size: 1em; 1054 } 1055 1056 .subitems-container i.mdi2:before { 1057 font-size: 0.9em; 1058 } 1059 1060 .subitems-container i.mdi3:before { 1061 font-size: 0.85em; 1062 } 1063 1064 .subitems-container i.mdi4:before { 1065 font-size: 0.75em; 1066 } 1067 1068 .subitems-container i.mdi5:before { 1069 font-size: 0.7em; 1070 } 1071 1072 .subitems-container i.mdi6:before { 1073 font-size: 0.6em; 1074 } 1075 1076 #cp-tinymce-cui-editor { 1077 display: none !important; 1078 } 1079 1080 .mce-menu, 1081 .cp-tinymce-inline { 1082 z-index: 1000000 !important; 1083 } 1084 1085 .mce-menu .first-system-font { 1086 border-top: 1px dashed #000; 1087 } 1088 1089 html.cp__changeset__preview span.customize-partial-edit-shortcut { 1090 display: none !important; 1091 } 1092 1093 .shortcode-temp-placeholder { 1094 width: 100%; 1095 height: 100%; 1096 min-height: 300px; 1097 background-color: #9e9e9e; 1098 position: relative; 1099 } 1100 1101 .shortcode-temp-placeholder:before { 1102 content: 'Refreshing...'; 1103 position: absolute; 1104 top: 50%; 1105 left: 50%; 1106 color: rgba(246, 246, 246, 0.51); 1107 transform: translate(-50%, -50%); 1108 } 1109 1110 @keyframes fadeIn { 1111 from { 1112 opacity: 0; 1113 } 1114 } 1115 1116 .shortcode-temp-placeholder { 1117 animation: fadeIn 1s infinite alternate; 1118 } 1119 1120 span#mceu_5-preview { 1121 height: 20px; 1122 top: 4px; 1123 display: block; 1124 padding: 0px; 1125 width: 20px; 1126 margin: 0px; 1127 left: 5px; 1128 border-radius: 4px; 1129 } 1130 1131 .ope-google-maps .placeholder { 1132 background-color: #ececec; 1133 } 1134 1135 .node-hover-overlay .overlay-border .zone { 1136 display: none; 1137 } 1138 1139 .heatzone.node-hover-overlay .overlay-border .zone { 1140 position: absolute; 1141 background-color: rgba(255, 255, 255, 0); 1142 background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)); 1143 display: block; 1144 box-sizing: border-box; 1145 } 1146 1147 .heatzone.node-hover-overlay .overlay-bottom .zone { 1148 top: 0px; 1149 } 1150 1151 .heatzone.node-hover-overlay .overlay-left .zone { 1152 right: 0px; 1153 top: 0px; 1154 } 1155 1156 .heatzone.node-hover-overlay .overlay-top .zone { 1157 left: 0px; 1158 bottom: 0px; 1159 } 1160 1161 .heatzone.node-hover-overlay .overlay-right .zone { 1162 1163 left: 0px; 1164 top: 0px; 1165 } 1166 1167 .force-hide { 1168 display: none !important; 1169 } 1170 1171 [data-reiki-hidden="true"] { 1172 display: none !important; 1173 } 1174 1175 [data-non-editable=true] { 1176 cursor: not-allowed; 1177 position: relative; 1178 width: 100%; 1179 height: 100%; 1180 } 1181 1182 [data-non-editable=true]:before { 1183 content: "Edit this area from Gutenberg" !important; 1184 position: absolute !important; 1185 top: 0 !important; 1186 right: 0 !important; 1187 bottom: 0 !important; 1188 left: 0 !important; 1189 background-color: rgb(115, 115, 115) !important; 1190 cursor: not-allowed !important; 1191 width: 100% !important; 1192 z-index: 1 !important; 1193 text-transform: uppercase; 1194 height: 100% !important; 1195 font-weight: 500 !important; 1196 letter-spacing: 1px !important; 1197 margin: auto !important; 1198 color: #ffffff !important; 1199 padding: 10px !important; 1200 box-sizing: border-box !important; 1201 border-radius: 2px !important; 1202 font-size: 16px !important; 1203 font-weight: bold; 1204 border:2px dotted #ccc !important; 1205 line-height: 115% !important; 1206 text-align:center !important; 1207 font-family: Helvetica, sans-serif !important; 1208 background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAABGdBTUEAALGPC/xhBQAAAB1JREFUCB1jZMAEDZhCDAwgQQwJCgWBRmKaCRIDAHs7BYLTh4KDAAAAAElFTkSuQmCC'); 1209 display: flex !important; 1210 align-content: center !important; 1211 justify-content: center !important; 1212 align-items: center !important; 1213 filter: opacity(0.7) !important; 1214 } 1215 /* 1216 For nested noneditable elements multiple overlays makes it opaque, 1217 hide nested overlays 1218 */ 1219 [data-non-editable=true] > [data-non-editable=true]:before 1220 { 1221 display:none; 1222 }