[Summary view] [Print] [Text view]

   1  /* course.less */
   2  /* COURSE CONTENT */
   3  /* stylelint-disable unit-blacklist */
   4  .section_add_menus {
   5      text-align: right;
   6      clear: both;
   7  }
   8  .section-modchooser {
   9      clear: both;
  10  }
  11  .dir-rtl .section_add_menus {
  12      text-align: left;
  13      clear: both;
  14  }
  15  .section_add_menus .horizontal div,
  16  .section_add_menus .horizontal form {
  17      display: inline;
  18  }
  19  .section_add_menus optgroup {
  20      font-weight: normal;
  21      font-style: italic;
  22  }
  23  .section_add_menus .urlselect {
  24      margin-left: .4em;
  25  }
  26  .dir-rtl .section_add_menus .urlselect {
  27      margin-right: .4em;
  28      margin-left: 0;
  29  }
  30  .section_add_menus .urlselect select {
  31      margin-left: .2em;
  32  }
  33  .dir-rtl .section_add_menus .urlselect select {
  34      margin-right: .2em;
  35      margin-left: 0;
  36  }
  37  .section_add_menus .urlselect img.iconhelp {
  38      padding: 0;
  39      margin: 0;
  40      vertical-align: text-bottom;
  41  }
  42  
  43  .sitetopic ul.section {
  44      margin: 0;
  45  }
  46  .course-content ul.section {
  47      margin: 1em;
  48  }
  49  .section {
  50      .side {
  51          &.left {
  52              float: left;
  53          }
  54          &.right {
  55              float: right;
  56          }
  57      }
  58      .spinner {
  59          height: 16px;
  60          width: 16px;
  61      }
  62      .activity {
  63          .spinner {
  64              left: 100%;
  65              position: absolute;
  66              vertical-align: text-bottom;
  67          }
  68  
  69          .editing_move {
  70              /* Move the move icon to the start of the line */
  71              position: absolute;
  72              left: 0;
  73              top: 0;
  74          }
  75  
  76          .mod-indent-outer {
  77              /**
  78               * Add appropriate padding such that nothing overlaps the
  79               * absolute positioned move icon.
  80               */
  81              padding-left: 32px;
  82          }
  83  
  84          /* The command block for each activity */
  85          .actions {
  86              position: absolute;
  87              right: 0;
  88              top: 0;
  89          }
  90  
  91          .contentwithoutlink,
  92          .activityinstance {
  93  
  94              min-width: 40%;
  95              display: table-cell;
  96              padding-right: 4px;
  97              min-height: 2em;
  98  
  99              .dimmed {
 100                  img.activityicon {
 101                      opacity: 0.5;
 102                      filter: alpha(opacity=50);
 103                  }
 104              }
 105          }
 106      }
 107      .label {
 108          .contentwithoutlink,
 109          .activityinstance {
 110              padding-right: 32px;
 111              display: block;
 112              height: inherit;
 113          }
 114  
 115          .mod-indent-outer {
 116              padding-left: 24px;
 117              display: block;
 118          }
 119      }
 120  
 121      .filler {
 122          width: 16px;
 123          height: 16px;
 124          padding: 0.3em;
 125          display: inline-block;
 126      }
 127  
 128      .activity.editor_displayed {
 129          a.editing_title,
 130          .moodle-actionmenu {
 131              display: none;
 132          }
 133          div.activityinstance {
 134              padding-right: initial;
 135  
 136              input {
 137                  margin-bottom: initial;
 138                  padding-top: initial;
 139                  padding-bottom: initial;
 140                  vertical-align: text-bottom;
 141              }
 142          }
 143      }
 144  }
 145  
 146  .dir-rtl .section {
 147      .side {
 148          &.left {
 149              float: right;
 150          }
 151          &.right {
 152              float: left;
 153          }
 154      }
 155      .activity {
 156          .spinner {
 157              left: auto;
 158              right: 100%;
 159          }
 160  
 161          .mod-indent-outer {
 162              /**
 163               * Add appropriate padding such that nothing overlaps the
 164               * absolute positioned move icon.
 165               */
 166              padding-left: initial;
 167              padding-right: 32px;
 168          }
 169  
 170          /* The command block for each activity */
 171          .actions {
 172              left: 0;
 173              right: auto;
 174          }
 175  
 176          .contentwithoutlink,
 177          .activityinstance {
 178              padding-left: 4px;
 179              padding-right: initial;
 180          }
 181      }
 182  }
 183  
 184  .dir-rtl .section {
 185      .activity {
 186          .editing_move {
 187              /* Move the move icon to the start of the line */
 188              left: auto;
 189              right: 0;
 190          }
 191  
 192          &.editor_displayed {
 193              div.activityinstance {
 194                  padding-left: initial;
 195              }
 196          }
 197      }
 198  }
 199  
 200  .activity img.activityicon {
 201      margin-right: 6px;
 202      vertical-align: text-bottom;
 203  }
 204  .dir-rtl .section .activity img.activityicon {
 205      margin-left: 6px;
 206      margin-right: 0;
 207  }
 208  .section .activity .activityinstance,
 209  .section .activity .activityinstance div {
 210      display: inline-block;
 211  }
 212  .editing {
 213      .section {
 214          .activity {
 215              .contentwithoutlink,
 216              .activityinstance {
 217                  padding-right: 200px;
 218              }
 219          }
 220      }
 221  }
 222  
 223  .dir-rtl.editing {
 224      .section {
 225          .activity {
 226              .contentwithoutlink,
 227              .activityinstance {
 228                  padding-left: 200px;
 229                  padding-right: 0;
 230              }
 231          }
 232      }
 233  }
 234  
 235  .editing_show + .editing_assign,
 236  .editing_hide + .editing_assign {
 237      // if roles icon missing, add space
 238      margin-left: 20px;
 239  }
 240  .section .activity .commands {
 241      white-space: nowrap;
 242      display: inline;
 243  }
 244  .section .activity.modtype_label.label {
 245      font-weight: normal;
 246      padding: .2em;
 247  }
 248  .section li.activity {
 249      padding: .2em;
 250      clear: both;
 251  }
 252  .section .activity .activityinstance .groupinglabel {
 253      padding-left: 30px;
 254  }
 255  .dir-rtl .section .activity .activityinstance .groupinglabel {
 256      padding-right: 30px;
 257  }
 258  .section .activity .availabilityinfo,
 259  .section .activity .contentafterlink {
 260      margin-top: 0.5em;
 261      margin-left: 30px;
 262  }
 263  .dir-rtl .section .activity .availabilityinfo,
 264  .dir-rtl .section .activity .contentafterlink {
 265      margin-left: 0;
 266      margin-right: 30px;
 267  }
 268  .section .activity .contentafterlink p {
 269      margin: .5em 0;
 270  }
 271  .editing .section .activity:hover,
 272  .editing .section .activity.action-menu-shown {
 273      background-color: @grayLighter;
 274  }
 275  .course-content .current {
 276      background-color: @infoBackground;
 277  }
 278  .course-content .section-summary {
 279      border: 1px solid @tableBorder;
 280      margin-top: 5px;
 281      list-style: none;
 282  }
 283  .course-content .section-summary .section-title {
 284      margin: 2px 5px 10px 5px;
 285  }
 286  .course-content .section-summary .summarytext {
 287      margin: 2px 5px 2px 5px;
 288  }
 289  .course-content .section-summary .section-summary-activities .activity-count {
 290      .muted;
 291      font-size: @fontSizeSmall;
 292      margin: 3px;
 293      white-space: nowrap;
 294      display: inline-block;
 295  }
 296  .course-content .section-summary .summary {
 297      margin-top: 5px;
 298  }
 299  .course-content .single-section {
 300      margin-top: 1em;
 301  }
 302  .course-content .single-section .section-navigation {
 303      display: block;
 304      padding: 0.5em;
 305      margin-bottom: -0.5em;
 306  }
 307  .course-content .single-section .section-navigation .title {
 308      font-weight: bold;
 309      font-size: 108%;
 310      clear: both;
 311  }
 312  .course-content .single-section .section-navigation .mdl-left {
 313      font-weight: normal;
 314      float: left;
 315      margin-right: 1em;
 316  }
 317  .dir-rtl .course-content .single-section .section-navigation .mdl-left {
 318      float: right;
 319  }
 320  .course-content .single-section .section-navigation .mdl-left .larrow {
 321      margin-right: 0.1em;
 322  }
 323  .course-content .single-section .section-navigation .mdl-right {
 324      font-weight: normal;
 325      float: right;
 326      margin-left: 1em;
 327  }
 328  .dir-rtl .course-content .single-section .section-navigation .mdl-right {
 329      float: left;
 330  }
 331  .course-content .single-section .section-navigation .mdl-right .rarrow {
 332      margin-left: 0.1em;
 333  }
 334  .course-content .single-section .section-navigation .mdl-bottom {
 335      margin-top: 0;
 336  }
 337  .course-content ul li.section.main {
 338      border-bottom: 2px solid @tableBorder;
 339      margin-top: 0;
 340  }
 341  .course-content ul li.section.hidden {
 342      .sectionname > span,
 343      .content > div,
 344      /* All the divs but the activities which are in a UL. */
 345      .activity .activityinstance {
 346          opacity: .5;
 347      }
 348      .sectionname > span,
 349      .activity .activityinstance {
 350          margin-left: 10px;
 351          margin-right: 10px;
 352      }
 353  }
 354  .course-content ul.topics li.section .content,
 355  .course-content ul.weeks li.section .content {
 356      margin-right: 20px;
 357      margin-left: 20px;
 358      padding: 0;
 359  }
 360  
 361  .course-content {
 362      margin-top: 0;
 363  }
 364  
 365  .course-content ul.topics li.section {
 366      padding-bottom: 20px;
 367  }
 368  
 369  .course-content ul.topics li.section .summary {
 370      margin-left: 25px;
 371  }
 372  
 373  .course-content li {
 374      &.section {
 375          ul {
 376              list-style: disc;
 377              ul {
 378                  list-style: circle;
 379                  ul {
 380                      list-style: square;
 381                  }
 382              }
 383          }
 384          li {
 385              &.activity {
 386                  ul {
 387                      list-style: disc;
 388                      ul {
 389                          list-style: circle;
 390                          ul {
 391                              list-style: square;
 392                          }
 393                      }
 394                  }
 395              }
 396          }
 397      }
 398  }
 399  
 400  .path-course-view .completionprogress {
 401      margin-left: 25px;
 402  }
 403  
 404  .path-course-view .completionprogress {
 405      display: block;
 406      float: right;
 407      height: 20px;
 408      position: relative;
 409  }
 410  
 411  #page-site-index .subscribelink {
 412      text-align: right;
 413  }
 414  #site-news-forum h2,
 415  #frontpage-course-list h2,
 416  #frontpage-category-names h2,
 417  #frontpage-category-combo h2 {
 418      margin-bottom: 9px;
 419  }
 420  .path-course-view a.reduce-sections {
 421      padding-left: 0.2em;
 422  }
 423  .path-course-view .subscribelink {
 424      text-align: right;
 425  }
 426  .path-course-view .unread {
 427      margin-left: 30px;
 428  }
 429  .dir-rtl.path-course-view .unread {
 430      margin-right: 30px;
 431  }
 432  .path-course-view .block.drag .header {
 433      cursor: move;
 434  }
 435  .path-course-view .completionprogress {
 436      text-align: right;
 437  }
 438  .dir-rtl.path-course-view .completionprogress {
 439      text-align: left;
 440  }
 441  .path-course-view .single-section .completionprogress {
 442      margin-right: 5px;
 443  }
 444  .path-course-view .section .summary {
 445      line-height: normal;
 446  }
 447  
 448  .path-site li.activity > div,
 449  .path-course-view li.activity > div {
 450      position: relative;
 451      padding: 0 16px 0 0; /* to accommodate the floated completion icon with highlighting */
 452  }
 453  .dir-rtl.path-site li.activity > div,
 454  .dir-rtl.path-course-view li.activity > div {
 455      position: relative;
 456      padding: 0 0 0 16px;
 457  }
 458  .path-course-view li.activity span.autocompletion img {
 459      vertical-align: text-bottom;
 460  }
 461  .path-course-view li.activity form.togglecompletion img {
 462      max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
 463  }
 464  .path-course-view li.activity form.togglecompletion .ajaxworking {
 465      width: 16px;
 466      height: 16px;
 467      position: absolute;
 468      right: 22px;
 469      top: 3px;
 470      background: url([[pix:i/ajaxloader]]) no-repeat;
 471  }
 472  .dir-rtl.path-course-view .completionprogress {
 473      float: none;
 474  }
 475  .dir-rtl.path-course-view li.activity form.togglecompletion .ajaxworking {
 476      right: -22px;
 477  }
 478  
 479  li.section.hidden span.commands a.editing_hide,
 480  li.section.hidden span.commands a.editing_show {
 481      cursor: default;
 482  }
 483  ul.weeks h3.sectionname {
 484      white-space: nowrap;
 485  }
 486  .editing ul.weeks h3.sectionname {
 487      white-space: normal;
 488  }
 489  
 490  .single-section h3.sectionname {
 491      text-align: center;
 492      clear: both;
 493  }
 494  
 495  .section img.movetarget {
 496      height: 16px;
 497      width: 80px;
 498  }
 499  
 500  input.titleeditor {
 501      width: 330px;
 502      vertical-align: text-bottom;
 503  }
 504  
 505  span.editinstructions {
 506      position: absolute;
 507      top: 0;
 508      margin-top: -22px;
 509      margin-left: 30px;
 510      line-height: 16px;
 511      font-size: @fontSizeSmall;
 512      padding: .1em .4em;
 513      background-color: @infoBackground;
 514      color: @infoText;
 515      text-decoration: none;
 516      z-index: 9999;
 517      .box-shadow(2px 2px 5px 1px #ccc);
 518      border: 1px solid @infoBorder;
 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 {
 950                  line-height: normal;
 951              }
 952              > .menubar a {
 953                  color: inherit;
 954                  display: inline-block;
 955                  > img {
 956                      display: none;
 957                  }
 958                  .caret {
 959                      display: none;
 960                  }
 961              }
 962              > .menu .menu-action-text {
 963                  display: inline-block;
 964              }
 965          }
 966      }
 967      ul.ml {
 968          list-style: none;
 969          margin: 1rem 0;
 970          ul.ml {
 971              margin: 0;
 972          }
 973      }
 974      li {
 975          line-height: 2.2em;
 976          > div {
 977              &:hover {
 978                  background-color: @tableBackgroundHover;
 979              }
 980          }
 981          .tree-icon {
 982              margin: 2px 6px 0 0;
 983              width: 12px;
 984              vertical-align: inherit;
 985          }
 986          &[data-selected='1'] {
 987              > div {
 988                  background-color: @tableBackgroundAccent;
 989              }
 990              > div:hover {
 991                  background-color: @tableBackgroundHover;
 992              }
 993          }
 994  
 995          // Tree item indenting to represent depth.
 996          .tree-icon {
 997              margin-left: 0;
 998          }
 999  
1000          li .tree-icon {
1001              margin-left: 1em;
1002          }
1003  
1004          li li .tree-icon {
1005              margin-left: 2em;
1006          }
1007  
1008          li li li .tree-icon {
1009              margin-left: 3em;
1010          }
1011  
1012          li li li li .tree-icon {
1013              margin-left: 4em;
1014          }
1015  
1016          li li li li li .tree-icon {
1017              margin-left: 4.5em;
1018          }
1019  
1020          li li li li li li .tree-icon {
1021              margin-left: 5em;
1022          }
1023  
1024          li li li li li li li .tree-icon {
1025              margin-left: 5.5em;
1026          }
1027      }
1028  
1029      .item-actions {
1030          margin-right: 1em;
1031          display: inline-block;
1032          display: initial;
1033          > a img,
1034          .menubar img {
1035              margin: 0 4px;
1036              height: 12px;
1037              padding: 0;
1038              vertical-align: inherit;
1039          }
1040          &.show .menu {
1041              li {
1042                  line-height: 20px;
1043              }
1044              img {
1045                  width: 12px;
1046                  max-width: none;
1047              }
1048          }
1049          .menu-action-text {
1050              vertical-align: inherit;
1051          }
1052      }
1053  
1054      .listitem {
1055          > div {
1056              > .float-left {
1057                  float: left;
1058              }
1059              > .float-right {
1060                  float: right;
1061                  text-align: right;
1062              }
1063              .item-actions {
1064                  .action-show {
1065                      display: none;
1066                  }
1067                  .action-hide {
1068                      display: inline;
1069                  }
1070              }
1071              .without-actions {
1072                  color: #333;
1073              }
1074              .idnumber {
1075                  color: #a1a1a8;
1076                  margin-right: 2em;
1077              }
1078          }
1079          // The category or course is hidden.
1080          &[data-visible="0"] {
1081              .muted;
1082              > div {
1083                  > a {
1084                      .muted;
1085                  }
1086                  .item-actions {
1087                      .action-show {
1088                          display: inline;
1089                      }
1090                      .action-hide {
1091                          display: none;
1092                      }
1093                  }
1094              }
1095          }
1096          &.highlight {
1097              background-color: @tableBackground;
1098              > div,
1099              > div:hover,
1100              &[data-selected='1'] > div {
1101                  background-color: @tableBackgroundHover;
1102              }
1103          }
1104      }
1105  
1106      #course-listing {
1107          .listitem {
1108              .categoryname {
1109                  display: inline-block;
1110                  margin-left: 1em;
1111                  color: #a1a1a8;
1112              }
1113              .coursename {
1114                  display: inline-block;
1115              }
1116              > div {
1117                  padding-left: 1rem;
1118              }
1119          }
1120          > .firstpage .listitem:first-child > div .item-actions .action-moveup,
1121          > .lastpage .listitem:last-child > div .item-actions .action-movedown {
1122              display: none;
1123          }
1124          .bulk-action-checkbox {
1125              margin: -2px 6px 0 0;
1126          }
1127      }
1128      #category-listing {
1129          .listitem.collapsed > ul.ml {
1130              display: none;
1131          }
1132          .listitem {
1133              > div {
1134                  > .ba-checkbox {
1135                      width: 2.2em;
1136                      text-align: center;
1137                      margin: -1px 0.5em 0 0;
1138                      padding-top: 2px;
1139                  }
1140              }
1141              &.highlight > div > .ba-checkbox {
1142                  background-color: @tableBackgroundHover;
1143              }
1144              &[data-selected='1'] > div > .ba-checkbox {
1145                  margin: 0 0.5em 0 0;
1146                  padding: 0;
1147                  background-color: inherit;
1148              }
1149              &:first-child > div .item-actions .action-moveup,
1150              &:last-child > div .item-actions .action-movedown {
1151                  display: none;
1152              }
1153          }
1154          .course-count {
1155              color: #a1a1a8;
1156              margin-right: 2rem;
1157              min-width: 3.5em;
1158              display: inline-block;
1159              .smallicon {
1160                  width: 12px;
1161                  margin-left: 4px;
1162                  vertical-align: inherit;
1163              }
1164          }
1165          .bulk-action-checkbox {
1166              margin-right: -3px;
1167          }
1168          .category-listing > ul > .listitem:first-child {
1169              position: relative;
1170          }
1171          .category-bulk-actions {
1172              margin: 0 0.5em 0.5em;
1173              position: relative;
1174          }
1175      }
1176  
1177      .detail-pair {
1178          border-bottom: 1px solid @tableBorder;
1179          margin: 0 1rem;
1180          > * {
1181              display: inline-block;
1182              line-height: 2.2rem;
1183          }
1184          .pair-key {
1185              font-weight: bold;
1186              vertical-align: top;
1187              span {
1188                  margin-right: 1rem;
1189                  display: block;
1190              }
1191          }
1192          .pair-value select {
1193              max-width: 100%;
1194          }
1195      }
1196  
1197      .bulk-actions .detail-pair {
1198          > * {
1199              display: block;
1200              width: 100%;
1201          }
1202      }
1203  
1204      .listing-pagination {
1205          text-align: center;
1206          .yui3-button {
1207              background-color: @btnBackground;
1208              border: 0;
1209              margin: 0.4rem 0.2rem 0.45rem;
1210              font-size: 10.4px;
1211              &.active-page {
1212                  background-color: @btnBackgroundHighlight;
1213              }
1214          }
1215      }
1216      .listing-pagination-totals {
1217          text-align: center;
1218          &.dimmed {
1219              .muted;
1220              margin: 0.4rem 1rem 0.45rem;
1221          }
1222      }
1223      .select-a-category .notifymessage,
1224      .select-a-category .alert {
1225          margin: 1em;
1226      }
1227  }
1228  
1229  #course-category-listings #course-listing .listitem .drag-handle {
1230      display: none;
1231  }
1232  .jsenabled #course-category-listings #course-listing .listitem .drag-handle {
1233      display: inline-block;
1234      margin: 0 6px 0 0;
1235      cursor: pointer;
1236  }
1237  
1238  .dir-rtl #course-category-listings {
1239      #category-listing,
1240      #course-listing {
1241          float: right;
1242          margin-left: 0;
1243      }
1244  
1245      .listitem {
1246          > div {
1247              > .float-left {
1248                  float: right;
1249              }
1250              > .float-right {
1251                  float: left;
1252                  text-align: left;
1253              }
1254          }
1255      }
1256      li {
1257          .tree-icon {
1258              margin: 2px 0 0 6px;
1259          }
1260  
1261          // Tree item indenting to represent depth.
1262          .tree-icon {
1263              margin-right: 0;
1264          }
1265  
1266          li .tree-icon {
1267              margin-right: 1em;
1268          }
1269  
1270          li li .tree-icon {
1271              margin-right: 2em;
1272          }
1273  
1274          li li li .tree-icon {
1275              margin-right: 3em;
1276          }
1277  
1278          li li li li .tree-icon {
1279              margin-right: 4em;
1280          }
1281  
1282          li li li li li .tree-icon {
1283              margin-right: 4.5em;
1284          }
1285  
1286          li li li li li li .tree-icon {
1287              margin-right: 5em;
1288          }
1289  
1290          li li li li li li li .tree-icon {
1291              margin-right: 5.5em;
1292          }
1293      }
1294      #category-listing {
1295          .listitem {
1296              > div {
1297                  margin-right: 0.5em;
1298                  margin-left: 0;
1299                  > .ba-checkbox {
1300                      margin: -1px 0 0 0.5em;
1301                  }
1302              }
1303  
1304              &[data-selected='1'] > div > .ba-checkbox {
1305                  margin: 0 0 0 0.5em;
1306              }
1307          }
1308          .course-count {
1309              margin-left: 2rem;
1310  
1311              .smallicon {
1312                  margin-left: 0px;
1313                  margin-right: 4px;
1314              }
1315          }
1316          .bulk-action-checkbox {
1317              margin-left: -3px;
1318              margin-right: 0;
1319          }
1320      }
1321      #course-listing {
1322          padding-right: 24px;
1323          .listitem {
1324              .idnumber {
1325                  color: #a1a1a8;
1326                  padding-right: 2em;
1327              }
1328              .categoryname {
1329                  display: inline-block;
1330                  margin-right: 1em;
1331                  margin-left: 0;
1332              }
1333              .drag-handle {
1334                  margin: 0 6px 0 6px;
1335              }
1336              > div {
1337                  padding-left: 1rem;
1338              }
1339          }
1340          .bulk-action-checkbox {
1341              vertical-align: middle;
1342              margin: -2px 0 0 6px;
1343          }
1344      }
1345      .detail-pair {
1346          > * {
1347              float: right;
1348              margin-right: 0;
1349          }
1350          .pair-key {
1351              span {
1352                  margin-right: 0;
1353                  margin-left: 0;
1354              }
1355          }
1356          .pair-value {
1357              margin-right: 0.5em;
1358          }
1359      }
1360  }
1361  
1362  /** Management header styling **/
1363  .coursecat-management-header {
1364      vertical-align: middle;
1365      h2 {
1366          display: inline-block;
1367          text-align: left;
1368      }
1369      > div {
1370          display: inline-block;
1371          float: right;
1372          line-height: 40px;
1373          > div {
1374              margin-left: 1em;
1375              margin: 10px 0;
1376              display: inline-block;
1377          }
1378      }
1379      select {
1380          max-width: 300px;
1381          cursor: pointer;
1382          padding: 0.4em 0.5em 0.45em 1em;
1383          vertical-align: baseline;
1384          white-space: nowrap;
1385      }
1386      .view-mode-selector {
1387          .moodle-actionmenu {
1388              white-space: nowrap;
1389              display: inline-block;
1390          }
1391          .moodle-actionmenu[data-enhanced].show .menu a {
1392              padding-left: 1em;
1393          }
1394      }
1395  }
1396  .dir-rtl .coursecat-management-header {
1397      h2 {
1398          text-align: right;
1399      }
1400      > div {
1401          float: left;
1402          margin-right: 1em;
1403          margin-left: 0;
1404      }
1405  }
1406  .course-being-dragged-proxy {
1407      border: 0;
1408      color: @linkColor;
1409      vertical-align: middle;
1410      padding: 0 0 0 4em;
1411  }
1412  .course-being-dragged {
1413      .opacity(50);
1414  }
1415  
1416  /**
1417   * Display sizes:
1418   * Large displays                   1200        +
1419   * Default displays                  980     1199
1420   * Tablets                           768      979
1421   * Small tablets and large phones    481      767
1422   * Phones                              0      480
1423   */
1424  @media (min-width: 1200px) and (max-width: 1600px) {
1425      #course-category-listings.columns-3 {
1426          background-color: @tableBackground;
1427          border: 0;
1428  
1429          #category-listing,
1430          #course-listing {
1431              width: 50%;
1432          }
1433          #category-listing > div,
1434          #course-listing > div,
1435          #course-detail > div {
1436              background-color: @tableBackground;
1437          }
1438          #course-detail {
1439              width: 100%;
1440              margin-top: 1em;
1441          }
1442      }
1443  
1444  }
1445  
1446  @media (max-width: 1199px) {
1447      #course-category-listings.columns-2,
1448      #course-category-listings.columns-3 {
1449          background-color: @tableBackground;
1450          border: 0;
1451          #category-listing,
1452          #course-listing,
1453          #course-detail {
1454              width: 100%;
1455              margin: 0 0 1em;
1456          }
1457          #category-listing > div,
1458          #course-listing > div,
1459          #course-detail > div {
1460              background-color: @tableBackground;
1461          }
1462      }
1463  }