Merge branch 'MDL-62336_master' of git://github.com/markn86/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 > .card {
9     overflow-x: auto;
10     overflow-y: visible;
11     min-height: 45rem;
12 }
14 .context-header-settings-menu,
15 .region-main-settings-menu {
16     float: right;
17     width: auto;
18     max-width: 4em;
19     height: 2em;
20     display: block;
21     margin-top: 4px;
22 }
24 .context-header-settings-menu .dropdown-toggle > .icon,
25 #region-main-settings-menu .dropdown-toggle > .icon {
26     height: 24px;
27     font-size: 24px;
28     width: auto;
29 }
30 /** Prevent user notifications overlapping with region main settings menu */
31 #user-notifications {
32     display: block;
33     overflow: hidden;
34 }
36 /** Page layout CSS starts **/
37 .layout-option-noheader #page-header,
38 .layout-option-nonavbar #page-navbar,
39 .layout-option-nofooter #page-footer,
40 .layout-option-nocourseheader .course-content-header,
41 .layout-option-nocoursefooter .course-content-footer {
42     display: none;
43 }
45 /** Page layout CSS ends **/
47 .mdl-left {
48     text-align: left;
49 }
51 .mdl-right {
52     text-align: right;
53 }
55 /*rtl:ignore*/
56 .text-ltr {
57     direction: ltr !important; /* stylelint-disable-line declaration-no-important */
58 }
60 #add,
61 #remove,
62 .centerpara,
63 .mdl-align {
64     text-align: center;
65 }
67 a.dimmed,
68 a.dimmed:link,
69 a.dimmed:visited,
70 a.dimmed_text,
71 a.dimmed_text:link,
72 a.dimmed_text:visited,
73 .dimmed_text,
74 .dimmed_text a,
75 .dimmed_text a:link,
76 .dimmed_text a:visited,
77 .usersuspended,
78 .usersuspended a,
79 .usersuspended a:link,
80 .usersuspended a:visited,
81 .dimmed_category,
82 .dimmed_category a {
83     @extend .text-muted;
84 }
86 .unlist,
87 .unlist li,
88 .inline-list,
89 .inline-list li,
90 .block .list,
91 .block .list li,
92 .section li.activity,
93 .section li.movehere,
94 .tabtree li {
95     list-style: none;
96     margin: 0;
97     padding: 0;
98 }
100 .inline,
101 .inline-list li {
102     display: inline;
105 .notifytiny {
106     font-size: $font-size-xs;
109 .notifytiny li,
110 .notifytiny td {
111     font-size: 100%;
114 .red,
115 .notifyproblem {
116     @extend .text-warning;
119 .green,
120 .notifysuccess {
121     @extend .text-success;
124 .highlight {
125     @extend .text-info;
128 .fitem.advanced .text-info {
129     font-weight: bold;
132 .reportlink {
133     text-align: right;
136 a.autolink.glossary:hover {
137     cursor: help;
139 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
140 .collapsibleregioncaption {
141     white-space: nowrap;
142     min-height: $line-height-base * $font-size-base;
145 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
146     cursor: pointer;
149 .collapsibleregioncaption img {
150     vertical-align: middle;
153 .jsenabled .hiddenifjs {
154     display: none;
157 .visibleifjs {
158     display: none;
161 .jsenabled .visibleifjs {
162     display: inline;
165 .jsenabled .collapsibleregion {
166     overflow: hidden;
167     box-sizing: content-box;
170 .jsenabled .collapsed .collapsibleregioninner {
171     visibility: hidden;
174 .collapsible-actions {
175     display: none;
176     text-align: right;
179 .jsenabled .collapsible-actions {
180     display: block;
183 .collapsible-actions .collapseexpand {
184     padding-left: 20px;
185     background: url([[pix:t/collapsed]]) 2px center no-repeat;
187 /*rtl:raw:
188 .collapsible-actions .collapseexpand {
189     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
191 */
192 .collapsible-actions .collapse-all {
193     background-image: url([[pix:t/expanded]]);
196 .yui-overlay .yui-widget-bd {
197     background-color: #ffee69;
198     border: 1px solid #a6982b;
199     border-top-color: #d4c237;
200     color: #000;
201     left: 0;
202     padding: 2px 5px;
203     position: relative;
204     top: 0;
205     z-index: 1;
208 .clearer {
209     background: transparent;
210     border-width: 0;
211     clear: both;
212     display: block;
213     height: 1px;
214     margin: 0;
215     padding: 0;
218 .bold,
219 .warning,
220 .errorbox .title,
221 .pagingbar .title,
222 .pagingbar .thispage {
223     font-weight: bold;
226 img.userpicture {
227     margin-right: 0.5rem;
230 img.resize {
231     height: 1em;
232     width: 1em;
235 .action-menu .dropdown-toggle {
236     text-decoration: none;
239 .action-menu {
240     white-space: nowrap;
243 .block img.resize {
244     height: 0.9em;
245     width: 0.8em;
247 /* Icon styles */
248 img.activityicon {
249     height: 24px;
250     width: 24px;
251     vertical-align: middle;
254 .headermain {
255     font-weight: bold;
258 #maincontent {
259     display: block;
260     height: 1px;
261     overflow: hidden;
264 img.uihint {
265     cursor: help;
268 #addmembersform table {
269     margin-left: auto;
270     margin-right: auto;
273 table.flexible .emptyrow {
274     display: none;
277 form.popupform,
278 form.popupform div {
279     display: inline;
282 .arrow_button input {
283     overflow: hidden;
285 .no-overflow {
286     overflow: auto;
289 .no-overflow > .generaltable {
290     margin-bottom: 0;
292 // Accessibility features
294 // Accessibility: text 'seen' by screen readers but not visual users.
295 .accesshide {
296     @include sr-only();
299 span.hide,
300 div.hide,
301 .hidden {
302     display: none;
304 // Accessibility: Skip block link, for keyboard-only users.
305 a.skip-block,
306 a.skip {
307     position: absolute;
308     top: -1000em;
309     font-size: 0.85em;
310     text-decoration: none;
313 a.skip-block:focus,
314 a.skip-block:active,
315 a.skip:focus,
316 a.skip:active {
317     position: static;
318     display: block;
321 .skip-block-to {
322     display: block;
323     height: 1px;
324     overflow: hidden;
326 // Blogs
327 .addbloglink {
328     text-align: center;
331 .blog_entry .audience {
332     text-align: right;
333     padding-right: 4px;
336 .blog_entry .tags {
337     margin-top: 15px;
340 .blog_entry .content {
341     margin-left: 43px;
343 // Group
345 #doc-contents h1 {
346     margin: 1em 0 0 0;
349 #doc-contents ul {
350     margin: 0;
351     padding: 0;
352     width: 90%;
355 #doc-contents ul li {
356     list-style-type: none;
359 .groupmanagementtable td {
360     vertical-align: top;
363 .groupmanagementtable #existingcell,
364 .groupmanagementtable #potentialcell {
365     width: 42%;
368 .groupmanagementtable #buttonscell {
369     width: 16%;
372 .groupmanagementtable #buttonscell p.arrow_button input {
373     width: auto;
374     min-width: 80%;
375     margin: 0 auto;
378 .groupmanagementtable #removeselect_wrapper,
379 .groupmanagementtable #addselect_wrapper {
380     width: 100%;
383 .groupmanagementtable #removeselect_wrapper label,
384 .groupmanagementtable #addselect_wrapper label {
385     font-weight: normal;
388 #group-usersummary {
389     width: 14em;
392 .groupselector {
393     margin-top: 3px;
394     margin-bottom: 3px;
395     display: inline-block;
398 .groupselector label {
399     display: inline-block;
402 // Login
403 .login-page {
404     [name="username"] {
405         margin-bottom: -1px;
406         border-bottom-right-radius: 0;
407         border-bottom-left-radius: 0;
408     }
410     [type="password"] {
411         margin-bottom: 10px;
412         border-top-left-radius: 0;
413         border-top-right-radius: 0;
414     }
417 // Notes
418 .notepost {
419     margin-bottom: 1em;
422 .notepost .userpicture {
423     float: left;
424     margin-right: 5px;
427 .notepost .content,
428 .notepost .footer {
429     clear: both;
432 .notesgroup {
433     margin-left: 20px;
436 // My Moodle
437 .path-my .coursebox {
438     margin: $spacer-y 0;
439     padding: 0;
441     .overview {
442         margin: 15px 30px 10px 30px;
443     }
446 .path-my .coursebox .info {
447     float: none;
448     margin: 0;
451 // Modules
452 .mod_introbox {
453     padding: 10px;
456 table.mod_index {
457     width: 100%;
460 // Comments
461 .comment-ctrl {
462     font-size: 12px;
463     display: none;
464     margin: 0;
465     padding: 0;
468 .comment-ctrl h5 {
469     margin: 0;
470     padding: 5px;
473 .comment-area {
474     max-width: 400px;
475     padding: 5px;
478 .comment-area textarea {
479     width: 100%;
480     overflow: auto;
482     &.fullwidth {
483         -webkit-box-sizing: border-box;
484         -moz-box-sizing: border-box;
485         box-sizing: border-box;
486     }
489 .comment-area .fd {
490     text-align: right;
493 .comment-meta span {
494     color: gray;
497 .comment-link img {
498     vertical-align: text-bottom;
501 .comment-list {
502     font-size: 11px;
503     overflow: auto;
504     list-style: none;
505     padding: 0;
506     margin: 0;
509 .comment-list li {
510     margin: 2px;
511     list-style: none;
512     margin-bottom: 5px;
513     clear: both;
514     padding: .3em;
515     position: relative;
518 .comment-list li.first {
519     display: none;
522 .comment-paging {
523     text-align: center;
526 .comment-paging .pageno {
527     padding: 2px;
530 .comment-paging .curpage {
531     border: 1px solid #ccc;
534 .comment-message .picture {
535     width: 20px;
536     float: left;
539 .comment-message .text {
540     margin: 0;
541     padding: 0;
544 .comment-message .text p {
545     padding: 0;
546     margin: 0 18px 0 0;
549 .comment-delete {
550     position: absolute;
551     top: 0;
552     right: 0;
553     margin: .3em;
556 .comment-report-selectall {
557     display: none;
560 .comment-link {
561     display: none;
564 .jsenabled .comment-link {
565     display: block;
568 .jsenabled .showcommentsnonjs {
569     display: none;
572 .jsenabled .comment-report-selectall {
573     display: inline;
575 /**
576 * Completion progress report
577 */
578 .completion-expired {
579     @extend .text-warning;
582 .completion-expected {
583     font-size: $font-size-xs;
586 .completion-sortchoice,
587 .completion-identifyfield {
588     font-size: $font-size-xs;
589     vertical-align: bottom;
592 .completion-progresscell {
593     text-align: right;
596 .completion-expired .completion-expected {
597     font-weight: bold;
599 /**
600 * Tags
601 */
602 img.user-image {
603     height: 100px;
604     width: 100px;
607 #tag-search-box {
608     text-align: center;
609     margin: 10px auto;
612 .path-tag .tag-index-items .tagarea {
613     border: 1px solid #e3e3e3;
614     border-radius: 4px;
615     padding: 10px;
616     margin-top: 10px;
619 .path-tag .tag-index-items .tagarea h3 {
620     display: block;
621     padding: 3px 0 10px 0;
622     margin: 0;
623     font-size: 1.1em;
624     font-weight: bold;
625     line-height: 20px;
626     color: #999;
627     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
628     text-transform: uppercase;
629     word-wrap: break-word;
630     border-bottom: solid 1px #e3e3e3;
631     margin-bottom: 10px;
634 .path-tag .tagarea .controls,
635 .path-tag .tagarea .taggeditems {
636     @include clearfix();
639 .path-tag .tagarea .controls,
640 .path-tag .tag-backtoallitems {
641     text-align: center;
644 .path-tag .tagarea .controls .gotopage.nextpage {
645     float: right;
648 .path-tag .tagarea .controls .gotopage.prevpage {
649     float: left;
652 .path-tag .tagarea .controls .exclusivemode {
653     display: inline-block;
656 .path-tag .tagarea .controls.controls-bottom {
657     margin-top: 5px;
660 .path-tag .tagarea .controls .gotopage.nextpage::after {
661     padding-right: 5px;
662     padding-left: 5px;
663     content: "»";
666 .path-tag .tagarea .controls .gotopage.prevpage::before {
667     padding-right: 5px;
668     padding-left: 5px;
669     content: "«";
672 span.flagged-tag,
673 tr.flagged-tag,
674 span.flagged-tag a,
675 tr.flagged-tag a {
676     @extend .text-warning;
679 .tag-management-table td,
680 .tag-management-table th {
681     vertical-align: middle;
682     padding: 4px;
685 .tag-management-table .inplaceeditable.inplaceeditingon input {
686     width: 150px;
689 .path-admin-tag .addstandardtags {
690     float: right;
692     img {
693         margin: 0 5px;
694     }
697 .path-tag .tag-relatedtags {
698     padding-top: 10px;
701 .path-tag .tag-management-box {
702     text-align: right;
705 .path-tag .tag-index-toc {
706     padding: 10px;
707     text-align: center;
710 .path-tag .tag-index-toc li,
711 .path-tag .tag-management-box li {
712     margin-left: 5px;
713     margin-right: 5px;
716 .path-tag .tag-management-box li a.edittag {
717     background-image: url([[pix:moodle|i/settings]]);
720 .path-tag .tag-management-box li a.flagasinappropriate {
721     background-image: url([[pix:moodle|i/flagged]]);
724 .path-tag .tag-management-box li a.removefrommyinterests {
725     background-image: url([[pix:moodle|t/delete]]);
728 .path-tag .tag-management-box li a.addtomyinterests {
729     background-image: url([[pix:moodle|t/add]]);
732 .path-tag .tag-management-box li a {
733     background-repeat: no-repeat;
734     background-position: left;
735     padding-left: 17px;
738 .tag_feed.media-list .media .itemimage {
739     float: left;
742 .tag_feed.media-list .media .itemimage img {
743     height: 35px;
744     width: 35px;
747 .tag_feed.media-list .media .media-body {
748     padding-right: 10px;
749     padding-left: 10px;
752 .tag_feed .media .muted a {
753     @extend .text-muted;
756 .tag_cloud {
757     text-align: center;
760 .tag_cloud .inline-list li {
761     padding: 0 0.2em;
764 .tag_cloud .tag_overflow {
765     margin-top: 1em;
766     font-style: italic;
769 .tag_cloud .s20 {
770     font-size: 2.7em;
773 .tag_cloud .s19 {
774     font-size: 2.6em;
777 .tag_cloud .s18 {
778     font-size: 2.5em;
781 .tag_cloud .s17 {
782     font-size: 2.4em;
785 .tag_cloud .s16 {
786     font-size: 2.3em;
789 .tag_cloud .s15 {
790     font-size: 2.2em;
793 .tag_cloud .s14 {
794     font-size: 2.1em;
797 .tag_cloud .s13 {
798     font-size: 2em;
801 .tag_cloud .s12 {
802     font-size: 1.9em;
805 .tag_cloud .s11 {
806     font-size: 1.8em;
809 .tag_cloud .s10 {
810     font-size: 1.7em;
813 .tag_cloud .s9 {
814     font-size: 1.6em;
817 .tag_cloud .s8 {
818     font-size: 1.5em;
821 .tag_cloud .s7 {
822     font-size: 1.4em;
825 .tag_cloud .s6 {
826     font-size: 1.3em;
829 .tag_cloud .s5 {
830     font-size: 1.2em;
833 .tag_cloud .s4 {
834     font-size: 1.1em;
837 .tag_cloud .s3 {
838     font-size: 1em;
841 .tag_cloud .s2 {
842     font-size: 0.9em;
845 .tag_cloud .s1 {
846     font-size: 0.8em;
849 .tag_cloud .s0 {
850     font-size: 0.7em;
853 .tag_list ul {
854     display: inline;
857 .tag_list.hideoverlimit .overlimit {
858     display: none;
861 .tag_list .tagmorelink {
862     display: none;
865 .tag_list.hideoverlimit .tagmorelink {
866     display: inline;
869 .tag_list.hideoverlimit .taglesslink {
870     display: none;
873 /**
874 * Web Service
875 */
876 #webservice-doc-generator td {
877     text-align: left;
878     border: 0 solid black;
881 /**
882 * Enrol
883 */
884 .userenrolment {
885     width: 100%;
886     border-collapse: collapse;
889 .userenrolment tr {
890     vertical-align: top;
893 .userenrolment td {
894     padding: 0;
895     height: 41px;
898 .userenrolment .subfield {
899     margin-right: 5px;
902 .userenrolment .col_userdetails .subfield {
903     margin-left: 40px;
906 .userenrolment .col_userdetails .subfield_picture {
907     float: left;
908     margin-left: 0;
911 .userenrolment .col_lastseen {
912     width: 150px;
915 .userenrolment .col_role {
916     width: 262px;
919 .userenrolment .col_role .roles,
920 .userenrolment .col_group .groups {
921     margin-right: 30px;
924 .userenrolment .col_role .role {
925     float: left;
926     padding: 0 3px 3px;
927     margin: 0 3px 3px;
928     white-space: nowrap;
931 .userenrolment .col_group .group {
932     float: left;
933     padding: 3px;
934     margin: 3px;
935     white-space: nowrap;
938 .userenrolment .col_role .role a,
939 .userenrolment .col_group .group a {
940     margin-left: 3px;
941     cursor: pointer;
944 .userenrolment .col_role .addrole,
945 .userenrolment .col_group .addgroup {
946     float: right;
947     padding: 3px;
948     margin: 3px;
950     > a:hover {
951         border-bottom: 1px solid #666;
952     }
955 .userenrolment .col_role .addrole img,
956 .userenrolment .col_group .addgroup img {
957     vertical-align: baseline;
960 .userenrolment .hasAllRoles .col_role .addrole {
961     display: none;
964 .userenrolment .col_enrol .enrolment {
965     float: left;
966     padding: 0 3px 3px;
967     margin: 0 3px 3px;
970 .userenrolment .col_enrol .enrolment a {
971     float: right;
972     margin-left: 3px;
975 #page-enrol-users {
976     .enrol_user_buttons {
977         text-align: right;
979     }
981     #filterform {
982         @extend .card;
983         @extend .card-block;
984     }
987 #page-enrol-users .enrol-users-page-action input {
988     margin-left: 0;
991 .corelightbox {
992     background-color: #ccc;
993     position: absolute;
994     top: 0;
995     left: 0;
996     width: 100%;
997     height: 100%;
998     text-align: center;
1001 .corelightbox img {
1002     position: fixed;
1003     top: 50%;
1004     left: 50%;
1007 .mod-indent-outer {
1008     display: table;
1011 .mod-indent {
1012     display: table-cell;
1015 .label .mod-indent {
1016     float: left;
1017     padding-top: 20px;
1019 $mod-indent-size: 30px;
1020 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1022 @for $i from 1 through 16 {
1023     $width: ($i * $mod-indent-size);
1025     .mod-indent-#{$i} {
1026         width: $width;
1027     }
1030 .mod-indent-huge {
1031     width: (16 * $mod-indent-size);
1034 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1035 .resourcecontent .mediaplugin_mp3 object {
1036     height: 25px;
1037     width: 600px;
1040 .resourcecontent audio.mediaplugin_html5audio {
1041     width: 600px;
1043 /** Large resource images should avoid hidden overflow **/
1044 .resourceimage {
1045     max-width: 100%;
1047 /* Audio player size in 'inline' mode (can only change width, as above) */
1048 .mediaplugin_mp3 object {
1049     height: 15px;
1050     width: 300px;
1053 audio.mediaplugin_html5audio {
1054     width: 300px;
1056 /* TinyMCE moodle media preview frame should not have padding */
1057 .core_media_preview.pagelayout-embedded #content {
1058     padding: 0;
1061 .core_media_preview.pagelayout-embedded #maincontent {
1062     height: 0;
1065 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1066     padding: 0;
1067     margin: 0;
1068     min-width: 0;
1069     background: none;
1072 .path-rating .ratingtable {
1073     width: 100%;
1074     margin-bottom: 1em;
1077 .path-rating .ratingtable th.rating {
1078     width: 100%;
1081 .path-rating .ratingtable td.rating,
1082 .path-rating .ratingtable td.time {
1083     white-space: nowrap;
1084     text-align: center;
1088 .initialbarlabel {
1089     display: inline-block;
1090     width: 6em;
1091     float: left;
1092     overflow: hidden;
1093     text-overflow: ellipsis;
1094     white-space: nowrap;
1098 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1099 .moodle-dialogue-base .moodle-dialogue-lightbox {
1100     background-color: $gray;
1103 // Prevent adding backdrops to popups in popups.
1104 .pagelayout-popup {
1105     .moodle-dialogue-base {
1106         .moodle-dialogue-lightbox {
1107             background-color: transparent;
1108         }
1109         .moodle-dialogue {
1110             box-shadow: $popover-box-shadow;
1111         }
1112     }
1115 .moodle-dialogue-base .hidden,
1116 .moodle-dialogue-base .moodle-dialogue-hidden {
1117     display: none;
1120 .no-scrolling {
1121     overflow: hidden;
1124 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1125     left: 0;
1126     top: 0;
1127     right: 0;
1128     bottom: -50px;
1129     position: fixed;
1132 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1133     overflow: auto;
1136 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1137     width: 28px;
1138     height: 16px;
1139     background-size: 100%;
1142 .moodle-dialogue-base .moodle-dialogue-wrap {
1143     background-color: #fff;
1144     border: 1px solid #ccc;
1147 // Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1148 // it for a reason (conflicts with jquery .show()).
1149 .modal.show {
1150     display: block;
1153 .moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content {
1154     @extend .modal-content;
1157 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1158     @extend .modal-header;
1161 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1162     // Undo some YUI damage.
1163     min-height: 3rem;
1164     color: initial;
1165     background: initial;
1166     font-size: 1.5rem;
1167     line-height: 1.5;
1170 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1171     @extend .modal-title;
1172     font-size: 1.5rem;
1175 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1176     /*rtl:raw:
1177         left: 0;
1178         right: auto;
1179     */
1180     padding: $spacer;
1183 .moodle-dialogue-base .closebutton {
1184     @extend .close;
1185     box-shadow: none;
1186     &::after {
1187         content: "×";
1188     }
1191 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1192     padding: 0.5rem;
1195 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1196     overflow: auto;
1197     position: absolute;
1198     top: 0;
1199     bottom: 50px;
1200     left: 0;
1201     right: 0;
1202     margin: 0;
1203     border: 0;
1206 .moodle-dialogue-exception .moodle-exception-param label {
1207     font-weight: bold;
1210 .moodle-dialogue-exception .param-stacktrace label {
1211     background-color: #eee;
1212     border: 1px solid #ccc;
1213     border-bottom-width: 0;
1216 .moodle-dialogue-exception .param-stacktrace pre {
1217     border: 1px solid #ccc;
1218     background-color: #fff;
1221 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1222     color: navy;
1223     font-size: $font-size-sm;
1226 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1227     @extend .text-warning;
1228     font-size: $font-size-sm;
1231 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1232     color: #333;
1233     font-size: 90%;
1234     border-bottom: 1px solid #eee;
1237 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1238     @extend .modal-footer;
1241 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1242     display: none;
1245 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1246     // Undo some YUI damage.
1247     background: initial;
1250 .moodle-dialogue-confirm .confirmation-message {
1251     margin: 0.5rem 0;
1254 .moodle-dialogue-confirm .confirmation-dialogue input {
1255     min-width: 80px;
1258 .moodle-dialogue-exception .moodle-exception-message {
1259     margin: 1em;
1262 .moodle-dialogue-exception .moodle-exception-param {
1263     margin-bottom: 0.5em;
1266 .moodle-dialogue-exception .moodle-exception-param label {
1267     width: 150px;
1270 .moodle-dialogue-exception .param-stacktrace label {
1271     display: block;
1272     margin: 0;
1273     padding: 4px 1em;
1276 .moodle-dialogue-exception .param-stacktrace pre {
1277     display: block;
1278     height: 200px;
1279     overflow: auto;
1282 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1283     display: inline-block;
1284     margin: 4px 0;
1287 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1288     display: inline-block;
1289     width: 50px;
1290     margin: 4px 1em;
1293 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1294     padding-left: 25px;
1295     margin-bottom: 4px;
1296     padding-bottom: 4px;
1299 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1300     opacity: 0.75;
1301     width: 100%;
1302     height: 100%;
1303     top: 0;
1304     left: 0;
1305     background-color: white;
1306     text-align: center;
1307     padding: 10% 0;
1309 /* Apply a default max-height on tooltip text */
1310 .moodle-dialogue .tooltiptext {
1311     max-height: 300px;
1314 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1315     z-index: 3001;
1317     .moodle-dialogue-bd {
1318         overflow: auto;
1319     }
1322 /**
1323  * Chooser Dialogues (moodle-core-chooserdialogue)
1324  *
1325  * This CSS belong to the chooser dialogue which should work both with, and
1326  * without javascript enabled
1327  */
1328 /* Hide the dialog and it's title */
1329 .chooserdialoguebody,
1330 .choosertitle {
1331     display: none;
1334 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1335     margin: 0;
1338 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1339     padding: 0;
1340     background: #f2f2f2;
1342     @include border-bottom-radius(10px);
1344 /* Center the submit buttons within the area */
1345 .choosercontainer #chooseform .submitbuttons {
1346     padding: 0.7em 0;
1347     text-align: right;
1349 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1351 @media (max-height: 639px) {
1352     .ios.safari .choosercontainer #chooseform .submitbuttons {
1353         padding: 45px 0;
1354     }
1357 .choosercontainer #chooseform .submitbuttons input {
1358     min-width: 100px;
1359     margin: 0 0.5em;
1361 /* Various settings for the options area */
1362 .choosercontainer #chooseform .options {
1363     position: relative;
1364     border-bottom: 1px solid #bbb;
1366 /* Only set these options if we're showing the js container */
1367 .jschooser .choosercontainer #chooseform .alloptions {
1368     overflow-x: hidden;
1369     overflow-y: auto;
1370     max-width: 240px;
1372     .option {
1373         input[type=radio] {
1374             display: inline-block;
1375         }
1377         .typename {
1378             display: inline-block;
1379             width: 55%;
1380         }
1381     }
1383 /* Settings for option rows and option subtypes */
1384 .choosercontainer #chooseform .moduletypetitle,
1385 .choosercontainer #chooseform .option,
1386 .choosercontainer #chooseform .nonoption {
1387     margin-bottom: 0;
1388     padding: 0 1.6em 0 1.6em;
1391 .choosercontainer #chooseform .moduletypetitle {
1392     text-transform: uppercase;
1393     padding-top: 1.2em;
1394     padding-bottom: 0.4em;
1397 .choosercontainer #chooseform .option .typename,
1398 .choosercontainer #chooseform .nonoption .typename {
1399     padding: 0 0 0 0.5em;
1402 .choosercontainer #chooseform .modicon + .typename {
1403     padding-left: 0;
1406 .choosercontainer #chooseform .option input[type=radio],
1407 .choosercontainer #chooseform .option span.typename {
1408     vertical-align: middle;
1411 .choosercontainer #chooseform .option label {
1412     display: block;
1413     margin: 0;
1414     padding: ($spacer / 2) 0;
1415     border-bottom: 1px solid #fff;
1418 .choosercontainer #chooseform .option .icon {
1419     margin: 0;
1420     padding: 0 $spacer;
1423 .choosercontainer #chooseform .nonoption {
1424     padding-left: 2.7em;
1425     padding-top: 0.3em;
1426     padding-bottom: 0.1em;
1429 .choosercontainer #chooseform .subtype {
1430     margin-bottom: 0;
1431     padding: 0 1.6em 0 3.2em;
1434 .choosercontainer #chooseform .subtype .typename {
1435     margin: 0 0 0 0.2em;
1437 /* The instruction/help area */
1438 .jschooser .choosercontainer #chooseform .instruction,
1439 .jschooser .choosercontainer #chooseform .typesummary {
1440     display: none;
1441     position: absolute;
1442     top: 0;
1443     right: 0;
1444     bottom: 0;
1445     left: 240px;
1446     margin: 0;
1447     padding: 1.6em;
1448     background-color: #fff;
1449     overflow-x: hidden;
1450     overflow-y: auto;
1451     line-height: 2em;
1453 /* Selected option settings */
1454 .jschooser .choosercontainer #chooseform .instruction,
1455 .choosercontainer #chooseform .selected .typesummary {
1456     display: block;
1459 .choosercontainer #chooseform .selected {
1460     background-color: #fff;
1461     margin-top: -1px;
1462     padding-top: 1px;
1465 .chooserdialogue-course-modchooser .modicon .icon {
1466     width: 24px;
1467     height: 24px;
1468     font-size: 24px;
1471 @include media-breakpoint-down(xs) {
1472     .jsenabled .choosercontainer #chooseform .alloptions {
1473         max-width: 100%;
1474     }
1476     .jsenabled .choosercontainer #chooseform .instruction,
1477     .jsenabled .choosercontainer #chooseform .typesummary {
1478         position: static;
1479     }
1482 /* Form element: listing */
1483 .formlistingradio {
1484     padding-bottom: 25px;
1485     padding-right: 10px;
1488 .formlistinginputradio {
1489     float: left;
1492 .formlistingmain {
1493     min-height: 225px;
1496 .formlisting {
1497     position: relative;
1498     margin: 15px 0;
1499     padding: 1px 19px 14px;
1500     background-color: white;
1501     border: 1px solid #ddd;
1503     @include border-radius(4px);
1506 .formlistingmore {
1507     position: absolute;
1508     cursor: pointer;
1509     bottom: -1px;
1510     right: -1px;
1511     padding: 3px 7px;
1512     font-size: 12px;
1513     font-weight: bold;
1514     background-color: whitesmoke;
1515     border: 1px solid #ddd;
1516     color: #9da0a4;
1518     @include border-radius(4px 0 4px 0);
1521 .formlistingall {
1522     margin: 15px 0;
1523     padding: 0;
1525     @include border-radius(4px);
1528 .formlistingrow {
1529     cursor: pointer;
1530     border-bottom: 1px solid;
1531     border-color: #e1e1e8;
1532     border-left: 1px solid #e1e1e8;
1533     border-right: 1px solid #e1e1e8;
1534     background-color: #f7f7f9;
1536     @include border-radius(0 0 4px 4px);
1537     padding: 6px;
1538     top: 50%;
1539     left: 50%;
1540     min-height: 34px;
1541     float: left;
1542     width: 150px;
1545 body.jsenabled .formlistingradio {
1546     display: none;
1549 body.jsenabled .formlisting {
1550     display: block;
1553 /* Badges styles */
1554 table.collection {
1555     @extend .table;
1556     @extend .table-bordered;
1557     @extend .table-striped;
1560 a.criteria-action {
1561     padding: 0 3px;
1562     float: right;
1565 div.criteria-description {
1566     padding: 10px 15px;
1567     margin: 5px 0;
1568     background: none repeat scroll 0 0 #f9f9f9;
1569     border: 1px solid #eee;
1572 ul.badges {
1573     margin: 0;
1574     list-style: none;
1577 .badges li {
1578     position: relative;
1579     display: inline-block;
1580     padding-top: 1em;
1581     text-align: center;
1582     vertical-align: top;
1583     width: 150px;
1586 .badges li .badge-name {
1587     display: block;
1588     padding: 5px;
1591 .badges li > img {
1592     position: absolute;
1595 .badges li .badge-image {
1596     width: 100px;
1597     height: 100px;
1598     left: 10px;
1599     top: 0;
1600     z-index: 1;
1603 .badges li .badge-actions {
1604     position: relative;
1607 .badges li .expireimage {
1608     width: 100px;
1609     height: 100px;
1610     left: 25px;
1611     top: 0;
1612     position: absolute;
1613     z-index: 10;
1614     opacity: 0.85;
1617 #badge-image {
1618     background-color: transparent;
1619     padding: 0;
1620     position: relative;
1621     min-width: 100px;
1622     width: 20%;
1623     display: inline-block;
1624     vertical-align: top;
1625     margin-top: 17px;
1626     margin-bottom: 20px;
1628     .expireimage {
1629         width: 100px;
1630         height: 100px;
1631         left: 0;
1632         top: 0;
1633         opacity: 0.85;
1634         position: absolute;
1635         z-index: 10;
1636     }
1638     .singlebutton {
1639         padding-top: 5px;
1640         display: block;
1642         button {
1643             margin-left: 4px;
1644         }
1645     }
1648 #badge-details {
1649     display: inline-block;
1650     width: 79%;
1653 #badge-overview dl,
1654 #badge-details dl {
1655     margin: 0;
1657     dt,
1658     dd {
1659         vertical-align: top;
1660         padding: 3px 0;
1661     }
1663     dt {
1664         clear: both;
1665         display: inline-block;
1666         width: 20%;
1667         min-width: 100px;
1668     }
1670     dd {
1671         display: inline-block;
1672         width: 79%;
1673         margin-left: 1%;
1674     }
1677 .badge-profile {
1678     vertical-align: top;
1681 .connected {
1682     @extend .text-success;
1685 .notconnected {
1686     @extend .text-danger;
1689 .connecting {
1690     @extend .text-warning;
1693 #page-badges-award .recipienttable tr td {
1694     vertical-align: top;
1697 #page-badges-award .recipienttable tr td.actions .actionbutton {
1698     margin: 0.3em 0;
1699     padding: 0.5em 0;
1700     width: 100%;
1703 #page-badges-award .recipienttable tr td.existing,
1704 #page-badges-award .recipienttable tr td.potential {
1705     width: 42%;
1708 #issued-badge-table .activatebadge {
1709     display: inline-block;
1712 .statusbox.active {
1713     background-color: $state-success-bg;
1716 .statusbox.inactive {
1717     background-color: $state-warning-bg;
1720 .statusbox {
1721     text-align: center;
1722     margin-bottom: 5px;
1723     padding: 5px;
1726 .statusbox .activatebadge {
1727     display: inline-block;
1730 .statusbox .activatebadge input[type=submit] {
1731     margin: 3px;
1734 .activatebadge {
1735     margin: 0;
1736     text-align: left;
1737     vertical-align: middle;
1740 img#persona_signin {
1741     cursor: pointer;
1744 .addcourse {
1745     float: right;
1748 .invisiblefieldset {
1749     display: inline;
1750     padding: 0;
1751     border-width: 0;
1754 /** Page header */
1755 #page-header {
1756     .logo {
1757         margin: $spacer 0;
1758         img {
1759             max-height: 75px;
1760         }
1761     }
1764 /** Navbar logo. */
1765 nav.navbar .logo img {
1766     max-height: 35px;
1769 /** Header-bar styles **/
1770 .page-context-header {
1771     // We need to be explicit about the height of the header.
1772     $pageHeaderHeight: 140px;
1774     // Do not remove these rules.
1775     overflow: hidden;
1777     .page-header-image,
1778     .page-header-headings {
1779         float: left;
1780         display: block;
1781         position: relative;
1782     }
1784     .page-header-image {
1785         margin-right: 1em;
1786         margin-bottom: 1em;
1787     }
1789     .page-header-headings,
1790     .header-button-group {
1791         position: relative;
1792         line-height: 24px;
1793         vertical-align: middle;
1794     }
1796     .header-button-group {
1797         display: block;
1798         float: left;
1800         a {
1801             position: relative;
1803             // Don't touch it unless you know exactly what you are doing.
1804             top: -0.4em;
1805         }
1806     }
1809 ul.dragdrop-keyboard-drag li {
1810     list-style-type: none;
1813 a.disabled:hover,
1814 a.disabled {
1815     text-decoration: none;
1816     cursor: default;
1817     font-style: italic;
1818     color: #808080;
1821 body.lockscroll {
1822     height: 100%;
1823     overflow: hidden;
1826 .progressbar_container {
1827     max-width: 500px;
1828     margin: 0 auto;
1831 /* IE10 only fix for calendar titling */
1832 .ie10 .yui3-calendar-header-label {
1833     display: inline-block;
1836 dd:before,
1837 dd:after {
1838     display: block;
1839     content: " ";
1842 dd:after {
1843     clear: both;
1846 // Active tabs with links should have a different
1847 // cursor to indicate they are clickable.
1848 .nav-tabs > .active > a[href],
1849 .nav-tabs > .active > a[href]:hover,
1850 .nav-tabs > .active > a[href]:focus {
1851     cursor: pointer;
1854 .inplaceeditable {
1855     &.inplaceeditingon {
1856         position: relative;
1858         .editinstructions {
1859             margin-top: -30px;
1860             font-weight: normal;
1861             margin-right: 0;
1862             margin-left: 0;
1863             left: 0;
1864             right: auto;
1865             white-space: nowrap;
1866         }
1868         input {
1869             width: 330px;
1870             vertical-align: text-bottom;
1871             margin-bottom: 0;
1872         }
1874         select {
1875             margin-bottom: 0;
1876         }
1877     }
1879     .quickediticon img {
1880         opacity: 0.2;
1881     }
1883     .quickeditlink {
1884         color: inherit;
1885         text-decoration: inherit;
1886     }
1888     &:hover .quickeditlink .quickediticon img,
1889     .quickeditlink:focus .quickediticon img {
1890         opacity: 1;
1891     }
1893     &.inplaceeditable-toggle .quickediticon {
1894         display: none;
1895     }
1897     &.inplaceeditable-autocomplete {
1898         display: block;
1899     }
1902 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
1903     margin-top: -20px;
1906 /** Chart area. */
1907 .chart-area {
1909     .chart-table-data {
1910         display: none;
1911     }
1913     .chart-table {
1914         .chart-output-htmltable caption {
1915             white-space: nowrap;
1916         }
1917         /** When accessible, we display the table only. */
1918         &.accesshide {
1919             .chart-table-expand {
1920                 display: none;
1921             }
1922             .chart-table-data {
1923                 display: block;
1924             }
1925         }
1926     }
1929 // Reset for ul.
1930 ul {
1931     padding-left: 1rem;
1934 /* YUI 2 Tree View */
1935 /*rtl:raw:
1936 .ygtvtn,
1937 .ygtvtm,
1938 .ygtvtmh,
1939 .ygtvtmhh,
1940 .ygtvtp,
1941 .ygtvtph,
1942 .ygtvtphh,
1943 .ygtvln,
1944 .ygtvlm,
1945 .ygtvlmh,
1946 .ygtvlmhh,
1947 .ygtvlp,
1948 .ygtvlph,
1949 .ygtvlphh,
1950 .ygtvdepthcell,
1951 .ygtvok,
1952 .ygtvok:hover,
1953 .ygtvcancel,
1954 .ygtvcancel:hover {
1955     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
1957 */
1959 .hover-tooltip-container {
1960     position: relative;
1962     .hover-tooltip {
1963         opacity: 0;
1964         visibility: hidden;
1965         position: absolute;
1966         /*rtl:ignore*/
1967         left: 50%;
1968         top: calc(-50% - 5px);
1969         transform: translate(-50%, -50%);
1970         background-color: #fff;
1971         border: 1px solid rgba(0, 0, 0, .2);
1972         border-radius: .3rem;
1973         box-sizing: border-box;
1974         padding: 5px;
1975         white-space: nowrap;
1976         transition: opacity 0.15s, visibility 0.15s;
1977         z-index: 1000;
1979         &:before {
1980             content: '';
1981             display: inline-block;
1982             border-left: 8px solid transparent;
1983             border-right: 8px solid transparent;
1984             border-top: 8px solid rgba(0, 0, 0, .2);
1985             position: absolute;
1986             bottom: -8px;
1987             left: calc(50% - 8px);
1988         }
1990         &:after {
1991             content: '';
1992             display: inline-block;
1993             border-left: 7px solid transparent;
1994             border-right: 7px solid transparent;
1995             border-top: 7px solid #fff;
1996             position: absolute;
1997             bottom: -6px;
1998             left: calc(50% - 7px);
1999             z-index: 2;
2000         }
2001     }
2003     &:hover {
2004         .hover-tooltip {
2005             opacity: 1;
2006             visibility: visible;
2007             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2008         }
2009     }
2012 #region-flat-nav {
2013     padding-right: 0;
2014     padding-left: 0;
2015     .nav {
2016         margin-right: $grid-gutter-width / 2;
2017         background-color: $card-bg;
2018     }
2019     @include media-breakpoint-down(sm) {
2020         .nav {
2021             margin-top: $grid-gutter-width;
2022             margin-right: 0;
2023         }
2024     }
2027 // Footer link colour was added to allow the colour of footer links to be changed,
2028 // but really in bootstrap we want the colour of links on .bg-inverse to be changed
2029 // rather than being specific to the footer. This is kept for backwards compatibility.
2030 $footer-link-color: $bg-inverse-link-color !default;
2031 #page-footer a {
2032     color: $footer-link-color;
2033     text-decoration: underline;
2034     .icon {
2035         color: $footer-link-color;
2036     }
2039 .bg-inverse a {
2040     color: $bg-inverse-link-color;
2041     text-decoration: underline;
2042     .icon {
2043         color: $bg-inverse-link-color;
2044     }
2047 .sitelink {
2048     img {
2049         width: 112px;
2050     }
2053 // Make links in a menu clickable anywhere in the row.
2054 .dropdown-item a {
2055     display: block;
2056     width: 100%;
2057     color: $body-color;
2060 .competency-tree {
2061     ul {
2062         padding-left: 1.5rem;
2063     }
2066 .sr-only-focusable {
2067     &:active,
2068     &:focus {
2069         z-index: $zindex-navbar-fixed + 1;
2070         position: fixed;
2071         background: #fff;
2072         padding: 7px;
2073         left: 0;
2074         top: 0;
2075     }
2078 [data-drag-type="move"] {
2079     cursor: move;
2082 .clickable {
2083     cursor: pointer;
2086 .overlay-icon-container {
2087     position: absolute;
2088     top: 0;
2089     left: 0;
2090     width: 100%;
2091     height: 100%;
2092     background-color: rgba(255, 255, 255, 0.6);
2094     .loading-icon {
2095         position: absolute;
2096         top: 50%;
2097         left: 50%;
2098         transform: translate(-50%, -50%);
2100         .icon {
2101             height: 30px;
2102             width: 30px;
2103             font-size: 30px;
2104         }
2105     }
2108 .open.atto_menu > .dropdown-menu {
2109     display: block;