MDL-55167 less: remove empty blocks
[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,
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 }
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     }
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     }
125 .forumpost .row .left {
126     width: 48px;
129 .forumpost .options .commands {
130     margin-left: 0;
133 .forumpost .subject {
134     font-weight: bold;
137 // Override hardcoded forum modules styling
138 .forumsearch input[type=text] {
139     margin-bottom: 0 !important;
142 #page-mod-forum-discuss .discussioncontrols {
143     width: auto;
144     margin: 0;
147 #page-footer {
148     margin-top: 1em;
149     padding: 1em 0;
150     border-top: 2px solid @tableBorder;
153 .maincalendar .calendarmonth td,
154 .maincalendar .calendarmonth th {
155     border: 1px dotted @tableBorder;
158 .path-grade-report-grader h1 {
159     text-align: inherit;
162 #page-mod-chat-gui_basic input#message {
163     max-width: 100%;
166 #page-mod-data-view #singleimage {
167     width: auto;
170 .path-mod-data form {
171     margin-top: 10px;
174 .template_heading {
175     margin-top: 10px;
178 .breadcrumb-button {
179     float: right;
180     margin-top: 4px;
183 .breadcrumb-button .singlebutton {
184     float: left;
185     margin-left: 4px;
188 .dir-rtl {
189     .nav-tabs > li,
190     .nav-pills > li {
191         float: right;
192     }
194 .dir-rtl .navbar .brand {
195     padding: 10px 0 10px 20px;
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 // Choice module
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     }
262 // Lesson module
264 .path-mod-lesson .firstpageoptions {
265     margin: auto;
266     min-width: 280px;
267     width: 60%;
270 .path-mod-lesson .centerpadded {
271     padding: 5px;
272     text-align: center;
275 .path-mod-wiki .wiki_headingtitle,
276 .path-mod-wiki .midpad,
277 .path-mod-wiki .wiki_headingtime {
278     text-align: inherit;
281 .path-mod-wiki .wiki_contentbox {
282     width: 100%;
285 // Dropdown styling.
286 .dropdown-menu {
287     > li > a {
288         padding: 3px 20px 3px 8px;
289     }
291 .dir-rtl .dropdown-menu {
292     > li > a {
293         padding: 3px 8px 3px 20px;
294     }
296 .dir-rtl .dropdown-submenu > .dropdown-menu {
297     .border-radius(6px 0px 6px 6px);
301 // Survey module
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     }
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     }
337 .nav .caret {
338     margin-left: 4px;
340 .dir-rtl .nav .caret {
341     margin-right: 4px;
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     }
354 .navbar-inverse {
355     .nav {
356         .divider {
357             border-left-color: @navbarInverseBackground;
358             border-right-color: lighten(@navbarInverseBackground, 25%);
359         }
360     }
362 .dropdown-menu {
363     .divider {
364         width: auto;
365         height: 1px;
366         border-left: 0 none;
367         border-right: 0 none;
368     }
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 {
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             }
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;
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             }
432             // Hide caret when JS is disabled.
433             .caret {
434                 display: none;
435             }
436         }
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         }
465     }
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             }
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     }
539 .jsenabled {
540     .usermenu {
541         .moodle-actionmenu {
542             .toggle-display {
543                 display: block;
545                 &.textmenu {
546                     padding-left: 8px;
547                     padding-right: 8px;
548                 }
550                 // Show caret when JS is enabled.
551                 .caret {
552                     display: inline-block;
553                     position: relative;
554                     top: 9px;
555                 }
556             }
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             }
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                     }
596                     a {
597                         border-radius: 0;
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 {
619                 &.show {
620                     background-color: @navbarInverseLinkBackgroundActive;
621                 }
622             }
623         }
624     }
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     }
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     }
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     }
703 // Quiz module
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     }
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     }
744     .qnbutton.flagged .thispageholder {
745         background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0px no-repeat;
746     }
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     }
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     }