[Summary view] [Print] [Text view]

   1  /* modules.less */
   2  
   3  // The home for small tweaks to modules that don't require
   4  // changes drastic enough to pull in the full module css
   5  // and replace it completely
   6  // Plus some misc. odds and ends
   7  
   8  select {
   9      width: auto;
  10  }
  11  
  12  // Choice module
  13  
  14  .path-mod-choice {
  15      .horizontal .choices .option {
  16          display: inline-block;
  17      }
  18  }
  19  
  20  .path-mod-choice {
  21      .choices .option label {
  22          vertical-align: top;
  23      }
  24  }
  25  
  26  .path-mod-feedback .feedback_form .col-form-label {
  27      display: block !important; /* stylelint-disable-line declaration-no-important */
  28  }
  29  
  30  // Feedback module
  31  .path-mod-feedback .itemactions {
  32      float: right;
  33  }
  34  .path-mod-feedback .itemhandle {
  35      position: absolute;
  36      right: 1rem;
  37  }
  38  
  39  // Forum module
  40  
  41  .path-mod-forum .forumsearch {
  42      input,
  43      .helptooltip {
  44          margin: 0 3px;
  45      }
  46  }
  47  
  48  .path-mod-forum .forumheaderlist,
  49  .path-mod-forum .forumheaderlist td {
  50      border: none;
  51  }
  52  
  53  .path-mod-forum {
  54      .forumheaderlist {
  55          thead .header,
  56          tbody .discussion td {
  57              white-space: normal;
  58              vertical-align: top;
  59              padding-left: 0.5em;
  60              padding-right: 0.5em;
  61          }
  62  
  63          thead .header {
  64              white-space: normal;
  65              vertical-align: top;
  66          }
  67  
  68          thead .header.replies {
  69              text-align: center;
  70          }
  71  
  72          thead .header.lastpost {
  73              text-align: right;
  74          }
  75  
  76          thead .header th,
  77          tbody .discussion td {
  78              &.discussionsubscription {
  79                  width: 16px;
  80                  padding-left: 0.5em;
  81                  padding-right: 0.5em;
  82              }
  83          }
  84  
  85          .discussion {
  86              .replies,
  87              .lastpost {
  88                  white-space: normal;
  89              }
  90  
  91              .discussionsubscription,
  92              .replies {
  93                  text-align: center;
  94              }
  95  
  96              .topic,
  97              .discussionsubscription,
  98              .topic.starter,
  99              .replies,
 100              .lastpost {
 101                  vertical-align: top;
 102              }
 103          }
 104      }
 105  
 106      .discussion-list {
 107          .topic {
 108              // Do not use the default bold style for the table headings.
 109              font-weight: inherit;
 110          }
 111      }
 112  
 113      // Style for the forum subscription mode node.
 114      .subscriptionmode {
 115          color: $body-color;
 116      }
 117  
 118      // Style for the currently selected subscription mode.
 119      .activesetting {
 120          color: $body-color;
 121          font-weight: bold;
 122      }
 123  }
 124  
 125  .discussion-settings-container {
 126      .custom-select {
 127          width: 100%;
 128      }
 129  
 130      input {
 131          max-width: 100%;
 132      }
 133  }
 134  
 135  .forumpost {
 136      border: $border-width solid $border-color;
 137      display: block;
 138      padding: 6px;
 139  
 140      .header {
 141          margin-bottom: 3px;
 142      }
 143  
 144      .picture img {
 145          margin: 3px;
 146  
 147          &.userpicture {
 148              margin-left: 3px;
 149              margin-right: 10px;
 150          }
 151      }
 152  
 153      .content {
 154          .posting.fullpost {
 155              margin-top: 8px;
 156          }
 157      }
 158  
 159      .row {
 160          display: block;
 161          .topic,
 162          .content-mask,
 163          .options {
 164              margin-left: 48px;
 165          }
 166  
 167          &.side {
 168              clear: both;
 169          }
 170      }
 171  }
 172  
 173  .forumpost .row .left {
 174      width: 48px;
 175  }
 176  
 177  .forumpost .options .commands {
 178      margin-left: 0;
 179  }
 180  
 181  .forumpost .subject {
 182      font-weight: bold;
 183  }
 184  
 185  // Override hardcoded forum modules styling
 186  .forumsearch input[type=text] {
 187      margin-bottom: 0;
 188  }
 189  
 190  #page-mod-forum-view {
 191      table {
 192          .fit-content {
 193              width: 1px;
 194              white-space: nowrap;
 195          }
 196  
 197          .limit-width {
 198              max-width: 200px;
 199              white-space: nowrap;
 200              text-overflow: ellipsis;
 201              overflow: hidden;
 202  
 203              .author-info {
 204                  max-width: calc(100% - 35px - .5rem);
 205              }
 206          }
 207      }
 208  }
 209  
 210  #page-mod-forum-discuss .discussioncontrols {
 211      width: auto;
 212      margin: 0;
 213  
 214      .form-inline input {
 215          margin-top: -1px;
 216      }
 217  }
 218  
 219  $author-image-width: 70px;
 220  $author-image-margin: 24px;
 221  $author-image-width-sm: 30px;
 222  $author-image-margin-sm: 8px;
 223  
 224  /** Gently highlight the selected post by changing it's background to blue and then fading it out. */
 225  @keyframes background-highlight {
 226      from {
 227          background-color: rgba(0, 123, 255, 0.5);
 228      }
 229      to {
 230          background-color: inherit;
 231      }
 232  }
 233  
 234  .path-mod-forum .nested-v2-display-mode,
 235  .path-mod-forum.nested-v2-display-mode {
 236      .discussionsubscription {
 237          margin-top: 0;
 238          text-align: inherit;
 239          margin-bottom: 0;
 240      }
 241  
 242      .preload-subscribe,
 243      .preload-unsubscribe {
 244          display: none;
 245      }
 246  
 247      .post-message {
 248          line-height: 1.6;
 249      }
 250  
 251      .indent {
 252          margin-left: 0;
 253      }
 254  
 255      /** Reset the badge styling back to pill style. */
 256      .badge {
 257          font-size: inherit;
 258          font-weight: inherit;
 259          padding-left: .5rem;
 260          padding-right: .5rem;
 261          border-radius: 10rem;
 262      }
 263  
 264      .badge-light {
 265          background-color: #f6f6f6;
 266          color: #5b5b5b;
 267      }
 268  
 269      /** Style the ratings like a badge. */
 270      .rating-aggregate-container {
 271          background-color: #f6f6f6;
 272          color: #5b5b5b;
 273          padding: .25em .5em;
 274          line-height: 1;
 275          margin-right: .5rem;
 276          vertical-align: middle;
 277          border-radius: 10rem;
 278          text-align: center;
 279      }
 280  
 281      .ratinginput {
 282          padding: .25em 1.75rem 0.25em .75em;
 283          line-height: 1;
 284          height: auto;
 285          border-radius: 10rem;
 286  
 287          @include media-breakpoint-down(sm) {
 288              margin-top: .5rem;
 289          }
 290      }
 291  
 292      .group-image {
 293          width: 35px;
 294          height: 35px;
 295          margin-right: 0;
 296          float: none;
 297          display: inline-block;
 298      }
 299  
 300      /** Don't show the discussion locked alert in this mode because it's already indicated with a badge. */
 301      .alert.discussionlocked {
 302          @include sr-only();
 303      }
 304  
 305      /** Fix muted text contrast ratios for accessibility. */
 306      .text-muted,
 307      .dimmed_text {
 308          color: #707070 !important; /* stylelint-disable-line declaration-no-important */
 309      }
 310  
 311      .author-header {
 312          font-style: italic;
 313  
 314          .author-name {
 315              font-style: normal;
 316          }
 317      }
 318  
 319      /** Make the tag list text screen reader visible only */
 320      .tag_list > b {
 321          @include sr-only();
 322      }
 323  
 324      :target > .focus-target {
 325          animation-name: background-highlight;
 326          animation-duration: 1s;
 327          animation-timing-function: ease-in-out;
 328          animation-iteration-count: 1;
 329      }
 330  
 331      .forum-post-container {
 332          .replies-container {
 333              .forum-post-container {
 334                  border-top: 1px solid #dee2e6;
 335                  padding-top: 1.5rem;
 336  
 337                  .replies-container .forum-post-container {
 338                      border-top: none;
 339                      padding-top: 0;
 340                  }
 341              }
 342  
 343              .inline-reply-container .reply-author {
 344                  display: none;
 345              }
 346          }
 347  
 348          .post-message p:last-of-type {
 349              margin-bottom: 0;
 350          }
 351  
 352          .author-image-container {
 353              width: $author-image-width;
 354              margin-right: $author-image-margin;
 355              flex-shrink: 0;
 356          }
 357  
 358          .inline-reply-container textarea {
 359              border: 0;
 360              resize: none;
 361          }
 362  
 363          .indent {
 364              /**
 365               * The first post and first set of replies have a larger author image so offset the 2nd
 366               * set of replies by the image width + margin to ensure they align.
 367               */
 368              .indent {
 369                  padding-left: $author-image-width + $author-image-margin;
 370  
 371                  /**
 372                   * Reduce the size of the the author image for all second level replies (and below).
 373                   */
 374                  .author-image-container {
 375                      width: $author-image-width-sm;
 376                      margin-right: $author-image-margin-sm;
 377                      padding-top: (36px - $author-image-width-sm) / 2;
 378                  }
 379  
 380                  /**
 381                   * Adjust the indentation offset for all 3rd level replies and below for the smaller author image.
 382                   */
 383                  .indent {
 384                      padding-left: $author-image-width-sm + $author-image-margin-sm;
 385  
 386                      /**
 387                       * Stop indenting the replies after the 5th reply.
 388                       */
 389                      .indent .indent .indent {
 390                          padding-left: 0;
 391                      }
 392                  }
 393              }
 394          }
 395      }
 396  }
 397  
 398  /** Extra small devices (portrait phones, less than 576px). */
 399  @include media-breakpoint-down(sm) {
 400      #page-mod-forum-discuss.nested-v2-display-mode {
 401          .forum-post-container {
 402              .author-image-container {
 403                  width: $author-image-width-sm;
 404                  margin-right: $author-image-margin-sm;
 405              }
 406  
 407              .indent {
 408                  .indent {
 409                      padding-left: $author-image-width-sm + $author-image-margin-sm;
 410  
 411                      .indent .indent {
 412                          padding-left: 0;
 413                      }
 414                  }
 415              }
 416          }
 417  
 418          .group-image {
 419              width: 30px;
 420              height: 30px;
 421          }
 422      }
 423  }
 424  
 425  // Make filter popover content scrollable if needed.
 426  .filter-scrollable {
 427      overflow-y: auto;
 428      max-height: 25em;
 429      margin-bottom: 1em;
 430  }
 431  
 432  // Required to fit a date mform into a filter popover.
 433  .filter-dates-popover {
 434      width: 100%;
 435      max-width: 41.5em;
 436  
 437      .mform {
 438          margin-left: -3em;
 439      }
 440  }
 441  
 442  $grading-drawer-width: 430px !default;
 443  $grading-animation-duration: .3s !default;
 444  $grading-icon-button-size: 36px !default;
 445  $grading-search-button-padding-left: calc(#{map-get($spacers, 2)} + 8px) !default;
 446  $grading-search-input-padding-left: calc(#{map-get($spacers, 2)} + #{map-get($spacers, 2)} + #{$grading-icon-button-size - ($input-border-width * 2)}) !default; /* stylelint-disable-line max-line-length */
 447  $grading-search-input-padding-right: calc(#{map-get($spacers, 2)} + #{$grading-icon-button-size}) !default;
 448  $grading-nav-bar-active-drawer-button-bottom: calc(#{map-get($spacers, 2) * -1} - 1px) !default;
 449  $grading-content-show-content-button-padding-left: calc(#{map-get($spacers, 2) * 2} + 45px) !default;
 450  
 451  @keyframes expandSearchButton {
 452      from {
 453          height: $grading-icon-button-size;
 454          width: $grading-icon-button-size;
 455          border-radius: $grading-icon-button-size / 2;
 456          background-color: $gray-200;
 457      }
 458      to {
 459          width: 100%;
 460          height: $input-height-lg;
 461          border-radius: 0;
 462          background-color: $input-bg;
 463          border-color: $input-border-color;
 464          padding-left: $grading-search-button-padding-left;
 465          padding-top: $input-padding-y-lg;
 466          padding-bottom: $input-padding-y-lg;
 467          @include font-size($input-font-size-lg);
 468          line-height: $input-line-height-lg;
 469          right: 0;
 470      }
 471  }
 472  
 473  @keyframes collapseSearchButton {
 474      from {
 475          width: 100%;
 476          height: $input-height-lg;
 477          border-radius: 0;
 478          background-color: $input-bg;
 479          border-color: $input-border-color;
 480          padding-left: $grading-search-button-padding-left;
 481          padding-top: $input-padding-y-lg;
 482          padding-bottom: $input-padding-y-lg;
 483          @include font-size($input-font-size-lg);
 484          line-height: $input-line-height-lg;
 485          right: 0;
 486      }
 487      to {
 488          height: $grading-icon-button-size;
 489          width: $grading-icon-button-size;
 490          border-radius: $grading-icon-button-size / 2;
 491          background-color: $gray-200;
 492      }
 493  }
 494  
 495  .path-mod-forum .unified-grader {
 496      @include media-breakpoint-up(xs) {
 497          .navbar {
 498              max-height: none;
 499              z-index: 1;
 500          }
 501      }
 502  
 503      .body-container {
 504          overflow: auto;
 505          &.hidden {
 506              display: none !important; /* stylelint-disable-line declaration-no-important */
 507          }
 508      }
 509  
 510      .userpicture {
 511          height: 60px;
 512          width: 60px;
 513      }
 514  
 515      .grader-grading-panel {
 516          top: 0;
 517          position: absolute;
 518          height: 100%;
 519          z-index: 0;
 520          width: $grading-drawer-width;
 521  
 522          &.hidden {
 523              right: ($grading-drawer-width * -1);
 524          }
 525  
 526          .grading-icon {
 527              width: $grading-icon-button-size;
 528          }
 529  
 530          .user-picker-container {
 531              .user-full-name {
 532                  max-width: 240px;
 533              }
 534  
 535              .page-link {
 536                  width: $grading-icon-button-size;
 537                  height: $grading-icon-button-size;
 538                  display: flex;
 539                  text-align: center;
 540                  align-items: center;
 541                  justify-content: center;
 542              }
 543          }
 544  
 545          .header-container {
 546              height: 65px;
 547              position: relative;
 548              overflow: hidden;
 549  
 550              .info-container {
 551                  position: absolute;
 552                  top: 50%;
 553                  left: 0;
 554                  transform: translateY(-50%);
 555                  width: 100%;
 556                  height: 100%;
 557                  padding: map-get($spacers, 2);
 558                  padding-right: calc(#{$grading-icon-button-size} + #{map-get($spacers, 2)});
 559                  opacity: 1;
 560                  visibility: visible;
 561                  transition: left $grading-animation-duration ease-in-out;
 562                  z-index: 1;
 563              }
 564  
 565              .toggle-search-button {
 566                  &.expand {
 567                      animation-name: expandSearchButton;
 568                      animation-duration: $grading-animation-duration;
 569                      animation-timing-function: ease-in-out;
 570                  }
 571  
 572                  &.collapse {
 573                      display: block;
 574                      animation-name: collapseSearchButton;
 575                      animation-duration: $grading-animation-duration;
 576                  }
 577              }
 578  
 579              .user-search-container {
 580                  overflow: hidden;
 581                  position: absolute;
 582                  top: 50%;
 583                  right: 0;
 584                  transform: translateY(-50%);
 585                  z-index: 2;
 586                  width: 100%;
 587                  height: 100% !important; /* stylelint-disable-line declaration-no-important */
 588                  padding: map-get($spacers, 2);
 589  
 590                  .search-input-container {
 591                      position: relative;
 592                      overflow: visible;
 593                      flex-wrap: nowrap;
 594  
 595                      input {
 596                          padding-left: $grading-search-input-padding-left;
 597                          padding-right: $grading-search-input-padding-right;
 598                          opacity: 1;
 599                          visibility: visible;
 600                          transition:
 601                              opacity 0s linear $grading-animation-duration,
 602                              visibility 0s linear;
 603                      }
 604  
 605                      .search-icon {
 606                          position: absolute;
 607                          top: 50%;
 608                          left: map-get($spacers, 2);
 609                          transform: translateY(-50%);
 610                          color: $input-color;
 611                          height: $grading-icon-button-size;
 612                          width: $grading-icon-button-size - ($input-border-width * 2);
 613                          background-color: $input-bg;
 614                          opacity: 1;
 615                          visibility: visible;
 616                          transition:
 617                              opacity 0s linear $grading-animation-duration,
 618                              visibility 0s linear $grading-animation-duration;
 619                      }
 620  
 621                      .toggle-search-button {
 622                          position: absolute;
 623                          top: 50%;
 624                          right: map-get($spacers, 2);
 625                          transform: translateY(-50%);
 626                          z-index: 1;
 627                          color: inherit;
 628                          text-align: left;
 629                          padding-left: 9px;
 630                          transition: right 0s linear $grading-animation-duration;
 631  
 632                          .expanded-icon {
 633                              opacity: 1;
 634                              visibility: visible;
 635                              max-width: 50px;
 636                              max-height: 50px;
 637                              transition:
 638                                  opacity 0s linear $grading-animation-duration,
 639                                  max-height 0s linear $grading-animation-duration,
 640                                  max-width 0s linear $grading-animation-duration,
 641                                  visibility 0s linear $grading-animation-duration;
 642                          }
 643  
 644                          .collapsed-icon {
 645                              opacity: 0;
 646                              visibility: hidden;
 647                              max-height: 0;
 648                              max-width: 0;
 649                              overflow: hidden;
 650                              transition:
 651                                  opacity 0s linear $grading-animation-duration,
 652                                  max-height 0s linear $grading-animation-duration,
 653                                  max-width 0s linear $grading-animation-duration,
 654                                  visibility 0s linear $grading-animation-duration;
 655                          }
 656                      }
 657                  }
 658  
 659                  &.collapsed {
 660                      width: calc(#{$grading-icon-button-size} + #{map-get($spacers, 2)} + #{map-get($spacers, 2)});
 661                      transition: width $grading-animation-duration ease-in-out;
 662  
 663                      .search-input-container {
 664                          flex-wrap: nowrap;
 665  
 666                          input,
 667                          .search-icon {
 668                              opacity: 0;
 669                              visibility: hidden;
 670                              transition:
 671                                  opacity 0s linear,
 672                                  visibility 0s linear;
 673                          }
 674  
 675                          input {
 676                              padding-left: 0;
 677                              padding-right: 0;
 678                          }
 679  
 680                          .toggle-search-button {
 681                              .expanded-icon {
 682                                  opacity: 0;
 683                                  visibility: hidden;
 684                                  max-height: 0;
 685                                  max-width: 0;
 686                                  overflow: hidden;
 687                                  transition:
 688                                      opacity 0s linear,
 689                                      max-height 0s linear,
 690                                      max-width 0s linear,
 691                                      visibility 0s linear;
 692                              }
 693  
 694                              .collapsed-icon {
 695                                  opacity: 1;
 696                                  visibility: visible;
 697                                  max-width: 50px;
 698                                  max-height: 50px;
 699                                  transition:
 700                                      opacity 0s linear,
 701                                      max-height 0s linear,
 702                                      max-width 0s linear,
 703                                      visibility 0s linear;
 704                              }
 705                          }
 706                      }
 707                  }
 708              }
 709  
 710              .user-search-container:not(.collapsed) + .info-container {
 711                  opacity: 0;
 712                  visibility: hidden;
 713                  left: calc(100% * -1);
 714                  transition:
 715                      left $grading-animation-duration ease-in-out,
 716                      opacity 0s linear $grading-animation-duration,
 717                      visibility 0s linear $grading-animation-duration,
 718                      padding 0s linear $grading-animation-duration;
 719              }
 720          }
 721      }
 722  
 723      .grader-module-content {
 724          overflow-y: auto;
 725          margin-right: $grading-drawer-width;
 726          @include transition(margin-right .2s ease-in-out);
 727      }
 728  
 729      .drawer-button {
 730          position: relative;
 731  
 732          &.active::after {
 733              content: "";
 734              position: absolute;
 735              bottom: $grading-nav-bar-active-drawer-button-bottom;
 736              left: 0;
 737              width: 100%;
 738              height: 3px;
 739              background-color: map-get($theme-colors, 'primary');
 740          }
 741  
 742          .icon {
 743              font-size: 20px;
 744              height: 20px;
 745              width: 20px;
 746          }
 747      }
 748  
 749      .grader-module-content-display {
 750          .discussion-container {
 751              &:last-of-type {
 752                  > hr {
 753                      display: none;
 754                  }
 755              }
 756  
 757              .posts-container {
 758                  &:last-of-type {
 759                      > hr {
 760                          display: none;
 761                      }
 762                  }
 763  
 764                  .parent-container {
 765                      position: relative;
 766  
 767                      .show-content-button {
 768                          position: absolute;
 769                          height: 100%;
 770                          width: 100%;
 771                          left: 0;
 772                          top: 0;
 773                          padding-left: $grading-content-show-content-button-padding-left;
 774                          text-align: left;
 775                          z-index: 1;
 776  
 777                          &:not(.collapsed) {
 778                              display: none;
 779                          }
 780                      }
 781  
 782                      .content {
 783                          display: block;
 784                          height: auto !important; /* stylelint-disable-line declaration-no-important */
 785  
 786                          .header {
 787                              transition: margin-bottom $grading-animation-duration ease-in-out;
 788  
 789                              div + div {
 790                                  opacity: 1;
 791                                  visibility: visible;
 792                                  max-height: none;
 793                                  transition:
 794                                      opacity $grading-animation-duration linear,
 795                                      visibility 0s linear;
 796                              }
 797                          }
 798  
 799                          .body-content-container {
 800                              opacity: 1;
 801                              visibility: visible;
 802                              max-height: none;
 803                              transition:
 804                                  opacity $grading-animation-duration linear,
 805                                  visibility 0s linear;
 806                          }
 807  
 808                          .forum-post-core {
 809                              opacity: 1;
 810                              visibility: visible;
 811                              max-height: none;
 812                              transition:
 813                                  opacity $grading-animation-duration linear,
 814                                  visibility 0s linear;
 815                          }
 816                      }
 817  
 818                      .show-content-button.collapsed + .content {
 819                          opacity: .3;
 820  
 821                          .header {
 822                              margin-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
 823  
 824                              div + div {
 825                                  opacity: 0;
 826                                  visibility: hidden;
 827                                  max-height: 0;
 828                              }
 829                          }
 830  
 831                          .body-content-container {
 832                              opacity: 0;
 833                              visibility: hidden;
 834                              max-height: 0;
 835                          }
 836  
 837                          .forum-post-core {
 838                              opacity: 0;
 839                              visibility: hidden;
 840                              max-height: 0;
 841                          }
 842                      }
 843  
 844                      .show-content-button.collapsed:hover + .content,
 845                      .show-content-button.collapsed:focus + .content {
 846                          opacity: 1;
 847                      }
 848                  }
 849              }
 850          }
 851  
 852          .no-post-container {
 853              .icon {
 854                  height: 250px;
 855                  width: 250px;
 856                  margin-right: 0;
 857              }
 858          }
 859  
 860          .nested-v2-display-mode {
 861              .discussion-container {
 862                  .posts-container {
 863                      .parent-container {
 864                          .show-content-button {
 865                              padding-left: $author-image-width + $author-image-margin;
 866                          }
 867                      }
 868                  }
 869              }
 870          }
 871      }
 872  
 873      .no-search-results-container {
 874          .icon {
 875              height: 250px;
 876              width: 250px;
 877              margin-right: 0;
 878          }
 879      }
 880  
 881      .nested-v2-display-mode {
 882          .view-context-button {
 883              margin-left: $author-image-width + $author-image-margin;
 884              border-radius: $border-radius-lg;
 885          }
 886  
 887          .parent-container {
 888              .author-image-container {
 889                  position: relative;
 890  
 891                  &:after {
 892                      position: absolute;
 893                      top: calc(#{$author-image-width} + #{map-get($spacers, 2)});
 894                      content: "";
 895                      background-color: $gray-200;
 896                      width: 2px;
 897                      height: calc(100% - #{$author-image-width} + #{map-get($spacers, 2)});
 898                  }
 899              }
 900          }
 901  
 902          .parent-container + .post-container {
 903              .author-image-container {
 904                  img {
 905                      width: $author-image-width-sm !important; /* stylelint-disable-line declaration-no-important */
 906                  }
 907              }
 908          }
 909      }
 910  }
 911  
 912  .path-mod-forum .unified-grader .nested-v2-display-mode,
 913  .path-mod-forum .modal .nested-v2-display-mode {
 914      .post-subject {
 915          display: none;
 916      }
 917  }
 918  
 919  @include media-breakpoint-down(xs) {
 920      .path-mod-forum .unified-grader {
 921          .grader-grading-panel {
 922              width: 100%;
 923              position: fixed;
 924              height: calc(100vh - 50px);
 925              overflow: scroll;
 926              top: 50px;
 927          }
 928          .body-container {
 929              overflow: visible;
 930          }
 931      }
 932  }
 933  
 934  // End styling for mod_forum.
 935  
 936  .maincalendar .calendarmonth td,
 937  .maincalendar .calendarmonth th {
 938      border: 1px dotted $table-border-color;
 939  }
 940  
 941  .path-grade-report-grader h1 {
 942      text-align: inherit;
 943  }
 944  
 945  #page-mod-chat-gui_basic input#message {
 946      max-width: 100%;
 947  }
 948  
 949  #page-mod-data-view #singleimage {
 950      width: auto;
 951  }
 952  
 953  .path-mod-data form {
 954      margin-top: 10px;
 955  }
 956  
 957  .template_heading {
 958      margin-top: 10px;
 959  }
 960  
 961  .breadcrumb-button {
 962      margin-top: 4px;
 963  }
 964  
 965  .breadcrumb-button .singlebutton {
 966      float: left;
 967      margin-left: 4px;
 968  }
 969  
 970  .langmenu form {
 971      margin: 0;
 972  }
 973  // contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
 974  canvas {
 975      -ms-touch-action: auto;
 976  }
 977  
 978  div#dock {
 979      display: none;
 980  }
 981  
 982  // Choice module
 983  
 984  // Lesson module
 985  
 986  /** General styles (scope: all of lesson) **/
 987  .path-mod-lesson .invisiblefieldset.fieldsetfix {
 988      display: block;
 989  }
 990  .path-mod-lesson .answeroption .checkbox label p {
 991      display: inline;
 992  }
 993  .path-mod-lesson .form-inline label.form-check-label {
 994      display: inline-block;
 995  }
 996  .path-mod-lesson .slideshow {
 997      overflow: auto;
 998      padding: 15px;
 999  }
1000  #page-mod-lesson-view .branchbuttoncontainer .singlebutton button[type="submit"] {
1001      white-space: normal;
1002  }
1003  #page-mod-lesson-view {
1004      .vertical .singlebutton {
1005          display: block;
1006          + .singlebutton {
1007              margin-left: 0;
1008              margin-top: 1rem;
1009          }
1010      }
1011      .fitem .felement .custom-select {
1012          align-self: flex-start;
1013      }
1014  }
1015  .path-mod-lesson .generaltable td {
1016      vertical-align: middle;
1017      label {
1018          margin-bottom: 0;
1019      }
1020      .highlight {
1021          display: inline-block;
1022          margin-left: 0.25rem;
1023      }
1024      input[type="checkbox"] {
1025          display: block;
1026      }
1027  }
1028  
1029  .path-mod-wiki .wiki_headingtitle,
1030  .path-mod-wiki .midpad,
1031  .path-mod-wiki .wiki_headingtime {
1032      text-align: inherit;
1033  }
1034  
1035  .path-mod-wiki .wiki_contentbox {
1036      width: 100%;
1037  }
1038  
1039  // Survey module
1040  
1041  .path-mod-survey {
1042      .surveytable {
1043          > tbody > tr:nth-of-type(odd) {
1044              background-color: $table-bg;
1045          }
1046  
1047          > tbody > tr:nth-of-type(even) {
1048              background-color: $table-accent-bg;
1049          }
1050  
1051          .rblock label {
1052              text-align: center;
1053          }
1054      }
1055  
1056  }
1057  
1058  .nav .caret {
1059      margin-left: 4px;
1060  }
1061  
1062  // Dividers
1063  .nav {
1064      .divider {
1065          overflow: hidden;
1066          width: 0;
1067      }
1068  }
1069  
1070  // Usermenu
1071  .usermenu {
1072      .login {
1073          line-height: 2.25rem;
1074      }
1075  }
1076  
1077  .userloggedinas,
1078  .userswitchedrole,
1079  .loginfailures {
1080      .usermenu {
1081          .usertext {
1082              float: left;
1083              text-align: right;
1084              margin-right: $spacer / 2;
1085              height: 35px;
1086              .meta {
1087                  display: block;
1088                  font-size: $font-size-sm;
1089              }
1090          }
1091          .avatar {
1092              img {
1093                  margin: 0;
1094              }
1095          }
1096      }
1097  }
1098  
1099  .userloggedinas .usermenu {
1100      .userbutton .avatars {
1101          position: relative;
1102          display: inline-block;
1103          .avatar {
1104              &.current {
1105                  display: inline-block;
1106                  position: absolute;
1107                  bottom: 0;
1108                  right: 0;
1109                  width: 20px;
1110                  height: 20px;
1111                  border-radius: 50%;
1112                  img {
1113                      vertical-align: baseline;
1114                  }
1115              }
1116              img {
1117                  width: inherit;
1118                  height: inherit;
1119              }
1120          }
1121          .realuser {
1122              width: 35px;
1123              height: 35px;
1124              display: inline-block;
1125          }
1126      }
1127  }
1128  
1129  @include media-breakpoint-down(sm) {
1130      .usertext {
1131          display: none;
1132      }
1133  }
1134  
1135  // Quiz module
1136  .path-mod-quiz .mod-quiz-edit-content {
1137      // Force the quiz edit page to always be large enough to prevent scrolling when accessing the menu.
1138      margin-bottom: 10rem;
1139  }
1140  
1141  #page-mod-quiz-mod #id_reviewoptionshdr .col-md-3,
1142  #page-mod-quiz-mod #id_reviewoptionshdr .col-md-9 {
1143      width: auto;
1144      max-width: none;
1145  }
1146  #page-mod-quiz-mod #id_reviewoptionshdr .form-group {
1147      float: left;
1148      width: 20rem;
1149      display: inline-block;
1150      min-height: 12rem;
1151  }
1152  
1153  #page-mod-quiz-mod #id_reviewoptionshdr .btn-link {
1154      line-height: 1.5;
1155      vertical-align: bottom;
1156  }
1157  #page-mod-quiz-mod #id_reviewoptionshdr .form-inline {
1158      float: left;
1159      clear: left;
1160  }
1161  #page-mod-quiz-mod #id_reviewoptionshdr .form-check {
1162      width: auto;
1163      height: 22px;
1164      justify-content: flex-start;
1165  }
1166  
1167  #page-mod-quiz-mod #id_reviewoptionshdr .review_option_item {
1168      width: 90%;
1169      height: 22px;
1170  }
1171  
1172  // Question navigation block.
1173  .path-mod-quiz #mod_quiz_navblock {
1174      .qnbutton {
1175          text-decoration: none;
1176          font-size: 14px;
1177          line-height: 20px;
1178          font-weight: normal;
1179          background-color: $card-bg;
1180          background-image: none;
1181          height: 40px;
1182          width: 30px;
1183          border-radius: 3px;
1184          border: 0;
1185          overflow: visible;
1186          margin: 0 6px 6px 0;
1187      }
1188  
1189      span.qnbutton {
1190          cursor: default;
1191          background-color: $input-disabled-bg;
1192          color: $gray-700;
1193      }
1194  
1195      a.qnbutton:hover,
1196      a.qnbutton:active,
1197      a.qnbutton:focus {
1198          text-decoration: underline;
1199      }
1200  
1201      .qnbutton .thispageholder {
1202          border: 1px solid;
1203          border-radius: 3px;
1204          z-index: 1;
1205      }
1206  
1207      .qnbutton.thispage .thispageholder {
1208          border-width: 3px;
1209      }
1210  
1211      .allquestionsononepage .qnbutton.thispage .thispageholder {
1212          border-width: 1px;
1213      }
1214  
1215      .qnbutton.flagged .thispageholder {
1216          background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0 no-repeat;
1217      }
1218  
1219      .qnbutton .trafficlight {
1220          border: 0;
1221          background: $card-bg none center / 10px no-repeat scroll;
1222          height: 20px;
1223          margin-top: 20px;
1224          border-radius: 0 0 3px 3px;
1225      }
1226  
1227      .qnbutton.notyetanswered .trafficlight,
1228      .qnbutton.invalidanswer .trafficlight {
1229          background-color: $card-bg;
1230      }
1231  
1232      .qnbutton.invalidanswer .trafficlight {
1233          background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
1234      }
1235  
1236      .qnbutton.correct .trafficlight {
1237          background-image: url([[pix:theme|mod/quiz/checkmark]]);
1238          background-color: $success;
1239      }
1240  
1241      .qnbutton.blocked .trafficlight {
1242          background-image: url([[pix:core|t/locked]]);
1243          background-color: $input-disabled-bg;
1244      }
1245  
1246      .qnbutton.notanswered .trafficlight,
1247      .qnbutton.incorrect .trafficlight {
1248          background-color: $danger;
1249      }
1250  
1251      .qnbutton.partiallycorrect .trafficlight {
1252          background-image: url([[pix:theme|mod/quiz/whitecircle]]);
1253          background-color: $warning;
1254      }
1255  
1256      .qnbutton.complete .trafficlight,
1257      .qnbutton.answersaved .trafficlight,
1258      .qnbutton.requiresgrading .trafficlight {
1259          background-color: $gray-600;
1260      }
1261  }
1262  
1263  #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer form input {
1264      height: 1.4em;
1265      vertical-align: middle;
1266  }
1267  
1268  #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer {
1269      padding: 0;
1270      margin: 0 0.4em;
1271  }
1272  
1273  /* Countdown timer. */
1274  #page-mod-quiz-attempt #region-main {
1275      overflow-x: inherit;
1276  }
1277  
1278  #quiz-timer-wrapper {
1279      display: none;
1280      position: sticky;
1281      justify-content: end;
1282      top: $navbar-height + 5px;
1283      z-index: $zindex-sticky;
1284      #quiz-timer {
1285          border: $border-width solid $red;
1286          background-color: $white;
1287      }
1288  }
1289  .pagelayout-embedded #quiz-timer-wrapper {
1290      top: 5px;
1291  }
1292  
1293  @for $i from 0 through 16 {
1294      #quiz-timer-wrapper #quiz-timer.timeleft#{$i} {
1295          $bg: lighten($red, ($i * 3%));
1296          background-color: $bg;
1297          color: color-yiq($bg);
1298      }
1299  }
1300  
1301  // Assign.
1302  .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
1303      top: auto;
1304  }
1305  
1306  // This section removes the responsiveness from the form in the grading panel
1307  $popout-header-font-size: 1.5 * $font-size-base;
1308  // This can't be calculated from modal-title-padding because we are mixing px and rem units.
1309  $popout-header-height: 4rem;
1310  
1311  .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .felement {
1312      height: calc(100% - #{$popout-header-height});
1313  }
1314  
1315  .path-mod-assign [data-region="grade-panel"] {
1316      padding-top: $spacer;
1317  }
1318  .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3,
1319  .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-9 {
1320      width: 100%;
1321      padding: 0;
1322      max-width: 100%;
1323      flex: none;
1324  }
1325  .path-mod-assign [data-region="grade-panel"] fieldset,
1326  .path-mod-assign [data-region="grade-panel"] .fitem.row {
1327      margin: 0;
1328  }
1329  
1330  .path-mod-assign [data-region="grade-panel"] .mform .fitem.has-popout .felement {
1331      width: 100%;
1332  }
1333  
1334  .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement {
1335      width: auto;
1336  }
1337  
1338  // Now styles for the popout sections.
1339  
1340  .path-mod-assign [data-region="grade-panel"] .popout {
1341      background-color: $modal-content-bg;
1342  }
1343  
1344  .path-mod-assign [data-region="grade-panel"] .fitem.has-popout {
1345      background-color: $card-bg;
1346      @include border-radius($card-border-radius);
1347      border: $card-border-width solid $card-border-color;
1348      padding: $card-spacer-x;
1349      margin-bottom: $spacer;
1350  }
1351  .path-mod-assign [data-region="grade-panel"] .has-popout .col-md-3 {
1352      border-bottom: $hr-border-width solid $hr-border-color;
1353      margin-bottom: $spacer;
1354  }
1355  
1356  
1357  .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 {
1358      display: flex;
1359      align-items: flex-start;
1360      justify-content: space-between;
1361      font-size: $popout-header-font-size;
1362  }
1363  
1364  .path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
1365      margin-top: 0;
1366  }
1367  
1368  // Now style the fixed header elements.
1369  
1370  .path-mod-assign [data-region="assignment-info"] {
1371      overflow-y: hidden;
1372  }
1373  
1374  .path-mod-assign [data-region="grading-navigation"] {
1375      padding: 6px;
1376  }
1377  
1378  .path-mod-assign [data-region="grade-actions"] {
1379      padding: 10px;
1380  }
1381  
1382  .path-mod-assign [data-region="user-info"] .img-rounded {
1383      margin-top: 0;
1384  }
1385  
1386  .path-mod-assign [data-region="grading-navigation-panel"] {
1387      height: 85px;
1388  }
1389  
1390  @media (max-width: 767px) {
1391      .path-mod-assign [data-region="grading-navigation-panel"] {
1392          height: auto;
1393      }
1394      .path-mod-assign [data-region="user-info"] {
1395          margin-top: 1rem;
1396      }
1397  }
1398  
1399  .path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
1400      width: auto;
1401      display: inline-block;
1402  }
1403  
1404  /**
1405   * Assign feedback.
1406   */
1407  .assignfeedback_editpdf_widget * {
1408      box-sizing: content-box;
1409  }
1410  
1411  .assignfeedback_editpdf_widget button {
1412      box-sizing: border-box;
1413  }
1414  
1415  .assignfeedback_editpdf_widget .commentcolourbutton img {
1416      border-width: 0;
1417  }
1418  
1419  .assignfeedback_editpdf_widget .label {
1420      position: relative;
1421      padding: $alert-padding-y $alert-padding-x;
1422      margin-bottom: $alert-margin-bottom;
1423      border: $alert-border-width solid transparent;
1424      @include border-radius($alert-border-radius);
1425      @include alert-variant(theme-color-level('info', $alert-bg-level), theme-color-level('info', $alert-border-level), theme-color-level('info', $alert-color-level)); /* stylelint-disable-line max-line-length */
1426  }
1427  
1428  .assignfeedback_editpdf_menu {
1429      padding: 0;
1430  }
1431  
1432  .path-mod-assign [data-region="grade-panel"] .gradingform_guide .remark .commentchooser {
1433      float: none;
1434  }
1435  .path-mod-assign [data-region="grade-panel"] .gradingform_guide .markingguideremark {
1436      width: 100%;
1437  }
1438  .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement[data-fieldtype="grading"] {
1439      padding-left: $spacer;
1440      padding-right: $spacer;
1441  }
1442  .path-mod-assign [data-region="grade-panel"] .showmarkerdesc,
1443  .path-mod-assign [data-region="grade-panel"] .showstudentdesc {
1444      background-color: $card-bg;
1445  }
1446  
1447  /**
1448   * Mod LTI.
1449   */
1450  .path-admin-mod-lti {
1451      .btn .loader img,
1452      #tool-list-loader-container .loader img {
1453          height: auto;
1454      }
1455  }