MDL-52342 theme: Reduce specificity of selector
[moodle.git] / theme / bootstrapbase / less / moodle / course.less
1 /* course.less */
2 /* COURSE CONTENT */
3 .section_add_menus {
4     text-align: right;
5     clear: both;
6 }
7 .section-modchooser {
8     clear: both;
9 }
10 .dir-rtl .section_add_menus {
11     text-align: left;
12     clear: both;
13 }
14 .section_add_menus .horizontal div,
15 .section_add_menus .horizontal form {
16     display: inline;
17 }
18 .section_add_menus optgroup {
19     font-weight: normal;
20     font-style: italic;
21 }
22 .section_add_menus .urlselect {
23     margin-left: .4em;
24 }
25 .dir-rtl .section_add_menus .urlselect {
26     margin-right: .4em;
27     margin-left: 0;
28 }
29 .section_add_menus .urlselect select {
30     margin-left: .2em;
31 }
32 .dir-rtl .section_add_menus .urlselect select {
33     margin-right: .2em;
34     margin-left: 0;
35 }
36 .section_add_menus .urlselect img.iconhelp {
37     padding: 0;
38     margin: 0;
39     vertical-align: text-bottom;
40 }
42 .sitetopic ul.section {
43     margin: 0;
44 }
45 .course-content ul.section {
46     margin: 1em;
47 }
48 .section {
49     .side {
50         &.left {
51             float: left;
52         }
53         &.right {
54             float: right;
55         }
56     }
57     .spinner {
58         height: 16px;
59         width: 16px;
60     }
61     .activity {
62         .spinner {
63             left: 100%;
64             position: absolute;
65             vertical-align: text-bottom;
66         }
68         .editing_move {
69             /* Move the move icon to the start of the line */
70             position: absolute;
71             left: 0;
72             top: 0;
73         }
75         .mod-indent-outer {
76             /**
77              * Add appropriate padding such that nothing overlaps the
78              * absolute positioned move icon.
79              */
80             padding-left: 32px;
81         }
83         /* The command block for each activity */
84         .actions {
85             position: absolute;
86             right: 0;
87             top: 0;
88         }
90         .contentwithoutlink,
91         .activityinstance {
93             min-width: 40%;
94             display: table-cell;
95             padding-right: 4px;
96             min-height: 2em;
98             .dimmed {
99                 img.activityicon {
100                   opacity: 0.5;
101                   filter: alpha(opacity=50);
102                 }
103             }
104         }
105     }
106     .label {
107       .contentwithoutlink,
108       .activityinstance {
109         padding-right: 32px;
110         display: block;
111         height: inherit;
112       }
114       .mod-indent-outer {
115         padding-left: 24px;
116         display: block;
117       }
118     }
120     .filler {
121         width: 16px;
122         height: 16px;
123         padding: 0.3em;
124         display: inline-block;
125     }
127     .activity.editor_displayed {
128         a.editing_title,
129         .moodle-actionmenu {
130             display: none;
131         }
132         div.activityinstance {
133             padding-right: initial;
135             input {
136                 margin-bottom: initial;
137                 padding-top: initial;
138                 padding-bottom: initial;
139                 vertical-align: text-bottom;
140             }
141         }
142     }
145 .dir-rtl .section {
146     .side {
147         &.left {
148             float: right;
149         }
150         &.right {
151             float: left;
152         }
153     }
154     .activity {
155         .spinner {
156             left: auto;
157             right: 100%;
158         }
160         .mod-indent-outer {
161             /**
162              * Add appropriate padding such that nothing overlaps the
163              * absolute positioned move icon.
164              */
165             padding-left: initial;
166             padding-right: 32px;
167         }
169         /* The command block for each activity */
170         .actions {
171             left: 0;
172             right: auto;
173         }
175         .contentwithoutlink,
176         .activityinstance {
177             padding-left: 4px;
178             padding-right: initial;
179         }
180     }
183 .dir-rtl .section {
184     .activity {
185         .editing_move {
186             /* Move the move icon to the start of the line */
187             left: auto;
188             right: 0;
189         }
191         &.editor_displayed {
192             div.activityinstance {
193                 padding-left: initial;
194             }
195         }
196     }
199 .activity img.activityicon {
200     margin-right: 6px;
201     vertical-align: text-bottom;
203 .dir-rtl .section .activity img.activityicon {
204     margin-left: 6px;
205     margin-right: 0;
207 .section .activity .activityinstance,
208 .section .activity .activityinstance div {
209     display: inline-block;
211 .editing {
212     .section {
213         .activity {
214             .contentwithoutlink,
215             .activityinstance {
216                 padding-right: 200px;
217             }
218         }
219     }
222 .dir-rtl.editing {
223     .section {
224         .activity {
225             .contentwithoutlink,
226             .activityinstance {
227                 padding-left: 200px;
228                 padding-right: 0;
229             }
230         }
231     }
234 .editing_show + .editing_assign,
235 .editing_hide + .editing_assign {
236     // if roles icon missing, add space
237     margin-left: 20px;
239 .section .activity .commands {
240     white-space: nowrap;
241     display: inline;
243 .section .activity.modtype_label.label {
244     font-weight: normal;
245     padding: .2em;
247 .section li.activity {
248     padding: .2em;
249     clear: both;
251 .section .activity .activityinstance .groupinglabel {
252     padding-left: 30px;
254 .dir-rtl .section .activity .activityinstance .groupinglabel {
255     padding-right: 30px;
257 .section .activity .availabilityinfo,
258 .section .activity .contentafterlink {
259     margin-top: 0.5em;
260     margin-left: 30px;
262 .dir-rtl .section .activity .availabilityinfo,
263 .dir-rtl .section .activity .contentafterlink {
264     margin-left: 0;
265     margin-right: 30px;
267 .section .activity .contentafterlink p {
268     margin: .5em 0;
270 .editing .section .activity:hover,
271 .editing .section .activity.action-menu-shown {
272     background-color: @grayLighter;
274 .course-content .current {
275     background-color: @infoBackground;
277 .course-content .section-summary {
278     border: 1px solid @tableBorder;
279     margin-top: 5px;
280     list-style: none;
282 .course-content .section-summary .section-title  {
283     margin: 2px 5px 10px 5px;
285 .course-content .section-summary .summarytext {
286     margin: 2px 5px 2px 5px;
288 .course-content .section-summary .section-summary-activities .activity-count {
289     .muted;
290     font-size: @fontSizeSmall;
291     margin: 3px;
292     white-space: nowrap;
293     display: inline-block;
295 .course-content .section-summary .summary {
296     margin-top: 5px;
298 .course-content .single-section {
299     margin-top: 1em;
301 .course-content .single-section .section-navigation {
302     display: block;
303     padding: 0.5em;
304     margin-bottom: -0.5em;
306 .course-content .single-section .section-navigation .title {
307     font-weight: bold;
308     font-size: 108%;
309     clear: both;
311 .course-content .single-section .section-navigation .mdl-left {
312     font-weight: normal;
313     float: left;
314     margin-right: 1em;
316 .dir-rtl .course-content .single-section .section-navigation .mdl-left {
317     float: right;
319 .course-content .single-section .section-navigation .mdl-left .larrow {
320     margin-right: 0.1em;
322 .course-content .single-section .section-navigation .mdl-right {
323     font-weight: normal;
324     float: right;
325     margin-left: 1em;
327 .dir-rtl .course-content .single-section .section-navigation .mdl-right {
328     float: left;
330 .course-content .single-section .section-navigation .mdl-right .rarrow {
331     margin-left: 0.1em;
333 .course-content .single-section .section-navigation .mdl-bottom {
334     margin-top: 0;
336 .course-content ul li.section.main {
337     border-bottom: 2px solid @tableBorder;
338     margin-top: 0;
340 .course-content ul li.section.hidden {
341     .sectionname > span,
342     .content > div,  /* All the divs but the activities which are in a UL. */
343     .activity .activityinstance {
344         opacity: .5;
345     }
346     .sectionname > span,
347     .activity .activityinstance {
348         margin-left: 10px;
349         margin-right: 10px;
350     }
352 .course-content ul.topics li.section .content,
353 .course-content ul.weeks li.section .content {
354     margin-right: 20px;
355     margin-left: 20px;
356     padding: 0;
359 .course-content {
360     margin-top: 0;
363 .course-content ul.topics li.section {
364     padding-bottom: 20px;
367 .course-content ul.topics li.section .summary {
368     margin-left: 25px;
371 .course-content li {
372     &.section {
373         ul {
374             list-style: disc;
375             ul {
376                 list-style: circle;
377                 ul {
378                     list-style: square;
379                 }
380             }
381         }
382         li {
383             &.activity {
384                 ul {
385                     list-style: disc;
386                     ul {
387                         list-style: circle;
388                         ul {
389                             list-style: square;
390                         }
391                     }
392                 }
393             }
394         }
395     }
398 .path-course-view .completionprogress {
399     margin-left: 25px
402 .path-course-view .completionprogress {
403     display: block;
404     float: right;
405     height: 20px;
406     position: relative;
409 #page-site-index .subscribelink {
410     text-align: right;
412 #site-news-forum h2,
413 #frontpage-course-list h2,
414 #frontpage-category-names h2,
415 #frontpage-category-combo h2 {
416     margin-bottom: 9px;
418 .path-course-view a.reduce-sections {
419     padding-left: 0.2em;
421 .path-course-view .subscribelink {
422     text-align: right;
424 .path-course-view .unread {
425     margin-left: 30px;
427 .dir-rtl.path-course-view .unread {
428     margin-right: 30px;
430 .path-course-view .block.drag .header {
431     cursor: move;
433 .path-course-view .completionprogress {
434     text-align: right;
436 .dir-rtl.path-course-view .completionprogress {
437     text-align: left;
439 .path-course-view .single-section .completionprogress {
440     margin-right: 5px;
442 .path-course-view .section .summary {
443     line-height: normal;
446 .path-site li.activity > div,
447 .path-course-view li.activity > div {
448     position: relative;
449     padding: 0 16px 0 0; /* to accommodate the floated completion icon with highlighting */
451 .dir-rtl.path-site li.activity > div,
452 .dir-rtl.path-course-view li.activity > div {
453     position: relative;
454     padding: 0 0 0 16px;
456 .path-course-view li.activity span.autocompletion img {
457     vertical-align: text-bottom;
459 .path-course-view li.activity form.togglecompletion img {
460     max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
462 .path-course-view li.activity form.togglecompletion .ajaxworking {
463     width: 16px;
464     height: 16px;
465     position: absolute;
466     right: 22px;
467     top: 3px;
468     background: url([[pix:i/ajaxloader]]) no-repeat;
470 .dir-rtl.path-course-view .completionprogress {
471     float: none;
473 .dir-rtl.path-course-view li.activity form.togglecompletion .ajaxworking {
474     right: -22px;
477 li.section.hidden span.commands a.editing_hide,
478 li.section.hidden span.commands a.editing_show {
479     cursor: default;
481 ul.weeks h3.sectionname {
482     white-space: nowrap;
484 .editing ul.weeks h3.sectionname {
485     white-space: normal;
488 .single-section h3.sectionname {
489     text-align: center;
490     clear: both;
493 .section img.movetarget {
494     height: 16px;
495     width: 80px;
498 input.titleeditor {
499     width: 330px;
500     vertical-align: text-bottom;
503 span.editinstructions {
504     position: absolute;
505     top: 0;
506     margin-top: -22px;
507     margin-left: 30px;
508     line-height: 16px;
509     font-size: @fontSizeSmall;
510     padding: .1em .4em;
511     background-color: @infoBackground;
512     color: @infoText;
513     text-decoration: none;
514     z-index: 9999;
515     .box-shadow(2px 2px 5px 1px #ccc);
516     border: 1px solid @infoBorder;
518 .dir-rtl span.editinstructions {
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 {line-height:normal;}
950             > .menubar a {
951                 color:inherit;
952                 display:inline-block;
953                 > img {
954                     display:none;
955                 }
956                 .caret {
957                     display: none;
958                 }
959             }
960             > .menu .menu-action-text {
961                 display:inline-block;
962             }
963         }
964     }
965     ul.ml {
966         list-style: none;
967         margin:1rem 0;
968         ul.ml {
969             margin:0;
970         }
971     }
972     li {
973         line-height:2.2em;
974         > div {
975             &:hover {
976                 background-color: @tableBackgroundHover;
977             }
978         }
979         .tree-icon {
980             margin: 2px 6px 0 0;
981             width:12px;
982             vertical-align:inherit;
983         }
984         &[data-selected='1'] {
985             > div {
986                 background-color: @tableBackgroundAccent;
987             }
988             > div:hover {
989                 background-color: @tableBackgroundHover;
990             }
991         }
993         // Tree item indenting to represent depth.
994         .tree-icon {margin-left:0;}
995         li .tree-icon {margin-left:1em;}
996         li li .tree-icon {margin-left:2em;}
997         li li li .tree-icon {margin-left:3em;}
998         li li li li .tree-icon {margin-left:4em;}
999         li li li li li .tree-icon {margin-left:4.5em;}
1000         li li li li li li .tree-icon {margin-left:5em;}
1001         li li li li li li li .tree-icon {margin-left:5.5em;}
1002     }
1004     .item-actions {
1005         margin-right:1em;
1006         display:inline-block;
1007         display:initial;
1008         > a img,
1009         .menubar img {
1010             margin: 0 4px;
1011             height:12px;
1012             padding: 0;
1013             vertical-align: inherit;
1014         }
1015         &.show .menu {
1016             li {
1017                 line-height: 20px;
1018             }
1019             img {
1020                 width: 12px;
1021                 max-width:none;
1022             }
1023         }
1024         .menu-action-text {
1025             vertical-align: inherit;
1026         }
1027     }
1029     .listitem {
1030         > div {
1031             > .float-left {
1032                 float:left;
1033             }
1034             > .float-right {
1035                 float:right;
1036                 text-align:right;
1037             }
1038             .item-actions {
1039                 .action-show {
1040                     display:none;
1041                 }
1042                 .action-hide {
1043                     display:inline;
1044                 }
1045             }
1046             .without-actions {
1047                 color: #333;
1048             }
1049             .idnumber {
1050                 color:#a1a1a8;
1051                 margin-right:2em;
1052             }
1053         }
1054         // The category or course is hidden.
1055         &[data-visible="0"] {
1056             .muted;
1057             > div {
1058                 > a {
1059                     .muted;
1060                 }
1061                 .item-actions {
1062                     .action-show {
1063                         display:inline;
1064                     }
1065                     .action-hide {
1066                         display:none;
1067                     }
1068                 }
1069             }
1070         }
1071         &.highlight {
1072             background-color: @tableBackground;
1073             > div,
1074             > div:hover,
1075             &[data-selected='1'] > div {
1076                 background-color: @tableBackgroundHover;
1077             }
1078         }
1079     }
1081     #course-listing {
1082         .listitem {
1083             .categoryname {
1084                 display:inline-block;
1085                 margin-left:1em;
1086                 color:#a1a1a8;
1087             }
1088             .coursename {
1089                 display:inline-block;
1090             }
1091             > div {
1092                 padding-left:1rem;
1093             }
1094         }
1095         > .firstpage .listitem:first-child > div .item-actions .action-moveup,
1096         > .lastpage .listitem:last-child > div .item-actions .action-movedown {
1097           display: none;
1098         }
1099         .bulk-action-checkbox {
1100             margin:-2px 6px 0 0;
1101         }
1102     }
1103     #category-listing {
1104         .listitem.collapsed > ul.ml {
1105             display: none;
1106         }
1107         .listitem {
1108             > div {
1109                 > .ba-checkbox {
1110                     width:2.2em;
1111                     text-align:center;
1112                     margin:-1px 0.5em 0 0;
1113                     padding-top:2px;
1114                 }
1115             }
1116             &.highlight > div > .ba-checkbox {
1117                 background-color: @tableBackgroundHover;
1118             }
1119             &[data-selected='1'] > div > .ba-checkbox {
1120                 margin:0 0.5em 0 0;
1121                 padding:0;
1122                 background-color: inherit;
1123             }
1124             &:first-child > div .item-actions .action-moveup,
1125             &:last-child > div .item-actions .action-movedown {
1126               display: none;
1127             }
1128         }
1129         .course-count {
1130             color:#a1a1a8;
1131             margin-right:2rem;
1132             min-width:3.5em;
1133             display:inline-block;
1134             .smallicon {
1135                 width:12px;
1136                 margin-left:4px;
1137                 vertical-align: inherit;
1138             }
1139         }
1140         .bulk-action-checkbox {
1141             margin-right: -3px;
1142         }
1143         .category-listing > ul > .listitem:first-child {
1144             position:relative;
1145         }
1146         .category-bulk-actions {
1147             margin: 0 0.5em 0.5em;
1148             position:relative;
1149         }
1150     }
1152     .detail-pair {
1153         border-bottom:1px solid @tableBorder;
1154         margin:0 1rem;
1155         > * {
1156             display:inline-block;
1157             line-height:2.2rem;
1158         }
1159         .pair-key {
1160             font-weight:bold;
1161             vertical-align: top;
1162             span {
1163                 margin-right: 1rem;
1164                 display:block;
1165             }
1166         }
1167         .pair-value select {
1168             max-width:100%;
1169         }
1170     }
1172     .bulk-actions .detail-pair {
1173         > * {
1174             display:block;
1175             width:100%;
1176         }
1177     }
1179     .listing-pagination {
1180         text-align:center;
1181         .yui3-button {
1182             background-color: @btnBackground;
1183             border:0;
1184             margin:0.4rem 0.2rem 0.45rem;
1185             font-size:10.4px;
1186             &.active-page {
1187                 background-color: @btnBackgroundHighlight;
1188             }
1189         }
1190     }
1191     .listing-pagination-totals {
1192         text-align:center;
1193         &.dimmed {
1194             .muted;
1195             margin:0.4rem 1rem 0.45rem;
1196         }
1197     }
1198     .select-a-category .notifymessage,
1199     .select-a-category .alert {
1200         margin: 1em;
1201     }
1204 #course-category-listings #course-listing .listitem .drag-handle {
1205     display: none;
1207 .jsenabled #course-category-listings #course-listing .listitem .drag-handle {
1208     display:inline-block;
1209     margin: 0 6px 0 0;
1210     cursor:pointer;
1213 .dir-rtl #course-category-listings {
1214     #category-listing,
1215     #course-listing {
1216         float: right;
1217         margin-left: 0;
1218     }
1220     .listitem {
1221         > div {
1222             > .float-left {
1223                 float:right;
1224             }
1225             > .float-right {
1226                 float:left;
1227                 text-align:left;
1228             }
1229         }
1230     }
1231     li {
1232         .tree-icon {
1233             margin: 2px 0 0 6px;
1234         }
1236         // Tree item indenting to represent depth.
1237         .tree-icon {margin-right:0;}
1238         li .tree-icon {margin-right:1em;}
1239         li li .tree-icon {margin-right:2em;}
1240         li li li .tree-icon {margin-right:3em;}
1241         li li li li .tree-icon {margin-right:4em;}
1242         li li li li li .tree-icon {margin-right:4.5em;}
1243         li li li li li li .tree-icon {margin-right:5em;}
1244         li li li li li li li .tree-icon {margin-right:5.5em;}
1245     }
1246     #category-listing {
1247         .listitem {
1248             > div {
1249                 margin-right:0.5em;
1250                 margin-left: 0;
1251                 > .ba-checkbox {
1252                   margin:-1px 0 0 0.5em;
1253                 }
1254             }
1256             &[data-selected='1'] > div > .ba-checkbox {
1257                 margin:0 0 0 0.5em;
1258             }
1259         }
1260         .course-count {
1261             margin-left:2rem;
1263             .smallicon {
1264                 margin-left: 0px;
1265                 margin-right: 4px;
1266             }
1267         }
1268         .bulk-action-checkbox {
1269             margin-left: -3px;
1270             margin-right: 0;
1271         }
1272     }
1273     #course-listing {
1274         padding-right: 24px;
1275         .listitem {
1276             .idnumber {
1277                 color:#a1a1a8;
1278                 padding-right:2em;
1279             }
1280             .categoryname {
1281                 display:inline-block;
1282                 margin-right:1em;
1283                 margin-left:0;
1284             }
1285             .drag-handle {
1286                 margin: 0 6px 0 6px;
1287             }
1288             > div {
1289                 padding-left:1rem;
1290             }
1291         }
1292         .bulk-action-checkbox {
1293             vertical-align:middle;
1294             margin:-2px 0 0 6px;
1295         }
1296     }
1297   .detail-pair {
1298         > * {
1299             float: right;
1300             margin-right: 0;
1301         }
1302         .pair-key {
1303             span {
1304                 margin-right:0;
1305                 margin-left: 0;
1306             }
1307         }
1308         .pair-value {
1309             margin-right: 0.5em;
1310         }
1311     }
1314 /** Management header styling **/
1315 .coursecat-management-header {
1316     vertical-align:middle;
1317     h2 {
1318         display:inline-block;
1319         text-align:left;
1320     }
1321     > div {
1322         display:inline-block;
1323         float:right;
1324         line-height:40px;
1325         > div {
1326           margin-left:1em;
1327           margin: 10px 0;
1328           display:inline-block;
1329         }
1330     }
1331     select {
1332         max-width: 300px;
1333         cursor: pointer;
1334         padding: 0.4em 0.5em 0.45em 1em;
1335         vertical-align: baseline;
1336         white-space: nowrap;
1337     }
1338     .view-mode-selector {
1339         .moodle-actionmenu {
1340             white-space:nowrap;
1341             display:inline-block;
1342         }
1343         .moodle-actionmenu[data-enhanced].show .menu a {
1344             padding-left:1em;
1345         }
1346     }
1348 .dir-rtl .coursecat-management-header {
1349     h2 {
1350         text-align:right;
1351     }
1352     > div {
1353         float:left;
1354         margin-right:1em;
1355         margin-left: 0;
1356     }
1358 .course-being-dragged-proxy {
1359     border: 0;
1360     color: @linkColor;
1361     vertical-align:middle;
1362     padding: 0 0 0 4em;
1364 .course-being-dragged {
1365     .opacity(50);
1368 /**
1369  * Display sizes:
1370  * Large displays                   1200        +
1371  * Default displays                  980     1199
1372  * Tablets                           768      979
1373  * Small tablets and large phones    481      767
1374  * Phones                              0      480
1375  */
1376 @media (min-width: 1200px) and (max-width: 1600px) {
1377     #course-category-listings.columns-3 {
1378         background-color: @tableBackground;
1379         border:0;
1381         #category-listing,
1382         #course-listing {
1383             width:50%;
1384         }
1385         #category-listing > div,
1386         #course-listing > div,
1387         #course-detail > div {
1388             background-color: @tableBackground;
1389         }
1390         #course-detail {
1391             width:100%;
1392             margin-top:1em;
1393         }
1394     }
1398 @media (max-width: 1199px) {
1399     #course-category-listings.columns-2,
1400     #course-category-listings.columns-3 {
1401         background-color: @tableBackground;
1402         border:0;
1403         #category-listing,
1404         #course-listing,
1405         #course-detail {
1406             width:100%;
1407             margin:0 0 1em;
1408         }
1409         #category-listing > div,
1410         #course-listing > div,
1411         #course-detail > div {
1412             background-color: @tableBackground;
1413         }
1414     }