theme/bootstrapbase/less/moodle/course.less

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