Merge branch 'MDL-63028-master' of git://github.com/bmbrands/moodle
[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 }
15 .context-header-settings-menu,
16 .region-main-settings-menu {
17     float: right;
18     width: auto;
19     max-width: 4em;
20     height: 2em;
21     display: block;
22     margin-top: 4px;
23 }
25 .context-header-settings-menu .dropdown-toggle > .icon,
26 #region-main-settings-menu .dropdown-toggle > .icon {
27     height: 24px;
28     font-size: 24px;
29     width: auto;
30 }
31 /** Prevent user notifications overlapping with region main settings menu */
32 #user-notifications {
33     display: block;
34     overflow: hidden;
35 }
37 /** Page layout CSS starts **/
38 .layout-option-noheader #page-header,
39 .layout-option-nonavbar #page-navbar,
40 .layout-option-nofooter #page-footer,
41 .layout-option-nocourseheader .course-content-header,
42 .layout-option-nocoursefooter .course-content-footer {
43     display: none;
44 }
46 /** Page layout CSS ends **/
48 .mdl-left {
49     text-align: left;
50 }
52 .mdl-right {
53     text-align: right;
54 }
56 /*rtl:ignore*/
57 .text-ltr {
58     direction: ltr !important; /* stylelint-disable-line declaration-no-important */
59 }
61 #add,
62 #remove,
63 .centerpara,
64 .mdl-align {
65     text-align: center;
66 }
68 a.dimmed,
69 a.dimmed:link,
70 a.dimmed:visited,
71 a.dimmed_text,
72 a.dimmed_text:link,
73 a.dimmed_text:visited,
74 .dimmed_text,
75 .dimmed_text a,
76 .dimmed_text a:link,
77 .dimmed_text a:visited,
78 .usersuspended,
79 .usersuspended a,
80 .usersuspended a:link,
81 .usersuspended a:visited,
82 .dimmed_category,
83 .dimmed_category a {
84     @extend .text-muted;
85 }
87 .unlist,
88 .unlist li,
89 .inline-list,
90 .inline-list li,
91 .block .list,
92 .block .list li,
93 .section li.activity,
94 .section li.movehere,
95 .tabtree li {
96     list-style: none;
97     margin: 0;
98     padding: 0;
99 }
101 .inline,
102 .inline-list li {
103     display: inline;
106 .notifytiny {
107     font-size: $font-size-xs;
110 .notifytiny li,
111 .notifytiny td {
112     font-size: 100%;
115 .red,
116 .notifyproblem {
117     @extend .text-warning;
120 .green,
121 .notifysuccess {
122     @extend .text-success;
125 .highlight {
126     @extend .text-info;
129 .fitem.advanced .text-info {
130     font-weight: bold;
133 .reportlink {
134     text-align: right;
137 a.autolink.glossary:hover {
138     cursor: help;
140 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
141 .collapsibleregioncaption {
142     white-space: nowrap;
143     min-height: $line-height-base * $font-size-base;
146 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
147     cursor: pointer;
150 .collapsibleregioncaption img {
151     vertical-align: middle;
154 .jsenabled .hiddenifjs {
155     display: none;
158 .visibleifjs {
159     display: none;
162 .jsenabled .visibleifjs {
163     display: inline;
166 .jsenabled .collapsibleregion {
167     overflow: hidden;
168     box-sizing: content-box;
171 .jsenabled .collapsed .collapsibleregioninner {
172     visibility: hidden;
175 .collapsible-actions {
176     display: none;
177     text-align: right;
180 .jsenabled .collapsible-actions {
181     display: block;
184 .collapsible-actions .collapseexpand {
185     padding-left: 20px;
186     background: url([[pix:t/collapsed]]) 2px center no-repeat;
188 /*rtl:raw:
189 .collapsible-actions .collapseexpand {
190     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
192 */
193 .collapsible-actions .collapse-all {
194     background-image: url([[pix:t/expanded]]);
197 .yui-overlay .yui-widget-bd {
198     background-color: #ffee69;
199     border: 1px solid #a6982b;
200     border-top-color: #d4c237;
201     color: #000;
202     left: 0;
203     padding: 2px 5px;
204     position: relative;
205     top: 0;
206     z-index: 1;
209 .clearer {
210     background: transparent;
211     border-width: 0;
212     clear: both;
213     display: block;
214     height: 1px;
215     margin: 0;
216     padding: 0;
219 .bold,
220 .warning,
221 .errorbox .title,
222 .pagingbar .title,
223 .pagingbar .thispage {
224     font-weight: bold;
227 img.userpicture {
228     margin-right: 0.5rem;
231 img.resize {
232     height: 1em;
233     width: 1em;
236 .action-menu .dropdown-toggle {
237     text-decoration: none;
240 .action-menu {
241     white-space: nowrap;
244 .block img.resize {
245     height: 0.9em;
246     width: 0.8em;
248 /* Icon styles */
249 img.activityicon {
250     height: 24px;
251     width: 24px;
252     vertical-align: middle;
255 .headermain {
256     font-weight: bold;
259 #maincontent {
260     display: block;
261     height: 1px;
262     overflow: hidden;
265 img.uihint {
266     cursor: help;
269 #addmembersform table {
270     margin-left: auto;
271     margin-right: auto;
274 table.flexible .emptyrow {
275     display: none;
278 form.popupform,
279 form.popupform div {
280     display: inline;
283 .arrow_button input {
284     overflow: hidden;
286 .no-overflow {
287     overflow: auto;
290 // Minimum height required for a menu in a table inside a scrollable div.
291 .no-overflow > .generaltable {
292     margin-bottom: 0;
293     min-height: 10em;
295 // Accessibility features
297 // Accessibility: text 'seen' by screen readers but not visual users.
298 .accesshide {
299     @include sr-only();
302 span.hide,
303 div.hide,
304 .hidden {
305     display: none;
307 // Accessibility: Skip block link, for keyboard-only users.
308 a.skip-block,
309 a.skip {
310     position: absolute;
311     top: -1000em;
312     font-size: 0.85em;
313     text-decoration: none;
316 a.skip-block:focus,
317 a.skip-block:active,
318 a.skip:focus,
319 a.skip:active {
320     position: static;
321     display: block;
324 .skip-block-to {
325     display: block;
326     height: 1px;
327     overflow: hidden;
329 // Blogs
330 .addbloglink {
331     text-align: center;
334 .blog_entry .audience {
335     text-align: right;
336     padding-right: 4px;
339 .blog_entry .tags {
340     margin-top: 15px;
343 .blog_entry .content {
344     margin-left: 43px;
346 // Group
348 #doc-contents h1 {
349     margin: 1em 0 0 0;
352 #doc-contents ul {
353     margin: 0;
354     padding: 0;
355     width: 90%;
358 #doc-contents ul li {
359     list-style-type: none;
362 .groupmanagementtable td {
363     vertical-align: top;
366 .groupmanagementtable #existingcell,
367 .groupmanagementtable #potentialcell {
368     width: 42%;
371 .groupmanagementtable #buttonscell {
372     width: 16%;
375 .groupmanagementtable #buttonscell p.arrow_button input {
376     width: auto;
377     min-width: 80%;
378     margin: 0 auto;
381 .groupmanagementtable #removeselect_wrapper,
382 .groupmanagementtable #addselect_wrapper {
383     width: 100%;
386 .groupmanagementtable #removeselect_wrapper label,
387 .groupmanagementtable #addselect_wrapper label {
388     font-weight: normal;
391 #group-usersummary {
392     width: 14em;
395 .groupselector {
396     margin-top: 3px;
397     margin-bottom: 3px;
398     display: inline-block;
401 .groupselector label {
402     display: inline-block;
405 // Login
406 .login-page {
407     [name="username"] {
408         margin-bottom: -1px;
409         border-bottom-right-radius: 0;
410         border-bottom-left-radius: 0;
411     }
413     [type="password"] {
414         margin-bottom: 10px;
415         border-top-left-radius: 0;
416         border-top-right-radius: 0;
417     }
420 // Notes
421 .notepost {
422     margin-bottom: 1em;
425 .notepost .userpicture {
426     float: left;
427     margin-right: 5px;
430 .notepost .content,
431 .notepost .footer {
432     clear: both;
435 .notesgroup {
436     margin-left: 20px;
439 // My Moodle
440 .path-my .coursebox {
441     margin: $spacer-y 0;
442     padding: 0;
444     .overview {
445         margin: 15px 30px 10px 30px;
446     }
449 .path-my .coursebox .info {
450     float: none;
451     margin: 0;
454 // Modules
455 .mod_introbox {
456     padding: 10px;
459 table.mod_index {
460     width: 100%;
463 // Comments
464 .comment-ctrl {
465     font-size: 12px;
466     display: none;
467     margin: 0;
468     padding: 0;
471 .comment-ctrl h5 {
472     margin: 0;
473     padding: 5px;
476 .comment-area {
477     max-width: 400px;
478     padding: 5px;
481 .comment-area textarea {
482     width: 100%;
483     overflow: auto;
485     &.fullwidth {
486         -webkit-box-sizing: border-box;
487         -moz-box-sizing: border-box;
488         box-sizing: border-box;
489     }
492 .comment-area .fd {
493     text-align: right;
496 .comment-meta span {
497     color: gray;
500 .comment-link img {
501     vertical-align: text-bottom;
504 .comment-list {
505     font-size: 11px;
506     overflow: auto;
507     list-style: none;
508     padding: 0;
509     margin: 0;
512 .comment-list li {
513     margin: 2px;
514     list-style: none;
515     margin-bottom: 5px;
516     clear: both;
517     padding: .3em;
518     position: relative;
521 .comment-list li.first {
522     display: none;
525 .comment-paging {
526     text-align: center;
529 .comment-paging .pageno {
530     padding: 2px;
533 .comment-paging .curpage {
534     border: 1px solid #ccc;
537 .comment-message .picture {
538     width: 20px;
539     float: left;
542 .comment-message .text {
543     margin: 0;
544     padding: 0;
547 .comment-message .text p {
548     padding: 0;
549     margin: 0 18px 0 0;
552 .comment-delete {
553     position: absolute;
554     top: 0;
555     right: 0;
556     margin: .3em;
559 .comment-report-selectall {
560     display: none;
563 .comment-link {
564     display: none;
567 .jsenabled .comment-link {
568     display: block;
571 .jsenabled .showcommentsnonjs {
572     display: none;
575 .jsenabled .comment-report-selectall {
576     display: inline;
578 /**
579 * Completion progress report
580 */
581 .completion-expired {
582     @extend .text-warning;
585 .completion-expected {
586     font-size: $font-size-xs;
589 .completion-sortchoice,
590 .completion-identifyfield {
591     font-size: $font-size-xs;
592     vertical-align: bottom;
595 .completion-progresscell {
596     text-align: right;
599 .completion-expired .completion-expected {
600     font-weight: bold;
602 /**
603 * Tags
604 */
605 img.user-image {
606     height: 100px;
607     width: 100px;
610 #tag-search-box {
611     text-align: center;
612     margin: 10px auto;
615 .path-tag .tag-index-items .tagarea {
616     border: 1px solid #e3e3e3;
617     border-radius: 4px;
618     padding: 10px;
619     margin-top: 10px;
622 .path-tag .tag-index-items .tagarea h3 {
623     display: block;
624     padding: 3px 0 10px 0;
625     margin: 0;
626     font-size: 1.1em;
627     font-weight: bold;
628     line-height: 20px;
629     color: #999;
630     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
631     text-transform: uppercase;
632     word-wrap: break-word;
633     border-bottom: solid 1px #e3e3e3;
634     margin-bottom: 10px;
637 .path-tag .tagarea .controls,
638 .path-tag .tagarea .taggeditems {
639     @include clearfix();
642 .path-tag .tagarea .controls,
643 .path-tag .tag-backtoallitems {
644     text-align: center;
647 .path-tag .tagarea .controls .gotopage.nextpage {
648     float: right;
651 .path-tag .tagarea .controls .gotopage.prevpage {
652     float: left;
655 .path-tag .tagarea .controls .exclusivemode {
656     display: inline-block;
659 .path-tag .tagarea .controls.controls-bottom {
660     margin-top: 5px;
663 .path-tag .tagarea .controls .gotopage.nextpage::after {
664     padding-right: 5px;
665     padding-left: 5px;
666     content: "»";
669 .path-tag .tagarea .controls .gotopage.prevpage::before {
670     padding-right: 5px;
671     padding-left: 5px;
672     content: "«";
675 span.flagged-tag,
676 tr.flagged-tag,
677 span.flagged-tag a,
678 tr.flagged-tag a {
679     @extend .text-warning;
682 .tag-management-table td,
683 .tag-management-table th {
684     vertical-align: middle;
685     padding: 4px;
688 .tag-management-table .inplaceeditable.inplaceeditingon input {
689     width: 150px;
692 .path-admin-tag .addstandardtags {
693     float: right;
695     img {
696         margin: 0 5px;
697     }
700 .path-tag .tag-relatedtags {
701     padding-top: 10px;
704 .path-tag .tag-management-box {
705     text-align: right;
708 .path-tag .tag-index-toc {
709     padding: 10px;
710     text-align: center;
713 .path-tag .tag-index-toc li,
714 .path-tag .tag-management-box li {
715     margin-left: 5px;
716     margin-right: 5px;
719 .path-tag .tag-management-box li a.edittag {
720     background-image: url([[pix:moodle|i/settings]]);
723 .path-tag .tag-management-box li a.flagasinappropriate {
724     background-image: url([[pix:moodle|i/flagged]]);
727 .path-tag .tag-management-box li a.removefrommyinterests {
728     background-image: url([[pix:moodle|t/delete]]);
731 .path-tag .tag-management-box li a.addtomyinterests {
732     background-image: url([[pix:moodle|t/add]]);
735 .path-tag .tag-management-box li a {
736     background-repeat: no-repeat;
737     background-position: left;
738     padding-left: 17px;
741 .tag_feed.media-list .media .itemimage {
742     float: left;
745 .tag_feed.media-list .media .itemimage img {
746     height: 35px;
747     width: 35px;
750 .tag_feed.media-list .media .media-body {
751     padding-right: 10px;
752     padding-left: 10px;
755 .tag_feed .media .muted a {
756     @extend .text-muted;
759 .tag_cloud {
760     text-align: center;
763 .tag_cloud .inline-list li {
764     padding: 0 0.2em;
767 .tag_cloud .tag_overflow {
768     margin-top: 1em;
769     font-style: italic;
772 .tag_cloud .s20 {
773     font-size: 2.7em;
776 .tag_cloud .s19 {
777     font-size: 2.6em;
780 .tag_cloud .s18 {
781     font-size: 2.5em;
784 .tag_cloud .s17 {
785     font-size: 2.4em;
788 .tag_cloud .s16 {
789     font-size: 2.3em;
792 .tag_cloud .s15 {
793     font-size: 2.2em;
796 .tag_cloud .s14 {
797     font-size: 2.1em;
800 .tag_cloud .s13 {
801     font-size: 2em;
804 .tag_cloud .s12 {
805     font-size: 1.9em;
808 .tag_cloud .s11 {
809     font-size: 1.8em;
812 .tag_cloud .s10 {
813     font-size: 1.7em;
816 .tag_cloud .s9 {
817     font-size: 1.6em;
820 .tag_cloud .s8 {
821     font-size: 1.5em;
824 .tag_cloud .s7 {
825     font-size: 1.4em;
828 .tag_cloud .s6 {
829     font-size: 1.3em;
832 .tag_cloud .s5 {
833     font-size: 1.2em;
836 .tag_cloud .s4 {
837     font-size: 1.1em;
840 .tag_cloud .s3 {
841     font-size: 1em;
844 .tag_cloud .s2 {
845     font-size: 0.9em;
848 .tag_cloud .s1 {
849     font-size: 0.8em;
852 .tag_cloud .s0 {
853     font-size: 0.7em;
856 .tag_list ul {
857     display: inline;
860 .tag_list.hideoverlimit .overlimit {
861     display: none;
864 .tag_list .tagmorelink {
865     display: none;
868 .tag_list.hideoverlimit .tagmorelink {
869     display: inline;
872 .tag_list.hideoverlimit .taglesslink {
873     display: none;
876 /**
877 * Web Service
878 */
879 #webservice-doc-generator td {
880     text-align: left;
881     border: 0 solid black;
884 /**
885 * Enrol
886 */
887 .userenrolment {
888     width: 100%;
889     border-collapse: collapse;
892 .userenrolment tr {
893     vertical-align: top;
896 .userenrolment td {
897     padding: 0;
898     height: 41px;
901 .userenrolment .subfield {
902     margin-right: 5px;
905 .userenrolment .col_userdetails .subfield {
906     margin-left: 40px;
909 .userenrolment .col_userdetails .subfield_picture {
910     float: left;
911     margin-left: 0;
914 .userenrolment .col_lastseen {
915     width: 150px;
918 .userenrolment .col_role {
919     width: 262px;
922 .userenrolment .col_role .roles,
923 .userenrolment .col_group .groups {
924     margin-right: 30px;
927 .userenrolment .col_role .role {
928     float: left;
929     padding: 0 3px 3px;
930     margin: 0 3px 3px;
931     white-space: nowrap;
934 .userenrolment .col_group .group {
935     float: left;
936     padding: 3px;
937     margin: 3px;
938     white-space: nowrap;
941 .userenrolment .col_role .role a,
942 .userenrolment .col_group .group a {
943     margin-left: 3px;
944     cursor: pointer;
947 .userenrolment .col_role .addrole,
948 .userenrolment .col_group .addgroup {
949     float: right;
950     padding: 3px;
951     margin: 3px;
953     > a:hover {
954         border-bottom: 1px solid #666;
955     }
958 .userenrolment .col_role .addrole img,
959 .userenrolment .col_group .addgroup img {
960     vertical-align: baseline;
963 .userenrolment .hasAllRoles .col_role .addrole {
964     display: none;
967 .userenrolment .col_enrol .enrolment {
968     float: left;
969     padding: 0 3px 3px;
970     margin: 0 3px 3px;
973 .userenrolment .col_enrol .enrolment a {
974     float: right;
975     margin-left: 3px;
978 #page-enrol-users {
979     .enrol_user_buttons {
980         text-align: right;
982     }
984     #filterform {
985         @extend .card;
986         @extend .card-block;
987     }
990 #page-enrol-users .enrol-users-page-action input {
991     margin-left: 0;
994 .corelightbox {
995     background-color: #ccc;
996     position: absolute;
997     top: 0;
998     left: 0;
999     width: 100%;
1000     height: 100%;
1001     text-align: center;
1004 .corelightbox img {
1005     position: fixed;
1006     top: 50%;
1007     left: 50%;
1010 .mod-indent-outer {
1011     display: table;
1014 .mod-indent {
1015     display: table-cell;
1018 .label .mod-indent {
1019     float: left;
1020     padding-top: 20px;
1022 $mod-indent-size: 30px;
1023 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1025 @for $i from 1 through 16 {
1026     $width: ($i * $mod-indent-size);
1028     .mod-indent-#{$i} {
1029         width: $width;
1030     }
1033 .mod-indent-huge {
1034     width: (16 * $mod-indent-size);
1037 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1038 .resourcecontent .mediaplugin_mp3 object {
1039     height: 25px;
1040     width: 600px;
1043 .resourcecontent audio.mediaplugin_html5audio {
1044     width: 600px;
1046 /** Large resource images should avoid hidden overflow **/
1047 .resourceimage {
1048     max-width: 100%;
1050 /* Audio player size in 'inline' mode (can only change width, as above) */
1051 .mediaplugin_mp3 object {
1052     height: 15px;
1053     width: 300px;
1056 audio.mediaplugin_html5audio {
1057     width: 300px;
1059 /* TinyMCE moodle media preview frame should not have padding */
1060 .core_media_preview.pagelayout-embedded #content {
1061     padding: 0;
1064 .core_media_preview.pagelayout-embedded #maincontent {
1065     height: 0;
1068 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1069     padding: 0;
1070     margin: 0;
1071     min-width: 0;
1072     background: none;
1075 .path-rating .ratingtable {
1076     width: 100%;
1077     margin-bottom: 1em;
1080 .path-rating .ratingtable th.rating {
1081     width: 100%;
1084 .path-rating .ratingtable td.rating,
1085 .path-rating .ratingtable td.time {
1086     white-space: nowrap;
1087     text-align: center;
1091 .initialbarlabel {
1092     display: inline-block;
1093     width: 6em;
1094     float: left;
1095     overflow: hidden;
1096     text-overflow: ellipsis;
1097     white-space: nowrap;
1101 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1102 .moodle-dialogue-base .moodle-dialogue-lightbox {
1103     background-color: $gray;
1106 // Prevent adding backdrops to popups in popups.
1107 .pagelayout-popup {
1108     .moodle-dialogue-base {
1109         .moodle-dialogue-lightbox {
1110             background-color: transparent;
1111         }
1112         .moodle-dialogue {
1113             box-shadow: $popover-box-shadow;
1114         }
1115     }
1118 .moodle-dialogue-base .hidden,
1119 .moodle-dialogue-base .moodle-dialogue-hidden {
1120     display: none;
1123 .no-scrolling {
1124     overflow: hidden;
1127 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1128     left: 0;
1129     top: 0;
1130     right: 0;
1131     bottom: -50px;
1132     position: fixed;
1135 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1136     overflow: auto;
1139 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1140     width: 28px;
1141     height: 16px;
1142     background-size: 100%;
1145 .moodle-dialogue-base .moodle-dialogue-wrap {
1146     background-color: #fff;
1147     border: 1px solid #ccc;
1150 // Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1151 // it for a reason (conflicts with jquery .show()).
1152 .modal.show {
1153     display: block;
1156 .moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content {
1157     @extend .modal-content;
1160 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1161     @extend .modal-header;
1164 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1165     // Undo some YUI damage.
1166     min-height: 3rem;
1167     color: initial;
1168     background: initial;
1169     font-size: 1.5rem;
1170     line-height: 1.5;
1173 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1174     @extend .modal-title;
1175     font-size: 1.5rem;
1178 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1179     /*rtl:raw:
1180         left: 0;
1181         right: auto;
1182     */
1183     padding: $spacer;
1186 .moodle-dialogue-base .closebutton {
1187     @extend .close;
1188     box-shadow: none;
1189     &::after {
1190         content: "×";
1191     }
1194 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1195     padding: 0.5rem;
1198 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1199     overflow: auto;
1200     position: absolute;
1201     top: 0;
1202     bottom: 50px;
1203     left: 0;
1204     right: 0;
1205     margin: 0;
1206     border: 0;
1209 .moodle-dialogue-exception .moodle-exception-param label {
1210     font-weight: bold;
1213 .moodle-dialogue-exception .param-stacktrace label {
1214     background-color: #eee;
1215     border: 1px solid #ccc;
1216     border-bottom-width: 0;
1219 .moodle-dialogue-exception .param-stacktrace pre {
1220     border: 1px solid #ccc;
1221     background-color: #fff;
1224 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1225     color: navy;
1226     font-size: $font-size-sm;
1229 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1230     @extend .text-warning;
1231     font-size: $font-size-sm;
1234 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1235     color: #333;
1236     font-size: 90%;
1237     border-bottom: 1px solid #eee;
1240 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1241     @extend .modal-footer;
1244 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1245     display: none;
1248 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1249     // Undo some YUI damage.
1250     background: initial;
1253 .moodle-dialogue-confirm .confirmation-message {
1254     margin: 0.5rem 0;
1257 .moodle-dialogue-confirm .confirmation-dialogue input {
1258     min-width: 80px;
1261 .moodle-dialogue-exception .moodle-exception-message {
1262     margin: 1em;
1265 .moodle-dialogue-exception .moodle-exception-param {
1266     margin-bottom: 0.5em;
1269 .moodle-dialogue-exception .moodle-exception-param label {
1270     width: 150px;
1273 .moodle-dialogue-exception .param-stacktrace label {
1274     display: block;
1275     margin: 0;
1276     padding: 4px 1em;
1279 .moodle-dialogue-exception .param-stacktrace pre {
1280     display: block;
1281     height: 200px;
1282     overflow: auto;
1285 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1286     display: inline-block;
1287     margin: 4px 0;
1290 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1291     display: inline-block;
1292     width: 50px;
1293     margin: 4px 1em;
1296 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1297     padding-left: 25px;
1298     margin-bottom: 4px;
1299     padding-bottom: 4px;
1302 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1303     opacity: 0.75;
1304     width: 100%;
1305     height: 100%;
1306     top: 0;
1307     left: 0;
1308     background-color: white;
1309     text-align: center;
1310     padding: 10% 0;
1312 /* Apply a default max-height on tooltip text */
1313 .moodle-dialogue .tooltiptext {
1314     max-height: 300px;
1317 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1318     z-index: 3001;
1320     .moodle-dialogue-bd {
1321         overflow: auto;
1322     }
1325 /**
1326  * Chooser Dialogues (moodle-core-chooserdialogue)
1327  *
1328  * This CSS belong to the chooser dialogue which should work both with, and
1329  * without javascript enabled
1330  */
1331 /* Hide the dialog and it's title */
1332 .chooserdialoguebody,
1333 .choosertitle {
1334     display: none;
1337 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1338     margin: 0;
1341 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1342     padding: 0;
1343     background: #f2f2f2;
1345     @include border-bottom-radius(10px);
1347 /* Center the submit buttons within the area */
1348 .choosercontainer #chooseform .submitbuttons {
1349     padding: 0.7em 0;
1350     text-align: right;
1352 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1354 @media (max-height: 639px) {
1355     .ios .choosercontainer #chooseform .submitbuttons {
1356         padding: 45px 0;
1357     }
1360 .choosercontainer #chooseform .submitbuttons input {
1361     min-width: 100px;
1362     margin: 0 0.5em;
1364 /* Various settings for the options area */
1365 .choosercontainer #chooseform .options {
1366     position: relative;
1367     border-bottom: 1px solid #bbb;
1369 /* Only set these options if we're showing the js container */
1370 .jschooser .choosercontainer #chooseform .alloptions {
1371     overflow-x: hidden;
1372     overflow-y: auto;
1373     max-width: 240px;
1375     .option {
1376         input[type=radio] {
1377             display: inline-block;
1378         }
1380         .typename {
1381             display: inline-block;
1382             width: 55%;
1383         }
1384     }
1386 /* Settings for option rows and option subtypes */
1387 .choosercontainer #chooseform .moduletypetitle,
1388 .choosercontainer #chooseform .option,
1389 .choosercontainer #chooseform .nonoption {
1390     margin-bottom: 0;
1391     padding: 0 1.6em 0 1.6em;
1394 .choosercontainer #chooseform .moduletypetitle {
1395     text-transform: uppercase;
1396     padding-top: 1.2em;
1397     padding-bottom: 0.4em;
1400 .choosercontainer #chooseform .option .typename,
1401 .choosercontainer #chooseform .nonoption .typename {
1402     padding: 0 0 0 0.5em;
1405 .choosercontainer #chooseform .modicon + .typename {
1406     padding-left: 0;
1409 .choosercontainer #chooseform .option input[type=radio],
1410 .choosercontainer #chooseform .option span.typename {
1411     vertical-align: middle;
1414 .choosercontainer #chooseform .option label {
1415     display: block;
1416     margin: 0;
1417     padding: ($spacer / 2) 0;
1418     border-bottom: 1px solid #fff;
1421 .choosercontainer #chooseform .option .icon {
1422     margin: 0;
1423     padding: 0 $spacer;
1426 .choosercontainer #chooseform .nonoption {
1427     padding-left: 2.7em;
1428     padding-top: 0.3em;
1429     padding-bottom: 0.1em;
1432 .choosercontainer #chooseform .subtype {
1433     margin-bottom: 0;
1434     padding: 0 1.6em 0 3.2em;
1437 .choosercontainer #chooseform .subtype .typename {
1438     margin: 0 0 0 0.2em;
1440 /* The instruction/help area */
1441 .jschooser .choosercontainer #chooseform .instruction,
1442 .jschooser .choosercontainer #chooseform .typesummary {
1443     display: none;
1444     position: absolute;
1445     top: 0;
1446     right: 0;
1447     bottom: 0;
1448     left: 240px;
1449     margin: 0;
1450     padding: 1.6em;
1451     background-color: #fff;
1452     overflow-x: hidden;
1453     overflow-y: auto;
1454     line-height: 2em;
1456 /* Selected option settings */
1457 .jschooser .choosercontainer #chooseform .instruction,
1458 .choosercontainer #chooseform .selected .typesummary {
1459     display: block;
1462 .choosercontainer #chooseform .selected {
1463     background-color: #fff;
1464     margin-top: -1px;
1465     padding-top: 1px;
1468 .chooserdialogue-course-modchooser .modicon .icon {
1469     width: 24px;
1470     height: 24px;
1471     font-size: 24px;
1474 @include media-breakpoint-down(xs) {
1475     .jsenabled .choosercontainer #chooseform .alloptions {
1476         max-width: 100%;
1477     }
1479     .jsenabled .choosercontainer #chooseform .instruction,
1480     .jsenabled .choosercontainer #chooseform .typesummary {
1481         position: static;
1482     }
1485 /* Form element: listing */
1486 .formlistingradio {
1487     padding-bottom: 25px;
1488     padding-right: 10px;
1491 .formlistinginputradio {
1492     float: left;
1495 .formlistingmain {
1496     min-height: 225px;
1499 .formlisting {
1500     position: relative;
1501     margin: 15px 0;
1502     padding: 1px 19px 14px;
1503     background-color: white;
1504     border: 1px solid #ddd;
1506     @include border-radius(4px);
1509 .formlistingmore {
1510     position: absolute;
1511     cursor: pointer;
1512     bottom: -1px;
1513     right: -1px;
1514     padding: 3px 7px;
1515     font-size: 12px;
1516     font-weight: bold;
1517     background-color: whitesmoke;
1518     border: 1px solid #ddd;
1519     color: #9da0a4;
1521     @include border-radius(4px 0 4px 0);
1524 .formlistingall {
1525     margin: 15px 0;
1526     padding: 0;
1528     @include border-radius(4px);
1531 .formlistingrow {
1532     cursor: pointer;
1533     border-bottom: 1px solid;
1534     border-color: #e1e1e8;
1535     border-left: 1px solid #e1e1e8;
1536     border-right: 1px solid #e1e1e8;
1537     background-color: #f7f7f9;
1539     @include border-radius(0 0 4px 4px);
1540     padding: 6px;
1541     top: 50%;
1542     left: 50%;
1543     min-height: 34px;
1544     float: left;
1545     width: 150px;
1548 body.jsenabled .formlistingradio {
1549     display: none;
1552 body.jsenabled .formlisting {
1553     display: block;
1556 /* Badges styles */
1557 table.collection {
1558     @extend .table;
1559     @extend .table-bordered;
1560     @extend .table-striped;
1563 a.criteria-action {
1564     padding: 0 3px;
1565     float: right;
1568 div.criteria-description {
1569     padding: 10px 15px;
1570     margin: 5px 0;
1571     background: none repeat scroll 0 0 #f9f9f9;
1572     border: 1px solid #eee;
1575 ul.badges {
1576     margin: 0;
1577     list-style: none;
1580 .badges li {
1581     position: relative;
1582     display: inline-block;
1583     padding-top: 1em;
1584     text-align: center;
1585     vertical-align: top;
1586     width: 150px;
1589 .badges li .badge-name {
1590     display: block;
1591     padding: 5px;
1594 .badges li > img {
1595     position: absolute;
1598 .badges li .badge-image {
1599     width: 100px;
1600     height: 100px;
1601     left: 10px;
1602     top: 0;
1603     z-index: 1;
1606 .badges li .badge-actions {
1607     position: relative;
1610 .badges li .expireimage {
1611     width: 100px;
1612     height: 100px;
1613     left: 25px;
1614     top: 0;
1615     position: absolute;
1616     z-index: 10;
1617     opacity: 0.85;
1620 #badge-image {
1621     background-color: transparent;
1622     padding: 0;
1623     position: relative;
1624     min-width: 100px;
1625     width: 20%;
1626     display: inline-block;
1627     vertical-align: top;
1628     margin-top: 17px;
1629     margin-bottom: 20px;
1631     .expireimage {
1632         width: 100px;
1633         height: 100px;
1634         left: 0;
1635         top: 0;
1636         opacity: 0.85;
1637         position: absolute;
1638         z-index: 10;
1639     }
1641     .singlebutton {
1642         padding-top: 5px;
1643         display: block;
1645         button {
1646             margin-left: 4px;
1647         }
1648     }
1651 #badge-details {
1652     display: inline-block;
1653     width: 79%;
1656 #badge-overview dl,
1657 #badge-details dl {
1658     margin: 0;
1660     dt,
1661     dd {
1662         vertical-align: top;
1663         padding: 3px 0;
1664     }
1666     dt {
1667         clear: both;
1668         display: inline-block;
1669         width: 20%;
1670         min-width: 100px;
1671     }
1673     dd {
1674         display: inline-block;
1675         width: 79%;
1676         margin-left: 1%;
1677     }
1680 .badge-profile {
1681     vertical-align: top;
1684 .connected {
1685     @extend .text-success;
1688 .notconnected {
1689     @extend .text-danger;
1692 .connecting {
1693     @extend .text-warning;
1696 #page-badges-award .recipienttable tr td {
1697     vertical-align: top;
1700 #page-badges-award .recipienttable tr td.actions .actionbutton {
1701     margin: 0.3em 0;
1702     padding: 0.5em 0;
1703     width: 100%;
1706 #page-badges-award .recipienttable tr td.existing,
1707 #page-badges-award .recipienttable tr td.potential {
1708     width: 42%;
1711 #issued-badge-table .activatebadge {
1712     display: inline-block;
1715 .statusbox.active {
1716     background-color: $state-success-bg;
1719 .statusbox.inactive {
1720     background-color: $state-warning-bg;
1723 .statusbox {
1724     text-align: center;
1725     margin-bottom: 5px;
1726     padding: 5px;
1729 .statusbox .activatebadge {
1730     display: inline-block;
1733 .statusbox .activatebadge input[type=submit] {
1734     margin: 3px;
1737 .activatebadge {
1738     margin: 0;
1739     text-align: left;
1740     vertical-align: middle;
1743 img#persona_signin {
1744     cursor: pointer;
1747 .addcourse {
1748     float: right;
1751 .invisiblefieldset {
1752     display: inline;
1753     padding: 0;
1754     border-width: 0;
1757 /** Page header */
1758 #page-header {
1759     .logo {
1760         margin: $spacer 0;
1761         img {
1762             max-height: 75px;
1763         }
1764     }
1767 /** Navbar logo. */
1768 nav.navbar .logo img {
1769     max-height: 35px;
1772 /** Header-bar styles **/
1773 .page-context-header {
1774     // We need to be explicit about the height of the header.
1775     $pageHeaderHeight: 140px;
1777     // Do not remove these rules.
1778     overflow: hidden;
1780     .page-header-image,
1781     .page-header-headings {
1782         float: left;
1783         display: block;
1784         position: relative;
1785     }
1787     .page-header-image {
1788         margin-right: 1em;
1789         margin-bottom: 1em;
1790     }
1792     .page-header-headings,
1793     .header-button-group {
1794         position: relative;
1795         line-height: 24px;
1796         vertical-align: middle;
1797     }
1799     .header-button-group {
1800         display: block;
1801         float: left;
1803         a {
1804             position: relative;
1806             // Don't touch it unless you know exactly what you are doing.
1807             top: -0.4em;
1808         }
1809     }
1812 ul.dragdrop-keyboard-drag li {
1813     list-style-type: none;
1816 a.disabled:hover,
1817 a.disabled {
1818     text-decoration: none;
1819     cursor: default;
1820     font-style: italic;
1821     color: #808080;
1824 body.lockscroll {
1825     height: 100%;
1826     overflow: hidden;
1829 .progressbar_container {
1830     max-width: 500px;
1831     margin: 0 auto;
1834 /* IE10 only fix for calendar titling */
1835 .ie10 .yui3-calendar-header-label {
1836     display: inline-block;
1839 dd:before,
1840 dd:after {
1841     display: block;
1842     content: " ";
1845 dd:after {
1846     clear: both;
1849 // Active tabs with links should have a different
1850 // cursor to indicate they are clickable.
1851 .nav-tabs > .active > a[href],
1852 .nav-tabs > .active > a[href]:hover,
1853 .nav-tabs > .active > a[href]:focus {
1854     cursor: pointer;
1857 .inplaceeditable {
1858     &.inplaceeditingon {
1859         position: relative;
1861         .editinstructions {
1862             margin-top: -30px;
1863             font-weight: normal;
1864             margin-right: 0;
1865             margin-left: 0;
1866             left: 0;
1867             right: auto;
1868             white-space: nowrap;
1869         }
1871         input {
1872             width: 330px;
1873             vertical-align: text-bottom;
1874             margin-bottom: 0;
1875         }
1877         select {
1878             margin-bottom: 0;
1879         }
1880     }
1882     .quickediticon img {
1883         opacity: 0.2;
1884     }
1886     .quickeditlink {
1887         color: inherit;
1888         text-decoration: inherit;
1889     }
1891     &:hover .quickeditlink .quickediticon img,
1892     .quickeditlink:focus .quickediticon img {
1893         opacity: 1;
1894     }
1896     &.inplaceeditable-toggle .quickediticon {
1897         display: none;
1898     }
1900     &.inplaceeditable-autocomplete {
1901         display: block;
1902     }
1905 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
1906     margin-top: -20px;
1909 /** Chart area. */
1910 .chart-area {
1912     .chart-table-data {
1913         display: none;
1914     }
1916     .chart-table {
1917         .chart-output-htmltable caption {
1918             white-space: nowrap;
1919         }
1920         /** When accessible, we display the table only. */
1921         &.accesshide {
1922             .chart-table-expand {
1923                 display: none;
1924             }
1925             .chart-table-data {
1926                 display: block;
1927             }
1928         }
1929     }
1932 // Reset for ul.
1933 ul {
1934     padding-left: 1rem;
1937 /* YUI 2 Tree View */
1938 /*rtl:raw:
1939 .ygtvtn,
1940 .ygtvtm,
1941 .ygtvtmh,
1942 .ygtvtmhh,
1943 .ygtvtp,
1944 .ygtvtph,
1945 .ygtvtphh,
1946 .ygtvln,
1947 .ygtvlm,
1948 .ygtvlmh,
1949 .ygtvlmhh,
1950 .ygtvlp,
1951 .ygtvlph,
1952 .ygtvlphh,
1953 .ygtvdepthcell,
1954 .ygtvok,
1955 .ygtvok:hover,
1956 .ygtvcancel,
1957 .ygtvcancel:hover {
1958     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
1960 */
1962 .hover-tooltip-container {
1963     position: relative;
1965     .hover-tooltip {
1966         opacity: 0;
1967         visibility: hidden;
1968         position: absolute;
1969         /*rtl:ignore*/
1970         left: 50%;
1971         top: calc(-50% - 5px);
1972         transform: translate(-50%, -50%);
1973         background-color: #fff;
1974         border: 1px solid rgba(0, 0, 0, .2);
1975         border-radius: .3rem;
1976         box-sizing: border-box;
1977         padding: 5px;
1978         white-space: nowrap;
1979         transition: opacity 0.15s, visibility 0.15s;
1980         z-index: 1000;
1982         &:before {
1983             content: '';
1984             display: inline-block;
1985             border-left: 8px solid transparent;
1986             border-right: 8px solid transparent;
1987             border-top: 8px solid rgba(0, 0, 0, .2);
1988             position: absolute;
1989             bottom: -8px;
1990             left: calc(50% - 8px);
1991         }
1993         &:after {
1994             content: '';
1995             display: inline-block;
1996             border-left: 7px solid transparent;
1997             border-right: 7px solid transparent;
1998             border-top: 7px solid #fff;
1999             position: absolute;
2000             bottom: -6px;
2001             left: calc(50% - 7px);
2002             z-index: 2;
2003         }
2004     }
2006     &:hover {
2007         .hover-tooltip {
2008             opacity: 1;
2009             visibility: visible;
2010             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2011         }
2012     }
2015 #region-flat-nav {
2016     padding-right: 0;
2017     padding-left: 0;
2018     .nav {
2019         margin-right: $grid-gutter-width / 2;
2020         background-color: $card-bg;
2021     }
2022     @include media-breakpoint-down(sm) {
2023         .nav {
2024             margin-top: $grid-gutter-width;
2025             margin-right: 0;
2026         }
2027     }
2030 // Footer link colour was added to allow the colour of footer links to be changed,
2031 // but really in bootstrap we want the colour of links on .bg-inverse to be changed
2032 // rather than being specific to the footer. This is kept for backwards compatibility.
2033 $footer-link-color: $bg-inverse-link-color !default;
2034 #page-footer a {
2035     color: $footer-link-color;
2036     text-decoration: underline;
2037     .icon {
2038         color: $footer-link-color;
2039     }
2042 .bg-inverse a {
2043     color: $bg-inverse-link-color;
2044     text-decoration: underline;
2045     .icon {
2046         color: $bg-inverse-link-color;
2047     }
2050 .sitelink {
2051     img {
2052         width: 112px;
2053     }
2056 // Make links in a menu clickable anywhere in the row.
2057 .dropdown-item a {
2058     display: block;
2059     width: 100%;
2060     color: $body-color;
2063 .competency-tree {
2064     ul {
2065         padding-left: 1.5rem;
2066     }
2069 .sr-only-focusable {
2070     &:active,
2071     &:focus {
2072         z-index: $zindex-navbar-fixed + 1;
2073         position: fixed;
2074         background: #fff;
2075         padding: 7px;
2076         left: 0;
2077         top: 0;
2078     }
2081 [data-drag-type="move"] {
2082     cursor: move;
2085 .clickable {
2086     cursor: pointer;
2089 .overlay-icon-container {
2090     position: absolute;
2091     top: 0;
2092     left: 0;
2093     width: 100%;
2094     height: 100%;
2095     background-color: rgba(255, 255, 255, 0.6);
2097     .loading-icon {
2098         position: absolute;
2099         top: 50%;
2100         left: 50%;
2101         transform: translate(-50%, -50%);
2103         .icon {
2104             height: 30px;
2105             width: 30px;
2106             font-size: 30px;
2107         }
2108     }
2111 .open.atto_menu > .dropdown-menu {
2112     display: block;
2114 div.editor_atto_toolbar button .icon {
2115     color: $gray-700;
2117 .w-auto {
2118     width: auto;