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