b31792792f4b5736622b9f7b234d3b24522d4dbd
[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;
381 // Data format selector
382 .dataformatselector {
383     margin: 1em 0;
385 .dataformatselector label {
386     display: inline-block;
387     margin: 0 5px 10px 0;
388     line-height: 30px;
389     vertical-align: top;
392 // Login
393 .login-page {
394     [name="username"] {
395         margin-bottom: -1px;
396         border-bottom-right-radius: 0;
397         border-bottom-left-radius: 0;
398     }
399     [type="password"] {
400         margin-bottom: 10px;
401         border-top-left-radius: 0;
402         border-top-right-radius: 0;
403     }
406 // Notes
407 .notepost {
408     margin-bottom: 1em;
410 .notepost .userpicture {
411     float: left;
412     margin-right: 5px;
414 .notepost .content,
415 .notepost .footer {
416     clear: both;
418 .notesgroup {
419     margin-left: 20px;
422 // My Moodle
423 .path-my .coursebox .overview {
424     margin: 15px 30px 10px 30px;
426 .path-my .coursebox .info {
427     float: none;
428     margin: 0;
431 // Modules
432 .mod_introbox {
433     padding: 10px;
435 table.mod_index {
436     width: 100%;
439 // Comments
440 .comment-ctrl {
441     font-size: 12px;
442     display: none;
443     margin: 0;
444     padding: 0;
446 .comment-ctrl h5 {
447     margin: 0;
448     padding: 5px;
450 .comment-area {
451     max-width: 400px;
452     padding: 5px;
454 .comment-area textarea {
455     width: 100%;
456     overflow: auto;
457     &.fullwidth {
458         -webkit-box-sizing: border-box;
459         -moz-box-sizing: border-box;
460         box-sizing: border-box;
461     }
463 .comment-area .fd {
464     text-align: right;
466 .comment-meta span {
467     color: gray;
469 .comment-link img {
470     vertical-align: text-bottom;
472 .comment-list {
473     font-size: 11px;
474     overflow: auto;
475     list-style: none;
476     padding: 0;
477     margin: 0;
479 .comment-list li {
480     margin: 2px;
481     list-style: none;
482     margin-bottom: 5px;
483     clear: both;
484     padding: .3em;
485     position: relative;
487 .comment-list li.first {
488     display: none
490 .comment-paging{
491     text-align: center;
493 .comment-paging .pageno{
494     padding: 2px;
496 .comment-paging .curpage{
497     border: 1px solid #CCC;
499 .comment-message .picture {
500     width: 20px;
501     float: left;
503 .comment-message .text {
504     margin: 0;
505     padding: 0;
507 .comment-message .text p {
508     padding: 0;
509     margin: 0 18px 0 0;
511 .comment-delete {
512     position: absolute;
513     top: 0;
514     right: 0;
515     margin: .3em;
517 .comment-report-selectall{
518     display: none
520 .comment-link {
521     display: none
523 .jsenabled .comment-link {
524     display: block
526 .jsenabled .showcommentsnonjs{
527     display: none
529 .jsenabled .comment-report-selectall{
530     display: inline
532 /**
533 * Completion progress report
534 */
535 .completion-expired {
536     @extend .text-warning;
538 .completion-expected {
539     font-size: $font-size-xs;
541 .completion-sortchoice,
542 .completion-identifyfield {
543     font-size: $font-size-xs;
544     vertical-align: bottom;
546 .completion-progresscell {
547     text-align: right;
549 .completion-expired .completion-expected {
550     font-weight: bold;
552 /**
553 * Tags
554 */
555 img.user-image {
556     height: 100px;
557     width: 100px;
559 #tag-search-box {
560     text-align: center;
561     margin: 10px auto;
564 .path-tag .tag-index-items .tagarea {
565     border: 1px solid #E3E3E3;
566     border-radius: 4px;
567     padding: 10px;
568     margin-top: 10px;
571 .path-tag .tag-index-items .tagarea h3 {
572     display: block;
573     padding: 3px 0 10px 0;
574     margin: 0px;
575     font-size: 1.1em;
576     font-weight: bold;
577     line-height: 20px;
578     color: #999;
579     text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
580     text-transform: uppercase;
581     word-wrap: break-word;
582     border-bottom: solid 1px #E3E3E3;
583     margin-bottom: 10px;
586 .path-tag .tagarea .controls,
587 .path-tag .tagarea .taggeditems {
588     @include clearfix();
590 .path-tag .tagarea .controls,
591 .path-tag .tag-backtoallitems {
592     text-align: center;
594 .path-tag .tagarea .controls .gotopage.nextpage {
595     float: right;
597 .path-tag .tagarea .controls .gotopage.prevpage {
598     float: left;
600 .path-tag .tagarea .controls .exclusivemode {
601     display: inline-block;
603 .path-tag .tagarea .controls.controls-bottom {
604     margin-top: 5px;
606 .path-tag .tagarea .controls .gotopage.nextpage::after {
607     padding-right: 5px;
608     padding-left: 5px;
609     content: "»";
611 .path-tag .tagarea .controls .gotopage.prevpage::before {
612     padding-right: 5px;
613     padding-left: 5px;
614     content: "«";
617 span.flagged-tag,
618 tr.flagged-tag,
619 span.flagged-tag a,
620 tr.flagged-tag a {
621     @extend .text-warning;
623 .tag-management-table td,
624 .tag-management-table th {
625     vertical-align: middle;
626     padding: 4px;
628 .tag-management-table .inplaceeditable.inplaceeditingon input {
629     width: 150px;
631 .path-admin-tag .addstandardtags {
632     float: right;
633     img {
634         margin: 0 5px;
635     }
637 .path-tag .tag-relatedtags {
638     padding-top: 10px;
640 .path-tag .tag-management-box {
641     text-align: right;
643 .path-tag .tag-index-toc {
644     padding: 10px;
645     text-align: center;
647 .path-tag .tag-index-toc li,
648 .path-tag .tag-management-box li {
649     margin-left: 5px;
650     margin-right: 5px;
652 .path-tag .tag-management-box li a.edittag {
653     background-image: url([[pix:moodle|i/settings]]);
655 .path-tag .tag-management-box li a.flagasinappropriate {
656     background-image: url([[pix:moodle|i/flagged]]);
658 .path-tag .tag-management-box li a.removefrommyinterests {
659     background-image: url([[pix:moodle|t/delete]]);
661 .path-tag .tag-management-box li a.addtomyinterests {
662     background-image: url([[pix:moodle|t/add]]);
664 .path-tag .tag-management-box li a {
665     background-repeat: no-repeat;
666     background-position: left;
667     padding-left: 17px;
669 .tag_feed.media-list .media .itemimage {
670     float: left;
672 .tag_feed.media-list .media .itemimage img {
673     height: 35px;
674     width: 35px;
676 .tag_feed.media-list .media .media-body {
677     padding-right: 10px;
678     padding-left: 10px;
680 .tag_feed .media .muted a {
681     @extend .text-muted;
683 .tag_cloud {
684     text-align: center;
686 .tag_cloud .inline-list li {
687     padding: 0px 0.2em;
689 .tag_cloud .tag_overflow {
690     margin-top: 1em;
691     font-style: italic;
693 .tag_cloud .s20 {
694     font-size: 2.7em;
696 .tag_cloud .s19 {
697     font-size: 2.6em;
699 .tag_cloud .s18 {
700     font-size: 2.5em;
702 .tag_cloud .s17 {
703     font-size: 2.4em;
705 .tag_cloud .s16 {
706     font-size: 2.3em;
708 .tag_cloud .s15 {
709     font-size: 2.2em;
711 .tag_cloud .s14 {
712     font-size: 2.1em;
714 .tag_cloud .s13 {
715     font-size: 2em;
717 .tag_cloud .s12 {
718     font-size: 1.9em;
720 .tag_cloud .s11 {
721     font-size: 1.8em;
723 .tag_cloud .s10 {
724     font-size: 1.7em;
726 .tag_cloud .s9 {
727     font-size: 1.6em;
729 .tag_cloud .s8 {
730     font-size: 1.5em;
732 .tag_cloud .s7 {
733     font-size: 1.4em;
735 .tag_cloud .s6 {
736     font-size: 1.3em;
738 .tag_cloud .s5 {
739     font-size: 1.2em;
741 .tag_cloud .s4 {
742     font-size: 1.1em;
744 .tag_cloud .s3 {
745     font-size: 1em;
747 .tag_cloud .s2 {
748     font-size: 0.9em;
750 .tag_cloud .s1 {
751     font-size: 0.8em;
753 .tag_cloud .s0 {
754     font-size: 0.7em;
756 .tag_list ul {
757     display: inline;
759 .tag_list.hideoverlimit .overlimit {
760     display:none;
762 .tag_list .tagmorelink {
763     display:none;
765 .tag_list.hideoverlimit .tagmorelink {
766     display:inline;
768 .tag_list.hideoverlimit .taglesslink {
769     display:none;
772 /**
773 * Web Service
774 */
775 #webservice-doc-generator td {
776     text-align: left;
777     border: 0 solid black;
779 /**
780 * Smart Select Element
781 */
782 .smartselect {
783     position: absolute;
785 .smartselect .smartselect_mask {
786     background-color: #fff;
788 .smartselect ul  {
789     padding: 0;
790     margin: 0;
792 .smartselect ul li {
793     list-style: none;
795 .smartselect .smartselect_menu {
796     margin-right: 5px;
798 .safari .smartselect .smartselect_menu {
799     margin-left: 2px;
801 .smartselect .smartselect_menu,
802 .smartselect .smartselect_submenu {
803     border: 1px solid #000;
804     background-color: #FFF;
805     display: none;
807 .smartselect .smartselect_menu.visible,
808 .smartselect .smartselect_submenu.visible {
809     display: block;
811 .smartselect .smartselect_menu_content ul li {
812     position: relative;
813     padding: 2px 5px;
815 .smartselect .smartselect_menu_content ul li a {
816     color: #333;
817     text-decoration: none;
819 .smartselect .smartselect_menu_content ul li a.selectable {
820     color: inherit;
822 .smartselect .smartselect_submenuitem {
823     background-image: url([[pix:moodle|t/collapsed]]);
824     background-repeat: no-repeat;
825     background-position: 100%;
827 /** Spanning mode */
828 .smartselect.spanningmenu .smartselect_submenu {
829     position: absolute;
830     top: -1px;
831     left: 100%;
833 .smartselect.spanningmenu .smartselect_submenu a {
834     white-space: nowrap;
835     padding-right: 16px;
837 .smartselect.spanningmenu .smartselect_menu_content ul li a.selectable:hover {
838     text-decoration: underline;
840 /** Compact mode */
841 .smartselect.compactmenu .smartselect_submenu {
842     position: relative;
843     margin: 2px -3px;
844     margin-left: 10px;
845     display: none;
846     border-width: 0;
847     z-index: 1010;
849 .smartselect.compactmenu .smartselect_submenu.visible {
850     display: block;
852 .smartselect.compactmenu .smartselect_menu {
853     z-index: 1000;
854     overflow: hidden;
856 .smartselect.compactmenu .smartselect_submenu .smartselect_submenu {
857     z-index: 1020;
859 .smartselect.compactmenu .smartselect_submenuitem:hover > .smartselect_menuitem_label {
860     font-weight: bold;
862 /**
863 * Registration
864 */
865 #page-admin-registration-register .registration_textfield {
866     width: 300px;
868 /**
869 * Enrol
870 */
871 .userenrolment {
872     width: 100%;
873     border-collapse: collapse;
875 .userenrolment tr {
876     vertical-align:top;
878 .userenrolment td {
879     padding: 0;
880     height: 41px;
882 .userenrolment .subfield {
883     margin-right: 5px;
885 .userenrolment .col_userdetails .subfield {
886     margin-left: 40px;
888 .userenrolment .col_userdetails .subfield_picture {
889     float: left;
890     margin-left: 0;
892 .userenrolment .col_lastseen {
893     width: 150px;
895 .userenrolment .col_role {
896     width: 262px;
898 .userenrolment .col_role .roles,
899 .userenrolment .col_group .groups {
900     margin-right: 30px;
902 .userenrolment .col_role .role,
903 .userenrolment .col_group .group {
904     float: left;
905     padding: 3px;
906     margin: 3px;
907     white-space: nowrap;
909 .userenrolment .col_role .role a,
910 .userenrolment .col_group .group a {
911     margin-left: 3px;
912     cursor: pointer;
914 .userenrolment .col_role .addrole,
915 .userenrolment .col_group .addgroup {
916     float: right;
917     padding: 3px;
918     margin: 3px;
919     > a:hover {
920         border-bottom:1px solid #666;
921     }
923 .userenrolment .col_role .addrole img,
924 .userenrolment .col_group .addgroup img {
925     vertical-align: baseline;
928 .userenrolment .hasAllRoles .col_role .addrole {
929     display: none;
932 .userenrolment .col_enrol .enrolment {
933     float: left;
934     padding: 3px;
935     margin: 3px;
937 .userenrolment .col_enrol .enrolment a {
938     float: right;
939     margin-left: 3px;
941 #page-enrol-users {
942     .enrol_user_buttons {
943         float: right;
944         .enrolusersbutton {
945             display: inline;
946             div,
947             form {
948                 display: inline;
949                 margin-right: 0;
950             }
951         }
952     }
953     #filterform {
954         @extend .card;
955         display: inline-block;
956         .fitem {
957             display: inline-block;
958             line-height: $line-height-base * 2;
959             margin-right: .3em;
960             white-space: nowrap;
961             label {
962                 display: inline;
963                 line-height: $line-height-base;
964                 padding-right: .3em;
965             }
966             :before,
967             :after {
968                 display: inline;
969             }
970         }
971         div,
972         fieldset {
973             display: inline;
974             float: none;
975             clear: none;
976             width: auto;
977             margin: 0;
978         }
979         select,
980         .ftext input {
981             width: 7em;
982         }
983         input,
984         select {
985             margin-bottom: 0;
986         }
987     }
988   .user-enroller-panel .uep-search-results .user .details {
989     width: 237px;
990   }
991   .user-enroller-panel .uep-search-results .cohort .details {
992     width: 237px;
993   }
995 #page-enrol-users .enrol-users-page-action input {
996     margin-left: 0
998 .corelightbox {
999     background-color: #CCC;
1000     position: absolute;
1001     top: 0;
1002     left: 0;
1003     width: 100%;
1004     height: 100%;
1005     text-align: center;
1007 .corelightbox img {
1008     position: fixed;
1009     top: 50%;
1010     left: 50%;
1013 .mod-indent-outer {
1014     display: table;
1016 .mod-indent {
1017     display: table-cell;
1019 .label .mod-indent {
1020   float:left;
1021   padding-top:20px
1024 $mod-indent-size: 30px;
1025 /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1026 @for $i from 1 through 16 {
1027    $width: ($i * $mod-indent-size);
1029    .mod-indent-#{$i} {
1030        width: $width;
1031    }
1033 .mod-indent-huge {
1034    width: (16 * $mod-indent-size);
1037 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1038 .resourcecontent .mediaplugin_mp3 object {
1039     height: 25px;
1040     width: 600px
1042 .resourcecontent audio.mediaplugin_html5audio {
1043     width: 600px
1045 /** Large resource images should avoid hidden overflow **/
1046 .resourceimage {
1047     max-width: 100%;
1049 /* Audio player size in 'inline' mode (can only change width, as above) */
1050 .mediaplugin_mp3 object {
1051     height: 15px;
1052     width: 300px
1054 audio.mediaplugin_html5audio {
1055     width: 300px
1057 /* TinyMCE moodle media preview frame should not have padding */
1058 .core_media_preview.pagelayout-embedded #content {
1059     padding: 0;
1061 .core_media_preview.pagelayout-embedded #maincontent {
1062     height: 0;
1064 body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1065     padding: 0;
1066     margin: 0;
1067     min-width: 0;
1068     background: none;
1070 .path-rating .ratingtable {
1071     width: 100%;
1072     margin-bottom: 1em;
1074 .path-rating .ratingtable th.rating {
1075     width: 100%;
1077 .path-rating .ratingtable td.rating,
1078 .path-rating .ratingtable td.time {
1079     white-space: nowrap;
1080     text-align: center;
1082 .initialbar {
1083     a, strong {
1084         padding-left: 3px;
1085         padding-right: 3px;
1086     }
1089 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
1090 .moodle-dialogue-base .moodle-dialogue-lightbox {
1091     background-color: #AAA;
1093 .moodle-dialogue-base .hidden,
1094 .moodle-dialogue-base .moodle-dialogue-hidden {
1095     display: none;
1097 .no-scrolling {
1098     overflow: hidden;
1100 .moodle-dialogue-base .moodle-dialogue-fullscreen {
1101     left: 0px;
1102     top: 0px;
1103     right: 0px;
1104     bottom: -50px;
1105     position: fixed;
1107 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1108     overflow: auto;
1110 .moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1111     width: 28px;
1112     height: 16px;
1113     background-size: 100%;
1115 .moodle-dialogue-base .moodle-dialogue-wrap {
1116     background-color: #fff;
1117     border: 1px solid #ccc;
1119 .moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content {
1120     @extend .modal-content;
1122 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1123     @extend .modal-header;
1125 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1126     // Undo some YUI damage.
1127     min-height: 3rem;
1128     color: initial;
1129     background-color: initial;
1130     background: initial;
1131     font-size: 1.5rem;
1132     line-height: 1.5;
1134 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
1135     @extend .modal-title;
1137 .moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1138     padding: 5px;
1139     right: 0;
1141 .moodle-dialogue-base .closebutton {
1142     @extend .close;
1143     margin: 0;
1144     padding: 10px ! important;
1145     background: 0;
1146     border-style: none;
1147     box-shadow: none;
1149 .moodle-dialogue-base .closebutton::after {
1150     content: "×";
1152 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1153     @extend .modal-body;
1156 .moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1157     overflow: auto;
1158     position: absolute;
1159     top: 0px;
1160     bottom: 50px;
1161     left: 0px;
1162     right: 0px;
1163     margin: 0px;
1164     border: 0px;
1166 .moodle-dialogue-confirm .confirmation-dialogue {
1167     text-align: center;
1169 .moodle-dialogue-confirm .confirmation-dialogue input {
1170     text-align: center;
1172 .moodle-dialogue-exception .moodle-exception-message {
1173     text-align: center
1175 .moodle-dialogue-exception .moodle-exception-param label {
1176     font-weight: bold;
1178 .moodle-dialogue-exception .param-stacktrace label {
1179     background-color: #EEE;
1180     border: 1px solid #ccc;
1181     border-bottom-width: 0;
1183 .moodle-dialogue-exception .param-stacktrace pre {
1184     border: 1px solid #ccc;
1185     background-color: #fff;
1187 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1188     color: navy;
1189     font-size: $font-size-sm;
1191 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1192     @extend .text-warning;
1193     font-size: $font-size-sm;
1195 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1196     color: #333;
1197     font-size: 90%;
1198     border-bottom: 1px solid #eee;
1200 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
1201     @extend .modal-footer;
1203 .moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1204     // Undo some YUI damage.
1205     background: initial;
1207 .moodle-dialogue-confirm .confirmation-message {
1208     margin: 0.5em 1em;
1210 .moodle-dialogue-confirm .confirmation-dialogue input {
1211     min-width: 80px
1213 .moodle-dialogue-exception .moodle-exception-message {
1214     margin: 1em;
1216 .moodle-dialogue-exception .moodle-exception-param {
1217     margin-bottom: 0.5em;
1219 .moodle-dialogue-exception .moodle-exception-param label {
1220     width: 150px;
1222 .moodle-dialogue-exception .param-stacktrace label {
1223     display: block;
1224     margin: 0;
1225     padding: 4px 1em;
1227 .moodle-dialogue-exception .param-stacktrace pre {
1228     display: block;
1229     height: 200px;
1230     overflow: auto;
1232 .moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1233     display: inline-block;
1234     margin: 4px 0;
1236 .moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1237     display: inline-block;
1238     width: 50px;
1239     margin: 4px 1em;
1241 .moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1242     padding-left: 25px;
1243     margin-bottom: 4px;
1244     padding-bottom: 4px;
1246 .moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1247     opacity: 0.75;
1248     width: 100%;
1249     height: 100%;
1250     top: 0;
1251     left: 0;
1252     background-color: white;
1253     text-align: center;
1254     padding: 10% 0;
1256 /* Apply a default max-height on tooltip text */
1257 .moodle-dialogue .tooltiptext {
1258     max-height: 300px;
1261 .moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1262     z-index: 3001;
1264     .moodle-dialogue-bd {
1265         overflow: auto;
1266     }
1269 /**
1270  * Chooser Dialogues (moodle-core-chooserdialogue)
1271  *
1272  * This CSS belong to the chooser dialogue which should work both with, and
1273  * without javascript enabled
1274  */
1275 /* Hide the dialog and it's title */
1276 .chooserdialoguebody,
1277 .choosertitle {
1278     display: none;
1280 .moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1281     margin: 0;
1283 .chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1284     padding: 0;
1285     background: #F2F2F2;
1286     @include border-bottom-radius(10px);
1288 /* Center the submit buttons within the area */
1289 .choosercontainer #chooseform .submitbuttons {
1290     padding: 0.7em 0;
1291     text-align: center;
1293 /* Fixed for safari browser on iPhone4S with ios7@mixin */
1294 @media (max-height: 639px) {
1295     .ios.safari .choosercontainer #chooseform .submitbuttons {
1296         padding: 45px 0;
1297     }
1299 .choosercontainer #chooseform .submitbuttons input {
1300     min-width: 100px;
1301     margin: 0 0.5em;
1303 /* Various settings for the options area */
1304 .choosercontainer #chooseform .options {
1305     position: relative;
1306     border-bottom: 1px solid #BBBBBB;
1308 /* Only set these options if we're showing the js container */
1309 .jschooser .choosercontainer #chooseform .alloptions {
1310     overflow-x: hidden;
1311     overflow-y: auto;
1312     max-width: 20.3em;
1313     @include box-shadow(inset 0 0 30px 0px #ccc);
1314     .option {
1315         input[type=radio] {
1316             display: inline-block;
1317         }
1318         .modicon {
1319             display: inline-block;
1320         }
1321         .typename {
1322             display: inline-block;
1323             width: 65%;
1324         }
1325     }
1327 /* Settings for option rows and option subtypes */
1328 .choosercontainer #chooseform .moduletypetitle,
1329 .choosercontainer #chooseform .option,
1330 .choosercontainer #chooseform .nonoption {
1331     margin-bottom: 0;
1332     padding: 0 1.6em 0 1.6em;
1334 .choosercontainer #chooseform .moduletypetitle {
1335     text-transform: uppercase;
1336     padding-top: 1.2em;
1337     padding-bottom: 0.4em;
1339 .choosercontainer #chooseform .option .typename,
1340 .choosercontainer #chooseform .option span.modicon img.icon,
1341 .choosercontainer #chooseform .nonoption .typename,
1342 .choosercontainer #chooseform .nonoption span.modicon img.icon {
1343     padding: 0 0 0 0.5em;
1346 .chooserdialogue-course-modchooser .choosercontainer #chooseform .option span.modicon img.icon,
1347 .chooserdialogue-course-modchooser .choosercontainer #chooseform .nonoption span.modicon img.icon {
1348     height: 24px;
1349     width: 24px;
1351 .choosercontainer #chooseform .option input[type=radio],
1352 .choosercontainer #chooseform .option span.typename,
1353 .choosercontainer #chooseform .option span.modicon {
1354     vertical-align: middle;
1356 .choosercontainer #chooseform .option label {
1357     display: block;
1358     padding: 0.3em 0 0.1em 0;
1359     border-bottom: 1px solid #FFFFFF;
1361 .choosercontainer #chooseform .nonoption {
1362     padding-left: 2.7em;
1363     padding-top: 0.3em;
1364     padding-bottom: 0.1em;
1366 .choosercontainer #chooseform .subtype {
1367     margin-bottom: 0;
1368     padding: 0 1.6em 0 3.2em;
1370 .choosercontainer #chooseform .subtype .typename {
1371     margin: 0 0 0 0.2em;
1373 /* The instruction/help area */
1374 .jschooser .choosercontainer #chooseform .instruction,
1375 .jschooser .choosercontainer #chooseform .typesummary {
1376    display: none;
1377     position: absolute;
1378     top: 0;
1379     right: 0;
1380     bottom: 0;
1381     left: 20.3em;
1382     margin: 0;
1383     padding: 1.6em;
1384     background-color: #fff;
1385     overflow-x: hidden;
1386     overflow-y: auto;
1387     line-height: 2em;
1389 /* Selected option settings */
1390 .jschooser .choosercontainer #chooseform .instruction,
1391 .choosercontainer #chooseform .selected .typesummary {
1392     display: block;
1394 .choosercontainer #chooseform .selected {
1395     background-color: #fff;
1396     @include box-shadow(0px 0 10px 0 #ccc);
1398 /* Form element: listing */
1399 .formlistingradio {
1400     padding-bottom: 25px;
1401     padding-right: 10px;
1403 .formlistinginputradio {
1404     float: left;
1406 .formlistingmain {
1407     min-height: 225px;
1409 .formlisting {
1410     position: relative;
1411     margin: 15px 0;
1412     padding: 1px 19px 14px;
1413     background-color: white;
1414     border: 1px solid #DDD;
1415     @include border-radius(4px);
1417 .formlistingmore {
1418     position: absolute;
1419     cursor: pointer;
1420     bottom: -1px;
1421     right: -1px;
1422     padding: 3px 7px;
1423     font-size: 12px;
1424     font-weight: bold;
1425     background-color: whiteSmoke;
1426     border: 1px solid #ddd;
1427     color: #9DA0A4;
1428     @include border-radius(4px 0 4px 0);
1430 .formlistingall {
1431     margin: 15px 0;
1432     padding: 0;
1433     @include border-radius(4px);
1435 .formlistingrow {
1436     cursor: pointer;
1437     border-bottom: 1px solid;
1438     border-color: #E1E1E8;
1439     border-left: 1px solid #E1E1E8;
1440     border-right: 1px solid #E1E1E8;
1441     background-color: #F7F7F9;
1442     @include border-radius(0 0 4px 4px);
1443     padding: 6px;
1444     top: 50%;
1445     left: 50%;
1446     min-height: 34px;
1447     float: left;
1448     width: 150px;
1450 body.jsenabled .formlistingradio {
1451     display: none;
1453 body.jsenabled .formlisting {
1454     display: block;
1457 /* Badges styles */
1458 table.collection {
1459     @extend .table;
1460     @extend .table-bordered;
1461     @extend .table-striped;
1463 table.collection .name {
1464     text-align: left;
1465     vertical-align: middle;
1467 table.collection .awards {
1468     width: 10%;
1469     text-align: center;
1470     vertical-align: middle;
1472 table.collection .criteria {
1473     width: 40%;
1474     text-align: left;
1475     vertical-align: top;
1477 table.collection .badgeimage,
1478 table.collection .status {
1479     width: 15%;
1480     text-align: center;
1481     vertical-align: middle;
1483 table.collection .description {
1484     width: 25%;
1485     text-align: left;
1487 table.collection .actions {
1488     width: 11em;
1489     text-align: center;
1490     vertical-align: middle;
1493 a.criteria-action {
1494     padding: 0px 3px;
1495     float: right;
1497 div.criteria-description {
1498     padding: 10px 15px;
1499     margin: 5px 0px;
1500     background: none repeat scroll 0 0 #f9f9f9;
1501     border: 1px solid #EEE;
1503 ul.badges {
1504     margin: 0;
1505     list-style: none;
1507 .badges li {
1508     position: relative;
1509     display: inline-block;
1510     padding-top: 1em;
1511     text-align: center;
1512     vertical-align: top;
1513     width: 150px;
1515 .badges li .badge-name {
1516     display: block;
1517     padding: 5px;
1519 .badges li > img {
1520     position: absolute;
1522 .badges li .badge-image {
1523     width: 100px;
1524     height: 100px;
1525     left: 10px;
1526     top: 0px;
1527     z-index: 1;
1529 .badges li .badge-actions {
1530     position: relative;
1532 .badges li .expireimage {
1533     width: 100px;
1534     height: 100px;
1535     left: 25px;
1536     top: 0px;
1537     position: absolute;
1538     z-index: 10;
1539     opacity: 0.85;
1542 #badge-image {
1543     background-color: transparent;
1544     padding: 0;
1545     position: relative;
1546     min-width: 100px;
1547     width: 20%;
1548     display: inline-block;
1549     vertical-align: top;
1550     margin-top: 17px;
1552     .expireimage {
1553         width: 100px;
1554         height: 100px;
1555         left: 0px;
1556         top: 0px;
1557         opacity: 0.85;
1558         position: absolute;
1559         z-index:10;
1560     }
1562     .singlebutton {
1563         padding-top: 5px;
1565         input {
1566             margin-left: 0px;
1567         }
1568     }
1570 #badge-details {
1571     display: inline-block;
1572     width: 79%;
1575 #badge-overview dl,
1576 #badge-details dl {
1577     margin: 0;
1579     dt,
1580     dd {
1581         vertical-align: top;
1582         padding: 3px 0;
1583     }
1584     dt {
1585         clear: both;
1586         display: inline-block;
1587         width: 20%;
1588         min-width: 100px;
1589     }
1590     dd {
1591         display: inline-block;
1592         width: 79%;
1593         margin-left: 1%;
1594     }
1597 .badge-profile {
1598     vertical-align: top;
1600 .connected {
1601     @extend .text-success;
1603 .notconnected {
1604     @extend .text-danger;
1606 .connecting {
1607     @extend .text-warning;
1609 #page-badges-award .recipienttable tr td {
1610     vertical-align: top;
1612 #page-badges-award .recipienttable tr td.actions .actionbutton {
1613     margin: 0.3em 0;
1614     padding: 0.5em 0;
1615     width: 100%;
1617 #page-badges-award .recipienttable tr td.existing,
1618 #page-badges-award .recipienttable tr td.potential {
1619     width: 42%;
1622 #issued-badge-table .activatebadge {
1623     display: inline-block;
1625 .statusbox.active {
1626     background-color: $state-success-bg;
1628 .statusbox.inactive {
1629     background-color: $state-warning-bg;
1631 .statusbox {
1632     text-align: center;
1633     margin-bottom: 5px;
1634     padding: 5px;
1636 .statusbox .activatebadge {
1637     display: inline-block;
1639 .statusbox .activatebadge input[type=submit]{
1640     margin: 3px;
1642 .activatebadge {
1643     margin: 0px;
1644     text-align: left;
1645     vertical-align: middle;
1647 img#persona_signin {
1648     cursor: pointer;
1650 .addcourse {
1651     float: right;
1653 .invisiblefieldset {
1654     display: inline;
1655     margin: 0;
1656     padding: 0;
1657     border-width: 0;
1659 .breadcrumb-nav {
1660     float: left;
1661     margin-bottom: 10px;
1663 .breadcrumb-button .singlebutton div {
1664     margin-right: 0;
1666 .breadcrumb-nav .breadcrumb {
1667     margin: 0;
1670 /** Header-bar styles **/
1671 .page-context-header {
1672     // We need to be explicit about the height of the header.
1673     $pageHeaderHeight: 140px;
1675     // Do not remove these rules.
1676     overflow: hidden;
1678     .page-header-image,
1679     .page-header-headings {
1680         display: block;
1681         position: relative;
1682     }
1683     .page-header-image {
1684         float: left;
1685         margin-right: 1em;
1686         margin-bottom: 1em;
1687     }
1688     .page-header-headings {
1689         margin-top: 30px;
1690         margin-bottom: 10px;
1692         h1 {
1693             display: block;
1694         }
1695     }
1697     .page-header-headings,
1698     .header-button-group {
1699         position: relative;
1700         line-height: 24px;
1701         vertical-align: middle;
1702     }
1704     .header-button-group {
1705         display: block;
1706         float: left;
1707         a {
1708             position: relative;
1710             // Don't touch it unless you know exactly what you are doing.
1711             top: -0.4em;
1712         }
1713     }
1716 ul.dragdrop-keyboard-drag li {
1717     list-style-type: none;
1720 .block-control-actions .moodle-core-dragdrop-draghandle img {
1721     width: 12px;
1722     height: 12px;
1725 a.disabled:hover,
1726 a.disabled {
1727     text-decoration: none;
1728     cursor: default;
1729     font-style: italic;
1730     color: #808080;
1732 body.lockscroll {
1733   height: 100%;
1734   overflow: hidden;
1737 .progressbar_container {
1738     max-width: 500px;
1739     margin: 0 auto;
1742 /* IE10 only fix for calendar titling */
1743 .ie10 .yui3-calendar-header-label {
1744     display: inline-block;
1747 dd:before,
1748 dd:after {
1749   display: block;
1750   content: " ";
1752 dd:after {
1753   clear: both;
1756 // Active tabs with links should have a different
1757 // cursor to indicate they are clickable.
1758 .nav-tabs > .active > a[href],
1759 .nav-tabs > .active > a[href]:hover,
1760 .nav-tabs > .active > a[href]:focus {
1761     cursor: pointer;
1764 .inplaceeditable {
1766     &.inplaceeditingon {
1767         position: relative;
1769         .editinstructions {
1770             margin-top: -30px;
1771             font-weight: normal;
1772             margin-right: 0;
1773             margin-left: 0;
1774             left: 0;
1775             right: auto;
1776             white-space: nowrap;
1777         }
1779         input {
1780             width: 330px;
1781             height: 16px;
1782             vertical-align: text-bottom;
1783             margin-bottom: 0;
1784         }
1786         select {
1787             margin-bottom: 0;
1788         }
1789     }
1791     .quickediticon img {
1792         opacity: 0.2;
1793     }
1795     .quickeditlink {
1796         color: inherit;
1797         text-decoration: inherit;
1798     }
1800     &:hover .quickeditlink .quickediticon img,
1801     .quickeditlink:focus .quickediticon img {
1802         opacity: 1;
1803     }
1805     &.inplaceeditable-toggle .quickediticon {
1806         display: none;
1807     }
1810 h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
1811     margin-top: -20px;
1813 // Reset for ul.
1814 ul {
1815     padding-left: 1rem;