ffa9548305d0a4c4b4e5d175e826553d2849129f
[moodle.git] / theme / boost / scss / moodle / core.scss
1 /* core.less */
3 /** Page layout CSS starts **/
4 .layout-option-noheader #page-header,
5 .layout-option-nonavbar #page-navbar,
6 .layout-option-nofooter #page-footer,
7 .layout-option-nocourseheader .course-content-header,
8 .layout-option-nocoursefooter .course-content-footer {
9     display: none;
10 }
12 /** Page layout CSS ends **/
14 .mdl-left {
15     text-align: left;
16 }
18 .mdl-right {
19     text-align: right;
20 }
22 /*rtl:ignore*/
23 .text-ltr {
24     direction: ltr !important; /* stylelint-disable-line declaration-no-important */
25 }
27 #add,
28 #remove,
29 .centerpara,
30 .mdl-align {
31     text-align: center;
32 }
34 a.dimmed,
35 a.dimmed:link,
36 a.dimmed:visited,
37 a.dimmed_text,
38 a.dimmed_text:link,
39 a.dimmed_text:visited,
40 .dimmed_text,
41 .dimmed_text a,
42 .dimmed_text a:link,
43 .dimmed_text a:visited,
44 .usersuspended,
45 .usersuspended a,
46 .usersuspended a:link,
47 .usersuspended a:visited,
48 .dimmed_category,
49 .dimmed_category a {
50     @extend .text-muted;
51 }
53 .activity.label .dimmed_text {
54     opacity: 0.5;
55 }
57 .unlist,
58 .unlist li,
59 .inline-list,
60 .inline-list li,
61 .block .list,
62 .block .list li,
63 .section li.activity,
64 .section li.movehere,
65 .tabtree li {
66     list-style: none;
67     margin: 0;
68     padding: 0;
69 }
71 .inline,
72 .inline-list li {
73     display: inline;
74 }
76 .notifytiny {
77     font-size: $font-size-xs;
78 }
80 .notifytiny li,
81 .notifytiny td {
82     font-size: 100%;
83 }
85 .red,
86 .notifyproblem {
87     @extend .text-warning;
88 }
90 .green,
91 .notifysuccess {
92     @extend .text-success;
93 }
95 .highlight {
96     @extend .text-info;
97 }
99 .reportlink {
100     text-align: right;
103 a.autolink.glossary:hover {
104     cursor: help;
106 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
107 .collapsibleregioncaption {
108     white-space: nowrap;
111 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
112     cursor: pointer;
115 .collapsibleregioncaption img {
116     vertical-align: middle;
119 .jsenabled .hiddenifjs {
120     display: none;
123 .visibleifjs {
124     display: none;
127 .jsenabled .visibleifjs {
128     display: inline;
131 .jsenabled .collapsibleregion {
132     overflow: hidden;
135 .jsenabled .collapsed .collapsibleregioninner {
136     visibility: hidden;
139 .collapsible-actions {
140     display: none;
141     text-align: right;
144 .jsenabled .collapsible-actions {
145     display: block;
148 .collapsible-actions .collapseexpand {
149     padding-left: 20px;
150     background: url([[pix:t/collapsed]]) 2px center no-repeat;
152 /*rtl:raw:
153 .collapsible-actions .collapseexpand {
154     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
156 */
157 .collapsible-actions .collapse-all {
158     background-image: url([[pix:t/expanded]]);
161 .yui-overlay .yui-widget-bd {
162     background-color: #ffee69;
163     border: 1px solid #a6982b;
164     border-top-color: #d4c237;
165     color: #000;
166     left: 0;
167     padding: 2px 5px;
168     position: relative;
169     top: 0;
170     z-index: 1;
173 .clearer {
174     background: transparent;
175     border-width: 0;
176     clear: both;
177     display: block;
178     height: 1px;
179     margin: 0;
180     padding: 0;
183 .bold,
184 .warning,
185 .errorbox .title,
186 .pagingbar .title,
187 .pagingbar .thispage {
188     font-weight: bold;
191 img.userpicture {
192     margin-right: 0.5rem;
195 img.resize {
196     height: 1em;
197     width: 1em;
200 .action-menu .dropdown-toggle {
201     text-decoration: none;
204 .action-menu {
205     white-space: nowrap;
208 .action-menu .userpicture {
209     width: auto;
210     height: auto;
211     margin-left: 1rem;
214 .block img.resize,
215 .breadcrumb img.resize {
216     height: 0.9em;
217     width: 0.8em;
219 /* Icon styles */
220 img.activityicon {
221     height: 24px;
222     width: 24px;
223     vertical-align: middle;
226 .headermain {
227     font-weight: bold;
230 #maincontent {
231     display: block;
232     height: 1px;
233     overflow: hidden;
236 img.uihint {
237     cursor: help;
240 #addmembersform table {
241     margin-left: auto;
242     margin-right: auto;
245 table.flexible .emptyrow {
246     display: none;
249 form.popupform,
250 form.popupform div {
251     display: inline;
254 .arrow_button input {
255     overflow: hidden;
257 /** The 1-pixel padding is there to avoid phantom scroll bars on OS X (FF, Safari and Chrome)**/
258 .no-overflow {
259     overflow: auto;
260     padding-bottom: 1px;
263 .pagelayout-report .no-overflow {
264     overflow: visible;
267 .no-overflow > .generaltable {
268     margin-bottom: 0;
270 // Accessibility features
272 // Accessibility: text 'seen' by screen readers but not visual users.
273 .accesshide {
274     position: absolute;
275     left: -10000px;
276     font-weight: normal;
277     font-size: 1em;
280 span.hide,
281 div.hide {
282     display: none;
284 // Accessibility: Skip block link, for keyboard-only users.
285 a.skip-block,
286 a.skip {
287     position: absolute;
288     top: -1000em;
289     font-size: 0.85em;
290     text-decoration: none;
293 a.skip-block:focus,
294 a.skip-block:active,
295 a.skip:focus,
296 a.skip:active {
297     position: static;
298     display: block;
301 .skip-block-to {
302     display: block;
303     height: 1px;
304     overflow: hidden;
306 // Blogs
307 .addbloglink {
308     text-align: center;
311 .blog_entry .audience {
312     text-align: right;
313     padding-right: 4px;
316 .blog_entry .tags {
317     margin-top: 15px;
320 .blog_entry .content {
321     margin-left: 43px;
323 // Group
324 #page-group-index #groupeditform {
325     text-align: center;
328 #doc-contents h1 {
329     margin: 1em 0 0 0;
332 #doc-contents ul {
333     margin: 0;
334     padding: 0;
335     width: 90%;
338 #doc-contents ul li {
339     list-style-type: none;
342 .groupmanagementtable td {
343     vertical-align: top;
346 .groupmanagementtable #existingcell,
347 .groupmanagementtable #potentialcell {
348     width: 42%;
351 .groupmanagementtable #buttonscell {
352     width: 16%;
355 .groupmanagementtable #buttonscell p.arrow_button input {
356     width: auto;
357     min-width: 80%;
358     margin: 0 auto;
361 .groupmanagementtable #removeselect_wrapper,
362 .groupmanagementtable #addselect_wrapper {
363     width: 100%;
366 .groupmanagementtable #removeselect_wrapper label,
367 .groupmanagementtable #addselect_wrapper label {
368     font-weight: normal;
371 #group-usersummary {
372     width: 14em;
375 .groupselector {
376     margin-top: 3px;
377     margin-bottom: 3px;
378     display: inline-block;
381 .groupselector label {
382     display: inline-block;
385 // Login
386 .login-page {
387     [name="username"] {
388         margin-bottom: -1px;
389         border-bottom-right-radius: 0;
390         border-bottom-left-radius: 0;
391     }
393     [type="password"] {
394         margin-bottom: 10px;
395         border-top-left-radius: 0;
396         border-top-right-radius: 0;
397     }
400 // Notes
401 .notepost {
402     margin-bottom: 1em;
405 .notepost .userpicture {
406     float: left;
407     margin-right: 5px;
410 .notepost .content,
411 .notepost .footer {
412     clear: both;
415 .notesgroup {
416     margin-left: 20px;
419 // My Moodle
420 .path-my .coursebox {
421     margin: $spacer-y 0;
422     padding: 0;
424     .overview {
425         margin: 15px 30px 10px 30px;
426     }
429 .path-my .coursebox .info {
430     float: none;
431     margin: 0;
434 // Modules
435 .mod_introbox {
436     padding: 10px;
439 table.mod_index {
440     width: 100%;
443 // Comments
444 .comment-ctrl {
445     font-size: 12px;
446     display: none;
447     margin: 0;
448     padding: 0;
451 .comment-ctrl h5 {
452     margin: 0;
453     padding: 5px;
456 .comment-area {
457     max-width: 400px;
458     padding: 5px;
461 .comment-area textarea {
462     width: 100%;
463     overflow: auto;
465     &.fullwidth {
466         -webkit-box-sizing: border-box;
467         -moz-box-sizing: border-box;
468         box-sizing: border-box;
469     }
472 .comment-area .fd {
473     text-align: right;
476 .comment-meta span {
477     color: gray;
480 .comment-link img {
481     vertical-align: text-bottom;
484 .comment-list {
485     font-size: 11px;
486     overflow: auto;
487     list-style: none;
488     padding: 0;
489     margin: 0;
492 .comment-list li {
493     margin: 2px;
494     list-style: none;
495     margin-bottom: 5px;
496     clear: both;
497     padding: .3em;
498     position: relative;
501 .comment-list li.first {
502     display: none;
505 .comment-paging {
506     text-align: center;
509 .comment-paging .pageno {
510     padding: 2px;
513 .comment-paging .curpage {
514     border: 1px solid #ccc;
517 .comment-message .picture {
518     width: 20px;
519     float: left;
522 .comment-message .text {
523     margin: 0;
524     padding: 0;
527 .comment-message .text p {
528     padding: 0;
529     margin: 0 18px 0 0;
532 .comment-delete {
533     position: absolute;
534     top: 0;
535     right: 0;
536     margin: .3em;
539 .comment-report-selectall {
540     display: none;
543 .comment-link {
544     display: none;
547 .jsenabled .comment-link {
548     display: block;
551 .jsenabled .showcommentsnonjs {
552     display: none;
555 .jsenabled .comment-report-selectall {
556     display: inline;
558 /**
559 * Completion progress report
560 */
561 .completion-expired {
562     @extend .text-warning;
565 .completion-expected {
566     font-size: $font-size-xs;
569 .completion-sortchoice,
570 .completion-identifyfield {
571     font-size: $font-size-xs;
572     vertical-align: bottom;
575 .completion-progresscell {
576     text-align: right;
579 .completion-expired .completion-expected {
580     font-weight: bold;
582 /**
583 * Tags
584 */
585 img.user-image {
586     height: 100px;
587     width: 100px;
590 #tag-search-box {
591     text-align: center;
592     margin: 10px auto;
595 .path-tag .tag-index-items .tagarea {
596     border: 1px solid #e3e3e3;
597     border-radius: 4px;
598     padding: 10px;
599     margin-top: 10px;
602 .path-tag .tag-index-items .tagarea h3 {
603     display: block;
604     padding: 3px 0 10px 0;
605     margin: 0;
606     font-size: 1.1em;
607     font-weight: bold;
608     line-height: 20px;
609     color: #999;
610     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
611     text-transform: uppercase;
612     word-wrap: break-word;
613     border-bottom: solid 1px #e3e3e3;
614     margin-bottom: 10px;
617 .path-tag .tagarea .controls,
618 .path-tag .tagarea .taggeditems {
619     @include clearfix();
622 .path-tag .tagarea .controls,
623 .path-tag .tag-backtoallitems {
624     text-align: center;
627 .path-tag .tagarea .controls .gotopage.nextpage {
628     float: right;
631 .path-tag .tagarea .controls .gotopage.prevpage {
632     float: left;
635 .path-tag .tagarea .controls .exclusivemode {
636     display: inline-block;
639 .path-tag .tagarea .controls.controls-bottom {
640     margin-top: 5px;
643 .path-tag .tagarea .controls .gotopage.nextpage::after {
644     padding-right: 5px;
645     padding-left: 5px;
646     content: "»";
649 .path-tag .tagarea .controls .gotopage.prevpage::before {
650     padding-right: 5px;
651     padding-left: 5px;
652     content: "«";
655 span.flagged-tag,
656 tr.flagged-tag,
657 span.flagged-tag a,
658 tr.flagged-tag a {
659     @extend .text-warning;
662 .tag-management-table td,
663 .tag-management-table th {
664     vertical-align: middle;
665     padding: 4px;
668 .tag-management-table .inplaceeditable.inplaceeditingon input {
669     width: 150px;
672 .path-admin-tag .addstandardtags {
673     float: right;
675     img {
676         margin: 0 5px;
677     }
680 .path-tag .tag-relatedtags {
681     padding-top: 10px;
684 .path-tag .tag-management-box {
685     text-align: right;
688 .path-tag .tag-index-toc {
689     padding: 10px;
690     text-align: center;
693 .path-tag .tag-index-toc li,
694 .path-tag .tag-management-box li {
695     margin-left: 5px;
696     margin-right: 5px;
699 .path-tag .tag-management-box li a.edittag {
700     background-image: url([[pix:moodle|i/settings]]);
703 .path-tag .tag-management-box li a.flagasinappropriate {
704     background-image: url([[pix:moodle|i/flagged]]);
707 .path-tag .tag-management-box li a.removefrommyinterests {
708     background-image: url([[pix:moodle|t/delete]]);
711 .path-tag .tag-management-box li a.addtomyinterests {
712     background-image: url([[pix:moodle|t/add]]);
715 .path-tag .tag-management-box li a {
716     background-repeat: no-repeat;
717     background-position: left;
718     padding-left: 17px;
721 .tag_feed.media-list .media .itemimage {
722     float: left;
725 .tag_feed.media-list .media .itemimage img {
726     height: 35px;
727     width: 35px;
730 .tag_feed.media-list .media .media-body {
731     padding-right: 10px;
732     padding-left: 10px;
735 .tag_feed .media .muted a {
736     @extend .text-muted;
739 .tag_cloud {
740     text-align: center;
743 .tag_cloud .inline-list li {
744     padding: 0 0.2em;
747 .tag_cloud .tag_overflow {
748     margin-top: 1em;
749     font-style: italic;
752 .tag_cloud .s20 {
753     font-size: 2.7em;
756 .tag_cloud .s19 {
757     font-size: 2.6em;
760 .tag_cloud .s18 {
761     font-size: 2.5em;
764 .tag_cloud .s17 {
765     font-size: 2.4em;
768 .tag_cloud .s16 {
769     font-size: 2.3em;
772 .tag_cloud .s15 {
773     font-size: 2.2em;
776 .tag_cloud .s14 {
777     font-size: 2.1em;
780 .tag_cloud .s13 {
781     font-size: 2em;
784 .tag_cloud .s12 {
785     font-size: 1.9em;
788 .tag_cloud .s11 {
789     font-size: 1.8em;
792 .tag_cloud .s10 {
793     font-size: 1.7em;
796 .tag_cloud .s9 {
797     font-size: 1.6em;
800 .tag_cloud .s8 {
801     font-size: 1.5em;
804 .tag_cloud .s7 {
805     font-size: 1.4em;
808 .tag_cloud .s6 {
809     font-size: 1.3em;
812 .tag_cloud .s5 {
813     font-size: 1.2em;
816 .tag_cloud .s4 {
817     font-size: 1.1em;
820 .tag_cloud .s3 {
821     font-size: 1em;
824 .tag_cloud .s2 {
825     font-size: 0.9em;
828 .tag_cloud .s1 {
829     font-size: 0.8em;
832 .tag_cloud .s0 {
833     font-size: 0.7em;
836 .tag_list ul {
837     display: inline;
840 .tag_list.hideoverlimit .overlimit {
841     display: none;
844 .tag_list .tagmorelink {
845     display: none;
848 .tag_list.hideoverlimit .tagmorelink {
849     display: inline;
852 .tag_list.hideoverlimit .taglesslink {
853     display: none;
856 /**
857 * Web Service
858 */
859 #webservice-doc-generator td {
860     text-align: left;
861     border: 0 solid black;
863 /**
864 * Smart Select Element
865 */
866 .smartselect {
867     position: absolute;
870 .smartselect .smartselect_mask {
871     background-color: #fff;
874 .smartselect ul {
875     padding: 0;
876     margin: 0;
879 .smartselect ul li {
880     list-style: none;
883 .smartselect .smartselect_menu {
884     margin-right: 5px;
887 .safari .smartselect .smartselect_menu {
888     margin-left: 2px;
891 .smartselect .smartselect_menu,
892 .smartselect .smartselect_submenu {
893     border: 1px solid #000;
894     background-color: #fff;
895     display: none;
898 .smartselect .smartselect_menu.visible,
899 .smartselect .smartselect_submenu.visible {
900     display: block;
903 .smartselect .smartselect_menu_content ul li {
904     position: relative;
905     padding: 2px 5px;
908 .smartselect .smartselect_menu_content ul li a {
909     color: #333;
910     text-decoration: none;
913 .smartselect .smartselect_menu_content ul li a.selectable {
914     color: inherit;
917 .smartselect .smartselect_submenuitem {
918     background-image: url([[pix:moodle|t/collapsed]]);
919     background-repeat: no-repeat;
920     background-position: 100%;
922 /** Spanning mode */
923 .smartselect.spanningmenu .smartselect_submenu {
924     position: absolute;
925     top: -1px;
926     left: 100%;
929 .smartselect.spanningmenu .smartselect_submenu a {
930     white-space: nowrap;
931     padding-right: 16px;
934 .smartselect.spanningmenu .smartselect_menu_content ul li a.selectable:hover {
935     text-decoration: underline;
937 /** Compact mode */
938 .smartselect.compactmenu .smartselect_submenu {
939     position: relative;
940     margin: 2px -3px;
941     margin-left: 10px;
942     display: none;
943     border-width: 0;
944     z-index: 1010;
947 .smartselect.compactmenu .smartselect_submenu.visible {
948     display: block;
951 .smartselect.compactmenu .smartselect_menu {
952     z-index: 1000;
953     overflow: hidden;
956 .smartselect.compactmenu .smartselect_submenu .smartselect_submenu {
957     z-index: 1020;
960 .smartselect.compactmenu .smartselect_submenuitem:hover > .smartselect_menuitem_label {
961     font-weight: bold;
963 /**
964 * Registration
965 */
966 #page-admin-registration-register .registration_textfield {
967     width: 300px;
969 /**
970 * Enrol
971 */
972 .userenrolment {
973     width: 100%;
974     border-collapse: collapse;
977 .userenrolment tr {
978     vertical-align: top;
981 .userenrolment td {
982     padding: 0;
983     height: 41px;
986 .userenrolment .subfield {
987     margin-right: 5px;
990 .userenrolment .col_userdetails .subfield {
991     margin-left: 40px;
994 .userenrolment .col_userdetails .subfield_picture {
995     float: left;
996     margin-left: 0;
999 .userenrolment .col_lastseen {
1000     width: 150px;
1003 .userenrolment .col_role {
1004     width: 262px;
1007 .userenrolment .col_role .roles,
1008 .userenrolment .col_group .groups {
1009     margin-right: 30px;
1012 .userenrolment .col_role .role,
1013 .userenrolment .col_group .group {
1014     float: left;
1015     padding: 3px;
1016     margin: 3px;
1017     white-space: nowrap;
1020 .userenrolment .col_role .role a,
1021 .userenrolment .col_group .group a {
1022     margin-left: 3px;
1023     cursor: pointer;
1026 .userenrolment .col_role .addrole,
1027 .userenrolment .col_group .addgroup {
1028     float: right;
1029     padding: 3px;
1030     margin: 3px;
1032     > a:hover {
1033         border-bottom: 1px solid #666;
1034     }
1037 .userenrolment .col_role .addrole img,
1038 .userenrolment .col_group .addgroup img {
1039     vertical-align: baseline;
1042 .userenrolment .hasAllRoles .col_role .addrole {
1043     display: none;
1046 .userenrolment .col_enrol .enrolment {
1047     float: left;
1048     padding: 3px;
1049     margin: 3px;
1052 .userenrolment .col_enrol .enrolment a {
1053     float: right;
1054     margin-left: 3px;
1057 #page-enrol-users {
1058     .enrol_user_buttons {
1059         float: right;
1061         .enrolusersbutton {
1062             display: inline;
1064             div,
1065             form {
1066                 display: inline;
1067                 margin-right: 0;
1068             }
1069         }
1070     }
1072     #filterform {
1073         @extend .card;
1074         display: inline-block;
1076         .fitem {
1077             display: inline-block;
1078             line-height: $line-height-base * 2;
1079             margin-right: .3em;
1080             white-space: nowrap;
1082             label {
1083                 display: inline;
1084                 line-height: $line-height-base;
1085                 padding-right: .3em;
1086             }
1088             :before,
1089             :after {
1090                 display: inline;
1091             }
1092         }
1094         div,
1095         fieldset {
1096             display: inline-block;
1097             clear: none;
1098             width: auto;
1099             margin: 0;
1100         }
1102         select,
1103         .ftext input {
1104             width: 7em;
1105         }
1107         input,
1108         select {
1109             margin-bottom: 0;
1110         }
1111     }
1113     .user-enroller-panel .uep-search-results .user .details {
1114         width: 237px;
1115     }
1117     .user-enroller-panel .uep-search-results .cohort .details {
1118         width: 237px;
1119     }
1122 #page-enrol-users .enrol-users-page-action input {
1123     margin-left: 0;
1126 .corelightbox {
1127     background-color: #ccc;
1128     position: absolute;
1129     top: 0;
1130     left: 0;
1131     width: 100%;
1132     height: 100%;
1133     text-align: center;
1136 .corelightbox img {
1137     position: fixed;
1138     top: 50%;
1139     left: 50%;
1142 .mod-indent-outer {
1143     display: table;
1146 .mod-indent {
1147     display: table-cell;
1150 .label .mod-indent {
1151     float: left;
1152     padding-top: 20px;
1154 $mod-indent-size: 30px;
1155 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1157 @for $i from 1 through 16 {
1158     $width: ($i * $mod-indent-size);
1160     .mod-indent-#{$i} {
1161         width: $width;
1162     }
1165 .mod-indent-huge {
1166     width: (16 * $mod-indent-size);
1169 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1170 .resourcecontent .mediaplugin_mp3 object {
1171     height: 25px;
1172     width: 600px;
1175 .resourcecontent audio.mediaplugin_html5audio {
1176     width: 600px;
1178 /** Large resource images should avoid hidden overflow **/
1179 .resourceimage {
1180     max-width: 100%;
1182 /* Audio player size in 'inline' mode (can only change width, as above) */
1183 .mediaplugin_mp3 object {
1184     height: 15px;
1185     width: 300px;
1188 audio.mediaplugin_html5audio {
1189     width: 300px;
1191 /* TinyMCE moodle media preview frame should not have padding */
1192 .core_media_preview.pagelayout-embedded #content {
1193     padding: 0;
1196 .core_media_preview.pagelayout-embedded #maincontent {
1197     height: 0;
1200 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1201     padding: 0;
1202     margin: 0;
1203     min-width: 0;
1204     background: none;
1207 .path-rating .ratingtable {
1208     width: 100%;
1209     margin-bottom: 1em;
1212 .path-rating .ratingtable th.rating {
1213     width: 100%;
1216 .path-rating .ratingtable td.rating,
1217 .path-rating .ratingtable td.time {
1218     white-space: nowrap;
1219     text-align: center;
1222 .initialbar {
1223     a,
1224     strong {
1225         padding-left: 3px;
1226         padding-right: 3px;
1227     }
1230 /** Moodle modals. */
1231 .modal.show {
1232     display: block;
1235 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1236 .moodle-dialogue-base .moodle-dialogue-lightbox {
1237     background-color: $gray;
1240 .moodle-dialogue-base .hidden,
1241 .moodle-dialogue-base .moodle-dialogue-hidden {
1242     display: none;
1245 .no-scrolling {
1246     overflow: hidden;
1249 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1250     left: 0;
1251     top: 0;
1252     right: 0;
1253     bottom: -50px;
1254     position: fixed;
1257 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1258     overflow: auto;
1261 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1262     width: 28px;
1263     height: 16px;
1264     background-size: 100%;
1267 .moodle-dialogue-base .moodle-dialogue-wrap {
1268     background-color: #fff;
1269     border: 1px solid #ccc;
1272 .moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content {
1273     @extend .modal-content;
1276 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1277     @extend .modal-header;
1280 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1281     // Undo some YUI damage.
1282     min-height: 3rem;
1283     color: initial;
1284     background: initial;
1285     font-size: 1.5rem;
1286     line-height: 1.5;
1289 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1290     @extend .modal-title;
1293 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1294     padding: $spacer;
1297 .moodle-dialogue-base .closebutton {
1298     @extend .close;
1299     box-shadow: none;
1300     &::after {
1301         content: "×";
1302     }
1305 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1306     @extend .modal-body;
1309 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1310     overflow: auto;
1311     position: absolute;
1312     top: 0;
1313     bottom: 50px;
1314     left: 0;
1315     right: 0;
1316     margin: 0;
1317     border: 0;
1320 .moodle-dialogue-confirm .confirmation-dialogue {
1321     text-align: center;
1324 .moodle-dialogue-confirm .confirmation-dialogue input {
1325     text-align: center;
1328 .moodle-dialogue-exception .moodle-exception-message {
1329     text-align: center;
1332 .moodle-dialogue-exception .moodle-exception-param label {
1333     font-weight: bold;
1336 .moodle-dialogue-exception .param-stacktrace label {
1337     background-color: #eee;
1338     border: 1px solid #ccc;
1339     border-bottom-width: 0;
1342 .moodle-dialogue-exception .param-stacktrace pre {
1343     border: 1px solid #ccc;
1344     background-color: #fff;
1347 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1348     color: navy;
1349     font-size: $font-size-sm;
1352 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1353     @extend .text-warning;
1354     font-size: $font-size-sm;
1357 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1358     color: #333;
1359     font-size: 90%;
1360     border-bottom: 1px solid #eee;
1363 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1364     @extend .modal-footer;
1367 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1368     display: none;
1371 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1372     // Undo some YUI damage.
1373     background: initial;
1376 .moodle-dialogue-confirm .confirmation-message {
1377     margin: 0.5em 1em;
1380 .moodle-dialogue-confirm .confirmation-dialogue input {
1381     min-width: 80px;
1384 .moodle-dialogue-exception .moodle-exception-message {
1385     margin: 1em;
1388 .moodle-dialogue-exception .moodle-exception-param {
1389     margin-bottom: 0.5em;
1392 .moodle-dialogue-exception .moodle-exception-param label {
1393     width: 150px;
1396 .moodle-dialogue-exception .param-stacktrace label {
1397     display: block;
1398     margin: 0;
1399     padding: 4px 1em;
1402 .moodle-dialogue-exception .param-stacktrace pre {
1403     display: block;
1404     height: 200px;
1405     overflow: auto;
1408 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1409     display: inline-block;
1410     margin: 4px 0;
1413 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1414     display: inline-block;
1415     width: 50px;
1416     margin: 4px 1em;
1419 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1420     padding-left: 25px;
1421     margin-bottom: 4px;
1422     padding-bottom: 4px;
1425 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1426     opacity: 0.75;
1427     width: 100%;
1428     height: 100%;
1429     top: 0;
1430     left: 0;
1431     background-color: white;
1432     text-align: center;
1433     padding: 10% 0;
1435 /* Apply a default max-height on tooltip text */
1436 .moodle-dialogue .tooltiptext {
1437     max-height: 300px;
1440 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1441     z-index: 3001;
1443     .moodle-dialogue-bd {
1444         overflow: auto;
1445     }
1448 /**
1449  * Chooser Dialogues (moodle-core-chooserdialogue)
1450  *
1451  * This CSS belong to the chooser dialogue which should work both with, and
1452  * without javascript enabled
1453  */
1454 /* Hide the dialog and it's title */
1455 .chooserdialoguebody,
1456 .choosertitle {
1457     display: none;
1460 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1461     margin: 0;
1464 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1465     padding: 0;
1466     background: #f2f2f2;
1468     @include border-bottom-radius(10px);
1470 /* Center the submit buttons within the area */
1471 .choosercontainer #chooseform .submitbuttons {
1472     padding: 0.7em 0;
1473     text-align: center;
1475 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1477 @media (max-height: 639px) {
1478     .ios.safari .choosercontainer #chooseform .submitbuttons {
1479         padding: 45px 0;
1480     }
1483 .choosercontainer #chooseform .submitbuttons input {
1484     min-width: 100px;
1485     margin: 0 0.5em;
1487 /* Various settings for the options area */
1488 .choosercontainer #chooseform .options {
1489     position: relative;
1490     border-bottom: 1px solid #bbb;
1492 /* Only set these options if we're showing the js container */
1493 .jschooser .choosercontainer #chooseform .alloptions {
1494     overflow-x: hidden;
1495     overflow-y: auto;
1496     max-width: 240px;
1498     .option {
1499         input[type=radio] {
1500             display: inline-block;
1501         }
1503         .typename {
1504             display: inline-block;
1505             width: 55%;
1506         }
1507     }
1509 /* Settings for option rows and option subtypes */
1510 .choosercontainer #chooseform .moduletypetitle,
1511 .choosercontainer #chooseform .option,
1512 .choosercontainer #chooseform .nonoption {
1513     margin-bottom: 0;
1514     padding: 0 1.6em 0 1.6em;
1517 .choosercontainer #chooseform .moduletypetitle {
1518     text-transform: uppercase;
1519     padding-top: 1.2em;
1520     padding-bottom: 0.4em;
1523 .choosercontainer #chooseform .option .typename,
1524 .choosercontainer #chooseform .nonoption .typename {
1525     padding: 0 0 0 0.5em;
1528 .choosercontainer #chooseform .modicon + .typename {
1529     padding-left: 0;
1532 .choosercontainer #chooseform .option input[type=radio],
1533 .choosercontainer #chooseform .option span.typename {
1534     vertical-align: middle;
1537 .choosercontainer #chooseform .option label {
1538     display: block;
1539     margin: 0;
1540     padding: ($spacer / 2) 0;
1541     border-bottom: 1px solid #fff;
1544 .choosercontainer #chooseform .option .icon {
1545     margin: 0;
1546     padding: 0 $spacer;
1549 .choosercontainer #chooseform .nonoption {
1550     padding-left: 2.7em;
1551     padding-top: 0.3em;
1552     padding-bottom: 0.1em;
1555 .choosercontainer #chooseform .subtype {
1556     margin-bottom: 0;
1557     padding: 0 1.6em 0 3.2em;
1560 .choosercontainer #chooseform .subtype .typename {
1561     margin: 0 0 0 0.2em;
1563 /* The instruction/help area */
1564 .jschooser .choosercontainer #chooseform .instruction,
1565 .jschooser .choosercontainer #chooseform .typesummary {
1566     display: none;
1567     position: absolute;
1568     top: 0;
1569     right: 0;
1570     bottom: 0;
1571     left: 240px;
1572     margin: 0;
1573     padding: 1.6em;
1574     background-color: #fff;
1575     overflow-x: hidden;
1576     overflow-y: auto;
1577     line-height: 2em;
1579 /* Selected option settings */
1580 .jschooser .choosercontainer #chooseform .instruction,
1581 .choosercontainer #chooseform .selected .typesummary {
1582     display: block;
1585 .choosercontainer #chooseform .selected {
1586     background-color: #fff;
1587     margin-top: -1px;
1588     padding-top: 1px;
1591 .chooserdialogue-course-modchooser .modicon .icon {
1592     width: 24px;
1593     height: 24px;
1596 @include media-breakpoint-down(xs) {
1597     .jsenabled .choosercontainer #chooseform .alloptions {
1598         max-width: 100%;
1599     }
1601     .jsenabled .choosercontainer #chooseform .instruction,
1602     .jsenabled .choosercontainer #chooseform .typesummary {
1603         position: static;
1604     }
1607 /* Form element: listing */
1608 .formlistingradio {
1609     padding-bottom: 25px;
1610     padding-right: 10px;
1613 .formlistinginputradio {
1614     float: left;
1617 .formlistingmain {
1618     min-height: 225px;
1621 .formlisting {
1622     position: relative;
1623     margin: 15px 0;
1624     padding: 1px 19px 14px;
1625     background-color: white;
1626     border: 1px solid #ddd;
1628     @include border-radius(4px);
1631 .formlistingmore {
1632     position: absolute;
1633     cursor: pointer;
1634     bottom: -1px;
1635     right: -1px;
1636     padding: 3px 7px;
1637     font-size: 12px;
1638     font-weight: bold;
1639     background-color: whitesmoke;
1640     border: 1px solid #ddd;
1641     color: #9da0a4;
1643     @include border-radius(4px 0 4px 0);
1646 .formlistingall {
1647     margin: 15px 0;
1648     padding: 0;
1650     @include border-radius(4px);
1653 .formlistingrow {
1654     cursor: pointer;
1655     border-bottom: 1px solid;
1656     border-color: #e1e1e8;
1657     border-left: 1px solid #e1e1e8;
1658     border-right: 1px solid #e1e1e8;
1659     background-color: #f7f7f9;
1661     @include border-radius(0 0 4px 4px);
1662     padding: 6px;
1663     top: 50%;
1664     left: 50%;
1665     min-height: 34px;
1666     float: left;
1667     width: 150px;
1670 body.jsenabled .formlistingradio {
1671     display: none;
1674 body.jsenabled .formlisting {
1675     display: block;
1678 /* Badges styles */
1679 table.collection {
1680     @extend .table;
1681     @extend .table-bordered;
1682     @extend .table-striped;
1685 table.collection .name {
1686     text-align: left;
1687     vertical-align: middle;
1690 table.collection .awards {
1691     width: 10%;
1692     text-align: center;
1693     vertical-align: middle;
1696 table.collection .criteria {
1697     width: 40%;
1698     text-align: left;
1699     vertical-align: top;
1702 table.collection .badgeimage,
1703 table.collection .status {
1704     width: 15%;
1705     text-align: center;
1706     vertical-align: middle;
1709 table.collection .description {
1710     width: 25%;
1711     text-align: left;
1714 table.collection .actions {
1715     width: 11em;
1716     text-align: center;
1717     vertical-align: middle;
1720 a.criteria-action {
1721     padding: 0 3px;
1722     float: right;
1725 div.criteria-description {
1726     padding: 10px 15px;
1727     margin: 5px 0;
1728     background: none repeat scroll 0 0 #f9f9f9;
1729     border: 1px solid #eee;
1732 ul.badges {
1733     margin: 0;
1734     list-style: none;
1737 .badges li {
1738     position: relative;
1739     display: inline-block;
1740     padding-top: 1em;
1741     text-align: center;
1742     vertical-align: top;
1743     width: 150px;
1746 .badges li .badge-name {
1747     display: block;
1748     padding: 5px;
1751 .badges li > img {
1752     position: absolute;
1755 .badges li .badge-image {
1756     width: 100px;
1757     height: 100px;
1758     left: 10px;
1759     top: 0;
1760     z-index: 1;
1763 .badges li .badge-actions {
1764     position: relative;
1767 .badges li .expireimage {
1768     width: 100px;
1769     height: 100px;
1770     left: 25px;
1771     top: 0;
1772     position: absolute;
1773     z-index: 10;
1774     opacity: 0.85;
1777 #badge-image {
1778     background-color: transparent;
1779     padding: 0;
1780     position: relative;
1781     min-width: 100px;
1782     width: 20%;
1783     display: inline-block;
1784     vertical-align: top;
1785     margin-top: 17px;
1787     .expireimage {
1788         width: 100px;
1789         height: 100px;
1790         left: 0;
1791         top: 0;
1792         opacity: 0.85;
1793         position: absolute;
1794         z-index: 10;
1795     }
1797     .singlebutton {
1798         padding-top: 5px;
1800         input {
1801             margin-left: 0;
1802         }
1803     }
1806 #badge-details {
1807     display: inline-block;
1808     width: 79%;
1811 #badge-overview dl,
1812 #badge-details dl {
1813     margin: 0;
1815     dt,
1816     dd {
1817         vertical-align: top;
1818         padding: 3px 0;
1819     }
1821     dt {
1822         clear: both;
1823         display: inline-block;
1824         width: 20%;
1825         min-width: 100px;
1826     }
1828     dd {
1829         display: inline-block;
1830         width: 79%;
1831         margin-left: 1%;
1832     }
1835 .badge-profile {
1836     vertical-align: top;
1839 .connected {
1840     @extend .text-success;
1843 .notconnected {
1844     @extend .text-danger;
1847 .connecting {
1848     @extend .text-warning;
1851 #page-badges-award .recipienttable tr td {
1852     vertical-align: top;
1855 #page-badges-award .recipienttable tr td.actions .actionbutton {
1856     margin: 0.3em 0;
1857     padding: 0.5em 0;
1858     width: 100%;
1861 #page-badges-award .recipienttable tr td.existing,
1862 #page-badges-award .recipienttable tr td.potential {
1863     width: 42%;
1866 #issued-badge-table .activatebadge {
1867     display: inline-block;
1870 .statusbox.active {
1871     background-color: $state-success-bg;
1874 .statusbox.inactive {
1875     background-color: $state-warning-bg;
1878 .statusbox {
1879     text-align: center;
1880     margin-bottom: 5px;
1881     padding: 5px;
1884 .statusbox .activatebadge {
1885     display: inline-block;
1888 .statusbox .activatebadge input[type=submit] {
1889     margin: 3px;
1892 .activatebadge {
1893     margin: 0;
1894     text-align: left;
1895     vertical-align: middle;
1898 img#persona_signin {
1899     cursor: pointer;
1902 .addcourse {
1903     float: right;
1906 .invisiblefieldset {
1907     display: inline;
1908     padding: 0;
1909     border-width: 0;
1912 .breadcrumb-nav {
1913     float: left;
1916 .breadcrumb-button .singlebutton div {
1917     margin-right: 0;
1920 .breadcrumb-nav .breadcrumb {
1921     margin: 0;
1923 /** Navbar */
1924 .navbar-brand {
1925     .logo {
1926         display: inline-block;
1927         margin: -$navbar-brand-padding-y 0;
1928     }
1930     .site-name {
1931         display: inline-block;
1932     }
1934     &.has-logo {
1935         .site-name {
1936             margin-left: $spacer / 2;
1937         }
1938     }
1941 @include media-breakpoint-down(xs) {
1942     .navbar {
1943         .navbar-brand {
1944             max-width: 80%;
1945             margin-right: 0;
1947             &.has-logo {
1948                 .site-name {
1949                     display: none;
1950                 }
1951             }
1952         }
1953     }
1956 /** Page header */
1957 #page-header {
1958     .logo {
1959         margin: $spacer 0;
1960     }
1963 /** Header. */
1964 header {
1965     .collapse.in,
1966     .collapsing {
1967         display: block;
1968         clear: both;
1969     }
1972 /** Header-bar styles **/
1973 .page-context-header {
1974     // We need to be explicit about the height of the header.
1975     $pageHeaderHeight: 140px;
1977     // Do not remove these rules.
1978     overflow: hidden;
1980     .page-header-image,
1981     .page-header-headings {
1982         display: block;
1983         position: relative;
1984     }
1986     .page-header-image {
1987         float: left;
1988         margin-right: 1em;
1989         margin-bottom: 1em;
1990     }
1992     .page-header-headings,
1993     .header-button-group {
1994         position: relative;
1995         line-height: 24px;
1996         vertical-align: middle;
1997     }
1999     .header-button-group {
2000         display: block;
2001         float: left;
2003         a {
2004             position: relative;
2006             // Don't touch it unless you know exactly what you are doing.
2007             top: -0.4em;
2008         }
2009     }
2012 ul.dragdrop-keyboard-drag li {
2013     list-style-type: none;
2016 a.disabled:hover,
2017 a.disabled {
2018     text-decoration: none;
2019     cursor: default;
2020     font-style: italic;
2021     color: #808080;
2024 body.lockscroll {
2025     height: 100%;
2026     overflow: hidden;
2029 .progressbar_container {
2030     max-width: 500px;
2031     margin: 0 auto;
2034 /* IE10 only fix for calendar titling */
2035 .ie10 .yui3-calendar-header-label {
2036     display: inline-block;
2039 dd:before,
2040 dd:after {
2041     display: block;
2042     content: " ";
2045 dd:after {
2046     clear: both;
2049 // Active tabs with links should have a different
2050 // cursor to indicate they are clickable.
2051 .nav-tabs > .active > a[href],
2052 .nav-tabs > .active > a[href]:hover,
2053 .nav-tabs > .active > a[href]:focus {
2054     cursor: pointer;
2057 .inplaceeditable {
2058     &.inplaceeditingon {
2059         position: relative;
2061         .editinstructions {
2062             margin-top: -30px;
2063             font-weight: normal;
2064             margin-right: 0;
2065             margin-left: 0;
2066             left: 0;
2067             right: auto;
2068             white-space: nowrap;
2069         }
2071         input {
2072             width: 330px;
2073             height: 16px;
2074             vertical-align: text-bottom;
2075             margin-bottom: 0;
2076         }
2078         select {
2079             margin-bottom: 0;
2080         }
2081     }
2083     .quickediticon img {
2084         opacity: 0.2;
2085     }
2087     .quickeditlink {
2088         color: inherit;
2089         text-decoration: inherit;
2090     }
2092     &:hover .quickeditlink .quickediticon img,
2093     .quickeditlink:focus .quickediticon img {
2094         opacity: 1;
2095     }
2097     &.inplaceeditable-toggle .quickediticon {
2098         display: none;
2099     }
2102 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2103     margin-top: -20px;
2106 /** Chart area. */
2107 .chart-area {
2109     .chart-table-data {
2110         display: none;
2111     }
2113     .chart-table {
2114         .chart-output-htmltable caption {
2115             white-space: nowrap;
2116         }
2117         /** When accessible, we display the table only. */
2118         &.accesshide {
2119             .chart-table-expand {
2120                 display: none;
2121             }
2122             .chart-table-data {
2123                 display: block;
2124             }
2125         }
2126     }
2129 // Reset for ul.
2130 ul {
2131     padding-left: 1rem;
2134 /* YUI 2 Tree View */
2135 /*rtl:raw:
2136 .ygtvtn,
2137 .ygtvtm,
2138 .ygtvtmh,
2139 .ygtvtmhh,
2140 .ygtvtp,
2141 .ygtvtph,
2142 .ygtvtphh,
2143 .ygtvln,
2144 .ygtvlm,
2145 .ygtvlmh,
2146 .ygtvlmhh,
2147 .ygtvlp,
2148 .ygtvlph,
2149 .ygtvlphh,
2150 .ygtvdepthcell,
2151 .ygtvok,
2152 .ygtvok:hover,
2153 .ygtvcancel,
2154 .ygtvcancel:hover {
2155     background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
2157 */
2159 .hover-tooltip-container {
2160     position: relative;
2162     .hover-tooltip {
2163         opacity: 0;
2164         visibility: hidden;
2165         position: absolute;
2166         left: 50%;
2167         top: calc(-50% - 5px);
2168         transform: translate(-50%, -50%);
2169         background-color: #fff;
2170         border: 1px solid rgba(0, 0, 0, .2);
2171         border-radius: .3rem;
2172         box-sizing: border-box;
2173         padding: 5px;
2174         white-space: nowrap;
2175         transition: opacity 0.15s, visibility 0.15s;
2176         z-index: 1000;
2178         &:before {
2179             content: '';
2180             display: inline-block;
2181             border-left: 8px solid transparent;
2182             border-right: 8px solid transparent;
2183             border-top: 8px solid rgba(0, 0, 0, .2);
2184             position: absolute;
2185             bottom: -8px;
2186             left: calc(50% - 8px);
2187         }
2189         &:after {
2190             content: '';
2191             display: inline-block;
2192             border-left: 7px solid transparent;
2193             border-right: 7px solid transparent;
2194             border-top: 7px solid #fff;
2195             position: absolute;
2196             bottom: -6px;
2197             left: calc(50% - 7px);
2198             z-index: 2;
2199         }
2200     }
2202     &:hover {
2203         .hover-tooltip {
2204             opacity: 1;
2205             visibility: visible;
2206             transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2207         }
2208     }