571e3d8553996469bc03cfdfdb1db8d91684f8c2
[moodle.git] / theme / bootstrapbase / less / moodle / course.less
1 /* course.less */
2 /* COURSE CONTENT */
3 /* stylelint-disable unit-blacklist */
4 .section_add_menus {
5     text-align: right;
6     clear: both;
7 }
8 .section-modchooser {
9     clear: both;
10 }
11 .dir-rtl .section_add_menus {
12     text-align: left;
13     clear: both;
14 }
15 .section_add_menus .horizontal div,
16 .section_add_menus .horizontal form {
17     display: inline;
18 }
19 .section_add_menus optgroup {
20     font-weight: normal;
21     font-style: italic;
22 }
23 .section_add_menus .urlselect {
24     margin-left: .4em;
25 }
26 .dir-rtl .section_add_menus .urlselect {
27     margin-right: .4em;
28     margin-left: 0;
29 }
30 .section_add_menus .urlselect select {
31     margin-left: .2em;
32 }
33 .dir-rtl .section_add_menus .urlselect select {
34     margin-right: .2em;
35     margin-left: 0;
36 }
37 .section_add_menus .urlselect img.iconhelp {
38     padding: 0;
39     margin: 0;
40     vertical-align: text-bottom;
41 }
43 .sitetopic ul.section {
44     margin: 0;
45 }
46 .course-content ul.section {
47     margin: 1em;
48 }
49 .section {
50     .side {
51         &.left {
52             float: left;
53         }
54         &.right {
55             float: right;
56         }
57     }
58     .spinner {
59         height: 16px;
60         width: 16px;
61     }
62     .activity {
63         .spinner {
64             left: 100%;
65             position: absolute;
66             vertical-align: text-bottom;
67         }
69         .editing_move {
70             /* Move the move icon to the start of the line */
71             position: absolute;
72             left: 0;
73             top: 0;
74         }
76         .mod-indent-outer {
77             /**
78              * Add appropriate padding such that nothing overlaps the
79              * absolute positioned move icon.
80              */
81             padding-left: 32px;
82         }
84         /* The command block for each activity */
85         .actions {
86             position: absolute;
87             right: 0;
88             top: 0;
89         }
91         .contentwithoutlink,
92         .activityinstance {
94             min-width: 40%;
95             display: table-cell;
96             padding-right: 4px;
97             min-height: 2em;
99             .dimmed {
100                 img.activityicon {
101                     opacity: 0.5;
102                     filter: alpha(opacity=50);
103                 }
104             }
105         }
106     }
107     .label {
108         .contentwithoutlink,
109         .activityinstance {
110             padding-right: 32px;
111             display: block;
112             height: inherit;
113         }
115         .mod-indent-outer {
116             padding-left: 24px;
117             display: block;
118         }
119     }
121     .filler {
122         width: 16px;
123         height: 16px;
124         padding: 0.3em;
125         display: inline-block;
126     }
128     .activity.editor_displayed {
129         a.editing_title,
130         .moodle-actionmenu {
131             display: none;
132         }
133         div.activityinstance {
134             padding-right: initial;
136             input {
137                 margin-bottom: initial;
138                 padding-top: initial;
139                 padding-bottom: initial;
140                 vertical-align: text-bottom;
141             }
142         }
143     }
146 .dir-rtl .section {
147     .side {
148         &.left {
149             float: right;
150         }
151         &.right {
152             float: left;
153         }
154     }
155     .activity {
156         .spinner {
157             left: auto;
158             right: 100%;
159         }
161         .mod-indent-outer {
162             /**
163              * Add appropriate padding such that nothing overlaps the
164              * absolute positioned move icon.
165              */
166             padding-left: initial;
167             padding-right: 32px;
168         }
170         /* The command block for each activity */
171         .actions {
172             left: 0;
173             right: auto;
174         }
176         .contentwithoutlink,
177         .activityinstance {
178             padding-left: 4px;
179             padding-right: initial;
180         }
181     }
184 .dir-rtl .section {
185     .activity {
186         .editing_move {
187             /* Move the move icon to the start of the line */
188             left: auto;
189             right: 0;
190         }
192         &.editor_displayed {
193             div.activityinstance {
194                 padding-left: initial;
195             }
196         }
197     }
200 .activity img.activityicon {
201     margin-right: 6px;
202     vertical-align: text-bottom;
204 .dir-rtl .section .activity img.activityicon {
205     margin-left: 6px;
206     margin-right: 0;
208 .section .activity .activityinstance,
209 .section .activity .activityinstance div {
210     display: inline-block;
212 .editing {
213     .section {
214         .activity {
215             .contentwithoutlink,
216             .activityinstance {
217                 padding-right: 200px;
218             }
219         }
220     }
223 .dir-rtl.editing {
224     .section {
225         .activity {
226             .contentwithoutlink,
227             .activityinstance {
228                 padding-left: 200px;
229                 padding-right: 0;
230             }
231         }
232     }
235 .editing_show + .editing_assign,
236 .editing_hide + .editing_assign {
237     // if roles icon missing, add space
238     margin-left: 20px;
240 .section .activity .commands {
241     white-space: nowrap;
242     display: inline;
244 .section .activity.modtype_label.label {
245     font-weight: normal;
246     padding: .2em;
248 .section li.activity {
249     padding: .2em;
250     clear: both;
252 .section .activity .activityinstance .groupinglabel {
253     padding-left: 30px;
255 .dir-rtl .section .activity .activityinstance .groupinglabel {
256     padding-right: 30px;
258 .section .activity .availabilityinfo,
259 .section .activity .contentafterlink {
260     margin-top: 0.5em;
261     margin-left: 30px;
263 .dir-rtl .section .activity .availabilityinfo,
264 .dir-rtl .section .activity .contentafterlink {
265     margin-left: 0;
266     margin-right: 30px;
268 .section .activity .contentafterlink p {
269     margin: .5em 0;
271 .editing .section .activity:hover,
272 .editing .section .activity.action-menu-shown {
273     background-color: @grayLighter;
275 .course-content .current {
276     background-color: @infoBackground;
278 .course-content .section-summary {
279     border: 1px solid @tableBorder;
280     margin-top: 5px;
281     list-style: none;
283 .course-content .section-summary .section-title {
284     margin: 2px 5px 10px 5px;
286 .course-content .section-summary .summarytext {
287     margin: 2px 5px 2px 5px;
289 .course-content .section-summary .section-summary-activities .activity-count {
290     .muted;
291     font-size: @fontSizeSmall;
292     margin: 3px;
293     white-space: nowrap;
294     display: inline-block;
296 .course-content .section-summary .summary {
297     margin-top: 5px;
299 .course-content .single-section {
300     margin-top: 1em;
302 .course-content .single-section .section-navigation {
303     display: block;
304     padding: 0.5em;
305     margin-bottom: -0.5em;
307 .course-content .single-section .section-navigation .title {
308     font-weight: bold;
309     font-size: 108%;
310     clear: both;
312 .course-content .single-section .section-navigation .mdl-left {
313     font-weight: normal;
314     float: left;
315     margin-right: 1em;
317 .dir-rtl .course-content .single-section .section-navigation .mdl-left {
318     float: right;
320 .course-content .single-section .section-navigation .mdl-left .larrow {
321     margin-right: 0.1em;
323 .course-content .single-section .section-navigation .mdl-right {
324     font-weight: normal;
325     float: right;
326     margin-left: 1em;
328 .dir-rtl .course-content .single-section .section-navigation .mdl-right {
329     float: left;
331 .course-content .single-section .section-navigation .mdl-right .rarrow {
332     margin-left: 0.1em;
334 .course-content .single-section .section-navigation .mdl-bottom {
335     margin-top: 0;
337 .course-content ul li.section.main {
338     border-bottom: 2px solid @tableBorder;
339     margin-top: 0;
341 .course-content ul li.section.hidden {
342     .sectionname > span,
343     .content > div,
344     /* All the divs but the activities which are in a UL. */
345     .activity .activityinstance {
346         opacity: .5;
347     }
348     .sectionname > span,
349     .activity .activityinstance {
350         margin-left: 10px;
351         margin-right: 10px;
352     }
354 .course-content ul.topics li.section .content,
355 .course-content ul.weeks li.section .content {
356     margin-right: 20px;
357     margin-left: 20px;
358     padding: 0;
361 .course-content {
362     margin-top: 0;
365 .course-content ul.topics li.section {
366     padding-bottom: 20px;
369 .course-content ul.topics li.section .summary {
370     margin-left: 25px;
373 .course-content li {
374     &.section {
375         ul {
376             list-style: disc;
377             ul {
378                 list-style: circle;
379                 ul {
380                     list-style: square;
381                 }
382             }
383         }
384         li {
385             &.activity {
386                 ul {
387                     list-style: disc;
388                     ul {
389                         list-style: circle;
390                         ul {
391                             list-style: square;
392                         }
393                     }
394                 }
395             }
396         }
397     }
400 .path-course-view .completionprogress {
401     margin-left: 25px;
404 .path-course-view .completionprogress {
405     display: block;
406     float: right;
407     height: 20px;
408     position: relative;
411 #page-site-index .subscribelink {
412     text-align: right;
414 #site-news-forum h2,
415 #frontpage-course-list h2,
416 #frontpage-category-names h2,
417 #frontpage-category-combo h2 {
418     margin-bottom: 9px;
420 .path-course-view a.reduce-sections {
421     padding-left: 0.2em;
423 .path-course-view .subscribelink {
424     text-align: right;
426 .path-course-view .unread {
427     margin-left: 30px;
429 .dir-rtl.path-course-view .unread {
430     margin-right: 30px;
432 .path-course-view .block.drag .header {
433     cursor: move;
435 .path-course-view .completionprogress {
436     text-align: right;
438 .dir-rtl.path-course-view .completionprogress {
439     text-align: left;
441 .path-course-view .single-section .completionprogress {
442     margin-right: 5px;
444 .path-course-view .section .summary {
445     line-height: normal;
448 .path-site li.activity > div,
449 .path-course-view li.activity > div {
450     position: relative;
451     padding: 0 16px 0 0; /* to accommodate the floated completion icon with highlighting */
453 .dir-rtl.path-site li.activity > div,
454 .dir-rtl.path-course-view li.activity > div {
455     position: relative;
456     padding: 0 0 0 16px;
458 .path-course-view li.activity span.autocompletion img {
459     vertical-align: text-bottom;
461 .path-course-view li.activity form.togglecompletion img {
462     max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
464 .path-course-view li.activity form.togglecompletion .ajaxworking {
465     width: 16px;
466     height: 16px;
467     position: absolute;
468     right: 22px;
469     top: 3px;
470     background: url([[pix:i/ajaxloader]]) no-repeat;
472 .dir-rtl.path-course-view .completionprogress {
473     float: none;
475 .dir-rtl.path-course-view li.activity form.togglecompletion .ajaxworking {
476     right: -22px;
479 li.section.hidden span.commands a.editing_hide,
480 li.section.hidden span.commands a.editing_show {
481     cursor: default;
483 ul.weeks h3.sectionname {
484     white-space: nowrap;
486 .editing ul.weeks h3.sectionname {
487     white-space: normal;
490 .single-section h3.sectionname {
491     text-align: center;
492     clear: both;
495 .section img.movetarget {
496     height: 16px;
497     width: 80px;
500 input.titleeditor {
501     width: 330px;
502     vertical-align: text-bottom;
505 span.editinstructions {
506     position: absolute;
507     top: 0;
508     margin-top: -22px;
509     margin-left: 30px;
510     line-height: 16px;
511     font-size: @fontSizeSmall;
512     padding: .1em .4em;
513     background-color: @infoBackground;
514     color: @infoText;
515     text-decoration: none;
516     z-index: 9999;
517     .box-shadow(2px 2px 5px 1px #ccc);
518     border: 1px solid @infoBorder;
521 /* Course drag and drop upload styles */
522 #dndupload-status {
523     position: fixed;
524     left: 0;
525     width: 40%;
526     margin: 0 30%;
527     padding: 6px;
528     border: 1px solid @infoBorder;
529     text-align: center;
530     background: @infoBackground;
531     color: @infoText;
532     z-index: 1; // Required in order to have this above relatively positioned course content.
533     .box-shadow(2px 2px 5px 1px #ccc);
534     .border-radius(8px);
536 .dndupload-preview {
537     color: #909090;
538     border: 1px dashed #909090;
539     list-style: none;
540     margin-top: .2em;
541     padding: .3em;
543 .dndupload-preview img.icon {
544     vertical-align: text-bottom;
545     padding: 0;
547 .dndupload-progress-outer {
548     .progress;
550 .dndupload-progress-inner {
551     .progress .bar;
553 .dndupload-hidden {
554     display: none;
557 /* COURSES LISTINGS AND COURSE SUMMARY */
558 #page-course-pending .singlebutton,
559 #page-course-index .singlebutton,
560 #page-course-index-category .singlebutton,
561 #page-course-editsection .singlebutton {
562     text-align: center;
564 #page-admin-course-manage #movecourses td img {
565     margin: 0 .22em;
566     vertical-align: text-bottom;
568 #page-admin-course-manage #movecourses td img.icon {
569     padding: 0;
572 #coursesearch {
573     margin-top: 1em;
574     text-align: center;
577 #page-course-pending .pendingcourserequests {
578     margin-bottom: 1em;
580 #page-course-pending .pendingcourserequests .singlebutton {
581     display: inline;
583 #page-course-pending .pendingcourserequests .cell {
584     padding: 0 5px;
586 #page-course-pending .pendingcourserequests .cell.c6 {
587     white-space: nowrap;
590 .coursebox {
591     margin-bottom: 15px;
592     border: 1px dotted #ddd;
593     .border-radius(4px);
594     padding: 5px;
597 .coursebox > .info > .coursename a {
598     display: block;
599     background-image: url([[pix:moodle|i/course]]);
600     background-repeat: no-repeat;
601     padding-left: 21px;
602     background-position: left 0.2em;
604 .dir-rtl .coursebox > .info > .coursename a {
605     padding-left: 0;
606     padding-right: 21px;
607     background-position: right 0.2em;
609 .coursebox > .info > .coursename,
610 .coursebox .content .teachers,
611 .coursebox .content .courseimage,
612 .coursebox .content .coursefile {
613     float: left;
614     clear: left;
616 .coursebox .content .teachers,
617 .coursebox .content .courseimage,
618 .coursebox .content .coursefile {
619     width: 40%;
621 .dir-rtl .coursebox > .info > .coursename,
622 .dir-rtl .coursebox .teachers,
623 .dir-rtl .coursebox .content .courseimage,
624 .dir-rtl .coursebox .content .coursefile {
625     float: right;
626     clear: right;
628 .coursebox > .info > h3.coursename {
629     margin: 5px;
630     line-height: 1;
632 .coursebox > .info > .coursename {
633     margin: 5px;
634     padding: 0;
636 .coursebox .content .teachers li {
637     list-style-type: none;
638     padding: 0;
639     margin: 0;
641 .coursebox .enrolmenticons {
642     padding: 3px 0;
643     float: right;
645 .coursebox .moreinfo {
646     padding: 3px 0;
647     float: right;
649 .coursebox .enrolmenticons img,
650 .coursebox .moreinfo img {
651     margin: 0 .2em;
653 .coursebox .content {
654     clear: both;
656 .coursebox .content .summary,
657 .coursebox .content .coursecat {
658     float: right;
659     width: 55%;
661 .coursebox .content .coursecat {
662     text-align: right;
663     clear: right;
665 .coursebox.remotecoursebox .remotecourseinfo {
666     float: left;
667     width: 40%;
669 .coursebox .content .courseimage img {
670     max-width: 100px;
671     max-height: 100px;
673 .coursebox .content .coursecat,
674 .coursebox .content .summary,
675 .coursebox .content .courseimage,
676 .coursebox .content .coursefile,
677 .coursebox .content .teachers,
678 .coursebox.remotecoursebox .remotecourseinfo {
679     margin: 3px 5px;
680     padding: 0;
683 .coursebox.remotehost > .info > .categoryname a {
684     background-image: url([[pix:moodle|i/mnethost]]);
687 .dir-rtl .coursebox > .info > .categoryname a {
688     padding-left: 0;
689     padding-right: 21px;
690     background-position: center right;
692 .dir-rtl .coursebox > .info > .categoryname,
693 .dir-rtl .coursebox .teachers,
694 .dir-rtl .coursebox .content .courseimage,
695 .dir-rtl .coursebox .content .coursefile {
696     float: right;
697     clear: right;
699 .dir-rtl .coursebox .enrolmenticons,
700 .dir-rtl .coursebox .moreinfo {
701     float: left;
703 .dir-rtl .coursebox .summary,
704 .dir-rtl .coursebox .coursecat {
705     float: left;
707 .dir-rtl .coursebox .coursecat {
708     text-align: left;
709     clear: left;
712 .coursebox.collapsed {
713     margin-bottom: 0;
715 .coursebox.collapsed > .content {
716     display: none;
718 .courses .coursebox.collapsed {
719     border: 1px solid @tableBorder;
720     padding: 5px;
723 .courses .coursebox.even {
724     background-color: @tableBackgroundAccent;
726 .courses .coursebox:hover,
727 .course_category_tree .courses > .paging.paging-morelink:hover {
728     background-color: @tableBackgroundHover;
731 .course_category_tree .category .numberofcourse {
732     font-size: @fontSizeSmall;
735 .course_category_tree .controls {
736     visibility: hidden;
738 .course_category_tree .controls div {
739     display: inline;
740     cursor: pointer;
742 .jsenabled .course_category_tree .controls {
743     visibility: visible;
745 .course_category_tree .controls {
746     margin-bottom: 5px;
747     text-align: right;
748     float: right;
750 .course_category_tree .controls div {
751     padding-right: 2em;
752     font-size: 75%;
755 .course_category_tree .category > .info > .categoryname {
756     background-image: url([[pix:moodle|t/collapsed_empty]]);
757     background-repeat: no-repeat;
758     padding: 2px 18px;
759     margin: 3px;
760     background-position: center left;
762 .dir-rtl .course_category_tree .category > .info > .categoryname {
763     background-image: url([[pix:moodle|t/collapsed_empty_rtl]]);
764     background-position: center right;
766 .course_category_tree .category.with_children > .info > .categoryname {
767     background-image: url([[pix:moodle|t/expanded]]);
768     cursor: pointer;
770 .course_category_tree .category.with_children.collapsed > .info > .categoryname {
771     background-image: url([[pix:moodle|t/collapsed]]);
773 .dir-rtl .course_category_tree .category.with_children.collapsed > .info > .categoryname {
774     background-image: url([[pix:moodle|t/collapsed_rtl]]);
776 .course_category_tree .category.collapsed > .content {
777     display: none;
780 .course_category_tree .category > .info {
781     .well;
782     min-height: 0;
783     padding: 0;
784     margin: 3px 0;
785     margin-bottom: 3px;
786     clear: both;
788 .course_category_tree.frontpage-category-names .category > .info {
789     background: none;
790     border: none;
791     margin: 0;
793 .course_category_tree .category > .content {
794     padding-left: 16px;
797 .dir-rtl .course_category_tree .category > .content {
798     padding-left: 0;
799     padding-right: 16px;
802 .course_category_tree .subcategories > .paging,
803 .courses > .paging {
804     margin: 0;
805     padding: 5px;
806     text-align: center;
809 .courses > .paging.paging-morelink,
810 .course_category_tree .subcategories > .paging.paging-morelink {
811     text-align: left;
814 .course_category_tree .paging.paging-morelink a {
815     font-size: @fontSizeSmall;
817 .dir-rtl .courses > .paging.paging-morelink,
818 .dir-rtl .course_category_tree .paging.paging-morelink {
819     text-align: right;
822 #page-course-index-category .generalbox.info {
823     margin-bottom: 15px;
824     border: 1px dotted #ddd;
825     .border-radius(4px);
826     padding: 5px;
829 #page-course-index-category .categorypicker {
830     text-align: center;
831     margin: 10px 0 20px;
834 .section {
835     .summary,
836     .activity {
837         .iconsmall {
838             width: 16px;
839             height: 16px;
840         }
841     }
842     .editing_title {
843         .iconsmall {
844             width: 12px;
845             height: 12px;
846             margin: 8px 8px 0px 0;
847             padding: 4px 8px 0px 0;
848             vertical-align: text-bottom;
849         }
850     }
851     .moodle-actionmenu {
852         .iconsmall {
853             max-width: none !important; /** reset sets 100% !important which breaks on IE8 without this !important */
854             width: 16px;
855             height: 16px;
856             padding: 4px;
857             vertical-align: text-bottom;
858         }
859     }
860     .moodle-actionmenu[data-enhanced] {
861         .menu {
862             img {
863                 width: 12px;
864                 height: 12px;
865             }
866         }
867     }
870 .dir-rtl .section {
871     .editing_title {
872         .iconsmall {
873             margin: 8px 0 0 8px;
874             padding: 4px 0 0 8px;
875         }
876     }
879 /**
880  * Course management page
881  * Palette
882  *
883  * Background (reg)         #F5F5F5
884  * Background (light        #fafafa
885  * Background (highlight)   #ddffaa
886  * Borders                  #e1e1e8
887  */
888 #course-category-listings {
889     background-color: @tableBackground;
890     margin-bottom: 200px;
892     /** Two column layout */
893     &.columns-2 {
894         > #course-listing > div {
895             position: relative;
896             left: -1px;
897         }
898     }
899     /** Three column layout */
900     &.columns-3 > #course-listing > div {
901         height: 100%;
902     }
904     > div > div {
905         min-height: 300px;
906         > ul.ml > li:first-child > div {
907             border-top: 0;
908         }
909     }
910     h3 {
911         margin: 0;
912         padding: 0.4rem 0.6rem 0.3rem;
913     }
914     h4 {
915         margin: 1rem 0 0;
916         padding: 0.6rem 1rem 0.5rem;
917     }
918     .moodle-actionmenu {
919         white-space: nowrap;
920     }
922     .moodle-actionmenu[data-enhance] {
923         .toggle-display {
924             img {
925                 width: auto;
926             }
927             &.textmenu {
928                 padding-right: 4px;
930                 .caret {
931                     margin-top: 12px;
932                 }
933             }
934         }
935     }
937     .listing-actions {
938         text-align: center;
939         padding: 0.4rem 0.3rem 0.3rem;
940         line-height: 2.2em;
941         > a,
942         > .moodle-actionmenu {
943             display: inline-block;
944         }
945         > .moodle-actionmenu .menu a {
946             padding-left: 1rem;
947         }
948         .moodle-actionmenu:not([data-enhanced]) {
949             li {
950                 line-height: normal;
951             }
952             > .menubar a {
953                 color: inherit;
954                 display: inline-block;
955                 > img {
956                     display: none;
957                 }
958                 .caret {
959                     display: none;
960                 }
961             }
962             > .menu .menu-action-text {
963                 display: inline-block;
964             }
965         }
966     }
967     ul.ml {
968         list-style: none;
969         margin: 1rem 0;
970         ul.ml {
971             margin: 0;
972         }
973     }
974     li {
975         line-height: 2.2em;
976         > div {
977             &:hover {
978                 background-color: @tableBackgroundHover;
979             }
980         }
981         .tree-icon {
982             margin: 2px 6px 0 0;
983             width: 12px;
984             vertical-align: inherit;
985         }
986         &[data-selected='1'] {
987             > div {
988                 background-color: @tableBackgroundAccent;
989             }
990             > div:hover {
991                 background-color: @tableBackgroundHover;
992             }
993         }
995         // Tree item indenting to represent depth.
996         .tree-icon {
997             margin-left: 0;
998         }
1000         li .tree-icon {
1001             margin-left: 1em;
1002         }
1004         li li .tree-icon {
1005             margin-left: 2em;
1006         }
1008         li li li .tree-icon {
1009             margin-left: 3em;
1010         }
1012         li li li li .tree-icon {
1013             margin-left: 4em;
1014         }
1016         li li li li li .tree-icon {
1017             margin-left: 4.5em;
1018         }
1020         li li li li li li .tree-icon {
1021             margin-left: 5em;
1022         }
1024         li li li li li li li .tree-icon {
1025             margin-left: 5.5em;
1026         }
1027     }
1029     .item-actions {
1030         margin-right: 1em;
1031         display: inline-block;
1032         display: initial;
1033         > a img,
1034         .menubar img {
1035             margin: 0 4px;
1036             height: 12px;
1037             padding: 0;
1038             vertical-align: inherit;
1039         }
1040         &.show .menu {
1041             li {
1042                 line-height: 20px;
1043             }
1044             img {
1045                 width: 12px;
1046                 max-width: none;
1047             }
1048         }
1049         .menu-action-text {
1050             vertical-align: inherit;
1051         }
1052     }
1054     .listitem {
1055         > div {
1056             > .float-left {
1057                 float: left;
1058             }
1059             > .float-right {
1060                 float: right;
1061                 text-align: right;
1062             }
1063             .item-actions {
1064                 .action-show {
1065                     display: none;
1066                 }
1067                 .action-hide {
1068                     display: inline;
1069                 }
1070             }
1071             .without-actions {
1072                 color: #333;
1073             }
1074             .idnumber {
1075                 color: #a1a1a8;
1076                 margin-right: 2em;
1077             }
1078         }
1079         // The category or course is hidden.
1080         &[data-visible="0"] {
1081             .muted;
1082             > div {
1083                 > a {
1084                     .muted;
1085                 }
1086                 .item-actions {
1087                     .action-show {
1088                         display: inline;
1089                     }
1090                     .action-hide {
1091                         display: none;
1092                     }
1093                 }
1094             }
1095         }
1096         &.highlight {
1097             background-color: @tableBackground;
1098             > div,
1099             > div:hover,
1100             &[data-selected='1'] > div {
1101                 background-color: @tableBackgroundHover;
1102             }
1103         }
1104     }
1106     #course-listing {
1107         .listitem {
1108             .categoryname {
1109                 display: inline-block;
1110                 margin-left: 1em;
1111                 color: #a1a1a8;
1112             }
1113             .coursename {
1114                 display: inline-block;
1115             }
1116             > div {
1117                 padding-left: 1rem;
1118             }
1119         }
1120         > .firstpage .listitem:first-child > div .item-actions .action-moveup,
1121         > .lastpage .listitem:last-child > div .item-actions .action-movedown {
1122             display: none;
1123         }
1124         .bulk-action-checkbox {
1125             margin: -2px 6px 0 0;
1126         }
1127     }
1128     #category-listing {
1129         .listitem.collapsed > ul.ml {
1130             display: none;
1131         }
1132         .listitem {
1133             > div {
1134                 > .ba-checkbox {
1135                     width: 2.2em;
1136                     text-align: center;
1137                     margin: -1px 0.5em 0 0;
1138                     padding-top: 2px;
1139                 }
1140             }
1141             &.highlight > div > .ba-checkbox {
1142                 background-color: @tableBackgroundHover;
1143             }
1144             &[data-selected='1'] > div > .ba-checkbox {
1145                 margin: 0 0.5em 0 0;
1146                 padding: 0;
1147                 background-color: inherit;
1148             }
1149             &:first-child > div .item-actions .action-moveup,
1150             &:last-child > div .item-actions .action-movedown {
1151                 display: none;
1152             }
1153         }
1154         .course-count {
1155             color: #a1a1a8;
1156             margin-right: 2rem;
1157             min-width: 3.5em;
1158             display: inline-block;
1159             .smallicon {
1160                 width: 12px;
1161                 margin-left: 4px;
1162                 vertical-align: inherit;
1163             }
1164         }
1165         .bulk-action-checkbox {
1166             margin-right: -3px;
1167         }
1168         .category-listing > ul > .listitem:first-child {
1169             position: relative;
1170         }
1171         .category-bulk-actions {
1172             margin: 0 0.5em 0.5em;
1173             position: relative;
1174         }
1175     }
1177     .detail-pair {
1178         border-bottom: 1px solid @tableBorder;
1179         margin: 0 1rem;
1180         > * {
1181             display: inline-block;
1182             line-height: 2.2rem;
1183         }
1184         .pair-key {
1185             font-weight: bold;
1186             vertical-align: top;
1187             span {
1188                 margin-right: 1rem;
1189                 display: block;
1190             }
1191         }
1192         .pair-value select {
1193             max-width: 100%;
1194         }
1195     }
1197     .bulk-actions .detail-pair {
1198         > * {
1199             display: block;
1200             width: 100%;
1201         }
1202     }
1204     .listing-pagination {
1205         text-align: center;
1206         .yui3-button {
1207             background-color: @btnBackground;
1208             border: 0;
1209             margin: 0.4rem 0.2rem 0.45rem;
1210             font-size: 10.4px;
1211             &.active-page {
1212                 background-color: @btnBackgroundHighlight;
1213             }
1214         }
1215     }
1216     .listing-pagination-totals {
1217         text-align: center;
1218         &.dimmed {
1219             .muted;
1220             margin: 0.4rem 1rem 0.45rem;
1221         }
1222     }
1223     .select-a-category .notifymessage,
1224     .select-a-category .alert {
1225         margin: 1em;
1226     }
1229 #course-category-listings #course-listing .listitem .drag-handle {
1230     display: none;
1232 .jsenabled #course-category-listings #course-listing .listitem .drag-handle {
1233     display: inline-block;
1234     margin: 0 6px 0 0;
1235     cursor: pointer;
1238 .dir-rtl #course-category-listings {
1239     #category-listing,
1240     #course-listing {
1241         float: right;
1242         margin-left: 0;
1243     }
1245     .listitem {
1246         > div {
1247             > .float-left {
1248                 float: right;
1249             }
1250             > .float-right {
1251                 float: left;
1252                 text-align: left;
1253             }
1254         }
1255     }
1256     li {
1257         .tree-icon {
1258             margin: 2px 0 0 6px;
1259         }
1261         // Tree item indenting to represent depth.
1262         .tree-icon {
1263             margin-right: 0;
1264         }
1266         li .tree-icon {
1267             margin-right: 1em;
1268         }
1270         li li .tree-icon {
1271             margin-right: 2em;
1272         }
1274         li li li .tree-icon {
1275             margin-right: 3em;
1276         }
1278         li li li li .tree-icon {
1279             margin-right: 4em;
1280         }
1282         li li li li li .tree-icon {
1283             margin-right: 4.5em;
1284         }
1286         li li li li li li .tree-icon {
1287             margin-right: 5em;
1288         }
1290         li li li li li li li .tree-icon {
1291             margin-right: 5.5em;
1292         }
1293     }
1294     #category-listing {
1295         .listitem {
1296             > div {
1297                 margin-right: 0.5em;
1298                 margin-left: 0;
1299                 > .ba-checkbox {
1300                     margin: -1px 0 0 0.5em;
1301                 }
1302             }
1304             &[data-selected='1'] > div > .ba-checkbox {
1305                 margin: 0 0 0 0.5em;
1306             }
1307         }
1308         .course-count {
1309             margin-left: 2rem;
1311             .smallicon {
1312                 margin-left: 0px;
1313                 margin-right: 4px;
1314             }
1315         }
1316         .bulk-action-checkbox {
1317             margin-left: -3px;
1318             margin-right: 0;
1319         }
1320     }
1321     #course-listing {
1322         padding-right: 24px;
1323         .listitem {
1324             .idnumber {
1325                 color: #a1a1a8;
1326                 padding-right: 2em;
1327             }
1328             .categoryname {
1329                 display: inline-block;
1330                 margin-right: 1em;
1331                 margin-left: 0;
1332             }
1333             .drag-handle {
1334                 margin: 0 6px 0 6px;
1335             }
1336             > div {
1337                 padding-left: 1rem;
1338             }
1339         }
1340         .bulk-action-checkbox {
1341             vertical-align: middle;
1342             margin: -2px 0 0 6px;
1343         }
1344     }
1345     .detail-pair {
1346         > * {
1347             float: right;
1348             margin-right: 0;
1349         }
1350         .pair-key {
1351             span {
1352                 margin-right: 0;
1353                 margin-left: 0;
1354             }
1355         }
1356         .pair-value {
1357             margin-right: 0.5em;
1358         }
1359     }
1362 /** Management header styling **/
1363 .coursecat-management-header {
1364     vertical-align: middle;
1365     h2 {
1366         display: inline-block;
1367         text-align: left;
1368     }
1369     > div {
1370         display: inline-block;
1371         float: right;
1372         line-height: 40px;
1373         > div {
1374             margin-left: 1em;
1375             margin: 10px 0;
1376             display: inline-block;
1377         }
1378     }
1379     select {
1380         max-width: 300px;
1381         cursor: pointer;
1382         padding: 0.4em 0.5em 0.45em 1em;
1383         vertical-align: baseline;
1384         white-space: nowrap;
1385     }
1386     .view-mode-selector {
1387         .moodle-actionmenu {
1388             white-space: nowrap;
1389             display: inline-block;
1390         }
1391         .moodle-actionmenu[data-enhanced].show .menu a {
1392             padding-left: 1em;
1393         }
1394     }
1396 .dir-rtl .coursecat-management-header {
1397     h2 {
1398         text-align: right;
1399     }
1400     > div {
1401         float: left;
1402         margin-right: 1em;
1403         margin-left: 0;
1404     }
1406 .course-being-dragged-proxy {
1407     border: 0;
1408     color: @linkColor;
1409     vertical-align: middle;
1410     padding: 0 0 0 4em;
1412 .course-being-dragged {
1413     .opacity(50);
1416 /**
1417  * Display sizes:
1418  * Large displays                   1200        +
1419  * Default displays                  980     1199
1420  * Tablets                           768      979
1421  * Small tablets and large phones    481      767
1422  * Phones                              0      480
1423  */
1424 @media (min-width: 1200px) and (max-width: 1600px) {
1425     #course-category-listings.columns-3 {
1426         background-color: @tableBackground;
1427         border: 0;
1429         #category-listing,
1430         #course-listing {
1431             width: 50%;
1432         }
1433         #category-listing > div,
1434         #course-listing > div,
1435         #course-detail > div {
1436             background-color: @tableBackground;
1437         }
1438         #course-detail {
1439             width: 100%;
1440             margin-top: 1em;
1441         }
1442     }
1446 @media (max-width: 1199px) {
1447     #course-category-listings.columns-2,
1448     #course-category-listings.columns-3 {
1449         background-color: @tableBackground;
1450         border: 0;
1451         #category-listing,
1452         #course-listing,
1453         #course-detail {
1454             width: 100%;
1455             margin: 0 0 1em;
1456         }
1457         #category-listing > div,
1458         #course-listing > div,
1459         #course-detail > div {
1460             background-color: @tableBackground;
1461         }
1462     }