theme/boost/scss/moodle/core.scss

   1 /* core.less */
   2
   3 // When we upgrade boostrap to v4 release, we will need to change this to be used by the text-white class.
   4 // Because a primary colour that is both AA accessible on grey (footer) and white is not possible, we always
   5 // want white default colour.
   6 $bg-inverse-link-color: #fff !default;
   7
   8 #region-main {
   9     overflow-x: auto;
  10     overflow-y: visible;
  11     border: $card-border-width solid $card-border-color;
  12     @if $enable-rounded {
  13         @include border-radius($card-border-radius);
  14     }
  15     padding: $card-spacer-x;
  16     background-color: $body-bg;
  17 }
  18
  19 .context-header-settings-menu,
  20 .region-main-settings-menu {
  21     float: right;
  22     width: auto;
  23     max-width: 4em;
  24     height: 2em;
  25     display: block;
  26     margin-top: 4px;
  27 }
  28
  29 $gototop-bottom-position: 50px !default;
  30
  31 #goto-top-link {
  32     visibility: hidden;
  33     opacity: 0;
  34     transition: opacity .7s ease 0s, visibility .1s ease .8s;
  35     display: block;
  36     position: fixed; /* IE compatibility hack */
  37     @supports (position: sticky) {
  38         position: sticky;
  39     }
  40     @supports (-ms-ime-align:auto) {
  41         position: fixed; /* Edge compatibility hack */
  42     }
  43     bottom: $gototop-bottom-position;
  44     right: 0;
  45     a {
  46         position: absolute;
  47         right: 0;
  48         transform: translateY(-100%);
  49     }
  50 }
  51
  52 body.scrolled #goto-top-link {
  53     opacity: 1;
  54     visibility: visible;
  55     transition: visibility 0s ease 0s, opacity .7s ease .1s;
  56 }
  57
  58 .context-header-settings-menu .dropdown-toggle > .icon,
  59 #region-main-settings-menu .dropdown-toggle > .icon {
  60     height: 24px;
  61     font-size: 24px;
  62     width: auto;
  63 }
  64 /** Prevent user notifications overlapping with region main settings menu */
  65 #user-notifications {
  66     display: block;
  67     overflow: hidden;
  68 }
  69
  70 /** Page layout CSS starts **/
  71 .layout-option-noheader #page-header,
  72 .layout-option-nonavbar #page-navbar,
  73 .layout-option-nofooter #page-footer,
  74 .layout-option-nocourseheader .course-content-header,
  75 .layout-option-nocoursefooter .course-content-footer {
  76     display: none;
  77 }
  78
  79 /** Page layout CSS ends **/
  80
  81 .mdl-left {
  82     text-align: left;
  83 }
  84
  85 .mdl-right {
  86     text-align: right;
  87 }
  88
  89 /*rtl:ignore*/
  90 .text-ltr {
  91     direction: ltr !important; /* stylelint-disable-line declaration-no-important */
  92 }
  93
  94 #add,
  95 #remove,
  96 .centerpara,
  97 .mdl-align {
  98     text-align: center;
  99 }
 100
 101 a.dimmed,
 102 a.dimmed:link,
 103 a.dimmed:visited,
 104 a.dimmed_text,
 105 a.dimmed_text:link,
 106 a.dimmed_text:visited,
 107 .dimmed_text,
 108 .dimmed_text a,
 109 .dimmed_text a:link,
 110 .dimmed_text a:visited,
 111 .usersuspended,
 112 .usersuspended a,
 113 .usersuspended a:link,
 114 .usersuspended a:visited,
 115 .dimmed_category,
 116 .dimmed_category a {
 117     color: $text-muted;
 118 }
 119
 120 .unlist,
 121 .unlist li,
 122 .inline-list,
 123 .inline-list li,
 124 .block .list,
 125 .block .list li,
 126 .section li.activity,
 127 .section li.movehere,
 128 .tabtree li {
 129     list-style: none;
 130     margin: 0;
 131     padding: 0;
 132 }
 133
 134 .inline,
 135 .inline-list li {
 136     display: inline;
 137 }
 138
 139 .notifytiny {
 140     font-size: $font-size-xs;
 141 }
 142
 143 .notifytiny li,
 144 .notifytiny td {
 145     font-size: 100%;
 146 }
 147
 148 .red,
 149 .notifyproblem {
 150     color: map-get($theme-colors, 'warning');
 151 }
 152
 153 .green,
 154 .notifysuccess {
 155     color: map-get($theme-colors, 'success');
 156 }
 157
 158 .highlight {
 159     color: map-get($theme-colors, 'info');
 160 }
 161
 162 .fitem.advanced .text-info {
 163     font-weight: bold;
 164 }
 165
 166 .reportlink {
 167     text-align: right;
 168 }
 169
 170 a.autolink.glossary:hover {
 171     cursor: help;
 172 }
 173 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
 174 .collapsibleregioncaption {
 175     white-space: nowrap;
 176     min-height: $line-height-base * $font-size-base;
 177 }
 178
 179 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
 180     cursor: pointer;
 181 }
 182
 183 .pagelayout-mydashboard #region-main {
 184     border: 0;
 185     padding: 0;
 186     background-color: transparent;
 187     margin-top: -1px;
 188 }
 189
 190 .collapsibleregioncaption img {
 191     vertical-align: middle;
 192 }
 193
 194 .jsenabled .hiddenifjs {
 195     display: none;
 196 }
 197
 198 .visibleifjs {
 199     display: none;
 200 }
 201
 202 .jsenabled .visibleifjs {
 203     display: inline;
 204 }
 205
 206 .jsenabled .collapsibleregion {
 207     overflow: hidden;
 208     box-sizing: content-box;
 209 }
 210
 211 .jsenabled .collapsed .collapsibleregioninner {
 212     visibility: hidden;
 213 }
 214
 215 .collapsible-actions {
 216     display: none;
 217     text-align: right;
 218 }
 219
 220 .jsenabled .collapsible-actions {
 221     display: block;
 222 }
 223
 224 .collapsible-actions .collapseexpand {
 225     padding-left: 20px;
 226     background: url([[pix:t/collapsed]]) 2px center no-repeat;
 227 }
 228 /*rtl:raw:
 229 .collapsible-actions .collapseexpand {
 230     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
 231 }
 232 */
 233 .collapsible-actions .collapse-all {
 234     background-image: url([[pix:t/expanded]]);
 235 }
 236
 237 .yui-overlay .yui-widget-bd {
 238     background-color: #ffee69;
 239     border: 1px solid #a6982b;
 240     border-top-color: #d4c237;
 241     color: #000;
 242     left: 0;
 243     padding: 2px 5px;
 244     position: relative;
 245     top: 0;
 246     z-index: 1;
 247 }
 248
 249 .clearer {
 250     background: transparent;
 251     border-width: 0;
 252     clear: both;
 253     display: block;
 254     height: 1px;
 255     margin: 0;
 256     padding: 0;
 257 }
 258
 259 .bold,
 260 .warning,
 261 .errorbox .title,
 262 .pagingbar .title,
 263 .pagingbar .thispage {
 264     font-weight: bold;
 265 }
 266
 267 img.userpicture {
 268     margin-right: 0.5rem;
 269 }
 270
 271 img.resize {
 272     height: 1em;
 273     width: 1em;
 274 }
 275
 276 .action-menu .dropdown-toggle {
 277     text-decoration: none;
 278 }
 279
 280 .action-menu {
 281     white-space: nowrap;
 282 }
 283
 284 .block img.resize {
 285     height: 0.9em;
 286     width: 0.8em;
 287 }
 288 /* Icon styles */
 289 img.activityicon {
 290     height: 24px;
 291     width: 24px;
 292     vertical-align: middle;
 293 }
 294
 295 .headermain {
 296     font-weight: bold;
 297 }
 298
 299 #maincontent {
 300     display: block;
 301     height: 1px;
 302     overflow: hidden;
 303 }
 304
 305 img.uihint {
 306     cursor: help;
 307 }
 308
 309 #addmembersform table {
 310     margin-left: auto;
 311     margin-right: auto;
 312 }
 313
 314 table.flexible .emptyrow {
 315     display: none;
 316 }
 317
 318 form.popupform,
 319 form.popupform div {
 320     display: inline;
 321 }
 322
 323 .arrow_button input {
 324     overflow: hidden;
 325 }
 326 .no-overflow {
 327     overflow: auto;
 328 }
 329
 330 // Minimum height required for a menu in a table inside a scrollable div.
 331 // Position required for table sizing inside a flex container.
 332 .no-overflow > .generaltable {
 333     position: relative;
 334     margin-bottom: 0;
 335     min-height: 10em;
 336 }
 337 // Accessibility features
 338
 339 // Accessibility: text 'seen' by screen readers but not visual users.
 340 .accesshide {
 341     @include sr-only();
 342 }
 343
 344 span.hide,
 345 div.hide,
 346 .hidden {
 347     display: none;
 348 }
 349 // Accessibility: Skip block link, for keyboard-only users.
 350 a.skip-block,
 351 a.skip {
 352     position: absolute;
 353     top: -1000em;
 354     font-size: 0.85em;
 355     text-decoration: none;
 356 }
 357
 358 a.skip-block:focus,
 359 a.skip-block:active,
 360 a.skip:focus,
 361 a.skip:active {
 362     position: static;
 363     display: block;
 364 }
 365
 366 .skip-block-to {
 367     display: block;
 368     height: 1px;
 369     overflow: hidden;
 370 }
 371 // Blogs
 372 .addbloglink {
 373     text-align: center;
 374 }
 375
 376 .blog_entry .audience {
 377     text-align: right;
 378     padding-right: 4px;
 379 }
 380
 381 .blog_entry .tags {
 382     margin-top: 15px;
 383 }
 384
 385 .blog_entry .content {
 386     margin-left: 43px;
 387 }
 388 // Group
 389
 390 #doc-contents h1 {
 391     margin: 1em 0 0 0;
 392 }
 393
 394 #doc-contents ul {
 395     margin: 0;
 396     padding: 0;
 397     width: 90%;
 398 }
 399
 400 #doc-contents ul li {
 401     list-style-type: none;
 402 }
 403
 404 .groupmanagementtable td {
 405     vertical-align: top;
 406 }
 407
 408 .groupmanagementtable #existingcell,
 409 .groupmanagementtable #potentialcell {
 410     width: 42%;
 411 }
 412
 413 .groupmanagementtable #buttonscell {
 414     width: 16%;
 415 }
 416
 417 .groupmanagementtable #buttonscell p.arrow_button input {
 418     width: auto;
 419     min-width: 80%;
 420     margin: 0 auto;
 421     display: block;
 422 }
 423
 424 .groupmanagementtable #removeselect_wrapper,
 425 .groupmanagementtable #addselect_wrapper {
 426     width: 100%;
 427 }
 428
 429 .groupmanagementtable #removeselect_wrapper label,
 430 .groupmanagementtable #addselect_wrapper label {
 431     font-weight: normal;
 432 }
 433
 434 #group-usersummary {
 435     width: 14em;
 436 }
 437
 438 .groupselector {
 439     margin-top: 3px;
 440     margin-bottom: 3px;
 441     display: inline-block;
 442 }
 443
 444 .groupselector label {
 445     display: inline-block;
 446 }
 447
 448 // Login
 449 .login-page {
 450     [name="username"] {
 451         margin-bottom: -1px;
 452         border-bottom-right-radius: 0;
 453         border-bottom-left-radius: 0;
 454     }
 455
 456     [type="password"] {
 457         margin-bottom: 10px;
 458         border-top-left-radius: 0;
 459         border-top-right-radius: 0;
 460     }
 461 }
 462
 463 // Notes
 464 .notepost {
 465     margin-bottom: 1em;
 466 }
 467
 468 .notepost .userpicture {
 469     float: left;
 470     margin-right: 5px;
 471 }
 472
 473 .notepost .content,
 474 .notepost .footer {
 475     clear: both;
 476 }
 477
 478 .notesgroup {
 479     margin-left: 20px;
 480 }
 481
 482 // My Moodle
 483 .path-my .coursebox {
 484     margin: $spacer-y 0;
 485     padding: 0;
 486
 487     .overview {
 488         margin: 15px 30px 10px 30px;
 489     }
 490 }
 491
 492 .path-my .coursebox .info {
 493     float: none;
 494     margin: 0;
 495 }
 496
 497 // Modules
 498 .mod_introbox {
 499     padding: 10px;
 500 }
 501
 502 table.mod_index {
 503     width: 100%;
 504 }
 505
 506 // Comments
 507 .comment-ctrl {
 508     font-size: 12px;
 509     display: none;
 510     margin: 0;
 511     padding: 0;
 512 }
 513
 514 .comment-ctrl h5 {
 515     margin: 0;
 516     padding: 5px;
 517 }
 518
 519 .comment-area {
 520     max-width: 400px;
 521     padding: 5px;
 522 }
 523
 524 .comment-area textarea {
 525     width: 100%;
 526     overflow: auto;
 527
 528     &.fullwidth {
 529         -webkit-box-sizing: border-box;
 530         -moz-box-sizing: border-box;
 531         box-sizing: border-box;
 532     }
 533 }
 534
 535 .comment-area .fd {
 536     text-align: right;
 537 }
 538
 539 .comment-meta span {
 540     color: gray;
 541 }
 542
 543 .comment-link img {
 544     vertical-align: text-bottom;
 545 }
 546
 547 .comment-list {
 548     font-size: 11px;
 549     overflow: auto;
 550     list-style: none;
 551     padding: 0;
 552     margin: 0;
 553 }
 554
 555 .comment-list li {
 556     margin: 2px;
 557     list-style: none;
 558     margin-bottom: 5px;
 559     clear: both;
 560     padding: .3em;
 561     position: relative;
 562 }
 563
 564 .comment-list li.first {
 565     display: none;
 566 }
 567
 568 .comment-paging {
 569     text-align: center;
 570 }
 571
 572 .comment-paging .pageno {
 573     padding: 2px;
 574 }
 575
 576 .comment-paging .curpage {
 577     border: 1px solid #ccc;
 578 }
 579
 580 .comment-message .picture {
 581     width: 20px;
 582     float: left;
 583 }
 584
 585 .comment-message .text {
 586     margin: 0;
 587     padding: 0;
 588 }
 589
 590 .comment-message .text p {
 591     padding: 0;
 592     margin: 0 18px 0 0;
 593 }
 594
 595 .comment-delete {
 596     position: absolute;
 597     top: 0;
 598     right: 0;
 599     margin: .3em;
 600 }
 601
 602 .comment-report-selectall {
 603     display: none;
 604 }
 605
 606 .comment-link {
 607     display: none;
 608 }
 609
 610 .jsenabled .comment-link {
 611     display: block;
 612 }
 613
 614 .jsenabled .showcommentsnonjs {
 615     display: none;
 616 }
 617
 618 .jsenabled .comment-report-selectall {
 619     display: inline;
 620 }
 621 /**
 622 * Completion progress report
 623 */
 624 .completion-expired {
 625     color: map-get($theme-colors, 'warning');
 626 }
 627
 628 .completion-expected {
 629     font-size: $font-size-xs;
 630 }
 631
 632 .completion-sortchoice,
 633 .completion-identifyfield {
 634     font-size: $font-size-xs;
 635     vertical-align: bottom;
 636 }
 637
 638 .completion-progresscell {
 639     text-align: right;
 640 }
 641
 642 .completion-expired .completion-expected {
 643     font-weight: bold;
 644 }
 645 /**
 646 * Tags
 647 */
 648 img.user-image {
 649     height: 100px;
 650     width: 100px;
 651 }
 652
 653 #tag-search-box {
 654     text-align: center;
 655     margin: 10px auto;
 656 }
 657
 658 .path-tag .tag-index-items .tagarea {
 659     border: 1px solid #e3e3e3;
 660     border-radius: 4px;
 661     padding: 10px;
 662     margin-top: 10px;
 663 }
 664
 665 .path-tag .tag-index-items .tagarea h3 {
 666     display: block;
 667     padding: 3px 0 10px 0;
 668     margin: 0;
 669     font-size: 1.1em;
 670     font-weight: bold;
 671     line-height: 20px;
 672     color: #999;
 673     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 674     text-transform: uppercase;
 675     word-wrap: break-word;
 676     border-bottom: solid 1px #e3e3e3;
 677     margin-bottom: 10px;
 678 }
 679
 680 .path-tag .tagarea .controls,
 681 .path-tag .tagarea .taggeditems {
 682     @include clearfix();
 683 }
 684
 685 .path-tag .tagarea .controls,
 686 .path-tag .tag-backtoallitems {
 687     text-align: center;
 688 }
 689
 690 .path-tag .tagarea .controls .gotopage.nextpage {
 691     float: right;
 692 }
 693
 694 .path-tag .tagarea .controls .gotopage.prevpage {
 695     float: left;
 696 }
 697
 698 .path-tag .tagarea .controls .exclusivemode {
 699     display: inline-block;
 700 }
 701
 702 .path-tag .tagarea .controls.controls-bottom {
 703     margin-top: 5px;
 704 }
 705
 706 .path-tag .tagarea .controls .gotopage.nextpage::after {
 707     padding-right: 5px;
 708     padding-left: 5px;
 709     content: "»";
 710 }
 711
 712 .path-tag .tagarea .controls .gotopage.prevpage::before {
 713     padding-right: 5px;
 714     padding-left: 5px;
 715     content: "«";
 716 }
 717
 718 span.flagged-tag,
 719 tr.flagged-tag,
 720 span.flagged-tag a,
 721 tr.flagged-tag a {
 722     color: map-get($theme-colors, 'warning');
 723 }
 724
 725 .tag-management-table td,
 726 .tag-management-table th {
 727     vertical-align: middle;
 728     padding: 4px;
 729 }
 730
 731 .tag-management-table .inplaceeditable.inplaceeditingon input {
 732     width: 150px;
 733 }
 734
 735 .path-admin-tag .addstandardtags {
 736     float: right;
 737
 738     img {
 739         margin: 0 5px;
 740     }
 741 }
 742
 743 .path-tag .tag-relatedtags {
 744     padding-top: 10px;
 745 }
 746
 747 .path-tag .tag-management-box {
 748     text-align: right;
 749 }
 750
 751 .path-tag .tag-index-toc {
 752     padding: 10px;
 753     text-align: center;
 754 }
 755
 756 .path-tag .tag-index-toc li,
 757 .path-tag .tag-management-box li {
 758     margin-left: 5px;
 759     margin-right: 5px;
 760 }
 761
 762 .path-tag .tag-management-box li a.edittag {
 763     background-image: url([[pix:moodle|i/settings]]);
 764 }
 765
 766 .path-tag .tag-management-box li a.flagasinappropriate {
 767     background-image: url([[pix:moodle|i/flagged]]);
 768 }
 769
 770 .path-tag .tag-management-box li a.removefrommyinterests {
 771     background-image: url([[pix:moodle|t/delete]]);
 772 }
 773
 774 .path-tag .tag-management-box li a.addtomyinterests {
 775     background-image: url([[pix:moodle|t/add]]);
 776 }
 777
 778 .path-tag .tag-management-box li a {
 779     background-repeat: no-repeat;
 780     background-position: left;
 781     padding-left: 17px;
 782 }
 783
 784 .tag_feed.media-list .media .itemimage {
 785     float: left;
 786 }
 787
 788 .tag_feed.media-list .media .itemimage img {
 789     height: 35px;
 790     width: 35px;
 791 }
 792
 793 .tag_feed.media-list .media .media-body {
 794     padding-right: 10px;
 795     padding-left: 10px;
 796 }
 797
 798 .tag_feed .media .muted a {
 799     color: $text-muted;
 800 }
 801
 802 .tag_cloud {
 803     text-align: center;
 804 }
 805
 806 .tag_cloud .inline-list li {
 807     padding: 0 0.2em;
 808 }
 809
 810 .tag_cloud .tag_overflow {
 811     margin-top: 1em;
 812     font-style: italic;
 813 }
 814
 815 .tag_cloud .s20 {
 816     font-size: 2.7em;
 817 }
 818
 819 .tag_cloud .s19 {
 820     font-size: 2.6em;
 821 }
 822
 823 .tag_cloud .s18 {
 824     font-size: 2.5em;
 825 }
 826
 827 .tag_cloud .s17 {
 828     font-size: 2.4em;
 829 }
 830
 831 .tag_cloud .s16 {
 832     font-size: 2.3em;
 833 }
 834
 835 .tag_cloud .s15 {
 836     font-size: 2.2em;
 837 }
 838
 839 .tag_cloud .s14 {
 840     font-size: 2.1em;
 841 }
 842
 843 .tag_cloud .s13 {
 844     font-size: 2em;
 845 }
 846
 847 .tag_cloud .s12 {
 848     font-size: 1.9em;
 849 }
 850
 851 .tag_cloud .s11 {
 852     font-size: 1.8em;
 853 }
 854
 855 .tag_cloud .s10 {
 856     font-size: 1.7em;
 857 }
 858
 859 .tag_cloud .s9 {
 860     font-size: 1.6em;
 861 }
 862
 863 .tag_cloud .s8 {
 864     font-size: 1.5em;
 865 }
 866
 867 .tag_cloud .s7 {
 868     font-size: 1.4em;
 869 }
 870
 871 .tag_cloud .s6 {
 872     font-size: 1.3em;
 873 }
 874
 875 .tag_cloud .s5 {
 876     font-size: 1.2em;
 877 }
 878
 879 .tag_cloud .s4 {
 880     font-size: 1.1em;
 881 }
 882
 883 .tag_cloud .s3 {
 884     font-size: 1em;
 885 }
 886
 887 .tag_cloud .s2 {
 888     font-size: 0.9em;
 889 }
 890
 891 .tag_cloud .s1 {
 892     font-size: 0.8em;
 893 }
 894
 895 .tag_cloud .s0 {
 896     font-size: 0.7em;
 897 }
 898
 899 .tag_list ul {
 900     display: inline;
 901 }
 902
 903 .tag_list.hideoverlimit .overlimit {
 904     display: none;
 905 }
 906
 907 .tag_list .tagmorelink {
 908     display: none;
 909 }
 910
 911 .tag_list.hideoverlimit .tagmorelink {
 912     display: inline;
 913 }
 914
 915 .tag_list.hideoverlimit .taglesslink {
 916     display: none;
 917 }
 918
 919 /**
 920 * Web Service
 921 */
 922 #webservice-doc-generator td {
 923     text-align: left;
 924     border: 0 solid black;
 925 }
 926
 927 /**
 928 * Enrol
 929 */
 930 .userenrolment {
 931     width: 100%;
 932     border-collapse: collapse;
 933 }
 934
 935 .userenrolment tr {
 936     vertical-align: top;
 937 }
 938
 939 .userenrolment td {
 940     padding: 0;
 941     height: 41px;
 942 }
 943
 944 .userenrolment .subfield {
 945     margin-right: 5px;
 946 }
 947
 948 .userenrolment .col_userdetails .subfield {
 949     margin-left: 40px;
 950 }
 951
 952 .userenrolment .col_userdetails .subfield_picture {
 953     float: left;
 954     margin-left: 0;
 955 }
 956
 957 .userenrolment .col_lastseen {
 958     width: 150px;
 959 }
 960
 961 .userenrolment .col_role {
 962     width: 262px;
 963 }
 964
 965 .userenrolment .col_role .roles,
 966 .userenrolment .col_group .groups {
 967     margin-right: 30px;
 968 }
 969
 970 .userenrolment .col_role .role {
 971     float: left;
 972     padding: 0 3px 3px;
 973     margin: 0 3px 3px;
 974     white-space: nowrap;
 975 }
 976
 977 .userenrolment .col_group .group {
 978     float: left;
 979     padding: 3px;
 980     margin: 3px;
 981     white-space: nowrap;
 982 }
 983
 984 .userenrolment .col_role .role a,
 985 .userenrolment .col_group .group a {
 986     margin-left: 3px;
 987     cursor: pointer;
 988 }
 989
 990 .userenrolment .col_role .addrole,
 991 .userenrolment .col_group .addgroup {
 992     float: right;
 993     padding: 3px;
 994     margin: 3px;
 995
 996     > a:hover {
 997         border-bottom: 1px solid #666;
 998     }
 999 }
1000
1001 .userenrolment .col_role .addrole img,
1002 .userenrolment .col_group .addgroup img {
1003     vertical-align: baseline;
1004 }
1005
1006 .userenrolment .hasAllRoles .col_role .addrole {
1007     display: none;
1008 }
1009
1010 .userenrolment .col_enrol .enrolment {
1011     float: left;
1012     padding: 0 3px 3px;
1013     margin: 0 3px 3px;
1014 }
1015
1016 .userenrolment .col_enrol .enrolment a {
1017     float: right;
1018     margin-left: 3px;
1019 }
1020
1021 .corelightbox {
1022     background-color: #ccc;
1023     position: absolute;
1024     top: 0;
1025     left: 0;
1026     width: 100%;
1027     height: 100%;
1028     text-align: center;
1029 }
1030
1031 .corelightbox img {
1032     position: fixed;
1033     top: 50%;
1034     left: 50%;
1035 }
1036
1037 .mod-indent-outer {
1038     display: table;
1039 }
1040
1041 .mod-indent {
1042     display: table-cell;
1043 }
1044
1045 .label .mod-indent {
1046     float: left;
1047     padding-top: 20px;
1048 }
1049 $mod-indent-size: 30px;
1050 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1051
1052 @for $i from 1 through 16 {
1053     $width: ($i * $mod-indent-size);
1054
1055     .mod-indent-#{$i} {
1056         width: $width;
1057     }
1058 }
1059
1060 .mod-indent-huge {
1061     width: (16 * $mod-indent-size);
1062 }
1063
1064 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1065 .resourcecontent .mediaplugin_mp3 object {
1066     height: 25px;
1067     width: 600px;
1068 }
1069
1070 .resourcecontent audio.mediaplugin_html5audio {
1071     width: 600px;
1072 }
1073 /** Large resource images should avoid hidden overflow **/
1074 .resourceimage {
1075     max-width: 100%;
1076 }
1077 /* Audio player size in 'inline' mode (can only change width, as above) */
1078 .mediaplugin_mp3 object {
1079     height: 15px;
1080     width: 300px;
1081 }
1082
1083 audio.mediaplugin_html5audio {
1084     width: 300px;
1085 }
1086 /* TinyMCE moodle media preview frame should not have padding */
1087 .core_media_preview.pagelayout-embedded #content {
1088     padding: 0;
1089 }
1090
1091 .core_media_preview.pagelayout-embedded #maincontent {
1092     height: 0;
1093 }
1094
1095 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1096     padding: 0;
1097     margin: 0;
1098     min-width: 0;
1099     background: none;
1100 }
1101
1102 .path-rating .ratingtable {
1103     width: 100%;
1104     margin-bottom: 1em;
1105 }
1106
1107 .path-rating .ratingtable th.rating {
1108     width: 100%;
1109 }
1110
1111 .path-rating .ratingtable td.rating,
1112 .path-rating .ratingtable td.time {
1113     white-space: nowrap;
1114     text-align: center;
1115 }
1116
1117 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1118 .moodle-dialogue-base .moodle-dialogue-lightbox {
1119     background-color: $gray;
1120 }
1121
1122 // Prevent adding backdrops to popups in popups.
1123 .pagelayout-popup {
1124     .moodle-dialogue-base {
1125         .moodle-dialogue-lightbox {
1126             background-color: transparent;
1127         }
1128         .moodle-dialogue {
1129             box-shadow: $popover-box-shadow;
1130         }
1131     }
1132 }
1133
1134 .moodle-dialogue-base .hidden,
1135 .moodle-dialogue-base .moodle-dialogue-hidden {
1136     display: none;
1137 }
1138
1139 .no-scrolling {
1140     overflow: hidden;
1141 }
1142
1143 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1144     left: 0;
1145     top: 0;
1146     right: 0;
1147     bottom: -50px;
1148     position: fixed;
1149 }
1150
1151 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1152     overflow: auto;
1153 }
1154
1155 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1156     width: 28px;
1157     height: 16px;
1158     background-size: 100%;
1159 }
1160
1161 .moodle-dialogue-base .moodle-dialogue-wrap {
1162     background-color: #fff;
1163     border: 1px solid #ccc;
1164 }
1165
1166 // Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1167 // it for a reason (conflicts with jquery .show()).
1168 .modal.show {
1169     display: block;
1170 }
1171
1172 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1173     display: flex;
1174     padding: 1rem 1rem;
1175     border-bottom: 1px solid #dee2e6;
1176 }
1177
1178 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1179     // Undo some YUI damage.
1180     min-height: 3rem;
1181     color: initial;
1182     background: initial;
1183     font-size: 1.5rem;
1184     line-height: 1.5;
1185 }
1186
1187 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1188     font-size: 1.5rem;
1189 }
1190
1191 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1192     /*rtl:raw:
1193         left: 0;
1194         right: auto;
1195     */
1196     padding: 0;
1197     position: relative;
1198     margin-left: auto;
1199 }
1200
1201 .moodle-dialogue-base .closebutton {
1202     padding: $modal-header-padding;
1203     margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
1204     position: relative;
1205     background-color: transparent;
1206     border: 0;
1207     background-image: none;
1208     box-shadow: none;
1209     opacity: 0.7;
1210     &:hover,
1211     &:active {
1212         opacity: 1;
1213     }
1214     &::after {
1215         content: "×";
1216     }
1217 }
1218
1219 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1220     padding: 0.5rem;
1221     body {
1222         background-color: $body-bg;
1223     }
1224 }
1225
1226 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1227     overflow: auto;
1228     position: absolute;
1229     top: 0;
1230     bottom: 50px;
1231     left: 0;
1232     right: 0;
1233     margin: 0;
1234     border: 0;
1235 }
1236
1237 .moodle-dialogue-exception .moodle-exception-param label {
1238     font-weight: bold;
1239 }
1240
1241 .moodle-dialogue-exception .param-stacktrace label {
1242     background-color: #eee;
1243     border: 1px solid #ccc;
1244     border-bottom-width: 0;
1245 }
1246
1247 .moodle-dialogue-exception .param-stacktrace pre {
1248     border: 1px solid #ccc;
1249     background-color: #fff;
1250 }
1251
1252 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1253     color: navy;
1254     font-size: $font-size-sm;
1255 }
1256
1257 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1258     color: map-get($theme-colors, 'warning');
1259     font-size: $font-size-sm;
1260 }
1261
1262 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1263     color: #333;
1264     font-size: 90%;
1265     border-bottom: 1px solid #eee;
1266 }
1267
1268 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1269     display: none;
1270 }
1271
1272 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1273     // Undo some YUI damage.
1274     background: initial;
1275 }
1276
1277 .moodle-dialogue-confirm .confirmation-message {
1278     margin: 0.5rem 0;
1279 }
1280
1281 .moodle-dialogue-confirm .confirmation-dialogue input {
1282     min-width: 80px;
1283 }
1284
1285 .moodle-dialogue-exception .moodle-exception-message {
1286     margin: 1em;
1287 }
1288
1289 .moodle-dialogue-exception .moodle-exception-param {
1290     margin-bottom: 0.5em;
1291 }
1292
1293 .moodle-dialogue-exception .moodle-exception-param label {
1294     width: 150px;
1295 }
1296
1297 .moodle-dialogue-exception .param-stacktrace label {
1298     display: block;
1299     margin: 0;
1300     padding: 4px 1em;
1301 }
1302
1303 .moodle-dialogue-exception .param-stacktrace pre {
1304     display: block;
1305     height: 200px;
1306     overflow: auto;
1307 }
1308
1309 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1310     display: inline-block;
1311     margin: 4px 0;
1312 }
1313
1314 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1315     display: inline-block;
1316     width: 50px;
1317     margin: 4px 1em;
1318 }
1319
1320 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1321     padding-left: 25px;
1322     margin-bottom: 4px;
1323     padding-bottom: 4px;
1324 }
1325
1326 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1327     opacity: 0.75;
1328     width: 100%;
1329     height: 100%;
1330     top: 0;
1331     left: 0;
1332     background-color: white;
1333     text-align: center;
1334     padding: 10% 0;
1335 }
1336 /* Apply a default max-height on tooltip text */
1337 .moodle-dialogue .tooltiptext {
1338     max-height: 300px;
1339 }
1340
1341 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1342     z-index: 3001;
1343
1344     .moodle-dialogue-bd {
1345         overflow: auto;
1346     }
1347 }
1348
1349 /**
1350  * Chooser Dialogues (moodle-core-chooserdialogue)
1351  *
1352  * This CSS belong to the chooser dialogue which should work both with, and
1353  * without javascript enabled
1354  */
1355 /* Hide the dialog and it's title */
1356 .chooserdialoguebody,
1357 .choosertitle {
1358     display: none;
1359 }
1360
1361 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1362     margin: 0;
1363 }
1364
1365 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1366     padding: 0;
1367     background: #f2f2f2;
1368
1369     @include border-bottom-radius(10px);
1370 }
1371 /* Center the submit buttons within the area */
1372 .choosercontainer #chooseform .submitbuttons {
1373     padding: 0.7em 0;
1374     text-align: right;
1375 }
1376 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1377
1378 @media (max-height: 639px) {
1379     .ios .choosercontainer #chooseform .submitbuttons {
1380         padding: 45px 0;
1381     }
1382 }
1383
1384 .choosercontainer #chooseform .submitbuttons input {
1385     min-width: 100px;
1386     margin: 0 0.5em;
1387 }
1388 /* Various settings for the options area */
1389 .choosercontainer #chooseform .options {
1390     position: relative;
1391     border-bottom: 1px solid #bbb;
1392 }
1393 /* Only set these options if we're showing the js container */
1394 .jschooser .choosercontainer #chooseform .alloptions {
1395     overflow-x: hidden;
1396     overflow-y: auto;
1397     max-width: 240px;
1398
1399     .option {
1400         input[type=radio] {
1401             display: inline-block;
1402         }
1403
1404         .typename {
1405             display: inline-block;
1406             width: 55%;
1407         }
1408     }
1409 }
1410 /* Settings for option rows and option subtypes */
1411 .choosercontainer #chooseform .moduletypetitle,
1412 .choosercontainer #chooseform .option,
1413 .choosercontainer #chooseform .nonoption {
1414     margin-bottom: 0;
1415     padding: 0 1.6em 0 1.6em;
1416 }
1417
1418 .choosercontainer #chooseform .moduletypetitle {
1419     text-transform: uppercase;
1420     padding-top: 1.2em;
1421     padding-bottom: 0.4em;
1422 }
1423
1424 .choosercontainer #chooseform .option .typename,
1425 .choosercontainer #chooseform .nonoption .typename {
1426     padding: 0 0 0 0.5em;
1427 }
1428
1429 .choosercontainer #chooseform .modicon + .typename {
1430     padding-left: 0;
1431 }
1432
1433 .choosercontainer #chooseform .option input[type=radio],
1434 .choosercontainer #chooseform .option span.typename {
1435     vertical-align: middle;
1436 }
1437
1438 .choosercontainer #chooseform .option label {
1439     display: block;
1440     margin: 0;
1441     padding: ($spacer / 2) 0;
1442     border-bottom: 1px solid #fff;
1443 }
1444
1445 .choosercontainer #chooseform .option .icon {
1446     margin: 0;
1447     padding: 0 $spacer;
1448 }
1449
1450 .choosercontainer #chooseform .nonoption {
1451     padding-left: 2.7em;
1452     padding-top: 0.3em;
1453     padding-bottom: 0.1em;
1454 }
1455
1456 .choosercontainer #chooseform .subtype {
1457     margin-bottom: 0;
1458     padding: 0 1.6em 0 3.2em;
1459 }
1460
1461 .choosercontainer #chooseform .subtype .typename {
1462     margin: 0 0 0 0.2em;
1463 }
1464 /* The instruction/help area */
1465 .jschooser .choosercontainer #chooseform .instruction,
1466 .jschooser .choosercontainer #chooseform .typesummary {
1467     display: none;
1468     position: absolute;
1469     top: 0;
1470     right: 0;
1471     bottom: 0;
1472     left: 240px;
1473     margin: 0;
1474     padding: 1.6em;
1475     background-color: #fff;
1476     overflow-x: hidden;
1477     overflow-y: auto;
1478     line-height: 2em;
1479 }
1480 /* Selected option settings */
1481 .jschooser .choosercontainer #chooseform .instruction,
1482 .choosercontainer #chooseform .selected .typesummary {
1483     display: block;
1484 }
1485
1486 .choosercontainer #chooseform .selected {
1487     background-color: #fff;
1488     margin-top: -1px;
1489     padding-top: 1px;
1490 }
1491
1492 .chooserdialogue-course-modchooser .modicon .icon {
1493     width: 24px;
1494     height: 24px;
1495     font-size: 24px;
1496 }
1497
1498 @include media-breakpoint-down(xs) {
1499     .jsenabled .choosercontainer #chooseform .alloptions {
1500         max-width: 100%;
1501     }
1502
1503     .jsenabled .choosercontainer #chooseform .instruction,
1504     .jsenabled .choosercontainer #chooseform .typesummary {
1505         position: static;
1506     }
1507 }
1508
1509 /* Form element: listing */
1510 .formlistingradio {
1511     padding-bottom: 25px;
1512     padding-right: 10px;
1513 }
1514
1515 .formlistinginputradio {
1516     float: left;
1517 }
1518
1519 .formlistingmain {
1520     min-height: 225px;
1521 }
1522
1523 .formlisting {
1524     position: relative;
1525     margin: 15px 0;
1526     padding: 1px 19px 14px;
1527     background-color: white;
1528     border: 1px solid #ddd;
1529
1530     @include border-radius(4px);
1531 }
1532
1533 .formlistingmore {
1534     position: absolute;
1535     cursor: pointer;
1536     bottom: -1px;
1537     right: -1px;
1538     padding: 3px 7px;
1539     font-size: 12px;
1540     font-weight: bold;
1541     background-color: whitesmoke;
1542     border: 1px solid #ddd;
1543     color: #9da0a4;
1544
1545     @include border-radius(4px 0 4px 0);
1546 }
1547
1548 .formlistingall {
1549     margin: 15px 0;
1550     padding: 0;
1551
1552     @include border-radius(4px);
1553 }
1554
1555 .formlistingrow {
1556     cursor: pointer;
1557     border-bottom: 1px solid;
1558     border-color: #e1e1e8;
1559     border-left: 1px solid #e1e1e8;
1560     border-right: 1px solid #e1e1e8;
1561     background-color: #f7f7f9;
1562
1563     @include border-radius(0 0 4px 4px);
1564     padding: 6px;
1565     top: 50%;
1566     left: 50%;
1567     min-height: 34px;
1568     float: left;
1569     width: 150px;
1570 }
1571
1572 body.jsenabled .formlistingradio {
1573     display: none;
1574 }
1575
1576 body.jsenabled .formlisting {
1577     display: block;
1578 }
1579
1580 a.criteria-action {
1581     padding: 0 3px;
1582     float: right;
1583 }
1584
1585 div.criteria-description {
1586     padding: 10px 15px;
1587     margin: 5px 0;
1588     background: none repeat scroll 0 0 #f9f9f9;
1589     border: 1px solid #eee;
1590 }
1591
1592 ul.badges {
1593     margin: 0;
1594     list-style: none;
1595 }
1596
1597 .badges li {
1598     position: relative;
1599     display: inline-block;
1600     padding-top: 1em;
1601     text-align: center;
1602     vertical-align: top;
1603     width: 150px;
1604 }
1605
1606 .badges li .badge-name {
1607     display: block;
1608     padding: 5px;
1609 }
1610
1611 .badges li > img {
1612     position: absolute;
1613 }
1614
1615 .badges li .badge-image {
1616     width: 100px;
1617     height: 100px;
1618     left: 10px;
1619     top: 0;
1620     z-index: 1;
1621 }
1622
1623 .badges li .badge-actions {
1624     position: relative;
1625 }
1626
1627 .badges li .expireimage {
1628     width: 100px;
1629     height: 100px;
1630     left: 25px;
1631     top: 0;
1632     position: absolute;
1633     z-index: 10;
1634     opacity: 0.85;
1635 }
1636
1637 #badge-image {
1638     background-color: transparent;
1639     padding: 0;
1640     position: relative;
1641     min-width: 100px;
1642     width: 20%;
1643     display: inline-block;
1644     vertical-align: top;
1645     margin-top: 17px;
1646     margin-bottom: 20px;
1647
1648     .expireimage {
1649         width: 100px;
1650         height: 100px;
1651         left: 0;
1652         top: 0;
1653         opacity: 0.85;
1654         position: absolute;
1655         z-index: 10;
1656     }
1657
1658     .singlebutton {
1659         padding-top: 5px;
1660         display: block;
1661
1662         button {
1663             margin-left: 4px;
1664         }
1665     }
1666 }
1667
1668 #badge-details {
1669     display: inline-block;
1670     width: 79%;
1671 }
1672
1673 #badge-overview dl,
1674 #badge-details dl {
1675     margin: 0;
1676
1677     dt,
1678     dd {
1679         vertical-align: top;
1680         padding: 3px 0;
1681     }
1682
1683     dt {
1684         clear: both;
1685         display: inline-block;
1686         width: 20%;
1687         min-width: 100px;
1688     }
1689
1690     dd {
1691         display: inline-block;
1692         width: 79%;
1693         margin-left: 1%;
1694     }
1695 }
1696
1697 .badge-profile {
1698     vertical-align: top;
1699 }
1700
1701 .connected {
1702     color: map-get($theme-colors, 'success');
1703 }
1704
1705 .notconnected {
1706     color: map-get($theme-colors, 'danger');
1707 }
1708
1709 .connecting {
1710     color: map-get($theme-colors, 'warning');
1711 }
1712
1713 #page-badges-award .recipienttable tr td {
1714     vertical-align: top;
1715 }
1716
1717 #page-badges-award .recipienttable tr td.actions .actionbutton {
1718     margin: 0.3em 0;
1719     padding: 0.5em 0;
1720     width: 100%;
1721 }
1722
1723 #page-badges-award .recipienttable tr td.existing,
1724 #page-badges-award .recipienttable tr td.potential {
1725     width: 42%;
1726 }
1727
1728 #issued-badge-table .activatebadge {
1729     display: inline-block;
1730 }
1731
1732 .statusbox.active {
1733     background-color: $state-success-bg;
1734 }
1735
1736 .statusbox.inactive {
1737     background-color: $state-warning-bg;
1738 }
1739
1740 .statusbox {
1741     text-align: center;
1742     margin-bottom: 5px;
1743     padding: 5px;
1744 }
1745
1746 .statusbox .activatebadge {
1747     display: inline-block;
1748 }
1749
1750 .statusbox .activatebadge input[type=submit] {
1751     margin: 3px;
1752 }
1753
1754 .activatebadge {
1755     margin: 0;
1756     text-align: left;
1757     vertical-align: middle;
1758 }
1759
1760 img#persona_signin {
1761     cursor: pointer;
1762 }
1763
1764 .addcourse {
1765     float: right;
1766 }
1767
1768 .invisiblefieldset {
1769     display: inline;
1770     padding: 0;
1771     border-width: 0;
1772 }
1773
1774 /** Page header */
1775 #page-header {
1776     .logo {
1777         margin: $spacer 0;
1778         img {
1779             max-height: 75px;
1780         }
1781     }
1782 }
1783
1784 /** Navbar logo. */
1785 nav.navbar .logo img {
1786     max-height: 35px;
1787 }
1788
1789 /** Header-bar styles **/
1790 .page-context-header {
1791     // We need to be explicit about the height of the header.
1792     $pageHeaderHeight: 140px;
1793
1794     // Do not remove these rules.
1795     overflow: hidden;
1796
1797     .page-header-image,
1798     .page-header-headings {
1799         float: left;
1800         display: block;
1801         position: relative;
1802     }
1803
1804     .page-header-image {
1805         margin-right: 1em;
1806         margin-bottom: 1em;
1807     }
1808
1809     .page-header-headings,
1810     .header-button-group {
1811         position: relative;
1812         line-height: 24px;
1813         vertical-align: middle;
1814     }
1815
1816     .header-button-group {
1817         display: block;
1818         float: left;
1819
1820         a {
1821             position: relative;
1822
1823             // Don't touch it unless you know exactly what you are doing.
1824             top: -0.4em;
1825         }
1826     }
1827 }
1828
1829 ul.dragdrop-keyboard-drag li {
1830     list-style-type: none;
1831 }
1832
1833 a.disabled:hover,
1834 a.disabled {
1835     text-decoration: none;
1836     cursor: default;
1837     font-style: italic;
1838     color: #808080;
1839 }
1840
1841 body.lockscroll {
1842     height: 100%;
1843     overflow: hidden;
1844 }
1845
1846 .progressbar_container {
1847     max-width: 500px;
1848     margin: 0 auto;
1849 }
1850
1851 /* IE10 only fix for calendar titling */
1852 .ie10 .yui3-calendar-header-label {
1853     display: inline-block;
1854 }
1855
1856 dd:before,
1857 dd:after {
1858     display: block;
1859     content: " ";
1860 }
1861
1862 dd:after {
1863     clear: both;
1864 }
1865
1866 // Active tabs with links should have a different
1867 // cursor to indicate they are clickable.
1868 .nav-tabs > .active > a[href],
1869 .nav-tabs > .active > a[href]:hover,
1870 .nav-tabs > .active > a[href]:focus {
1871     cursor: pointer;
1872 }
1873
1874 .inplaceeditable {
1875     &.inplaceeditingon {
1876         position: relative;
1877
1878         .editinstructions {
1879             margin-top: -30px;
1880             font-weight: normal;
1881             margin-right: 0;
1882             margin-left: 0;
1883             left: 0;
1884             right: auto;
1885             white-space: nowrap;
1886         }
1887
1888         input {
1889             width: 330px;
1890             vertical-align: text-bottom;
1891             margin-bottom: 0;
1892         }
1893
1894         select {
1895             margin-bottom: 0;
1896         }
1897     }
1898
1899     .quickediticon img {
1900         opacity: 0.2;
1901     }
1902
1903     .quickeditlink {
1904         color: inherit;
1905         text-decoration: inherit;
1906     }
1907
1908     &:hover .quickeditlink .quickediticon img,
1909     .quickeditlink:focus .quickediticon img {
1910         opacity: 1;
1911     }
1912
1913     &.inplaceeditable-toggle .quickediticon {
1914         display: none;
1915     }
1916
1917     &.inplaceeditable-autocomplete {
1918         display: block;
1919     }
1920 }
1921
1922 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
1923     margin-top: -20px;
1924 }
1925
1926 /** Chart area. */
1927 .chart-area {
1928
1929     .chart-table-data {
1930         display: none;
1931     }
1932
1933     .chart-table {
1934         .chart-output-htmltable caption {
1935             white-space: nowrap;
1936         }
1937         /** When accessible, we display the table only. */
1938         &.accesshide {
1939             .chart-table-expand {
1940                 display: none;
1941             }
1942             .chart-table-data {
1943                 display: block;
1944             }
1945         }
1946     }
1947 }
1948
1949 // Reset for ul.
1950 ul {
1951     padding-left: 1rem;
1952 }
1953
1954 /* YUI 2 Tree View */
1955 /*rtl:raw:
1956 .ygtvtn,
1957 .ygtvtm,
1958 .ygtvtmh,
1959 .ygtvtmhh,
1960 .ygtvtp,
1961 .ygtvtph,
1962 .ygtvtphh,
1963 .ygtvln,
1964 .ygtvlm,
1965 .ygtvlmh,
1966 .ygtvlmhh,
1967 .ygtvlp,
1968 .ygtvlph,
1969 .ygtvlphh,
1970 .ygtvdepthcell,
1971 .ygtvok,
1972 .ygtvok:hover,
1973 .ygtvcancel,
1974 .ygtvcancel:hover {
1975     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
1976 }
1977 */
1978
1979 .hover-tooltip-container {
1980     position: relative;
1981
1982     .hover-tooltip {
1983         opacity: 0;
1984         visibility: hidden;
1985         position: absolute;
1986         /*rtl:ignore*/
1987         left: 50%;
1988         top: calc(-50% - 5px);
1989         transform: translate(-50%, -50%);
1990         background-color: #fff;
1991         border: 1px solid rgba(0, 0, 0, .2);
1992         border-radius: .3rem;
1993         box-sizing: border-box;
1994         padding: 5px;
1995         white-space: nowrap;
1996         transition: opacity 0.15s, visibility 0.15s;
1997         z-index: 1000;
1998
1999         &:before {
2000             content: '';
2001             display: inline-block;
2002             border-left: 8px solid transparent;
2003             border-right: 8px solid transparent;
2004             border-top: 8px solid rgba(0, 0, 0, .2);
2005             position: absolute;
2006             bottom: -8px;
2007             left: calc(50% - 8px);
2008         }
2009
2010         &:after {
2011             content: '';
2012             display: inline-block;
2013             border-left: 7px solid transparent;
2014             border-right: 7px solid transparent;
2015             border-top: 7px solid #fff;
2016             position: absolute;
2017             bottom: -6px;
2018             left: calc(50% - 7px);
2019             z-index: 2;
2020         }
2021     }
2022
2023     &:hover {
2024         .hover-tooltip {
2025             opacity: 1;
2026             visibility: visible;
2027             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2028         }
2029     }
2030 }
2031
2032 #region-flat-nav {
2033     padding-right: 0;
2034     padding-left: 0;
2035     .nav {
2036         margin-right: $grid-gutter-width / 2;
2037         background-color: $card-bg;
2038     }
2039     @include media-breakpoint-down(sm) {
2040         .nav {
2041             margin-top: $grid-gutter-width;
2042             margin-right: 0;
2043         }
2044     }
2045 }
2046
2047 // Footer link colour was added to allow the colour of footer links to be changed,
2048 // but really in bootstrap we want the colour of links on .bg-inverse to be changed
2049 // rather than being specific to the footer. This is kept for backwards compatibility.
2050 $footer-link-color: $bg-inverse-link-color !default;
2051 #page-footer a {
2052     color: $footer-link-color;
2053     text-decoration: underline;
2054     .icon {
2055         color: $footer-link-color;
2056     }
2057 }
2058
2059 .bg-inverse a {
2060     color: $bg-inverse-link-color;
2061     text-decoration: underline;
2062     .icon {
2063         color: $bg-inverse-link-color;
2064     }
2065 }
2066
2067 .sitelink {
2068     img {
2069         width: 112px;
2070     }
2071 }
2072
2073 // Make links in a menu clickable anywhere in the row.
2074 .dropdown-item a {
2075     display: block;
2076     width: 100%;
2077     color: $body-color;
2078 }
2079 .dropdown-item:active a {
2080     color: $dropdown-link-active-color;
2081 }
2082
2083 .competency-tree {
2084     ul {
2085         padding-left: 1.5rem;
2086     }
2087 }
2088
2089 .sr-only-focusable {
2090     &:active,
2091     &:focus {
2092         z-index: $zindex-navbar-fixed + 1;
2093         position: fixed;
2094         background: #fff;
2095         padding: 7px;
2096         left: 0;
2097         top: 0;
2098     }
2099 }
2100
2101 [data-drag-type="move"] {
2102     cursor: move;
2103     touch-action: none;
2104 }
2105
2106 .clickable {
2107     cursor: pointer;
2108 }
2109
2110 .overlay-icon-container {
2111     position: absolute;
2112     top: 0;
2113     left: 0;
2114     width: 100%;
2115     height: 100%;
2116     background-color: rgba(255, 255, 255, 0.6);
2117
2118     .loading-icon {
2119         position: absolute;
2120         top: 50%;
2121         left: 50%;
2122         transform: translate(-50%, -50%);
2123
2124         .icon {
2125             height: 30px;
2126             width: 30px;
2127             font-size: 30px;
2128         }
2129     }
2130 }
2131
2132 .open.atto_menu > .dropdown-menu {
2133     display: block;
2134 }
2135 div.editor_atto_toolbar button .icon {
2136     color: $gray-700;
2137 }
2138 .w-auto {
2139     width: auto;
2140 }
2141
2142 .bg-pulse-grey {
2143     animation: bg-pulse-grey 2s infinite linear;
2144 }
2145
2146 @keyframes bg-pulse-grey {
2147     0% {
2148         background-color: $gray-100;
2149     }
2150     50% {
2151         background-color: darken($gray-100, 5%);
2152     }
2153     100% {
2154         background-color: $gray-100;
2155     }
2156 }
2157
2158 @each $size, $length in $spacers {
2159     .line-height-#{$size} {
2160         line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2161     }
2162 }
2163
2164 .dir-rtl {
2165     .dir-rtl-hide {
2166         display: none;
2167     }
2168 }
2169
2170 .dir-ltr {
2171     .dir-ltr-hide {
2172         display: none;
2173     }
2174 }
2175
2176 .paged-content-page-container {
2177     min-height: 3.125rem;
2178 }
2179
2180 body.h5p-embed {
2181     #page-content {
2182         display: inherit;
2183     }
2184     #maincontent {
2185         display: none;
2186     }
2187     .h5pmessages {
2188         min-height: 230px; // This should be the same height as default core_h5p iframes.
2189     }
2190 }
2191
2192 .text-decoration-none {
2193     text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
2194 }
2195
2196 .colour-inherit {
2197     color: inherit !important; /* stylelint-disable-line declaration-no-important */
2198 }
2199
2200 .position-right {
2201     right: 0 !important; /* stylelint-disable-line declaration-no-important */
2202 }
2203
2204 .overflow-hidden {
2205     overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
2206 }
2207
2208 .text-break {
2209     overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
2210 }
2211
2212 .z-index-1 {
2213     z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
2214 }
2215
2216 // These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
2217 .float-left {
2218     float: left !important; /* stylelint-disable-line declaration-no-important */
2219 }
2220 .float-right {
2221     float: right !important; /* stylelint-disable-line declaration-no-important */
2222 }
2223
2224 // Emoji picker.
2225 $picker-width: 350px !default;
2226 $picker-width-xs: 320px !default;
2227 $picker-height: 400px !default;
2228 $picker-row-height: 40px !default;
2229 $picker-emoji-button-size: 40px !default;
2230 $picker-emoji-button-font-size: 24px !default;
2231 $picker-emoji-category-count: 9 !default;
2232 $picker-emojis-per-row: 7 !default;
2233
2234 .emoji-picker {
2235     width: $picker-width;
2236     height: $picker-height;
2237
2238     .category-button {
2239         padding: .375rem 0;
2240         height: 100%;
2241         width: $picker-width / $picker-emoji-category-count;
2242         border-top: none;
2243         border-left: none;
2244         border-right: none;
2245         border-bottom: 2px solid transparent;
2246
2247         &.selected {
2248             border-bottom: 2px solid map-get($theme-colors, 'primary');
2249         }
2250     }
2251
2252     .emojis-container,
2253     .search-results-container {
2254         min-width: $picker-emojis-per-row * $picker-emoji-button-size;
2255     }
2256
2257     .picker-row {
2258         height: $picker-row-height;
2259
2260         .category-name {
2261             line-height: $picker-row-height;
2262         }
2263
2264         .emoji-button {
2265             height: $picker-emoji-button-size;
2266             width: $picker-emoji-button-size;
2267             line-height: $picker-emoji-button-size;
2268             font-size: $picker-emoji-button-font-size;
2269             overflow: hidden;
2270
2271             @include hover-focus {
2272                 color: inherit;
2273                 text-decoration: none;
2274             }
2275         }
2276     }
2277
2278     .emoji-preview {
2279         height: $picker-row-height;
2280         font-size: $picker-row-height;
2281         line-height: $picker-row-height;
2282     }
2283
2284     .emoji-short-name {
2285         line-height: $picker-row-height / 2;
2286     }
2287
2288     @include media-breakpoint-down(xs) {
2289         width: $picker-width-xs;
2290     }
2291 }
2292
2293 .emoji-auto-complete {
2294     height: $picker-row-height;
2295
2296     .btn.btn-link.btn-icon.emoji-button {
2297         height: $picker-emoji-button-size;
2298         width: $picker-emoji-button-size;
2299         line-height: $picker-emoji-button-size;
2300         font-size: $picker-emoji-button-font-size;
2301
2302         &.active {
2303             background-color: $gray-200;
2304         }
2305     }
2306 }
2307
2308 .toast-wrapper {
2309     max-width: $toast-max-width;
2310     max-height: 0;
2311     // Place these above any modals and other elements.
2312     z-index: 1051;
2313 }