a1365f4d0e598f1e78a569d531956341b9f97fd6
[moodle.git] / theme / bootstrapbase / less / moodle / modules.less
1 /* modules.less */
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
8 select {
9     width: auto;
10 }
12 // Forum module
14 .path-mod-forum .forumsearch {
15     input,
16     .helptooltip {
17         margin: 0 3px;
18     }
19 }
21 .path-mod-forum .forumheaderlist,
22 .path-mod-forum .forumheaderlist td {
23     border: none;
24 }
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         }
36         thead .header {
37             white-space: normal;
38             vertical-align: top;
39         }
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 }
76 .path-mod-feedback .feedback_bar_image {
77     height: 5px; // we should remove the bar height specification in core
78 }
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     }
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     }
127 .forumpost .row .left {
128     width: 48px;
131 .forumpost .options .commands {
132     margin-left: 0;
135 .forumpost .subject {
136     font-weight: bold;
139 // Override hardcoded forum modules styling
140 .forumsearch input[type=text] {
141      margin-bottom: 0 !important;
144 #page-mod-forum-discuss .discussioncontrols {
145     width: auto;
146     margin: 0;
149 #page-footer {
150     margin-top: 1em;
151     padding: 1em 0;
152     border-top: 2px solid @tableBorder;
155 .maincalendar .calendarmonth td,.maincalendar .calendarmonth th {
156     border: 1px dotted @tableBorder;
159 .path-grade-report-grader h1 {
160     text-align: inherit;
163 #page-mod-chat-gui_basic input#message {
164     max-width: 100%;
167 #page-mod-data-view #singleimage {
168     width: auto;
171 .path-mod-data form {
172     margin-top: 10px;
175 .template_heading {
176     margin-top: 10px;
179 .breadcrumb-button {
180     float: right;
181     margin-top: 4px;
184 .breadcrumb-button .singlebutton {
185     float: left;
186     margin-left: 4px;
189 .dir-rtl {
190     .nav-tabs > li,
191     .nav-pills > li {
192         float: right;
193     }
195 .dir-rtl .navbar .brand {
196     padding: 10px 0 10px 20px;
197     float: right;
200 .navbar-inverse .logininfo a {
201     color: @navbarInverseLinkColor;
203 .navbar-inverse .logininfo a:hover {
204     background-color: @navbarInverseLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
205     color: @navbarInverseLinkColorHover;
208 .navbar-fixed-top,
209 .navbar-fixed-bottom {
210     z-index: 4030;
213 .dir-rtl .breadcrumb-button,
214 .dir-rtl .navbar .btn-navbar {
215     float: left;
218 .dir-rtl .breadcrumb-button .singlebutton {
219     float: right;
220     margin-right: 4px;
221     margin-left: 0;
223 .dir-rtl .breadcrumb-button .singlebutton div,
224 .dir-rtl .breadcrumb-button .singlebutton div input[type="submit"] {
225     margin-right: 5px;
226     margin-left: 0;
229 .ie .row-fluid .desktop-first-column {
230     margin-left: 0;
232 .langmenu form {
233     margin: 0;
235 .container-fluid {
236     max-width: 1680px;
237     margin: 0 auto;
239 // contributed by Paul Hibbitts, see http://msdn.microsoft.com/en-us/library/ie/jj583807(v=vs.85).aspx
240 canvas {
241     -ms-touch-action: auto;
244 div#dock {
245     display: none;
248 // Choice module
250 .path-mod-choice {
251     .horizontal  .choices {
252         margin: 0;
253         .option {
254             display: inline-block;
255             padding: 10px;
256         }
257     }
258     .results .data {
259         white-space: normal;
260     }
263 // Lesson module
265 .path-mod-lesson .firstpageoptions {
266     margin: auto;
267     min-width: 280px;
268     width: 60%;
271 .path-mod-lesson .centerpadded {
272     padding: 5px;
273     text-align: center;
276 .path-mod-wiki .wiki_headingtitle,
277 .path-mod-wiki .midpad,
278 .path-mod-wiki .wiki_headingtime {
279     text-align: inherit;
282 .path-mod-wiki .wiki_contentbox {
283     width: 100%;
286 // Dropdown styling.
287 .dropdown-menu {
288     > li > a {
289         padding: 3px 20px 3px 8px;
290     }
292 .dir-rtl .dropdown-menu {
293     > li > a {
294         padding: 3px 8px 3px 20px;
295     }
297 .dir-rtl .dropdown-submenu > .dropdown-menu {
298   .border-radius(6px 0px 6px 6px);
302 // Survey module
304 .path-mod-survey {
305     .surveytable {
306       > tbody > tr:nth-of-type(odd) {background-color: @tableBackground;}
307       > tbody > tr:nth-of-type(even) {background-color: @tableBackgroundAccent;}
308         .rblock label {text-align: center;}
309     }
310     .resultgraph, .reportsummary, .studentreport, .reportbuttons, .centerpara {
311         text-align:center;
312     }
314 // rtl overrides
315 .dir-rtl {
316     &.path-mod-forum .forumheaderlist {
317         thead .header.lastpost {
318             text-align: left;
319         }
320         .discussion {
321             .lastpost {
322                 text-align: left;
323             }
324         }
325     }
328 .nav .caret {
329     margin-left: 4px;
331 .dir-rtl .nav .caret {
332     margin-right: 4px;
335 // Dividers
336 .nav {
337     .divider {
338         overflow: hidden;
339         width: 0;
340         height: @navbarHeight;
341         border-left: 1px solid @navbarBackground;
342         border-right: 1px solid @navbarBackgroundHighlight;
343     }
345 .navbar-inverse {
346     .nav {
347         .divider {
348             border-left-color: @navbarInverseBackground;
349             border-right-color: lighten(@navbarInverseBackground, 25%);
350         }
351     }
353 .dropdown-menu {
354     .divider {
355         width: auto;
356         height: 1px;
357         border-left: 0 none;
358         border-right: 0 none;
359     }
362 // Usermenu
363 .usermenu {
364     .login {
365         color: @navbarText;
366         line-height: 40px;
367         a {
368             color: @linkColor;
369             &:hover,
370             &:focus {
371                 color: @linkColorHover;
372                 text-decoration: underline;
373             }
374         }
375     }
376     .moodle-actionmenu {
378         .toggle-display {
379             display: block;
380             opacity: 1;
381             color: @navbarLinkColor;
382             line-height: 40px;
383             height: 40px;
384             &:hover {
385                 color: @navbarLinkColorHover;
386             }
388             .userbutton {
389                 height: 40px;
390                 line-height: 40px;
391                 .avatars{
392                     display: inline-block;
393                     height: 36px;
394                     width: 36px;
395                     vertical-align: middle;
396                     margin-right: 6px;
397                     margin-left: 6px;
399                     .avatar,
400                     img {
401                         display: block;
402                     }
403                 }
404                 .usertext {
405                     display: inline-block;
406                     vertical-align: middle;
407                     line-height: 1em;
408                     color: inherit;
409                     .meta,
410                     .role {
411                         display: block;
412                         font-size: 12px;
413                         .value {
414                             font-weight: bold;
415                         }
416                     }
417                     .role {
418                         font-weight: bold;
419                     }
420                 }
421             }
423             // Hide caret when JS is disabled.
424             .caret {
425                 display: none;
426             }
427         }
430         // A little bit of visual feedback for the action menu when Javascript is disabled.
431         .menu {
432             .menu-action.icon {
433                 img {
434                     border-radius: 0;
435                     background: transparent;
436                     box-shadow: none;
437                 }
438                 &:hover img {
439                     background: #fff;
440                     border-radius: 4px;
441                     box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.125);
442                 }
443             }
444         }
445         &[data-enhanced] .menu {
446             .menu-action.icon,
447             .menu-action.icon:hover {
448                 img {
449                     border-radius: 0;
450                     background: transparent;
451                     box-shadow: none;
452                 }
453             }
454         }
456     }
458 .navbar-inverse {
459     .usermenu {
460         .login {
461             color: @navbarInverseText;
462             a {
463                 color: @navbarInverseLinkColor;
464                 &:hover {
465                     color: @navbarInverseLinkColorHover;
466                 }
467             }
468         }
469         .moodle-actionmenu {
470             .toggle-display {
471                 color: @navbarInverseLinkColor;
472             }
473             .userbutton {
474                 .usertext {
475                     color: @navbarInverseLinkColor;
476                     .meta {
477                         color: @navbarInverseText;
478                         .value {
479                             color: @navbarInverseLinkColor;
480                         }
481                     }
482                 }
483             }
484             &:hover {
485                 .usertext {
486                     color: @navbarInverseLinkColorHover;
487                     .meta {
488                         color: @navbarInverseText;
489                         .value {
490                             color: @navbarInverseLinkColorHover;
491                         }
492                     }
493                 }
494             }
495             &[data-enhanced] .toggle-display.textmenu {
496                 .caret {
497                     border-top-color: @navbarInverseLinkColorHover;
498                 }
499             }
501             // A little bit of visual feedback for the action menu when Javascript is disabled.
502             .menu {
503                 .menu-action.icon {
504                     img {
505                         border-radius: 0;
506                         background: transparent;
507                         box-shadow: none;
508                     }
509                     &:hover img {
510                         background: #333;
511                         border-radius: 4px;
512                         box-shadow: 0px 0px 16px rgba(255, 255, 255, 1);
513                     }
514                 }
515             }
516             &[data-enhanced] .menu {
517                 .menu-action.icon,
518                 .menu-action.icon:hover {
519                     img {
520                         border-radius: 0;
521                         background: transparent;
522                         box-shadow: none;
523                     }
524                 }
525             }
526         }
527     }
530 .jsenabled {
531     .usermenu {
532         .moodle-actionmenu {
533             .toggle-display {
534                 display: block;
536                 &.textmenu {
537                     padding-left: 8px;
538                     padding-right: 8px;
539                 }
541                 // Show caret when JS is enabled.
542                 .caret {
543                     display: inline-block;
544                     position: relative;
545                     top: 9px;
546                 }
547             }
549             > .menubar {
550                 display: block;
551                 margin: 0px 0px 2px 0px;
552             }
553             > .menu {
554                 min-width: 160px;
555                 .filler {
556                     display: block;
557                     .nav-divider();
558                 }
559             }
561             &.show {
562                 background-color: @navbarLinkBackgroundActive;
563                 .menu {
564                     padding: 5px 0;
565                     margin: 2px 0 0;
566                     background-clip: padding-box;
567                     &:before {
568                         content: '';
569                         display: inline-block;
570                         border-left:   7px solid transparent;
571                         border-right:  7px solid transparent;
572                         border-bottom: 7px solid #ccc;
573                         border-bottom-color: @dropdownBorder;
574                         position: absolute;
575                         top: -7px;
576                     }
577                     &:after {
578                         content: '';
579                         display: inline-block;
580                         border-left:   6px solid transparent;
581                         border-right:  6px solid transparent;
582                         border-bottom: 6px solid @dropdownBackground;
583                         position: absolute;
584                         top: -6px;
585                     }
587                     a {
588                         border-radius: 0;
590                         &:focus {
591                             text-decoration: none;
592                         }
593                         &:hover {
594                             text-decoration: none;
595                             #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
596                         }
597                     }
598                     &.align-tr-br {
599                         margin-top: 2px;
600                     }
601                     .box-shadow (0 5px 10px rgba(0, 0, 0, 0.2));
602                 }
603                 &:hover .toggle-display {}
604             }
605         }
606     }
607     .navbar-inverse {
608         .usermenu {
609             .moodle-actionmenu {
611                 &.show {
612                     background-color: @navbarInverseLinkBackgroundActive;
613                 }
614             }
615         }
616     }
619 .dir-ltr {
620     .usermenu {
621         float: right;
622         > .moodle-actionmenu {
623             > .menu {
624                 &:before {
625                     right: 9px;
626                 }
627                 &:after {
628                     right: 10px;
629                 }
630             }
631             > .menubar li a {
632                 text-align: right;
633             }
634         }
635     }
636     &.userloggedinas .usermenu .userbutton .avatars {
637         .avatar {
638             &.current {
639                 left: 16px;
640             }
641         }
642     }
645 .dir-rtl {
646     .usermenu {
647         float: left;
648         > .moodle-actionmenu {
649             > .menu {
650                 margin-right: 0px;
651                 &:before {
652                     left: 9px;
653                 }
654                 &:after {
655                     left: 10px;
656                 }
657             }
658             > .menubar li a {
659                 text-align: left;
660             }
661         }
662     }
663     &.userloggedinas .usermenu .userbutton .avatars {
664         .avatar {
665             &.current {
666                 left: -14px;
667             }
668         }
669     }
673 .userloggedinas .usermenu .userbutton .avatars {
674     .avatar {
675         &.current {
676             position: relative;
677             top: 4px;
678             left: 4px;
679             width: 20px;
680             height: 20px;
681             margin-top: 11px;
682             margin-bottom: -34px;
683             border: 1px solid #fff;
684             border-radius: 50%;
685             box-shadow: -2px -2px 16px rgba(0,0,0,0.25);
686         }
687         img {
688             width: inherit;
689             height: inherit;
690         }
691         overflow: hidden;
692     }
695 // Quiz module
697 // Question navigation block.
698 .path-mod-quiz #mod_quiz_navblock {
699     .qnbutton {
700         text-decoration: none;
701         font-size: 14px;
702         line-height: 20px;
703         font-weight: normal;
704         background-color: @white;
705         background-image: none;
706         height: 40px;
707         width: 30px;
708         border-radius: 3px;
709         border: 0;
710         overflow: visible;
711         margin: 0 6px 6px 0;
712     }
713     span.qnbutton {
714         cursor: default;
715         background-color: @inputDisabledBackground;
716         color: @gray;
717     }
718     a.qnbutton:hover,
719     a.qnbutton:active,
720     a.qnbutton:focus {
721         text-decoration: underline;
722     }
724     .qnbutton .thispageholder {
725         border: 1px solid;
726         border-radius: 3px;
727         z-index: 1;
728     }
729     .qnbutton.thispage .thispageholder {
730         border-width: 3px;
731     }
732     .allquestionsononepage .qnbutton.thispage .thispageholder {
733         border-width: 1px;
734     }
736     .qnbutton.flagged .thispageholder {
737         background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0px no-repeat;
738     }
740     .qnbutton .trafficlight {
741         border: 0;
742         background: @white none center/10px no-repeat scroll;
743         height: 20px;
744         margin-top: 20px;
745         border-radius: 0 0 3px 3px;
746     }
748     .qnbutton.notyetanswered .trafficlight,
749     .qnbutton.invalidanswer .trafficlight {
750         background-color: @white;
751     }
752     .qnbutton.invalidanswer .trafficlight {
753         background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
754     }
755     .qnbutton.correct .trafficlight {
756         background-image: url([[pix:theme|mod/quiz/checkmark]]);
757         background-color: @successText;
758     }
759     .qnbutton.blocked .trafficlight {
760         background-image: url([[pix:core|t/locked]]);
761         background-color: @inputDisabledBackground;
762     }
763     .qnbutton.notanswered .trafficlight,
764     .qnbutton.incorrect .trafficlight {
765         background-color: @errorText;
766     }
767     .qnbutton.partiallycorrect .trafficlight {
768         background-image: url([[pix:theme|mod/quiz/whitecircle]]);
769         background-color: @orange;
770     }
771     .qnbutton.complete .trafficlight,
772     .qnbutton.answersaved .trafficlight,
773     .path-mod-quiz #page .qnbutton.requiresgrading .trafficlight {
774         background-color: @grayLight;
775     }