MDL-56932 theme_boost: fix quiz max mark input height
[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 // Assign
13 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) #id_attemptsettings .fitem {
14     .fitemtitle,
15     .felement {
16         display: table-cell;
17         float: none;
18         border-top: 1px solid #ddd;
19         padding: 8px 0;
20     }
21 }
23 // Feedback module
25 body.path-mod-feedback #region-main .mform.feedback_form .feedback-item-pagebreak .felement {
26     width: 100%;
27 }
29 .path-mod-feedback .mform.feedback_form#feedback_viewresponse_form .fitem.feedback_hasvalue:not(.feedback-item-captcha) .felement {
30     background: #fbfbf1;
31     min-height: 1em;
32     box-sizing: border-box;
33     padding: 3px;
34     border: 1px solid #ddd;
35 }
37 .path-mod-feedback .mform.feedback_form .fitem.feedback_hasvalue .fstatic:empty {
38     display: inherit;
39 }
41 .path-mod-feedback .mform.feedback_form#feedback_edit_form .fitem:hover {
42     background: #f5f5f5;
43 }
45 .path-mod-feedback .mform.feedback_form#feedback_edit_form .fitem .fitemtitle label {
46     width: 100%;
47 }
49 .path-mod-feedback .mform.feedback_form#feedback_edit_form .fitem .fitemtitle .itemtitle {
50     position: relative;
51     width: 100%;
52 }
54 .path-mod-feedback .mform.feedback_form#feedback_edit_form .fitem .fitemtitle .itemtitle .itemdd,
55 .path-mod-feedback .mform.feedback_form#feedback_edit_form .fitem .fitemtitle .itemtitle .itemname {
56     float: left;
57 }
59 .path-mod-feedback .mform.feedback_form#feedback_edit_form .fitem .fitemtitle .itemtitle .itemactions {
60     float: right;
61 }
63 // Forum module
65 .path-mod-forum .forumsearch {
66     input,
67     .helptooltip {
68         margin: 0 3px;
69     }
70 }
72 .path-mod-forum .forumheaderlist,
73 .path-mod-forum .forumheaderlist td {
74     border: none;
75 }
77 .path-mod-forum {
78     .forumheaderlist {
79         thead .header,
80         tbody .discussion td {
81             white-space: normal;
82             vertical-align: top;
83             padding-left: 0.5em;
84             padding-right: 0.5em;
85         }
87         thead .header {
88             white-space: normal;
89             vertical-align: top;
90         }
92         thead .header.replies {
93             text-align: center;
94         }
95         thead .header.lastpost {
96             text-align: right;
97         }
98         thead .header th,
99         tbody .discussion td {
100             &.discussionsubscription {
101                 width: 16px;
102                 padding-left: 0.5em;
103                 padding-right: 0.5em;
104             }
105         }
106         .discussion {
107             .author,
108             .replies,
109             .lastpost {
110                 white-space: normal;
111             }
112             .discussionsubscription,
113             .replies {
114                 text-align: center;
115             }
116             .topic,
117             .discussionsubscription,
118             .topic.starter,
119             .author,
120             .replies,
121             .lastpost {
122                 vertical-align: top;
123             }
124             .picture {
125                 margin: 0 20px;
126                 float: left;
127             }
128             .unread {
129                 img {
130                     margin: 0;
131                 }
132             }
133         }
134     }
137 .forumpost {
138     .well;
139     padding: 6px;
140     .header {
141         margin-bottom: 3px;
142     }
143     .picture img {
144         margin: 3px;
145         &.userpicture {
146             margin-left: 3px;
147             margin-right: 10px;
148         }
149     }
150     .content {
151         .posting.fullpost {
152             margin-top: 8px;
153         }
154     }
155     .row {
156         .topic,
157         .content-mask,
158         .options {
159             margin-left: 48px;
160         }
161         &.side {
162             clear: both;
163         }
164     }
167 .forumpost .row .left {
168     width: 48px;
171 .forumpost .options .commands {
172     margin-left: 0;
175 .forumpost .subject {
176     font-weight: bold;
179 // Override hardcoded forum modules styling
180 .forumsearch input[type=text] {
181     margin-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
184 #page-mod-forum-discuss .discussioncontrols {
185     width: auto;
186     margin: 0;
189 #page-footer {
190     margin-top: 1em;
191     padding: 1em 0;
192     border-top: 2px solid @tableBorder;
195 .maincalendar .calendarmonth td,
196 .maincalendar .calendarmonth th {
197     border: 1px dotted @tableBorder;
200 .path-grade-report-grader h1 {
201     text-align: inherit;
204 #page-mod-chat-gui_basic input#message {
205     max-width: 100%;
208 #page-mod-data-view #singleimage {
209     width: auto;
212 .path-mod-data form {
213     margin-top: 10px;
216 .template_heading {
217     margin-top: 10px;
220 .breadcrumb-button {
221     float: right;
222     margin-top: 4px;
225 .breadcrumb-button .singlebutton {
226     float: left;
227     margin-left: 4px;
230 .navbar-inverse .logininfo a {
231     color: @navbarInverseLinkColor;
233 .navbar-inverse .logininfo a:hover {
234     background-color: @navbarInverseLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
235     color: @navbarInverseLinkColorHover;
238 .navbar-fixed-top,
239 .navbar-fixed-bottom {
240     z-index: 4030;
243 .ie .row-fluid .desktop-first-column {
244     margin-left: 0;
246 .langmenu form {
247     margin: 0;
249 .container-fluid {
250     max-width: 1680px;
251     margin: 0 auto;
253 // contributed by Paul Hibbitts, see http://msdn.microsoft.com/en-us/library/ie/jj583807(v=vs.85).aspx
254 canvas {
255     -ms-touch-action: auto;
258 div#dock {
259     display: none;
262 // Choice module
264 .path-mod-choice {
265     .media-left {
266         float: left;
267         padding-right: 1em;
268     }
270     .horizontal .choices .option {
271         display: inline-block;
272     }
275 // Lesson module
277 .path-mod-lesson .firstpageoptions {
278     margin: auto;
279     min-width: 280px;
280     width: 60%;
283 .path-mod-lesson .centerpadded {
284     padding: 5px;
285     text-align: center;
288 /** General styles (scope: all of lesson) **/
289 .path-mod-lesson .contents,
290 .path-mod-lesson .standardtable,
291 .path-mod-lesson .mform .box.contents,
292 .path-mod-lesson .invisiblefieldset.fieldsetfix tr {
293     text-align: left;
296 .path-mod-lesson #layout-table {
297     width: 100%;
300 .path-mod-lesson .edit_buttons form,
301 .path-mod-lesson .edit_buttons input {
302     display: inline;
305 .path-mod-lesson .userinfotable .cell,
306 .path-mod-lesson .userinfotable .userpicture {
307     vertical-align: middle;
310 .path-mod-lesson .invisiblefieldset.fieldsetfix {
311     display: block;
314 .path-mod-lesson .slideshow {
315     overflow: auto;
316     padding: 15px;
319 .path-mod-lesson .menu .menuwrapper {
320     max-height: 400px;
321     overflow: auto;
322     vertical-align: top;
323     margin-bottom: 10px;
326 .path-mod-lesson .menu ul {
327     list-style: none;
328     padding: 5px 0 0 5px;
329     margin: 0;
331 .path-mod-lesson .menu ul li {
332     padding-bottom: 5px;
334 .path-mod-lesson .skip {
335     position: absolute;
336     top: -1000em;
337     width: 20em;
339 .path-mod-lesson .branchbuttoncontainer.horizontal div,
340 .path-mod-lesson .branchbuttoncontainer.horizontal form {
341     display: inline;
343 .path-mod-lesson .firstpageoptions {
344     width: 30%;
345     margin-left: 35%;
346     margin-top: 1em;
348 .path-mod-lesson .progress_bar_table,
349 .path-mod-lesson .progress_bar_completed,
350 .path-mod-lesson .progress_bar_todo {
351     padding: 0;
352     margin: 0;
354 .path-mod-lesson .progress_bar_token {
355     height: 20px;
356     width: 5px;
357     padding: 0;
358     margin: 0;
360 .path-mod-lesson .edit_pages_box .addlinks {
361     margin: 0;
362     margin-bottom: 1em;
364 .path-mod-lesson .progress_bar_completed {
365     background-color: green;
366     text-align: right;
367     vertical-align: middle;
368     color: #fff;
371 .path-mod-lesson .resourcecontent {
372     text-align: center;
375 .path-mod-lesson .answeroption .fcheckbox > span {
376     position: relative;
377     float: left;
380 .path-mod-lesson .answeroptiongroup .fgroup > span {
381     position: relative;
382     width: 100%;
385 .path-mod-lesson .answeroption .fcheckbox input,
386 .path-mod-lesson .answeroptiongroup input {
387     position: absolute;
388     top: 2px;
389     margin-top: 0;
390     left: 0;
393 .path-mod-lesson .answeroption .fcheckbox label,
394 .path-mod-lesson .mform .fitem.answeroptiongroup fieldset.fgroup label {
395     padding-left: 20px;
396     float: left;
399 .path-mod-lesson .answeroption .felement label p:last-child,
400 .path-mod-lesson .answeroptiongroup .felement label p:last-child {
401     margin-bottom: 0;
404 /**
405  * Style for view.php
406  **/
407 #page-mod-lesson-view .password-form .submitbutton {
408     display: inline;
410 .path-mod-lesson .reviewessay {
411     width: 40%;
412     border: 1px solid #ddd;
413     background-color: #eee;
416 /* Countdown timer. */
417 #lesson-timer {
418     text-align: center;
421 .path-mod-lesson .essayungraded {
422     background-color: #efcfcf;
425 .path-mod-lesson .essaygraded {
426     background-color: #efefcf;
429 .path-mod-lesson .essaysent {
430     background-color: #cfefcf;
433 .path-mod-wiki .wiki_headingtitle,
434 .path-mod-wiki .midpad,
435 .path-mod-wiki .wiki_headingtime {
436     text-align: inherit;
439 .path-mod-wiki .wiki_contentbox {
440     width: 100%;
443 // Dropdown styling.
444 .dropdown-menu {
445     > li > a {
446         padding: 3px 20px 3px 8px;
447     }
450 // Survey module
452 .path-mod-survey {
453     .surveytable {
454         > tbody > tr:nth-of-type(odd) {
455             background-color: @tableBackground;
456         }
457         > tbody > tr:nth-of-type(even) {
458             background-color: @tableBackgroundAccent;
459         }
460         .rblock label {
461             text-align: center;
462         }
463     }
464     .resultgraph,
465     .reportsummary,
466     .studentreport,
467     .reportbuttons,
468     .centerpara {
469         text-align: center;
470     }
473 .nav .caret {
474     margin-left: 4px;
477 // Dividers
478 .nav {
479     .divider {
480         overflow: hidden;
481         width: 0;
482         height: @navbarHeight;
483         border-left: 1px solid @navbarBackground;
484         border-right: 1px solid @navbarBackgroundHighlight;
485     }
487 .navbar-inverse {
488     .nav {
489         .divider {
490             border-left-color: @navbarInverseBackground;
491             border-right-color: lighten(@navbarInverseBackground, 25%);
492         }
493     }
495 .dropdown-menu {
496     .divider {
497         width: auto;
498         height: 1px;
499         border-left: 0 none;
500         border-right: 0 none;
501     }
504 // Usermenu
505 .usermenu {
506     .login {
507         color: @navbarText;
508         line-height: 40px;
509         a {
510             color: @linkColor;
511             &:hover,
512             &:focus {
513                 color: @linkColorHover;
514                 text-decoration: underline;
515             }
516         }
517     }
518     .moodle-actionmenu {
520         .toggle-display {
521             display: block;
522             opacity: 1;
523             color: @navbarLinkColor;
524             line-height: 40px;
525             height: 40px;
526             &:hover {
527                 color: @navbarLinkColorHover;
528             }
530             .userbutton {
531                 height: 40px;
532                 line-height: 40px;
533                 .avatars {
534                     display: inline-block;
535                     height: 36px;
536                     width: 36px;
537                     vertical-align: middle;
538                     margin-right: 6px;
539                     margin-left: 6px;
541                     .avatar,
542                     img {
543                         display: block;
544                     }
545                 }
546                 .usertext {
547                     display: inline-block;
548                     vertical-align: middle;
549                     line-height: 1em;
550                     color: inherit;
551                     .meta,
552                     .role {
553                         display: block;
554                         font-size: 12px;
555                         .value {
556                             font-weight: bold;
557                         }
558                     }
559                     .role {
560                         font-weight: bold;
561                     }
562                 }
563             }
565             // Hide caret when JS is disabled.
566             .caret {
567                 display: none;
568             }
569         }
572         // A little bit of visual feedback for the action menu when Javascript is disabled.
573         .menu {
574             .menu-action.icon {
575                 img {
576                     border-radius: 0;
577                     background: transparent;
578                     box-shadow: none;
579                 }
580                 &:hover img {
581                     background: #fff;
582                     border-radius: 4px;
583                     box-shadow: 0 0 16px rgba(0, 0, 0, 0.125);
584                 }
585             }
586         }
587         &[data-enhanced] .menu {
588             .menu-action.icon,
589             .menu-action.icon:hover {
590                 img {
591                     border-radius: 0;
592                     background: transparent;
593                     box-shadow: none;
594                 }
595             }
596         }
598     }
600 .navbar-inverse {
601     .usermenu {
602         .login {
603             color: @navbarInverseText;
604             a {
605                 color: @navbarInverseLinkColor;
606                 &:hover {
607                     color: @navbarInverseLinkColorHover;
608                 }
609             }
610         }
611         .moodle-actionmenu {
612             .toggle-display {
613                 color: @navbarInverseLinkColor;
614             }
615             .userbutton {
616                 .usertext {
617                     color: @navbarInverseLinkColor;
618                     .meta {
619                         color: @navbarInverseText;
620                         .value {
621                             color: @navbarInverseLinkColor;
622                         }
623                     }
624                 }
625             }
626             &:hover {
627                 .usertext {
628                     color: @navbarInverseLinkColorHover;
629                     .meta {
630                         color: @navbarInverseText;
631                         .value {
632                             color: @navbarInverseLinkColorHover;
633                         }
634                     }
635                 }
636             }
637             &[data-enhanced] .toggle-display.textmenu {
638                 .caret {
639                     border-top-color: @navbarInverseLinkColorHover;
640                 }
641             }
643             // A little bit of visual feedback for the action menu when Javascript is disabled.
644             .menu {
645                 .menu-action.icon {
646                     img {
647                         border-radius: 0;
648                         background: transparent;
649                         box-shadow: none;
650                     }
651                     &:hover img {
652                         background: #333;
653                         border-radius: 4px;
654                         box-shadow: 0 0 16px rgba(255, 255, 255, 1);
655                     }
656                 }
657             }
658             &[data-enhanced] .menu {
659                 .menu-action.icon,
660                 .menu-action.icon:hover {
661                     img {
662                         border-radius: 0;
663                         background: transparent;
664                         box-shadow: none;
665                     }
666                 }
667             }
668         }
669     }
672 .jsenabled {
673     .usermenu {
674         .moodle-actionmenu {
675             .toggle-display {
676                 display: block;
678                 &.textmenu {
679                     padding-left: 8px;
680                     padding-right: 8px;
681                 }
683                 // Show caret when JS is enabled.
684                 .caret {
685                     display: inline-block;
686                     position: relative;
687                     top: 9px;
688                 }
689             }
691             > .menubar {
692                 display: block;
693                 margin: 0;
694             }
695             > .menu {
696                 min-width: 160px;
697                 .filler {
698                     display: block;
699                     .nav-divider();
700                 }
701             }
703             &.show {
704                 background-color: @navbarLinkBackgroundActive;
705                 .menu {
706                     padding: 5px 0;
707                     margin: 2px 0 0;
708                     background-clip: padding-box;
709                     &:before {
710                         content: '';
711                         display: inline-block;
712                         border-left: 7px solid transparent;
713                         border-right: 7px solid transparent;
714                         border-bottom: 7px solid #ccc;
715                         border-bottom-color: @dropdownBorder;
716                         position: absolute;
717                         top: -7px;
718                     }
719                     &:after {
720                         content: '';
721                         display: inline-block;
722                         border-left: 6px solid transparent;
723                         border-right: 6px solid transparent;
724                         border-bottom: 6px solid @dropdownBackground;
725                         position: absolute;
726                         top: -6px;
727                     }
729                     a {
730                         border-radius: 0;
732                         &:focus {
733                             text-decoration: none;
734                         }
735                         &:hover {
736                             text-decoration: none;
737                             #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
738                         }
739                     }
740                     &.align-tr-br {
741                         margin-top: 2px;
742                     }
743                     .box-shadow (0 5px 10px rgba(0, 0, 0, 0.2));
744                 }
745             }
746         }
747     }
748     .navbar-inverse {
749         .usermenu {
750             .moodle-actionmenu {
752                 &.show {
753                     background-color: @navbarInverseLinkBackgroundActive;
754                 }
755             }
756         }
757     }
761 .usermenu {
762     float: right;
763     > .moodle-actionmenu {
764         > .menu {
765             &:before {
766                 right: 9px;
767             }
768             &:after {
769                 right: 10px;
770             }
771         }
772         > .menubar li a {
773             text-align: right;
774         }
775     }
777 &.userloggedinas .usermenu .userbutton .avatars {
778     .avatar {
779         &.current {
780             left: 16px;
781         }
782     }
785 .userloggedinas .usermenu .userbutton .avatars {
786     .avatar {
787         &.current {
788             position: relative;
789             top: 4px;
790             left: 4px;
791             width: 20px;
792             height: 20px;
793             margin-top: 11px;
794             margin-bottom: -34px;
795             border: 1px solid #fff;
796             border-radius: 50%;
797             box-shadow: -2px -2px 16px rgba(0, 0, 0, 0.25);
798         }
799         img {
800             width: inherit;
801             height: inherit;
802         }
803         overflow: hidden;
804     }
807 // Quiz module
808 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer form input {
809     margin: 0;
810     padding: 0.2em;
811     height: 1em;
814 // Question navigation block.
815 .path-mod-quiz #mod_quiz_navblock {
816     .qnbutton {
817         text-decoration: none;
818         font-size: 14px;
819         line-height: 20px;
820         font-weight: normal;
821         background-color: @white;
822         background-image: none;
823         height: 40px;
824         width: 30px;
825         border-radius: 3px;
826         border: 0;
827         overflow: visible;
828         margin: 0 6px 6px 0;
829     }
830     span.qnbutton {
831         cursor: default;
832         background-color: @inputDisabledBackground;
833         color: @gray;
834     }
835     a.qnbutton:hover,
836     a.qnbutton:active,
837     a.qnbutton:focus {
838         text-decoration: underline;
839     }
841     .qnbutton .thispageholder {
842         border: 1px solid;
843         border-radius: 3px;
844         z-index: 1;
845     }
846     .qnbutton.thispage .thispageholder {
847         border-width: 3px;
848     }
849     .allquestionsononepage .qnbutton.thispage .thispageholder {
850         border-width: 1px;
851     }
853     .qnbutton.flagged .thispageholder {
854         background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0 no-repeat;
855     }
857     .qnbutton .trafficlight {
858         border: 0;
859         background: @white none center/10px no-repeat scroll;
860         height: 20px;
861         margin-top: 20px;
862         border-radius: 0 0 3px 3px;
863     }
865     .qnbutton.notyetanswered .trafficlight,
866     .qnbutton.invalidanswer .trafficlight {
867         background-color: @white;
868     }
869     .qnbutton.invalidanswer .trafficlight {
870         background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
871     }
872     .qnbutton.correct .trafficlight {
873         background-image: url([[pix:theme|mod/quiz/checkmark]]);
874         background-color: @successText;
875     }
876     .qnbutton.blocked .trafficlight {
877         background-image: url([[pix:core|t/locked]]);
878         background-color: @inputDisabledBackground;
879     }
880     .qnbutton.notanswered .trafficlight,
881     .qnbutton.incorrect .trafficlight {
882         background-color: @errorText;
883     }
884     .qnbutton.partiallycorrect .trafficlight {
885         background-image: url([[pix:theme|mod/quiz/whitecircle]]);
886         background-color: @orange;
887     }
888     .qnbutton.complete .trafficlight,
889     .qnbutton.answersaved .trafficlight,
890     .qnbutton.requiresgrading .trafficlight {
891         background-color: @grayLight;
892     }
895 // Scorm.
896 .path-mod-scorm .scorm-center {
897     text-align: center;
900 .path-mod-scorm.forcejavascript .scorm-center {
901     display: none;
904 .path-mod-scorm.jsenabled .scorm-center {
905     display: block;
908 .path-mod-scorm #region-main #intro {
909     width: auto;