theme/boost/scss/moodle/course.scss

   1 /* course.less */
   2
   3 /* COURSE CONTENT */
   4
   5 .block_tree .tree_item.branch {
   6     margin-left: 8px;
   7 }
   8
   9 .section {
  10     .side {
  11         &.left {
  12             float: left;
  13         }
  14
  15         &.right {
  16             float: right;
  17             clear: right;
  18         }
  19         margin-top: 0.5rem;
  20     }
  21
  22     .spinner {
  23         height: 16px;
  24         width: 16px;
  25     }
  26
  27     .activity {
  28         .spinner {
  29             left: 100%;
  30             position: absolute;
  31         }
  32
  33         /* The command block for each activity */
  34         .actions {
  35             position: absolute;
  36             right: 0;
  37             top: 0;
  38             display: flex;
  39         }
  40
  41         .contentwithoutlink,
  42         .activityinstance {
  43             min-width: 40%;
  44
  45             > a {
  46                 display: inline-flex;
  47                 align-items: center;
  48             }
  49
  50             .dimmed {
  51                 .activityicon {
  52                     opacity: .5;
  53                 }
  54             }
  55         }
  56
  57         .stealth {
  58             color: $text-muted;
  59         }
  60         a.stealth,
  61         a.stealth:hover {
  62             color: lighten($link-color, 25%) !important; /* stylelint-disable-line declaration-no-important */
  63         }
  64
  65         &.indented {
  66             .activity-item {
  67                 margin-left: map-get($spacers, 3);
  68             }
  69         }
  70     }
  71
  72     .label {
  73         .contentwithoutlink,
  74         .activityinstance {
  75             padding-right: 32px;
  76             display: block;
  77             height: inherit;
  78         }
  79         @include media-breakpoint-up(sm) {
  80             .mod-indent-outer {
  81                 padding-left: 24px;
  82                 display: block;
  83             }
  84         }
  85     }
  86
  87     .filler {
  88         // This must be sized like an icon to fill the space.
  89         width: 16px;
  90         height: 16px;
  91         padding: 0;
  92         margin: 0 ($spacer * 0.5);
  93         display: inline-block;
  94     }
  95
  96     .activity.editor_displayed {
  97         a.editing_title,
  98         .moodle-actionmenu {
  99             display: none;
 100         }
 101
 102         div.activityinstance {
 103             padding-right: initial;
 104
 105             input {
 106                 margin-bottom: initial;
 107                 padding-top: initial;
 108                 padding-bottom: initial;
 109                 vertical-align: text-bottom;
 110             }
 111         }
 112     }
 113 }
 114
 115 .section .activity .activityinstance {
 116     display: inline-flex;
 117     align-items: center;
 118     margin-bottom: 1rem;
 119 }
 120
 121 .editing {
 122     .section {
 123         .activity {
 124             .contentwithoutlink,
 125             .activityinstance {
 126                 padding-right: 200px;
 127             }
 128             .mod-indent-outer {
 129                 /**
 130                  * Add appropriate padding such that nothing overlaps the
 131                  * absolute positioned move icon.
 132                  */
 133                 padding-left: 2rem;
 134             }
 135         }
 136     }
 137     // Remove old spinners if the reactive state is ready.
 138     .course-content .stateready .section .spinner {
 139         display: none;
 140     }
 141     // New editing in progress spinners.
 142     .editinprogress {
 143         position: relative;
 144
 145         & > * {
 146             opacity: .4;
 147         }
 148
 149         .corelightbox,
 150         .lightbox {
 151             display: none;
 152         }
 153
 154         &:after {
 155             @extend .fa-solid;
 156             position: absolute;
 157             font-size: 20px;
 158             color: $gray-600;
 159             content: fa-content($fa-var-spinner);
 160             display: flex;
 161             justify-content: center;
 162             align-items: center;
 163             width: 30px;
 164             height: 30px;
 165             left: calc(50% - 15px);
 166             top: calc(50% - 15px);
 167             animation: editinprogress-rotation 2s infinite linear;
 168         }
 169
 170         // Prevent inner editingprogress.
 171         .editinprogress {
 172             &:after {
 173                 display: none;
 174             }
 175         }
 176     }
 177 }
 178
 179 @keyframes editinprogress-rotation {
 180     0% {
 181         opacity: 0;
 182         transform: rotate(0deg);
 183     }
 184     50% {
 185         opacity: 1;
 186     }
 187     100% {
 188         opacity: 0;
 189         transform: rotate(359deg);
 190     }
 191 }
 192
 193 .editing_show + .editing_assign,
 194 .editing_hide + .editing_assign {
 195     // if roles icon missing, add space
 196     margin-left: 20px;
 197 }
 198
 199 .section .activity .commands {
 200     white-space: nowrap;
 201     display: inline-block;
 202 }
 203
 204 .section .activity.modtype_label.label {
 205     font-weight: normal;
 206
 207     // Remove min-height for labels so top and bottom paddings can be displayed more consistently.
 208     .contentwithoutlink {
 209         min-height: 0;
 210     }
 211
 212     // When activity information is shown remove the bottom margin for the last p/i elements.
 213     &.hasinfo {
 214         p:last-child,
 215         i:last-child {
 216             margin-bottom: 0;
 217         }
 218     }
 219 }
 220
 221 // The activity-wrapper class ensures these styles are not used when the new activity styles
 222 // from MDL-71691 are not affected. As soons as MDL-72656 is integrated and these styles
 223 // are removed the core_courseformat/local/content/cm template no longer needs this class.
 224 .section li.activity:not(.activity-wrapper) {
 225     padding: 0.2em;
 226     clear: both;
 227
 228     &.hasinfo {
 229         border-bottom: $border-width solid $table-border-color;
 230         padding-top: map-get($spacers, 3);
 231         padding-bottom: map-get($spacers, 3);
 232
 233         &:last-child {
 234             border-bottom: 0;
 235             padding-bottom: 0;
 236         }
 237     }
 238 }
 239
 240 // Compensate for the border widths when dropzones are displayed.
 241 .course-content .section.dropready {
 242
 243     &.main.drop-down {
 244         border-bottom: 1px solid $dropzone-border;
 245     }
 246
 247     .course-section-header.dropready.drop-zone {
 248         margin-top: -2px;
 249     }
 250
 251     li.activity.dropready.drop-down {
 252         border-bottom: 1px solid $dropzone-border;
 253         margin-bottom: -1px;
 254     }
 255
 256     li.activity.dropready.drop-up {
 257         border-top: 1px solid $dropzone-border;
 258         margin-top: -1px;
 259     }
 260 }
 261
 262 .section .activity .activityinstance .groupinglabel {
 263     padding-left: 30px;
 264 }
 265
 266 .section.main:not(.course-section) .activity .availabilityinfo,
 267 .section.main:not(.course-section) .activity .contentafterlink {
 268     margin-top: 0.5em;
 269     margin-left: 30px;
 270 }
 271
 272 .section .activity .contentafterlink p {
 273     margin: .5em 0;
 274 }
 275
 276 .editing .section.main:not(.course-section) {
 277     .activity:hover,
 278     .activity.action-menu-shown,
 279     .sectionname:hover {
 280         background-color: $table-accent-bg;
 281     }
 282 }
 283
 284 .course-content .current {
 285     position: relative;
 286 }
 287
 288 .course-content .current::before {
 289     border-left: $primary 3px solid;
 290     bottom: 0;
 291     content: "";
 292     left: -8px;
 293     position: absolute;
 294     top: 0;
 295 }
 296
 297 .course-content .single-section .section-navigation {
 298     display: block;
 299     padding: 0.5em;
 300     margin-bottom: -0.5em;
 301 }
 302
 303 .course-content .single-section .section-navigation .title {
 304     font-weight: bold;
 305     font-size: 108%;
 306     clear: both;
 307 }
 308
 309 .course-content .single-section .section-navigation .mdl-left {
 310     font-weight: normal;
 311     float: left;
 312     margin-right: 1em;
 313 }
 314
 315 .course-content .single-section .section-navigation .mdl-left .larrow {
 316     margin-right: 0.1em;
 317 }
 318
 319 .course-content .single-section .section-navigation .mdl-right {
 320     font-weight: normal;
 321     float: right;
 322     margin-left: 1em;
 323 }
 324
 325 .course-content .single-section .section-navigation .mdl-right .rarrow {
 326     margin-left: 0.1em;
 327 }
 328
 329 .course-content .single-section .section-navigation .mdl-bottom {
 330     margin-top: 0;
 331 }
 332
 333 .course-content ul li.section.main:not(.course-section) {
 334     border-bottom: $border-width solid $table-border-color;
 335     margin-top: 0;
 336
 337     &:last-child {
 338         border-bottom: 0;
 339     }
 340 }
 341
 342 .course-content ul li.section.hidden:not(.course-section) {
 343     .sectionname > span,
 344     .content > div.summary,
 345     .activity .activityinstance {
 346         color: $text-muted;
 347     }
 348 }
 349
 350 .course-content ul.topics,
 351 .course-content ul.weeks {
 352     padding: 0;
 353     margin: 0;
 354     list-style: none;
 355
 356     li.section {
 357         .content {
 358             margin: 0;
 359             padding: 0;
 360         }
 361
 362         @include media-breakpoint-up(sm) {
 363             .summary,
 364             .content > .availabilityinfo {
 365                 margin-left: 25px;
 366             }
 367         }
 368
 369         .left,
 370         .right {
 371             padding: 0 6px 0;
 372             text-align: right;
 373             width: auto;
 374         }
 375     }
 376 }
 377
 378 .course-content .single-section ul.topics li.section,
 379 .course-content .single-section ul.weeks li.section {
 380     padding-top: 0;
 381 }
 382
 383 @include media-breakpoint-down(sm) {
 384     body:not(.editing) {
 385         .course-content ul.topics,
 386         .course-content ul.weeks {
 387             li.section {
 388                 .left,
 389                 .right {
 390                     display: none;
 391                 }
 392             }
 393         }
 394     }
 395 }
 396
 397 .course-content {
 398     margin-top: 0;
 399 }
 400
 401 .course-content .hidden {
 402     display: none;
 403 }
 404
 405 .course-content li {
 406     &.section:not(.course-section) {
 407         @include media-breakpoint-down(sm) {
 408             ul {
 409                 padding-left: 0;
 410             }
 411         }
 412         ul {
 413             list-style: disc;
 414
 415             ul {
 416                 list-style: circle;
 417
 418                 ul {
 419                     list-style: square;
 420                 }
 421             }
 422         }
 423
 424         li {
 425             &.activity {
 426                 ul {
 427                     list-style: disc;
 428
 429                     ul {
 430                         list-style: circle;
 431
 432                         ul {
 433                             list-style: square;
 434                         }
 435                     }
 436                 }
 437             }
 438         }
 439
 440         .right {
 441             > .icon:first-child {
 442                 /* Remove the spacer icon. */
 443                 display: none;
 444             }
 445         }
 446     }
 447 }
 448
 449 .path-course-view.editing #region-main > .card-block {
 450     padding-bottom: 13rem;
 451 }
 452
 453 .path-course-view .completionprogress {
 454     margin-left: 25px;
 455 }
 456
 457 .path-course-view .completionprogress {
 458     display: block;
 459     float: right;
 460     height: 20px;
 461     position: relative;
 462 }
 463
 464 #page-site-index .subscribelink {
 465     text-align: right;
 466 }
 467
 468 #site-news-forum h2,
 469 #frontpage-course-list h2,
 470 #frontpage-category-names h2,
 471 #frontpage-category-combo h2 {
 472     margin-bottom: 9px;
 473 }
 474
 475 .path-course-view a.reduce-sections {
 476     padding-left: 0.2em;
 477 }
 478
 479 .path-course-view .subscribelink {
 480     text-align: right;
 481 }
 482
 483 .path-course-view .unread {
 484     margin-left: 30px;
 485 }
 486
 487 .path-course-view .block.drag .header {
 488     cursor: move;
 489 }
 490
 491 .path-course-view .completionprogress {
 492     text-align: right;
 493 }
 494
 495 .path-course-view .single-section .completionprogress {
 496     margin-right: 5px;
 497 }
 498
 499 .path-course-view li.activity span.autocompletion img {
 500     vertical-align: text-bottom;
 501     margin-left: 0;
 502 }
 503
 504 .path-course-view {
 505     &.editing {
 506         li.activity span.autocompletion img {
 507             /* Use the same spacing as the filler. */
 508             margin-right: $spacer * 0.5;
 509             margin-left: $spacer * 0.5;
 510         }
 511     }
 512 }
 513
 514 li.section.hidden span.commands a.editing_hide,
 515 li.section.hidden span.commands a.editing_show {
 516     cursor: default;
 517 }
 518
 519 .single-section-page .header-action {
 520     display: inline-block;
 521 }
 522
 523 input.titleeditor {
 524     width: 330px;
 525     vertical-align: text-bottom;
 526 }
 527
 528 span.editinstructions {
 529     position: absolute;
 530     top: 0;
 531     margin-top: -22px;
 532     margin-left: 30px;
 533     font-size: $font-size-sm;
 534     padding: .1em .4em;
 535     text-decoration: none;
 536     z-index: 9999;
 537     border: $alert-border-width solid transparent;
 538
 539     @include alert-variant(
 540         theme-color-level('info', $alert-bg-level),
 541         theme-color-level('info', $alert-border-level),
 542         theme-color-level('info', $alert-color-level)
 543     );
 544 }
 545
 546 /* COURSES LISTINGS AND COURSE SUMMARY */
 547 #page-course-pending .singlebutton,
 548 #page-course-index .singlebutton,
 549 #page-course-index-category .singlebutton,
 550 #page-course-editsection .singlebutton {
 551     text-align: center;
 552 }
 553
 554 #page-admin-course-manage #movecourses td img {
 555     margin: 0 .22em;
 556     vertical-align: text-bottom;
 557 }
 558
 559 #page-course-pending .pendingcourserequests {
 560     margin-bottom: 1em;
 561 }
 562
 563 #page-course-pending .pendingcourserequests .singlebutton {
 564     display: inline;
 565 }
 566
 567 #page-course-pending .pendingcourserequests .cell {
 568     padding: 0 5px;
 569 }
 570
 571 #page-course-pending .pendingcourserequests .cell.c6 {
 572     white-space: nowrap;
 573 }
 574
 575 .coursebox {
 576     display: flex;
 577     flex-direction: column;
 578     .info {
 579         display: flex;
 580         align-items: center;
 581     }
 582 }
 583
 584 #frontpage-available-course-list,
 585 #frontpage-course-list,
 586 .course-search-result {
 587     margin-top: $spacer * 0.5;
 588     .coursebox {
 589         padding: $spacer * 0.5;
 590         border: $border-width solid $border-color;
 591         margin-bottom: $spacer * 0.5;
 592
 593         @include border-radius();
 594     }
 595 }
 596
 597 .subcategories,
 598 #frontpage-category-names,
 599 #frontpage-category-combo {
 600     .coursebox > .info > .coursename a {
 601         display: block;
 602         background-image: url([[pix:moodle|i/course]]);
 603         background-repeat: no-repeat;
 604         padding-left: 21px;
 605         background-position: left 0.2em;
 606     }
 607 }
 608
 609 .coursebox > .info > .coursename {
 610     font-size: $font-size-base;
 611     font-weight: normal;
 612     margin: 5px;
 613     padding: 0;
 614 }
 615
 616 .coursebox .content .teachers li {
 617     list-style-type: none;
 618     padding: 0;
 619     margin: 0;
 620 }
 621
 622 .coursebox .customfieldname,
 623 .coursebox .customfieldseparator {
 624     font-weight: $font-weight-bold;
 625 }
 626
 627 .coursebox .content .coursefile {
 628     max-width: 100px;
 629 }
 630
 631 .coursebox .content .courseimage img {
 632     max-width: 100px;
 633     max-height: 100px;
 634 }
 635
 636 .coursebox .content .coursecat,
 637 .coursebox .content .summary,
 638 .coursebox .content .courseimage,
 639 .coursebox .content .coursefile,
 640 .coursebox .content .teachers,
 641 .coursebox.remotecoursebox .remotecourseinfo,
 642 .coursebox .content .customfields-container {
 643     margin: 15px 5px 5px;
 644     padding: 0;
 645 }
 646
 647 .category-browse {
 648     .coursebox .content .coursecat,
 649     .coursebox .content .summary,
 650     .coursebox .content .courseimage,
 651     .coursebox .content .coursefile,
 652     .coursebox .content .teachers,
 653     .coursebox.remotecoursebox .remotecourseinfo,
 654     .coursebox .content .customfields-container {
 655         margin-top: 0;
 656     }
 657 }
 658
 659 .coursebox.collapsed > .content {
 660     display: none;
 661 }
 662
 663 .courses > .paging.paging-morelink {
 664     text-align: center;
 665     padding: $spacer;
 666 }
 667
 668 .course_category_tree .category .numberofcourse {
 669     font-size: $font-size-sm;
 670 }
 671
 672 .course_category_tree .category > .info > .categoryname {
 673     margin: 5px;
 674     font-size: $font-size-base;
 675     font-weight: normal;
 676     padding: 2px 18px;
 677 }
 678
 679 .course_category_tree .category.with_children > .info > .categoryname {
 680     background-image: url([[pix:moodle|t/expanded]]);
 681     background-repeat: no-repeat;
 682     background-position: center left;
 683 }
 684
 685 .course_category_tree .category.with_children.collapsed > .info > .categoryname {
 686     background-image: url([[pix:moodle|t/collapsed]]);
 687 }
 688 /* rtl:raw:
 689 .course_category_tree .category.with_children.collapsed > .info > .categoryname {
 690     background-image:url([[pix:moodle|t/collapsed_rtl]]);
 691 }
 692 */
 693 .course_category_tree .category.collapsed > .content {
 694     display: none;
 695 }
 696
 697 .course_category_tree .category > .content {
 698     padding-left: 16px;
 699 }
 700
 701 #page-course-index-category .categorypicker {
 702     margin: 10px 0 20px;
 703 }
 704
 705 /**
 706  * Course management page
 707  * Palette
 708  *
 709  * Background (reg)         #F5F5F5
 710  * Background (light        #fafafa
 711  * Background (highlight)   #ddffaa
 712  * Borders                  #e1e1e8
 713  */
 714 #course-category-listings {
 715     margin-bottom: 0;
 716
 717     /** Two column layout */
 718     &.columns-2 {
 719         > #course-listing > div {
 720             position: relative;
 721             left: -1px;
 722         }
 723     }
 724     /** Three column layout */
 725     &.columns-3 > #course-listing > div {
 726         height: 100%;
 727     }
 728
 729     > div > div {
 730         min-height: 300px;
 731
 732         > ul.ml > li:first-child > div {
 733             border-top: 0;
 734         }
 735     }
 736
 737     h3 {
 738         margin: 0;
 739         padding: 0.4rem 0.6rem 0.3rem;
 740     }
 741
 742     h4 {
 743         margin: 1rem 0 0;
 744         padding: 0.6rem 1rem 0.5rem;
 745     }
 746
 747     .moodle-actionmenu {
 748         white-space: nowrap;
 749     }
 750
 751     .listing-actions {
 752         text-align: center;
 753
 754         > .moodle-actionmenu {
 755             display: inline-block;
 756         }
 757     }
 758
 759     ul.ml {
 760         list-style: none;
 761         margin: 1rem 0;
 762
 763         ul.ml {
 764             margin: 0;
 765         }
 766     }
 767
 768     .listitem {
 769
 770         &[data-selected='1'] {
 771             border-left: calc(#{$list-group-border-width} + 5px) solid map-get($theme-colors, 'primary');
 772             padding-left: calc(#{$list-group-item-padding-x} - 5px);
 773         }
 774         &:hover {
 775             z-index: 2;
 776         }
 777     }
 778
 779     .item-actions {
 780         margin-right: 1em;
 781         display: inline-block;
 782
 783         &.show .menu {
 784
 785             img {
 786                 width: 12px;
 787                 max-width: none;
 788             }
 789         }
 790
 791         .menu-action-text {
 792             vertical-align: inherit;
 793         }
 794     }
 795
 796     .listitem {
 797         > div {
 798             > .float-left {
 799                 float: left;
 800             }
 801
 802             > .float-right {
 803                 float: right;
 804                 text-align: right;
 805             }
 806
 807             .item-actions {
 808                 .action-show {
 809                     display: none;
 810                 }
 811
 812                 .action-hide {
 813                     display: inline;
 814                 }
 815             }
 816
 817             .without-actions {
 818                 color: $course-cat-without-actions-color;
 819             }
 820
 821             .idnumber {
 822                 margin-right: 2em;
 823             }
 824         }
 825         // The category or course is hidden.
 826         &[data-visible="0"] {
 827             color: $text-muted;
 828
 829             > div {
 830                 > a {
 831                     color: $text-muted;
 832                 }
 833
 834                 .item-actions {
 835                     .action-show {
 836                         display: inline;
 837                     }
 838
 839                     .action-hide {
 840                         display: none;
 841                     }
 842                 }
 843             }
 844         }
 845
 846         &.highlight {
 847             background-color: $body-bg;
 848
 849             > div,
 850             > div:hover,
 851             &[data-selected='1'] > div {
 852                 background-color: $table-hover-bg;
 853             }
 854         }
 855     }
 856
 857     #course-listing {
 858         .listitem {
 859             .categoryname {
 860                 display: inline-block;
 861                 margin-left: 1em;
 862                 color: $course-listing-color;
 863             }
 864
 865             .coursename {
 866                 display: inline-block;
 867                 flex-basis: 10rem;
 868             }
 869         }
 870
 871         > .firstpage .listitem:first-child > div .item-actions .action-moveup,
 872         > .lastpage .listitem:last-child > div .item-actions .action-movedown {
 873             display: none;
 874         }
 875
 876         .bulk-action-checkbox {
 877             margin: -2px 6px 0 0;
 878         }
 879     }
 880
 881     #category-listing {
 882         .listitem.collapsed > ul.ml {
 883             display: none;
 884         }
 885
 886         .listitem {
 887             &:first-child > div .item-actions .action-moveup,
 888             &:last-child > div .item-actions .action-movedown {
 889                 display: none;
 890             }
 891         }
 892
 893         .course-count {
 894             color: $course-listing-color;
 895             margin-right: 2rem;
 896             min-width: 3.5em;
 897             display: inline-block;
 898         }
 899
 900         .bulk-action-checkbox {
 901             margin-right: -3px;
 902         }
 903
 904         .category-listing > ul > .listitem:first-child {
 905             position: relative;
 906         }
 907
 908         .category-bulk-actions {
 909             margin: 0 0.5em 0.5em;
 910             position: relative;
 911         }
 912     }
 913
 914     .detail-pair {
 915
 916         > * {
 917             display: inline-block;
 918         }
 919
 920         .pair-key {
 921             font-weight: bold;
 922             vertical-align: top;
 923
 924             span {
 925                 margin-right: 1rem;
 926                 display: block;
 927             }
 928         }
 929
 930         .pair-value select {
 931             max-width: 100%;
 932         }
 933     }
 934
 935     .bulk-actions .detail-pair {
 936         > * {
 937             display: block;
 938             width: 100%;
 939         }
 940     }
 941
 942     .listing-pagination {
 943         text-align: center;
 944
 945         .yui3-button {
 946             @include button-variant($info, $info);
 947             border: 0;
 948             margin: 0.4rem 0.2rem 0.45rem;
 949             font-size: 10.4px;
 950
 951             &.active-page {
 952                 @include button-variant($primary, $primary);
 953             }
 954         }
 955     }
 956
 957     .listing-pagination-totals {
 958         text-align: center;
 959
 960         &.dimmed {
 961             color: $text-muted;
 962             margin: 0.4rem 1rem 0.45rem;
 963         }
 964     }
 965
 966     .select-a-category .notifymessage,
 967     .select-a-category .alert {
 968         margin: 1em;
 969     }
 970 }
 971
 972 #course-category-listings #course-listing .listitem .drag-handle {
 973     display: none;
 974 }
 975
 976 .jsenabled #course-category-listings #course-listing .listitem .drag-handle {
 977     display: inline-block;
 978     margin: 0 6px 0 0;
 979     cursor: pointer;
 980 }
 981
 982 /** Management header styling **/
 983 .course-being-dragged-proxy {
 984     border: 0;
 985     color: $link-color;
 986     vertical-align: middle;
 987     padding: 0 0 0 4em;
 988 }
 989
 990 .course-being-dragged {
 991     opacity: 0.5;
 992 }
 993
 994 /**
 995  * Display sizes:
 996  * Large displays                   1200        +
 997  * Default displays                  980     1199
 998  * Tablets                           768      979
 999  * Small tablets and large phones    481      767
1000  * Phones                              0      480
1001  */
1002
1003 @media (min-width: 1200px) and (max-width: 1600px) {
1004     #course-category-listings.columns-3 {
1005         background-color: $body-bg;
1006         border: 0;
1007
1008         #category-listing,
1009         #course-listing {
1010             width: 50%;
1011         }
1012
1013         #category-listing > div,
1014         #course-listing > div,
1015         #course-detail > div {
1016             background-color: $body-bg;
1017         }
1018
1019         #course-detail {
1020             width: 100%;
1021             margin-top: 1em;
1022         }
1023     }
1024 }
1025
1026 @media (max-width: 1199px) {
1027     #course-category-listings.columns-2,
1028     #course-category-listings.columns-3 {
1029         border: 0;
1030
1031         #category-listing,
1032         #course-listing,
1033         #course-detail {
1034             width: 100%;
1035             margin: 0 0 1em;
1036         }
1037     }
1038 }
1039
1040 .page-settings-menu .menubar > a > .icon {
1041     width: auto;
1042     height: 32px;
1043     font-size: 32px;
1044 }
1045
1046 .activity-navigation {
1047     .row {
1048         align-items: center;
1049     }
1050     #prev-activity-link,
1051     #next-activity-link {
1052         white-space: pre-wrap;
1053     }
1054 }
1055
1056 .automatic-completion-conditions {
1057     .badge {
1058         font-size: 100%;
1059     }
1060 }
1061
1062 // These are the new styles for the renewed course UI in isssue MDL-71691
1063 // once the old course renderers are removed in MDL-72656, all css related
1064 // to activities and sections above this commend needs to be reviewed an
1065 // possibly removed.
1066
1067 /* Variables definition*/
1068
1069 $activity-border-radius: 1rem !default;
1070 $activity-border-width: 2px !default;
1071 $activity-hover-border-color: $primary !default;
1072 $divider-color: $gray-300 !default;
1073 $divider-width: 2px !default;
1074 $divider-hover-color: $primary !default;
1075
1076 /* Functions/Mixins definition */
1077
1078 // Activity completion button custom styling mixin.
1079 @mixin completion-button() {
1080     &.btn {
1081         @include button-variant($white, $gray-400, $gray-600);
1082         min-height: map-get($iconsizes, 5);
1083         font-weight: bold;
1084         @include border-radius();
1085         .icon {
1086             font-size: inherit;
1087         }
1088     }
1089     @each $color, $value in $theme-colors {
1090         &.btn-#{$color} {
1091             $bg-color: theme-color-level($color, $alert-bg-level);
1092             @include button-variant($bg-color, $bg-color, $value);
1093             color: theme-color-level($color, $alert-color-level);
1094             &:hover {
1095                 color: color-yiq($value);
1096             }
1097         }
1098     }
1099 }
1100
1101 /* Section Expand all/Collapse all */
1102
1103 .section-collapsemenu {
1104     .collapseall {
1105         display: block;
1106     }
1107
1108     .expandall {
1109         display: none;
1110     }
1111
1112     &.collapsed {
1113         .collapseall {
1114             display: none;
1115         }
1116
1117         .expandall {
1118             display: block;
1119         }
1120     }
1121 }
1122
1123 /* Course section */
1124
1125 .course-section {
1126     list-style: none;
1127     margin-top: map-get($spacers, 3);
1128     // Custom styles for course sections while editing.
1129     .editing & {
1130         margin-top: map-get($spacers, 2);
1131     }
1132
1133     .section-item {
1134         padding: map-get($spacers, 3);
1135         border: $border-width solid $border-color;
1136         @include border-radius($activity-border-radius);
1137     }
1138
1139     &.hidden {
1140         .section-item {
1141             background-color: $gray-100;
1142         }
1143     }
1144
1145     .sectionname > a {
1146         color: $gray-900;
1147         &:hover {
1148             text-decoration: none;
1149         }
1150     }
1151
1152     .sectionbadges .badge {
1153         margin-left: map-get($spacers, 2);
1154     }
1155
1156     .course-section-header.draggable {
1157         cursor: move;
1158     }
1159
1160     .section_action_menu {
1161         .dropdown-toggle::after {
1162             display: none;
1163         }
1164     }
1165
1166     .summarytext {
1167         // Add rounded borders to images.
1168         img {
1169             @include border-radius($activity-border-radius);
1170         }
1171     }
1172
1173     // Availability styles for both section and activities.
1174     .availabilityinfo {
1175         margin-top: map-get($spacers, 2);
1176         padding: map-get($spacers, 1) map-get($spacers, 3);
1177         background-color: $gray-200;
1178         @include font-size($small-font-size);
1179         @include border-radius($activity-border-radius);
1180         .editavailability {
1181             a {
1182                 @include border-radius();
1183                 font-weight: bold;
1184                 &:hover {
1185                     background-color: $gray-400;
1186                 }
1187                 .icon {
1188                     font-size: inherit;
1189                     margin-right: map-get($spacers, 1);
1190                 }
1191             }
1192         }
1193     }
1194
1195     // Override '.btn.btn-icon' styles from buttons.scss to make action menu buttons smaller.
1196     .action-menu .btn.btn-icon {
1197         height: map-get($iconsizes, 5);
1198         width: map-get($iconsizes, 5);
1199         @include border-radius();
1200     }
1201
1202     .section-summary-activities {
1203         .icon {
1204             width: inherit;
1205             color: $primary;
1206         }
1207     }
1208
1209     .section-summary-activities + .section {
1210         border-top: $border-width solid $border-color;
1211         margin-top: map-get($spacers, 3) !important;  // stylelint-disable-line declaration-no-important
1212         padding-top: map-get($spacers, 3) !important; // stylelint-disable-line declaration-no-important
1213     }
1214
1215     .section_goto .icon {
1216         font-size: $font-size-lg;
1217         color: $primary;
1218     }
1219 }
1220
1221 // Course 'add section' button.
1222 .btn.add-section {
1223     @include border-radius($activity-border-radius);
1224     border: $divider-width dashed $border-color;
1225     color: $primary;
1226     font-size: $font-size-sm;
1227     font-weight: bold;
1228     &:hover,
1229     &:focus {
1230         background-color: $primary-light-background;
1231         border: $divider-width solid $primary;
1232         color: $primary;
1233     }
1234 }
1235
1236 /* Single section page specific styles */
1237
1238 .single-section {
1239     // Revert main section's styles.
1240     > ul > .course-section {
1241         &.hidden .section-item {
1242             background-color: inherit;
1243         }
1244         .section-item {
1245             padding: 0;
1246             border: none;
1247         }
1248     }
1249 }
1250
1251 /* Re-style ordered list in course content */
1252 .course-content .activity-altcontent {
1253     ul {
1254         list-style: disc;
1255         ul {
1256             list-style: circle;
1257             ul {
1258                 list-style: square;
1259             }
1260         }
1261     }
1262 }
1263
1264 /* Activity cards */
1265
1266 .activity {
1267     list-style: none;
1268     position: relative;
1269     padding-top: map-get($spacers, 1);
1270     margin-top: map-get($spacers, 1);
1271     border-top: $border-width solid $border-color;
1272     // Custom styles for activity while editing.
1273     .editing & {
1274         // Remove activity top border and spacing, while editing a separator is displayed.
1275         padding-top: 0;
1276         margin-top: 0;
1277         border-top: none;
1278     }
1279 }
1280
1281 .activity-item {
1282     position: relative;
1283     padding: .75rem;
1284     background-color: $white;
1285     &.activityinline {
1286         padding: .75rem 0;
1287     }
1288     &.hiddenactivity {
1289         background-color: $gray-100;
1290         .activityiconcontainer,
1291         .badge {
1292             mix-blend-mode: multiply;
1293         }
1294     }
1295     // Custom styles for activity cards while editing.
1296     .editing & {
1297         cursor: move;
1298         border: $activity-border-width solid transparent;
1299         @include border-radius($activity-border-radius);
1300         .a {
1301             cursor: pointer;
1302         }
1303         &:hover,
1304         &.selected {
1305             border: $activity-border-width solid $activity-hover-border-color;
1306             box-shadow: $box-shadow-sm;
1307             .activityiconcontainer,
1308             .badge {
1309                 mix-blend-mode: multiply;
1310             }
1311         }
1312     }
1313
1314     // Activity card grid layout.
1315     .activity-grid {
1316         display: grid;
1317         align-items: center;
1318         grid-template-columns: min-content 1fr min-content min-content min-content;
1319         grid-template-rows: 1fr repeat(5, min-content);
1320         grid-template-areas:
1321             "icon   name          groupmode      completion    actions"
1322             "icon   visibility    groupmode      completion    actions"
1323             "icon   dates         groupmode      completion    actions"
1324             "icon   altcontent    altcontent     altcontent    altcontent"
1325             "icon   afterlink     afterlink      afterlink     afterlink"
1326             "icon   availability  availability   availability  availability";
1327         @include media-breakpoint-down(xs) {
1328             grid-template-columns: min-content 1fr min-content min-content min-content;
1329             grid-template-rows: 1fr repeat(4, min-content);
1330             grid-template-areas:
1331                 "icon          name          actions"
1332                 "icon          visibility    actions"
1333                 "dates         dates         dates"
1334                 "groupmode     groupmode     groupmode"
1335                 "completion    completion    completion"
1336                 "altcontent    altcontent    altcontent"
1337                 "afterlink     afterlink     afterlink"
1338                 "availability  availability  availability";
1339         }
1340     }
1341     // Activity card specific grid layout for activities without name.
1342     .activity-grid.noname-grid {
1343         grid-template-columns: min-content 1fr min-content min-content;
1344         grid-template-areas:
1345             "visibility    groupmode        completion    actions"
1346             "altcontent    altcontent       altcontent    altcontent"
1347             "afterlink     afterlink        afterlink     afterlink"
1348             "availability  availability     availability  availability";
1349         @include media-breakpoint-down(xs) {
1350             grid-template-columns: 1fr min-content;
1351             grid-template-areas:
1352                 "visibility    actions"
1353                 "altcontent    altcontent"
1354                 "groupmode     groupmode"
1355                 "afterlink     afterlink"
1356                 "completion    completion"
1357                 "availability  availability";
1358         }
1359     }
1360
1361     .activity-actions {
1362         grid-area: actions;
1363         .actions {
1364             position: relative;
1365         }
1366     }
1367
1368     .activity-icon {
1369         grid-area: icon;
1370     }
1371
1372     .activity-dates {
1373         grid-area: dates;
1374         @include font-size($small-font-size);
1375         color: $gray-700;
1376         display: flex;
1377         flex-wrap: wrap;
1378         column-gap: 0.75rem;
1379         @include media-breakpoint-down(xs) {
1380             margin-top: map-get($spacers, 2);
1381         }
1382     }
1383     .activity-name-area {
1384         grid-area: name;
1385         // Prevent bootstrap strech-link from covering the inplace editable button using z-index.
1386         .activityname {
1387             .afterlink {
1388                 margin-left: map-get($spacers, 2);
1389             }
1390             .inplaceeditable .quickeditlink {
1391                 position: relative;
1392                 z-index: 2;
1393                 margin-left: map-get($spacers, 2);
1394             }
1395         }
1396         .activitybadge {
1397             &.badge-none {
1398                 font-weight: normal;
1399                 @include font-size($small-font-size);
1400                 padding: 0;
1401             }
1402         }
1403     }
1404
1405     .activity-completion {
1406         grid-area: completion;
1407         justify-self: end;
1408         // Re-style completion buttons (mark as done & dropdown).
1409         button,
1410         a[role="button"] {
1411             @include completion-button();
1412         }
1413         @include media-breakpoint-down(xs) {
1414             width: 100%;
1415             margin-top: map-get($spacers, 2);
1416             button {
1417                 width: 100%;
1418             }
1419         }
1420         .completion-dialog {
1421             color: $gray-700;
1422             font-size: $font-size-sm;
1423             min-width: 12rem;
1424             .icon {
1425                 font-size: $font-size-sm;
1426                 width: $font-size-sm;
1427                 height: $font-size-sm;
1428                 margin-right: map-get($spacers, 1);
1429             }
1430             .editcompletion a {
1431                 @include border-radius();
1432                 color: $gray-700;
1433                 font-weight: bold;
1434                 text-decoration: none;
1435                 &:hover {
1436                     background-color: $gray-200;
1437                 }
1438             }
1439         }
1440     }
1441
1442     .activity-groupmode-info {
1443         grid-area: groupmode;
1444         justify-self: end;
1445         .groupmode-information {
1446             height: map-get($iconsizes, 5);
1447             width: map-get($iconsizes, 5);
1448             @include border-radius();
1449         }
1450         .groupmode-icon-info {
1451             display: none;
1452         }
1453         @include media-breakpoint-down(xs) {
1454             width: 100%;
1455             margin-top: map-get($spacers, 2);
1456             padding-top: map-get($spacers, 2);
1457             border-top: $border-width solid $border-color;
1458             .groupmode-information {
1459                 width: auto;
1460                 font-size: inherit;
1461                 padding: 0 map-get($spacers, 2);
1462             }
1463             .groupmode-icon-info {
1464                 display: inline;
1465             }
1466             // Disable v-parent-focus behaviour on small devices to always show the groupmode button.
1467             .v-parent-focus {
1468                 opacity: 1;
1469                 visibility: visible;
1470             }
1471         }
1472     }
1473
1474     .activity-badges {
1475         grid-area: visibility;
1476         .badge {
1477             font-weight: normal;
1478             .icon {
1479                 font-size: 12px;
1480                 width: 12px;
1481                 height: 12px;
1482             }
1483         }
1484     }
1485
1486     .activity-altcontent {
1487         grid-area: altcontent;
1488         margin-top: map-get($spacers, 1);
1489         &.activity-description {
1490             margin-top: map-get($spacers, 2);
1491             padding-top: map-get($spacers, 2);
1492             border-top: $border-width solid $border-color;
1493             @include font-size($small-font-size);
1494         }
1495         // Add rounded borders to images.
1496         img {
1497             @include border-radius($activity-border-radius);
1498         }
1499     }
1500
1501     .activity-availability {
1502         grid-area: availability;
1503     }
1504
1505     .activity-afterlink {
1506         grid-area: afterlink;
1507         margin-top: map-get($spacers, 2);
1508         padding-top: map-get($spacers, 2);
1509         border-top: $border-width solid $border-color;
1510     }
1511
1512     .no-overflow {
1513         width: 100%;
1514     }
1515 }
1516
1517 .section .draggable .activity-item .dragicon {
1518     display: none;
1519 }
1520
1521 /* Dividers */
1522
1523 .divider {
1524     position: relative;
1525     hr {
1526         width: 100%;
1527         margin: map-get($spacers, 2) map-get($spacers, 1);
1528         border-top: $divider-width dashed $divider-color;
1529     }
1530     .divider-content {
1531         opacity: 0;
1532         visibility: hidden;
1533         transition: visibility 0.1s;
1534         position: absolute;
1535         background: linear-gradient(transparent 40%, $white 40%, $white 60%, transparent 60%);
1536         .section.hidden & {
1537             background: linear-gradient(transparent 40%, $gray-100 40%, $gray-100 60%, transparent 60%);
1538         }
1539     }
1540     &.always-visible {
1541         .divider-content {
1542             opacity: 1;
1543             visibility: visible;
1544         }
1545     }
1546     &.always-hidden {
1547         hr {
1548             opacity: 0;
1549             visibility: hidden;
1550         }
1551     }
1552     &:hover,
1553     &:focus,
1554     &:focus-within {
1555         .divider-content {
1556             opacity: 1;
1557             visibility: visible;
1558         }
1559         hr {
1560             opacity: 1;
1561             visibility: visible;
1562         }
1563     }
1564     // Style the hr divider when the "Add content" button is hovered.
1565     &:has(.btn.add-content:hover) {
1566         hr {
1567             border-color: $divider-hover-color;
1568         }
1569     }
1570 }
1571
1572 // These styles will make the activity and section dividers buttons visible (but still without opacity) so
1573 // buttons can be keyboard focusable.
1574 .activity:focus-within + .activity .divider .divider-content,
1575 .course-section-header:focus-within + .content .section .activity:first-child .divider .divider-content,
1576 .content .section .activity:focus-within .divider .divider-content,
1577 .course-content:focus-within .changenumsections .divider .divider-content {
1578     visibility: visible;
1579 }
1580
1581 // Hide last section "Add section". It will rely on the course format general "Add section" button.
1582 .course-content ul.topics > li:last-child .changenumsections {
1583     display: none;
1584 }
1585
1586 // Custom buttons for dividers.
1587 .btn.add-content {
1588     position: relative;
1589     z-index: 1;
1590     @include border-radius($rounded-pill);
1591     font-size: $font-size-sm;
1592     font-weight: bold;
1593     color: theme-color-level("primary", $alert-color-level);
1594     background-color: theme-color-level("primary", $alert-bg-level);
1595     &:hover,
1596     &:focus {
1597         color: color-yiq($primary);
1598         background-color: $primary;
1599     }
1600     .icon {
1601         width: 14px;
1602         height: 14px;
1603         font-size: 14px;
1604     }
1605 }
1606
1607 /* Bulk editing */
1608
1609 .bulkenabled {
1610     .bulk-hidden {
1611         display: none !important; // stylelint-disable-line declaration-no-important
1612     }
1613     .section:not(:first-child) {
1614         margin-top: map-get($spacers, 4);
1615     }
1616     .activity {
1617         margin-top: map-get($spacers, 2);
1618         margin-left: 2rem;
1619         padding-top: map-get($spacers, 2);
1620         border-top: $divider-width dashed $divider-color;
1621         &:first-child {
1622             margin-top: map-get($spacers, 4);
1623         }
1624     }
1625     .activity-item {
1626         .bulkselect {
1627             position: absolute;
1628             left: -2rem;
1629         }
1630     }
1631     .course-section-header .bulkselect {
1632         left: -2.75rem;
1633         position: relative;
1634         width: 0;
1635     }
1636     @include media-breakpoint-down(sm) {
1637         .course-content {
1638             margin-left: 2rem;
1639         }
1640     }
1641 }
1642
1643 /* Activity completion */
1644
1645 .defaultactivitycompletion-item {
1646     a {
1647         color: $black;
1648         text-decoration: none;
1649     }
1650     .activityicon {
1651         width: 32px;
1652         height: 32px;
1653     }
1654 }
1655
1656 /* Home page course specific styles */
1657
1658 .sitetopic {
1659     // Hide the first activity top border.
1660     .activity:first-of-type hr {
1661         display: none;
1662     }
1663     .section-item {
1664         margin-bottom: map-get($spacers, 4);
1665         @include border-radius();
1666     }
1667 }