MDL-55584 theme_noname: Patching for better feel in grades
[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 }
20 #add,
21 #remove,
22 .centerpara,
23 .mdl-align {
24     text-align: center;
25 }
26 a.dimmed,
27 a.dimmed:link,
28 a.dimmed:visited,
29 a.dimmed_text,
30 a.dimmed_text:link,
31 a.dimmed_text:visited,
32 .dimmed_text,
33 .dimmed_text a,
34 .dimmed_text a:link,
35 .dimmed_text a:visited,
36 .usersuspended,
37 .usersuspended a,
38 .usersuspended a:link,
39 .usersuspended a:visited,
40 .dimmed_category,
41 .dimmed_category a {
42     @extend .text-muted
43 }
44 .activity.label .dimmed_text {
45     opacity: 0.5;
46 }
47 .unlist,
48 .unlist li,
49 .inline-list,
50 .inline-list li,
51 .block .list,
52 .block .list li,
53 .section li.activity,
54 .section li.movehere,
55 .tabtree li {
56     list-style: none;
57     margin: 0;
58     padding: 0;
59 }
60 .inline,
61 .inline-list li {
62     display: inline;
63 }
64 .notifytiny {
65     font-size: $font-size-xs;
66 }
67 .notifytiny li,
68 .notifytiny td {
69     font-size: 100%;
70 }
71 .red,
72 .notifyproblem {
73     @extend .text-warning;
74 }
75 .green,
76 .notifysuccess {
77     @extend .text-success;
78 }
79 .highlight {
80     @extend .text-info;
81 }
82 .reportlink {
83     text-align: right;
84 }
85 a.autolink.glossary:hover {
86     cursor: help;
87 }
88 /* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
89 .collapsibleregioncaption {
90     white-space: nowrap;
91 }
92 .pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
93     cursor: pointer;
94 }
95 .collapsibleregioncaption img {
96     vertical-align: middle;
97 }
99 .jsenabled .hiddenifjs {
100     display: none;
102 .visibleifjs {
103     display: none;
105 .jsenabled .visibleifjs {
106     display: inline;
108 .jsenabled .collapsibleregion {
109     overflow: hidden;
111 .jsenabled .collapsed .collapsibleregioninner {
112     visibility: hidden;
114 .collapsible-actions {
115     display: none;
116     text-align: right;
118 .jsenabled .collapsible-actions {
119     display: block;
121 .collapsible-actions .collapseexpand {
122     padding-left: 20px;
123     background: url([[pix:t/collapsed]]) 2px center no-repeat;
125 /*rtl:raw:
126 .collapsible-actions .collapseexpand {
127     background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
129 */
130 .collapsible-actions .collapse-all {
131     background-image: url([[pix:t/expanded]]);
133 .yui-overlay .yui-widget-bd {
134     background-color: #FFEE69;
135     border: 1px solid #A6982B;
136     border-top-color: #D4C237;
137     color: #000000;
138     left: 0;
139     padding: 2px 5px;
140     position: relative;
141     top: 0;
142     z-index: 1;
144 .clearer {
145     background: transparent;
146     border-width: 0;
147     clear: both;
148     display: block;
149     height: 1px;
150     margin: 0;
151     padding: 0;
153 .bold,
154 .warning,
155 .errorbox .title,
156 .pagingbar .title,
157 .pagingbar .thispage {
158     font-weight: bold;
160 img.userpicture {
161     margin-right: 0.5rem;
163 img.resize {
164     height: 1em;
165     width: 1em;
167 .action-menu .dropdown-toggle {
168     margin-right: 0.5rem;
169     text-decoration: none;
171 .action-menu {
172     white-space: nowrap;
174 .action-menu img {
175     width: 16px;
176     height: 16px;
177     box-sizing: content-box;
179 .action-menu .dropdown-menu img {
180     padding-right: 0.5rem;
182 .action-menu .userpicture {
183     width: auto;
184     height: auto;
185     padding-left: 1rem;
187 .mform {
188     max-width: 720px;
190 .block img.resize,
191 .breadcrumb img.resize {
192     height: 0.9em;
193     width: 0.8em;
195 /* Icon styles */
196 img.icon,
197 img.iconhelp, .helplink img {
198     height: 16px;
199     vertical-align: text-bottom;
200     width: 16px;
201     padding-right: 0.5rem;
202     box-sizing: content-box;
204 img.iconlarge {
205     height: 24px;
206     width: 24px;
207     vertical-align: middle;
209 img.iconsort {
210     vertical-align: text-bottom;
211     padding-left: .3em;
212     margin-bottom: .15em;
214 img.icontoggle {
215     height: 17px;
216     vertical-align: middle;
217     width: 50px;
219 img.iconkbhelp {
220     height: 17px;
221     width: 49px;
223 .boxaligncenter {
224     margin-left: auto;
225     margin-right: auto;
227 .boxalignright {
228     margin-left: auto;
229     margin-right: 0;
231 .boxalignleft {
232     margin-left: 0;
233     margin-right: auto;
235 .boxwidthnarrow {
236     width: 30%;
238 .boxwidthnormal {
239     width: 50%;
241 .boxwidthwide {
242     width: 80%;
244 .headermain {
245     font-weight: bold;
247 #maincontent {
248     display: block;
249     height: 1px;
250     overflow: hidden;
252 img.uihint {
253     cursor: help;
255 #addmembersform table {
256     margin-left: auto;
257     margin-right: auto;
259 table.flexible .emptyrow {
260     display: none;
262 img.emoticon {
263     vertical-align: middle;
264     width: 15px;
265     height: 15px;
267 form.popupform,
268 form.popupform div {
269     display: inline;
271 .arrow_button input {
272     overflow: hidden;
274 /** The 1-pixel padding is there to avoid phantom scroll bars on OS X (FF, Safari and Chrome)**/
275 .no-overflow {
276     overflow: auto;
277     padding-bottom: 1px;
279 .pagelayout-report .no-overflow {
280     overflow: visible;
282 .no-overflow > .generaltable {
283     margin-bottom: 0;
285 // Accessibility features
287 // Accessibility: text 'seen' by screen readers but not visual users.
288 .accesshide {
289     position: absolute;
290     left: -10000px;
291     font-weight: normal;
292     font-size: 1em;
294 span.hide,
295 div.hide {
296     display: none;
298 // Accessibility: Skip block link, for keyboard-only users.
299 a.skip-block,
300 a.skip {
301     position: absolute;
302     top: -1000em;
303     font-size: 0.85em;
304     text-decoration: none;
306 a.skip-block:focus,
307 a.skip-block:active,
308 a.skip:focus,
309 a.skip:active {
310     position: static;
311     display: block;
313 .skip-block-to {
314     display: block;
315     height: 1px;
316     overflow: hidden;
318 // Blogs
319 .addbloglink {
320     text-align: center;
322 .blog_entry .audience {
323     text-align: right;
324     padding-right: 4px;
326 .blog_entry .tags {
327     margin-top: 15px;
329 .blog_entry .content {
330     margin-left: 43px;
332 // Group
333 #page-group-index #groupeditform {
334     text-align: center;
336 #doc-contents h1 {
337     margin: 1em 0 0 0;
339 #doc-contents ul {
340     margin: 0;
341     padding: 0;
342     width: 90%;
344 #doc-contents ul li {
345     list-style-type: none;
347 .groupmanagementtable td {
348     vertical-align: top;
350 .groupmanagementtable #existingcell,
351 .groupmanagementtable #potentialcell {
352     width: 42%;
354 .groupmanagementtable #buttonscell {
355     width: 16%;
357 .groupmanagementtable #buttonscell p.arrow_button input {
358     width: auto;
359     min-width: 80%;
360     margin: 0 auto;
362 .groupmanagementtable #removeselect_wrapper,
363 .groupmanagementtable #addselect_wrapper {
364     width: 100%;
366 .groupmanagementtable #removeselect_wrapper label,
367 .groupmanagementtable #addselect_wrapper label {
368     font-weight: normal;
370 #group-usersummary {
371     width: 14em;
373 .groupselector {
374     margin-top: 3px;
375     margin-bottom: 3px;
376     display: inline-block;
378 .groupselector label {
379     display: inline-block;
382 // Login
383 .login-page {
384     [name="username"] {
385         margin-bottom: -1px;
386         border-bottom-right-radius: 0;
387         border-bottom-left-radius: 0;
388     }
389     [type="password"] {
390         margin-bottom: 10px;
391         border-top-left-radius: 0;
392         border-top-right-radius: 0;
393     }
396 // Notes
397 .notepost {
398     margin-bottom: 1em;
400 .notepost .userpicture {
401     float: left;
402     margin-right: 5px;
404 .notepost .content,
405 .notepost .footer {
406     clear: both;
408 .notesgroup {
409     margin-left: 20px;
412 // My Moodle
413 .path-my .coursebox .overview {
414     margin: 15px 30px 10px 30px;
416 .path-my .coursebox .info {
417     float: none;
418     margin: 0;
421 // Modules
422 .mod_introbox {
423     padding: 10px;
425 table.mod_index {
426     width: 100%;
429 // Comments
430 .comment-ctrl {
431     font-size: 12px;
432     display: none;
433     margin: 0;
434     padding: 0;
436 .comment-ctrl h5 {
437     margin: 0;
438     padding: 5px;
440 .comment-area {
441     max-width: 400px;
442     padding: 5px;
444 .comment-area textarea {
445     width: 100%;
446     overflow: auto;
447     &.fullwidth {
448         -webkit-box-sizing: border-box;
449         -moz-box-sizing: border-box;
450         box-sizing: border-box;
451     }
453 .comment-area .fd {
454     text-align: right;
456 .comment-meta span {
457     color: gray;
459 .comment-link img {
460     vertical-align: text-bottom;
462 .comment-list {
463     font-size: 11px;
464     overflow: auto;
465     list-style: none;
466     padding: 0;
467     margin: 0;
469 .comment-list li {
470     margin: 2px;
471     list-style: none;
472     margin-bottom: 5px;
473     clear: both;
474     padding: .3em;
475     position: relative;
477 .comment-list li.first {
478     display: none
480 .comment-paging{
481     text-align: center;
483 .comment-paging .pageno{
484     padding: 2px;
486 .comment-paging .curpage{
487     border: 1px solid #CCC;
489 .comment-message .picture {
490     width: 20px;
491     float: left;
493 .comment-message .text {
494     margin: 0;
495     padding: 0;
497 .comment-message .text p {
498     padding: 0;
499     margin: 0 18px 0 0;
501 .comment-delete {
502     position: absolute;
503     top: 0;
504     right: 0;
505     margin: .3em;
507 .comment-report-selectall{
508     display: none
510 .comment-link {
511     display: none
513 .jsenabled .comment-link {
514     display: block
516 .jsenabled .showcommentsnonjs{
517     display: none
519 .jsenabled .comment-report-selectall{
520     display: inline
522 /**
523 * Completion progress report
524 */
525 .completion-expired {
526     @extend .text-warning;
528 .completion-expected {
529     font-size: $font-size-xs;
531 .completion-sortchoice,
532 .completion-identifyfield {
533     font-size: $font-size-xs;
534     vertical-align: bottom;
536 .completion-progresscell {
537     text-align: right;
539 .completion-expired .completion-expected {
540     font-weight: bold;
542 /**
543 * Tags
544 */
545 img.user-image {
546     height: 100px;
547     width: 100px;
549 #tag-search-box {
550     text-align: center;
551     margin: 10px auto;
554 .path-tag .tag-index-items .tagarea {
555     border: 1px solid #E3E3E3;
556     border-radius: 4px;
557     padding: 10px;
558     margin-top: 10px;
561 .path-tag .tag-index-items .tagarea h3 {
562     display: block;
563     padding: 3px 0 10px 0;
564     margin: 0px;
565     font-size: 1.1em;
566     font-weight: bold;
567     line-height: 20px;
568     color: #999;
569     text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
570     text-transform: uppercase;
571     word-wrap: break-word;
572     border-bottom: solid 1px #E3E3E3;
573     margin-bottom: 10px;
576 .path-tag .tagarea .controls,
577 .path-tag .tagarea .taggeditems {
578     @include clearfix();
580 .path-tag .tagarea .controls,
581 .path-tag .tag-backtoallitems {
582     text-align: center;
584 .path-tag .tagarea .controls .gotopage.nextpage {
585     float: right;
587 .path-tag .tagarea .controls .gotopage.prevpage {
588     float: left;
590 .path-tag .tagarea .controls .exclusivemode {
591     display: inline-block;
593 .path-tag .tagarea .controls.controls-bottom {
594     margin-top: 5px;
596 .path-tag .tagarea .controls .gotopage.nextpage::after {
597     padding-right: 5px;
598     padding-left: 5px;
599     content: "»";
601 .path-tag .tagarea .controls .gotopage.prevpage::before {
602     padding-right: 5px;
603     padding-left: 5px;
604     content: "«";
607 span.flagged-tag,
608 tr.flagged-tag,
609 span.flagged-tag a,
610 tr.flagged-tag a {
611     @extend .text-warning;
613 .tag-management-table td,
614 .tag-management-table th {
615     vertical-align: middle;
616     padding: 4px;
618 .tag-management-table .inplaceeditable.inplaceeditingon input {
619     width: 150px;
621 .path-admin-tag .addstandardtags {
622     float: right;
623     img {
624         margin: 0 5px;
625     }
627 .path-tag .tag-relatedtags {
628     padding-top: 10px;
630 .path-tag .tag-management-box {
631     text-align: right;
633 .path-tag .tag-index-toc {
634     padding: 10px;
635     text-align: center;
637 .path-tag .tag-index-toc li,
638 .path-tag .tag-management-box li {
639     margin-left: 5px;
640     margin-right: 5px;
642 .path-tag .tag-management-box li a.edittag {
643     background-image: url([[pix:moodle|i/settings]]);
645 .path-tag .tag-management-box li a.flagasinappropriate {
646     background-image: url([[pix:moodle|i/flagged]]);
648 .path-tag .tag-management-box li a.removefrommyinterests {
649     background-image: url([[pix:moodle|t/delete]]);
651 .path-tag .tag-management-box li a.addtomyinterests {
652     background-image: url([[pix:moodle|t/add]]);
654 .path-tag .tag-management-box li a {
655     background-repeat: no-repeat;
656     background-position: left;
657     padding-left: 17px;
659 .tag_feed.media-list .media .itemimage {
660     float: left;
662 .tag_feed.media-list .media .itemimage img {
663     height: 35px;
664     width: 35px;
666 .tag_feed.media-list .media .media-body {
667     padding-right: 10px;
668     padding-left: 10px;
670 .tag_feed .media .muted a {
671     @extend .text-muted;
673 .tag_cloud {
674     text-align: center;
676 .tag_cloud .inline-list li {
677     padding: 0px 0.2em;
679 .tag_cloud .tag_overflow {
680     margin-top: 1em;
681     font-style: italic;
683 .tag_cloud .s20 {
684     font-size: 2.7em;
686 .tag_cloud .s19 {
687     font-size: 2.6em;
689 .tag_cloud .s18 {
690     font-size: 2.5em;
692 .tag_cloud .s17 {
693     font-size: 2.4em;
695 .tag_cloud .s16 {
696     font-size: 2.3em;
698 .tag_cloud .s15 {
699     font-size: 2.2em;
701 .tag_cloud .s14 {
702     font-size: 2.1em;
704 .tag_cloud .s13 {
705     font-size: 2em;
707 .tag_cloud .s12 {
708     font-size: 1.9em;
710 .tag_cloud .s11 {
711     font-size: 1.8em;
713 .tag_cloud .s10 {
714     font-size: 1.7em;
716 .tag_cloud .s9 {
717     font-size: 1.6em;
719 .tag_cloud .s8 {
720     font-size: 1.5em;
722 .tag_cloud .s7 {
723     font-size: 1.4em;
725 .tag_cloud .s6 {
726     font-size: 1.3em;
728 .tag_cloud .s5 {
729     font-size: 1.2em;
731 .tag_cloud .s4 {
732     font-size: 1.1em;
734 .tag_cloud .s3 {
735     font-size: 1em;
737 .tag_cloud .s2 {
738     font-size: 0.9em;
740 .tag_cloud .s1 {
741     font-size: 0.8em;
743 .tag_cloud .s0 {
744     font-size: 0.7em;
746 .tag_list ul {
747     display: inline;
749 .tag_list.hideoverlimit .overlimit {
750     display:none;
752 .tag_list .tagmorelink {
753     display:none;
755 .tag_list.hideoverlimit .tagmorelink {
756     display:inline;
758 .tag_list.hideoverlimit .taglesslink {
759     display:none;
762 /**
763 * Web Service
764 */
765 #webservice-doc-generator td {
766     text-align: left;
767     border: 0 solid black;
769 /**
770 * Smart Select Element
771 */
772 .smartselect {
773     position: absolute;
775 .smartselect .smartselect_mask {
776     background-color: #fff;
778 .smartselect ul  {
779     padding: 0;
780     margin: 0;
782 .smartselect ul li {
783     list-style: none;
785 .smartselect .smartselect_menu {
786     margin-right: 5px;
788 .safari .smartselect .smartselect_menu {
789     margin-left: 2px;
791 .smartselect .smartselect_menu,
792 .smartselect .smartselect_submenu {
793     border: 1px solid #000;
794     background-color: #FFF;
795     display: none;
797 .smartselect .smartselect_menu.visible,
798 .smartselect .smartselect_submenu.visible {
799     display: block;
801 .smartselect .smartselect_menu_content ul li {
802     position: relative;
803     padding: 2px 5px;
805 .smartselect .smartselect_menu_content ul li a {
806     color: #333;
807     text-decoration: none;
809 .smartselect .smartselect_menu_content ul li a.selectable {
810     color: inherit;
812 .smartselect .smartselect_submenuitem {
813     background-image: url([[pix:moodle|t/collapsed]]);
814     background-repeat: no-repeat;
815     background-position: 100%;
817 /** Spanning mode */
818 .smartselect.spanningmenu .smartselect_submenu {
819     position: absolute;
820     top: -1px;
821     left: 100%;
823 .smartselect.spanningmenu .smartselect_submenu a {
824     white-space: nowrap;
825     padding-right: 16px;
827 .smartselect.spanningmenu .smartselect_menu_content ul li a.selectable:hover {
828     text-decoration: underline;
830 /** Compact mode */
831 .smartselect.compactmenu .smartselect_submenu {
832     position: relative;
833     margin: 2px -3px;
834     margin-left: 10px;
835     display: none;
836     border-width: 0;
837     z-index: 1010;
839 .smartselect.compactmenu .smartselect_submenu.visible {
840     display: block;
842 .smartselect.compactmenu .smartselect_menu {
843     z-index: 1000;
844     overflow: hidden;
846 .smartselect.compactmenu .smartselect_submenu .smartselect_submenu {
847     z-index: 1020;
849 .smartselect.compactmenu .smartselect_submenuitem:hover > .smartselect_menuitem_label {
850     font-weight: bold;
852 /**
853 * Registration
854 */
855 #page-admin-registration-register .registration_textfield {
856     width: 300px;
858 /**
859 * Enrol
860 */
861 .userenrolment {
862     width: 100%;
863     border-collapse: collapse;
865 .userenrolment tr {
866     vertical-align:top;
868 .userenrolment td {
869     padding: 0;
870     height: 41px;
872 .userenrolment .subfield {
873     margin-right: 5px;
875 .userenrolment .col_userdetails .subfield {
876     margin-left: 40px;
878 .userenrolment .col_userdetails .subfield_picture {
879     float: left;
880     margin-left: 0;
882 .userenrolment .col_lastseen {
883     width: 150px;
885 .userenrolment .col_role {
886     width: 262px;
888 .userenrolment .col_role .roles,
889 .userenrolment .col_group .groups {
890     margin-right: 30px;
892 .userenrolment .col_role .role,
893 .userenrolment .col_group .group {
894     float: left;
895     padding: 3px;
896     margin: 3px;
897     white-space: nowrap;
899 .userenrolment .col_role .role a,
900 .userenrolment .col_group .group a {
901     margin-left: 3px;
902     cursor: pointer;
904 .userenrolment .col_role .addrole,
905 .userenrolment .col_group .addgroup {
906     float: right;
907     padding: 3px;
908     margin: 3px;
909     > a:hover {
910         border-bottom:1px solid #666;
911     }
913 .userenrolment .col_role .addrole img,
914 .userenrolment .col_group .addgroup img {
915     vertical-align: baseline;
918 .userenrolment .hasAllRoles .col_role .addrole {
919     display: none;
922 .userenrolment .col_enrol .enrolment {
923     float: left;
924     padding: 3px;
925     margin: 3px;
927 .userenrolment .col_enrol .enrolment a {
928     float: right;
929     margin-left: 3px;
931 #page-enrol-users {
932     .enrol_user_buttons {
933         float: right;
934         .enrolusersbutton {
935             display: inline;
936             div,
937             form {
938                 display: inline;
939                 margin-right: 0;
940             }
941         }
942     }
943     #filterform {
944         @extend .card;
945         display: inline-block;
946         .fitem {
947             display: inline-block;
948             line-height: $line-height-base * 2;
949             margin-right: .3em;
950             white-space: nowrap;
951             label {
952                 display: inline;
953                 line-height: $line-height-base;
954                 padding-right: .3em;
955             }
956             :before,
957             :after {
958                 display: inline;
959             }
960         }
961         div,
962         fieldset {
963             display: inline;
964             float: none;
965             clear: none;
966             width: auto;
967             margin: 0;
968         }
969         select,
970         .ftext input {
971             width: 7em;
972         }
973         input,
974         select {
975             margin-bottom: 0;
976         }
977     }
978   .user-enroller-panel .uep-search-results .user .details {
979     width: 237px;
980   }
981   .user-enroller-panel .uep-search-results .cohort .details {
982     width: 237px;
983   }
985 #page-enrol-users .enrol-users-page-action input {
986     margin-left: 0
988 .corelightbox {
989     background-color: #CCC;
990     position: absolute;
991     top: 0;
992     left: 0;
993     width: 100%;
994     height: 100%;
995     text-align: center;
997 .corelightbox img {
998     position: fixed;
999     top: 50%;
1000     left: 50%;
1003 .mod-indent-outer {
1004     display: table;
1006 .mod-indent {
1007     display: table-cell;
1009 .label .mod-indent {
1010   float:left;
1011   padding-top:20px
1014 $mod-indent-size: 30px;
1015 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1016 @for $i from 1 through 16 {
1017    $width: ($i * $mod-indent-size);
1019    .mod-indent-#{$i} {
1020        width: $width;
1021    }
1023 .mod-indent-huge {
1024    width: (16 * $mod-indent-size);
1027 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1028 .resourcecontent .mediaplugin_mp3 object {
1029     height: 25px;
1030     width: 600px
1032 .resourcecontent audio.mediaplugin_html5audio {
1033     width: 600px
1035 /** Large resource images should avoid hidden overflow **/
1036 .resourceimage {
1037     max-width: 100%;
1039 /* Audio player size in 'inline' mode (can only change width, as above) */
1040 .mediaplugin_mp3 object {
1041     height: 15px;
1042     width: 300px
1044 audio.mediaplugin_html5audio {
1045     width: 300px
1047 /* TinyMCE moodle media preview frame should not have padding */
1048 .core_media_preview.pagelayout-embedded #content {
1049     padding: 0;
1051 .core_media_preview.pagelayout-embedded #maincontent {
1052     height: 0;
1054 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1055     padding: 0;
1056     margin: 0;
1057     min-width: 0;
1058     background: none;
1060 .path-rating .ratingtable {
1061     width: 100%;
1062     margin-bottom: 1em;
1064 .path-rating .ratingtable th.rating {
1065     width: 100%;
1067 .path-rating .ratingtable td.rating,
1068 .path-rating .ratingtable td.time {
1069     white-space: nowrap;
1070     text-align: center;
1072 .initialbar {
1073     a, strong {
1074         padding-left: 3px;
1075         padding-right: 3px;
1076     }
1079 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1080 .moodle-dialogue-base .moodle-dialogue-lightbox {
1081     background-color: #AAA;
1083 .moodle-dialogue-base .hidden,
1084 .moodle-dialogue-base .moodle-dialogue-hidden {
1085     display: none;
1087 .no-scrolling {
1088     overflow: hidden;
1090 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1091     left: 0px;
1092     top: 0px;
1093     right: 0px;
1094     bottom: -50px;
1095     position: fixed;
1097 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1098     overflow: auto;
1100 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1101     width: 28px;
1102     height: 16px;
1103     background-size: 100%;
1105 .moodle-dialogue-base .moodle-dialogue-wrap {
1106     background-color: #fff;
1107     border: 1px solid #ccc;
1109 .moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content {
1110     @extend .modal-content;
1112 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1113     @extend .modal-header;
1115 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1116     // Undo some YUI damage.
1117     min-height: 3rem;
1118     color: initial;
1119     background-color: initial;
1120     background: initial;
1121     font-size: 1.5rem;
1122     line-height: 1.5;
1124 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1125     @extend .modal-title;
1127 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1128     padding: 5px;
1129     right: 0;
1131 .moodle-dialogue-base .closebutton {
1132     @extend .close;
1133     margin: 0;
1134     padding: 10px ! important;
1135     background: 0;
1136     border-style: none;
1137     box-shadow: none;
1139 .moodle-dialogue-base .closebutton::after {
1140     content: "×";
1142 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1143     @extend .modal-body;
1146 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1147     overflow: auto;
1148     position: absolute;
1149     top: 0px;
1150     bottom: 50px;
1151     left: 0px;
1152     right: 0px;
1153     margin: 0px;
1154     border: 0px;
1156 .moodle-dialogue-confirm .confirmation-dialogue {
1157     text-align: center;
1159 .moodle-dialogue-confirm .confirmation-dialogue input {
1160     text-align: center;
1162 .moodle-dialogue-exception .moodle-exception-message {
1163     text-align: center
1165 .moodle-dialogue-exception .moodle-exception-param label {
1166     font-weight: bold;
1168 .moodle-dialogue-exception .param-stacktrace label {
1169     background-color: #EEE;
1170     border: 1px solid #ccc;
1171     border-bottom-width: 0;
1173 .moodle-dialogue-exception .param-stacktrace pre {
1174     border: 1px solid #ccc;
1175     background-color: #fff;
1177 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1178     color: navy;
1179     font-size: $font-size-sm;
1181 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1182     @extend .text-warning;
1183     font-size: $font-size-sm;
1185 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1186     color: #333;
1187     font-size: 90%;
1188     border-bottom: 1px solid #eee;
1190 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1191     @extend .modal-footer;
1193 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1194     // Undo some YUI damage.
1195     background: initial;
1197 .moodle-dialogue-confirm .confirmation-message {
1198     margin: 0.5em 1em;
1200 .moodle-dialogue-confirm .confirmation-dialogue input {
1201     min-width: 80px
1203 .moodle-dialogue-exception .moodle-exception-message {
1204     margin: 1em;
1206 .moodle-dialogue-exception .moodle-exception-param {
1207     margin-bottom: 0.5em;
1209 .moodle-dialogue-exception .moodle-exception-param label {
1210     width: 150px;
1212 .moodle-dialogue-exception .param-stacktrace label {
1213     display: block;
1214     margin: 0;
1215     padding: 4px 1em;
1217 .moodle-dialogue-exception .param-stacktrace pre {
1218     display: block;
1219     height: 200px;
1220     overflow: auto;
1222 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1223     display: inline-block;
1224     margin: 4px 0;
1226 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1227     display: inline-block;
1228     width: 50px;
1229     margin: 4px 1em;
1231 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1232     padding-left: 25px;
1233     margin-bottom: 4px;
1234     padding-bottom: 4px;
1236 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1237     opacity: 0.75;
1238     width: 100%;
1239     height: 100%;
1240     top: 0;
1241     left: 0;
1242     background-color: white;
1243     text-align: center;
1244     padding: 10% 0;
1246 /* Apply a default max-height on tooltip text */
1247 .moodle-dialogue .tooltiptext {
1248     max-height: 300px;
1251 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1252     z-index: 3001;
1254     .moodle-dialogue-bd {
1255         overflow: auto;
1256     }
1259 /**
1260  * Chooser Dialogues (moodle-core-chooserdialogue)
1261  *
1262  * This CSS belong to the chooser dialogue which should work both with, and
1263  * without javascript enabled
1264  */
1265 /* Hide the dialog and it's title */
1266 .chooserdialoguebody,
1267 .choosertitle {
1268     display: none;
1270 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1271     margin: 0;
1273 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1274     padding: 0;
1275     background: #F2F2F2;
1276     @include border-bottom-radius(10px);
1278 /* Center the submit buttons within the area */
1279 .choosercontainer #chooseform .submitbuttons {
1280     padding: 0.7em 0;
1281     text-align: center;
1283 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1284 @media (max-height: 639px) {
1285     .ios.safari .choosercontainer #chooseform .submitbuttons {
1286         padding: 45px 0;
1287     }
1289 .choosercontainer #chooseform .submitbuttons input {
1290     min-width: 100px;
1291     margin: 0 0.5em;
1293 /* Various settings for the options area */
1294 .choosercontainer #chooseform .options {
1295     position: relative;
1296     border-bottom: 1px solid #BBBBBB;
1298 /* Only set these options if we're showing the js container */
1299 .jschooser .choosercontainer #chooseform .alloptions {
1300     overflow-x: hidden;
1301     overflow-y: auto;
1302     max-width: 20.3em;
1303     @include box-shadow(inset 0 0 30px 0px #ccc);
1304     .option {
1305         input[type=radio] {
1306             display: inline-block;
1307         }
1308         .modicon {
1309             display: inline-block;
1310         }
1311         .typename {
1312             display: inline-block;
1313             width: 65%;
1314         }
1315     }
1317 /* Settings for option rows and option subtypes */
1318 .choosercontainer #chooseform .moduletypetitle,
1319 .choosercontainer #chooseform .option,
1320 .choosercontainer #chooseform .nonoption {
1321     margin-bottom: 0;
1322     padding: 0 1.6em 0 1.6em;
1324 .choosercontainer #chooseform .moduletypetitle {
1325     text-transform: uppercase;
1326     padding-top: 1.2em;
1327     padding-bottom: 0.4em;
1329 .choosercontainer #chooseform .option .typename,
1330 .choosercontainer #chooseform .option span.modicon img.icon,
1331 .choosercontainer #chooseform .nonoption .typename,
1332 .choosercontainer #chooseform .nonoption span.modicon img.icon {
1333     padding: 0 0 0 0.5em;
1336 .chooserdialogue-course-modchooser .choosercontainer #chooseform .option span.modicon img.icon,
1337 .chooserdialogue-course-modchooser .choosercontainer #chooseform .nonoption span.modicon img.icon {
1338     height: 24px;
1339     width: 24px;
1341 .choosercontainer #chooseform .option input[type=radio],
1342 .choosercontainer #chooseform .option span.typename,
1343 .choosercontainer #chooseform .option span.modicon {
1344     vertical-align: middle;
1346 .choosercontainer #chooseform .option label {
1347     display: block;
1348     padding: 0.3em 0 0.1em 0;
1349     border-bottom: 1px solid #FFFFFF;
1351 .choosercontainer #chooseform .nonoption {
1352     padding-left: 2.7em;
1353     padding-top: 0.3em;
1354     padding-bottom: 0.1em;
1356 .choosercontainer #chooseform .subtype {
1357     margin-bottom: 0;
1358     padding: 0 1.6em 0 3.2em;
1360 .choosercontainer #chooseform .subtype .typename {
1361     margin: 0 0 0 0.2em;
1363 /* The instruction/help area */
1364 .jschooser .choosercontainer #chooseform .instruction,
1365 .jschooser .choosercontainer #chooseform .typesummary {
1366    display: none;
1367     position: absolute;
1368     top: 0;
1369     right: 0;
1370     bottom: 0;
1371     left: 20.3em;
1372     margin: 0;
1373     padding: 1.6em;
1374     background-color: #fff;
1375     overflow-x: hidden;
1376     overflow-y: auto;
1377     line-height: 2em;
1379 /* Selected option settings */
1380 .jschooser .choosercontainer #chooseform .instruction,
1381 .choosercontainer #chooseform .selected .typesummary {
1382     display: block;
1384 .choosercontainer #chooseform .selected {
1385     background-color: #fff;
1386     @include box-shadow(0px 0 10px 0 #ccc);
1388 /* Form element: listing */
1389 .formlistingradio {
1390     padding-bottom: 25px;
1391     padding-right: 10px;
1393 .formlistinginputradio {
1394     float: left;
1396 .formlistingmain {
1397     min-height: 225px;
1399 .formlisting {
1400     position: relative;
1401     margin: 15px 0;
1402     padding: 1px 19px 14px;
1403     background-color: white;
1404     border: 1px solid #DDD;
1405     @include border-radius(4px);
1407 .formlistingmore {
1408     position: absolute;
1409     cursor: pointer;
1410     bottom: -1px;
1411     right: -1px;
1412     padding: 3px 7px;
1413     font-size: 12px;
1414     font-weight: bold;
1415     background-color: whiteSmoke;
1416     border: 1px solid #ddd;
1417     color: #9DA0A4;
1418     @include border-radius(4px 0 4px 0);
1420 .formlistingall {
1421     margin: 15px 0;
1422     padding: 0;
1423     @include border-radius(4px);
1425 .formlistingrow {
1426     cursor: pointer;
1427     border-bottom: 1px solid;
1428     border-color: #E1E1E8;
1429     border-left: 1px solid #E1E1E8;
1430     border-right: 1px solid #E1E1E8;
1431     background-color: #F7F7F9;
1432     @include border-radius(0 0 4px 4px);
1433     padding: 6px;
1434     top: 50%;
1435     left: 50%;
1436     min-height: 34px;
1437     float: left;
1438     width: 150px;
1440 body.jsenabled .formlistingradio {
1441     display: none;
1443 body.jsenabled .formlisting {
1444     display: block;
1447 /* Badges styles */
1448 table.collection {
1449     @extend .table;
1450     @extend .table-bordered;
1451     @extend .table-striped;
1453 table.collection .name {
1454     text-align: left;
1455     vertical-align: middle;
1457 table.collection .awards {
1458     width: 10%;
1459     text-align: center;
1460     vertical-align: middle;
1462 table.collection .criteria {
1463     width: 40%;
1464     text-align: left;
1465     vertical-align: top;
1467 table.collection .badgeimage,
1468 table.collection .status {
1469     width: 15%;
1470     text-align: center;
1471     vertical-align: middle;
1473 table.collection .description {
1474     width: 25%;
1475     text-align: left;
1477 table.collection .actions {
1478     width: 11em;
1479     text-align: center;
1480     vertical-align: middle;
1483 a.criteria-action {
1484     padding: 0px 3px;
1485     float: right;
1487 div.criteria-description {
1488     padding: 10px 15px;
1489     margin: 5px 0px;
1490     background: none repeat scroll 0 0 #f9f9f9;
1491     border: 1px solid #EEE;
1493 ul.badges {
1494     margin: 0;
1495     list-style: none;
1497 .badges li {
1498     position: relative;
1499     display: inline-block;
1500     padding-top: 1em;
1501     text-align: center;
1502     vertical-align: top;
1503     width: 150px;
1505 .badges li .badge-name {
1506     display: block;
1507     padding: 5px;
1509 .badges li > img {
1510     position: absolute;
1512 .badges li .badge-image {
1513     width: 100px;
1514     height: 100px;
1515     left: 10px;
1516     top: 0px;
1517     z-index: 1;
1519 .badges li .badge-actions {
1520     position: relative;
1522 .badges li .expireimage {
1523     width: 100px;
1524     height: 100px;
1525     left: 25px;
1526     top: 0px;
1527     position: absolute;
1528     z-index: 10;
1529     opacity: 0.85;
1532 #badge-image {
1533     background-color: transparent;
1534     padding: 0;
1535     position: relative;
1536     min-width: 100px;
1537     width: 20%;
1538     display: inline-block;
1539     vertical-align: top;
1540     margin-top: 17px;
1542     .expireimage {
1543         width: 100px;
1544         height: 100px;
1545         left: 0px;
1546         top: 0px;
1547         opacity: 0.85;
1548         position: absolute;
1549         z-index:10;
1550     }
1552     .singlebutton {
1553         padding-top: 5px;
1555         input {
1556             margin-left: 0px;
1557         }
1558     }
1560 #badge-details {
1561     display: inline-block;
1562     width: 79%;
1565 #badge-overview dl,
1566 #badge-details dl {
1567     margin: 0;
1569     dt,
1570     dd {
1571         vertical-align: top;
1572         padding: 3px 0;
1573     }
1574     dt {
1575         clear: both;
1576         display: inline-block;
1577         width: 20%;
1578         min-width: 100px;
1579     }
1580     dd {
1581         display: inline-block;
1582         width: 79%;
1583         margin-left: 1%;
1584     }
1587 .badge-profile {
1588     vertical-align: top;
1590 .connected {
1591     @extend .text-success;
1593 .notconnected {
1594     @extend .text-danger;
1596 .connecting {
1597     @extend .text-warning;
1599 #page-badges-award .recipienttable tr td {
1600     vertical-align: top;
1602 #page-badges-award .recipienttable tr td.actions .actionbutton {
1603     margin: 0.3em 0;
1604     padding: 0.5em 0;
1605     width: 100%;
1607 #page-badges-award .recipienttable tr td.existing,
1608 #page-badges-award .recipienttable tr td.potential {
1609     width: 42%;
1612 #issued-badge-table .activatebadge {
1613     display: inline-block;
1615 .statusbox.active {
1616     background-color: $state-success-bg;
1618 .statusbox.inactive {
1619     background-color: $state-warning-bg;
1621 .statusbox {
1622     text-align: center;
1623     margin-bottom: 5px;
1624     padding: 5px;
1626 .statusbox .activatebadge {
1627     display: inline-block;
1629 .statusbox .activatebadge input[type=submit]{
1630     margin: 3px;
1632 .activatebadge {
1633     margin: 0px;
1634     text-align: left;
1635     vertical-align: middle;
1637 img#persona_signin {
1638     cursor: pointer;
1640 .addcourse {
1641     float: right;
1643 .invisiblefieldset {
1644     display: inline;
1645     margin: 0;
1646     padding: 0;
1647     border-width: 0;
1649 .breadcrumb-nav {
1650     float: left;
1651     margin-bottom: 10px;
1653 .breadcrumb-button .singlebutton div {
1654     margin-right: 0;
1656 .breadcrumb-nav .breadcrumb {
1657     margin: 0;
1660 /** Header-bar styles **/
1661 .page-context-header {
1662     // We need to be explicit about the height of the header.
1663     $pageHeaderHeight: 140px;
1665     // Do not remove these rules.
1666     overflow: hidden;
1668     .page-header-image,
1669     .page-header-headings {
1670         display: block;
1671         position: relative;
1672     }
1673     .page-header-image {
1674         float: left;
1675         margin-right: 1em;
1676         margin-bottom: 1em;
1677     }
1678     .page-header-headings {
1679         margin-top: 30px;
1680         margin-bottom: 10px;
1682         h1 {
1683             display: block;
1684         }
1685     }
1687     .page-header-headings,
1688     .header-button-group {
1689         position: relative;
1690         line-height: 24px;
1691         vertical-align: middle;
1692     }
1694     .header-button-group {
1695         display: block;
1696         float: left;
1697         a {
1698             position: relative;
1700             // Don't touch it unless you know exactly what you are doing.
1701             top: -0.4em;
1702         }
1703     }
1706 ul.dragdrop-keyboard-drag li {
1707     list-style-type: none;
1710 .block-control-actions .moodle-core-dragdrop-draghandle img {
1711     width: 12px;
1712     height: 12px;
1715 a.disabled:hover,
1716 a.disabled {
1717     text-decoration: none;
1718     cursor: default;
1719     font-style: italic;
1720     color: #808080;
1722 body.lockscroll {
1723   height: 100%;
1724   overflow: hidden;
1727 .progressbar_container {
1728     max-width: 500px;
1729     margin: 0 auto;
1732 /* IE10 only fix for calendar titling */
1733 .ie10 .yui3-calendar-header-label {
1734     display: inline-block;
1737 dd:before,
1738 dd:after {
1739   display: block;
1740   content: " ";
1742 dd:after {
1743   clear: both;
1746 // Active tabs with links should have a different
1747 // cursor to indicate they are clickable.
1748 .nav-tabs > .active > a[href],
1749 .nav-tabs > .active > a[href]:hover,
1750 .nav-tabs > .active > a[href]:focus {
1751     cursor: pointer;
1754 .inplaceeditable {
1756     &.inplaceeditingon {
1757         position: relative;
1759         .editinstructions {
1760             margin-top: -30px;
1761             font-weight: normal;
1762             margin-right: 0;
1763             margin-left: 0;
1764             left: 0;
1765             right: auto;
1766             white-space: nowrap;
1767         }
1769         input {
1770             width: 330px;
1771             height: 16px;
1772             vertical-align: text-bottom;
1773             margin-bottom: 0;
1774         }
1776         select {
1777             margin-bottom: 0;
1778         }
1779     }
1781     .quickediticon img {
1782         opacity: 0.2;
1783     }
1785     .quickeditlink {
1786         color: inherit;
1787         text-decoration: inherit;
1788     }
1790     &:hover .quickeditlink .quickediticon img,
1791     .quickeditlink:focus .quickediticon img {
1792         opacity: 1;
1793     }
1795     &.inplaceeditable-toggle .quickediticon {
1796         display: none;
1797     }
1800 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
1801     margin-top: -20px;
1803 // Reset for ul.
1804 ul {
1805     padding-left: 1rem;