theme/noname/scss/moodle/course.scss

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