theme/bootstrapbase/less/moodle/modules.less

   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
  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, .replies, .lastpost {
  57                 white-space: normal;
  58             }
  59             .discussionsubscription,
  60             .replies {
  61                 text-align: center;
  62             }
  63             .topic,
  64             .discussionsubscription,
  65             .topic.starter,
  66             .picture,
  67             .author,
  68             .replies,
  69             .lastpost {
  70                 vertical-align: top;
  71             }
  72         }
  73     }
  74 }
  75
  76 .path-mod-feedback .feedback_bar_image {
  77     height: 5px; // we should remove the bar height specification in core
  78 }
  79
  80 .forumpost {
  81     .well;
  82     padding: 6px;
  83     .header {
  84         margin-bottom: 3px;
  85     }
  86     .picture img {
  87         margin: 3px;
  88         &.userpicture {
  89             margin-left: 3px;
  90             margin-right: 10px;
  91         }
  92     }
  93     .content {
  94         .posting.fullpost {
  95             margin-top: 8px;
  96         }
  97     }
  98     .row {
  99         .topic,
 100         .content-mask,
 101         .options {
 102             margin-left: 48px;
 103         }
 104         &.side {
 105             clear: both;
 106         }
 107     }
 108 }
 109
 110 .dir-rtl .forumpost {
 111     .picture img {
 112         &.userpicture {
 113             margin-left: 10px;
 114             margin-right: 3px;
 115         }
 116     }
 117     .row {
 118         .topic,
 119         .content-mask,
 120         .options {
 121             margin-left: 0;
 122             margin-right: 48px;
 123         }
 124     }
 125 }
 126
 127 .forumpost .row .left {
 128     width: 48px;
 129 }
 130
 131 .forumpost .options .commands {
 132     margin-left: 0;
 133 }
 134
 135 .forumpost .subject {
 136     font-weight: bold;
 137 }
 138
 139 // Override hardcoded forum modules styling
 140 .forumsearch input[type=text] {
 141      margin-bottom: 0 !important;
 142 }
 143
 144 #page-mod-forum-discuss .discussioncontrols {
 145     width: auto;
 146     margin: 0;
 147 }
 148
 149 #page-footer {
 150     margin-top: 1em;
 151     padding: 1em 0;
 152     border-top: 2px solid @tableBorder;
 153 }
 154
 155 .maincalendar .calendarmonth td,.maincalendar .calendarmonth th {
 156     border: 1px dotted @tableBorder;
 157 }
 158
 159 .path-grade-report-grader h1 {
 160     text-align: inherit;
 161 }
 162
 163 #page-mod-chat-gui_basic input#message {
 164     max-width: 100%;
 165 }
 166
 167 #page-mod-data-view #singleimage {
 168     width: auto;
 169 }
 170
 171 .path-mod-data form {
 172     margin-top: 10px;
 173 }
 174
 175 .template_heading {
 176     margin-top: 10px;
 177 }
 178
 179 .breadcrumb-button {
 180     float: right;
 181     margin-top: 4px;
 182 }
 183
 184 .breadcrumb-button .singlebutton {
 185     float: left;
 186     margin-left: 4px;
 187 }
 188
 189 .dir-rtl {
 190     .nav-tabs > li,
 191     .nav-pills > li {
 192         float: right;
 193     }
 194 }
 195 .dir-rtl .navbar .brand {
 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 }
 221
 222 .ie .row-fluid .desktop-first-column {
 223     margin-left: 0;
 224 }
 225 .langmenu form {
 226     margin: 0;
 227 }
 228 .container-fluid {
 229     max-width: 1680px;
 230     margin: 0 auto;
 231 }
 232 // contributed by Paul Hibbitts, see http://msdn.microsoft.com/en-us/library/ie/jj583807(v=vs.85).aspx
 233 canvas {
 234     -ms-touch-action: auto;
 235 }
 236
 237 div#dock {
 238     display: none;
 239 }
 240
 241 .path-mod-choice {
 242     .horizontal  .choices {
 243         margin: 0;
 244         .option {
 245             display: inline-block;
 246             padding: 10px;
 247         }
 248     }
 249     .results .data {
 250         white-space: normal;
 251     }
 252 }
 253
 254 .path-mod-lesson .firstpageoptions {
 255     margin: auto;
 256     min-width: 280px;
 257     width: 60%;
 258 }
 259
 260 .path-mod-lesson .centerpadded {
 261     padding: 5px;
 262     text-align: center;
 263 }
 264
 265 .path-mod-wiki .wiki_headingtitle,
 266 .path-mod-wiki .midpad,
 267 .path-mod-wiki .wiki_headingtime {
 268     text-align: inherit;
 269 }
 270
 271 .path-mod-wiki .wiki_contentbox {
 272     width: 100%;
 273 }
 274
 275 // Dropdown styling.
 276 .dropdown-menu {
 277     > li > a {
 278         padding: 3px 20px 3px 8px;
 279     }
 280 }
 281 .dir-rtl .dropdown-menu {
 282     > li > a {
 283         padding: 3px 8px 3px 20px;
 284     }
 285 }
 286 .dir-rtl .dropdown-submenu > .dropdown-menu {
 287   .border-radius(6px 0px 6px 6px);
 288 }
 289
 290
 291 // Survey module
 292
 293 .path-mod-survey {
 294     .surveytable {
 295       > tbody > tr:nth-of-type(odd) {background-color: @tableBackground;}
 296       > tbody > tr:nth-of-type(even) {background-color: @tableBackgroundAccent;}
 297         .rblock label {text-align: center;}
 298     }
 299     .resultgraph, .reportsummary, .studentreport, .reportbuttons, .centerpara {
 300         text-align:center;
 301     }
 302 }
 303 // rtl overrides
 304 .dir-rtl {
 305     &.path-mod-forum .forumheaderlist {
 306         thead .header.lastpost {
 307             text-align: left;
 308         }
 309         .discussion {
 310             .lastpost {
 311                 text-align: left;
 312             }
 313         }
 314     }
 315 }
 316
 317 .nav .caret {
 318     margin-left: 4px;
 319 }
 320 .dir-rtl .nav .caret {
 321     margin-right: 4px;
 322 }
 323
 324 // Dividers
 325 .nav {
 326     .divider {
 327         overflow: hidden;
 328         width: 0;
 329         height: 40px;
 330         border-left: 1px solid #e5e5e5;
 331         border-right: 1px solid #fff;
 332     }
 333 }
 334
 335 .dropdown-menu {
 336     .divider {
 337         width: auto;
 338         height: 1px;
 339         border-left: 0px none;
 340         border-right: 0px none;
 341     }
 342 }
 343
 344 // Usermenu
 345 .usermenu {
 346     .login {
 347         color: @navbarText;
 348         line-height: 40px;
 349         a {
 350             color: @linkColor;
 351             &:hover,
 352             &:focus {
 353                 color: @linkColorHover;
 354                 text-decoration: underline;
 355             }
 356         }
 357     }
 358     .moodle-actionmenu {
 359
 360         .toggle-display {
 361             display: block;
 362             opacity: 1;
 363             color: @navbarLinkColor;
 364             line-height: 40px;
 365             height: 40px;
 366             &:hover {
 367                 color: @navbarLinkColorHover;
 368             }
 369
 370             .userbutton {
 371                 height: 40px;
 372                 line-height: 40px;
 373                 .avatars{
 374                     display: inline-block;
 375                     height: 36px;
 376                     width: 36px;
 377                     vertical-align: middle;
 378                     margin-right: 6px;
 379                     margin-left: 6px;
 380
 381                     .avatar,
 382                     img {
 383                         display: block;
 384                     }
 385                 }
 386                 .usertext {
 387                     display: inline-block;
 388                     vertical-align: middle;
 389                     line-height: 1em;
 390                     color: inherit;
 391                     .meta,
 392                     .role {
 393                         display: block;
 394                         font-size: 12px;
 395                         .value {
 396                             font-weight: bold;
 397                         }
 398                     }
 399                     .role {
 400                         font-weight: bold;
 401                     }
 402                 }
 403             }
 404
 405             // Hide caret when JS is disabled.
 406             .caret {
 407                 display: none;
 408             }
 409         }
 410
 411
 412         // A little bit of visual feedback for the action menu when Javascript is disabled.
 413         .menu {
 414             .menu-action.icon {
 415                 img {
 416                     border-radius: 0;
 417                     background: transparent;
 418                     box-shadow: none;
 419                 }
 420                 &:hover img {
 421                     background: #fff;
 422                     border-radius: 4px;
 423                     box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.125);
 424                 }
 425             }
 426         }
 427         &[data-enhanced] .menu {
 428             .menu-action.icon,
 429             .menu-action.icon:hover {
 430                 img {
 431                     border-radius: 0;
 432                     background: transparent;
 433                     box-shadow: none;
 434                 }
 435             }
 436         }
 437
 438     }
 439 }
 440 .navbar-inverse {
 441     .usermenu {
 442         .login {
 443             color: @navbarInverseText;
 444             a {
 445                 color: @navbarInverseLinkColor;
 446                 &:hover {
 447                     color: @navbarInverseLinkColorHover;
 448                 }
 449             }
 450         }
 451         .moodle-actionmenu {
 452             .toggle-display {
 453                 color: @navbarInverseLinkColor;
 454             }
 455             .userbutton {
 456                 .usertext {
 457                     color: @navbarInverseLinkColor;
 458                     .meta {
 459                         color: @navbarInverseText;
 460                         .value {
 461                             color: @navbarInverseLinkColor;
 462                         }
 463                     }
 464                 }
 465             }
 466             &:hover {
 467                 .usertext {
 468                     color: @navbarInverseLinkColorHover;
 469                     .meta {
 470                         color: @navbarInverseText;
 471                         .value {
 472                             color: @navbarInverseLinkColorHover;
 473                         }
 474                     }
 475                 }
 476             }
 477             &[data-enhanced] .toggle-display.textmenu {
 478                 .caret {
 479                     border-top-color: @navbarInverseLinkColorHover;
 480                 }
 481             }
 482
 483             // A little bit of visual feedback for the action menu when Javascript is disabled.
 484             .menu {
 485                 .menu-action.icon {
 486                     img {
 487                         border-radius: 0;
 488                         background: transparent;
 489                         box-shadow: none;
 490                     }
 491                     &:hover img {
 492                         background: #333;
 493                         border-radius: 4px;
 494                         box-shadow: 0px 0px 16px rgba(255, 255, 255, 1);
 495                     }
 496                 }
 497             }
 498             &[data-enhanced] .menu {
 499                 .menu-action.icon,
 500                 .menu-action.icon:hover {
 501                     img {
 502                         border-radius: 0;
 503                         background: transparent;
 504                         box-shadow: none;
 505                     }
 506                 }
 507             }
 508         }
 509     }
 510 }
 511
 512 .jsenabled {
 513     .usermenu {
 514         .moodle-actionmenu {
 515             .toggle-display {
 516                 display: block;
 517
 518                 &.textmenu {
 519                     padding-left: 8px;
 520                     padding-right: 8px;
 521                 }
 522
 523                 // Show caret when JS is enabled.
 524                 .caret {
 525                     display: inline-block;
 526                     position: relative;
 527                     top: 9px;
 528                 }
 529             }
 530
 531             > .menubar {
 532                 display: block;
 533                 margin: 0px 0px 2px 0px;
 534             }
 535             > .menu {
 536                 min-width: 160px;
 537                 .filler {
 538                     display: block;
 539                     .nav-divider();
 540                 }
 541             }
 542
 543             &.show {
 544                 background-color: @navbarLinkBackgroundActive;
 545                 .menu {
 546                     padding: 5px 0;
 547                     margin: 2px 0 0;
 548                     background-clip: padding-box;
 549                     &:before {
 550                         content: '';
 551                         display: inline-block;
 552                         border-left:   7px solid transparent;
 553                         border-right:  7px solid transparent;
 554                         border-bottom: 7px solid #ccc;
 555                         border-bottom-color: @dropdownBorder;
 556                         position: absolute;
 557                         top: -7px;
 558                     }
 559                     &:after {
 560                         content: '';
 561                         display: inline-block;
 562                         border-left:   6px solid transparent;
 563                         border-right:  6px solid transparent;
 564                         border-bottom: 6px solid @dropdownBackground;
 565                         position: absolute;
 566                         top: -6px;
 567                     }
 568
 569                     a {
 570                         border-radius: 0;
 571
 572                         &:focus {
 573                             text-decoration: none;
 574                         }
 575                         &:hover {
 576                             text-decoration: none;
 577                             #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
 578                         }
 579                     }
 580                     &.align-tr-br {
 581                         margin-top: 2px;
 582                     }
 583                     .box-shadow (0 5px 10px rgba(0, 0, 0, 0.2));
 584                 }
 585                 &:hover .toggle-display {}
 586             }
 587         }
 588     }
 589     .navbar-inverse {
 590         .usermenu {
 591             .moodle-actionmenu {
 592
 593                 &.show {
 594                     background-color: @navbarInverseLinkBackgroundActive;
 595                 }
 596             }
 597         }
 598     }
 599 }
 600
 601 .dir-ltr {
 602     .usermenu {
 603         float: right;
 604         > .moodle-actionmenu {
 605             > .menu {
 606                 &:before {
 607                     right: 9px;
 608                 }
 609                 &:after {
 610                     right: 10px;
 611                 }
 612             }
 613             > .menubar li a {
 614                 text-align: right;
 615             }
 616         }
 617     }
 618     &.userloggedinas .usermenu .userbutton .avatars {
 619         .avatar {
 620             &.current {
 621                 left: 16px;
 622             }
 623         }
 624     }
 625 }
 626
 627 .dir-rtl {
 628     .usermenu {
 629         float: left;
 630         > .moodle-actionmenu {
 631             > .menu {
 632                 margin-right: 0px;
 633                 &:before {
 634                     left: 9px;
 635                 }
 636                 &:after {
 637                     left: 10px;
 638                 }
 639             }
 640             > .menubar li a {
 641                 text-align: left;
 642             }
 643         }
 644     }
 645     &.userloggedinas .usermenu .userbutton .avatars {
 646         .avatar {
 647             &.current {
 648                 left: -14px;
 649             }
 650         }
 651     }
 652 }
 653
 654
 655 .userloggedinas .usermenu .userbutton .avatars {
 656     .avatar {
 657         &.current {
 658             position: relative;
 659             top: 4px;
 660             left: 4px;
 661             width: 20px;
 662             height: 20px;
 663             margin-top: 11px;
 664             margin-bottom: -34px;
 665             border: 1px solid #fff;
 666             border-radius: 50%;
 667             box-shadow: -2px -2px 16px rgba(0,0,0,0.25);
 668         }
 669         img {
 670             width: inherit;
 671             height: inherit;
 672         }
 673         overflow: hidden;
 674     }
 675 }