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 .coursebox.remotehost > .info > .categoryname a {
 536     background-image:url([[pix:moodle|i/mnethost]]);
 537 }
 538 .coursebox .content .teachers,
 539 .coursebox .content .courseimage,
 540 .coursebox .content .coursefile {
 541     float:left;
 542     width:40%;
 543     clear:left;
 544 }
 545 .coursebox > .info > h3.coursename {
 546     margin: 5px;
 547 }
 548 .coursebox > .info > .coursename {
 549     margin: 5px;
 550     padding: 0;
 551 }
 552 .coursebox .content .teachers li {
 553     list-style-type:none;
 554     padding:0;
 555     margin:0;
 556 }
 557 .coursebox .enrolmenticons {
 558     padding:3px 0;
 559     float:right;
 560 }
 561 .coursebox .moreinfo {
 562     padding:3px 0;
 563     float:right;
 564 }
 565 .coursebox .enrolmenticons img,
 566 .coursebox .moreinfo img {
 567     margin:0 .2em;
 568 }
 569 .coursebox .content {
 570     clear:both;
 571 }
 572 .coursebox .content .summary,
 573 .coursebox .content .coursecat {
 574     float:right;
 575     width: 55%;
 576 }
 577 .coursebox .content .coursecat {
 578     text-align:right;
 579     clear:right;
 580 }
 581 .coursebox.remotecoursebox .remotecourseinfo {
 582     float:left;
 583     width: 40%;
 584 }
 585 .coursebox .content .courseimage img {
 586     max-width:100px;
 587     max-height:100px;
 588 }
 589 .coursebox .content .coursecat,
 590 .coursebox .content .summary,
 591 .coursebox .content .courseimage,
 592 .coursebox .content .coursefile,
 593 .coursebox .content .teachers,
 594 .coursebox.remotecoursebox .remotecourseinfo {
 595     margin:3px 5px;
 596     padding:0;
 597 }
 598
 599 .dir-rtl .coursebox > .info > .categoryname a {
 600     padding-left:0;
 601     padding-right:21px;
 602     background-position: center right;
 603 }
 604 .dir-rtl .coursebox > .info > .categoryname,
 605 .dir-rtl .coursebox .teachers,
 606 .dir-rtl .coursebox .content .courseimage,
 607 .dir-rtl .coursebox .content .coursefile {
 608     float:right;
 609     clear:right;
 610 }
 611 .dir-rtl .coursebox .enrolmenticons,
 612 .dir-rtl .coursebox .moreinfo {
 613     float:left;
 614 }
 615 .dir-rtl .coursebox .summary,
 616 .dir-rtl .coursebox .coursecat {
 617     float:left;
 618 }
 619 .dir-rtl .coursebox .coursecat {
 620     text-align:left;
 621     clear:left;
 622 }
 623
 624 .coursebox.collapsed {
 625     margin-bottom:0;
 626 }
 627 .coursebox.collapsed > .content {
 628     display:none;
 629 }
 630 .courses .coursebox.collapsed {
 631     border:1px solid #eeeeee;
 632     padding:5px;
 633 }
 634
 635 .courses .coursebox.even {
 636     background-color:#f6f6f6;
 637 }
 638 .courses .coursebox:hover,
 639 .course_category_tree .courses > .paging.paging-morelink:hover {
 640     background-color:#eeeeee;
 641 }
 642
 643 .course_category_tree .category .numberofcourse {
 644     font-size: @fontSizeSmall;
 645 }
 646
 647 .course_category_tree .controls {
 648     visibility: hidden;
 649 }
 650 .course_category_tree .controls div {
 651     display:inline;
 652     cursor:pointer;
 653 }
 654 .jsenabled .course_category_tree .controls {
 655     visibility: visible;
 656 }
 657 .course_category_tree .controls {
 658     margin-bottom:5px;
 659     text-align:right;
 660     float:right;
 661 }
 662 .course_category_tree .controls div {
 663     padding-right:2em;
 664     font-size:75%;
 665 }
 666
 667 .course_category_tree .category > .info > .categoryname{
 668     background-image:url([[pix:moodle|t/collapsed_empty]]);
 669     background-repeat: no-repeat;
 670     padding:2px 18px;
 671     margin:3px;
 672     background-position:center left;
 673 }
 674 .dir-rtl .course_category_tree .category > .info > .categoryname {
 675     background-image:url([[pix:moodle|t/collapsed_empty_rtl]]);
 676     background-position:center right;
 677 }
 678 .course_category_tree .category.with_children > .info > .categoryname {
 679     background-image:url([[pix:moodle|t/expanded]]);
 680     cursor: pointer;
 681 }
 682 .course_category_tree .category.with_children.collapsed >.info > .categoryname {
 683     background-image:url([[pix:moodle|t/collapsed]]);
 684 }
 685 .dir-rtl .course_category_tree .category.with_children.collapsed > .info > .categoryname {
 686     background-image:url([[pix:moodle|t/collapsed_rtl]]);
 687 }
 688 .course_category_tree .category.collapsed>.content {
 689     display:none;
 690 }
 691
 692 .course_category_tree .category >.info {
 693     .well;
 694     min-height:0;
 695     padding:0;
 696     margin:3px 0;
 697     margin-bottom:3px;
 698     clear: both;
 699 }
 700 .course_category_tree.frontpage-category-names .category >.info {
 701     background:none;
 702     border:none;
 703     margin:0;
 704 }
 705 .course_category_tree .category > .content {
 706     padding-left:16px;
 707 }
 708
 709 .dir-rtl .course_category_tree .category > .content {
 710     padding-left:0;
 711     padding-right:16px;
 712 }
 713
 714 .course_category_tree .subcategories > .paging,
 715 .courses > .paging {
 716     margin:0;
 717     padding:5px;
 718     text-align:center;
 719 }
 720
 721 .courses > .paging.paging-morelink,
 722 .course_category_tree .subcategories > .paging.paging-morelink {
 723     text-align:left;
 724 }
 725
 726 .course_category_tree .paging.paging-morelink a {
 727     font-size: @fontSizeSmall;
 728 }
 729 .dir-rtl .courses > .paging.paging-morelink,
 730 .dir-rtl .course_category_tree .paging.paging-morelink {
 731     text-align:right;
 732 }
 733
 734 #page-course-index-category .generalbox.info {
 735     margin-bottom: 15px;
 736     border: 1px dotted #ddd;
 737     .border-radius(4px);
 738     padding: 5px;
 739 }
 740
 741 #page-course-index-category .categorypicker {
 742     text-align: center;
 743     margin: 10px 0 20px;
 744 }
 745
 746 .section {
 747     .summary,
 748     .activity {
 749         .iconsmall {
 750             width: 16px;
 751             height: 16px;
 752         }
 753     }
 754     .editing_title {
 755         .iconsmall {
 756             width: 12px;
 757             height: 12px;
 758             margin: 8px 8px 0px 0;
 759             padding: 4px 8px 0px 0;
 760             vertical-align: text-bottom;
 761         }
 762     }
 763     .moodle-actionmenu {
 764         .iconsmall {
 765             max-width: none !important; /** reset sets 100% !important which breaks on IE8 without this !important */
 766             width:16px;
 767             height:16px;
 768             padding: 4px;
 769             vertical-align: text-bottom;
 770         }
 771     }
 772     .moodle-actionmenu[data-enhanced] {
 773         .menu {
 774             img {
 775               width: 12px;
 776               height: 12px;
 777             }
 778         }
 779     }
 780 }
 781
 782 .dir-rtl .section {
 783     .editing_title {
 784         .iconsmall {
 785             margin: 8px 0 0 8px;
 786             padding: 4px 0 0 8px;
 787         }
 788     }
 789 }
 790
 791 /**
 792  * Course management page
 793  * Palette
 794  *
 795  * Background (reg)         #F5F5F5
 796  * Background (light        #fafafa
 797  * Background (highlight)   #ddffaa
 798  * Borders                  #e1e1e8
 799  */
 800 #course-category-listings {
 801     background-color:#fff;
 802     margin-bottom:200px;
 803
 804     /** Two column layout */
 805     &.columns-2 {
 806         > #course-listing > div {
 807             position:relative;
 808             left:-1px;
 809         }
 810     }
 811     /** Three column layout */
 812     &.columns-3 > #course-listing > div {
 813         height:100%;
 814     }
 815
 816     > div > div {
 817         min-height:300px;
 818         border:1px solid #e1e1e8;
 819         > ul.ml > li:first-child > div {
 820             border-top:0;
 821         }
 822     }
 823     h3 {
 824         margin:0;
 825         padding:0.4rem 0.6rem 0.3rem;
 826         background-color:#F5F5F5;
 827         border-bottom:1px solid #e1e1e8;
 828     }
 829     h4 {
 830         margin:1rem 0 0;
 831         padding:0.6rem 1rem 0.5rem;
 832     }
 833     .moodle-actionmenu {
 834         white-space:nowrap;
 835     }
 836
 837     .moodle-actionmenu[data-enhance] {
 838         .toggle-display {
 839             img {
 840                 width: auto;
 841             }
 842             &.textmenu {
 843                 padding-right: 4px;
 844
 845                 .caret {
 846                     margin-top: 12px;
 847                 }
 848             }
 849         }
 850     }
 851
 852     .listing-actions {
 853         text-align:center;
 854         padding:0.4rem 0.3rem 0.3rem;
 855         line-height:2.2em;
 856         > .moodle-actionmenu {
 857             display:inline-block;
 858             .menu a {
 859                 padding-left:1rem;
 860             }
 861         }
 862         .moodle-actionmenu:not([data-enhanced]) {
 863             li {line-height:normal;}
 864             > .menubar a {
 865                 color:inherit;
 866                 display:inline-block;
 867                 > img {
 868                     display:none;
 869                 }
 870                 .caret {
 871                     display: none;
 872                 }
 873             }
 874             > .menu .menu-action-text {
 875                 display:inline-block;
 876             }
 877         }
 878     }
 879     ul.ml {
 880         list-style: none;
 881         margin:1rem 0;
 882         ul.ml {
 883             margin:0;
 884         }
 885     }
 886     li {
 887         line-height:2.2em;
 888         > div {
 889             &:hover {
 890                 background-color:#fafafa;
 891             }
 892         }
 893         .tree-icon {
 894             margin: 2px 6px 0 0;
 895             width:12px;
 896             vertical-align:inherit;
 897         }
 898         &[data-selected='1'] {
 899             > div {
 900                 background-color:#FFFFD8;
 901                 border-top-color: #e1e1e8;
 902                 border-bottom-color:#F5F5F5;
 903             }
 904             li:first-of-type > div,
 905             &[data-expandable='0']+li > div {
 906                 border-top-color:#e1e1e8;
 907             }
 908             &:last-of-type > div {
 909                 border-bottom-color:#e1e1e8;
 910             }
 911         }
 912
 913         // Tree item indenting to represent depth.
 914         .tree-icon {margin-left:0;}
 915         li .tree-icon {margin-left:1em;}
 916         li li .tree-icon {margin-left:2em;}
 917         li li li .tree-icon {margin-left:3em;}
 918         li li li li .tree-icon {margin-left:4em;}
 919         li li li li li .tree-icon {margin-left:4.5em;}
 920         li li li li li li .tree-icon {margin-left:5em;}
 921         li li li li li li li .tree-icon {margin-left:5.5em;}
 922
 923         &+li > div,
 924         &:first-child > div {
 925             border-top-color:#F5F5F5;
 926         }
 927     }
 928
 929     .item-actions {
 930         margin-right:1em;
 931         display:inline-block;
 932         display:initial;
 933         img {
 934             margin: 0 4px;
 935             height:12px;
 936             padding: 0;
 937             vertical-align: inherit;
 938         }
 939         &.show .menu {
 940             a {
 941                 padding:4px 1em 4px 4px;
 942             }
 943             img {
 944                 width: 12px;
 945                 max-width:none;
 946             }
 947         }
 948         .menu-action-text {
 949             vertical-align: inherit;
 950         }
 951     }
 952
 953     .listitem {
 954         > div {
 955             > .float-left {
 956                 float:left;
 957             }
 958             > .float-right {
 959                 float:right;
 960                 text-align:right;
 961             }
 962             .item-actions {
 963                 .action-show {
 964                     display:none;
 965                 }
 966                 .action-hide {
 967                     display:inline;
 968                 }
 969             }
 970             .without-actions {
 971                 color: #333;
 972             }
 973             .idnumber {
 974                 color:#a1a1a8;
 975                 margin-right:2em;
 976             }
 977         }
 978         // The category or course is hidden.
 979         &[data-visible="0"] {
 980             .muted;
 981             > div {
 982                 > a {
 983                     .muted;
 984                 }
 985                 .item-actions {
 986                     .action-show {
 987                         display:inline;
 988                     }
 989                     .action-hide {
 990                         display:none;
 991                     }
 992                 }
 993             }
 994         }
 995         &.highlight {
 996             background-color:transparent;
 997             > div,
 998             > div:hover,
 999             &[data-selected='1'] > div {
1000                 background-color:#ddffaa;
1001             }
1002         }
1003     }
1004
1005     #course-listing {
1006         .listitem {
1007             .categoryname {
1008                 display:inline-block;
1009                 margin-left:1em;
1010                 color:#a1a1a8;
1011             }
1012             .coursename {
1013                 display:inline-block;
1014             }
1015             > div {
1016                 padding-left:1rem;
1017             }
1018         }
1019         > .firstpage .listitem:first-child > div .item-actions .action-moveup,
1020         > .lastpage .listitem:last-child > div .item-actions .action-movedown {
1021           display: none;
1022         }
1023         .bulk-action-checkbox {
1024             margin:-2px 6px 0 0;
1025         }
1026     }
1027     #category-listing {
1028         .listitem.collapsed > ul.ml {
1029             display: none;
1030         }
1031         .listitem {
1032             > div {
1033                 > .ba-checkbox {
1034                     width:2.2em;
1035                     text-align:center;
1036                     margin:-1px 0.5em 0 0;
1037                     padding-top:2px;
1038                 }
1039             }
1040             &.highlight > div > .ba-checkbox {
1041                 background-color:#ddffaa;
1042             }
1043             &[data-selected='1'] > div > .ba-checkbox {
1044                 margin:0 0.5em 0 0;
1045                 padding:0;
1046                 background-color: inherit;
1047             }
1048             &:first-child > div .item-actions .action-moveup,
1049             &:last-child > div .item-actions .action-movedown {
1050               display: none;
1051             }
1052         }
1053         .course-count {
1054             color:#a1a1a8;
1055             margin-right:2rem;
1056             min-width:3.5em;
1057             display:inline-block;
1058             .smallicon {
1059                 width:12px;
1060                 margin-left:4px;
1061                 vertical-align: inherit;
1062             }
1063         }
1064         .bulk-action-checkbox {
1065             margin-right: -3px;
1066         }
1067         .category-listing > ul > .listitem:first-child {
1068             position:relative;
1069         }
1070         .category-bulk-actions {
1071             margin: 0 0.5em 0.5em;
1072             position:relative;
1073         }
1074     }
1075
1076     .detail-pair {
1077         border-bottom:1px solid #e1e1e8;
1078         margin:0 1rem;
1079         > * {
1080             display:inline-block;
1081             line-height:2.2rem;
1082         }
1083         .pair-key {
1084             font-weight:bold;
1085             vertical-align: top;
1086             span {
1087                 margin-right: 1rem;
1088                 display:block;
1089             }
1090         }
1091         .pair-value select {
1092             max-width:100%;
1093         }
1094     }
1095
1096     .bulk-actions .detail-pair {
1097         > * {
1098             display:block;
1099             width:100%;
1100         }
1101     }
1102
1103     .listing-pagination {
1104         text-align:center;
1105         .yui3-button {
1106             background-color:#FFF;
1107             border:0;
1108             margin:0.4rem 0.2rem 0.45rem;
1109             font-size:10.4px;
1110             &.active-page {
1111                 background-color:#E5EFFD;
1112             }
1113         }
1114     }
1115     .listing-pagination-totals {
1116         text-align:center;
1117         &.dimmed {
1118             .muted;
1119             margin:0.4rem 1rem 0.45rem;
1120         }
1121     }
1122     .select-a-category .notifymessage,
1123     .select-a-category .alert {
1124         margin: 1em;
1125     }
1126 }
1127
1128 #course-category-listings #course-listing .listitem .drag-handle {
1129     display: none;
1130 }
1131 .jsenabled #course-category-listings #course-listing .listitem .drag-handle {
1132     display:inline-block;
1133     margin: 0 6px 0 0;
1134     cursor:pointer;
1135 }
1136
1137 .dir-rtl #course-category-listings {
1138     #category-listing,
1139     #course-listing {
1140         float: right;
1141         margin-left: 0;
1142     }
1143
1144     .listitem {
1145         > div {
1146             > .float-left {
1147                 float:right;
1148             }
1149             > .float-right {
1150                 float:left;
1151                 text-align:left;
1152             }
1153         }
1154     }
1155     li {
1156         .tree-icon {
1157             margin: 2px 0 0 6px;
1158         }
1159
1160         // Tree item indenting to represent depth.
1161         .tree-icon {margin-right:0;}
1162         li .tree-icon {margin-right:1em;}
1163         li li .tree-icon {margin-right:2em;}
1164         li li li .tree-icon {margin-right:3em;}
1165         li li li li .tree-icon {margin-right:4em;}
1166         li li li li li .tree-icon {margin-right:4.5em;}
1167         li li li li li li .tree-icon {margin-right:5em;}
1168         li li li li li li li .tree-icon {margin-right:5.5em;}
1169     }
1170     #category-listing {
1171         .listitem {
1172             > div {
1173                 margin-right:0.5em;
1174                 margin-left: 0;
1175                 > .ba-checkbox {
1176                   margin:-1px 0 0 0.5em;
1177                 }
1178             }
1179
1180             &[data-selected='1'] > div > .ba-checkbox {
1181                 margin:0 0 0 0.5em;
1182             }
1183         }
1184         .course-count {
1185             margin-left:2rem;
1186         }
1187         .bulk-action-checkbox {
1188             margin-left: -3px;
1189             margin-right: 0;
1190         }
1191     }
1192     #course-listing {
1193         padding-right: 24px;
1194         .listitem {
1195             .idnumber {
1196                 color:#a1a1a8;
1197                 padding-right:2em;
1198             }
1199             .categoryname {
1200                 display:inline-block;
1201                 margin-right:1em;
1202                 margin-left:0;
1203             }
1204             .drag-handle {
1205                 margin: 0 6px 0 6px;
1206             }
1207             > div {
1208                 padding-left:1rem;
1209             }
1210         }
1211         .bulk-action-checkbox {
1212             vertical-align:middle;
1213             margin:-2px 0 0 6px;
1214         }
1215     }
1216   .detail-pair {
1217         > * {
1218             float: right;
1219             margin-right: 0;
1220         }
1221         .pair-key {
1222             span {
1223                 margin-right:0;
1224                 margin-left: 0;
1225             }
1226         }
1227         .pair-value {
1228             margin-right: 0.5em;
1229         }
1230     }
1231 }
1232
1233 /** Management header styling **/
1234 .coursecat-management-header {
1235     vertical-align:middle;
1236     h2 {
1237         display:inline-block;
1238         text-align:left;
1239     }
1240     > div {
1241         display:inline-block;
1242         float:right;
1243         line-height:40px;
1244         > div {
1245           margin-left:1em;
1246           margin: 10px 0;
1247           display:inline-block;
1248         }
1249     }
1250     select {
1251         max-width: 300px;
1252         cursor: pointer;
1253         padding: 0.4em 0.5em 0.45em 1em;
1254         vertical-align: baseline;
1255         white-space: nowrap;
1256     }
1257     .view-mode-selector {
1258         .moodle-actionmenu {
1259             white-space:nowrap;
1260             display:inline-block;
1261         }
1262         .moodle-actionmenu[data-enhanced].show .menu a {
1263             padding-left:1em;
1264         }
1265     }
1266 }
1267 .dir-rtl .coursecat-management-header {
1268     h2 {
1269         text-align:right;
1270     }
1271     > div {
1272         float:left;
1273         margin-right:1em;
1274         margin-left: 0;
1275     }
1276 }
1277 .course-being-dragged-proxy {
1278     border: 0;
1279     color: @linkColor;
1280     vertical-align:middle;
1281     padding: 0 0 0 4em;
1282 }
1283 .course-being-dragged {
1284     .opacity(50);
1285 }
1286
1287 /**
1288  * Display sizes:
1289  * Large displays                   1200        +
1290  * Default displays                  980     1199
1291  * Tablets                           768      979
1292  * Small tablets and large phones    481      767
1293  * Phones                              0      480
1294  */
1295 @media (min-width: 1200px) and (max-width: 1600px) {
1296     #course-category-listings.columns-3 {
1297         background-color:transparent;
1298         border:0;
1299
1300         #category-listing,
1301         #course-listing {
1302             width:50%;
1303         }
1304         #category-listing > div,
1305         #course-listing > div,
1306         #course-detail > div {
1307             border:1px solid #e1e1e8;
1308             background-color:#FFF;
1309         }
1310         #course-detail {
1311             width:100%;
1312             margin-top:1em;
1313         }
1314     }
1315
1316 }
1317
1318 @media (max-width: 1199px) {
1319     #course-category-listings.columns-2,
1320     #course-category-listings.columns-3 {
1321         background-color:transparent;
1322         border:0;
1323         #category-listing,
1324         #course-listing,
1325         #course-detail {
1326             width:100%;
1327             margin:0 0 1em;
1328         }
1329         #category-listing > div,
1330         #course-listing > div,
1331         #course-detail > div {
1332             border:1px solid #e1e1e8;
1333             background-color:#FFF;
1334         }
1335     }
1336 }