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