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
15 .horizontal .choices .option {
16 display: inline-block;
20 .path-mod-feedback .feedback_form .col-form-label {
21 display: block !important; /* stylelint-disable-line declaration-no-important */
25 .path-mod-feedback .itemactions {
28 .path-mod-feedback .itemhandle {
35 .path-mod-forum .forumsearch {
42 .path-mod-forum .forumheaderlist,
43 .path-mod-forum .forumheaderlist td {
50 tbody .discussion td {
62 thead .header.replies {
66 thead .header.lastpost {
71 tbody .discussion td {
72 &.discussionsubscription {
85 .discussionsubscription,
91 .discussionsubscription,
100 // Style for the forum subscription mode node.
105 // Style for the currently selected subscription mode.
112 .discussion-settings-container {
123 border: $border-width solid $border-color;
160 .forumpost .row .left {
164 .forumpost .options .commands {
168 .forumpost .subject {
172 // Override hardcoded forum modules styling
173 .forumsearch input[type=text] {
177 #page-mod-forum-view {
187 text-overflow: ellipsis;
191 max-width: calc(100% - 35px - .5rem);
197 #page-mod-forum-discuss .discussioncontrols {
206 $author-image-width: 70px;
207 $author-image-margin: 24px;
208 $author-image-width-sm: 30px;
209 $author-image-margin-sm: 8px;
211 /** Gently highlight the selected post by changing it's background to blue and then fading it out. */
212 @keyframes background-highlight {
214 background-color: rgba(0, 123, 255, 0.5);
217 background-color: inherit;
221 .path-mod-forum.nested-v2-display-mode {
222 .discussionsubscription {
229 .preload-unsubscribe {
241 /** Reset the badge styling back to pill style. */
244 font-weight: inherit;
246 padding-right: .5rem;
247 border-radius: 10rem;
251 background-color: #f6f6f6;
255 /** Style the ratings like a badge. */
256 .rating-aggregate-container {
257 background-color: #f6f6f6;
262 vertical-align: middle;
263 border-radius: 10rem;
268 padding: .25em 1.75rem 0.25em .75em;
271 border-radius: 10rem;
273 @include media-breakpoint-down(sm) {
283 display: inline-block;
286 /** Don't show the discussion locked alert in this mode because it's already indicated with a badge. */
287 .alert.discussionlocked {
291 /** Fix muted text contrast ratios for accessibility. */
294 color: #707070 !important; /* stylelint-disable-line declaration-no-important */
305 /** Make the tag list text screen reader visible only */
310 :target > .focus-target {
311 animation-name: background-highlight;
312 animation-duration: 1s;
313 animation-timing-function: ease-in-out;
314 animation-iteration-count: 1;
317 .forum-post-container {
319 .forum-post-container {
320 border-top: 1px solid #dee2e6;
323 .replies-container .forum-post-container {
329 .inline-reply-container .reply-author {
334 .post-message p:last-of-type {
338 .author-image-container {
339 width: $author-image-width;
340 margin-right: $author-image-margin;
344 .inline-reply-container textarea {
351 * The first post and first set of replies have a larger author image so offset the 2nd
352 * set of replies by the image width + margin to ensure they align.
355 padding-left: $author-image-width + $author-image-margin;
358 * Reduce the size of the the author image for all second level replies (and below).
360 .author-image-container {
361 width: $author-image-width-sm;
362 margin-right: $author-image-margin-sm;
363 padding-top: (36px - $author-image-width-sm) / 2;
367 * Adjust the indentation offset for all 3rd level replies and below for the smaller author image.
370 padding-left: $author-image-width-sm + $author-image-margin-sm;
373 * Stop indenting the replies after the 5th reply.
375 .indent .indent .indent {
384 /** Extra small devices (portrait phones, less than 576px). */
385 @include media-breakpoint-down(sm) {
386 #page-mod-forum-discuss.nested-v2-display-mode {
387 .forum-post-container {
388 .author-image-container {
389 width: $author-image-width-sm;
390 margin-right: $author-image-margin-sm;
395 padding-left: $author-image-width-sm + $author-image-margin-sm;
411 // Make filter popover content scrollable if needed.
418 // Required to fit a date mform into a filter popover.
419 .filter-dates-popover {
428 $grading-drawer-width: 430px !default;
429 $grading-animation-duration: .3s !default;
430 $grading-icon-button-size: 36px !default;
431 $grading-search-button-padding-left: calc(#{map-get($spacers, 2)} + 8px) !default;
432 $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 */
433 $grading-search-input-padding-right: calc(#{map-get($spacers, 2)} + #{$grading-icon-button-size}) !default;
434 $grading-nav-bar-active-drawer-button-bottom: calc(#{map-get($spacers, 2) * -1} - 1px) !default;
436 @keyframes expandSearchButton {
438 height: $grading-icon-button-size;
439 width: $grading-icon-button-size;
440 border-radius: $grading-icon-button-size / 2;
441 background-color: $gray-200;
445 height: $input-height-lg;
447 background-color: $input-bg;
448 border-color: $input-border-color;
449 padding-left: $grading-search-button-padding-left;
450 padding-top: $input-padding-y-lg;
451 padding-bottom: $input-padding-y-lg;
452 @include font-size($input-font-size-lg);
453 line-height: $input-line-height-lg;
458 @keyframes collapseSearchButton {
461 height: $input-height-lg;
463 background-color: $input-bg;
464 border-color: $input-border-color;
465 padding-left: $grading-search-button-padding-left;
466 padding-top: $input-padding-y-lg;
467 padding-bottom: $input-padding-y-lg;
468 @include font-size($input-font-size-lg);
469 line-height: $input-line-height-lg;
473 height: $grading-icon-button-size;
474 width: $grading-icon-button-size;
475 border-radius: $grading-icon-button-size / 2;
476 background-color: $gray-200;
480 .path-mod-forum .unified-grader {
486 .grader-grading-panel {
491 width: $grading-drawer-width;
494 right: ($grading-drawer-width * -1);
498 width: $grading-icon-button-size;
501 .user-picker-container {
512 width: $grading-icon-button-size;
513 height: $grading-icon-button-size;
517 justify-content: center;
530 transform: translateY(-50%);
533 padding: map-get($spacers, 2);
534 padding-right: calc(#{$grading-icon-button-size} + #{map-get($spacers, 2)});
537 transition: left $grading-animation-duration ease-in-out;
541 .user-search-container {
546 transform: translateY(-50%);
549 height: 100% !important; /* stylelint-disable-line declaration-no-important */
550 padding: map-get($spacers, 2);
552 .search-input-container {
558 padding-left: $grading-search-input-padding-left;
559 padding-right: $grading-search-input-padding-right;
560 transition: $custom-forms-transition;
566 left: map-get($spacers, 2);
567 transform: translateY(-50%);
569 height: $grading-icon-button-size;
570 width: $grading-icon-button-size - ($input-border-width * 2);
571 background-color: $input-bg;
579 opacity 0s linear $grading-animation-duration,
580 visibility 0s linear $grading-animation-duration;
583 .toggle-search-button {
586 right: map-get($spacers, 2);
587 transform: translateY(-50%);
592 animation-name: expandSearchButton;
593 animation-duration: $grading-animation-duration;
594 animation-timing-function: ease-in-out;
595 transition: right 0s linear $grading-animation-duration;
602 opacity 0s linear $grading-animation-duration,
603 max-height 0s linear $grading-animation-duration,
604 max-width 0s linear $grading-animation-duration;
613 opacity 0s linear $grading-animation-duration,
614 max-height 0s linear $grading-animation-duration,
615 max-width 0s linear $grading-animation-duration;
620 &.collapse:not(.show) {
621 width: calc(#{$grading-icon-button-size} + #{map-get($spacers, 2)} + #{map-get($spacers, 2)});
622 transition: width $grading-animation-duration ease-in-out;
624 .search-input-container {
633 visibility 0s linear;
641 .toggle-search-button {
642 animation-name: collapseSearchButton;
643 animation-duration: $grading-animation-duration;
652 max-height 0s linear,
662 max-height 0s linear,
670 .user-search-container.show + .info-container,
671 .user-search-container.collapsing + .info-container {
674 left: calc(100% * -1);
676 left $grading-animation-duration ease-in-out,
677 opacity 0s linear $grading-animation-duration,
678 visibility 0s linear $grading-animation-duration,
679 padding 0s linear $grading-animation-duration;
684 .grader-module-content {
686 margin-right: $grading-drawer-width;
687 @include transition(margin-right .2s ease-in-out);
690 .grader-grading-panel.hidden + .grader-module-content {
700 bottom: $grading-nav-bar-active-drawer-button-bottom;
704 background-color: map-get($theme-colors, 'primary');
715 @include media-breakpoint-down(xs) {
716 .path-mod-forum .unified-grader {
717 .grader-grading-panel {
723 // End styling for mod_forum.
725 .maincalendar .calendarmonth td,
726 .maincalendar .calendarmonth th {
727 border: 1px dotted $table-border-color;
730 .path-grade-report-grader h1 {
734 #page-mod-chat-gui_basic input#message {
738 #page-mod-data-view #singleimage {
742 .path-mod-data form {
754 .breadcrumb-button .singlebutton {
759 .ie .row-fluid .desktop-first-column {
766 // contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
768 -ms-touch-action: auto;
779 /** General styles (scope: all of lesson) **/
780 .path-mod-lesson .invisiblefieldset.fieldsetfix {
783 .path-mod-lesson .answeroption .checkbox label p {
786 .path-mod-lesson .form-inline label.form-check-label {
787 display: inline-block;
789 .path-mod-lesson .slideshow {
793 #page-mod-lesson-view .branchbuttoncontainer .singlebutton button[type="submit"] {
796 #page-mod-lesson-view {
797 .vertical .singlebutton {
804 .fitem .felement .custom-select {
805 align-self: flex-start;
808 .path-mod-lesson .generaltable td {
809 vertical-align: middle;
814 display: inline-block;
815 margin-left: 0.25rem;
817 input[type="checkbox"] {
822 .path-mod-wiki .wiki_headingtitle,
823 .path-mod-wiki .midpad,
824 .path-mod-wiki .wiki_headingtime {
828 .path-mod-wiki .wiki_contentbox {
836 > tbody > tr:nth-of-type(odd) {
837 background-color: $table-bg;
840 > tbody > tr:nth-of-type(even) {
841 background-color: $table-bg-accent;
866 line-height: 2.25rem;
872 color: $link-hover-color;
873 text-decoration: underline;
886 margin-right: $spacer / 2;
890 font-size: $font-size-sm;
901 .userloggedinas .usermenu {
902 .userbutton .avatars {
904 display: inline-block;
907 display: inline-block;
915 vertical-align: baseline;
926 display: inline-block;
931 @include media-breakpoint-down(sm) {
938 .path-mod-quiz .mod-quiz-edit-content {
939 // Force the quiz edit page to always be large enough to prevent scrolling when accessing the menu.
940 margin-bottom: 10rem;
943 #page-mod-quiz-mod #id_reviewoptionshdr .col-md-3,
944 #page-mod-quiz-mod #id_reviewoptionshdr .col-md-9 {
948 #page-mod-quiz-mod #id_reviewoptionshdr .form-group {
951 display: inline-block;
955 #page-mod-quiz-mod #id_reviewoptionshdr .btn-link {
957 vertical-align: bottom;
959 #page-mod-quiz-mod #id_reviewoptionshdr .form-inline {
963 #page-mod-quiz-mod #id_reviewoptionshdr .form-check {
966 justify-content: flex-start;
969 // Question navigation block.
970 .path-mod-quiz #mod_quiz_navblock {
972 text-decoration: none;
976 background-color: $card-bg;
977 background-image: none;
988 background-color: $input-bg-disabled;
995 text-decoration: underline;
998 .qnbutton .thispageholder {
1004 .qnbutton.thispage .thispageholder {
1008 .allquestionsononepage .qnbutton.thispage .thispageholder {
1012 .qnbutton.flagged .thispageholder {
1013 background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0 no-repeat;
1016 .qnbutton .trafficlight {
1018 background: $card-bg none center / 10px no-repeat scroll;
1021 border-radius: 0 0 3px 3px;
1024 .qnbutton.notyetanswered .trafficlight,
1025 .qnbutton.invalidanswer .trafficlight {
1026 background-color: $card-bg;
1029 .qnbutton.invalidanswer .trafficlight {
1030 background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
1033 .qnbutton.correct .trafficlight {
1034 background-image: url([[pix:theme|mod/quiz/checkmark]]);
1035 background-color: $state-success-text;
1038 .qnbutton.blocked .trafficlight {
1039 background-image: url([[pix:core|t/locked]]);
1040 background-color: $input-bg-disabled;
1043 .qnbutton.notanswered .trafficlight,
1044 .qnbutton.incorrect .trafficlight {
1045 background-color: $state-danger-text;
1048 .qnbutton.partiallycorrect .trafficlight {
1049 background-image: url([[pix:theme|mod/quiz/whitecircle]]);
1050 background-color: $state-warning-text;
1053 .qnbutton.complete .trafficlight,
1054 .qnbutton.answersaved .trafficlight,
1055 .qnbutton.requiresgrading .trafficlight {
1056 background-color: $gray-light;
1060 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer form input {
1062 vertical-align: middle;
1065 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer {
1071 .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
1075 // This section removes the responsiveness from the form in the grading panel
1076 $popout-header-font-size: 1.5 * $font-size-base;
1077 // This can't be calculated from modal-title-padding because we are mixing px and rem units.
1078 $popout-header-height: 4rem;
1080 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .felement {
1081 height: calc(100% - #{$popout-header-height});
1084 .path-mod-assign [data-region="grade-panel"] {
1085 padding-top: $spacer;
1087 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3,
1088 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-9 {
1094 .path-mod-assign [data-region="grade-panel"] fieldset,
1095 .path-mod-assign [data-region="grade-panel"] .fitem.row {
1099 .path-mod-assign [data-region="grade-panel"] .mform .fitem.has-popout .felement {
1103 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement {
1107 // Now styles for the popout sections.
1109 .path-mod-assign [data-region="grade-panel"] .popout {
1110 background-color: $modal-content-bg;
1113 .path-mod-assign [data-region="grade-panel"] .fitem.has-popout {
1114 background-color: $card-bg;
1115 @include border-radius($card-border-radius);
1116 border: $card-border-width solid $card-border-color;
1117 padding: $card-spacer-x;
1118 margin-bottom: $spacer;
1120 .path-mod-assign [data-region="grade-panel"] .has-popout .col-md-3 {
1121 border-bottom: $hr-border-width solid $hr-border-color;
1122 margin-bottom: $spacer;
1126 .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 {
1127 @extend .modal-header;
1128 font-size: $popout-header-font-size;
1131 .path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
1135 // Now style the fixed header elements.
1137 .path-mod-assign [data-region="assignment-info"] {
1141 .path-mod-assign [data-region="grading-navigation"] {
1145 .path-mod-assign [data-region="grade-actions"] {
1149 .path-mod-assign [data-region="user-info"] .img-rounded {
1153 .path-mod-assign [data-region="grading-navigation-panel"] {
1157 @media (max-width: 767px) {
1158 .path-mod-assign [data-region="grading-navigation-panel"] {
1161 .path-mod-assign [data-region="user-info"] {
1166 .path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
1168 display: inline-block;
1174 .assignfeedback_editpdf_widget * {
1175 box-sizing: content-box;
1178 .assignfeedback_editpdf_widget button {
1179 box-sizing: border-box;
1182 .assignfeedback_editpdf_widget .commentcolourbutton img {
1186 .assignfeedback_editpdf_widget .label {
1188 @extend .alert-info;
1191 .assignfeedback_editpdf_menu {
1195 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .remark .commentchooser {
1198 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .markingguideremark {
1201 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement[data-fieldtype="grading"] {
1202 padding-left: $spacer;
1203 padding-right: $spacer;
1205 .path-mod-assign [data-region="grade-panel"] .showmarkerdesc,
1206 .path-mod-assign [data-region="grade-panel"] .showstudentdesc {
1207 background-color: $card-bg;
1213 .path-admin-mod-lti {
1215 #tool-list-loader-container .loader img {