MDL-55802 output: Hide site name and user name on xs screens
[moodle.git] / theme / noname / 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 }
17 .mdl-right {
18     text-align: right;
19 }
21 /*rtl:ignore*/
22 .text-ltr {
23     direction: ltr !important;
24 }
26 #add,
27 #remove,
28 .centerpara,
29 .mdl-align {
30     text-align: center;
31 }
32 a.dimmed,
33 a.dimmed:link,
34 a.dimmed:visited,
35 a.dimmed_text,
36 a.dimmed_text:link,
37 a.dimmed_text:visited,
38 .dimmed_text,
39 .dimmed_text a,
40 .dimmed_text a:link,
41 .dimmed_text a:visited,
42 .usersuspended,
43 .usersuspended a,
44 .usersuspended a:link,
45 .usersuspended a:visited,
46 .dimmed_category,
47 .dimmed_category a {
48     @extend .text-muted
49 }
50 .activity.label .dimmed_text {
51     opacity: 0.5;
52 }
53 .unlist,
54 .unlist li,
55 .inline-list,
56 .inline-list li,
57 .block .list,
58 .block .list li,
59 .section li.activity,
60 .section li.movehere,
61 .tabtree li {
62     list-style: none;
63     margin: 0;
64     padding: 0;
65 }
66 .inline,
67 .inline-list li {
68     display: inline;
69 }
70 .notifytiny {
71     font-size: $font-size-xs;
72 }
73 .notifytiny li,
74 .notifytiny td {
75     font-size: 100%;
76 }
77 .red,
78 .notifyproblem {
79     @extend .text-warning;
80 }
81 .green,
82 .notifysuccess {
83     @extend .text-success;
84 }
85 .highlight {
86     @extend .text-info;
87 }
88 .reportlink {
89     text-align: right;
90 }
91 a.autolink.glossary:hover {
92     cursor: help;
93 }
94 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
95 .collapsibleregioncaption {
96     white-space: nowrap;
97 }
98 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
99     cursor: pointer;
101 .collapsibleregioncaption img {
102     vertical-align: middle;
105 .jsenabled .hiddenifjs {
106     display: none;
108 .visibleifjs {
109     display: none;
111 .jsenabled .visibleifjs {
112     display: inline;
114 .jsenabled .collapsibleregion {
115     overflow: hidden;
117 .jsenabled .collapsed .collapsibleregioninner {
118     visibility: hidden;
120 .collapsible-actions {
121     display: none;
122     text-align: right;
124 .jsenabled .collapsible-actions {
125     display: block;
127 .collapsible-actions .collapseexpand {
128     padding-left: 20px;
129     background: url([[pix:t/collapsed]]) 2px center no-repeat;
131 /*rtl:raw:
132 .collapsible-actions .collapseexpand {
133     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
135 */
136 .collapsible-actions .collapse-all {
137     background-image: url([[pix:t/expanded]]);
139 .yui-overlay .yui-widget-bd {
140     background-color: #FFEE69;
141     border: 1px solid #A6982B;
142     border-top-color: #D4C237;
143     color: #000000;
144     left: 0;
145     padding: 2px 5px;
146     position: relative;
147     top: 0;
148     z-index: 1;
150 .clearer {
151     background: transparent;
152     border-width: 0;
153     clear: both;
154     display: block;
155     height: 1px;
156     margin: 0;
157     padding: 0;
159 .bold,
160 .warning,
161 .errorbox .title,
162 .pagingbar .title,
163 .pagingbar .thispage {
164     font-weight: bold;
166 img.userpicture {
167     margin-right: 0.5rem;
169 img.resize {
170     height: 1em;
171     width: 1em;
173 .action-menu .dropdown-toggle {
174     margin-right: 0.5rem;
175     text-decoration: none;
177 .action-menu {
178     white-space: nowrap;
180 .action-menu .userpicture {
181     width: auto;
182     height: auto;
183     padding-left: 1rem;
185 .block img.resize,
186 .breadcrumb img.resize {
187     height: 0.9em;
188     width: 0.8em;
190 /* Icon styles */
191 img.activityicon {
192     height: 24px;
193     width: 24px;
194     vertical-align: middle;
196 .boxaligncenter {
197     margin-left: auto;
198     margin-right: auto;
200 .boxalignright {
201     margin-left: auto;
202     margin-right: 0;
204 .boxalignleft {
205     margin-left: 0;
206     margin-right: auto;
208 .boxwidthnarrow {
209     width: 30%;
211 .boxwidthnormal {
212     width: 50%;
214 .boxwidthwide {
215     width: 80%;
217 .headermain {
218     font-weight: bold;
220 #maincontent {
221     display: block;
222     height: 1px;
223     overflow: hidden;
225 img.uihint {
226     cursor: help;
228 #addmembersform table {
229     margin-left: auto;
230     margin-right: auto;
232 table.flexible .emptyrow {
233     display: none;
235 form.popupform,
236 form.popupform div {
237     display: inline;
239 .arrow_button input {
240     overflow: hidden;
242 /** The 1-pixel padding is there to avoid phantom scroll bars on OS X (FF, Safari and Chrome)**/
243 .no-overflow {
244     overflow: auto;
245     padding-bottom: 1px;
247 .pagelayout-report .no-overflow {
248     overflow: visible;
250 .no-overflow > .generaltable {
251     margin-bottom: 0;
253 // Accessibility features
255 // Accessibility: text 'seen' by screen readers but not visual users.
256 .accesshide {
257     position: absolute;
258     left: -10000px;
259     font-weight: normal;
260     font-size: 1em;
262 span.hide,
263 div.hide {
264     display: none;
266 // Accessibility: Skip block link, for keyboard-only users.
267 a.skip-block,
268 a.skip {
269     position: absolute;
270     top: -1000em;
271     font-size: 0.85em;
272     text-decoration: none;
274 a.skip-block:focus,
275 a.skip-block:active,
276 a.skip:focus,
277 a.skip:active {
278     position: static;
279     display: block;
281 .skip-block-to {
282     display: block;
283     height: 1px;
284     overflow: hidden;
286 // Blogs
287 .addbloglink {
288     text-align: center;
290 .blog_entry .audience {
291     text-align: right;
292     padding-right: 4px;
294 .blog_entry .tags {
295     margin-top: 15px;
297 .blog_entry .content {
298     margin-left: 43px;
300 // Group
301 #page-group-index #groupeditform {
302     text-align: center;
304 #doc-contents h1 {
305     margin: 1em 0 0 0;
307 #doc-contents ul {
308     margin: 0;
309     padding: 0;
310     width: 90%;
312 #doc-contents ul li {
313     list-style-type: none;
315 .groupmanagementtable td {
316     vertical-align: top;
318 .groupmanagementtable #existingcell,
319 .groupmanagementtable #potentialcell {
320     width: 42%;
322 .groupmanagementtable #buttonscell {
323     width: 16%;
325 .groupmanagementtable #buttonscell p.arrow_button input {
326     width: auto;
327     min-width: 80%;
328     margin: 0 auto;
330 .groupmanagementtable #removeselect_wrapper,
331 .groupmanagementtable #addselect_wrapper {
332     width: 100%;
334 .groupmanagementtable #removeselect_wrapper label,
335 .groupmanagementtable #addselect_wrapper label {
336     font-weight: normal;
338 #group-usersummary {
339     width: 14em;
341 .groupselector {
342     margin-top: 3px;
343     margin-bottom: 3px;
344     display: inline-block;
346 .groupselector label {
347     display: inline-block;
350 // Login
351 .login-page {
352     [name="username"] {
353         margin-bottom: -1px;
354         border-bottom-right-radius: 0;
355         border-bottom-left-radius: 0;
356     }
357     [type="password"] {
358         margin-bottom: 10px;
359         border-top-left-radius: 0;
360         border-top-right-radius: 0;
361     }
364 // Notes
365 .notepost {
366     margin-bottom: 1em;
368 .notepost .userpicture {
369     float: left;
370     margin-right: 5px;
372 .notepost .content,
373 .notepost .footer {
374     clear: both;
376 .notesgroup {
377     margin-left: 20px;
380 // My Moodle
381 .path-my .coursebox .overview {
382     margin: 15px 30px 10px 30px;
384 .path-my .coursebox .info {
385     float: none;
386     margin: 0;
389 // Modules
390 .mod_introbox {
391     padding: 10px;
393 table.mod_index {
394     width: 100%;
397 // Comments
398 .comment-ctrl {
399     font-size: 12px;
400     display: none;
401     margin: 0;
402     padding: 0;
404 .comment-ctrl h5 {
405     margin: 0;
406     padding: 5px;
408 .comment-area {
409     max-width: 400px;
410     padding: 5px;
412 .comment-area textarea {
413     width: 100%;
414     overflow: auto;
415     &.fullwidth {
416         -webkit-box-sizing: border-box;
417         -moz-box-sizing: border-box;
418         box-sizing: border-box;
419     }
421 .comment-area .fd {
422     text-align: right;
424 .comment-meta span {
425     color: gray;
427 .comment-link img {
428     vertical-align: text-bottom;
430 .comment-list {
431     font-size: 11px;
432     overflow: auto;
433     list-style: none;
434     padding: 0;
435     margin: 0;
437 .comment-list li {
438     margin: 2px;
439     list-style: none;
440     margin-bottom: 5px;
441     clear: both;
442     padding: .3em;
443     position: relative;
445 .comment-list li.first {
446     display: none
448 .comment-paging{
449     text-align: center;
451 .comment-paging .pageno{
452     padding: 2px;
454 .comment-paging .curpage{
455     border: 1px solid #CCC;
457 .comment-message .picture {
458     width: 20px;
459     float: left;
461 .comment-message .text {
462     margin: 0;
463     padding: 0;
465 .comment-message .text p {
466     padding: 0;
467     margin: 0 18px 0 0;
469 .comment-delete {
470     position: absolute;
471     top: 0;
472     right: 0;
473     margin: .3em;
475 .comment-report-selectall{
476     display: none
478 .comment-link {
479     display: none
481 .jsenabled .comment-link {
482     display: block
484 .jsenabled .showcommentsnonjs{
485     display: none
487 .jsenabled .comment-report-selectall{
488     display: inline
490 /**
491 * Completion progress report
492 */
493 .completion-expired {
494     @extend .text-warning;
496 .completion-expected {
497     font-size: $font-size-xs;
499 .completion-sortchoice,
500 .completion-identifyfield {
501     font-size: $font-size-xs;
502     vertical-align: bottom;
504 .completion-progresscell {
505     text-align: right;
507 .completion-expired .completion-expected {
508     font-weight: bold;
510 /**
511 * Tags
512 */
513 img.user-image {
514     height: 100px;
515     width: 100px;
517 #tag-search-box {
518     text-align: center;
519     margin: 10px auto;
522 .path-tag .tag-index-items .tagarea {
523     border: 1px solid #E3E3E3;
524     border-radius: 4px;
525     padding: 10px;
526     margin-top: 10px;
529 .path-tag .tag-index-items .tagarea h3 {
530     display: block;
531     padding: 3px 0 10px 0;
532     margin: 0px;
533     font-size: 1.1em;
534     font-weight: bold;
535     line-height: 20px;
536     color: #999;
537     text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
538     text-transform: uppercase;
539     word-wrap: break-word;
540     border-bottom: solid 1px #E3E3E3;
541     margin-bottom: 10px;
544 .path-tag .tagarea .controls,
545 .path-tag .tagarea .taggeditems {
546     @include clearfix();
548 .path-tag .tagarea .controls,
549 .path-tag .tag-backtoallitems {
550     text-align: center;
552 .path-tag .tagarea .controls .gotopage.nextpage {
553     float: right;
555 .path-tag .tagarea .controls .gotopage.prevpage {
556     float: left;
558 .path-tag .tagarea .controls .exclusivemode {
559     display: inline-block;
561 .path-tag .tagarea .controls.controls-bottom {
562     margin-top: 5px;
564 .path-tag .tagarea .controls .gotopage.nextpage::after {
565     padding-right: 5px;
566     padding-left: 5px;
567     content: "»";
569 .path-tag .tagarea .controls .gotopage.prevpage::before {
570     padding-right: 5px;
571     padding-left: 5px;
572     content: "«";
575 span.flagged-tag,
576 tr.flagged-tag,
577 span.flagged-tag a,
578 tr.flagged-tag a {
579     @extend .text-warning;
581 .tag-management-table td,
582 .tag-management-table th {
583     vertical-align: middle;
584     padding: 4px;
586 .tag-management-table .inplaceeditable.inplaceeditingon input {
587     width: 150px;
589 .path-admin-tag .addstandardtags {
590     float: right;
591     img {
592         margin: 0 5px;
593     }
595 .path-tag .tag-relatedtags {
596     padding-top: 10px;
598 .path-tag .tag-management-box {
599     text-align: right;
601 .path-tag .tag-index-toc {
602     padding: 10px;
603     text-align: center;
605 .path-tag .tag-index-toc li,
606 .path-tag .tag-management-box li {
607     margin-left: 5px;
608     margin-right: 5px;
610 .path-tag .tag-management-box li a.edittag {
611     background-image: url([[pix:moodle|i/settings]]);
613 .path-tag .tag-management-box li a.flagasinappropriate {
614     background-image: url([[pix:moodle|i/flagged]]);
616 .path-tag .tag-management-box li a.removefrommyinterests {
617     background-image: url([[pix:moodle|t/delete]]);
619 .path-tag .tag-management-box li a.addtomyinterests {
620     background-image: url([[pix:moodle|t/add]]);
622 .path-tag .tag-management-box li a {
623     background-repeat: no-repeat;
624     background-position: left;
625     padding-left: 17px;
627 .tag_feed.media-list .media .itemimage {
628     float: left;
630 .tag_feed.media-list .media .itemimage img {
631     height: 35px;
632     width: 35px;
634 .tag_feed.media-list .media .media-body {
635     padding-right: 10px;
636     padding-left: 10px;
638 .tag_feed .media .muted a {
639     @extend .text-muted;
641 .tag_cloud {
642     text-align: center;
644 .tag_cloud .inline-list li {
645     padding: 0px 0.2em;
647 .tag_cloud .tag_overflow {
648     margin-top: 1em;
649     font-style: italic;
651 .tag_cloud .s20 {
652     font-size: 2.7em;
654 .tag_cloud .s19 {
655     font-size: 2.6em;
657 .tag_cloud .s18 {
658     font-size: 2.5em;
660 .tag_cloud .s17 {
661     font-size: 2.4em;
663 .tag_cloud .s16 {
664     font-size: 2.3em;
666 .tag_cloud .s15 {
667     font-size: 2.2em;
669 .tag_cloud .s14 {
670     font-size: 2.1em;
672 .tag_cloud .s13 {
673     font-size: 2em;
675 .tag_cloud .s12 {
676     font-size: 1.9em;
678 .tag_cloud .s11 {
679     font-size: 1.8em;
681 .tag_cloud .s10 {
682     font-size: 1.7em;
684 .tag_cloud .s9 {
685     font-size: 1.6em;
687 .tag_cloud .s8 {
688     font-size: 1.5em;
690 .tag_cloud .s7 {
691     font-size: 1.4em;
693 .tag_cloud .s6 {
694     font-size: 1.3em;
696 .tag_cloud .s5 {
697     font-size: 1.2em;
699 .tag_cloud .s4 {
700     font-size: 1.1em;
702 .tag_cloud .s3 {
703     font-size: 1em;
705 .tag_cloud .s2 {
706     font-size: 0.9em;
708 .tag_cloud .s1 {
709     font-size: 0.8em;
711 .tag_cloud .s0 {
712     font-size: 0.7em;
714 .tag_list ul {
715     display: inline;
717 .tag_list.hideoverlimit .overlimit {
718     display:none;
720 .tag_list .tagmorelink {
721     display:none;
723 .tag_list.hideoverlimit .tagmorelink {
724     display:inline;
726 .tag_list.hideoverlimit .taglesslink {
727     display:none;
730 /**
731 * Web Service
732 */
733 #webservice-doc-generator td {
734     text-align: left;
735     border: 0 solid black;
737 /**
738 * Smart Select Element
739 */
740 .smartselect {
741     position: absolute;
743 .smartselect .smartselect_mask {
744     background-color: #fff;
746 .smartselect ul  {
747     padding: 0;
748     margin: 0;
750 .smartselect ul li {
751     list-style: none;
753 .smartselect .smartselect_menu {
754     margin-right: 5px;
756 .safari .smartselect .smartselect_menu {
757     margin-left: 2px;
759 .smartselect .smartselect_menu,
760 .smartselect .smartselect_submenu {
761     border: 1px solid #000;
762     background-color: #FFF;
763     display: none;
765 .smartselect .smartselect_menu.visible,
766 .smartselect .smartselect_submenu.visible {
767     display: block;
769 .smartselect .smartselect_menu_content ul li {
770     position: relative;
771     padding: 2px 5px;
773 .smartselect .smartselect_menu_content ul li a {
774     color: #333;
775     text-decoration: none;
777 .smartselect .smartselect_menu_content ul li a.selectable {
778     color: inherit;
780 .smartselect .smartselect_submenuitem {
781     background-image: url([[pix:moodle|t/collapsed]]);
782     background-repeat: no-repeat;
783     background-position: 100%;
785 /** Spanning mode */
786 .smartselect.spanningmenu .smartselect_submenu {
787     position: absolute;
788     top: -1px;
789     left: 100%;
791 .smartselect.spanningmenu .smartselect_submenu a {
792     white-space: nowrap;
793     padding-right: 16px;
795 .smartselect.spanningmenu .smartselect_menu_content ul li a.selectable:hover {
796     text-decoration: underline;
798 /** Compact mode */
799 .smartselect.compactmenu .smartselect_submenu {
800     position: relative;
801     margin: 2px -3px;
802     margin-left: 10px;
803     display: none;
804     border-width: 0;
805     z-index: 1010;
807 .smartselect.compactmenu .smartselect_submenu.visible {
808     display: block;
810 .smartselect.compactmenu .smartselect_menu {
811     z-index: 1000;
812     overflow: hidden;
814 .smartselect.compactmenu .smartselect_submenu .smartselect_submenu {
815     z-index: 1020;
817 .smartselect.compactmenu .smartselect_submenuitem:hover > .smartselect_menuitem_label {
818     font-weight: bold;
820 /**
821 * Registration
822 */
823 #page-admin-registration-register .registration_textfield {
824     width: 300px;
826 /**
827 * Enrol
828 */
829 .userenrolment {
830     width: 100%;
831     border-collapse: collapse;
833 .userenrolment tr {
834     vertical-align:top;
836 .userenrolment td {
837     padding: 0;
838     height: 41px;
840 .userenrolment .subfield {
841     margin-right: 5px;
843 .userenrolment .col_userdetails .subfield {
844     margin-left: 40px;
846 .userenrolment .col_userdetails .subfield_picture {
847     float: left;
848     margin-left: 0;
850 .userenrolment .col_lastseen {
851     width: 150px;
853 .userenrolment .col_role {
854     width: 262px;
856 .userenrolment .col_role .roles,
857 .userenrolment .col_group .groups {
858     margin-right: 30px;
860 .userenrolment .col_role .role,
861 .userenrolment .col_group .group {
862     float: left;
863     padding: 3px;
864     margin: 3px;
865     white-space: nowrap;
867 .userenrolment .col_role .role a,
868 .userenrolment .col_group .group a {
869     margin-left: 3px;
870     cursor: pointer;
872 .userenrolment .col_role .addrole,
873 .userenrolment .col_group .addgroup {
874     float: right;
875     padding: 3px;
876     margin: 3px;
877     > a:hover {
878         border-bottom:1px solid #666;
879     }
881 .userenrolment .col_role .addrole img,
882 .userenrolment .col_group .addgroup img {
883     vertical-align: baseline;
886 .userenrolment .hasAllRoles .col_role .addrole {
887     display: none;
890 .userenrolment .col_enrol .enrolment {
891     float: left;
892     padding: 3px;
893     margin: 3px;
895 .userenrolment .col_enrol .enrolment a {
896     float: right;
897     margin-left: 3px;
899 #page-enrol-users {
900     .enrol_user_buttons {
901         float: right;
902         .enrolusersbutton {
903             display: inline;
904             div,
905             form {
906                 display: inline;
907                 margin-right: 0;
908             }
909         }
910     }
911     #filterform {
912         @extend .card;
913         display: inline-block;
914         .fitem {
915             display: inline-block;
916             line-height: $line-height-base * 2;
917             margin-right: .3em;
918             white-space: nowrap;
919             label {
920                 display: inline;
921                 line-height: $line-height-base;
922                 padding-right: .3em;
923             }
924             :before,
925             :after {
926                 display: inline;
927             }
928         }
929         div,
930         fieldset {
931             display: inline;
932             float: none;
933             clear: none;
934             width: auto;
935             margin: 0;
936         }
937         select,
938         .ftext input {
939             width: 7em;
940         }
941         input,
942         select {
943             margin-bottom: 0;
944         }
945     }
946   .user-enroller-panel .uep-search-results .user .details {
947     width: 237px;
948   }
949   .user-enroller-panel .uep-search-results .cohort .details {
950     width: 237px;
951   }
953 #page-enrol-users .enrol-users-page-action input {
954     margin-left: 0
956 .corelightbox {
957     background-color: #CCC;
958     position: absolute;
959     top: 0;
960     left: 0;
961     width: 100%;
962     height: 100%;
963     text-align: center;
965 .corelightbox img {
966     position: fixed;
967     top: 50%;
968     left: 50%;
971 .mod-indent-outer {
972     display: table;
974 .mod-indent {
975     display: table-cell;
977 .label .mod-indent {
978   float:left;
979   padding-top:20px
982 $mod-indent-size: 30px;
983 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
984 @for $i from 1 through 16 {
985    $width: ($i * $mod-indent-size);
987    .mod-indent-#{$i} {
988        width: $width;
989    }
991 .mod-indent-huge {
992    width: (16 * $mod-indent-size);
995 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
996 .resourcecontent .mediaplugin_mp3 object {
997     height: 25px;
998     width: 600px
1000 .resourcecontent audio.mediaplugin_html5audio {
1001     width: 600px
1003 /** Large resource images should avoid hidden overflow **/
1004 .resourceimage {
1005     max-width: 100%;
1007 /* Audio player size in 'inline' mode (can only change width, as above) */
1008 .mediaplugin_mp3 object {
1009     height: 15px;
1010     width: 300px
1012 audio.mediaplugin_html5audio {
1013     width: 300px
1015 /* TinyMCE moodle media preview frame should not have padding */
1016 .core_media_preview.pagelayout-embedded #content {
1017     padding: 0;
1019 .core_media_preview.pagelayout-embedded #maincontent {
1020     height: 0;
1022 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1023     padding: 0;
1024     margin: 0;
1025     min-width: 0;
1026     background: none;
1028 .path-rating .ratingtable {
1029     width: 100%;
1030     margin-bottom: 1em;
1032 .path-rating .ratingtable th.rating {
1033     width: 100%;
1035 .path-rating .ratingtable td.rating,
1036 .path-rating .ratingtable td.time {
1037     white-space: nowrap;
1038     text-align: center;
1040 .initialbar {
1041     a, strong {
1042         padding-left: 3px;
1043         padding-right: 3px;
1044     }
1047 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1048 .moodle-dialogue-base .moodle-dialogue-lightbox {
1049     background-color: $gray;
1051 .moodle-dialogue-base .hidden,
1052 .moodle-dialogue-base .moodle-dialogue-hidden {
1053     display: none;
1055 .no-scrolling {
1056     overflow: hidden;
1058 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1059     left: 0px;
1060     top: 0px;
1061     right: 0px;
1062     bottom: -50px;
1063     position: fixed;
1065 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1066     overflow: auto;
1068 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1069     width: 28px;
1070     height: 16px;
1071     background-size: 100%;
1073 .moodle-dialogue-base .moodle-dialogue-wrap {
1074     background-color: #fff;
1075     border: 1px solid #ccc;
1077 .moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content {
1078     @extend .modal-content;
1080 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1081     @extend .modal-header;
1083 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1084     // Undo some YUI damage.
1085     min-height: 3rem;
1086     color: initial;
1087     background-color: initial;
1088     background: initial;
1089     font-size: 1.5rem;
1090     line-height: 1.5;
1092 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1093     @extend .modal-title;
1095 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1096     padding: 5px;
1097     right: 0;
1099 .moodle-dialogue-base .closebutton {
1100     @extend .close;
1101     margin: 0;
1102     padding: 10px ! important;
1103     background: 0;
1104     border-style: none;
1105     box-shadow: none;
1107 .moodle-dialogue-base .closebutton::after {
1108     content: "×";
1110 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1111     @extend .modal-body;
1114 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1115     overflow: auto;
1116     position: absolute;
1117     top: 0px;
1118     bottom: 50px;
1119     left: 0px;
1120     right: 0px;
1121     margin: 0px;
1122     border: 0px;
1124 .moodle-dialogue-confirm .confirmation-dialogue {
1125     text-align: center;
1127 .moodle-dialogue-confirm .confirmation-dialogue input {
1128     text-align: center;
1130 .moodle-dialogue-exception .moodle-exception-message {
1131     text-align: center
1133 .moodle-dialogue-exception .moodle-exception-param label {
1134     font-weight: bold;
1136 .moodle-dialogue-exception .param-stacktrace label {
1137     background-color: #EEE;
1138     border: 1px solid #ccc;
1139     border-bottom-width: 0;
1141 .moodle-dialogue-exception .param-stacktrace pre {
1142     border: 1px solid #ccc;
1143     background-color: #fff;
1145 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1146     color: navy;
1147     font-size: $font-size-sm;
1149 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1150     @extend .text-warning;
1151     font-size: $font-size-sm;
1153 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1154     color: #333;
1155     font-size: 90%;
1156     border-bottom: 1px solid #eee;
1158 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1159     @extend .modal-footer;
1161 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1162     display: none;
1164 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1165     // Undo some YUI damage.
1166     background: initial;
1168 .moodle-dialogue-confirm .confirmation-message {
1169     margin: 0.5em 1em;
1171 .moodle-dialogue-confirm .confirmation-dialogue input {
1172     min-width: 80px
1174 .moodle-dialogue-exception .moodle-exception-message {
1175     margin: 1em;
1177 .moodle-dialogue-exception .moodle-exception-param {
1178     margin-bottom: 0.5em;
1180 .moodle-dialogue-exception .moodle-exception-param label {
1181     width: 150px;
1183 .moodle-dialogue-exception .param-stacktrace label {
1184     display: block;
1185     margin: 0;
1186     padding: 4px 1em;
1188 .moodle-dialogue-exception .param-stacktrace pre {
1189     display: block;
1190     height: 200px;
1191     overflow: auto;
1193 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1194     display: inline-block;
1195     margin: 4px 0;
1197 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1198     display: inline-block;
1199     width: 50px;
1200     margin: 4px 1em;
1202 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1203     padding-left: 25px;
1204     margin-bottom: 4px;
1205     padding-bottom: 4px;
1207 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1208     opacity: 0.75;
1209     width: 100%;
1210     height: 100%;
1211     top: 0;
1212     left: 0;
1213     background-color: white;
1214     text-align: center;
1215     padding: 10% 0;
1217 /* Apply a default max-height on tooltip text */
1218 .moodle-dialogue .tooltiptext {
1219     max-height: 300px;
1222 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1223     z-index: 3001;
1225     .moodle-dialogue-bd {
1226         overflow: auto;
1227     }
1230 /**
1231  * Chooser Dialogues (moodle-core-chooserdialogue)
1232  *
1233  * This CSS belong to the chooser dialogue which should work both with, and
1234  * without javascript enabled
1235  */
1236 /* Hide the dialog and it's title */
1237 .chooserdialoguebody,
1238 .choosertitle {
1239     display: none;
1241 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1242     margin: 0;
1244 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1245     padding: 0;
1246     background: #F2F2F2;
1247     @include border-bottom-radius(10px);
1249 /* Center the submit buttons within the area */
1250 .choosercontainer #chooseform .submitbuttons {
1251     padding: 0.7em 0;
1252     text-align: center;
1254 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1255 @media (max-height: 639px) {
1256     .ios.safari .choosercontainer #chooseform .submitbuttons {
1257         padding: 45px 0;
1258     }
1260 .choosercontainer #chooseform .submitbuttons input {
1261     min-width: 100px;
1262     margin: 0 0.5em;
1264 /* Various settings for the options area */
1265 .choosercontainer #chooseform .options {
1266     position: relative;
1267     border-bottom: 1px solid #BBBBBB;
1269 /* Only set these options if we're showing the js container */
1270 .jschooser .choosercontainer #chooseform .alloptions {
1271     overflow-x: hidden;
1272     overflow-y: auto;
1273     max-width: 240px;
1274     .option {
1275         input[type=radio] {
1276             display: inline-block;
1277         }
1278         .typename {
1279             display: inline-block;
1280             width: 55%;
1281         }
1282     }
1284 /* Settings for option rows and option subtypes */
1285 .choosercontainer #chooseform .moduletypetitle,
1286 .choosercontainer #chooseform .option,
1287 .choosercontainer #chooseform .nonoption {
1288     margin-bottom: 0;
1289     padding: 0 1.6em 0 1.6em;
1291 .choosercontainer #chooseform .moduletypetitle {
1292     text-transform: uppercase;
1293     padding-top: 1.2em;
1294     padding-bottom: 0.4em;
1296 .choosercontainer #chooseform .option .typename,
1297 .choosercontainer #chooseform .nonoption .typename {
1298     padding: 0 0 0 0.5em;
1300 .choosercontainer #chooseform .modicon + .typename {
1301     padding-left: 0;
1304 .choosercontainer #chooseform .option input[type=radio],
1305 .choosercontainer #chooseform .option span.typename {
1306     vertical-align: middle;
1308 .choosercontainer #chooseform .option label {
1309     display: block;
1310     margin: 0;
1311     padding: ($spacer / 2) 0;
1312     border-bottom: 1px solid #FFFFFF;
1314 .choosercontainer #chooseform .option .icon {
1315     margin: 0;
1316     padding: 0 $spacer;
1318 .choosercontainer #chooseform .nonoption {
1319     padding-left: 2.7em;
1320     padding-top: 0.3em;
1321     padding-bottom: 0.1em;
1323 .choosercontainer #chooseform .subtype {
1324     margin-bottom: 0;
1325     padding: 0 1.6em 0 3.2em;
1327 .choosercontainer #chooseform .subtype .typename {
1328     margin: 0 0 0 0.2em;
1330 /* The instruction/help area */
1331 .jschooser .choosercontainer #chooseform .instruction,
1332 .jschooser .choosercontainer #chooseform .typesummary {
1333    display: none;
1334     position: absolute;
1335     top: 0;
1336     right: 0;
1337     bottom: 0;
1338     left: 240px;
1339     margin: 0;
1340     padding: 1.6em;
1341     background-color: #fff;
1342     overflow-x: hidden;
1343     overflow-y: auto;
1344     line-height: 2em;
1346 /* Selected option settings */
1347 .jschooser .choosercontainer #chooseform .instruction,
1348 .choosercontainer #chooseform .selected .typesummary {
1349     display: block;
1351 .choosercontainer #chooseform .selected {
1352     background-color: #fff;
1353     margin-top: -1px;
1354     padding-top: 1px;
1356 .chooserdialogue-course-modchooser .modicon .icon {
1357     width: 24px;
1358     height: 24px;
1361 @include media-breakpoint-down(xs) {
1362     .jsenabled .choosercontainer #chooseform .alloptions {
1363         max-width: 100%;
1364     }
1365     .jsenabled .choosercontainer #chooseform .instruction,
1366     .jsenabled .choosercontainer #chooseform .typesummary {
1367         position:static;
1368     }
1371 /* Form element: listing */
1372 .formlistingradio {
1373     padding-bottom: 25px;
1374     padding-right: 10px;
1376 .formlistinginputradio {
1377     float: left;
1379 .formlistingmain {
1380     min-height: 225px;
1382 .formlisting {
1383     position: relative;
1384     margin: 15px 0;
1385     padding: 1px 19px 14px;
1386     background-color: white;
1387     border: 1px solid #DDD;
1388     @include border-radius(4px);
1390 .formlistingmore {
1391     position: absolute;
1392     cursor: pointer;
1393     bottom: -1px;
1394     right: -1px;
1395     padding: 3px 7px;
1396     font-size: 12px;
1397     font-weight: bold;
1398     background-color: whiteSmoke;
1399     border: 1px solid #ddd;
1400     color: #9DA0A4;
1401     @include border-radius(4px 0 4px 0);
1403 .formlistingall {
1404     margin: 15px 0;
1405     padding: 0;
1406     @include border-radius(4px);
1408 .formlistingrow {
1409     cursor: pointer;
1410     border-bottom: 1px solid;
1411     border-color: #E1E1E8;
1412     border-left: 1px solid #E1E1E8;
1413     border-right: 1px solid #E1E1E8;
1414     background-color: #F7F7F9;
1415     @include border-radius(0 0 4px 4px);
1416     padding: 6px;
1417     top: 50%;
1418     left: 50%;
1419     min-height: 34px;
1420     float: left;
1421     width: 150px;
1423 body.jsenabled .formlistingradio {
1424     display: none;
1426 body.jsenabled .formlisting {
1427     display: block;
1430 /* Badges styles */
1431 table.collection {
1432     @extend .table;
1433     @extend .table-bordered;
1434     @extend .table-striped;
1436 table.collection .name {
1437     text-align: left;
1438     vertical-align: middle;
1440 table.collection .awards {
1441     width: 10%;
1442     text-align: center;
1443     vertical-align: middle;
1445 table.collection .criteria {
1446     width: 40%;
1447     text-align: left;
1448     vertical-align: top;
1450 table.collection .badgeimage,
1451 table.collection .status {
1452     width: 15%;
1453     text-align: center;
1454     vertical-align: middle;
1456 table.collection .description {
1457     width: 25%;
1458     text-align: left;
1460 table.collection .actions {
1461     width: 11em;
1462     text-align: center;
1463     vertical-align: middle;
1466 a.criteria-action {
1467     padding: 0px 3px;
1468     float: right;
1470 div.criteria-description {
1471     padding: 10px 15px;
1472     margin: 5px 0px;
1473     background: none repeat scroll 0 0 #f9f9f9;
1474     border: 1px solid #EEE;
1476 ul.badges {
1477     margin: 0;
1478     list-style: none;
1480 .badges li {
1481     position: relative;
1482     display: inline-block;
1483     padding-top: 1em;
1484     text-align: center;
1485     vertical-align: top;
1486     width: 150px;
1488 .badges li .badge-name {
1489     display: block;
1490     padding: 5px;
1492 .badges li > img {
1493     position: absolute;
1495 .badges li .badge-image {
1496     width: 100px;
1497     height: 100px;
1498     left: 10px;
1499     top: 0px;
1500     z-index: 1;
1502 .badges li .badge-actions {
1503     position: relative;
1505 .badges li .expireimage {
1506     width: 100px;
1507     height: 100px;
1508     left: 25px;
1509     top: 0px;
1510     position: absolute;
1511     z-index: 10;
1512     opacity: 0.85;
1515 #badge-image {
1516     background-color: transparent;
1517     padding: 0;
1518     position: relative;
1519     min-width: 100px;
1520     width: 20%;
1521     display: inline-block;
1522     vertical-align: top;
1523     margin-top: 17px;
1525     .expireimage {
1526         width: 100px;
1527         height: 100px;
1528         left: 0px;
1529         top: 0px;
1530         opacity: 0.85;
1531         position: absolute;
1532         z-index:10;
1533     }
1535     .singlebutton {
1536         padding-top: 5px;
1538         input {
1539             margin-left: 0px;
1540         }
1541     }
1543 #badge-details {
1544     display: inline-block;
1545     width: 79%;
1548 #badge-overview dl,
1549 #badge-details dl {
1550     margin: 0;
1552     dt,
1553     dd {
1554         vertical-align: top;
1555         padding: 3px 0;
1556     }
1557     dt {
1558         clear: both;
1559         display: inline-block;
1560         width: 20%;
1561         min-width: 100px;
1562     }
1563     dd {
1564         display: inline-block;
1565         width: 79%;
1566         margin-left: 1%;
1567     }
1570 .badge-profile {
1571     vertical-align: top;
1573 .connected {
1574     @extend .text-success;
1576 .notconnected {
1577     @extend .text-danger;
1579 .connecting {
1580     @extend .text-warning;
1582 #page-badges-award .recipienttable tr td {
1583     vertical-align: top;
1585 #page-badges-award .recipienttable tr td.actions .actionbutton {
1586     margin: 0.3em 0;
1587     padding: 0.5em 0;
1588     width: 100%;
1590 #page-badges-award .recipienttable tr td.existing,
1591 #page-badges-award .recipienttable tr td.potential {
1592     width: 42%;
1595 #issued-badge-table .activatebadge {
1596     display: inline-block;
1598 .statusbox.active {
1599     background-color: $state-success-bg;
1601 .statusbox.inactive {
1602     background-color: $state-warning-bg;
1604 .statusbox {
1605     text-align: center;
1606     margin-bottom: 5px;
1607     padding: 5px;
1609 .statusbox .activatebadge {
1610     display: inline-block;
1612 .statusbox .activatebadge input[type=submit]{
1613     margin: 3px;
1615 .activatebadge {
1616     margin: 0px;
1617     text-align: left;
1618     vertical-align: middle;
1620 img#persona_signin {
1621     cursor: pointer;
1623 .addcourse {
1624     float: right;
1626 .invisiblefieldset {
1627     display: inline;
1628     margin: 0;
1629     padding: 0;
1630     border-width: 0;
1632 .breadcrumb-nav {
1633     float: left;
1635 .breadcrumb-button .singlebutton div {
1636     margin-right: 0;
1638 .breadcrumb-nav .breadcrumb {
1639     margin: 0;
1642 /** Navbar */
1643 .navbar-brand {
1644     .logo {
1645         display: inline-block;
1646         margin-top: -$navbar-brand-padding-y;
1647     }
1648     .site-name {
1649         display: inline-block;
1650         margin-left: $spacer/2;
1651     }
1652     height: 43px;
1655 @include media-breakpoint-down(xs) {
1656     .navbar-brand .site-name {
1657         display: none;
1658     }
1661 /** Page header */
1662 #page-header {
1663     .logo {
1664         margin: $spacer 0;
1665     }
1668 /** Header. */
1669 header {
1670     .collapse.in,
1671     .collapsing {
1672         display: block;
1673         clear: both;
1674     }
1677 /** Header-bar styles **/
1678 .page-context-header {
1679     // We need to be explicit about the height of the header.
1680     $pageHeaderHeight: 140px;
1682     // Do not remove these rules.
1683     overflow: hidden;
1685     .page-header-image,
1686     .page-header-headings {
1687         display: block;
1688         position: relative;
1689     }
1690     .page-header-image {
1691         float: left;
1692         margin-right: 1em;
1693         margin-bottom: 1em;
1694     }
1695     .page-header-headings {
1696         margin-top: 30px;
1697         margin-bottom: 10px;
1699         h1 {
1700             display: block;
1701         }
1702     }
1704     .page-header-headings,
1705     .header-button-group {
1706         position: relative;
1707         line-height: 24px;
1708         vertical-align: middle;
1709     }
1711     .header-button-group {
1712         display: block;
1713         float: left;
1714         a {
1715             position: relative;
1717             // Don't touch it unless you know exactly what you are doing.
1718             top: -0.4em;
1719         }
1720     }
1723 ul.dragdrop-keyboard-drag li {
1724     list-style-type: none;
1727 .block-control-actions .moodle-core-dragdrop-draghandle img {
1728     width: 12px;
1729     height: 12px;
1732 a.disabled:hover,
1733 a.disabled {
1734     text-decoration: none;
1735     cursor: default;
1736     font-style: italic;
1737     color: #808080;
1739 body.lockscroll {
1740   height: 100%;
1741   overflow: hidden;
1744 .progressbar_container {
1745     max-width: 500px;
1746     margin: 0 auto;
1749 /* IE10 only fix for calendar titling */
1750 .ie10 .yui3-calendar-header-label {
1751     display: inline-block;
1754 dd:before,
1755 dd:after {
1756   display: block;
1757   content: " ";
1759 dd:after {
1760   clear: both;
1763 // Active tabs with links should have a different
1764 // cursor to indicate they are clickable.
1765 .nav-tabs > .active > a[href],
1766 .nav-tabs > .active > a[href]:hover,
1767 .nav-tabs > .active > a[href]:focus {
1768     cursor: pointer;
1771 .inplaceeditable {
1773     &.inplaceeditingon {
1774         position: relative;
1776         .editinstructions {
1777             margin-top: -30px;
1778             font-weight: normal;
1779             margin-right: 0;
1780             margin-left: 0;
1781             left: 0;
1782             right: auto;
1783             white-space: nowrap;
1784         }
1786         input {
1787             width: 330px;
1788             height: 16px;
1789             vertical-align: text-bottom;
1790             margin-bottom: 0;
1791         }
1793         select {
1794             margin-bottom: 0;
1795         }
1796     }
1798     .quickediticon img {
1799         opacity: 0.2;
1800     }
1802     .quickeditlink {
1803         color: inherit;
1804         text-decoration: inherit;
1805     }
1807     &:hover .quickeditlink .quickediticon img,
1808     .quickeditlink:focus .quickediticon img {
1809         opacity: 1;
1810     }
1812     &.inplaceeditable-toggle .quickediticon {
1813         display: none;
1814     }
1817 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
1818     margin-top: -20px;
1820 // Reset for ul.
1821 ul {
1822     padding-left: 1rem;