7e64257bcfe2be69f1cbadfe0b522675c7244fbe
[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 .section_add_menus .horizontal div,
12 .section_add_menus .horizontal form {
13     display: inline;
14 }
15 .section_add_menus optgroup {
16     font-weight: normal;
17     font-style: italic;
18 }
19 .section_add_menus .urlselect {
20     margin-left: .4em;
21 }
22 .section_add_menus .urlselect select {
23     margin-left: .2em;
24 }
25 .section_add_menus .urlselect img.iconhelp {
26     padding: 0;
27     margin: 0;
28     vertical-align: text-bottom;
29 }
31 .sitetopic ul.section {
32     margin: 0;
33 }
34 .course-content ul.section {
35     margin: 1em;
36 }
37 .section {
38     .side {
39         &.left {
40             float: left;
41         }
42         &.right {
43             float: right;
44         }
45     }
46     .spinner {
47         height: 16px;
48         width: 16px;
49     }
50     .activity {
51         .spinner {
52             left: 100%;
53             position: absolute;
54         }
56         .mod-indent-outer {
57             padding-left: 0;
58         }
60         /* The command block for each activity */
61         .actions {
62             position: absolute;
63             right: 0;
64             top: 0;
65         }
67         .contentwithoutlink,
68         .activityinstance {
70             min-width: 40%;
71             display: table-cell;
72             padding-right: 4px;
73             min-height: 2em;
74         }
75     }
76     .label {
77         .contentwithoutlink,
78         .activityinstance {
79             padding-right: 32px;
80             display: block;
81             height: inherit;
82         }
84         .mod-indent-outer {
85             padding-left: 24px;
86             display: block;
87         }
88     }
90     .filler {
91         width: 16px;
92         height: 16px;
93         padding: 0.3em;
94         display: inline-block;
95     }
97     .activity.editor_displayed {
98         a.editing_title,
99         .moodle-actionmenu {
100             display: none;
101         }
102         div.activityinstance {
103             padding-right: initial;
105             input {
106                 margin-bottom: initial;
107                 padding-top: initial;
108                 padding-bottom: initial;
109                 vertical-align: text-bottom;
110             }
111         }
112     }
115 .activity {
116     img.activityicon {
117         margin-right: 6px;
118         vertical-align: text-bottom;
119     }
121     .dimmed {
122         img.activityicon {
123             opacity: 0.5;
124             filter: alpha(opacity=50);
125         }
126     }
128     .stealth:not(.dimmed) {
129         opacity: .5;
130     }
133 .section .activity .activityinstance,
134 .section .activity .activityinstance div {
135     display: inline-block;
137 .editing {
138     .section {
139         .activity {
140             .contentwithoutlink,
141             .activityinstance {
142                 padding-right: 200px;
143             }
144             .editing_move {
145                 /* Move the move icon to the start of the line */
146                 position: absolute;
147                 left: 0;
148                 top: 0;
149             }
150             .mod-indent-outer {
151                 /**
152                  * Add appropriate padding such that nothing overlaps the
153                  * absolute positioned move icon.
154                  */
155                 padding-left: 32px;
156             }
157         }
158     }
161 .editing_show + .editing_assign,
162 .editing_hide + .editing_assign {
163     // if roles icon missing, add space
164     margin-left: 20px;
166 .section .activity .commands {
167     white-space: nowrap;
168     display: inline;
170 .section .activity.modtype_label.label {
171     font-weight: normal;
172     padding: .2em;
174 .section li.activity {
175     padding: .2em;
176     clear: both;
178 .section .activity .activityinstance .groupinglabel {
179     padding-left: 30px;
181 .section .activity .availabilityinfo,
182 .section .activity .contentafterlink {
183     margin-top: 0.5em;
184     margin-left: 30px;
186 .section .activity .contentafterlink p {
187     margin: .5em 0;
189 .editing .section .activity:hover,
190 .editing .section .activity.action-menu-shown {
191     background-color: @grayLighter;
193 .course-content .current {
194     background-color: @infoBackground;
196 .course-content .section-summary {
197     border: 1px solid @tableBorder;
198     margin-top: 5px;
199     list-style: none;
201 .course-content .section-summary .section-title {
202     margin: 2px 5px 10px 5px;
204 .course-content .section-summary .summarytext {
205     margin: 2px 5px 2px 5px;
207 .course-content .section-summary .section-summary-activities .activity-count {
208     .muted;
209     font-size: @fontSizeSmall;
210     margin: 3px;
211     white-space: nowrap;
212     display: inline-block;
214 .course-content .section-summary .summary {
215     margin-top: 5px;
217 .course-content .single-section {
218     margin-top: 1em;
220 .course-content .single-section .section-navigation {
221     display: block;
222     padding: 0.5em;
223     margin-bottom: -0.5em;
225 .course-content .single-section .section-navigation .title {
226     font-weight: bold;
227     font-size: 108%;
228     clear: both;
230 .course-content .single-section .section-navigation .mdl-left {
231     font-weight: normal;
232     float: left;
233     margin-right: 1em;
235 .course-content .single-section .section-navigation .mdl-left .larrow {
236     margin-right: 0.1em;
238 .course-content .single-section .section-navigation .mdl-right {
239     font-weight: normal;
240     float: right;
241     margin-left: 1em;
243 .course-content .single-section .section-navigation .mdl-right .rarrow {
244     margin-left: 0.1em;
246 .course-content .single-section .section-navigation .mdl-bottom {
247     margin-top: 0;
249 .course-content ul li.section.main {
250     border-bottom: 2px solid @tableBorder;
251     margin-top: 0;
253 .course-content ul li.section.hidden {
254     .sectionname > span,
255     .content > div.summary {
256         opacity: .5;
257     }
259 .course-content ul.topics,
260 .course-content ul.weeks {
262     li.section {
263         padding-bottom: 20px;
265         .content {
266             margin-right: 20px;
267             margin-left: 20px;
268             padding: 0;
269         }
271         .summary,
272         .content > .availabilityinfo {
273             margin-left: 25px;
274         }
275     }
278 .course-content {
279     margin-top: 0;
282 .course-content li {
283     &.section {
284         ul {
285             list-style: disc;
286             ul {
287                 list-style: circle;
288                 ul {
289                     list-style: square;
290                 }
291             }
292         }
293         li {
294             &.activity {
295                 ul {
296                     list-style: disc;
297                     ul {
298                         list-style: circle;
299                         ul {
300                             list-style: square;
301                         }
302                     }
303                 }
304             }
305         }
306     }
309 .path-course-view .completionprogress {
310     margin-left: 25px;
313 .path-course-view .completionprogress {
314     display: block;
315     float: right;
316     height: 20px;
317     position: relative;
320 #page-site-index .subscribelink {
321     text-align: right;
323 #site-news-forum h2,
324 #frontpage-course-list h2,
325 #frontpage-category-names h2,
326 #frontpage-category-combo h2 {
327     margin-bottom: 9px;
329 .path-course-view a.reduce-sections {
330     padding-left: 0.2em;
332 .path-course-view .subscribelink {
333     text-align: right;
335 .path-course-view .unread {
336     margin-left: 30px;
338 .path-course-view .block.drag .header {
339     cursor: move;
341 .path-course-view .completionprogress {
342     text-align: right;
344 .path-course-view .single-section .completionprogress {
345     margin-right: 5px;
347 .path-course-view .section .summary {
348     line-height: normal;
351 .path-site li.activity > div,
352 .path-course-view li.activity > div {
353     position: relative;
354     padding: 0 16px 0 0; /* to accommodate the floated completion icon with highlighting */
356 .path-course-view li.activity span.autocompletion img {
357     vertical-align: text-bottom;
359 .path-course-view li.activity form.togglecompletion img {
360     max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
362 .path-course-view li.activity form.togglecompletion .ajaxworking {
363     width: 16px;
364     height: 16px;
365     position: absolute;
366     right: 22px;
367     top: 3px;
368     background: url([[pix:i/ajaxloader]]) no-repeat;
371 li.section.hidden span.commands a.editing_hide,
372 li.section.hidden span.commands a.editing_show {
373     cursor: default;
376 .single-section h3.sectionname {
377     text-align: center;
378     clear: both;
381 .section img.movetarget {
382     height: 16px;
383     width: 80px;
386 input.titleeditor {
387     width: 330px;
388     vertical-align: text-bottom;
391 span.editinstructions {
392     position: absolute;
393     top: 0;
394     margin-top: -22px;
395     margin-left: 30px;
396     line-height: 16px;
397     font-size: @fontSizeSmall;
398     padding: .1em .4em;
399     background-color: @infoBackground;
400     color: @infoText;
401     text-decoration: none;
402     z-index: 9999;
403     .box-shadow(2px 2px 5px 1px #ccc);
404     border: 1px solid @infoBorder;
407 /* Course drag and drop upload styles */
408 #dndupload-status {
409     position: fixed;
410     left: 0;
411     width: 40%;
412     margin: 0 30%;
413     padding: 6px;
414     border: 1px solid @infoBorder;
415     text-align: center;
416     background: @infoBackground;
417     color: @infoText;
418     z-index: 1; // Required in order to have this above relatively positioned course content.
419     .box-shadow(2px 2px 5px 1px #ccc);
420     .border-radius(8px);
422 .dndupload-preview {
423     color: #909090;
424     border: 1px dashed #909090;
425     list-style: none;
426     margin-top: .2em;
427     padding: .3em;
429 .dndupload-preview img.icon {
430     vertical-align: text-bottom;
431     padding: 0;
433 .dndupload-progress-outer {
434     .progress;
436 .dndupload-progress-inner {
437     .progress .bar;
439 .dndupload-hidden {
440     display: none;
443 /* COURSES LISTINGS AND COURSE SUMMARY */
444 #page-course-pending .singlebutton,
445 #page-course-index .singlebutton,
446 #page-course-index-category .singlebutton,
447 #page-course-editsection .singlebutton {
448     text-align: center;
450 #page-admin-course-manage #movecourses td img {
451     margin: 0 .22em;
452     vertical-align: text-bottom;
454 #page-admin-course-manage #movecourses td img.icon {
455     padding: 0;
458 #coursesearch {
459     margin-top: 1em;
460     text-align: center;
463 #page-course-pending .pendingcourserequests {
464     margin-bottom: 1em;
466 #page-course-pending .pendingcourserequests .singlebutton {
467     display: inline;
469 #page-course-pending .pendingcourserequests .cell {
470     padding: 0 5px;
472 #page-course-pending .pendingcourserequests .cell.c6 {
473     white-space: nowrap;
476 .coursebox {
477     margin-bottom: 15px;
478     border: 1px dotted #ddd;
479     .border-radius(4px);
480     padding: 5px;
483 .coursebox > .info > .coursename a {
484     display: block;
485     background-image: url([[pix:moodle|i/course]]);
486     background-repeat: no-repeat;
487     padding-left: 21px;
488     background-position: left 0.2em;
490 .coursebox > .info > .coursename,
491 .coursebox .content .teachers,
492 .coursebox .content .courseimage,
493 .coursebox .content .coursefile {
494     float: left;
495     clear: left;
497 .coursebox .content .teachers,
498 .coursebox .content .courseimage,
499 .coursebox .content .coursefile {
500     width: 40%;
502 .coursebox > .info > h3.coursename {
503     margin: 5px;
504     line-height: 1;
506 .coursebox > .info > .coursename {
507     margin: 5px;
508     padding: 0;
510 .coursebox .content .teachers li {
511     list-style-type: none;
512     padding: 0;
513     margin: 0;
515 .coursebox .enrolmenticons {
516     padding: 3px 0;
517     float: right;
519 .coursebox .moreinfo {
520     padding: 3px 0;
521     float: right;
523 .coursebox .enrolmenticons img,
524 .coursebox .moreinfo img {
525     margin: 0 .2em;
527 .coursebox .content {
528     clear: both;
530 .coursebox .content .summary,
531 .coursebox .content .coursecat {
532     float: right;
533     width: 55%;
535 .coursebox .content .coursecat {
536     text-align: right;
537     clear: right;
539 .coursebox.remotecoursebox .remotecourseinfo {
540     float: left;
541     width: 40%;
543 .coursebox .content .courseimage img {
544     max-width: 100px;
545     max-height: 100px;
547 .coursebox .content .coursecat,
548 .coursebox .content .summary,
549 .coursebox .content .courseimage,
550 .coursebox .content .coursefile,
551 .coursebox .content .teachers,
552 .coursebox.remotecoursebox .remotecourseinfo {
553     margin: 3px 5px;
554     padding: 0;
557 .coursebox.remotehost > .info > .categoryname a {
558     background-image: url([[pix:moodle|i/mnethost]]);
561 .coursebox.collapsed {
562     margin-bottom: 0;
564 .coursebox.collapsed > .content {
565     display: none;
567 .courses .coursebox.collapsed {
568     border: 1px solid @tableBorder;
569     padding: 5px;
572 .courses .coursebox.even {
573     background-color: @tableBackgroundAccent;
575 .courses .coursebox:hover,
576 .course_category_tree .courses > .paging.paging-morelink:hover {
577     background-color: @tableBackgroundHover;
580 .course_category_tree .category .numberofcourse {
581     font-size: @fontSizeSmall;
584 .course_category_tree .controls {
585     visibility: hidden;
587 .course_category_tree .controls div {
588     display: inline;
589     cursor: pointer;
591 .jsenabled .course_category_tree .controls {
592     visibility: visible;
594 .course_category_tree .controls {
595     margin-bottom: 5px;
596     text-align: right;
597     float: right;
599 .course_category_tree .controls div {
600     padding-right: 2em;
601     font-size: 75%;
604 .course_category_tree .category > .info > .categoryname {
605     /*rtl:remove*/
606     background-image: url([[pix:moodle|t/collapsed_empty]]);
607     /*rtl:raw:
608     background-image: url([[pix:moodle|t/collapsed_empty_rtl]]);
609     */
610     background-repeat: no-repeat;
611     padding: 2px 18px;
612     margin: 3px;
613     background-position: center left;
615 .course_category_tree .category.with_children > .info > .categoryname {
616     background-image: url([[pix:moodle|t/expanded]]);
617     cursor: pointer;
619 .course_category_tree .category.with_children.collapsed > .info > .categoryname {
620     /*rtl:raw:
621     background-image: url([[pix:moodle|t/collapsed_rtl]]);
622     */
623     /*rtl:remove*/
624     background-image: url([[pix:moodle|t/collapsed]]);
626 .course_category_tree .category.collapsed > .content {
627     display: none;
630 .course_category_tree .category > .info {
631     .well;
632     min-height: 0;
633     padding: 0;
634     margin: 3px 0;
635     margin-bottom: 3px;
636     clear: both;
638 .course_category_tree.frontpage-category-names .category > .info {
639     background: none;
640     border: none;
641     margin: 0;
643 .course_category_tree .category > .content {
644     padding-left: 16px;
647 .course_category_tree .subcategories > .paging,
648 .courses > .paging {
649     margin: 0;
650     padding: 5px;
651     text-align: center;
654 .courses > .paging.paging-morelink,
655 .course_category_tree .subcategories > .paging.paging-morelink {
656     text-align: left;
659 .course_category_tree .paging.paging-morelink a {
660     font-size: @fontSizeSmall;
663 #page-course-index-category .generalbox.info {
664     margin-bottom: 15px;
665     border: 1px dotted #ddd;
666     .border-radius(4px);
667     padding: 5px;
670 #page-course-index-category .categorypicker {
671     text-align: center;
672     margin: 10px 0 20px;
675 .section {
676     .summary,
677     .activity {
678         .iconsmall {
679             width: 16px;
680             height: 16px;
681         }
682     }
683     .editing_title {
684         .iconsmall {
685             width: 12px;
686             height: 12px;
687             margin: 8px 8px 0 0;
688             padding: 4px 8px 0 0;
689             vertical-align: text-bottom;
690         }
691     }
692     .moodle-actionmenu {
693         .iconsmall {
694             /** reset sets 100% !important which breaks on IE8 without this !important */
695             max-width: none !important; /* stylelint-disable-line declaration-no-important */
696             width: 16px;
697             height: 16px;
698             padding: 4px;
699             vertical-align: text-bottom;
700         }
701     }
702     .moodle-actionmenu[data-enhanced] {
703         .menu {
704             img {
705                 width: 12px;
706                 height: 12px;
707             }
708         }
709     }
712 /**
713  * Course management page
714  * Palette
715  *
716  * Background (reg)         #F5F5F5
717  * Background (light        #fafafa
718  * Background (highlight)   #ddffaa
719  * Borders                  #e1e1e8
720  */
721 #course-category-listings {
722     background-color: @tableBackground;
723     margin-bottom: 200px;
725     /** Two column layout */
726     &.columns-2 {
727         > #course-listing > div {
728             position: relative;
729             left: -1px;
730         }
731     }
732     /** Three column layout */
733     &.columns-3 > #course-listing > div {
734         height: 100%;
735     }
737     > div > div {
738         min-height: 300px;
739         > ul.ml > li:first-child > div {
740             border-top: 0;
741         }
742     }
743     h3 {
744         margin: 0;
745         padding: 0.4rem 0.6rem 0.3rem;
746     }
747     h4 {
748         margin: 1rem 0 0;
749         padding: 0.6rem 1rem 0.5rem;
750     }
751     .moodle-actionmenu {
752         white-space: nowrap;
753     }
755     .moodle-actionmenu[data-enhance] {
756         .toggle-display {
757             img {
758                 width: auto;
759             }
760             &.textmenu {
761                 padding-right: 4px;
763                 .caret {
764                     margin-top: 12px;
765                 }
766             }
767         }
768     }
770     .listing-actions {
771         text-align: center;
772         padding: 0.4rem 0.3rem 0.3rem;
773         line-height: 2.2em;
774         > a,
775         > .moodle-actionmenu {
776             display: inline-block;
777         }
778         > .moodle-actionmenu .menu a {
779             padding-left: 1rem;
780         }
781         .moodle-actionmenu:not([data-enhanced]) {
782             li {
783                 line-height: normal;
784             }
785             > .menubar a {
786                 color: inherit;
787                 display: inline-block;
788                 > img {
789                     display: none;
790                 }
791                 .caret {
792                     display: none;
793                 }
794             }
795             > .menu .menu-action-text {
796                 display: inline-block;
797             }
798         }
799     }
800     ul.ml {
801         list-style: none;
802         margin: 1rem 0;
803         ul.ml {
804             margin: 0;
805         }
806     }
807     li {
808         line-height: 2.2em;
809         > div {
810             &:hover {
811                 background-color: @tableBackgroundHover;
812             }
813         }
814         .tree-icon {
815             margin: 2px 6px 0 0;
816             width: 12px;
817             vertical-align: inherit;
818         }
819         &[data-selected='1'] {
820             > div {
821                 background-color: @tableBackgroundAccent;
822             }
823             > div:hover {
824                 background-color: @tableBackgroundHover;
825             }
826         }
828         // Tree item indenting to represent depth.
829         .tree-icon {
830             margin-left: 0;
831         }
833         li .tree-icon {
834             margin-left: 1em;
835         }
837         li li .tree-icon {
838             margin-left: 2em;
839         }
841         li li li .tree-icon {
842             margin-left: 3em;
843         }
845         li li li li .tree-icon {
846             margin-left: 4em;
847         }
849         li li li li li .tree-icon {
850             margin-left: 4.5em;
851         }
853         li li li li li li .tree-icon {
854             margin-left: 5em;
855         }
857         li li li li li li li .tree-icon {
858             margin-left: 5.5em;
859         }
860     }
862     .item-actions {
863         margin-right: 1em;
864         display: initial;
865         > a img,
866         .menubar img {
867             margin: 0 4px;
868             height: 12px;
869             padding: 0;
870             vertical-align: inherit;
871         }
872         &.show .menu {
873             li {
874                 line-height: 20px;
875             }
876             img {
877                 width: 12px;
878                 max-width: none;
879             }
880         }
881         .menu-action-text {
882             vertical-align: inherit;
883         }
884     }
886     .listitem {
887         > div {
888             > .float-left {
889                 float: left;
890             }
891             > .float-right {
892                 float: right;
893                 text-align: right;
894             }
895             .item-actions {
896                 .action-show {
897                     display: none;
898                 }
899                 .action-hide {
900                     display: inline;
901                 }
902             }
903             .without-actions {
904                 color: #333;
905             }
906             .idnumber {
907                 color: #a1a1a8;
908                 margin-right: 2em;
909             }
910         }
911         // The category or course is hidden.
912         &[data-visible="0"] {
913             .muted;
914             > div {
915                 > a {
916                     .muted;
917                 }
918                 .item-actions {
919                     .action-show {
920                         display: inline;
921                     }
922                     .action-hide {
923                         display: none;
924                     }
925                 }
926             }
927         }
928         &.highlight {
929             background-color: @tableBackground;
930             > div,
931             > div:hover,
932             &[data-selected='1'] > div {
933                 background-color: @tableBackgroundHover;
934             }
935         }
936     }
938     #course-listing {
939         .listitem {
940             .categoryname {
941                 display: inline-block;
942                 margin-left: 1em;
943                 color: #a1a1a8;
944             }
945             .coursename {
946                 display: inline-block;
947             }
948             > div {
949                 padding-left: 1rem;
950             }
951         }
952         > .firstpage .listitem:first-child > div .item-actions .action-moveup,
953         > .lastpage .listitem:last-child > div .item-actions .action-movedown {
954             display: none;
955         }
956         .bulk-action-checkbox {
957             margin: -2px 6px 0 0;
958         }
959     }
960     #category-listing {
961         .listitem.collapsed > ul.ml {
962             display: none;
963         }
964         .listitem {
965             > div {
966                 > .ba-checkbox {
967                     width: 2.2em;
968                     text-align: center;
969                     margin: -1px 0.5em 0 0;
970                     padding-top: 2px;
971                 }
972             }
973             &.highlight > div > .ba-checkbox {
974                 background-color: @tableBackgroundHover;
975             }
976             &[data-selected='1'] > div > .ba-checkbox {
977                 margin: 0 0.5em 0 0;
978                 padding: 0;
979                 background-color: inherit;
980             }
981             &:first-child > div .item-actions .action-moveup,
982             &:last-child > div .item-actions .action-movedown {
983                 display: none;
984             }
985         }
986         .course-count {
987             color: #a1a1a8;
988             margin-right: 2rem;
989             min-width: 3.5em;
990             display: inline-block;
991             .smallicon {
992                 width: 12px;
993                 margin-left: 4px;
994                 vertical-align: inherit;
995             }
996         }
997         .bulk-action-checkbox {
998             margin-right: -3px;
999         }
1000         .category-listing > ul > .listitem:first-child {
1001             position: relative;
1002         }
1003         .category-bulk-actions {
1004             margin: 0 0.5em 0.5em;
1005             position: relative;
1006         }
1007     }
1009     .detail-pair {
1010         border-bottom: 1px solid @tableBorder;
1011         margin: 0 1rem;
1012         > * {
1013             display: inline-block;
1014             line-height: 2.2rem;
1015         }
1016         .pair-key {
1017             font-weight: bold;
1018             vertical-align: top;
1019             span {
1020                 margin-right: 1rem;
1021                 display: block;
1022             }
1023         }
1024         .pair-value select {
1025             max-width: 100%;
1026         }
1027     }
1029     .bulk-actions .detail-pair {
1030         > * {
1031             display: block;
1032             width: 100%;
1033         }
1034     }
1036     .listing-pagination {
1037         text-align: center;
1038         .yui3-button {
1039             background-color: @btnBackground;
1040             border: 0;
1041             margin: 0.4rem 0.2rem 0.45rem;
1042             font-size: 10.4px;
1043             &.active-page {
1044                 background-color: @btnBackgroundHighlight;
1045             }
1046         }
1047     }
1048     .listing-pagination-totals {
1049         text-align: center;
1050         &.dimmed {
1051             .muted;
1052             margin: 0.4rem 1rem 0.45rem;
1053         }
1054     }
1055     .select-a-category .notifymessage,
1056     .select-a-category .alert {
1057         margin: 1em;
1058     }
1061 #page-course-management .coursesearchbox input[type="text"] + input[type="submit"] {
1062     margin-bottom: 0;
1065 #page-course-management #course-category-listings .detail-pair .pair-value select {
1066     max-width: 80%;
1069 #course-category-listings #course-listing .listitem .drag-handle {
1070     display: none;
1072 .jsenabled #course-category-listings #course-listing .listitem .drag-handle {
1073     display: inline-block;
1074     margin: 0 6px 0 0;
1075     cursor: pointer;
1078 /** Management header styling **/
1079 .coursecat-management-header {
1080     vertical-align: middle;
1081     h2 {
1082         display: inline-block;
1083         text-align: left;
1084     }
1085     > div {
1086         display: inline-block;
1087         float: right;
1088         line-height: 40px;
1089         > div {
1090             margin: 10px 0;
1091             display: inline-block;
1092         }
1093     }
1094     select {
1095         max-width: 300px;
1096         cursor: pointer;
1097         padding: 0.4em 0.5em 0.45em 1em;
1098         vertical-align: baseline;
1099         white-space: nowrap;
1100     }
1101     .view-mode-selector {
1102         .moodle-actionmenu {
1103             white-space: nowrap;
1104             display: inline-block;
1105         }
1106         .moodle-actionmenu[data-enhanced].show .menu a {
1107             padding-left: 1em;
1108         }
1109     }
1112 .course-being-dragged-proxy {
1113     border: 0;
1114     color: @linkColor;
1115     vertical-align: middle;
1116     padding: 0 0 0 4em;
1118 .course-being-dragged {
1119     .opacity(50);
1122 /**
1123  * Display sizes:
1124  * Large displays                   1200        +
1125  * Default displays                  980     1199
1126  * Tablets                           768      979
1127  * Small tablets and large phones    481      767
1128  * Phones                              0      480
1129  */
1130 @media (min-width: 1200px) and (max-width: 1600px) {
1131     #course-category-listings.columns-3 {
1132         background-color: @tableBackground;
1133         border: 0;
1135         #category-listing,
1136         #course-listing {
1137             width: 50%;
1138         }
1139         #category-listing > div,
1140         #course-listing > div,
1141         #course-detail > div {
1142             background-color: @tableBackground;
1143         }
1144         #course-detail {
1145             width: 100%;
1146             margin-top: 1em;
1147         }
1148     }
1152 @media (max-width: 1199px) {
1153     #course-category-listings.columns-2,
1154     #course-category-listings.columns-3 {
1155         background-color: @tableBackground;
1156         border: 0;
1157         #category-listing,
1158         #course-listing,
1159         #course-detail {
1160             width: 100%;
1161             margin: 0 0 1em;
1162         }
1163         #category-listing > div,
1164         #course-listing > div,
1165         #course-detail > div {
1166             background-color: @tableBackground;
1167         }
1168     }