theme/bootstrapbase/less/moodle/course.less

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