weekly release 4.0dev
[moodle.git] / theme / boost / scss / moodle / modules.scss
1 /* modules.less */
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
8 select {
9     width: auto;
10 }
12 // Choice module
14 .path-mod-choice {
15     .horizontal .choices .option {
16         display: inline-block;
17     }
18 }
20 .path-mod-choice {
21     .choices .option label {
22         vertical-align: top;
23     }
24 }
26 .path-mod-feedback .feedback_form .col-form-label {
27     display: block !important; /* stylelint-disable-line declaration-no-important */
28 }
30 // Feedback module
31 .path-mod-feedback .itemactions {
32     float: right;
33 }
34 .path-mod-feedback .itemhandle {
35     position: absolute;
36     right: 1rem;
37 }
39 // Forum module
41 .path-mod-forum .forumsearch {
42     input,
43     .helptooltip {
44         margin: 0 3px;
45     }
46 }
48 .path-mod-forum .forumheaderlist,
49 .path-mod-forum .forumheaderlist td {
50     border: none;
51 }
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         }
63         thead .header {
64             white-space: normal;
65             vertical-align: top;
66         }
68         thead .header.replies {
69             text-align: center;
70         }
72         thead .header.lastpost {
73             text-align: right;
74         }
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         }
85         .discussion {
86             .replies,
87             .lastpost {
88                 white-space: normal;
89             }
91             .discussionsubscription,
92             .replies {
93                 text-align: center;
94             }
96             .topic,
97             .discussionsubscription,
98             .topic.starter,
99             .replies,
100             .lastpost {
101                 vertical-align: top;
102             }
103         }
104     }
106     .discussion-list {
107         .topic {
108             // Do not use the default bold style for the table headings.
109             font-weight: inherit;
110         }
111     }
113     // Style for the forum subscription mode node.
114     .subscriptionmode {
115         color: $body-color;
116     }
118     // Style for the currently selected subscription mode.
119     .activesetting {
120         color: $body-color;
121         font-weight: bold;
122     }
125 .discussion-settings-container {
126     .custom-select {
127         width: 100%;
128     }
130     input {
131         max-width: 100%;
132     }
135 .forumpost {
136     border: $border-width solid $border-color;
137     display: block;
138     padding: 6px;
140     .header {
141         margin-bottom: 3px;
142     }
144     .picture img {
145         margin: 3px;
147         &.userpicture {
148             margin-left: 3px;
149             margin-right: 10px;
150         }
151     }
153     .content {
154         .posting.fullpost {
155             margin-top: 8px;
156         }
157     }
159     .row {
160         display: block;
161         .topic,
162         .content-mask,
163         .options {
164             margin-left: 48px;
165         }
167         &.side {
168             clear: both;
169         }
170     }
173 .forumpost .row .left {
174     width: 48px;
177 .forumpost .options .commands {
178     margin-left: 0;
181 .forumpost .subject {
182     font-weight: bold;
185 // Override hardcoded forum modules styling
186 .forumsearch input[type=text] {
187     margin-bottom: 0;
190 #page-mod-forum-view {
191     table {
192         .fit-content {
193             width: 1px;
194             white-space: nowrap;
195         }
197         .limit-width {
198             max-width: 200px;
199             white-space: nowrap;
200             text-overflow: ellipsis;
201             overflow: hidden;
203             .author-info {
204                 max-width: calc(100% - 35px - .5rem);
205             }
206         }
207     }
210 #page-mod-forum-discuss .discussioncontrols {
211     width: auto;
212     margin: 0;
214     .form-inline input {
215         margin-top: -1px;
216     }
219 $author-image-width: 70px;
220 $author-image-margin: 24px;
221 $author-image-width-sm: 30px;
222 $author-image-margin-sm: 8px;
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     }
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     }
242     .preload-subscribe,
243     .preload-unsubscribe {
244         display: none;
245     }
247     .post-message {
248         line-height: 1.6;
249     }
251     .indent {
252         margin-left: 0;
253     }
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     }
264     .badge-light {
265         background-color: #f6f6f6;
266         color: #5b5b5b;
267     }
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     }
281     .ratinginput {
282         padding: .25em 1.75rem 0.25em .75em;
283         line-height: 1;
284         height: auto;
285         border-radius: 10rem;
287         @include media-breakpoint-down(sm) {
288             margin-top: .5rem;
289         }
290     }
292     .group-image {
293         width: 35px;
294         height: 35px;
295         margin-right: 0;
296         float: none;
297         display: inline-block;
298     }
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     }
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     }
311     .author-header {
312         font-style: italic;
314         .author-name {
315             font-style: normal;
316         }
317     }
319     /** Make the tag list text screen reader visible only */
320     .tag_list > b {
321         @include sr-only();
322     }
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     }
331     .forum-post-container {
332         .replies-container {
333             .forum-post-container {
334                 border-top: 1px solid #dee2e6;
335                 padding-top: 1.5rem;
337                 .replies-container .forum-post-container {
338                     border-top: none;
339                     padding-top: 0;
340                 }
341             }
343             .inline-reply-container .reply-author {
344                 display: none;
345             }
346         }
348         .post-message p:last-of-type {
349             margin-bottom: 0;
350         }
352         .author-image-container {
353             width: $author-image-width;
354             margin-right: $author-image-margin;
355             flex-shrink: 0;
356         }
358         .inline-reply-container textarea {
359             border: 0;
360             resize: none;
361         }
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;
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                 }
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;
386                     /**
387                      * Stop indenting the replies after the 5th reply.
388                      */
389                     .indent .indent .indent {
390                         padding-left: 0;
391                     }
392                 }
393             }
394         }
395     }
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             }
407             .indent {
408                 .indent {
409                     padding-left: $author-image-width-sm + $author-image-margin-sm;
411                     .indent .indent {
412                         padding-left: 0;
413                     }
414                 }
415             }
416         }
418         .group-image {
419             width: 30px;
420             height: 30px;
421         }
422     }
425 // Make filter popover content scrollable if needed.
426 .filter-scrollable {
427     overflow-y: auto;
428     max-height: 25em;
429     margin-bottom: 1em;
432 // Required to fit a date mform into a filter popover.
433 .filter-dates-popover {
434     width: 100%;
435     max-width: 41.5em;
437     .mform {
438         margin-left: -3em;
439     }
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;
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     }
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     }
495 .path-mod-forum .unified-grader {
496     @include media-breakpoint-up(xs) {
497         .navbar {
498             max-height: none;
499             z-index: 1;
500         }
501     }
503     .body-container {
504         overflow: auto;
505         &.hidden {
506             display: none !important; /* stylelint-disable-line declaration-no-important */
507         }
508     }
510     .userpicture {
511         height: 60px;
512         width: 60px;
513     }
515     .grader-grading-panel {
516         top: 0;
517         position: absolute;
518         height: 100%;
519         z-index: 0;
520         width: $grading-drawer-width;
522         &.hidden {
523             right: ($grading-drawer-width * -1);
524         }
526         .grading-icon {
527             width: $grading-icon-button-size;
528         }
530         .user-picker-container {
531             .user-full-name {
532                 max-width: 240px;
533             }
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         }
545         .header-container {
546             height: 65px;
547             position: relative;
548             overflow: hidden;
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             }
565             .toggle-search-button {
566                 &.expand {
567                     animation-name: expandSearchButton;
568                     animation-duration: $grading-animation-duration;
569                     animation-timing-function: ease-in-out;
570                 }
572                 &.collapse {
573                     display: block;
574                     animation-name: collapseSearchButton;
575                     animation-duration: $grading-animation-duration;
576                 }
577             }
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);
590                 .search-input-container {
591                     position: relative;
592                     overflow: visible;
593                     flex-wrap: nowrap;
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                     }
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                     }
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;
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                         }
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                 }
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;
663                     .search-input-container {
664                         flex-wrap: nowrap;
666                         input,
667                         .search-icon {
668                             opacity: 0;
669                             visibility: hidden;
670                             transition:
671                                 opacity 0s linear,
672                                 visibility 0s linear;
673                         }
675                         input {
676                             padding-left: 0;
677                             padding-right: 0;
678                         }
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                             }
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             }
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     }
723     .grader-module-content {
724         overflow-y: auto;
725         margin-right: $grading-drawer-width;
726         @include transition(margin-right .2s ease-in-out);
727     }
729     .drawer-button {
730         position: relative;
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         }
742         .icon {
743             font-size: 20px;
744             height: 20px;
745             width: 20px;
746         }
747     }
749     .grader-module-content-display {
750         .discussion-container {
751             &:last-of-type {
752                 > hr {
753                     display: none;
754                 }
755             }
757             .posts-container {
758                 &:last-of-type {
759                     > hr {
760                         display: none;
761                     }
762                 }
764                 .parent-container {
765                     position: relative;
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;
777                         &:not(.collapsed) {
778                             display: none;
779                         }
780                     }
782                     .content {
783                         display: block;
784                         height: auto !important; /* stylelint-disable-line declaration-no-important */
786                         .header {
787                             transition: margin-bottom $grading-animation-duration ease-in-out;
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                         }
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                         }
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                     }
818                     .show-content-button.collapsed + .content {
819                         opacity: .3;
821                         .header {
822                             margin-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
824                             div + div {
825                                 opacity: 0;
826                                 visibility: hidden;
827                                 max-height: 0;
828                             }
829                         }
831                         .body-content-container {
832                             opacity: 0;
833                             visibility: hidden;
834                             max-height: 0;
835                         }
837                         .forum-post-core {
838                             opacity: 0;
839                             visibility: hidden;
840                             max-height: 0;
841                         }
842                     }
844                     .show-content-button.collapsed:hover + .content,
845                     .show-content-button.collapsed:focus + .content {
846                         opacity: 1;
847                     }
848                 }
849             }
850         }
852         .no-post-container {
853             .icon {
854                 height: 250px;
855                 width: 250px;
856                 margin-right: 0;
857             }
858         }
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     }
873     .no-search-results-container {
874         .icon {
875             height: 250px;
876             width: 250px;
877             margin-right: 0;
878         }
879     }
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         }
887         .parent-container {
888             .author-image-container {
889                 position: relative;
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         }
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     }
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     }
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     }
934 // End styling for mod_forum.
936 .maincalendar .calendarmonth td,
937 .maincalendar .calendarmonth th {
938     border: 1px dotted $table-border-color;
941 .path-grade-report-grader h1 {
942     text-align: inherit;
945 #page-mod-chat-gui_basic input#message {
946     max-width: 100%;
949 #page-mod-data-view #singleimage {
950     width: auto;
953 .path-mod-data form {
954     margin-top: 10px;
957 .template_heading {
958     margin-top: 10px;
961 .breadcrumb-button {
962     margin-top: 4px;
965 .breadcrumb-button .singlebutton {
966     float: left;
967     margin-left: 4px;
970 .langmenu form {
971     margin: 0;
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;
978 div#dock {
979     display: none;
982 // Choice module
984 // Lesson module
986 /** General styles (scope: all of lesson) **/
987 .path-mod-lesson .invisiblefieldset.fieldsetfix {
988     display: block;
990 .path-mod-lesson .answeroption .checkbox label p {
991     display: inline;
993 .path-mod-lesson .form-inline label.form-check-label {
994     display: inline-block;
996 .path-mod-lesson .slideshow {
997     overflow: auto;
998     padding: 15px;
1000 #page-mod-lesson-view .branchbuttoncontainer .singlebutton button[type="submit"] {
1001     white-space: normal;
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     }
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     }
1029 .path-mod-wiki .wiki_headingtitle,
1030 .path-mod-wiki .midpad,
1031 .path-mod-wiki .wiki_headingtime {
1032     text-align: inherit;
1035 .path-mod-wiki .wiki_contentbox {
1036     width: 100%;
1039 // Survey module
1041 .path-mod-survey {
1042     .surveytable {
1043         > tbody > tr:nth-of-type(odd) {
1044             background-color: $table-bg;
1045         }
1047         > tbody > tr:nth-of-type(even) {
1048             background-color: $table-accent-bg;
1049         }
1051         .rblock label {
1052             text-align: center;
1053         }
1054     }
1058 .nav .caret {
1059     margin-left: 4px;
1062 // Dividers
1063 .nav {
1064     .divider {
1065         overflow: hidden;
1066         width: 0;
1067     }
1070 // Usermenu
1071 .usermenu {
1072     .login {
1073         line-height: 2.25rem;
1074     }
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     }
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     }
1129 @include media-breakpoint-down(sm) {
1130     .usertext {
1131         display: none;
1132     }
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;
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;
1146 #page-mod-quiz-mod #id_reviewoptionshdr .form-group {
1147     float: left;
1148     width: 20rem;
1149     display: inline-block;
1150     min-height: 12rem;
1153 #page-mod-quiz-mod #id_reviewoptionshdr .btn-link {
1154     line-height: 1.5;
1155     vertical-align: bottom;
1157 #page-mod-quiz-mod #id_reviewoptionshdr .form-inline {
1158     float: left;
1159     clear: left;
1161 #page-mod-quiz-mod #id_reviewoptionshdr .form-check {
1162     width: auto;
1163     height: 22px;
1164     justify-content: flex-start;
1167 #page-mod-quiz-mod #id_reviewoptionshdr .review_option_item {
1168     width: 90%;
1169     height: 22px;
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     }
1189     span.qnbutton {
1190         cursor: default;
1191         background-color: $input-disabled-bg;
1192         color: $gray-700;
1193     }
1195     a.qnbutton:hover,
1196     a.qnbutton:active,
1197     a.qnbutton:focus {
1198         text-decoration: underline;
1199     }
1201     .qnbutton .thispageholder {
1202         border: 1px solid;
1203         border-radius: 3px;
1204         z-index: 1;
1205     }
1207     .qnbutton.thispage .thispageholder {
1208         border-width: 3px;
1209     }
1211     .allquestionsononepage .qnbutton.thispage .thispageholder {
1212         border-width: 1px;
1213     }
1215     .qnbutton.flagged .thispageholder {
1216         background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0 no-repeat;
1217     }
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     }
1227     .qnbutton.notyetanswered .trafficlight,
1228     .qnbutton.invalidanswer .trafficlight {
1229         background-color: $card-bg;
1230     }
1232     .qnbutton.invalidanswer .trafficlight {
1233         background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
1234     }
1236     .qnbutton.correct .trafficlight {
1237         background-image: url([[pix:theme|mod/quiz/checkmark]]);
1238         background-color: $success;
1239     }
1241     .qnbutton.blocked .trafficlight {
1242         background-image: url([[pix:core|t/locked]]);
1243         background-color: $input-disabled-bg;
1244     }
1246     .qnbutton.notanswered .trafficlight,
1247     .qnbutton.incorrect .trafficlight {
1248         background-color: $danger;
1249     }
1251     .qnbutton.partiallycorrect .trafficlight {
1252         background-image: url([[pix:theme|mod/quiz/whitecircle]]);
1253         background-color: $warning;
1254     }
1256     .qnbutton.complete .trafficlight,
1257     .qnbutton.answersaved .trafficlight,
1258     .qnbutton.requiresgrading .trafficlight {
1259         background-color: $gray-600;
1260     }
1263 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer form input {
1264     height: 1.4em;
1265     vertical-align: middle;
1268 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer {
1269     padding: 0;
1270     margin: 0 0.4em;
1273 /* Countdown timer. */
1274 #page-mod-quiz-attempt #region-main {
1275     overflow-x: inherit;
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     }
1289 .pagelayout-embedded #quiz-timer-wrapper {
1290     top: 5px;
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     }
1301 // Assign.
1302 .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
1303     top: auto;
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;
1311 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .felement {
1312     height: calc(100% - #{$popout-header-height});
1315 .path-mod-assign [data-region="grade-panel"] {
1316     padding-top: $spacer;
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;
1325 .path-mod-assign [data-region="grade-panel"] fieldset,
1326 .path-mod-assign [data-region="grade-panel"] .fitem.row {
1327     margin: 0;
1330 .path-mod-assign [data-region="grade-panel"] .mform .fitem.has-popout .felement {
1331     width: 100%;
1334 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement {
1335     width: auto;
1338 // Now styles for the popout sections.
1340 .path-mod-assign [data-region="grade-panel"] .popout {
1341     background-color: $modal-content-bg;
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;
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;
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;
1364 .path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
1365     margin-top: 0;
1368 // Now style the fixed header elements.
1370 .path-mod-assign [data-region="assignment-info"] {
1371     overflow-y: hidden;
1374 .path-mod-assign [data-region="grading-navigation"] {
1375     padding: 6px;
1378 .path-mod-assign [data-region="grade-actions"] {
1379     padding: 10px;
1382 .path-mod-assign [data-region="user-info"] .img-rounded {
1383     margin-top: 0;
1386 .path-mod-assign [data-region="grading-navigation-panel"] {
1387     height: 85px;
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     }
1399 .path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
1400     width: auto;
1401     display: inline-block;
1404 /**
1405  * Assign feedback.
1406  */
1407 .assignfeedback_editpdf_widget * {
1408     box-sizing: content-box;
1411 .assignfeedback_editpdf_widget button {
1412     box-sizing: border-box;
1415 .assignfeedback_editpdf_widget .commentcolourbutton img {
1416     border-width: 0;
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 */
1428 .assignfeedback_editpdf_menu {
1429     padding: 0;
1432 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .remark .commentchooser {
1433     float: none;
1435 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .markingguideremark {
1436     width: 100%;
1438 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement[data-fieldtype="grading"] {
1439     padding-left: $spacer;
1440     padding-right: $spacer;
1442 .path-mod-assign [data-region="grade-panel"] .showmarkerdesc,
1443 .path-mod-assign [data-region="grade-panel"] .showstudentdesc {
1444     background-color: $card-bg;
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     }