1@import "compass/css3/border-radius"; 2@import "compass/css3/box-shadow"; 3@import "compass/css3/opacity"; 4@import "compass/css3/text-shadow"; 5@import "compass/css3/transition"; 6@import "compass/css3/transform"; 7 8@import "variables"; 9@import "mixins"; 10@import "utils"; 11@import "form-field"; 12@import "form-groups"; 13@import "h5peditor-image-edit"; 14@import "h5peditor-image-edit-popup"; 15@import "deprecated"; 16 17html, body { 18 margin: 0; 19 padding: 0; 20 color: $text-color; 21 font-family: $font-family; 22 max-width: 960px; 23 position: relative; 24} 25a { 26 text-decoration: none; 27} 28 29.h5peditor { 30 font-size: 16px; 31 32 .h5p-more-libraries { 33 font-size: 0.875em; 34 margin-top: 0.4em; 35 } 36 .h5peditor-single > .field.library { 37 border: 0; 38 padding: 0; 39 } 40 .cke_dialog_background_cover { 41 width: 100% !important; 42 height: 100% !important; 43 } 44 45 .errors p, 46 .h5p-errors { 47 color: #da0001; 48 white-space: normal; 49 } 50 textarea { 51 resize: vertical; 52 } 53 54 .h5p-editor-flex-wrapper { 55 display: flex; 56 flex-direction: row; 57 } 58 59 .h5peditor-label-wrapper { 60 display: flex; 61 flex-direction: row; 62 } 63 64 .has-important-description { 65 .h5peditor-field-description { 66 display: none; 67 } 68 .h5peditor-label-wrapper { 69 float: left; 70 } 71 } 72 73 .important-description-visible { 74 .h5peditor-field-important-description { 75 display: block; 76 } 77 .h5peditor-label-wrapper { 78 float: none; 79 } 80 .important-description-show { 81 display: none; 82 } 83 } 84 85 textarea, 86 .h5peditor-text, 87 .ckeditor { 88 @include box-shadow($form-input-box-shadow); 89 box-sizing: border-box; 90 margin: 0; 91 padding: $min-padding; 92 min-height: 40px; 93 border: 1px solid $form-border-color; 94 background: $form-input-color; 95 outline: none; 96 font-size: 16px; 97 word-wrap: break-word; 98 99 &.error { 100 border-color: red; 101 } 102 } 103 .h5peditor-text, textarea { 104 width: 100%; 105 box-sizing: border-box; 106 107 &.error { 108 border-color: red; 109 } 110 } 111 /* Placeholders - need to be on separate lines. If not, 112 the browsers will invalidate them */ 113 textarea:focus::-webkit-input-placeholder, 114 input:focus::-webkit-input-placeholder { 115 color: $form-input-focus-placeholder-color; 116 } 117 textarea:focus:-moz-placeholder, 118 input:focus:-moz-placeholder { 119 color: $form-input-focus-placeholder-color; 120 } 121 textarea:focus::-moz-placeholder, 122 input:focus::-moz-placeholder { 123 color: $form-input-focus-placeholder-color; 124 } 125 textarea:focus:-ms-input-placeholder, 126 input:focus:-ms-input-placeholder { 127 color: $form-input-focus-placeholder-color; 128 } 129 textarea:focus.h5peditor-ckeditor-placeholder, 130 input:focus.h5peditor-ckeditor-placeholder { 131 color: $form-input-focus-placeholder-color; 132 } 133 134 ::-webkit-input-placeholder { 135 color: $form-input-placeholder-color; 136 } 137 :-moz-placeholder { 138 color: $form-input-placeholder-color; 139 } 140 ::-moz-placeholder { 141 color: $form-input-placeholder-color; 142 } 143 :-ms-input-placeholder { 144 color: $form-input-placeholder-color; 145 } 146 .h5peditor-ckeditor-placeholder { 147 color: $form-input-placeholder-color; 148 } 149 & > select, 150 .h5peditor-language-switcher select, 151 h5peditor-select, 152 .field > select { 153 padding: 10px 30px 10px 8px; 154 font-family: $font-family; 155 font-size: 16px; 156 border: 1px solid $form-border-color;; 157 background: $form-input-color inline-image('down.png') no-repeat; 158 background-position: calc(100% - 10px); 159 @include box-shadow($form-input-box-shadow); 160 -moz-appearance: none; 161 -webkit-appearance: none; 162 163 &:disabled { 164 background-color: #efefef; 165 } 166 } 167 & > select { 168 margin-bottom: 13px; 169 margin-right: 20px; 170 } 171 select::-ms-expand { 172 display: none; 173 } 174 a:focus { 175 outline: none; 176 } 177 textarea:focus, 178 .h5peditor-text:focus { 179 outline: none; 180 background-color: $white; 181 border-color: #53a0ff; 182 } 183 .h5p-ul { 184 padding: 0; 185 margin: 0; 186 list-style: none; 187 188 .h5p-li { 189 @include field-margin($min-padding); 190 padding: 0; 191 list-style: none; 192 193 &.placeholder { 194 box-sizing: border-box; 195 background: #e8f2fa; 196 border: dashed 2px #2782d1; 197 } 198 199 &:hover { 200 text-decoration: none; 201 } 202 203 &:nth-child(2).moving { 204 margin-top: 0; 205 } 206 207 &:nth-last-child(2).placeholder { 208 margin-bottom: 0; 209 } 210 } 211 } 212 .dimensions input, .coordinates input, .number input { 213 width: 75px; 214 } 215 .number input[type="range"] { 216 width: 300px; 217 float: left; 218 margin: 7px 8px 0 0; 219 } 220 .h5p-errors { 221 clear: both; 222 } 223 .h5p-add-file { 224 float: left; 225 position: relative; 226 background: transparent; 227 border: 2px dashed #dddddd; 228 color: #dddddd; 229 margin: 0.5em; 230 width: 6em; 231 height: 4.5em; 232 cursor: pointer; 233 outline: none; 234 box-sizing: border-box; 235 -moz-box-sizing: border-box; 236 237 &:focus, 238 &:hover { 239 color: #999; 240 border-color: #999; 241 } 242 243 &.hidden { 244 visibility: hidden; 245 } 246 } 247 248 .h5p-add-file:after { 249 position: absolute; 250 content: "+"; 251 font-size: 2em; 252 line-height: 2.2em; 253 width: 100%; 254 height: 100%; 255 text-align: center; 256 } 257 .h5p-add-dialog { 258 position: absolute; 259 z-index: 1; 260 visibility: hidden; 261 opacity: 0; 262 background: #fff; 263 left: 1em; 264 right: 1em; 265 top: 1em; 266 border: 1px solid #cdcdcd; 267 box-sizing: border-box; 268 -moz-box-sizing: border-box; 269 @include box-shadow(0 0 8px #666); 270 @include transition(visibility 0s 0.2s, opacity 0.2s); 271 272 &.h5p-open { 273 visibility: visible; 274 opacity: 1; 275 @include transition(visibility 0s 0s, opacity 0.2s); 276 } 277 278 .h5p-add-dialog-table { 279 overflow: hidden; 280 281 .av-tablist { 282 overflow: hidden; 283 margin: 1em 1em 0 1em; 284 } 285 286 .av-tab { 287 cursor: pointer; 288 float: left; 289 padding: 0.5em 0.75em; 290 border-top: 1px solid #ccc; 291 border-right: 1px solid #ccc; 292 font-weight: bold; 293 font-size: 15px; 294 color: #666; 295 background: #f5f5f5; 296 297 &:first-child { 298 border-left: 1px solid #ccc; 299 } 300 &.selected { 301 color: #333; 302 background: #fff; 303 } 304 } 305 306 .av-tabpanel { 307 border: 1px solid #ccc; 308 margin: 0 1em 1em 1em; 309 overflow: hidden; 310 padding: 1em; 311 312 h3 { 313 margin: 0 0 1em 0; 314 } 315 .h5p-file-drop-upload { 316 width: 90px; 317 margin: 0; 318 } 319 } 320 321 322 .h5p-dialog-box { 323 float: left; 324 padding: 0; 325 width: 60%; 326 margin-right: 5%; 327 margin-left: 4%; 328 text-align: left; 329 margin-top: 30px; 330 331 &:first-child { 332 width: 22%; 333 margin-left: 3%; 334 margin-right: 1%; 335 336 h3 { 337 text-align: center; 338 } 339 } 340 } 341 342 h3 { 343 color: #666; 344 font-size: 1em; 345 margin: 1.2em 0; 346 line-height: 1.1em; 347 } 348 349 .h5peditor-field-description { 350 color: #bbb; 351 } 352 353 .h5p-file-url-wrapper { 354 background-color: #f5f5f5; 355 border: 1px solid #bbb; 356 padding: 15px 15px 15px 60px; 357 position: relative; 358 359 &:before { 360 font-family: 'H5P'; 361 content: "\e904"; 362 position: absolute; 363 color: #dd0505; 364 left: 0; 365 top: 0.083em; 366 font-size: 3.8em; 367 line-height: 1; 368 } 369 370 input { 371 border-color: #bbb; 372 text-align: left; 373 padding-left: 20px; 374 } 375 } 376 377 .h5p-file-drop-upload { 378 position: relative; 379 width: 70%; 380 height: 90px; 381 margin: 0 15%; 382 float: left; 383 background-color: #f5f5f5; 384 text-align: center; 385 cursor: pointer; 386 border: 1px solid #bbb; 387 388 .h5p-file-drop-upload-inner { 389 border: 2px dashed #bbb;; 390 background-color: white; 391 position: absolute; 392 top: 3px; 393 bottom: 3px; 394 left: 3px; 395 right: 3px; 396 397 &:after { 398 font-family: "H5P"; 399 content: "\e903"; 400 line-height: 1.4em; 401 font-size: 3.5em; 402 color: #bbb; 403 } 404 } 405 406 &:hover, 407 &.over { 408 .h5p-file-drop-upload-inner:after { 409 color: #999; 410 } 411 } 412 } 413 414 .h5p-or-vertical { 415 float: left; 416 position: relative; 417 width: 5%; 418 height: 250px; 419 } 420 } 421 422 .h5p-dialog-box { 423 text-align: center; 424 padding: 1em 0.5em; 425 } 426 427 .h5p-buttons { 428 padding: 0.5em; 429 border-top: 1px solid #cdcdcd; 430 background: #ddd; 431 text-align: right; 432 } 433 } 434 .h5p-or { 435 border-bottom: 1px solid #cdcdcd; 436 padding: 0; 437 margin: 0 1em; 438 text-align: center; 439 height: 0.5em; 440 line-height: 1em; 441 & > span { 442 background: #fff; 443 padding: 0 0.5em; 444 } 445 } 446 447 .h5p-or-vertical { 448 float: left; 449 position: relative; 450 width: 50px; 451 height: 80px; 452 453 .h5p-or-vertical-line { 454 position: absolute; 455 margin: 10px 0; 456 left: 49%; 457 top: 0; 458 bottom: 0; 459 width: 1px; 460 background: #ccc; 461 z-index: 1; 462 } 463 .h5p-or-vertical-word-wrapper { 464 text-align: center; 465 height: 18px; 466 position: absolute; 467 left: 0; 468 right: 0; 469 top: 22%; 470 margin-top: -12px; 471 z-index: 2; 472 473 .h5p-or-vertical-word { 474 color: #999; 475 font-weight: bold; 476 font-size: 18px; 477 padding: 3px; 478 background: #fff; 479 } 480 } 481 } 482 483 .h5p-file-url { 484 text-align: center; 485 } 486 .h5p-thumbnail { 487 margin: 0.5em; 488 width: 6em; 489 height: 4.5em; 490 display: block; 491 float: left; 492 position: relative; 493 @include box-shadow(0 0 10px 0 #666666); 494 border: 1px solid #fff; 495 box-sizing: border-box; 496 -moz-box-sizing: border-box; 497 498 .h5p-remove { 499 position: absolute; 500 top: 0; 501 right: 0; 502 cursor: pointer; 503 outline: none; 504 width: 1.6em; 505 height: 1.6em; 506 line-height: 1.6em; 507 overflow: hidden; 508 text-indent: -0.4em; 509 padding: 0.065em; 510 @include opacity(0.6); 511 } 512 .h5p-remove:hover, 513 .h5p-remove:focus { 514 @include opacity(1); 515 } 516 .h5p-remove:after { 517 font-family: $icon-font-family; 518 font-size: 2em; 519 color: #fff; 520 content: "\e890"; 521 @include opacity(0.6); 522 } 523 } 524 .h5p-type { 525 position: absolute; 526 width: 100%; 527 height: 100%; 528 font-size: 1.1em; 529 line-height: 4em; 530 display: block; 531 text-align: center; 532 background: #000; 533 color: #fff; 534 cursor: pointer; 535 } 536 .file { 537 position: relative; 538 float: left; 539 margin-bottom: 0; 540 max-width: 100%; 541 542 &.authorList { 543 float: none; 544 } 545 546 &.field { 547 float: none; 548 } 549 .thumbnail { 550 display: inline-block; 551 margin: 10px 10px 10px 0; 552 @include box-shadow(0 0 10px 0 #666666); 553 border: 1px solid #fff; 554 cursor: pointer; 555 max-width: 100%; 556 min-width: 1em; 557 min-height: 1em; 558 background: $form-input-color inline-image('transparent-background.png') repeat; 559 } 560 .thumbnail:focus { 561 @include box-shadow(0 0 10px 0 #222); 562 } 563 .add { 564 display: inline-block; 565 cursor: pointer; 566 padding: 0.5em 1.5em 0.5em 3em; 567 background: linear-gradient(to bottom, #fbfbfb 0, #f2f2f2 100%); 568 border: 1px solid #d0d0d1; 569 border-radius: 0.25em; 570 color: #222222; 571 font-weight: bold; 572 line-height: normal; 573 574 &:hover { 575 background: #ededed; 576 } 577 578 &:focus { 579 box-shadow: 0 0 16px 0 rgba(133,188,255,0.84); 580 } 581 582 .h5peditor-field-file-upload-text:before { 583 font-family: $icon-font-family; 584 content: "\e902"; 585 line-height: 1; 586 color: #39c943; 587 font-size: 2em; 588 position: absolute; 589 left: 0.3em; 590 top: 0.1em; 591 } 592 } 593 .remove { 594 display: block; 595 position: absolute; 596 top: 7px; 597 right: 7px; 598 cursor: pointer; 599 } 600 .remove:focus:before { 601 @include opacity(1); 602 } 603 .remove:before { 604 font-family: $icon-font-family; 605 font-size: 1.4em; 606 color: #fff; 607 content: "\e890"; 608 @include opacity(0.6); 609 @include text-shadow(rgba(black, 0.4) 0 0 4px, rgba(black, 0.4) 0 0 4px, rgba(black, 0.4) 0 0 4px); 610 } 611 .remove:hover { 612 text-decoration: none; 613 } 614 .remove:hover:before { 615 color: #fff; 616 @include opacity(1); 617 @include text-shadow(rgba(black, 0.4) 0 0 4px, rgba(black, 0.4) 0 0 4px, rgba(black, 0.4) 0 0 4px); 618 } 619 img { 620 max-width: 100%; 621 vertical-align: bottom; 622 max-height: 100px; 623 } 624 625 .h5p-av-row { 626 overflow: auto; 627 margin-bottom: 0.5em; 628 629 .h5p-thumbnail { 630 display: table-cell; 631 } 632 633 .h5p-video-quality { 634 display: table-cell; 635 overflow: hidden; 636 width: 10000px; 637 padding-left: 1em; 638 639 input.h5peditor-text { 640 width: 100%; 641 } 642 } 643 } 644 645 .h5p-av-cell { 646 overflow: auto; 647 float: left; 648 } 649 } 650 .video .file, .audio .file { 651 position: static; 652 overflow: visible; 653 654 .thumbnail, .add { 655 float: left; 656 } 657 .add { 658 margin-top: 8px; 659 } 660 .thumbnail { 661 overflow: visible; 662 position: relative; 663 cursor: auto; 664 } 665 .remove { 666 top: -3px; 667 right: -5px; 668 } 669 .type { 670 padding: 16px 8px 4px; 671 background: #000; 672 color: #fff; 673 font-size: 10px; 674 } 675 .h5peditor-uploading { 676 float: left; 677 margin: 0.5em; 678 } 679 } 680 .libwrap { 681 margin-top: $padding; 682 683 &.no-margin, 684 &:empty { 685 margin-top: 0; 686 } 687 } 688 input[type="checkbox"] { 689 margin: 4px 4px 4px 0; 690 vertical-align: bottom; 691 } 692 .moving { 693 position: absolute; 694 z-index: 1; 695 @include opacity(0.8); 696 -webkit-transform: translateZ(0); 697 698 .h5peditor-label { 699 cursor: grabbing; 700 cursor: -moz-grabbing; 701 cursor: -webkit-grabbing; 702 } 703 } 704 705 .h5peditor-uploading, .h5peditor-loading { 706 padding-top: 10px; 707 padding-bottom: 6px; 708 font-size: 14px; 709 } 710 .h5peditor-loading { 711 padding: 0.875em 0 1em 3.25em; 712 font-style: italic; 713 } 714 715 .h5p-copyright-button { 716 @include border-radius(0.25em); 717 height: 30px; 718 background: linear-gradient(to bottom, #fff 0, #f2f2f2 100%); 719 border: 1px solid $form-border-color; 720 color: $black; 721 font-size: $font-size-small; 722 line-height: $form-item-height-small; 723 padding-right: $padding; 724 padding-left: 0; 725 clear: both; 726 font-weight: normal; 727 728 &:before { 729 font-family: $icon-font-family; 730 content: "\e88f"; 731 color: #666; 732 padding: 0 0.25em 0 0.25em; 733 vertical-align: middle; 734 font-size: 1.5em; 735 line-height: 0.9; 736 } 737 738 &:hover:not([disabled]) { 739 background: linear-gradient(to bottom, #fff 0, #d0d0d1 100%); 740 text-decoration: none; 741 border-color: #999; 742 } 743 } 744 745 .h5p-copyright-button:focus { 746 box-shadow: 0 0 16px 0 rgba(133, 188, 255, 0.84); 747 } 748 749 /* Copyright button for video & audio */ 750 .field.file > .h5p-copyright-button, 751 .field.video > .h5p-copyright-button, 752 .field.audio > .h5p-copyright-button { 753 float: left; 754 } 755 756 .h5p-editor-dialog { 757 position: absolute; 758 z-index: 2; 759 margin: 5.5em 0 1em; 760 visibility: hidden; 761 opacity: 0; 762 height: 0; 763 overflow: hidden; 764 background: #fff; 765 @include box-shadow(0 0 8px #666); 766 @include transition(visibility 0s 0.2s, height 0s 0.2s, opacity 0.2s, margin-top 0.2s); 767 768 &.h5p-open { 769 margin-top: 3.5em; 770 visibility: visible; 771 opacity: 1; 772 height: auto; 773 @include transition(visibility 0s 0s, height 0s 0s, opacity 0.2s, margin-top 0.2s); 774 } 775 776 & > .field { 777 margin: 0; 778 border: 0; 779 box-shadow: none; 780 } 781 782 .content { 783 border: none; 784 background: $white; 785 786 .h5peditor-label { 787 font-size: $font-size-large; 788 font-weight: 600; 789 } 790 } 791 792 .h5p-close { 793 color: #494949; 794 795 &:before { 796 font-size: 2em; 797 right: -0.125em; 798 top: 0; 799 position: absolute; 800 z-index: 1; 801 font-family: $icon-font-family; 802 content: "\e894"; 803 line-height: 1em; 804 @include transition(scale 0.2s); 805 } 806 807 &:hover:before { 808 @include scale(1.1, 1.1); 809 } 810 } 811 } 812 813 .h5p-li > .content > .library { 814 border: 0; 815 padding: 0; 816 } 817} 818 819.h5p-editor-dialog.h5p-dialog-wide { 820 width: 90%; 821 border-radius: 0.208em; 822} 823 824/* Placed this outside of .h5peditor context above. Don't want it to be more 825 specific than neccessary (because of overriding) */ 826.h5peditor-button-textual { 827 @include border-radius(0.25em); 828 @include button-background( 829 $form-item-importance-medium-background, 830 $form-item-importance-medium-background-highlight); 831 display: inline-block; 832 width: auto; 833 margin: $min-padding 0 0 0; 834 padding: 0 $padding; 835 box-sizing: border-box; 836 height: $form-item-height-normal; 837 border: 1px solid $form-border-color; 838 font-size: $font-size-normal; 839 font-family: $font-family; 840 line-height: $form-item-height-normal; 841 color: $white; 842 cursor: pointer; 843 font-weight: 600; 844 -webkit-font-smoothing: antialiased; 845 -moz-osx-font-smoothing: grayscale; 846 847 &:focus { 848 box-shadow: 0 0 16px 0 rgba(133, 188, 255, 0.84); 849 } 850 851 &:before, 852 &:after { 853 color: $white; 854 } 855 856 .h5p-editing-image-button:before { 857 font-family: $icon-font-family; 858 content: "\e900"; 859 color: #666; 860 padding-right: 0.25em; 861 vertical-align: middle; 862 font-size: 1.5em; 863 line-height: 0.9; 864 } 865 866 &:hover:not([disabled]) { 867 @include button-background( 868 $form-item-importance-medium-background-hover, 869 $form-item-importance-medium-background-hover-highlight); 870 text-decoration: none; 871 } 872 873 &.importance-high { 874 @include button-background( 875 $form-item-importance-high-background, 876 $form-item-importance-high-background-highlight); 877 border-color: $form-item-importance-high-border-color; 878 text-transform: uppercase; 879 height: $form-item-height-large; 880 line-height: $form-item-height-large; 881 882 &:hover:not([disabled]) { 883 @include button-background( 884 $form-item-importance-high-background-hover, 885 $form-item-importance-high-background-hover-highlight); 886 border-color: $form-item-importance-high-background-hover; 887 } 888 } 889 890 &.importance-low { 891 @include button-background( 892 $form-item-importance-low-background, 893 $form-item-importance-low-background-highlight); 894 border-color: $form-item-importance-low-border-color; 895 color: $black; 896 897 &:before, 898 &:after { 899 color: $black; 900 } 901 902 &:hover:not([disabled]) { 903 @include button-background( 904 $form-item-importance-low-background-hover, 905 $form-item-importance-low-background-hover-highlight); 906 border-color: $form-item-importance-low-background-hover; 907 } 908 } 909 910 &[disabled], 911 &[aria-disabled="true"] { 912 background: #f5f5f5; 913 color: #707171; 914 border-color: #eeeeee; 915 cursor: not-allowed; 916 917 &:before { 918 font-family: $icon-font-family; 919 content: "\e912"; 920 color: #707171; 921 margin-right: 0.5em; 922 vertical-align: top; 923 } 924 } 925} 926.h5peditor-field-description, 927.h5p-help-text { 928 font-size: 12px; 929 margin-top: 0.3em; 930 margin-bottom: 1em; 931 font-weight: 500; 932 color: #434446; 933 line-height: 15px; 934 letter-spacing: 0.5px; 935} 936 937.h5peditor-field-important-description { 938 position: relative; 939 padding: 1.5em 2.2em 2em 2.2em; 940 font-size: 0.9em; 941 margin: 0 0 20px 0; 942 border: 1px solid #ffde78; 943 background-color: #f9f9d8; 944 color: #000; 945 display: none; 946 947 .important-description-close { 948 position: absolute; 949 font-size: 0.9em; 950 line-height: 2em; 951 right: 1.5em; 952 top: 1em; 953 user-select: none; 954 cursor: pointer; 955 956 &:before { 957 font-family: $icon-font-family; 958 content: "\e894"; 959 vertical-align: top; 960 font-size: 1.6em; 961 } 962 } 963 964 .h5p-info-icon { 965 font-size: 0.75em; 966 967 &:before { 968 font-family: $icon-font-family; 969 content: "\e909"; 970 font-size: 2.3em; 971 line-height: 0.94em; 972 margin-left: -0.3em; 973 vertical-align: middle; 974 } 975 } 976 977 .important-description-title { 978 font-weight: bold; 979 font-size: 1.2em; 980 vertical-align: bottom; 981 } 982 983 .important-description-content { 984 ul { 985 padding: 0; 986 line-height: 2em; 987 margin-top: 20px; 988 989 li { 990 line-height: 1.8em; 991 margin-left: 1.5em; 992 } 993 } 994 } 995 996 .important-description-example { 997 border: 1px solid #bbde98; 998 background-color: #d9fac3; 999 display: flex; 1000 margin-top: 20px; 1001 1002 .important-description-example-title { 1003 padding: 15px; 1004 font-weight: bold; 1005 } 1006 1007 .important-description-example-text { 1008 padding: 15px; 1009 width: 100%; 1010 background-color: #f6fef1; 1011 } 1012 } 1013} 1014 1015.h5peditor-form { 1016 position: relative; 1017 background: $form-background; 1018 border: 1px solid $form-border-color; 1019 1020 &.h5peditor-form-manager { 1021 > .tree, 1022 > .common, 1023 > .field { 1024 max-width: 918px; 1025 margin: 20px auto; 1026 padding: 0 20px; 1027 } 1028 } 1029 1030 &.h5peditor-semi-fullscreen { 1031 margin: 0; 1032 position: fixed; 1033 overflow-y: scroll; 1034 margin-top: 40px; 1035 padding-bottom: 40px; 1036 box-sizing: border-box; 1037 background: #fff; 1038 height: calc(100% - 40px); 1039 } 1040} 1041 1042.h5peditor-label { 1043 display: block; 1044 margin-bottom: 6px; 1045 font-weight: 600; 1046 font-size: $font-size-normal; 1047 color: $form-label; 1048} 1049 1050#h5peditor-uploader { 1051 position: absolute; 1052 width: 1px; 1053 height: 1px; 1054 top: -1px; 1055 border: 0; 1056 overflow: hidden; 1057} 1058 1059.h5p-tutorial-url, 1060.h5p-example-url { 1061 font-size: 1em; 1062 color: #2270B9; 1063 display: inline-block; 1064 line-height: 1; 1065 height: 2em; 1066 margin-right: 10px; 1067 padding-right: 10px; 1068 padding-bottom: 2px; 1069 margin-bottom: 8px; 1070 border: 1px solid transparent; 1071 1072 &:focus { 1073 border-color: #bbdae8; 1074 } 1075 &:active { 1076 border-color: #1C70BA; 1077 } 1078} 1079 1080.h5p-tutorial-url:before, 1081.h5p-example-url:before { 1082 font-family: $icon-font-family; 1083 font-size: 1.5em; 1084 position: relative; 1085 top: 0.15em; 1086 left: 0.2em; 1087 margin-right: 10px; 1088} 1089.h5p-tutorial-url:before { 1090 content: "\e907"; 1091} 1092.h5p-example-url:before { 1093 content: "\e906"; 1094} 1095 1096.h5peditor-widget-select { 1097 overflow: hidden; 1098 margin: 0 0 -1px; 1099 padding: 0; 1100 list-style: none; 1101} 1102.h5peditor-widget-option { 1103 float: right; 1104 border: 1px solid #ccc; 1105 border-bottom: 0; 1106 margin-left: 0.5em; 1107 padding: 0.6em 1em; 1108 color: #0E1A25; 1109 font-size: 0.875em; 1110 background: #f5f5f5; 1111 line-height: 1.285714286em; 1112 cursor: pointer; 1113 outline: none; 1114} 1115.h5peditor-widget-option:hover { 1116 color: #000; 1117} 1118.h5peditor-widget-option:active { 1119 color: #8e636a; /* Pink chocolate */ 1120} 1121.h5peditor-widget-active { 1122 background: #fff; 1123 line-height: 1.357142857em; 1124} 1125.h5peditor-widgets > .h5peditor-widget-wrapper { 1126 border: 1px solid #ccc; 1127 margin: 0 0 0.25em; 1128 padding: 0.5em; 1129} 1130.h5peditor-widgets > .h5peditor-label { 1131 float: left; 1132 margin-top: 5px; 1133} 1134.h5p-editor-iframe { 1135 margin-bottom: 1em; 1136} 1137.h5peditor-required:after { 1138 content: "*"; 1139 color: #da0001; 1140 margin-left: 0.2em; 1141 position: relative; 1142 top: -0.2em; 1143} 1144 1145/* Help CKEditor blend into the H5PEditor */ 1146.h5peditor .cke_bottom, 1147.h5peditor .cke_top { 1148 background: #d0d0d1; 1149} 1150.h5peditor .cke_chrome { 1151 border: 1px solid #f5f5f5; 1152 background: #d0d0d1; 1153} 1154.h5peditor .cke_contents, 1155.h5peditor .cke_toolgroup, 1156.h5peditor .cke_combo_button { 1157 border: 1px solid #f5f5f5; 1158} 1159 1160/* The show important description button */ 1161.important-description-show { 1162 background: #f3d55a; 1163 padding: 0.2em 0.5em 0.2em 1.7em; 1164 margin-bottom: 0.5em; 1165 font-size: 0.9em; 1166 cursor: pointer; 1167 float: right; 1168 position: relative; 1169 line-height: normal; 1170 1171 font-style: italic; 1172 font-weight: bold; 1173 1174 &:before { 1175 font-family: $icon-font-family; 1176 font-style: normal; 1177 font-weight: normal; 1178 content: "\e909"; 1179 font-size: 1.8em; 1180 position: absolute; 1181 left: 0em; 1182 top: 0em; 1183 line-height: 0.85em; 1184 vertical-align: top; 1185 } 1186} 1187 1188.important-description-clear-right { 1189 display: block; 1190 clear: right; 1191} 1192 1193.h5peditor fieldset.common-fields-library-wrapper { 1194 width: 100%; 1195 padding: 0 1em 1em; 1196 box-sizing: border-box; 1197 height: 20px; 1198 border: solid 1px #e2e5ee; 1199 border-radius: 4px; 1200 margin-bottom: 1em; 1201 1202 & > * { 1203 display: none; 1204 } 1205 & > legend { 1206 display: block; 1207 cursor: pointer; 1208 outline: none; 1209 color: #363b42; 1210 background-color: #fff; 1211 padding: 10px; 1212 font-weight: bold; 1213 font-size: 0.875em; 1214 1215 &:before { 1216 font-family: "H5P"; 1217 content: "\e566"; 1218 margin-right: 0.5em; 1219 } 1220 &:focus:before { 1221 outline: 1px dotted #666; 1222 } 1223 } 1224 1225 &.expanded { 1226 height: auto; 1227 1228 & > * { 1229 display: block; 1230 } 1231 & > legend:before { 1232 content: "\e565"; 1233 } 1234 } 1235} 1236 1237@import "metadata-form"; 1238@import "metadata-popup"; 1239@import "metadata-changelog-widget"; 1240@import "metadata-author-widget"; 1241@import "copy-paste"; 1242@import "fullscreen-bar"; 1243 1244.h5peditor .h5peditor-language-switcher { 1245 float: right; 1246 white-space: nowrap; 1247 margin-bottom: 1em; 1248 1249 .language-label { 1250 padding: 0 10px; 1251 font-size: 15px; 1252 } 1253 select { 1254 padding: 6px 30px 6px 8px; 1255 font-size: 15px; 1256 } 1257} 1258.h5peditor-language-notice { 1259 display: none; 1260 clear: both; 1261 font-size: 14px; 1262 background: #dcf6ff; 1263 color: #295b7a; 1264 padding: 10px 20px 10px 40px; 1265 margin: 1em 0; 1266 line-height: 1.5; 1267 position: relative; 1268 1269 &:before { 1270 font-family: h5p; 1271 content: "\e90c"; 1272 position: absolute; 1273 left: 15px; 1274 font-size: 1.125em; 1275 } 1276 &.show { 1277 display: block; 1278 } 1279 .first { 1280 font-weight: bold; 1281 } 1282 a { 1283 text-decoration: underline; 1284 } 1285} 1286