[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  // Forum module
  13  
  14  .path-mod-forum .forumsearch {
  15      input,
  16      .helptooltip {
  17          margin: 0 3px;
  18      }
  19  }
  20  
  21  .path-mod-forum .forumheaderlist,
  22  .path-mod-forum .forumheaderlist td {
  23      border: none;
  24  }
  25  
  26  .path-mod-forum {
  27      .forumheaderlist {
  28          thead .header,
  29          tbody .discussion td {
  30              white-space: normal;
  31              vertical-align: top;
  32              padding-left: 0.5em;
  33              padding-right: 0.5em;
  34          }
  35  
  36          thead .header {
  37              white-space: normal;
  38              vertical-align: top;
  39          }
  40  
  41          thead .header.replies {
  42              text-align: center;
  43          }
  44          thead .header.lastpost {
  45              text-align: right;
  46          }
  47          thead .header th,
  48          tbody .discussion td {
  49              &.discussionsubscription {
  50                  width: 16px;
  51                  padding-left: 0.5em;
  52                  padding-right: 0.5em;
  53              }
  54          }
  55          .discussion {
  56              .author,
  57              .replies,
  58              .lastpost {
  59                  white-space: normal;
  60              }
  61              .discussionsubscription,
  62              .replies {
  63                  text-align: center;
  64              }
  65              .topic,
  66              .discussionsubscription,
  67              .topic.starter,
  68              .picture,
  69              .author,
  70              .replies,
  71              .lastpost {
  72                  vertical-align: top;
  73              }
  74          }
  75      }
  76  }
  77  
  78  .forumpost {
  79      .well;
  80      padding: 6px;
  81      .header {
  82          margin-bottom: 3px;
  83      }
  84      .picture img {
  85          margin: 3px;
  86          &.userpicture {
  87              margin-left: 3px;
  88              margin-right: 10px;
  89          }
  90      }
  91      .content {
  92          .posting.fullpost {
  93              margin-top: 8px;
  94          }
  95      }
  96      .row {
  97          .topic,
  98          .content-mask,
  99          .options {
 100              margin-left: 48px;
 101          }
 102          &.side {
 103              clear: both;
 104          }
 105      }
 106  }
 107  
 108  .dir-rtl .forumpost {
 109      .picture img {
 110          &.userpicture {
 111              margin-left: 10px;
 112              margin-right: 3px;
 113          }
 114      }
 115      .row {
 116          .topic,
 117          .content-mask,
 118          .options {
 119              margin-left: 0;
 120              margin-right: 48px;
 121          }
 122      }
 123  }
 124  
 125  .forumpost .row .left {
 126      width: 48px;
 127  }
 128  
 129  .forumpost .options .commands {
 130      margin-left: 0;
 131  }
 132  
 133  .forumpost .subject {
 134      font-weight: bold;
 135  }
 136  
 137  // Override hardcoded forum modules styling
 138  .forumsearch input[type=text] {
 139      margin-bottom: 0 !important;
 140  }
 141  
 142  #page-mod-forum-discuss .discussioncontrols {
 143      width: auto;
 144      margin: 0;
 145  }
 146  
 147  #page-footer {
 148      margin-top: 1em;
 149      padding: 1em 0;
 150      border-top: 2px solid @tableBorder;
 151  }
 152  
 153  .maincalendar .calendarmonth td,
 154  .maincalendar .calendarmonth th {
 155      border: 1px dotted @tableBorder;
 156  }
 157  
 158  .path-grade-report-grader h1 {
 159      text-align: inherit;
 160  }
 161  
 162  #page-mod-chat-gui_basic input#message {
 163      max-width: 100%;
 164  }
 165  
 166  #page-mod-data-view #singleimage {
 167      width: auto;
 168  }
 169  
 170  .path-mod-data form {
 171      margin-top: 10px;
 172  }
 173  
 174  .template_heading {
 175      margin-top: 10px;
 176  }
 177  
 178  .breadcrumb-button {
 179      float: right;
 180      margin-top: 4px;
 181  }
 182  
 183  .breadcrumb-button .singlebutton {
 184      float: left;
 185      margin-left: 4px;
 186  }
 187  
 188  .dir-rtl {
 189      .nav-tabs > li,
 190      .nav-pills > li {
 191          float: right;
 192      }
 193  }
 194  .dir-rtl .navbar .brand {
 195      padding: 10px 0 10px 20px;
 196      float: right;
 197  }
 198  
 199  .navbar-inverse .logininfo a {
 200      color: @navbarInverseLinkColor;
 201  }
 202  .navbar-inverse .logininfo a:hover {
 203      background-color: @navbarInverseLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
 204      color: @navbarInverseLinkColorHover;
 205  }
 206  
 207  .navbar-fixed-top,
 208  .navbar-fixed-bottom {
 209      z-index: 4030;
 210  }
 211  
 212  .dir-rtl .breadcrumb-button,
 213  .dir-rtl .navbar .btn-navbar {
 214      float: left;
 215  }
 216  
 217  .dir-rtl .breadcrumb-button .singlebutton {
 218      float: right;
 219      margin-right: 4px;
 220      margin-left: 0;
 221  }
 222  .dir-rtl .breadcrumb-button .singlebutton div,
 223  .dir-rtl .breadcrumb-button .singlebutton div input[type="submit"] {
 224      margin-right: 5px;
 225      margin-left: 0;
 226  }
 227  
 228  .ie .row-fluid .desktop-first-column {
 229      margin-left: 0;
 230  }
 231  .langmenu form {
 232      margin: 0;
 233  }
 234  .container-fluid {
 235      max-width: 1680px;
 236      margin: 0 auto;
 237  }
 238  // contributed by Paul Hibbitts, see http://msdn.microsoft.com/en-us/library/ie/jj583807(v=vs.85).aspx
 239  canvas {
 240      -ms-touch-action: auto;
 241  }
 242  
 243  div#dock {
 244      display: none;
 245  }
 246  
 247  // Choice module
 248  
 249  .path-mod-choice {
 250      .horizontal  .choices {
 251          margin: 0;
 252          .option {
 253              display: inline-block;
 254              padding: 10px;
 255          }
 256      }
 257      .results .data {
 258          white-space: normal;
 259      }
 260  }
 261  
 262  // Lesson module
 263  
 264  .path-mod-lesson .firstpageoptions {
 265      margin: auto;
 266      min-width: 280px;
 267      width: 60%;
 268  }
 269  
 270  .path-mod-lesson .centerpadded {
 271      padding: 5px;
 272      text-align: center;
 273  }
 274  
 275  .path-mod-wiki .wiki_headingtitle,
 276  .path-mod-wiki .midpad,
 277  .path-mod-wiki .wiki_headingtime {
 278      text-align: inherit;
 279  }
 280  
 281  .path-mod-wiki .wiki_contentbox {
 282      width: 100%;
 283  }
 284  
 285  // Dropdown styling.
 286  .dropdown-menu {
 287      > li > a {
 288          padding: 3px 20px 3px 8px;
 289      }
 290  }
 291  .dir-rtl .dropdown-menu {
 292      > li > a {
 293          padding: 3px 8px 3px 20px;
 294      }
 295  }
 296  .dir-rtl .dropdown-submenu > .dropdown-menu {
 297      .border-radius(6px 0px 6px 6px);
 298  }
 299  
 300  
 301  // Survey module
 302  
 303  .path-mod-survey {
 304      .surveytable {
 305          > tbody > tr:nth-of-type(odd) {
 306              background-color: @tableBackground;
 307          }
 308          > tbody > tr:nth-of-type(even) {
 309              background-color: @tableBackgroundAccent;
 310          }
 311          .rblock label {
 312              text-align: center;
 313          }
 314      }
 315      .resultgraph,
 316      .reportsummary,
 317      .studentreport,
 318      .reportbuttons,
 319      .centerpara {
 320          text-align: center;
 321      }
 322  }
 323  // rtl overrides
 324  .dir-rtl {
 325      &.path-mod-forum .forumheaderlist {
 326          thead .header.lastpost {
 327              text-align: left;
 328          }
 329          .discussion {
 330              .lastpost {
 331                  text-align: left;
 332              }
 333          }
 334      }
 335  }
 336  
 337  .nav .caret {
 338      margin-left: 4px;
 339  }
 340  .dir-rtl .nav .caret {
 341      margin-right: 4px;
 342  }
 343  
 344  // Dividers
 345  .nav {
 346      .divider {
 347          overflow: hidden;
 348          width: 0;
 349          height: @navbarHeight;
 350          border-left: 1px solid @navbarBackground;
 351          border-right: 1px solid @navbarBackgroundHighlight;
 352      }
 353  }
 354  .navbar-inverse {
 355      .nav {
 356          .divider {
 357              border-left-color: @navbarInverseBackground;
 358              border-right-color: lighten(@navbarInverseBackground, 25%);
 359          }
 360      }
 361  }
 362  .dropdown-menu {
 363      .divider {
 364          width: auto;
 365          height: 1px;
 366          border-left: 0 none;
 367          border-right: 0 none;
 368      }
 369  }
 370  
 371  // Usermenu
 372  .usermenu {
 373      .login {
 374          color: @navbarText;
 375          line-height: 40px;
 376          a {
 377              color: @linkColor;
 378              &:hover,
 379              &:focus {
 380                  color: @linkColorHover;
 381                  text-decoration: underline;
 382              }
 383          }
 384      }
 385      .moodle-actionmenu {
 386  
 387          .toggle-display {
 388              display: block;
 389              opacity: 1;
 390              color: @navbarLinkColor;
 391              line-height: 40px;
 392              height: 40px;
 393              &:hover {
 394                  color: @navbarLinkColorHover;
 395              }
 396  
 397              .userbutton {
 398                  height: 40px;
 399                  line-height: 40px;
 400                  .avatars {
 401                      display: inline-block;
 402                      height: 36px;
 403                      width: 36px;
 404                      vertical-align: middle;
 405                      margin-right: 6px;
 406                      margin-left: 6px;
 407  
 408                      .avatar,
 409                      img {
 410                          display: block;
 411                      }
 412                  }
 413                  .usertext {
 414                      display: inline-block;
 415                      vertical-align: middle;
 416                      line-height: 1em;
 417                      color: inherit;
 418                      .meta,
 419                      .role {
 420                          display: block;
 421                          font-size: 12px;
 422                          .value {
 423                              font-weight: bold;
 424                          }
 425                      }
 426                      .role {
 427                          font-weight: bold;
 428                      }
 429                  }
 430              }
 431  
 432              // Hide caret when JS is disabled.
 433              .caret {
 434                  display: none;
 435              }
 436          }
 437  
 438  
 439          // A little bit of visual feedback for the action menu when Javascript is disabled.
 440          .menu {
 441              .menu-action.icon {
 442                  img {
 443                      border-radius: 0;
 444                      background: transparent;
 445                      box-shadow: none;
 446                  }
 447                  &:hover img {
 448                      background: #fff;
 449                      border-radius: 4px;
 450                      box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.125);
 451                  }
 452              }
 453          }
 454          &[data-enhanced] .menu {
 455              .menu-action.icon,
 456              .menu-action.icon:hover {
 457                  img {
 458                      border-radius: 0;
 459                      background: transparent;
 460                      box-shadow: none;
 461                  }
 462              }
 463          }
 464  
 465      }
 466  }
 467  .navbar-inverse {
 468      .usermenu {
 469          .login {
 470              color: @navbarInverseText;
 471              a {
 472                  color: @navbarInverseLinkColor;
 473                  &:hover {
 474                      color: @navbarInverseLinkColorHover;
 475                  }
 476              }
 477          }
 478          .moodle-actionmenu {
 479              .toggle-display {
 480                  color: @navbarInverseLinkColor;
 481              }
 482              .userbutton {
 483                  .usertext {
 484                      color: @navbarInverseLinkColor;
 485                      .meta {
 486                          color: @navbarInverseText;
 487                          .value {
 488                              color: @navbarInverseLinkColor;
 489                          }
 490                      }
 491                  }
 492              }
 493              &:hover {
 494                  .usertext {
 495                      color: @navbarInverseLinkColorHover;
 496                      .meta {
 497                          color: @navbarInverseText;
 498                          .value {
 499                              color: @navbarInverseLinkColorHover;
 500                          }
 501                      }
 502                  }
 503              }
 504              &[data-enhanced] .toggle-display.textmenu {
 505                  .caret {
 506                      border-top-color: @navbarInverseLinkColorHover;
 507                  }
 508              }
 509  
 510              // A little bit of visual feedback for the action menu when Javascript is disabled.
 511              .menu {
 512                  .menu-action.icon {
 513                      img {
 514                          border-radius: 0;
 515                          background: transparent;
 516                          box-shadow: none;
 517                      }
 518                      &:hover img {
 519                          background: #333;
 520                          border-radius: 4px;
 521                          box-shadow: 0px 0px 16px rgba(255, 255, 255, 1);
 522                      }
 523                  }
 524              }
 525              &[data-enhanced] .menu {
 526                  .menu-action.icon,
 527                  .menu-action.icon:hover {
 528                      img {
 529                          border-radius: 0;
 530                          background: transparent;
 531                          box-shadow: none;
 532                      }
 533                  }
 534              }
 535          }
 536      }
 537  }
 538  
 539  .jsenabled {
 540      .usermenu {
 541          .moodle-actionmenu {
 542              .toggle-display {
 543                  display: block;
 544  
 545                  &.textmenu {
 546                      padding-left: 8px;
 547                      padding-right: 8px;
 548                  }
 549  
 550                  // Show caret when JS is enabled.
 551                  .caret {
 552                      display: inline-block;
 553                      position: relative;
 554                      top: 9px;
 555                  }
 556              }
 557  
 558              > .menubar {
 559                  display: block;
 560                  margin: 0px;
 561              }
 562              > .menu {
 563                  min-width: 160px;
 564                  .filler {
 565                      display: block;
 566                      .nav-divider();
 567                  }
 568              }
 569  
 570              &.show {
 571                  background-color: @navbarLinkBackgroundActive;
 572                  .menu {
 573                      padding: 5px 0;
 574                      margin: 2px 0 0;
 575                      background-clip: padding-box;
 576                      &:before {
 577                          content: '';
 578                          display: inline-block;
 579                          border-left: 7px solid transparent;
 580                          border-right: 7px solid transparent;
 581                          border-bottom: 7px solid #ccc;
 582                          border-bottom-color: @dropdownBorder;
 583                          position: absolute;
 584                          top: -7px;
 585                      }
 586                      &:after {
 587                          content: '';
 588                          display: inline-block;
 589                          border-left: 6px solid transparent;
 590                          border-right: 6px solid transparent;
 591                          border-bottom: 6px solid @dropdownBackground;
 592                          position: absolute;
 593                          top: -6px;
 594                      }
 595  
 596                      a {
 597                          border-radius: 0;
 598  
 599                          &:focus {
 600                              text-decoration: none;
 601                          }
 602                          &:hover {
 603                              text-decoration: none;
 604                              #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
 605                          }
 606                      }
 607                      &.align-tr-br {
 608                          margin-top: 2px;
 609                      }
 610                      .box-shadow (0 5px 10px rgba(0, 0, 0, 0.2));
 611                  }
 612              }
 613          }
 614      }
 615      .navbar-inverse {
 616          .usermenu {
 617              .moodle-actionmenu {
 618  
 619                  &.show {
 620                      background-color: @navbarInverseLinkBackgroundActive;
 621                  }
 622              }
 623          }
 624      }
 625  }
 626  
 627  .dir-ltr {
 628      .usermenu {
 629          float: right;
 630          > .moodle-actionmenu {
 631              > .menu {
 632                  &:before {
 633                      right: 9px;
 634                  }
 635                  &:after {
 636                      right: 10px;
 637                  }
 638              }
 639              > .menubar li a {
 640                  text-align: right;
 641              }
 642          }
 643      }
 644      &.userloggedinas .usermenu .userbutton .avatars {
 645          .avatar {
 646              &.current {
 647                  left: 16px;
 648              }
 649          }
 650      }
 651  }
 652  
 653  .dir-rtl {
 654      .usermenu {
 655          float: left;
 656          > .moodle-actionmenu {
 657              > .menu {
 658                  margin-right: 0px;
 659                  &:before {
 660                      left: 9px;
 661                  }
 662                  &:after {
 663                      left: 10px;
 664                  }
 665              }
 666              > .menubar li a {
 667                  text-align: left;
 668              }
 669          }
 670      }
 671      &.userloggedinas .usermenu .userbutton .avatars {
 672          .avatar {
 673              &.current {
 674                  left: -14px;
 675              }
 676          }
 677      }
 678  }
 679  
 680  
 681  .userloggedinas .usermenu .userbutton .avatars {
 682      .avatar {
 683          &.current {
 684              position: relative;
 685              top: 4px;
 686              left: 4px;
 687              width: 20px;
 688              height: 20px;
 689              margin-top: 11px;
 690              margin-bottom: -34px;
 691              border: 1px solid #fff;
 692              border-radius: 50%;
 693              box-shadow: -2px -2px 16px rgba(0, 0, 0, 0.25);
 694          }
 695          img {
 696              width: inherit;
 697              height: inherit;
 698          }
 699          overflow: hidden;
 700      }
 701  }
 702  
 703  // Quiz module
 704  
 705  // Question navigation block.
 706  .path-mod-quiz #mod_quiz_navblock {
 707      .qnbutton {
 708          text-decoration: none;
 709          font-size: 14px;
 710          line-height: 20px;
 711          font-weight: normal;
 712          background-color: @white;
 713          background-image: none;
 714          height: 40px;
 715          width: 30px;
 716          border-radius: 3px;
 717          border: 0;
 718          overflow: visible;
 719          margin: 0 6px 6px 0;
 720      }
 721      span.qnbutton {
 722          cursor: default;
 723          background-color: @inputDisabledBackground;
 724          color: @gray;
 725      }
 726      a.qnbutton:hover,
 727      a.qnbutton:active,
 728      a.qnbutton:focus {
 729          text-decoration: underline;
 730      }
 731  
 732      .qnbutton .thispageholder {
 733          border: 1px solid;
 734          border-radius: 3px;
 735          z-index: 1;
 736      }
 737      .qnbutton.thispage .thispageholder {
 738          border-width: 3px;
 739      }
 740      .allquestionsononepage .qnbutton.thispage .thispageholder {
 741          border-width: 1px;
 742      }
 743  
 744      .qnbutton.flagged .thispageholder {
 745          background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0px no-repeat;
 746      }
 747  
 748      .qnbutton .trafficlight {
 749          border: 0;
 750          background: @white none center/10px no-repeat scroll;
 751          height: 20px;
 752          margin-top: 20px;
 753          border-radius: 0 0 3px 3px;
 754      }
 755  
 756      .qnbutton.notyetanswered .trafficlight,
 757      .qnbutton.invalidanswer .trafficlight {
 758          background-color: @white;
 759      }
 760      .qnbutton.invalidanswer .trafficlight {
 761          background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
 762      }
 763      .qnbutton.correct .trafficlight {
 764          background-image: url([[pix:theme|mod/quiz/checkmark]]);
 765          background-color: @successText;
 766      }
 767      .qnbutton.blocked .trafficlight {
 768          background-image: url([[pix:core|t/locked]]);
 769          background-color: @inputDisabledBackground;
 770      }
 771      .qnbutton.notanswered .trafficlight,
 772      .qnbutton.incorrect .trafficlight {
 773          background-color: @errorText;
 774      }
 775      .qnbutton.partiallycorrect .trafficlight {
 776          background-image: url([[pix:theme|mod/quiz/whitecircle]]);
 777          background-color: @orange;
 778      }
 779      .qnbutton.complete .trafficlight,
 780      .qnbutton.answersaved .trafficlight,
 781      .qnbutton.requiresgrading .trafficlight {
 782          background-color: @grayLight;
 783      }
 784  }