theme/boost/scss/moodle/modules.scss

   1 /* modules.less */
   2
   3 // The home for small tweaks to modules that don't require
   4 // changes drastic enough to pull in the full module css
   5 // and replace it completely
   6 // Plus some misc. odds and ends
   7
   8 select {
   9     width: auto;
  10 }
  11
  12 // Choice module
  13
  14 .path-mod-choice {
  15     .horizontal .choices .option {
  16         display: inline-block;
  17     }
  18 }
  19
  20 .path-mod-choice {
  21     .choices .option label {
  22         vertical-align: top;
  23     }
  24 }
  25
  26 .path-mod-feedback .feedback_form .col-form-label {
  27     display: block !important; /* stylelint-disable-line declaration-no-important */
  28 }
  29
  30 // Feedback module
  31 .path-mod-feedback .itemactions {
  32     float: right;
  33 }
  34 .path-mod-feedback .itemhandle {
  35     position: absolute;
  36     right: 1rem;
  37 }
  38
  39 // Forum module
  40
  41 .path-mod-forum .forumsearch {
  42     input,
  43     .helptooltip {
  44         margin: 0 3px;
  45     }
  46 }
  47
  48 .path-mod-forum .forumheaderlist,
  49 .path-mod-forum .forumheaderlist td {
  50     border: none;
  51 }
  52
  53 .path-mod-forum {
  54     .forumheaderlist {
  55         thead .header,
  56         tbody .discussion td {
  57             white-space: normal;
  58             vertical-align: top;
  59             padding-left: 0.5em;
  60             padding-right: 0.5em;
  61         }
  62
  63         thead .header {
  64             white-space: normal;
  65             vertical-align: top;
  66         }
  67
  68         thead .header.replies {
  69             text-align: center;
  70         }
  71
  72         thead .header.lastpost {
  73             text-align: right;
  74         }
  75
  76         thead .header th,
  77         tbody .discussion td {
  78             &.discussionsubscription {
  79                 width: 16px;
  80                 padding-left: 0.5em;
  81                 padding-right: 0.5em;
  82             }
  83         }
  84
  85         .discussion {
  86             .replies,
  87             .lastpost {
  88                 white-space: normal;
  89             }
  90
  91             .discussionsubscription,
  92             .replies {
  93                 text-align: center;
  94             }
  95
  96             .topic,
  97             .discussionsubscription,
  98             .topic.starter,
  99             .replies,
 100             .lastpost {
 101                 vertical-align: top;
 102             }
 103         }
 104     }
 105
 106     .discussion-list {
 107         .topic {
 108             // Do not use the default bold style for the table headings.
 109             font-weight: inherit;
 110         }
 111     }
 112
 113     // Style for the forum subscription mode node.
 114     .subscriptionmode {
 115         color: $body-color;
 116     }
 117
 118     // Style for the currently selected subscription mode.
 119     .activesetting {
 120         color: $body-color;
 121         font-weight: bold;
 122     }
 123 }
 124
 125 .discussion-settings-container {
 126     .custom-select {
 127         width: 100%;
 128     }
 129
 130     input {
 131         max-width: 100%;
 132     }
 133 }
 134
 135 .forumpost {
 136     border: $border-width solid $border-color;
 137     display: block;
 138     padding: 6px;
 139
 140     .header {
 141         margin-bottom: 3px;
 142     }
 143
 144     .picture img {
 145         margin: 3px;
 146
 147         &.userpicture {
 148             margin-left: 3px;
 149             margin-right: 10px;
 150         }
 151     }
 152
 153     .content {
 154         .posting.fullpost {
 155             margin-top: 8px;
 156         }
 157     }
 158
 159     .row {
 160         display: block;
 161         .topic,
 162         .content-mask,
 163         .options {
 164             margin-left: 48px;
 165         }
 166
 167         &.side {
 168             clear: both;
 169         }
 170     }
 171 }
 172
 173 .forumpost .row .left {
 174     width: 48px;
 175 }
 176
 177 .forumpost .options .commands {
 178     margin-left: 0;
 179 }
 180
 181 .forumpost .subject {
 182     font-weight: bold;
 183 }
 184
 185 // Override hardcoded forum modules styling
 186 .forumsearch input[type=text] {
 187     margin-bottom: 0;
 188 }
 189
 190 #page-mod-forum-view {
 191     table {
 192         .fit-content {
 193             width: 1px;
 194             white-space: nowrap;
 195         }
 196
 197         .limit-width {
 198             max-width: 200px;
 199             white-space: nowrap;
 200             text-overflow: ellipsis;
 201             overflow: hidden;
 202
 203             .author-info {
 204                 max-width: calc(100% - 35px - .5rem);
 205             }
 206         }
 207     }
 208 }
 209
 210 #page-mod-forum-discuss .discussioncontrols {
 211     width: auto;
 212     margin: 0;
 213
 214     .form-inline input {
 215         margin-top: -1px;
 216     }
 217 }
 218
 219 $author-image-width: 70px;
 220 $author-image-margin: 24px;
 221 $author-image-width-sm: 30px;
 222 $author-image-margin-sm: 8px;
 223
 224 /** Gently highlight the selected post by changing it's background to blue and then fading it out. */
 225 @keyframes background-highlight {
 226     from {
 227         background-color: rgba(0, 123, 255, 0.5);
 228     }
 229     to {
 230         background-color: inherit;
 231     }
 232 }
 233
 234 .path-mod-forum .nested-v2-display-mode,
 235 .path-mod-forum.nested-v2-display-mode {
 236     .discussionsubscription {
 237         margin-top: 0;
 238         text-align: inherit;
 239         margin-bottom: 0;
 240     }
 241
 242     .preload-subscribe,
 243     .preload-unsubscribe {
 244         display: none;
 245     }
 246
 247     .post-message {
 248         line-height: 1.6;
 249     }
 250
 251     .indent {
 252         margin-left: 0;
 253     }
 254
 255     /** Reset the badge styling back to pill style. */
 256     .badge {
 257         font-size: inherit;
 258         font-weight: inherit;
 259         padding-left: .5rem;
 260         padding-right: .5rem;
 261         border-radius: 10rem;
 262     }
 263
 264     .badge-light {
 265         background-color: #f6f6f6;
 266         color: #5b5b5b;
 267     }
 268
 269     /** Style the ratings like a badge. */
 270     .rating-aggregate-container {
 271         background-color: #f6f6f6;
 272         color: #5b5b5b;
 273         padding: .25em .5em;
 274         line-height: 1;
 275         margin-right: .5rem;
 276         vertical-align: middle;
 277         border-radius: 10rem;
 278         text-align: center;
 279     }
 280
 281     .ratinginput {
 282         padding: .25em 1.75rem 0.25em .75em;
 283         line-height: 1;
 284         height: auto;
 285         border-radius: 10rem;
 286
 287         @include media-breakpoint-down(sm) {
 288             margin-top: .5rem;
 289         }
 290     }
 291
 292     .group-image {
 293         width: 35px;
 294         height: 35px;
 295         margin-right: 0;
 296         float: none;
 297         display: inline-block;
 298     }
 299
 300     /** Don't show the discussion locked alert in this mode because it's already indicated with a badge. */
 301     .alert.discussionlocked {
 302         @include sr-only();
 303     }
 304
 305     /** Fix muted text contrast ratios for accessibility. */
 306     .text-muted,
 307     .dimmed_text {
 308         color: #707070 !important; /* stylelint-disable-line declaration-no-important */
 309     }
 310
 311     .author-header {
 312         font-style: italic;
 313
 314         .author-name {
 315             font-style: normal;
 316         }
 317     }
 318
 319     /** Make the tag list text screen reader visible only */
 320     .tag_list > b {
 321         @include sr-only();
 322     }
 323
 324     :target > .focus-target {
 325         animation-name: background-highlight;
 326         animation-duration: 1s;
 327         animation-timing-function: ease-in-out;
 328         animation-iteration-count: 1;
 329     }
 330
 331     .forum-post-container {
 332         .replies-container {
 333             .forum-post-container {
 334                 border-top: 1px solid #dee2e6;
 335                 padding-top: 1.5rem;
 336
 337                 .replies-container .forum-post-container {
 338                     border-top: none;
 339                     padding-top: 0;
 340                 }
 341             }
 342
 343             .inline-reply-container .reply-author {
 344                 display: none;
 345             }
 346         }
 347
 348         .post-message p:last-of-type {
 349             margin-bottom: 0;
 350         }
 351
 352         .author-image-container {
 353             width: $author-image-width;
 354             margin-right: $author-image-margin;
 355             flex-shrink: 0;
 356         }
 357
 358         .inline-reply-container textarea {
 359             border: 0;
 360             resize: none;
 361         }
 362
 363         .indent {
 364             /**
 365              * The first post and first set of replies have a larger author image so offset the 2nd
 366              * set of replies by the image width + margin to ensure they align.
 367              */
 368             .indent {
 369                 padding-left: $author-image-width + $author-image-margin;
 370
 371                 /**
 372                  * Reduce the size of the the author image for all second level replies (and below).
 373                  */
 374                 .author-image-container {
 375                     width: $author-image-width-sm;
 376                     margin-right: $author-image-margin-sm;
 377                     padding-top: (36px - $author-image-width-sm) / 2;
 378                 }
 379
 380                 /**
 381                  * Adjust the indentation offset for all 3rd level replies and below for the smaller author image.
 382                  */
 383                 .indent {
 384                     padding-left: $author-image-width-sm + $author-image-margin-sm;
 385
 386                     /**
 387                      * Stop indenting the replies after the 5th reply.
 388                      */
 389                     .indent .indent .indent {
 390                         padding-left: 0;
 391                     }
 392                 }
 393             }
 394         }
 395     }
 396 }
 397
 398 /** Extra small devices (portrait phones, less than 576px). */
 399 @include media-breakpoint-down(sm) {
 400     #page-mod-forum-discuss.nested-v2-display-mode {
 401         .forum-post-container {
 402             .author-image-container {
 403                 width: $author-image-width-sm;
 404                 margin-right: $author-image-margin-sm;
 405             }
 406
 407             .indent {
 408                 .indent {
 409                     padding-left: $author-image-width-sm + $author-image-margin-sm;
 410
 411                     .indent .indent {
 412                         padding-left: 0;
 413                     }
 414                 }
 415             }
 416         }
 417
 418         .group-image {
 419             width: 30px;
 420             height: 30px;
 421         }
 422     }
 423 }
 424
 425 // Make filter popover content scrollable if needed.
 426 .filter-scrollable {
 427     overflow-y: auto;
 428     max-height: 25em;
 429     margin-bottom: 1em;
 430 }
 431
 432 // Required to fit a date mform into a filter popover.
 433 .filter-dates-popover {
 434     width: 100%;
 435     max-width: 41.5em;
 436
 437     .mform {
 438         margin-left: -3em;
 439     }
 440 }
 441
 442 $grading-drawer-width: 430px !default;
 443 $grading-animation-duration: .3s !default;
 444 $grading-icon-button-size: 36px !default;
 445 $grading-search-button-padding-left: calc(#{map-get($spacers, 2)} + 8px) !default;
 446 $grading-search-input-padding-left: calc(#{map-get($spacers, 2)} + #{map-get($spacers, 2)} + #{$grading-icon-button-size - ($input-border-width * 2)}) !default; /* stylelint-disable-line max-line-length */
 447 $grading-search-input-padding-right: calc(#{map-get($spacers, 2)} + #{$grading-icon-button-size}) !default;
 448 $grading-nav-bar-active-drawer-button-bottom: calc(#{map-get($spacers, 2) * -1} - 1px) !default;
 449 $grading-content-show-content-button-padding-left: calc(#{map-get($spacers, 2) * 2} + 45px) !default;
 450
 451 @keyframes expandSearchButton {
 452     from {
 453         height: $grading-icon-button-size;
 454         width: $grading-icon-button-size;
 455         border-radius: $grading-icon-button-size / 2;
 456         background-color: $gray-200;
 457     }
 458     to {
 459         width: 100%;
 460         height: $input-height-lg;
 461         border-radius: 0;
 462         background-color: $input-bg;
 463         border-color: $input-border-color;
 464         padding-left: $grading-search-button-padding-left;
 465         padding-top: $input-padding-y-lg;
 466         padding-bottom: $input-padding-y-lg;
 467         @include font-size($input-font-size-lg);
 468         line-height: $input-line-height-lg;
 469         right: 0;
 470     }
 471 }
 472
 473 @keyframes collapseSearchButton {
 474     from {
 475         width: 100%;
 476         height: $input-height-lg;
 477         border-radius: 0;
 478         background-color: $input-bg;
 479         border-color: $input-border-color;
 480         padding-left: $grading-search-button-padding-left;
 481         padding-top: $input-padding-y-lg;
 482         padding-bottom: $input-padding-y-lg;
 483         @include font-size($input-font-size-lg);
 484         line-height: $input-line-height-lg;
 485         right: 0;
 486     }
 487     to {
 488         height: $grading-icon-button-size;
 489         width: $grading-icon-button-size;
 490         border-radius: $grading-icon-button-size / 2;
 491         background-color: $gray-200;
 492     }
 493 }
 494
 495 .path-mod-forum .unified-grader {
 496     @include media-breakpoint-up(xs) {
 497         .navbar {
 498             max-height: none;
 499             z-index: 1;
 500         }
 501     }
 502
 503     .body-container {
 504         overflow: auto;
 505         &.hidden {
 506             display: none !important; /* stylelint-disable-line declaration-no-important */
 507         }
 508     }
 509
 510     .userpicture {
 511         height: 60px;
 512         width: 60px;
 513     }
 514
 515     .grader-grading-panel {
 516         top: 0;
 517         position: absolute;
 518         height: 100%;
 519         z-index: 0;
 520         width: $grading-drawer-width;
 521
 522         &.hidden {
 523             right: ($grading-drawer-width * -1);
 524         }
 525
 526         .grading-icon {
 527             width: $grading-icon-button-size;
 528         }
 529
 530         .user-picker-container {
 531             .user-full-name {
 532                 max-width: 240px;
 533             }
 534
 535             .page-link {
 536                 width: $grading-icon-button-size;
 537                 height: $grading-icon-button-size;
 538                 display: flex;
 539                 text-align: center;
 540                 align-items: center;
 541                 justify-content: center;
 542             }
 543         }
 544
 545         .header-container {
 546             height: 65px;
 547             position: relative;
 548             overflow: hidden;
 549
 550             .info-container {
 551                 position: absolute;
 552                 top: 50%;
 553                 left: 0;
 554                 transform: translateY(-50%);
 555                 width: 100%;
 556                 height: 100%;
 557                 padding: map-get($spacers, 2);
 558                 padding-right: calc(#{$grading-icon-button-size} + #{map-get($spacers, 2)});
 559                 opacity: 1;
 560                 visibility: visible;
 561                 transition: left $grading-animation-duration ease-in-out;
 562                 z-index: 1;
 563             }
 564
 565             .toggle-search-button {
 566                 &.expand {
 567                     animation-name: expandSearchButton;
 568                     animation-duration: $grading-animation-duration;
 569                     animation-timing-function: ease-in-out;
 570                 }
 571
 572                 &.collapse {
 573                     display: block;
 574                     animation-name: collapseSearchButton;
 575                     animation-duration: $grading-animation-duration;
 576                 }
 577             }
 578
 579             .user-search-container {
 580                 overflow: hidden;
 581                 position: absolute;
 582                 top: 50%;
 583                 right: 0;
 584                 transform: translateY(-50%);
 585                 z-index: 2;
 586                 width: 100%;
 587                 height: 100% !important; /* stylelint-disable-line declaration-no-important */
 588                 padding: map-get($spacers, 2);
 589
 590                 .search-input-container {
 591                     position: relative;
 592                     overflow: visible;
 593                     flex-wrap: nowrap;
 594
 595                     input {
 596                         padding-left: $grading-search-input-padding-left;
 597                         padding-right: $grading-search-input-padding-right;
 598                         opacity: 1;
 599                         visibility: visible;
 600                         transition:
 601                             opacity 0s linear $grading-animation-duration,
 602                             visibility 0s linear;
 603                     }
 604
 605                     .search-icon {
 606                         position: absolute;
 607                         top: 50%;
 608                         left: map-get($spacers, 2);
 609                         transform: translateY(-50%);
 610                         color: $input-color;
 611                         height: $grading-icon-button-size;
 612                         width: $grading-icon-button-size - ($input-border-width * 2);
 613                         background-color: $input-bg;
 614                         opacity: 1;
 615                         visibility: visible;
 616                         transition:
 617                             opacity 0s linear $grading-animation-duration,
 618                             visibility 0s linear $grading-animation-duration;
 619                     }
 620
 621                     .toggle-search-button {
 622                         position: absolute;
 623                         top: 50%;
 624                         right: map-get($spacers, 2);
 625                         transform: translateY(-50%);
 626                         z-index: 1;
 627                         color: inherit;
 628                         text-align: left;
 629                         padding-left: 9px;
 630                         transition: right 0s linear $grading-animation-duration;
 631
 632                         .expanded-icon {
 633                             opacity: 1;
 634                             visibility: visible;
 635                             max-width: 50px;
 636                             max-height: 50px;
 637                             transition:
 638                                 opacity 0s linear $grading-animation-duration,
 639                                 max-height 0s linear $grading-animation-duration,
 640                                 max-width 0s linear $grading-animation-duration,
 641                                 visibility 0s linear $grading-animation-duration;
 642                         }
 643
 644                         .collapsed-icon {
 645                             opacity: 0;
 646                             visibility: hidden;
 647                             max-height: 0;
 648                             max-width: 0;
 649                             overflow: hidden;
 650                             transition:
 651                                 opacity 0s linear $grading-animation-duration,
 652                                 max-height 0s linear $grading-animation-duration,
 653                                 max-width 0s linear $grading-animation-duration,
 654                                 visibility 0s linear $grading-animation-duration;
 655                         }
 656                     }
 657                 }
 658
 659                 &.collapsed {
 660                     width: calc(#{$grading-icon-button-size} + #{map-get($spacers, 2)} + #{map-get($spacers, 2)});
 661                     transition: width $grading-animation-duration ease-in-out;
 662
 663                     .search-input-container {
 664                         flex-wrap: nowrap;
 665
 666                         input,
 667                         .search-icon {
 668                             opacity: 0;
 669                             visibility: hidden;
 670                             transition:
 671                                 opacity 0s linear,
 672                                 visibility 0s linear;
 673                         }
 674
 675                         input {
 676                             padding-left: 0;
 677                             padding-right: 0;
 678                         }
 679
 680                         .toggle-search-button {
 681                             .expanded-icon {
 682                                 opacity: 0;
 683                                 visibility: hidden;
 684                                 max-height: 0;
 685                                 max-width: 0;
 686                                 overflow: hidden;
 687                                 transition:
 688                                     opacity 0s linear,
 689                                     max-height 0s linear,
 690                                     max-width 0s linear,
 691                                     visibility 0s linear;
 692                             }
 693
 694                             .collapsed-icon {
 695                                 opacity: 1;
 696                                 visibility: visible;
 697                                 max-width: 50px;
 698                                 max-height: 50px;
 699                                 transition:
 700                                     opacity 0s linear,
 701                                     max-height 0s linear,
 702                                     max-width 0s linear,
 703                                     visibility 0s linear;
 704                             }
 705                         }
 706                     }
 707                 }
 708             }
 709
 710             .user-search-container:not(.collapsed) + .info-container {
 711                 opacity: 0;
 712                 visibility: hidden;
 713                 left: calc(100% * -1);
 714                 transition:
 715                     left $grading-animation-duration ease-in-out,
 716                     opacity 0s linear $grading-animation-duration,
 717                     visibility 0s linear $grading-animation-duration,
 718                     padding 0s linear $grading-animation-duration;
 719             }
 720         }
 721     }
 722
 723     .grader-module-content {
 724         overflow-y: auto;
 725         margin-right: $grading-drawer-width;
 726         @include transition(margin-right .2s ease-in-out);
 727     }
 728
 729     .drawer-button {
 730         position: relative;
 731
 732         &.active::after {
 733             content: "";
 734             position: absolute;
 735             bottom: $grading-nav-bar-active-drawer-button-bottom;
 736             left: 0;
 737             width: 100%;
 738             height: 3px;
 739             background-color: map-get($theme-colors, 'primary');
 740         }
 741
 742         .icon {
 743             font-size: 20px;
 744             height: 20px;
 745             width: 20px;
 746         }
 747     }
 748
 749     .grader-module-content-display {
 750         .discussion-container {
 751             &:last-of-type {
 752                 > hr {
 753                     display: none;
 754                 }
 755             }
 756
 757             .posts-container {
 758                 &:last-of-type {
 759                     > hr {
 760                         display: none;
 761                     }
 762                 }
 763
 764                 .parent-container {
 765                     position: relative;
 766
 767                     .show-content-button {
 768                         position: absolute;
 769                         height: 100%;
 770                         width: 100%;
 771                         left: 0;
 772                         top: 0;
 773                         padding-left: $grading-content-show-content-button-padding-left;
 774                         text-align: left;
 775                         z-index: 1;
 776
 777                         &:not(.collapsed) {
 778                             display: none;
 779                         }
 780                     }
 781
 782                     .content {
 783                         display: block;
 784                         height: auto !important; /* stylelint-disable-line declaration-no-important */
 785
 786                         .header {
 787                             transition: margin-bottom $grading-animation-duration ease-in-out;
 788
 789                             div + div {
 790                                 opacity: 1;
 791                                 visibility: visible;
 792                                 max-height: none;
 793                                 transition:
 794                                     opacity $grading-animation-duration linear,
 795                                     visibility 0s linear;
 796                             }
 797                         }
 798
 799                         .body-content-container {
 800                             opacity: 1;
 801                             visibility: visible;
 802                             max-height: none;
 803                             transition:
 804                                 opacity $grading-animation-duration linear,
 805                                 visibility 0s linear;
 806                         }
 807
 808                         .forum-post-core {
 809                             opacity: 1;
 810                             visibility: visible;
 811                             max-height: none;
 812                             transition:
 813                                 opacity $grading-animation-duration linear,
 814                                 visibility 0s linear;
 815                         }
 816                     }
 817
 818                     .show-content-button.collapsed + .content {
 819                         opacity: .3;
 820
 821                         .header {
 822                             margin-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
 823
 824                             div + div {
 825                                 opacity: 0;
 826                                 visibility: hidden;
 827                                 max-height: 0;
 828                             }
 829                         }
 830
 831                         .body-content-container {
 832                             opacity: 0;
 833                             visibility: hidden;
 834                             max-height: 0;
 835                         }
 836
 837                         .forum-post-core {
 838                             opacity: 0;
 839                             visibility: hidden;
 840                             max-height: 0;
 841                         }
 842                     }
 843
 844                     .show-content-button.collapsed:hover + .content,
 845                     .show-content-button.collapsed:focus + .content {
 846                         opacity: 1;
 847                     }
 848                 }
 849             }
 850         }
 851
 852         .no-post-container {
 853             .icon {
 854                 height: 250px;
 855                 width: 250px;
 856                 margin-right: 0;
 857             }
 858         }
 859
 860         .nested-v2-display-mode {
 861             .discussion-container {
 862                 .posts-container {
 863                     .parent-container {
 864                         .show-content-button {
 865                             padding-left: $author-image-width + $author-image-margin;
 866                         }
 867                     }
 868                 }
 869             }
 870         }
 871     }
 872
 873     .no-search-results-container {
 874         .icon {
 875             height: 250px;
 876             width: 250px;
 877             margin-right: 0;
 878         }
 879     }
 880
 881     .nested-v2-display-mode {
 882         .view-context-button {
 883             margin-left: $author-image-width + $author-image-margin;
 884             border-radius: $border-radius-lg;
 885         }
 886
 887         .parent-container {
 888             .author-image-container {
 889                 position: relative;
 890
 891                 &:after {
 892                     position: absolute;
 893                     top: calc(#{$author-image-width} + #{map-get($spacers, 2)});
 894                     content: "";
 895                     background-color: $gray-200;
 896                     width: 2px;
 897                     height: calc(100% - #{$author-image-width} + #{map-get($spacers, 2)});
 898                 }
 899             }
 900         }
 901
 902         .parent-container + .post-container {
 903             .author-image-container {
 904                 img {
 905                     width: $author-image-width-sm !important; /* stylelint-disable-line declaration-no-important */
 906                 }
 907             }
 908         }
 909     }
 910 }
 911
 912 .path-mod-forum .unified-grader .nested-v2-display-mode,
 913 .path-mod-forum .modal .nested-v2-display-mode {
 914     .post-subject {
 915         display: none;
 916     }
 917 }
 918
 919 @include media-breakpoint-down(xs) {
 920     .path-mod-forum .unified-grader {
 921         .grader-grading-panel {
 922             width: 100%;
 923             position: fixed;
 924             height: calc(100vh - 50px);
 925             overflow: scroll;
 926             top: 50px;
 927         }
 928         .body-container {
 929             overflow: visible;
 930         }
 931     }
 932 }
 933
 934 // End styling for mod_forum.
 935
 936 .maincalendar .calendarmonth td,
 937 .maincalendar .calendarmonth th {
 938     border: 1px dotted $table-border-color;
 939 }
 940
 941 .path-grade-report-grader h1 {
 942     text-align: inherit;
 943 }
 944
 945 #page-mod-chat-gui_basic input#message {
 946     max-width: 100%;
 947 }
 948
 949 #page-mod-data-view #singleimage {
 950     width: auto;
 951 }
 952
 953 .path-mod-data form {
 954     margin-top: 10px;
 955 }
 956
 957 .template_heading {
 958     margin-top: 10px;
 959 }
 960
 961 .breadcrumb-button {
 962     margin-top: 4px;
 963 }
 964
 965 .breadcrumb-button .singlebutton {
 966     float: left;
 967     margin-left: 4px;
 968 }
 969
 970 .langmenu form {
 971     margin: 0;
 972 }
 973 // contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
 974 canvas {
 975     -ms-touch-action: auto;
 976 }
 977
 978 div#dock {
 979     display: none;
 980 }
 981
 982 // Choice module
 983
 984 // Lesson module
 985
 986 /** General styles (scope: all of lesson) **/
 987 .path-mod-lesson .invisiblefieldset.fieldsetfix {
 988     display: block;
 989 }
 990 .path-mod-lesson .answeroption .checkbox label p {
 991     display: inline;
 992 }
 993 .path-mod-lesson .form-inline label.form-check-label {
 994     display: inline-block;
 995 }
 996 .path-mod-lesson .slideshow {
 997     overflow: auto;
 998     padding: 15px;
 999 }
1000 #page-mod-lesson-view .branchbuttoncontainer .singlebutton button[type="submit"] {
1001     white-space: normal;
1002 }
1003 #page-mod-lesson-view {
1004     .vertical .singlebutton {
1005         display: block;
1006         + .singlebutton {
1007             margin-left: 0;
1008             margin-top: 1rem;
1009         }
1010     }
1011     .fitem .felement .custom-select {
1012         align-self: flex-start;
1013     }
1014 }
1015 .path-mod-lesson .generaltable td {
1016     vertical-align: middle;
1017     label {
1018         margin-bottom: 0;
1019     }
1020     .highlight {
1021         display: inline-block;
1022         margin-left: 0.25rem;
1023     }
1024     input[type="checkbox"] {
1025         display: block;
1026     }
1027 }
1028
1029 .path-mod-wiki .wiki_headingtitle,
1030 .path-mod-wiki .midpad,
1031 .path-mod-wiki .wiki_headingtime {
1032     text-align: inherit;
1033 }
1034
1035 .path-mod-wiki .wiki_contentbox {
1036     width: 100%;
1037 }
1038
1039 // Survey module
1040
1041 .path-mod-survey {
1042     .surveytable {
1043         > tbody > tr:nth-of-type(odd) {
1044             background-color: $table-bg;
1045         }
1046
1047         > tbody > tr:nth-of-type(even) {
1048             background-color: $table-accent-bg;
1049         }
1050
1051         .rblock label {
1052             text-align: center;
1053         }
1054     }
1055
1056 }
1057
1058 .nav .caret {
1059     margin-left: 4px;
1060 }
1061
1062 // Dividers
1063 .nav {
1064     .divider {
1065         overflow: hidden;
1066         width: 0;
1067     }
1068 }
1069
1070 // Usermenu
1071 .usermenu {
1072     .login {
1073         line-height: 2.25rem;
1074     }
1075 }
1076
1077 .userloggedinas,
1078 .userswitchedrole,
1079 .loginfailures {
1080     .usermenu {
1081         .usertext {
1082             float: left;
1083             text-align: right;
1084             margin-right: $spacer / 2;
1085             height: 35px;
1086             .meta {
1087                 display: block;
1088                 font-size: $font-size-sm;
1089             }
1090         }
1091         .avatar {
1092             img {
1093                 margin: 0;
1094             }
1095         }
1096     }
1097 }
1098
1099 .userloggedinas .usermenu {
1100     .userbutton .avatars {
1101         position: relative;
1102         display: inline-block;
1103         .avatar {
1104             &.current {
1105                 display: inline-block;
1106                 position: absolute;
1107                 bottom: 0;
1108                 right: 0;
1109                 width: 20px;
1110                 height: 20px;
1111                 border-radius: 50%;
1112                 img {
1113                     vertical-align: baseline;
1114                 }
1115             }
1116             img {
1117                 width: inherit;
1118                 height: inherit;
1119             }
1120         }
1121         .realuser {
1122             width: 35px;
1123             height: 35px;
1124             display: inline-block;
1125         }
1126     }
1127 }
1128
1129 @include media-breakpoint-down(sm) {
1130     .usertext {
1131         display: none;
1132     }
1133 }
1134
1135 // Quiz module
1136 .path-mod-quiz .mod-quiz-edit-content {
1137     // Force the quiz edit page to always be large enough to prevent scrolling when accessing the menu.
1138     margin-bottom: 10rem;
1139 }
1140
1141 #page-mod-quiz-mod #id_reviewoptionshdr .col-md-3,
1142 #page-mod-quiz-mod #id_reviewoptionshdr .col-md-9 {
1143     width: auto;
1144     max-width: none;
1145 }
1146 #page-mod-quiz-mod #id_reviewoptionshdr .form-group {
1147     float: left;
1148     width: 20rem;
1149     display: inline-block;
1150     min-height: 12rem;
1151 }
1152
1153 #page-mod-quiz-mod #id_reviewoptionshdr .btn-link {
1154     line-height: 1.5;
1155     vertical-align: bottom;
1156 }
1157 #page-mod-quiz-mod #id_reviewoptionshdr .form-inline {
1158     float: left;
1159     clear: left;
1160 }
1161 #page-mod-quiz-mod #id_reviewoptionshdr .form-check {
1162     width: auto;
1163     height: 22px;
1164     justify-content: flex-start;
1165 }
1166
1167 #page-mod-quiz-mod #id_reviewoptionshdr .review_option_item {
1168     width: 90%;
1169     height: 22px;
1170 }
1171
1172 // Question navigation block.
1173 .path-mod-quiz #mod_quiz_navblock {
1174     .qnbutton {
1175         text-decoration: none;
1176         font-size: 14px;
1177         line-height: 20px;
1178         font-weight: normal;
1179         background-color: $card-bg;
1180         background-image: none;
1181         height: 40px;
1182         width: 30px;
1183         border-radius: 3px;
1184         border: 0;
1185         overflow: visible;
1186         margin: 0 6px 6px 0;
1187     }
1188
1189     span.qnbutton {
1190         cursor: default;
1191         background-color: $input-disabled-bg;
1192         color: $gray-700;
1193     }
1194
1195     a.qnbutton:hover,
1196     a.qnbutton:active,
1197     a.qnbutton:focus {
1198         text-decoration: underline;
1199     }
1200
1201     .qnbutton .thispageholder {
1202         border: 1px solid;
1203         border-radius: 3px;
1204         z-index: 1;
1205     }
1206
1207     .qnbutton.thispage .thispageholder {
1208         border-width: 3px;
1209     }
1210
1211     .allquestionsononepage .qnbutton.thispage .thispageholder {
1212         border-width: 1px;
1213     }
1214
1215     .qnbutton.flagged .thispageholder {
1216         background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0 no-repeat;
1217     }
1218
1219     .qnbutton .trafficlight {
1220         border: 0;
1221         background: $card-bg none center / 10px no-repeat scroll;
1222         height: 20px;
1223         margin-top: 20px;
1224         border-radius: 0 0 3px 3px;
1225     }
1226
1227     .qnbutton.notyetanswered .trafficlight,
1228     .qnbutton.invalidanswer .trafficlight {
1229         background-color: $card-bg;
1230     }
1231
1232     .qnbutton.invalidanswer .trafficlight {
1233         background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
1234     }
1235
1236     .qnbutton.correct .trafficlight {
1237         background-image: url([[pix:theme|mod/quiz/checkmark]]);
1238         background-color: $success;
1239     }
1240
1241     .qnbutton.blocked .trafficlight {
1242         background-image: url([[pix:core|t/locked]]);
1243         background-color: $input-disabled-bg;
1244     }
1245
1246     .qnbutton.notanswered .trafficlight,
1247     .qnbutton.incorrect .trafficlight {
1248         background-color: $danger;
1249     }
1250
1251     .qnbutton.partiallycorrect .trafficlight {
1252         background-image: url([[pix:theme|mod/quiz/whitecircle]]);
1253         background-color: $warning;
1254     }
1255
1256     .qnbutton.complete .trafficlight,
1257     .qnbutton.answersaved .trafficlight,
1258     .qnbutton.requiresgrading .trafficlight {
1259         background-color: $gray-600;
1260     }
1261 }
1262
1263 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer form input {
1264     height: 1.4em;
1265     vertical-align: middle;
1266 }
1267
1268 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer {
1269     padding: 0;
1270     margin: 0 0.4em;
1271 }
1272
1273 /* Countdown timer. */
1274 #page-mod-quiz-attempt #region-main {
1275     overflow-x: inherit;
1276 }
1277
1278 #quiz-timer-wrapper {
1279     display: none;
1280     position: sticky;
1281     justify-content: end;
1282     top: $navbar-height + 5px;
1283     z-index: $zindex-sticky;
1284     #quiz-timer {
1285         border: $border-width solid $red;
1286         background-color: $white;
1287     }
1288 }
1289 .pagelayout-embedded #quiz-timer-wrapper {
1290     top: 5px;
1291 }
1292
1293 @for $i from 0 through 16 {
1294     #quiz-timer-wrapper #quiz-timer.timeleft#{$i} {
1295         $bg: lighten($red, ($i * 3%));
1296         background-color: $bg;
1297         color: color-yiq($bg);
1298     }
1299 }
1300
1301 // Assign.
1302 .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
1303     top: auto;
1304 }
1305
1306 // This section removes the responsiveness from the form in the grading panel
1307 $popout-header-font-size: 1.5 * $font-size-base;
1308 // This can't be calculated from modal-title-padding because we are mixing px and rem units.
1309 $popout-header-height: 4rem;
1310
1311 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .felement {
1312     height: calc(100% - #{$popout-header-height});
1313 }
1314
1315 .path-mod-assign [data-region="grade-panel"] {
1316     padding-top: $spacer;
1317 }
1318 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3,
1319 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-9 {
1320     width: 100%;
1321     padding: 0;
1322     max-width: 100%;
1323     flex: none;
1324 }
1325 .path-mod-assign [data-region="grade-panel"] fieldset,
1326 .path-mod-assign [data-region="grade-panel"] .fitem.row {
1327     margin: 0;
1328 }
1329
1330 .path-mod-assign [data-region="grade-panel"] .mform .fitem.has-popout .felement {
1331     width: 100%;
1332 }
1333
1334 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement {
1335     width: auto;
1336 }
1337
1338 // Now styles for the popout sections.
1339
1340 .path-mod-assign [data-region="grade-panel"] .popout {
1341     background-color: $modal-content-bg;
1342 }
1343
1344 .path-mod-assign [data-region="grade-panel"] .fitem.has-popout {
1345     background-color: $card-bg;
1346     @include border-radius($card-border-radius);
1347     border: $card-border-width solid $card-border-color;
1348     padding: $card-spacer-x;
1349     margin-bottom: $spacer;
1350 }
1351 .path-mod-assign [data-region="grade-panel"] .has-popout .col-md-3 {
1352     border-bottom: $hr-border-width solid $hr-border-color;
1353     margin-bottom: $spacer;
1354 }
1355
1356
1357 .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 {
1358     display: flex;
1359     align-items: flex-start;
1360     justify-content: space-between;
1361     font-size: $popout-header-font-size;
1362 }
1363
1364 .path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
1365     margin-top: 0;
1366 }
1367
1368 // Now style the fixed header elements.
1369
1370 .path-mod-assign [data-region="assignment-info"] {
1371     overflow-y: hidden;
1372 }
1373
1374 .path-mod-assign [data-region="grading-navigation"] {
1375     padding: 6px;
1376 }
1377
1378 .path-mod-assign [data-region="grade-actions"] {
1379     padding: 10px;
1380 }
1381
1382 .path-mod-assign [data-region="user-info"] .img-rounded {
1383     margin-top: 0;
1384 }
1385
1386 .path-mod-assign [data-region="grading-navigation-panel"] {
1387     height: 85px;
1388 }
1389
1390 @media (max-width: 767px) {
1391     .path-mod-assign [data-region="grading-navigation-panel"] {
1392         height: auto;
1393     }
1394     .path-mod-assign [data-region="user-info"] {
1395         margin-top: 1rem;
1396     }
1397 }
1398
1399 .path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
1400     width: auto;
1401     display: inline-block;
1402 }
1403
1404 /**
1405  * Assign feedback.
1406  */
1407 .assignfeedback_editpdf_widget * {
1408     box-sizing: content-box;
1409 }
1410
1411 .assignfeedback_editpdf_widget button {
1412     box-sizing: border-box;
1413 }
1414
1415 .assignfeedback_editpdf_widget .commentcolourbutton img {
1416     border-width: 0;
1417 }
1418
1419 .assignfeedback_editpdf_widget .label {
1420     position: relative;
1421     padding: $alert-padding-y $alert-padding-x;
1422     margin-bottom: $alert-margin-bottom;
1423     border: $alert-border-width solid transparent;
1424     @include border-radius($alert-border-radius);
1425     @include alert-variant(theme-color-level('info', $alert-bg-level), theme-color-level('info', $alert-border-level), theme-color-level('info', $alert-color-level)); /* stylelint-disable-line max-line-length */
1426 }
1427
1428 .assignfeedback_editpdf_menu {
1429     padding: 0;
1430 }
1431
1432 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .remark .commentchooser {
1433     float: none;
1434 }
1435 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .markingguideremark {
1436     width: 100%;
1437 }
1438 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement[data-fieldtype="grading"] {
1439     padding-left: $spacer;
1440     padding-right: $spacer;
1441 }
1442 .path-mod-assign [data-region="grade-panel"] .showmarkerdesc,
1443 .path-mod-assign [data-region="grade-panel"] .showstudentdesc {
1444     background-color: $card-bg;
1445 }
1446
1447 /**
1448  * Mod LTI.
1449  */
1450 .path-admin-mod-lti {
1451     .btn .loader img,
1452     #tool-list-loader-container .loader img {
1453         height: auto;
1454     }
1455 }