52b02fb4f9b3f9b6e380720cca36a70a0de8aee8
[moodle.git] / theme / boost / scss / moodle / core.scss
1 /* core.less */
3 // When we upgrade boostrap to v4 release, we will need to change this to be used by the text-white class.
4 // Because a primary colour that is both AA accessible on grey (footer) and white is not possible, we always
5 // want white default colour.
6 $bg-inverse-link-color: #fff !default;
8 #region-main {
9     overflow-x: auto;
10     overflow-y: visible;
11     border: $card-border-width solid $card-border-color;
12     padding: $card-spacer-x;
13     background-color: $body-bg;
14 }
16 .context-header-settings-menu,
17 .region-main-settings-menu {
18     float: right;
19     width: auto;
20     max-width: 4em;
21     height: 2em;
22     display: block;
23     margin-top: 4px;
24 }
26 .context-header-settings-menu .dropdown-toggle > .icon,
27 #region-main-settings-menu .dropdown-toggle > .icon {
28     height: 24px;
29     font-size: 24px;
30     width: auto;
31 }
32 /** Prevent user notifications overlapping with region main settings menu */
33 #user-notifications {
34     display: block;
35     overflow: hidden;
36 }
38 /** Page layout CSS starts **/
39 .layout-option-noheader #page-header,
40 .layout-option-nonavbar #page-navbar,
41 .layout-option-nofooter #page-footer,
42 .layout-option-nocourseheader .course-content-header,
43 .layout-option-nocoursefooter .course-content-footer {
44     display: none;
45 }
47 /** Page layout CSS ends **/
49 .mdl-left {
50     text-align: left;
51 }
53 .mdl-right {
54     text-align: right;
55 }
57 /*rtl:ignore*/
58 .text-ltr {
59     direction: ltr !important; /* stylelint-disable-line declaration-no-important */
60 }
62 #add,
63 #remove,
64 .centerpara,
65 .mdl-align {
66     text-align: center;
67 }
69 a.dimmed,
70 a.dimmed:link,
71 a.dimmed:visited,
72 a.dimmed_text,
73 a.dimmed_text:link,
74 a.dimmed_text:visited,
75 .dimmed_text,
76 .dimmed_text a,
77 .dimmed_text a:link,
78 .dimmed_text a:visited,
79 .usersuspended,
80 .usersuspended a,
81 .usersuspended a:link,
82 .usersuspended a:visited,
83 .dimmed_category,
84 .dimmed_category a {
85     @extend .text-muted;
86 }
88 .unlist,
89 .unlist li,
90 .inline-list,
91 .inline-list li,
92 .block .list,
93 .block .list li,
94 .section li.activity,
95 .section li.movehere,
96 .tabtree li {
97     list-style: none;
98     margin: 0;
99     padding: 0;
102 .inline,
103 .inline-list li {
104     display: inline;
107 .notifytiny {
108     font-size: $font-size-xs;
111 .notifytiny li,
112 .notifytiny td {
113     font-size: 100%;
116 .red,
117 .notifyproblem {
118     @extend .text-warning;
121 .green,
122 .notifysuccess {
123     @extend .text-success;
126 .highlight {
127     @extend .text-info;
130 .fitem.advanced .text-info {
131     font-weight: bold;
134 .reportlink {
135     text-align: right;
138 a.autolink.glossary:hover {
139     cursor: help;
141 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
142 .collapsibleregioncaption {
143     white-space: nowrap;
144     min-height: $line-height-base * $font-size-base;
147 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
148     cursor: pointer;
151 .collapsibleregioncaption img {
152     vertical-align: middle;
155 .jsenabled .hiddenifjs {
156     display: none;
159 .visibleifjs {
160     display: none;
163 .jsenabled .visibleifjs {
164     display: inline;
167 .jsenabled .collapsibleregion {
168     overflow: hidden;
169     box-sizing: content-box;
172 .jsenabled .collapsed .collapsibleregioninner {
173     visibility: hidden;
176 .collapsible-actions {
177     display: none;
178     text-align: right;
181 .jsenabled .collapsible-actions {
182     display: block;
185 .collapsible-actions .collapseexpand {
186     padding-left: 20px;
187     background: url([[pix:t/collapsed]]) 2px center no-repeat;
189 /*rtl:raw:
190 .collapsible-actions .collapseexpand {
191     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
193 */
194 .collapsible-actions .collapse-all {
195     background-image: url([[pix:t/expanded]]);
198 .yui-overlay .yui-widget-bd {
199     background-color: #ffee69;
200     border: 1px solid #a6982b;
201     border-top-color: #d4c237;
202     color: #000;
203     left: 0;
204     padding: 2px 5px;
205     position: relative;
206     top: 0;
207     z-index: 1;
210 .clearer {
211     background: transparent;
212     border-width: 0;
213     clear: both;
214     display: block;
215     height: 1px;
216     margin: 0;
217     padding: 0;
220 .bold,
221 .warning,
222 .errorbox .title,
223 .pagingbar .title,
224 .pagingbar .thispage {
225     font-weight: bold;
228 img.userpicture {
229     margin-right: 0.5rem;
232 img.resize {
233     height: 1em;
234     width: 1em;
237 .action-menu .dropdown-toggle {
238     text-decoration: none;
241 .action-menu {
242     white-space: nowrap;
245 .block img.resize {
246     height: 0.9em;
247     width: 0.8em;
249 /* Icon styles */
250 img.activityicon {
251     height: 24px;
252     width: 24px;
253     vertical-align: middle;
256 .headermain {
257     font-weight: bold;
260 #maincontent {
261     display: block;
262     height: 1px;
263     overflow: hidden;
266 img.uihint {
267     cursor: help;
270 #addmembersform table {
271     margin-left: auto;
272     margin-right: auto;
275 table.flexible .emptyrow {
276     display: none;
279 form.popupform,
280 form.popupform div {
281     display: inline;
284 .arrow_button input {
285     overflow: hidden;
287 .no-overflow {
288     overflow: auto;
291 // Minimum height required for a menu in a table inside a scrollable div.
292 .no-overflow > .generaltable {
293     margin-bottom: 0;
294     min-height: 10em;
296 // Accessibility features
298 // Accessibility: text 'seen' by screen readers but not visual users.
299 .accesshide {
300     @include sr-only();
303 span.hide,
304 div.hide,
305 .hidden {
306     display: none;
308 // Accessibility: Skip block link, for keyboard-only users.
309 a.skip-block,
310 a.skip {
311     position: absolute;
312     top: -1000em;
313     font-size: 0.85em;
314     text-decoration: none;
317 a.skip-block:focus,
318 a.skip-block:active,
319 a.skip:focus,
320 a.skip:active {
321     position: static;
322     display: block;
325 .skip-block-to {
326     display: block;
327     height: 1px;
328     overflow: hidden;
330 // Blogs
331 .addbloglink {
332     text-align: center;
335 .blog_entry .audience {
336     text-align: right;
337     padding-right: 4px;
340 .blog_entry .tags {
341     margin-top: 15px;
344 .blog_entry .content {
345     margin-left: 43px;
347 // Group
349 #doc-contents h1 {
350     margin: 1em 0 0 0;
353 #doc-contents ul {
354     margin: 0;
355     padding: 0;
356     width: 90%;
359 #doc-contents ul li {
360     list-style-type: none;
363 .groupmanagementtable td {
364     vertical-align: top;
367 .groupmanagementtable #existingcell,
368 .groupmanagementtable #potentialcell {
369     width: 42%;
372 .groupmanagementtable #buttonscell {
373     width: 16%;
376 .groupmanagementtable #buttonscell p.arrow_button input {
377     width: auto;
378     min-width: 80%;
379     margin: 0 auto;
382 .groupmanagementtable #removeselect_wrapper,
383 .groupmanagementtable #addselect_wrapper {
384     width: 100%;
387 .groupmanagementtable #removeselect_wrapper label,
388 .groupmanagementtable #addselect_wrapper label {
389     font-weight: normal;
392 #group-usersummary {
393     width: 14em;
396 .groupselector {
397     margin-top: 3px;
398     margin-bottom: 3px;
399     display: inline-block;
402 .groupselector label {
403     display: inline-block;
406 // Login
407 .login-page {
408     [name="username"] {
409         margin-bottom: -1px;
410         border-bottom-right-radius: 0;
411         border-bottom-left-radius: 0;
412     }
414     [type="password"] {
415         margin-bottom: 10px;
416         border-top-left-radius: 0;
417         border-top-right-radius: 0;
418     }
421 // Notes
422 .notepost {
423     margin-bottom: 1em;
426 .notepost .userpicture {
427     float: left;
428     margin-right: 5px;
431 .notepost .content,
432 .notepost .footer {
433     clear: both;
436 .notesgroup {
437     margin-left: 20px;
440 // My Moodle
441 .path-my .coursebox {
442     margin: $spacer-y 0;
443     padding: 0;
445     .overview {
446         margin: 15px 30px 10px 30px;
447     }
450 .path-my .coursebox .info {
451     float: none;
452     margin: 0;
455 // Modules
456 .mod_introbox {
457     padding: 10px;
460 table.mod_index {
461     width: 100%;
464 // Comments
465 .comment-ctrl {
466     font-size: 12px;
467     display: none;
468     margin: 0;
469     padding: 0;
472 .comment-ctrl h5 {
473     margin: 0;
474     padding: 5px;
477 .comment-area {
478     max-width: 400px;
479     padding: 5px;
482 .comment-area textarea {
483     width: 100%;
484     overflow: auto;
486     &.fullwidth {
487         -webkit-box-sizing: border-box;
488         -moz-box-sizing: border-box;
489         box-sizing: border-box;
490     }
493 .comment-area .fd {
494     text-align: right;
497 .comment-meta span {
498     color: gray;
501 .comment-link img {
502     vertical-align: text-bottom;
505 .comment-list {
506     font-size: 11px;
507     overflow: auto;
508     list-style: none;
509     padding: 0;
510     margin: 0;
513 .comment-list li {
514     margin: 2px;
515     list-style: none;
516     margin-bottom: 5px;
517     clear: both;
518     padding: .3em;
519     position: relative;
522 .comment-list li.first {
523     display: none;
526 .comment-paging {
527     text-align: center;
530 .comment-paging .pageno {
531     padding: 2px;
534 .comment-paging .curpage {
535     border: 1px solid #ccc;
538 .comment-message .picture {
539     width: 20px;
540     float: left;
543 .comment-message .text {
544     margin: 0;
545     padding: 0;
548 .comment-message .text p {
549     padding: 0;
550     margin: 0 18px 0 0;
553 .comment-delete {
554     position: absolute;
555     top: 0;
556     right: 0;
557     margin: .3em;
560 .comment-report-selectall {
561     display: none;
564 .comment-link {
565     display: none;
568 .jsenabled .comment-link {
569     display: block;
572 .jsenabled .showcommentsnonjs {
573     display: none;
576 .jsenabled .comment-report-selectall {
577     display: inline;
579 /**
580 * Completion progress report
581 */
582 .completion-expired {
583     @extend .text-warning;
586 .completion-expected {
587     font-size: $font-size-xs;
590 .completion-sortchoice,
591 .completion-identifyfield {
592     font-size: $font-size-xs;
593     vertical-align: bottom;
596 .completion-progresscell {
597     text-align: right;
600 .completion-expired .completion-expected {
601     font-weight: bold;
603 /**
604 * Tags
605 */
606 img.user-image {
607     height: 100px;
608     width: 100px;
611 #tag-search-box {
612     text-align: center;
613     margin: 10px auto;
616 .path-tag .tag-index-items .tagarea {
617     border: 1px solid #e3e3e3;
618     border-radius: 4px;
619     padding: 10px;
620     margin-top: 10px;
623 .path-tag .tag-index-items .tagarea h3 {
624     display: block;
625     padding: 3px 0 10px 0;
626     margin: 0;
627     font-size: 1.1em;
628     font-weight: bold;
629     line-height: 20px;
630     color: #999;
631     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
632     text-transform: uppercase;
633     word-wrap: break-word;
634     border-bottom: solid 1px #e3e3e3;
635     margin-bottom: 10px;
638 .path-tag .tagarea .controls,
639 .path-tag .tagarea .taggeditems {
640     @include clearfix();
643 .path-tag .tagarea .controls,
644 .path-tag .tag-backtoallitems {
645     text-align: center;
648 .path-tag .tagarea .controls .gotopage.nextpage {
649     float: right;
652 .path-tag .tagarea .controls .gotopage.prevpage {
653     float: left;
656 .path-tag .tagarea .controls .exclusivemode {
657     display: inline-block;
660 .path-tag .tagarea .controls.controls-bottom {
661     margin-top: 5px;
664 .path-tag .tagarea .controls .gotopage.nextpage::after {
665     padding-right: 5px;
666     padding-left: 5px;
667     content: "»";
670 .path-tag .tagarea .controls .gotopage.prevpage::before {
671     padding-right: 5px;
672     padding-left: 5px;
673     content: "«";
676 span.flagged-tag,
677 tr.flagged-tag,
678 span.flagged-tag a,
679 tr.flagged-tag a {
680     @extend .text-warning;
683 .tag-management-table td,
684 .tag-management-table th {
685     vertical-align: middle;
686     padding: 4px;
689 .tag-management-table .inplaceeditable.inplaceeditingon input {
690     width: 150px;
693 .path-admin-tag .addstandardtags {
694     float: right;
696     img {
697         margin: 0 5px;
698     }
701 .path-tag .tag-relatedtags {
702     padding-top: 10px;
705 .path-tag .tag-management-box {
706     text-align: right;
709 .path-tag .tag-index-toc {
710     padding: 10px;
711     text-align: center;
714 .path-tag .tag-index-toc li,
715 .path-tag .tag-management-box li {
716     margin-left: 5px;
717     margin-right: 5px;
720 .path-tag .tag-management-box li a.edittag {
721     background-image: url([[pix:moodle|i/settings]]);
724 .path-tag .tag-management-box li a.flagasinappropriate {
725     background-image: url([[pix:moodle|i/flagged]]);
728 .path-tag .tag-management-box li a.removefrommyinterests {
729     background-image: url([[pix:moodle|t/delete]]);
732 .path-tag .tag-management-box li a.addtomyinterests {
733     background-image: url([[pix:moodle|t/add]]);
736 .path-tag .tag-management-box li a {
737     background-repeat: no-repeat;
738     background-position: left;
739     padding-left: 17px;
742 .tag_feed.media-list .media .itemimage {
743     float: left;
746 .tag_feed.media-list .media .itemimage img {
747     height: 35px;
748     width: 35px;
751 .tag_feed.media-list .media .media-body {
752     padding-right: 10px;
753     padding-left: 10px;
756 .tag_feed .media .muted a {
757     @extend .text-muted;
760 .tag_cloud {
761     text-align: center;
764 .tag_cloud .inline-list li {
765     padding: 0 0.2em;
768 .tag_cloud .tag_overflow {
769     margin-top: 1em;
770     font-style: italic;
773 .tag_cloud .s20 {
774     font-size: 2.7em;
777 .tag_cloud .s19 {
778     font-size: 2.6em;
781 .tag_cloud .s18 {
782     font-size: 2.5em;
785 .tag_cloud .s17 {
786     font-size: 2.4em;
789 .tag_cloud .s16 {
790     font-size: 2.3em;
793 .tag_cloud .s15 {
794     font-size: 2.2em;
797 .tag_cloud .s14 {
798     font-size: 2.1em;
801 .tag_cloud .s13 {
802     font-size: 2em;
805 .tag_cloud .s12 {
806     font-size: 1.9em;
809 .tag_cloud .s11 {
810     font-size: 1.8em;
813 .tag_cloud .s10 {
814     font-size: 1.7em;
817 .tag_cloud .s9 {
818     font-size: 1.6em;
821 .tag_cloud .s8 {
822     font-size: 1.5em;
825 .tag_cloud .s7 {
826     font-size: 1.4em;
829 .tag_cloud .s6 {
830     font-size: 1.3em;
833 .tag_cloud .s5 {
834     font-size: 1.2em;
837 .tag_cloud .s4 {
838     font-size: 1.1em;
841 .tag_cloud .s3 {
842     font-size: 1em;
845 .tag_cloud .s2 {
846     font-size: 0.9em;
849 .tag_cloud .s1 {
850     font-size: 0.8em;
853 .tag_cloud .s0 {
854     font-size: 0.7em;
857 .tag_list ul {
858     display: inline;
861 .tag_list.hideoverlimit .overlimit {
862     display: none;
865 .tag_list .tagmorelink {
866     display: none;
869 .tag_list.hideoverlimit .tagmorelink {
870     display: inline;
873 .tag_list.hideoverlimit .taglesslink {
874     display: none;
877 /**
878 * Web Service
879 */
880 #webservice-doc-generator td {
881     text-align: left;
882     border: 0 solid black;
885 /**
886 * Enrol
887 */
888 .userenrolment {
889     width: 100%;
890     border-collapse: collapse;
893 .userenrolment tr {
894     vertical-align: top;
897 .userenrolment td {
898     padding: 0;
899     height: 41px;
902 .userenrolment .subfield {
903     margin-right: 5px;
906 .userenrolment .col_userdetails .subfield {
907     margin-left: 40px;
910 .userenrolment .col_userdetails .subfield_picture {
911     float: left;
912     margin-left: 0;
915 .userenrolment .col_lastseen {
916     width: 150px;
919 .userenrolment .col_role {
920     width: 262px;
923 .userenrolment .col_role .roles,
924 .userenrolment .col_group .groups {
925     margin-right: 30px;
928 .userenrolment .col_role .role {
929     float: left;
930     padding: 0 3px 3px;
931     margin: 0 3px 3px;
932     white-space: nowrap;
935 .userenrolment .col_group .group {
936     float: left;
937     padding: 3px;
938     margin: 3px;
939     white-space: nowrap;
942 .userenrolment .col_role .role a,
943 .userenrolment .col_group .group a {
944     margin-left: 3px;
945     cursor: pointer;
948 .userenrolment .col_role .addrole,
949 .userenrolment .col_group .addgroup {
950     float: right;
951     padding: 3px;
952     margin: 3px;
954     > a:hover {
955         border-bottom: 1px solid #666;
956     }
959 .userenrolment .col_role .addrole img,
960 .userenrolment .col_group .addgroup img {
961     vertical-align: baseline;
964 .userenrolment .hasAllRoles .col_role .addrole {
965     display: none;
968 .userenrolment .col_enrol .enrolment {
969     float: left;
970     padding: 0 3px 3px;
971     margin: 0 3px 3px;
974 .userenrolment .col_enrol .enrolment a {
975     float: right;
976     margin-left: 3px;
979 #page-enrol-users {
980     .enrol_user_buttons {
981         text-align: right;
983     }
985     #filterform {
986         @extend .card;
987         @extend .card-block;
988     }
991 #page-enrol-users .enrol-users-page-action input {
992     margin-left: 0;
995 .corelightbox {
996     background-color: #ccc;
997     position: absolute;
998     top: 0;
999     left: 0;
1000     width: 100%;
1001     height: 100%;
1002     text-align: center;
1005 .corelightbox img {
1006     position: fixed;
1007     top: 50%;
1008     left: 50%;
1011 .mod-indent-outer {
1012     display: table;
1015 .mod-indent {
1016     display: table-cell;
1019 .label .mod-indent {
1020     float: left;
1021     padding-top: 20px;
1023 $mod-indent-size: 30px;
1024 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1026 @for $i from 1 through 16 {
1027     $width: ($i * $mod-indent-size);
1029     .mod-indent-#{$i} {
1030         width: $width;
1031     }
1034 .mod-indent-huge {
1035     width: (16 * $mod-indent-size);
1038 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1039 .resourcecontent .mediaplugin_mp3 object {
1040     height: 25px;
1041     width: 600px;
1044 .resourcecontent audio.mediaplugin_html5audio {
1045     width: 600px;
1047 /** Large resource images should avoid hidden overflow **/
1048 .resourceimage {
1049     max-width: 100%;
1051 /* Audio player size in 'inline' mode (can only change width, as above) */
1052 .mediaplugin_mp3 object {
1053     height: 15px;
1054     width: 300px;
1057 audio.mediaplugin_html5audio {
1058     width: 300px;
1060 /* TinyMCE moodle media preview frame should not have padding */
1061 .core_media_preview.pagelayout-embedded #content {
1062     padding: 0;
1065 .core_media_preview.pagelayout-embedded #maincontent {
1066     height: 0;
1069 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1070     padding: 0;
1071     margin: 0;
1072     min-width: 0;
1073     background: none;
1076 .path-rating .ratingtable {
1077     width: 100%;
1078     margin-bottom: 1em;
1081 .path-rating .ratingtable th.rating {
1082     width: 100%;
1085 .path-rating .ratingtable td.rating,
1086 .path-rating .ratingtable td.time {
1087     white-space: nowrap;
1088     text-align: center;
1091 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1092 .moodle-dialogue-base .moodle-dialogue-lightbox {
1093     background-color: $gray;
1096 // Prevent adding backdrops to popups in popups.
1097 .pagelayout-popup {
1098     .moodle-dialogue-base {
1099         .moodle-dialogue-lightbox {
1100             background-color: transparent;
1101         }
1102         .moodle-dialogue {
1103             box-shadow: $popover-box-shadow;
1104         }
1105     }
1108 .moodle-dialogue-base .hidden,
1109 .moodle-dialogue-base .moodle-dialogue-hidden {
1110     display: none;
1113 .no-scrolling {
1114     overflow: hidden;
1117 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1118     left: 0;
1119     top: 0;
1120     right: 0;
1121     bottom: -50px;
1122     position: fixed;
1125 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1126     overflow: auto;
1129 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1130     width: 28px;
1131     height: 16px;
1132     background-size: 100%;
1135 .moodle-dialogue-base .moodle-dialogue-wrap {
1136     background-color: #fff;
1137     border: 1px solid #ccc;
1140 // Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1141 // it for a reason (conflicts with jquery .show()).
1142 .modal.show {
1143     display: block;
1146 .moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content {
1147     @extend .modal-content;
1150 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1151     @extend .modal-header;
1154 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1155     // Undo some YUI damage.
1156     min-height: 3rem;
1157     color: initial;
1158     background: initial;
1159     font-size: 1.5rem;
1160     line-height: 1.5;
1163 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1164     @extend .modal-title;
1165     font-size: 1.5rem;
1168 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1169     /*rtl:raw:
1170         left: 0;
1171         right: auto;
1172     */
1173     padding: $spacer;
1176 .moodle-dialogue-base .closebutton {
1177     @extend .close;
1178     box-shadow: none;
1179     &::after {
1180         content: "×";
1181     }
1184 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1185     padding: 0.5rem;
1188 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1189     overflow: auto;
1190     position: absolute;
1191     top: 0;
1192     bottom: 50px;
1193     left: 0;
1194     right: 0;
1195     margin: 0;
1196     border: 0;
1199 .moodle-dialogue-exception .moodle-exception-param label {
1200     font-weight: bold;
1203 .moodle-dialogue-exception .param-stacktrace label {
1204     background-color: #eee;
1205     border: 1px solid #ccc;
1206     border-bottom-width: 0;
1209 .moodle-dialogue-exception .param-stacktrace pre {
1210     border: 1px solid #ccc;
1211     background-color: #fff;
1214 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1215     color: navy;
1216     font-size: $font-size-sm;
1219 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1220     @extend .text-warning;
1221     font-size: $font-size-sm;
1224 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1225     color: #333;
1226     font-size: 90%;
1227     border-bottom: 1px solid #eee;
1230 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1231     @extend .modal-footer;
1234 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1235     display: none;
1238 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1239     // Undo some YUI damage.
1240     background: initial;
1243 .moodle-dialogue-confirm .confirmation-message {
1244     margin: 0.5rem 0;
1247 .moodle-dialogue-confirm .confirmation-dialogue input {
1248     min-width: 80px;
1251 .moodle-dialogue-exception .moodle-exception-message {
1252     margin: 1em;
1255 .moodle-dialogue-exception .moodle-exception-param {
1256     margin-bottom: 0.5em;
1259 .moodle-dialogue-exception .moodle-exception-param label {
1260     width: 150px;
1263 .moodle-dialogue-exception .param-stacktrace label {
1264     display: block;
1265     margin: 0;
1266     padding: 4px 1em;
1269 .moodle-dialogue-exception .param-stacktrace pre {
1270     display: block;
1271     height: 200px;
1272     overflow: auto;
1275 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1276     display: inline-block;
1277     margin: 4px 0;
1280 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1281     display: inline-block;
1282     width: 50px;
1283     margin: 4px 1em;
1286 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1287     padding-left: 25px;
1288     margin-bottom: 4px;
1289     padding-bottom: 4px;
1292 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1293     opacity: 0.75;
1294     width: 100%;
1295     height: 100%;
1296     top: 0;
1297     left: 0;
1298     background-color: white;
1299     text-align: center;
1300     padding: 10% 0;
1302 /* Apply a default max-height on tooltip text */
1303 .moodle-dialogue .tooltiptext {
1304     max-height: 300px;
1307 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1308     z-index: 3001;
1310     .moodle-dialogue-bd {
1311         overflow: auto;
1312     }
1315 /**
1316  * Chooser Dialogues (moodle-core-chooserdialogue)
1317  *
1318  * This CSS belong to the chooser dialogue which should work both with, and
1319  * without javascript enabled
1320  */
1321 /* Hide the dialog and it's title */
1322 .chooserdialoguebody,
1323 .choosertitle {
1324     display: none;
1327 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1328     margin: 0;
1331 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1332     padding: 0;
1333     background: #f2f2f2;
1335     @include border-bottom-radius(10px);
1337 /* Center the submit buttons within the area */
1338 .choosercontainer #chooseform .submitbuttons {
1339     padding: 0.7em 0;
1340     text-align: right;
1342 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1344 @media (max-height: 639px) {
1345     .ios .choosercontainer #chooseform .submitbuttons {
1346         padding: 45px 0;
1347     }
1350 .choosercontainer #chooseform .submitbuttons input {
1351     min-width: 100px;
1352     margin: 0 0.5em;
1354 /* Various settings for the options area */
1355 .choosercontainer #chooseform .options {
1356     position: relative;
1357     border-bottom: 1px solid #bbb;
1359 /* Only set these options if we're showing the js container */
1360 .jschooser .choosercontainer #chooseform .alloptions {
1361     overflow-x: hidden;
1362     overflow-y: auto;
1363     max-width: 240px;
1365     .option {
1366         input[type=radio] {
1367             display: inline-block;
1368         }
1370         .typename {
1371             display: inline-block;
1372             width: 55%;
1373         }
1374     }
1376 /* Settings for option rows and option subtypes */
1377 .choosercontainer #chooseform .moduletypetitle,
1378 .choosercontainer #chooseform .option,
1379 .choosercontainer #chooseform .nonoption {
1380     margin-bottom: 0;
1381     padding: 0 1.6em 0 1.6em;
1384 .choosercontainer #chooseform .moduletypetitle {
1385     text-transform: uppercase;
1386     padding-top: 1.2em;
1387     padding-bottom: 0.4em;
1390 .choosercontainer #chooseform .option .typename,
1391 .choosercontainer #chooseform .nonoption .typename {
1392     padding: 0 0 0 0.5em;
1395 .choosercontainer #chooseform .modicon + .typename {
1396     padding-left: 0;
1399 .choosercontainer #chooseform .option input[type=radio],
1400 .choosercontainer #chooseform .option span.typename {
1401     vertical-align: middle;
1404 .choosercontainer #chooseform .option label {
1405     display: block;
1406     margin: 0;
1407     padding: ($spacer / 2) 0;
1408     border-bottom: 1px solid #fff;
1411 .choosercontainer #chooseform .option .icon {
1412     margin: 0;
1413     padding: 0 $spacer;
1416 .choosercontainer #chooseform .nonoption {
1417     padding-left: 2.7em;
1418     padding-top: 0.3em;
1419     padding-bottom: 0.1em;
1422 .choosercontainer #chooseform .subtype {
1423     margin-bottom: 0;
1424     padding: 0 1.6em 0 3.2em;
1427 .choosercontainer #chooseform .subtype .typename {
1428     margin: 0 0 0 0.2em;
1430 /* The instruction/help area */
1431 .jschooser .choosercontainer #chooseform .instruction,
1432 .jschooser .choosercontainer #chooseform .typesummary {
1433     display: none;
1434     position: absolute;
1435     top: 0;
1436     right: 0;
1437     bottom: 0;
1438     left: 240px;
1439     margin: 0;
1440     padding: 1.6em;
1441     background-color: #fff;
1442     overflow-x: hidden;
1443     overflow-y: auto;
1444     line-height: 2em;
1446 /* Selected option settings */
1447 .jschooser .choosercontainer #chooseform .instruction,
1448 .choosercontainer #chooseform .selected .typesummary {
1449     display: block;
1452 .choosercontainer #chooseform .selected {
1453     background-color: #fff;
1454     margin-top: -1px;
1455     padding-top: 1px;
1458 .chooserdialogue-course-modchooser .modicon .icon {
1459     width: 24px;
1460     height: 24px;
1461     font-size: 24px;
1464 @include media-breakpoint-down(xs) {
1465     .jsenabled .choosercontainer #chooseform .alloptions {
1466         max-width: 100%;
1467     }
1469     .jsenabled .choosercontainer #chooseform .instruction,
1470     .jsenabled .choosercontainer #chooseform .typesummary {
1471         position: static;
1472     }
1475 /* Form element: listing */
1476 .formlistingradio {
1477     padding-bottom: 25px;
1478     padding-right: 10px;
1481 .formlistinginputradio {
1482     float: left;
1485 .formlistingmain {
1486     min-height: 225px;
1489 .formlisting {
1490     position: relative;
1491     margin: 15px 0;
1492     padding: 1px 19px 14px;
1493     background-color: white;
1494     border: 1px solid #ddd;
1496     @include border-radius(4px);
1499 .formlistingmore {
1500     position: absolute;
1501     cursor: pointer;
1502     bottom: -1px;
1503     right: -1px;
1504     padding: 3px 7px;
1505     font-size: 12px;
1506     font-weight: bold;
1507     background-color: whitesmoke;
1508     border: 1px solid #ddd;
1509     color: #9da0a4;
1511     @include border-radius(4px 0 4px 0);
1514 .formlistingall {
1515     margin: 15px 0;
1516     padding: 0;
1518     @include border-radius(4px);
1521 .formlistingrow {
1522     cursor: pointer;
1523     border-bottom: 1px solid;
1524     border-color: #e1e1e8;
1525     border-left: 1px solid #e1e1e8;
1526     border-right: 1px solid #e1e1e8;
1527     background-color: #f7f7f9;
1529     @include border-radius(0 0 4px 4px);
1530     padding: 6px;
1531     top: 50%;
1532     left: 50%;
1533     min-height: 34px;
1534     float: left;
1535     width: 150px;
1538 body.jsenabled .formlistingradio {
1539     display: none;
1542 body.jsenabled .formlisting {
1543     display: block;
1546 /* Badges styles */
1547 table.collection {
1548     @extend .table;
1549     @extend .table-bordered;
1550     @extend .table-striped;
1553 a.criteria-action {
1554     padding: 0 3px;
1555     float: right;
1558 div.criteria-description {
1559     padding: 10px 15px;
1560     margin: 5px 0;
1561     background: none repeat scroll 0 0 #f9f9f9;
1562     border: 1px solid #eee;
1565 ul.badges {
1566     margin: 0;
1567     list-style: none;
1570 .badges li {
1571     position: relative;
1572     display: inline-block;
1573     padding-top: 1em;
1574     text-align: center;
1575     vertical-align: top;
1576     width: 150px;
1579 .badges li .badge-name {
1580     display: block;
1581     padding: 5px;
1584 .badges li > img {
1585     position: absolute;
1588 .badges li .badge-image {
1589     width: 100px;
1590     height: 100px;
1591     left: 10px;
1592     top: 0;
1593     z-index: 1;
1596 .badges li .badge-actions {
1597     position: relative;
1600 .badges li .expireimage {
1601     width: 100px;
1602     height: 100px;
1603     left: 25px;
1604     top: 0;
1605     position: absolute;
1606     z-index: 10;
1607     opacity: 0.85;
1610 #badge-image {
1611     background-color: transparent;
1612     padding: 0;
1613     position: relative;
1614     min-width: 100px;
1615     width: 20%;
1616     display: inline-block;
1617     vertical-align: top;
1618     margin-top: 17px;
1619     margin-bottom: 20px;
1621     .expireimage {
1622         width: 100px;
1623         height: 100px;
1624         left: 0;
1625         top: 0;
1626         opacity: 0.85;
1627         position: absolute;
1628         z-index: 10;
1629     }
1631     .singlebutton {
1632         padding-top: 5px;
1633         display: block;
1635         button {
1636             margin-left: 4px;
1637         }
1638     }
1641 #badge-details {
1642     display: inline-block;
1643     width: 79%;
1646 #badge-overview dl,
1647 #badge-details dl {
1648     margin: 0;
1650     dt,
1651     dd {
1652         vertical-align: top;
1653         padding: 3px 0;
1654     }
1656     dt {
1657         clear: both;
1658         display: inline-block;
1659         width: 20%;
1660         min-width: 100px;
1661     }
1663     dd {
1664         display: inline-block;
1665         width: 79%;
1666         margin-left: 1%;
1667     }
1670 .badge-profile {
1671     vertical-align: top;
1674 .connected {
1675     @extend .text-success;
1678 .notconnected {
1679     @extend .text-danger;
1682 .connecting {
1683     @extend .text-warning;
1686 #page-badges-award .recipienttable tr td {
1687     vertical-align: top;
1690 #page-badges-award .recipienttable tr td.actions .actionbutton {
1691     margin: 0.3em 0;
1692     padding: 0.5em 0;
1693     width: 100%;
1696 #page-badges-award .recipienttable tr td.existing,
1697 #page-badges-award .recipienttable tr td.potential {
1698     width: 42%;
1701 #issued-badge-table .activatebadge {
1702     display: inline-block;
1705 .statusbox.active {
1706     background-color: $state-success-bg;
1709 .statusbox.inactive {
1710     background-color: $state-warning-bg;
1713 .statusbox {
1714     text-align: center;
1715     margin-bottom: 5px;
1716     padding: 5px;
1719 .statusbox .activatebadge {
1720     display: inline-block;
1723 .statusbox .activatebadge input[type=submit] {
1724     margin: 3px;
1727 .activatebadge {
1728     margin: 0;
1729     text-align: left;
1730     vertical-align: middle;
1733 img#persona_signin {
1734     cursor: pointer;
1737 .addcourse {
1738     float: right;
1741 .invisiblefieldset {
1742     display: inline;
1743     padding: 0;
1744     border-width: 0;
1747 /** Page header */
1748 #page-header {
1749     .logo {
1750         margin: $spacer 0;
1751         img {
1752             max-height: 75px;
1753         }
1754     }
1757 /** Navbar logo. */
1758 nav.navbar .logo img {
1759     max-height: 35px;
1762 /** Header-bar styles **/
1763 .page-context-header {
1764     // We need to be explicit about the height of the header.
1765     $pageHeaderHeight: 140px;
1767     // Do not remove these rules.
1768     overflow: hidden;
1770     .page-header-image,
1771     .page-header-headings {
1772         float: left;
1773         display: block;
1774         position: relative;
1775     }
1777     .page-header-image {
1778         margin-right: 1em;
1779         margin-bottom: 1em;
1780     }
1782     .page-header-headings,
1783     .header-button-group {
1784         position: relative;
1785         line-height: 24px;
1786         vertical-align: middle;
1787     }
1789     .header-button-group {
1790         display: block;
1791         float: left;
1793         a {
1794             position: relative;
1796             // Don't touch it unless you know exactly what you are doing.
1797             top: -0.4em;
1798         }
1799     }
1802 ul.dragdrop-keyboard-drag li {
1803     list-style-type: none;
1806 a.disabled:hover,
1807 a.disabled {
1808     text-decoration: none;
1809     cursor: default;
1810     font-style: italic;
1811     color: #808080;
1814 body.lockscroll {
1815     height: 100%;
1816     overflow: hidden;
1819 .progressbar_container {
1820     max-width: 500px;
1821     margin: 0 auto;
1824 /* IE10 only fix for calendar titling */
1825 .ie10 .yui3-calendar-header-label {
1826     display: inline-block;
1829 dd:before,
1830 dd:after {
1831     display: block;
1832     content: " ";
1835 dd:after {
1836     clear: both;
1839 // Active tabs with links should have a different
1840 // cursor to indicate they are clickable.
1841 .nav-tabs > .active > a[href],
1842 .nav-tabs > .active > a[href]:hover,
1843 .nav-tabs > .active > a[href]:focus {
1844     cursor: pointer;
1847 .inplaceeditable {
1848     &.inplaceeditingon {
1849         position: relative;
1851         .editinstructions {
1852             margin-top: -30px;
1853             font-weight: normal;
1854             margin-right: 0;
1855             margin-left: 0;
1856             left: 0;
1857             right: auto;
1858             white-space: nowrap;
1859         }
1861         input {
1862             width: 330px;
1863             vertical-align: text-bottom;
1864             margin-bottom: 0;
1865         }
1867         select {
1868             margin-bottom: 0;
1869         }
1870     }
1872     .quickediticon img {
1873         opacity: 0.2;
1874     }
1876     .quickeditlink {
1877         color: inherit;
1878         text-decoration: inherit;
1879     }
1881     &:hover .quickeditlink .quickediticon img,
1882     .quickeditlink:focus .quickediticon img {
1883         opacity: 1;
1884     }
1886     &.inplaceeditable-toggle .quickediticon {
1887         display: none;
1888     }
1890     &.inplaceeditable-autocomplete {
1891         display: block;
1892     }
1895 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
1896     margin-top: -20px;
1899 /** Chart area. */
1900 .chart-area {
1902     .chart-table-data {
1903         display: none;
1904     }
1906     .chart-table {
1907         .chart-output-htmltable caption {
1908             white-space: nowrap;
1909         }
1910         /** When accessible, we display the table only. */
1911         &.accesshide {
1912             .chart-table-expand {
1913                 display: none;
1914             }
1915             .chart-table-data {
1916                 display: block;
1917             }
1918         }
1919     }
1922 // Reset for ul.
1923 ul {
1924     padding-left: 1rem;
1927 /* YUI 2 Tree View */
1928 /*rtl:raw:
1929 .ygtvtn,
1930 .ygtvtm,
1931 .ygtvtmh,
1932 .ygtvtmhh,
1933 .ygtvtp,
1934 .ygtvtph,
1935 .ygtvtphh,
1936 .ygtvln,
1937 .ygtvlm,
1938 .ygtvlmh,
1939 .ygtvlmhh,
1940 .ygtvlp,
1941 .ygtvlph,
1942 .ygtvlphh,
1943 .ygtvdepthcell,
1944 .ygtvok,
1945 .ygtvok:hover,
1946 .ygtvcancel,
1947 .ygtvcancel:hover {
1948     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
1950 */
1952 .hover-tooltip-container {
1953     position: relative;
1955     .hover-tooltip {
1956         opacity: 0;
1957         visibility: hidden;
1958         position: absolute;
1959         /*rtl:ignore*/
1960         left: 50%;
1961         top: calc(-50% - 5px);
1962         transform: translate(-50%, -50%);
1963         background-color: #fff;
1964         border: 1px solid rgba(0, 0, 0, .2);
1965         border-radius: .3rem;
1966         box-sizing: border-box;
1967         padding: 5px;
1968         white-space: nowrap;
1969         transition: opacity 0.15s, visibility 0.15s;
1970         z-index: 1000;
1972         &:before {
1973             content: '';
1974             display: inline-block;
1975             border-left: 8px solid transparent;
1976             border-right: 8px solid transparent;
1977             border-top: 8px solid rgba(0, 0, 0, .2);
1978             position: absolute;
1979             bottom: -8px;
1980             left: calc(50% - 8px);
1981         }
1983         &:after {
1984             content: '';
1985             display: inline-block;
1986             border-left: 7px solid transparent;
1987             border-right: 7px solid transparent;
1988             border-top: 7px solid #fff;
1989             position: absolute;
1990             bottom: -6px;
1991             left: calc(50% - 7px);
1992             z-index: 2;
1993         }
1994     }
1996     &:hover {
1997         .hover-tooltip {
1998             opacity: 1;
1999             visibility: visible;
2000             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2001         }
2002     }
2005 #region-flat-nav {
2006     padding-right: 0;
2007     padding-left: 0;
2008     .nav {
2009         margin-right: $grid-gutter-width / 2;
2010         background-color: $card-bg;
2011     }
2012     @include media-breakpoint-down(sm) {
2013         .nav {
2014             margin-top: $grid-gutter-width;
2015             margin-right: 0;
2016         }
2017     }
2020 // Footer link colour was added to allow the colour of footer links to be changed,
2021 // but really in bootstrap we want the colour of links on .bg-inverse to be changed
2022 // rather than being specific to the footer. This is kept for backwards compatibility.
2023 $footer-link-color: $bg-inverse-link-color !default;
2024 #page-footer a {
2025     color: $footer-link-color;
2026     text-decoration: underline;
2027     .icon {
2028         color: $footer-link-color;
2029     }
2032 .bg-inverse a {
2033     color: $bg-inverse-link-color;
2034     text-decoration: underline;
2035     .icon {
2036         color: $bg-inverse-link-color;
2037     }
2040 .sitelink {
2041     img {
2042         width: 112px;
2043     }
2046 // Make links in a menu clickable anywhere in the row.
2047 .dropdown-item a {
2048     display: block;
2049     width: 100%;
2050     color: $body-color;
2053 .competency-tree {
2054     ul {
2055         padding-left: 1.5rem;
2056     }
2059 .sr-only-focusable {
2060     &:active,
2061     &:focus {
2062         z-index: $zindex-navbar-fixed + 1;
2063         position: fixed;
2064         background: #fff;
2065         padding: 7px;
2066         left: 0;
2067         top: 0;
2068     }
2071 [data-drag-type="move"] {
2072     cursor: move;
2075 .clickable {
2076     cursor: pointer;
2079 .overlay-icon-container {
2080     position: absolute;
2081     top: 0;
2082     left: 0;
2083     width: 100%;
2084     height: 100%;
2085     background-color: rgba(255, 255, 255, 0.6);
2087     .loading-icon {
2088         position: absolute;
2089         top: 50%;
2090         left: 50%;
2091         transform: translate(-50%, -50%);
2093         .icon {
2094             height: 30px;
2095             width: 30px;
2096             font-size: 30px;
2097         }
2098     }
2101 .open.atto_menu > .dropdown-menu {
2102     display: block;
2104 div.editor_atto_toolbar button .icon {
2105     color: $gray-700;
2107 .w-auto {
2108     width: auto;
2111 .bg-pulse-grey {
2112     animation: bg-pulse-grey 2s infinite linear;
2115 @keyframes bg-pulse-grey {
2116     0% {
2117         background-color: $gray-100;
2118     }
2119     50% {
2120         background-color: darken($gray-100, 5%);
2121     }
2122     100% {
2123         background-color: $gray-100;
2124     }
2127 @each $size, $length in $spacers {
2128     .line-height-#{$size} {
2129         line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2130     }
2133 .dir-rtl {
2134     .dir-rtl-hide {
2135         display: none;
2136     }
2139 .dir-ltr {
2140     .dir-ltr-hide {
2141         display: none;
2142     }