[Summary view] [Print] [Text view]

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