c9cd64e2e3af2ae9082b5bc871a0530856a0e599
[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
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     float: right;
199 .navbar-inverse .logininfo a {
200     color: @navbarInverseLinkColor;
202 .navbar-inverse .logininfo a:hover {
203     background-color: @navbarInverseLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
204     color: @navbarInverseLinkColorHover;
207 .navbar-fixed-top,
208 .navbar-fixed-bottom {
209     z-index: 4030;
212 .dir-rtl .breadcrumb-button,
213 .dir-rtl .navbar .btn-navbar {
214     float: left;
217 .dir-rtl .breadcrumb-button .singlebutton {
218     float: right;
219     margin-right: 4px;
220     margin-left: 0;
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;
228 .ie .row-fluid .desktop-first-column {
229     margin-left: 0;
231 .langmenu form {
232     margin: 0;
234 .container-fluid {
235     max-width: 1680px;
236     margin: 0 auto;
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;
243 div#dock {
244     display: none;
247 .path-mod-choice {
248     .horizontal  .choices {
249         margin: 0;
250         .option {
251             display: inline-block;
252             padding: 10px;
253         }
254     }
255     .results .data {
256         white-space: normal;
257     }
260 .path-mod-lesson .firstpageoptions {
261     margin: auto;
262     min-width: 280px;
263     width: 60%;
266 .path-mod-lesson .centerpadded {
267     padding: 5px;
268     text-align: center;
271 .path-mod-wiki .wiki_headingtitle,
272 .path-mod-wiki .midpad,
273 .path-mod-wiki .wiki_headingtime {
274     text-align: inherit;
277 .path-mod-wiki .wiki_contentbox {
278     width: 100%;
281 // Dropdown styling.
282 .dropdown-menu {
283     > li > a {
284         padding: 3px 20px 3px 8px;
285     }
287 .dir-rtl .dropdown-menu {
288     > li > a {
289         padding: 3px 8px 3px 20px;
290     }
292 .dir-rtl .dropdown-submenu > .dropdown-menu {
293   .border-radius(6px 0px 6px 6px);
297 // Survey module
299 .path-mod-survey {
300     .surveytable {
301       > tbody > tr:nth-of-type(odd) {background-color: @tableBackground;}
302       > tbody > tr:nth-of-type(even) {background-color: @tableBackgroundAccent;}
303         .rblock label {text-align: center;}
304     }
305     .resultgraph, .reportsummary, .studentreport, .reportbuttons, .centerpara {
306         text-align:center;
307     }
309 // rtl overrides
310 .dir-rtl {
311     &.path-mod-forum .forumheaderlist {
312         thead .header.lastpost {
313             text-align: left;
314         }
315         .discussion {
316             .lastpost {
317                 text-align: left;
318             }
319         }
320     }
323 .nav .caret {
324     margin-left: 4px;
326 .dir-rtl .nav .caret {
327     margin-right: 4px;
330 // Dividers
331 .nav {
332     .divider {
333         overflow: hidden;
334         width: 0;
335         height: @navbarHeight;
336         border-left: 1px solid @navbarBackground;
337         border-right: 1px solid @navbarBackgroundHighlight;
338     }
340 .navbar-inverse {
341     .nav {
342         .divider {
343             border-left-color: @navbarInverseBackground;
344             border-right-color: lighten(@navbarInverseBackground, 25%);
345         }
346     }
348 .dropdown-menu {
349     .divider {
350         width: auto;
351         height: 1px;
352         border-left: 0 none;
353         border-right: 0 none;
354     }
357 // Usermenu
358 .usermenu {
359     .login {
360         color: @navbarText;
361         line-height: 40px;
362         a {
363             color: @linkColor;
364             &:hover,
365             &:focus {
366                 color: @linkColorHover;
367                 text-decoration: underline;
368             }
369         }
370     }
371     .moodle-actionmenu {
373         .toggle-display {
374             display: block;
375             opacity: 1;
376             color: @navbarLinkColor;
377             line-height: 40px;
378             height: 40px;
379             &:hover {
380                 color: @navbarLinkColorHover;
381             }
383             .userbutton {
384                 height: 40px;
385                 line-height: 40px;
386                 .avatars{
387                     display: inline-block;
388                     height: 36px;
389                     width: 36px;
390                     vertical-align: middle;
391                     margin-right: 6px;
392                     margin-left: 6px;
394                     .avatar,
395                     img {
396                         display: block;
397                     }
398                 }
399                 .usertext {
400                     display: inline-block;
401                     vertical-align: middle;
402                     line-height: 1em;
403                     color: inherit;
404                     .meta,
405                     .role {
406                         display: block;
407                         font-size: 12px;
408                         .value {
409                             font-weight: bold;
410                         }
411                     }
412                     .role {
413                         font-weight: bold;
414                     }
415                 }
416             }
418             // Hide caret when JS is disabled.
419             .caret {
420                 display: none;
421             }
422         }
425         // A little bit of visual feedback for the action menu when Javascript is disabled.
426         .menu {
427             .menu-action.icon {
428                 img {
429                     border-radius: 0;
430                     background: transparent;
431                     box-shadow: none;
432                 }
433                 &:hover img {
434                     background: #fff;
435                     border-radius: 4px;
436                     box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.125);
437                 }
438             }
439         }
440         &[data-enhanced] .menu {
441             .menu-action.icon,
442             .menu-action.icon:hover {
443                 img {
444                     border-radius: 0;
445                     background: transparent;
446                     box-shadow: none;
447                 }
448             }
449         }
451     }
453 .navbar-inverse {
454     .usermenu {
455         .login {
456             color: @navbarInverseText;
457             a {
458                 color: @navbarInverseLinkColor;
459                 &:hover {
460                     color: @navbarInverseLinkColorHover;
461                 }
462             }
463         }
464         .moodle-actionmenu {
465             .toggle-display {
466                 color: @navbarInverseLinkColor;
467             }
468             .userbutton {
469                 .usertext {
470                     color: @navbarInverseLinkColor;
471                     .meta {
472                         color: @navbarInverseText;
473                         .value {
474                             color: @navbarInverseLinkColor;
475                         }
476                     }
477                 }
478             }
479             &:hover {
480                 .usertext {
481                     color: @navbarInverseLinkColorHover;
482                     .meta {
483                         color: @navbarInverseText;
484                         .value {
485                             color: @navbarInverseLinkColorHover;
486                         }
487                     }
488                 }
489             }
490             &[data-enhanced] .toggle-display.textmenu {
491                 .caret {
492                     border-top-color: @navbarInverseLinkColorHover;
493                 }
494             }
496             // A little bit of visual feedback for the action menu when Javascript is disabled.
497             .menu {
498                 .menu-action.icon {
499                     img {
500                         border-radius: 0;
501                         background: transparent;
502                         box-shadow: none;
503                     }
504                     &:hover img {
505                         background: #333;
506                         border-radius: 4px;
507                         box-shadow: 0px 0px 16px rgba(255, 255, 255, 1);
508                     }
509                 }
510             }
511             &[data-enhanced] .menu {
512                 .menu-action.icon,
513                 .menu-action.icon:hover {
514                     img {
515                         border-radius: 0;
516                         background: transparent;
517                         box-shadow: none;
518                     }
519                 }
520             }
521         }
522     }
525 .jsenabled {
526     .usermenu {
527         .moodle-actionmenu {
528             .toggle-display {
529                 display: block;
531                 &.textmenu {
532                     padding-left: 8px;
533                     padding-right: 8px;
534                 }
536                 // Show caret when JS is enabled.
537                 .caret {
538                     display: inline-block;
539                     position: relative;
540                     top: 9px;
541                 }
542             }
544             > .menubar {
545                 display: block;
546                 margin: 0px 0px 2px 0px;
547             }
548             > .menu {
549                 min-width: 160px;
550                 .filler {
551                     display: block;
552                     .nav-divider();
553                 }
554             }
556             &.show {
557                 background-color: @navbarLinkBackgroundActive;
558                 .menu {
559                     padding: 5px 0;
560                     margin: 2px 0 0;
561                     background-clip: padding-box;
562                     &:before {
563                         content: '';
564                         display: inline-block;
565                         border-left:   7px solid transparent;
566                         border-right:  7px solid transparent;
567                         border-bottom: 7px solid #ccc;
568                         border-bottom-color: @dropdownBorder;
569                         position: absolute;
570                         top: -7px;
571                     }
572                     &:after {
573                         content: '';
574                         display: inline-block;
575                         border-left:   6px solid transparent;
576                         border-right:  6px solid transparent;
577                         border-bottom: 6px solid @dropdownBackground;
578                         position: absolute;
579                         top: -6px;
580                     }
582                     a {
583                         border-radius: 0;
585                         &:focus {
586                             text-decoration: none;
587                         }
588                         &:hover {
589                             text-decoration: none;
590                             #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
591                         }
592                     }
593                     &.align-tr-br {
594                         margin-top: 2px;
595                     }
596                     .box-shadow (0 5px 10px rgba(0, 0, 0, 0.2));
597                 }
598                 &:hover .toggle-display {}
599             }
600         }
601     }
602     .navbar-inverse {
603         .usermenu {
604             .moodle-actionmenu {
606                 &.show {
607                     background-color: @navbarInverseLinkBackgroundActive;
608                 }
609             }
610         }
611     }
614 .dir-ltr {
615     .usermenu {
616         float: right;
617         > .moodle-actionmenu {
618             > .menu {
619                 &:before {
620                     right: 9px;
621                 }
622                 &:after {
623                     right: 10px;
624                 }
625             }
626             > .menubar li a {
627                 text-align: right;
628             }
629         }
630     }
631     &.userloggedinas .usermenu .userbutton .avatars {
632         .avatar {
633             &.current {
634                 left: 16px;
635             }
636         }
637     }
640 .dir-rtl {
641     .usermenu {
642         float: left;
643         > .moodle-actionmenu {
644             > .menu {
645                 margin-right: 0px;
646                 &:before {
647                     left: 9px;
648                 }
649                 &:after {
650                     left: 10px;
651                 }
652             }
653             > .menubar li a {
654                 text-align: left;
655             }
656         }
657     }
658     &.userloggedinas .usermenu .userbutton .avatars {
659         .avatar {
660             &.current {
661                 left: -14px;
662             }
663         }
664     }
668 .userloggedinas .usermenu .userbutton .avatars {
669     .avatar {
670         &.current {
671             position: relative;
672             top: 4px;
673             left: 4px;
674             width: 20px;
675             height: 20px;
676             margin-top: 11px;
677             margin-bottom: -34px;
678             border: 1px solid #fff;
679             border-radius: 50%;
680             box-shadow: -2px -2px 16px rgba(0,0,0,0.25);
681         }
682         img {
683             width: inherit;
684             height: inherit;
685         }
686         overflow: hidden;
687     }