c4272003f0ed43d9519cdb3af96045ca01f43ea9
[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 .action-menu .userpicture {
244     margin-left: 1rem;
247 .block img.resize,
248 .breadcrumb img.resize {
249     height: 0.9em;
250     width: 0.8em;
252 /* Icon styles */
253 img.activityicon {
254     height: 24px;
255     width: 24px;
256     vertical-align: middle;
259 .headermain {
260     font-weight: bold;
263 #maincontent {
264     display: block;
265     height: 1px;
266     overflow: hidden;
269 img.uihint {
270     cursor: help;
273 #addmembersform table {
274     margin-left: auto;
275     margin-right: auto;
278 table.flexible .emptyrow {
279     display: none;
282 form.popupform,
283 form.popupform div {
284     display: inline;
287 .arrow_button input {
288     overflow: hidden;
290 .no-overflow {
291     overflow: auto;
294 .no-overflow > .generaltable {
295     margin-bottom: 0;
297 // Accessibility features
299 // Accessibility: text 'seen' by screen readers but not visual users.
300 .accesshide {
301     position: absolute;
302     left: -10000px;
303     font-weight: normal;
304     font-size: 1em;
307 span.hide,
308 div.hide,
309 .hidden {
310     display: none;
312 // Accessibility: Skip block link, for keyboard-only users.
313 a.skip-block,
314 a.skip {
315     position: absolute;
316     top: -1000em;
317     font-size: 0.85em;
318     text-decoration: none;
321 a.skip-block:focus,
322 a.skip-block:active,
323 a.skip:focus,
324 a.skip:active {
325     position: static;
326     display: block;
329 .skip-block-to {
330     display: block;
331     height: 1px;
332     overflow: hidden;
334 // Blogs
335 .addbloglink {
336     text-align: center;
339 .blog_entry .audience {
340     text-align: right;
341     padding-right: 4px;
344 .blog_entry .tags {
345     margin-top: 15px;
348 .blog_entry .content {
349     margin-left: 43px;
351 // Group
353 #doc-contents h1 {
354     margin: 1em 0 0 0;
357 #doc-contents ul {
358     margin: 0;
359     padding: 0;
360     width: 90%;
363 #doc-contents ul li {
364     list-style-type: none;
367 .groupmanagementtable td {
368     vertical-align: top;
371 .groupmanagementtable #existingcell,
372 .groupmanagementtable #potentialcell {
373     width: 42%;
376 .groupmanagementtable #buttonscell {
377     width: 16%;
380 .groupmanagementtable #buttonscell p.arrow_button input {
381     width: auto;
382     min-width: 80%;
383     margin: 0 auto;
386 .groupmanagementtable #removeselect_wrapper,
387 .groupmanagementtable #addselect_wrapper {
388     width: 100%;
391 .groupmanagementtable #removeselect_wrapper label,
392 .groupmanagementtable #addselect_wrapper label {
393     font-weight: normal;
396 #group-usersummary {
397     width: 14em;
400 .groupselector {
401     margin-top: 3px;
402     margin-bottom: 3px;
403     display: inline-block;
406 .groupselector label {
407     display: inline-block;
410 // Login
411 .login-page {
412     [name="username"] {
413         margin-bottom: -1px;
414         border-bottom-right-radius: 0;
415         border-bottom-left-radius: 0;
416     }
418     [type="password"] {
419         margin-bottom: 10px;
420         border-top-left-radius: 0;
421         border-top-right-radius: 0;
422     }
425 // Notes
426 .notepost {
427     margin-bottom: 1em;
430 .notepost .userpicture {
431     float: left;
432     margin-right: 5px;
435 .notepost .content,
436 .notepost .footer {
437     clear: both;
440 .notesgroup {
441     margin-left: 20px;
444 // My Moodle
445 .path-my .coursebox {
446     margin: $spacer-y 0;
447     padding: 0;
449     .overview {
450         margin: 15px 30px 10px 30px;
451     }
454 .path-my .coursebox .info {
455     float: none;
456     margin: 0;
459 // Modules
460 .mod_introbox {
461     padding: 10px;
464 table.mod_index {
465     width: 100%;
468 // Comments
469 .comment-ctrl {
470     font-size: 12px;
471     display: none;
472     margin: 0;
473     padding: 0;
476 .comment-ctrl h5 {
477     margin: 0;
478     padding: 5px;
481 .comment-area {
482     max-width: 400px;
483     padding: 5px;
486 .comment-area textarea {
487     width: 100%;
488     overflow: auto;
490     &.fullwidth {
491         -webkit-box-sizing: border-box;
492         -moz-box-sizing: border-box;
493         box-sizing: border-box;
494     }
497 .comment-area .fd {
498     text-align: right;
501 .comment-meta span {
502     color: gray;
505 .comment-link img {
506     vertical-align: text-bottom;
509 .comment-list {
510     font-size: 11px;
511     overflow: auto;
512     list-style: none;
513     padding: 0;
514     margin: 0;
517 .comment-list li {
518     margin: 2px;
519     list-style: none;
520     margin-bottom: 5px;
521     clear: both;
522     padding: .3em;
523     position: relative;
526 .comment-list li.first {
527     display: none;
530 .comment-paging {
531     text-align: center;
534 .comment-paging .pageno {
535     padding: 2px;
538 .comment-paging .curpage {
539     border: 1px solid #ccc;
542 .comment-message .picture {
543     width: 20px;
544     float: left;
547 .comment-message .text {
548     margin: 0;
549     padding: 0;
552 .comment-message .text p {
553     padding: 0;
554     margin: 0 18px 0 0;
557 .comment-delete {
558     position: absolute;
559     top: 0;
560     right: 0;
561     margin: .3em;
564 .comment-report-selectall {
565     display: none;
568 .comment-link {
569     display: none;
572 .jsenabled .comment-link {
573     display: block;
576 .jsenabled .showcommentsnonjs {
577     display: none;
580 .jsenabled .comment-report-selectall {
581     display: inline;
583 /**
584 * Completion progress report
585 */
586 .completion-expired {
587     @extend .text-warning;
590 .completion-expected {
591     font-size: $font-size-xs;
594 .completion-sortchoice,
595 .completion-identifyfield {
596     font-size: $font-size-xs;
597     vertical-align: bottom;
600 .completion-progresscell {
601     text-align: right;
604 .completion-expired .completion-expected {
605     font-weight: bold;
607 /**
608 * Tags
609 */
610 img.user-image {
611     height: 100px;
612     width: 100px;
615 #tag-search-box {
616     text-align: center;
617     margin: 10px auto;
620 .path-tag .tag-index-items .tagarea {
621     border: 1px solid #e3e3e3;
622     border-radius: 4px;
623     padding: 10px;
624     margin-top: 10px;
627 .path-tag .tag-index-items .tagarea h3 {
628     display: block;
629     padding: 3px 0 10px 0;
630     margin: 0;
631     font-size: 1.1em;
632     font-weight: bold;
633     line-height: 20px;
634     color: #999;
635     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
636     text-transform: uppercase;
637     word-wrap: break-word;
638     border-bottom: solid 1px #e3e3e3;
639     margin-bottom: 10px;
642 .path-tag .tagarea .controls,
643 .path-tag .tagarea .taggeditems {
644     @include clearfix();
647 .path-tag .tagarea .controls,
648 .path-tag .tag-backtoallitems {
649     text-align: center;
652 .path-tag .tagarea .controls .gotopage.nextpage {
653     float: right;
656 .path-tag .tagarea .controls .gotopage.prevpage {
657     float: left;
660 .path-tag .tagarea .controls .exclusivemode {
661     display: inline-block;
664 .path-tag .tagarea .controls.controls-bottom {
665     margin-top: 5px;
668 .path-tag .tagarea .controls .gotopage.nextpage::after {
669     padding-right: 5px;
670     padding-left: 5px;
671     content: "»";
674 .path-tag .tagarea .controls .gotopage.prevpage::before {
675     padding-right: 5px;
676     padding-left: 5px;
677     content: "«";
680 span.flagged-tag,
681 tr.flagged-tag,
682 span.flagged-tag a,
683 tr.flagged-tag a {
684     @extend .text-warning;
687 .tag-management-table td,
688 .tag-management-table th {
689     vertical-align: middle;
690     padding: 4px;
693 .tag-management-table .inplaceeditable.inplaceeditingon input {
694     width: 150px;
697 .path-admin-tag .addstandardtags {
698     float: right;
700     img {
701         margin: 0 5px;
702     }
705 .path-tag .tag-relatedtags {
706     padding-top: 10px;
709 .path-tag .tag-management-box {
710     text-align: right;
713 .path-tag .tag-index-toc {
714     padding: 10px;
715     text-align: center;
718 .path-tag .tag-index-toc li,
719 .path-tag .tag-management-box li {
720     margin-left: 5px;
721     margin-right: 5px;
724 .path-tag .tag-management-box li a.edittag {
725     background-image: url([[pix:moodle|i/settings]]);
728 .path-tag .tag-management-box li a.flagasinappropriate {
729     background-image: url([[pix:moodle|i/flagged]]);
732 .path-tag .tag-management-box li a.removefrommyinterests {
733     background-image: url([[pix:moodle|t/delete]]);
736 .path-tag .tag-management-box li a.addtomyinterests {
737     background-image: url([[pix:moodle|t/add]]);
740 .path-tag .tag-management-box li a {
741     background-repeat: no-repeat;
742     background-position: left;
743     padding-left: 17px;
746 .tag_feed.media-list .media .itemimage {
747     float: left;
750 .tag_feed.media-list .media .itemimage img {
751     height: 35px;
752     width: 35px;
755 .tag_feed.media-list .media .media-body {
756     padding-right: 10px;
757     padding-left: 10px;
760 .tag_feed .media .muted a {
761     @extend .text-muted;
764 .tag_cloud {
765     text-align: center;
768 .tag_cloud .inline-list li {
769     padding: 0 0.2em;
772 .tag_cloud .tag_overflow {
773     margin-top: 1em;
774     font-style: italic;
777 .tag_cloud .s20 {
778     font-size: 2.7em;
781 .tag_cloud .s19 {
782     font-size: 2.6em;
785 .tag_cloud .s18 {
786     font-size: 2.5em;
789 .tag_cloud .s17 {
790     font-size: 2.4em;
793 .tag_cloud .s16 {
794     font-size: 2.3em;
797 .tag_cloud .s15 {
798     font-size: 2.2em;
801 .tag_cloud .s14 {
802     font-size: 2.1em;
805 .tag_cloud .s13 {
806     font-size: 2em;
809 .tag_cloud .s12 {
810     font-size: 1.9em;
813 .tag_cloud .s11 {
814     font-size: 1.8em;
817 .tag_cloud .s10 {
818     font-size: 1.7em;
821 .tag_cloud .s9 {
822     font-size: 1.6em;
825 .tag_cloud .s8 {
826     font-size: 1.5em;
829 .tag_cloud .s7 {
830     font-size: 1.4em;
833 .tag_cloud .s6 {
834     font-size: 1.3em;
837 .tag_cloud .s5 {
838     font-size: 1.2em;
841 .tag_cloud .s4 {
842     font-size: 1.1em;
845 .tag_cloud .s3 {
846     font-size: 1em;
849 .tag_cloud .s2 {
850     font-size: 0.9em;
853 .tag_cloud .s1 {
854     font-size: 0.8em;
857 .tag_cloud .s0 {
858     font-size: 0.7em;
861 .tag_list ul {
862     display: inline;
865 .tag_list.hideoverlimit .overlimit {
866     display: none;
869 .tag_list .tagmorelink {
870     display: none;
873 .tag_list.hideoverlimit .tagmorelink {
874     display: inline;
877 .tag_list.hideoverlimit .taglesslink {
878     display: none;
881 /**
882 * Web Service
883 */
884 #webservice-doc-generator td {
885     text-align: left;
886     border: 0 solid black;
889 /**
890 * Enrol
891 */
892 .userenrolment {
893     width: 100%;
894     border-collapse: collapse;
897 .userenrolment tr {
898     vertical-align: top;
901 .userenrolment td {
902     padding: 0;
903     height: 41px;
906 .userenrolment .subfield {
907     margin-right: 5px;
910 .userenrolment .col_userdetails .subfield {
911     margin-left: 40px;
914 .userenrolment .col_userdetails .subfield_picture {
915     float: left;
916     margin-left: 0;
919 .userenrolment .col_lastseen {
920     width: 150px;
923 .userenrolment .col_role {
924     width: 262px;
927 .userenrolment .col_role .roles,
928 .userenrolment .col_group .groups {
929     margin-right: 30px;
932 .userenrolment .col_role .role {
933     float: left;
934     padding: 0 3px 3px;
935     margin: 0 3px 3px;
936     white-space: nowrap;
939 .userenrolment .col_group .group {
940     float: left;
941     padding: 3px;
942     margin: 3px;
943     white-space: nowrap;
946 .userenrolment .col_role .role a,
947 .userenrolment .col_group .group a {
948     margin-left: 3px;
949     cursor: pointer;
952 .userenrolment .col_role .addrole,
953 .userenrolment .col_group .addgroup {
954     float: right;
955     padding: 3px;
956     margin: 3px;
958     > a:hover {
959         border-bottom: 1px solid #666;
960     }
963 .userenrolment .col_role .addrole img,
964 .userenrolment .col_group .addgroup img {
965     vertical-align: baseline;
968 .userenrolment .hasAllRoles .col_role .addrole {
969     display: none;
972 .userenrolment .col_enrol .enrolment {
973     float: left;
974     padding: 0 3px 3px;
975     margin: 0 3px 3px;
978 .userenrolment .col_enrol .enrolment a {
979     float: right;
980     margin-left: 3px;
983 #page-enrol-users {
984     .enrol_user_buttons {
985         text-align: right;
987     }
989     #filterform {
990         @extend .card;
991         @extend .card-block;
992     }
995 #page-enrol-users .enrol-users-page-action input {
996     margin-left: 0;
999 .corelightbox {
1000     background-color: #ccc;
1001     position: absolute;
1002     top: 0;
1003     left: 0;
1004     width: 100%;
1005     height: 100%;
1006     text-align: center;
1009 .corelightbox img {
1010     position: fixed;
1011     top: 50%;
1012     left: 50%;
1015 .mod-indent-outer {
1016     display: table;
1019 .mod-indent {
1020     display: table-cell;
1023 .label .mod-indent {
1024     float: left;
1025     padding-top: 20px;
1027 $mod-indent-size: 30px;
1028 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1030 @for $i from 1 through 16 {
1031     $width: ($i * $mod-indent-size);
1033     .mod-indent-#{$i} {
1034         width: $width;
1035     }
1038 .mod-indent-huge {
1039     width: (16 * $mod-indent-size);
1042 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1043 .resourcecontent .mediaplugin_mp3 object {
1044     height: 25px;
1045     width: 600px;
1048 .resourcecontent audio.mediaplugin_html5audio {
1049     width: 600px;
1051 /** Large resource images should avoid hidden overflow **/
1052 .resourceimage {
1053     max-width: 100%;
1055 /* Audio player size in 'inline' mode (can only change width, as above) */
1056 .mediaplugin_mp3 object {
1057     height: 15px;
1058     width: 300px;
1061 audio.mediaplugin_html5audio {
1062     width: 300px;
1064 /* TinyMCE moodle media preview frame should not have padding */
1065 .core_media_preview.pagelayout-embedded #content {
1066     padding: 0;
1069 .core_media_preview.pagelayout-embedded #maincontent {
1070     height: 0;
1073 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1074     padding: 0;
1075     margin: 0;
1076     min-width: 0;
1077     background: none;
1080 .path-rating .ratingtable {
1081     width: 100%;
1082     margin-bottom: 1em;
1085 .path-rating .ratingtable th.rating {
1086     width: 100%;
1089 .path-rating .ratingtable td.rating,
1090 .path-rating .ratingtable td.time {
1091     white-space: nowrap;
1092     text-align: center;
1095 .initialbar {
1097     overflow: auto;
1099     .initialbarlabel {
1100         display: inline-block;
1101         width: 6em;
1102         float: left;
1103         overflow: hidden;
1104         text-overflow: ellipsis;
1105         white-space: nowrap;
1106     }
1108     .initialbarall {
1109         float: left;
1110         width: 4em;
1111         margin-bottom: 2px;
1112         overflow: hidden;
1113         text-overflow: ellipsis;
1114         white-space: nowrap;
1115     }
1117     .initialbargroups {
1118         float: left;
1119     }
1121     .initialbargroup {
1122         float: left;
1123         display: inline-block;
1124         white-space: nowrap;
1125         margin: 0;
1126         padding: 0;
1128         li {
1129             float: left;
1130             list-style: none;
1131         }
1132     }
1134     .letter {
1135         display: inline-block;
1136         height: 1.5em;
1137         min-width: 1.5em;
1138         text-align: center;
1140         color: $pagination-color;
1141         border-width: $pagination-border-width;
1142         border-color: $pagination-border-color;
1143         border-style: solid;
1144         background-color: $pagination-bg;
1145     }
1146     .letter:hover {
1147         color: $pagination-hover-color;
1148         border-color: $pagination-hover-border;
1149         background-color: $pagination-hover-bg;
1150     }
1152     .letter.active {
1153         color: $pagination-active-color;
1154         border-color: $pagination-active-border;
1155         background-color: $pagination-active-bg;
1156     }
1160 @media (max-width: 400px) {
1161     .initialbar {
1162         .letter {
1163             /* This is chosen so that 23 letter at 320px just fits */
1164             font-size: 11.5px;
1165         }
1166     }
1170 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1171 .moodle-dialogue-base .moodle-dialogue-lightbox {
1172     background-color: $gray;
1175 .moodle-dialogue-base .hidden,
1176 .moodle-dialogue-base .moodle-dialogue-hidden {
1177     display: none;
1180 .no-scrolling {
1181     overflow: hidden;
1184 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1185     left: 0;
1186     top: 0;
1187     right: 0;
1188     bottom: -50px;
1189     position: fixed;
1192 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1193     overflow: auto;
1196 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1197     width: 28px;
1198     height: 16px;
1199     background-size: 100%;
1202 .moodle-dialogue-base .moodle-dialogue-wrap {
1203     background-color: #fff;
1204     border: 1px solid #ccc;
1207 // Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1208 // it for a reason (conflicts with jquery .show()).
1209 .modal.show {
1210     display: block;
1213 .moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content {
1214     @extend .modal-content;
1217 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1218     @extend .modal-header;
1221 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1222     // Undo some YUI damage.
1223     min-height: 3rem;
1224     color: initial;
1225     background: initial;
1226     font-size: 1.5rem;
1227     line-height: 1.5;
1230 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1231     @extend .modal-title;
1234 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1235     /*rtl:raw:
1236         left: 0;
1237         right: auto;
1238     */
1239     padding: $spacer;
1242 .moodle-dialogue-base .closebutton {
1243     @extend .close;
1244     box-shadow: none;
1245     &::after {
1246         content: "×";
1247     }
1250 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1251     @extend .modal-body;
1254 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1255     overflow: auto;
1256     position: absolute;
1257     top: 0;
1258     bottom: 50px;
1259     left: 0;
1260     right: 0;
1261     margin: 0;
1262     border: 0;
1265 .moodle-dialogue-exception .moodle-exception-param label {
1266     font-weight: bold;
1269 .moodle-dialogue-exception .param-stacktrace label {
1270     background-color: #eee;
1271     border: 1px solid #ccc;
1272     border-bottom-width: 0;
1275 .moodle-dialogue-exception .param-stacktrace pre {
1276     border: 1px solid #ccc;
1277     background-color: #fff;
1280 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1281     color: navy;
1282     font-size: $font-size-sm;
1285 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1286     @extend .text-warning;
1287     font-size: $font-size-sm;
1290 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1291     color: #333;
1292     font-size: 90%;
1293     border-bottom: 1px solid #eee;
1296 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1297     @extend .modal-footer;
1300 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1301     display: none;
1304 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1305     // Undo some YUI damage.
1306     background: initial;
1309 .moodle-dialogue-confirm .confirmation-message {
1310     margin: 0.5em 1em;
1312 .moodle-dialogue-confirm .confirmation-buttons {
1313     text-align: right;
1316 .moodle-dialogue-confirm .confirmation-dialogue input {
1317     min-width: 80px;
1320 .moodle-dialogue-exception .moodle-exception-message {
1321     margin: 1em;
1324 .moodle-dialogue-exception .moodle-exception-param {
1325     margin-bottom: 0.5em;
1328 .moodle-dialogue-exception .moodle-exception-param label {
1329     width: 150px;
1332 .moodle-dialogue-exception .param-stacktrace label {
1333     display: block;
1334     margin: 0;
1335     padding: 4px 1em;
1338 .moodle-dialogue-exception .param-stacktrace pre {
1339     display: block;
1340     height: 200px;
1341     overflow: auto;
1344 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1345     display: inline-block;
1346     margin: 4px 0;
1349 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1350     display: inline-block;
1351     width: 50px;
1352     margin: 4px 1em;
1355 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1356     padding-left: 25px;
1357     margin-bottom: 4px;
1358     padding-bottom: 4px;
1361 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1362     opacity: 0.75;
1363     width: 100%;
1364     height: 100%;
1365     top: 0;
1366     left: 0;
1367     background-color: white;
1368     text-align: center;
1369     padding: 10% 0;
1371 /* Apply a default max-height on tooltip text */
1372 .moodle-dialogue .tooltiptext {
1373     max-height: 300px;
1376 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1377     z-index: 3001;
1379     .moodle-dialogue-bd {
1380         overflow: auto;
1381     }
1384 /**
1385  * Chooser Dialogues (moodle-core-chooserdialogue)
1386  *
1387  * This CSS belong to the chooser dialogue which should work both with, and
1388  * without javascript enabled
1389  */
1390 /* Hide the dialog and it's title */
1391 .chooserdialoguebody,
1392 .choosertitle {
1393     display: none;
1396 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1397     margin: 0;
1400 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1401     padding: 0;
1402     background: #f2f2f2;
1404     @include border-bottom-radius(10px);
1406 /* Center the submit buttons within the area */
1407 .choosercontainer #chooseform .submitbuttons {
1408     padding: 0.7em 0;
1409     text-align: right;
1411 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1413 @media (max-height: 639px) {
1414     .ios.safari .choosercontainer #chooseform .submitbuttons {
1415         padding: 45px 0;
1416     }
1419 .choosercontainer #chooseform .submitbuttons input {
1420     min-width: 100px;
1421     margin: 0 0.5em;
1423 /* Various settings for the options area */
1424 .choosercontainer #chooseform .options {
1425     position: relative;
1426     border-bottom: 1px solid #bbb;
1428 /* Only set these options if we're showing the js container */
1429 .jschooser .choosercontainer #chooseform .alloptions {
1430     overflow-x: hidden;
1431     overflow-y: auto;
1432     max-width: 240px;
1434     .option {
1435         input[type=radio] {
1436             display: inline-block;
1437         }
1439         .typename {
1440             display: inline-block;
1441             width: 55%;
1442         }
1443     }
1445 /* Settings for option rows and option subtypes */
1446 .choosercontainer #chooseform .moduletypetitle,
1447 .choosercontainer #chooseform .option,
1448 .choosercontainer #chooseform .nonoption {
1449     margin-bottom: 0;
1450     padding: 0 1.6em 0 1.6em;
1453 .choosercontainer #chooseform .moduletypetitle {
1454     text-transform: uppercase;
1455     padding-top: 1.2em;
1456     padding-bottom: 0.4em;
1459 .choosercontainer #chooseform .option .typename,
1460 .choosercontainer #chooseform .nonoption .typename {
1461     padding: 0 0 0 0.5em;
1464 .choosercontainer #chooseform .modicon + .typename {
1465     padding-left: 0;
1468 .choosercontainer #chooseform .option input[type=radio],
1469 .choosercontainer #chooseform .option span.typename {
1470     vertical-align: middle;
1473 .choosercontainer #chooseform .option label {
1474     display: block;
1475     margin: 0;
1476     padding: ($spacer / 2) 0;
1477     border-bottom: 1px solid #fff;
1480 .choosercontainer #chooseform .option .icon {
1481     margin: 0;
1482     padding: 0 $spacer;
1485 .choosercontainer #chooseform .nonoption {
1486     padding-left: 2.7em;
1487     padding-top: 0.3em;
1488     padding-bottom: 0.1em;
1491 .choosercontainer #chooseform .subtype {
1492     margin-bottom: 0;
1493     padding: 0 1.6em 0 3.2em;
1496 .choosercontainer #chooseform .subtype .typename {
1497     margin: 0 0 0 0.2em;
1499 /* The instruction/help area */
1500 .jschooser .choosercontainer #chooseform .instruction,
1501 .jschooser .choosercontainer #chooseform .typesummary {
1502     display: none;
1503     position: absolute;
1504     top: 0;
1505     right: 0;
1506     bottom: 0;
1507     left: 240px;
1508     margin: 0;
1509     padding: 1.6em;
1510     background-color: #fff;
1511     overflow-x: hidden;
1512     overflow-y: auto;
1513     line-height: 2em;
1515 /* Selected option settings */
1516 .jschooser .choosercontainer #chooseform .instruction,
1517 .choosercontainer #chooseform .selected .typesummary {
1518     display: block;
1521 .choosercontainer #chooseform .selected {
1522     background-color: #fff;
1523     margin-top: -1px;
1524     padding-top: 1px;
1527 .chooserdialogue-course-modchooser .modicon .icon {
1528     width: 24px;
1529     height: 24px;
1530     font-size: 24px;
1533 @include media-breakpoint-down(xs) {
1534     .jsenabled .choosercontainer #chooseform .alloptions {
1535         max-width: 100%;
1536     }
1538     .jsenabled .choosercontainer #chooseform .instruction,
1539     .jsenabled .choosercontainer #chooseform .typesummary {
1540         position: static;
1541     }
1544 /* Form element: listing */
1545 .formlistingradio {
1546     padding-bottom: 25px;
1547     padding-right: 10px;
1550 .formlistinginputradio {
1551     float: left;
1554 .formlistingmain {
1555     min-height: 225px;
1558 .formlisting {
1559     position: relative;
1560     margin: 15px 0;
1561     padding: 1px 19px 14px;
1562     background-color: white;
1563     border: 1px solid #ddd;
1565     @include border-radius(4px);
1568 .formlistingmore {
1569     position: absolute;
1570     cursor: pointer;
1571     bottom: -1px;
1572     right: -1px;
1573     padding: 3px 7px;
1574     font-size: 12px;
1575     font-weight: bold;
1576     background-color: whitesmoke;
1577     border: 1px solid #ddd;
1578     color: #9da0a4;
1580     @include border-radius(4px 0 4px 0);
1583 .formlistingall {
1584     margin: 15px 0;
1585     padding: 0;
1587     @include border-radius(4px);
1590 .formlistingrow {
1591     cursor: pointer;
1592     border-bottom: 1px solid;
1593     border-color: #e1e1e8;
1594     border-left: 1px solid #e1e1e8;
1595     border-right: 1px solid #e1e1e8;
1596     background-color: #f7f7f9;
1598     @include border-radius(0 0 4px 4px);
1599     padding: 6px;
1600     top: 50%;
1601     left: 50%;
1602     min-height: 34px;
1603     float: left;
1604     width: 150px;
1607 body.jsenabled .formlistingradio {
1608     display: none;
1611 body.jsenabled .formlisting {
1612     display: block;
1615 /* Badges styles */
1616 table.collection {
1617     @extend .table;
1618     @extend .table-bordered;
1619     @extend .table-striped;
1622 a.criteria-action {
1623     padding: 0 3px;
1624     float: right;
1627 div.criteria-description {
1628     padding: 10px 15px;
1629     margin: 5px 0;
1630     background: none repeat scroll 0 0 #f9f9f9;
1631     border: 1px solid #eee;
1634 ul.badges {
1635     margin: 0;
1636     list-style: none;
1639 .badges li {
1640     position: relative;
1641     display: inline-block;
1642     padding-top: 1em;
1643     text-align: center;
1644     vertical-align: top;
1645     width: 150px;
1648 .badges li .badge-name {
1649     display: block;
1650     padding: 5px;
1653 .badges li > img {
1654     position: absolute;
1657 .badges li .badge-image {
1658     width: 100px;
1659     height: 100px;
1660     left: 10px;
1661     top: 0;
1662     z-index: 1;
1665 .badges li .badge-actions {
1666     position: relative;
1669 .badges li .expireimage {
1670     width: 100px;
1671     height: 100px;
1672     left: 25px;
1673     top: 0;
1674     position: absolute;
1675     z-index: 10;
1676     opacity: 0.85;
1679 #badge-image {
1680     background-color: transparent;
1681     padding: 0;
1682     position: relative;
1683     min-width: 100px;
1684     width: 20%;
1685     display: inline-block;
1686     vertical-align: top;
1687     margin-top: 17px;
1688     margin-bottom: 20px;
1690     .expireimage {
1691         width: 100px;
1692         height: 100px;
1693         left: 0;
1694         top: 0;
1695         opacity: 0.85;
1696         position: absolute;
1697         z-index: 10;
1698     }
1700     .singlebutton {
1701         padding-top: 5px;
1702         display: block;
1704         button {
1705             margin-left: 4px;
1706         }
1707     }
1710 #badge-details {
1711     display: inline-block;
1712     width: 79%;
1715 #badge-overview dl,
1716 #badge-details dl {
1717     margin: 0;
1719     dt,
1720     dd {
1721         vertical-align: top;
1722         padding: 3px 0;
1723     }
1725     dt {
1726         clear: both;
1727         display: inline-block;
1728         width: 20%;
1729         min-width: 100px;
1730     }
1732     dd {
1733         display: inline-block;
1734         width: 79%;
1735         margin-left: 1%;
1736     }
1739 .badge-profile {
1740     vertical-align: top;
1743 .connected {
1744     @extend .text-success;
1747 .notconnected {
1748     @extend .text-danger;
1751 .connecting {
1752     @extend .text-warning;
1755 #page-badges-award .recipienttable tr td {
1756     vertical-align: top;
1759 #page-badges-award .recipienttable tr td.actions .actionbutton {
1760     margin: 0.3em 0;
1761     padding: 0.5em 0;
1762     width: 100%;
1765 #page-badges-award .recipienttable tr td.existing,
1766 #page-badges-award .recipienttable tr td.potential {
1767     width: 42%;
1770 #issued-badge-table .activatebadge {
1771     display: inline-block;
1774 .statusbox.active {
1775     background-color: $state-success-bg;
1778 .statusbox.inactive {
1779     background-color: $state-warning-bg;
1782 .statusbox {
1783     text-align: center;
1784     margin-bottom: 5px;
1785     padding: 5px;
1788 .statusbox .activatebadge {
1789     display: inline-block;
1792 .statusbox .activatebadge input[type=submit] {
1793     margin: 3px;
1796 .activatebadge {
1797     margin: 0;
1798     text-align: left;
1799     vertical-align: middle;
1802 img#persona_signin {
1803     cursor: pointer;
1806 .addcourse {
1807     float: right;
1810 .invisiblefieldset {
1811     display: inline;
1812     padding: 0;
1813     border-width: 0;
1816 .breadcrumb-nav {
1817     float: left;
1820 .breadcrumb-button .singlebutton div {
1821     margin-right: 0;
1824 .breadcrumb-nav .breadcrumb {
1825     margin: 0;
1828 /** Page header */
1829 #page-header {
1830     .logo {
1831         margin: $spacer 0;
1832         img {
1833             max-height: 75px;
1834         }
1835     }
1838 /** Header. */
1839 header {
1840     .logo img {
1841         max-height: 35px;
1842     }
1843     .collapse.in,
1844     .collapsing {
1845         display: block;
1846         clear: both;
1847     }
1850 /** Header-bar styles **/
1851 .page-context-header {
1852     // We need to be explicit about the height of the header.
1853     $pageHeaderHeight: 140px;
1855     // Do not remove these rules.
1856     overflow: hidden;
1858     .page-header-image,
1859     .page-header-headings {
1860         float: left;
1861         display: block;
1862         position: relative;
1863     }
1865     .page-header-image {
1866         margin-right: 1em;
1867         margin-bottom: 1em;
1868     }
1870     .page-header-headings,
1871     .header-button-group {
1872         position: relative;
1873         line-height: 24px;
1874         vertical-align: middle;
1875     }
1877     .header-button-group {
1878         display: block;
1879         float: left;
1881         a {
1882             position: relative;
1884             // Don't touch it unless you know exactly what you are doing.
1885             top: -0.4em;
1886         }
1887     }
1890 ul.dragdrop-keyboard-drag li {
1891     list-style-type: none;
1894 a.disabled:hover,
1895 a.disabled {
1896     text-decoration: none;
1897     cursor: default;
1898     font-style: italic;
1899     color: #808080;
1902 body.lockscroll {
1903     height: 100%;
1904     overflow: hidden;
1907 .progressbar_container {
1908     max-width: 500px;
1909     margin: 0 auto;
1912 /* IE10 only fix for calendar titling */
1913 .ie10 .yui3-calendar-header-label {
1914     display: inline-block;
1917 dd:before,
1918 dd:after {
1919     display: block;
1920     content: " ";
1923 dd:after {
1924     clear: both;
1927 // Active tabs with links should have a different
1928 // cursor to indicate they are clickable.
1929 .nav-tabs > .active > a[href],
1930 .nav-tabs > .active > a[href]:hover,
1931 .nav-tabs > .active > a[href]:focus {
1932     cursor: pointer;
1935 .inplaceeditable {
1936     &.inplaceeditingon {
1937         position: relative;
1939         .editinstructions {
1940             margin-top: -30px;
1941             font-weight: normal;
1942             margin-right: 0;
1943             margin-left: 0;
1944             left: 0;
1945             right: auto;
1946             white-space: nowrap;
1947         }
1949         input {
1950             width: 330px;
1951             vertical-align: text-bottom;
1952             margin-bottom: 0;
1953         }
1955         select {
1956             margin-bottom: 0;
1957         }
1958     }
1960     .quickediticon img {
1961         opacity: 0.2;
1962     }
1964     .quickeditlink {
1965         color: inherit;
1966         text-decoration: inherit;
1967     }
1969     &:hover .quickeditlink .quickediticon img,
1970     .quickeditlink:focus .quickediticon img {
1971         opacity: 1;
1972     }
1974     &.inplaceeditable-toggle .quickediticon {
1975         display: none;
1976     }
1979 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
1980     margin-top: -20px;
1983 /** Chart area. */
1984 .chart-area {
1986     .chart-table-data {
1987         display: none;
1988     }
1990     .chart-table {
1991         .chart-output-htmltable caption {
1992             white-space: nowrap;
1993         }
1994         /** When accessible, we display the table only. */
1995         &.accesshide {
1996             .chart-table-expand {
1997                 display: none;
1998             }
1999             .chart-table-data {
2000                 display: block;
2001             }
2002         }
2003     }
2006 // Reset for ul.
2007 ul {
2008     padding-left: 1rem;
2011 /* YUI 2 Tree View */
2012 /*rtl:raw:
2013 .ygtvtn,
2014 .ygtvtm,
2015 .ygtvtmh,
2016 .ygtvtmhh,
2017 .ygtvtp,
2018 .ygtvtph,
2019 .ygtvtphh,
2020 .ygtvln,
2021 .ygtvlm,
2022 .ygtvlmh,
2023 .ygtvlmhh,
2024 .ygtvlp,
2025 .ygtvlph,
2026 .ygtvlphh,
2027 .ygtvdepthcell,
2028 .ygtvok,
2029 .ygtvok:hover,
2030 .ygtvcancel,
2031 .ygtvcancel:hover {
2032     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
2034 */
2036 .hover-tooltip-container {
2037     position: relative;
2039     .hover-tooltip {
2040         opacity: 0;
2041         visibility: hidden;
2042         position: absolute;
2043         /*rtl:ignore*/
2044         left: 50%;
2045         top: calc(-50% - 5px);
2046         transform: translate(-50%, -50%);
2047         background-color: #fff;
2048         border: 1px solid rgba(0, 0, 0, .2);
2049         border-radius: .3rem;
2050         box-sizing: border-box;
2051         padding: 5px;
2052         white-space: nowrap;
2053         transition: opacity 0.15s, visibility 0.15s;
2054         z-index: 1000;
2056         &:before {
2057             content: '';
2058             display: inline-block;
2059             border-left: 8px solid transparent;
2060             border-right: 8px solid transparent;
2061             border-top: 8px solid rgba(0, 0, 0, .2);
2062             position: absolute;
2063             bottom: -8px;
2064             left: calc(50% - 8px);
2065         }
2067         &:after {
2068             content: '';
2069             display: inline-block;
2070             border-left: 7px solid transparent;
2071             border-right: 7px solid transparent;
2072             border-top: 7px solid #fff;
2073             position: absolute;
2074             bottom: -6px;
2075             left: calc(50% - 7px);
2076             z-index: 2;
2077         }
2078     }
2080     &:hover {
2081         .hover-tooltip {
2082             opacity: 1;
2083             visibility: visible;
2084             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2085         }
2086     }
2089 #region-flat-nav {
2090     padding-right: 0;
2091     padding-left: 0;
2092     .nav {
2093         margin-right: $grid-gutter-width / 2;
2094         background-color: $card-bg;
2095     }
2096     @include media-breakpoint-down(sm) {
2097         .nav {
2098             margin-top: $grid-gutter-width;
2099             margin-right: 0;
2100         }
2101     }
2104 // Footer link colour was added to allow the colour of footer links to be changed,
2105 // but really in bootstrap we want the colour of links on .bg-inverse to be changed
2106 // rather than being specific to the footer. This is kept for backwards compatibility.
2107 $footer-link-color: $bg-inverse-link-color !default;
2108 #page-footer a {
2109     color: $footer-link-color;
2110     text-decoration: underline;
2111     .icon {
2112         color: $footer-link-color;
2113     }
2116 .bg-inverse a {
2117     color: $bg-inverse-link-color;
2118     text-decoration: underline;
2119     .icon {
2120         color: $bg-inverse-link-color;
2121     }
2124 .sitelink {
2125     img {
2126         width: 112px;
2127     }
2130 // Make links in a menu clickable anywhere in the row.
2131 .dropdown-item a {
2132     display: block;
2133     width: 100%;
2134     color: $body-color;
2137 .competency-tree {
2138     ul {
2139         padding-left: 1.5rem;
2140     }
2143 .sr-only-focusable {
2144     &:active,
2145     &:focus {
2146         z-index: $zindex-navbar-fixed + 1;
2147         position: fixed;
2148         background: #fff;
2149         padding: 7px;
2150         left: 0;
2151         top: 0;
2152     }
2155 [data-drag-type="move"] {
2156     cursor: move;
2159 .clickable {
2160     cursor: pointer;
2163 .overlay-icon-container {
2164     position: absolute;
2165     top: 0;
2166     left: 0;
2167     width: 100%;
2168     height: 100%;
2169     background-color: rgba(255, 255, 255, 0.6);
2171     .loading-icon {
2172         position: absolute;
2173         top: 50%;
2174         left: 50%;
2175         transform: translate(-50%, -50%);
2177         .icon {
2178             height: 40px;
2179             width: 40px;
2181         }
2182     }