Merge branch 'wip-MDL-60594-master' of git://github.com/marinaglancy/moodle
[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;
403 .path-mod-lesson .answeroption .fradio label p,
404 .path-mod-lesson .answeroption .fcheckbox label p {
405     display: inline;
408 /**
409  * Style for view.php
410  **/
411 #page-mod-lesson-view .password-form .submitbutton {
412     display: inline;
414 #page-mod-lesson-view .branchbuttoncontainer .singlebutton input[type="submit"] {
415     white-space: normal;
417 .path-mod-lesson .reviewessay {
418     width: 40%;
419     border: 1px solid #ddd;
420     background-color: #eee;
423 /* Countdown timer. */
424 #lesson-timer {
425     text-align: center;
428 .path-mod-lesson .essayungraded {
429     background-color: #efcfcf;
432 .path-mod-lesson .essaygraded {
433     background-color: #efefcf;
436 .path-mod-lesson .essaysent {
437     background-color: #cfefcf;
440 .path-mod-wiki .wiki_headingtitle,
441 .path-mod-wiki .midpad,
442 .path-mod-wiki .wiki_headingtime {
443     text-align: inherit;
446 .path-mod-wiki .wiki_contentbox {
447     width: 100%;
450 // Dropdown styling.
451 .dropdown-menu {
452     > li > a {
453         padding: 3px 20px 3px 8px;
454     }
457 // Survey module
459 .path-mod-survey {
460     .surveytable {
461         > tbody > tr:nth-of-type(odd) {
462             background-color: @tableBackground;
463         }
464         > tbody > tr:nth-of-type(even) {
465             background-color: @tableBackgroundAccent;
466         }
467         .rblock label {
468             text-align: center;
469         }
470     }
471     .resultgraph,
472     .reportsummary,
473     .studentreport,
474     .reportbuttons,
475     .centerpara {
476         text-align: center;
477     }
480 .nav .caret {
481     margin-left: 4px;
484 // Dividers
485 .nav {
486     .divider {
487         overflow: hidden;
488         width: 0;
489         height: @navbarHeight;
490         border-left: 1px solid @navbarBackground;
491         border-right: 1px solid @navbarBackgroundHighlight;
492     }
494 .navbar-inverse {
495     .nav {
496         .divider {
497             border-left-color: @navbarInverseBackground;
498             border-right-color: lighten(@navbarInverseBackground, 25%);
499         }
500     }
502 .dropdown-menu {
503     .divider {
504         width: auto;
505         height: 1px;
506         border-left: 0 none;
507         border-right: 0 none;
508     }
511 // Usermenu
512 .usermenu {
513     .login {
514         color: @navbarText;
515         line-height: 40px;
516         a {
517             color: @linkColor;
518             &:hover,
519             &:focus {
520                 color: @linkColorHover;
521                 text-decoration: underline;
522             }
523         }
524     }
525     .moodle-actionmenu {
527         .toggle-display {
528             display: block;
529             opacity: 1;
530             color: @navbarLinkColor;
531             line-height: 40px;
532             height: 40px;
533             &:hover {
534                 color: @navbarLinkColorHover;
535             }
537             .userbutton {
538                 height: 40px;
539                 line-height: 40px;
540                 .avatars {
541                     display: inline-block;
542                     height: 36px;
543                     width: 36px;
544                     vertical-align: middle;
545                     margin-right: 6px;
546                     margin-left: 6px;
548                     .avatar,
549                     img {
550                         display: block;
551                     }
552                 }
553                 .usertext {
554                     display: inline-block;
555                     vertical-align: middle;
556                     line-height: 1em;
557                     color: inherit;
558                     .meta,
559                     .role {
560                         display: block;
561                         font-size: 12px;
562                         .value {
563                             font-weight: bold;
564                         }
565                     }
566                     .role {
567                         font-weight: bold;
568                     }
569                 }
570             }
572             // Hide caret when JS is disabled.
573             .caret {
574                 display: none;
575             }
576         }
579         // A little bit of visual feedback for the action menu when Javascript is disabled.
580         .menu {
581             .menu-action.icon {
582                 img {
583                     border-radius: 0;
584                     background: transparent;
585                     box-shadow: none;
586                 }
587                 &:hover img {
588                     background: #fff;
589                     border-radius: 4px;
590                     box-shadow: 0 0 16px rgba(0, 0, 0, 0.125);
591                 }
592             }
593         }
594         &[data-enhanced] .menu {
595             .menu-action.icon,
596             .menu-action.icon:hover {
597                 img {
598                     border-radius: 0;
599                     background: transparent;
600                     box-shadow: none;
601                 }
602             }
603         }
605     }
607 .navbar-inverse {
608     .usermenu {
609         .login {
610             color: @navbarInverseText;
611             a {
612                 color: @navbarInverseLinkColor;
613                 &:hover {
614                     color: @navbarInverseLinkColorHover;
615                 }
616             }
617         }
618         .moodle-actionmenu {
619             .toggle-display {
620                 color: @navbarInverseLinkColor;
621             }
622             .userbutton {
623                 .usertext {
624                     color: @navbarInverseLinkColor;
625                     .meta {
626                         color: @navbarInverseText;
627                         .value {
628                             color: @navbarInverseLinkColor;
629                         }
630                     }
631                 }
632             }
633             &:hover {
634                 .usertext {
635                     color: @navbarInverseLinkColorHover;
636                     .meta {
637                         color: @navbarInverseText;
638                         .value {
639                             color: @navbarInverseLinkColorHover;
640                         }
641                     }
642                 }
643             }
644             &[data-enhanced] .toggle-display.textmenu {
645                 .caret {
646                     border-top-color: @navbarInverseLinkColorHover;
647                 }
648             }
650             // A little bit of visual feedback for the action menu when Javascript is disabled.
651             .menu {
652                 .menu-action.icon {
653                     img {
654                         border-radius: 0;
655                         background: transparent;
656                         box-shadow: none;
657                     }
658                     &:hover img {
659                         background: #333;
660                         border-radius: 4px;
661                         box-shadow: 0 0 16px rgba(255, 255, 255, 1);
662                     }
663                 }
664             }
665             &[data-enhanced] .menu {
666                 .menu-action.icon,
667                 .menu-action.icon:hover {
668                     img {
669                         border-radius: 0;
670                         background: transparent;
671                         box-shadow: none;
672                     }
673                 }
674             }
675         }
676     }
679 .jsenabled {
680     .usermenu {
681         .moodle-actionmenu {
682             .toggle-display {
683                 display: block;
685                 &.textmenu {
686                     padding-left: 8px;
687                     padding-right: 8px;
688                 }
690                 // Show caret when JS is enabled.
691                 .caret {
692                     display: inline-block;
693                     position: relative;
694                     top: 9px;
695                 }
696             }
698             > .menubar {
699                 display: block;
700                 margin: 0;
701             }
702             > .menu {
703                 min-width: 160px;
704                 .filler {
705                     display: block;
706                     .nav-divider();
707                 }
708             }
710             &.show {
711                 background-color: @navbarLinkBackgroundActive;
712                 .menu {
713                     padding: 5px 0;
714                     margin: 2px 0 0;
715                     background-clip: padding-box;
716                     &:before {
717                         content: '';
718                         display: inline-block;
719                         border-left: 7px solid transparent;
720                         border-right: 7px solid transparent;
721                         border-bottom: 7px solid #ccc;
722                         border-bottom-color: @dropdownBorder;
723                         position: absolute;
724                         top: -7px;
725                     }
726                     &:after {
727                         content: '';
728                         display: inline-block;
729                         border-left: 6px solid transparent;
730                         border-right: 6px solid transparent;
731                         border-bottom: 6px solid @dropdownBackground;
732                         position: absolute;
733                         top: -6px;
734                     }
736                     a {
737                         border-radius: 0;
739                         &:focus {
740                             text-decoration: none;
741                         }
742                         &:hover {
743                             text-decoration: none;
744                             #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
745                         }
746                     }
747                     &.align-tr-br {
748                         margin-top: 2px;
749                     }
750                     .box-shadow (0 5px 10px rgba(0, 0, 0, 0.2));
751                 }
752             }
753         }
754     }
755     .navbar-inverse {
756         .usermenu {
757             .moodle-actionmenu {
759                 &.show {
760                     background-color: @navbarInverseLinkBackgroundActive;
761                 }
762             }
763         }
764     }
768 .usermenu {
769     float: right;
770     > .moodle-actionmenu {
771         > .menu {
772             &:before {
773                 right: 9px;
774             }
775             &:after {
776                 right: 10px;
777             }
778         }
779         > .menubar li a {
780             text-align: right;
781         }
782     }
784 &.userloggedinas .usermenu .userbutton .avatars {
785     .avatar {
786         &.current {
787             left: 16px;
788         }
789     }
792 .userloggedinas .usermenu .userbutton .avatars {
793     .avatar {
794         &.current {
795             position: relative;
796             top: 4px;
797             left: 4px;
798             width: 20px;
799             height: 20px;
800             margin-top: 11px;
801             margin-bottom: -34px;
802             border: 1px solid #fff;
803             border-radius: 50%;
804             box-shadow: -2px -2px 16px rgba(0, 0, 0, 0.25);
805         }
806         img {
807             width: inherit;
808             height: inherit;
809         }
810         overflow: hidden;
811     }
814 // Quiz module
815 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer form input {
816     margin: 0;
817     padding: 0.2em;
818     height: 1em;
821 // Question navigation block.
822 .path-mod-quiz #mod_quiz_navblock {
823     .qnbutton {
824         text-decoration: none;
825         font-size: 14px;
826         line-height: 20px;
827         font-weight: normal;
828         background-color: @white;
829         background-image: none;
830         height: 40px;
831         width: 30px;
832         border-radius: 3px;
833         border: 0;
834         overflow: visible;
835         margin: 0 6px 6px 0;
836     }
837     span.qnbutton {
838         cursor: default;
839         background-color: @inputDisabledBackground;
840         color: @gray;
841     }
842     a.qnbutton:hover,
843     a.qnbutton:active,
844     a.qnbutton:focus {
845         text-decoration: underline;
846     }
848     .qnbutton .thispageholder {
849         border: 1px solid;
850         border-radius: 3px;
851         z-index: 1;
852     }
853     .qnbutton.thispage .thispageholder {
854         border-width: 3px;
855     }
856     .allquestionsononepage .qnbutton.thispage .thispageholder {
857         border-width: 1px;
858     }
860     .qnbutton.flagged .thispageholder {
861         background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0 no-repeat;
862     }
864     .qnbutton .trafficlight {
865         border: 0;
866         background: @white none center/10px no-repeat scroll;
867         height: 20px;
868         margin-top: 20px;
869         border-radius: 0 0 3px 3px;
870     }
872     .qnbutton.notyetanswered .trafficlight,
873     .qnbutton.invalidanswer .trafficlight {
874         background-color: @white;
875     }
876     .qnbutton.invalidanswer .trafficlight {
877         background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
878     }
879     .qnbutton.correct .trafficlight {
880         background-image: url([[pix:theme|mod/quiz/checkmark]]);
881         background-color: @successText;
882     }
883     .qnbutton.blocked .trafficlight {
884         background-image: url([[pix:core|t/locked]]);
885         background-color: @inputDisabledBackground;
886     }
887     .qnbutton.notanswered .trafficlight,
888     .qnbutton.incorrect .trafficlight {
889         background-color: @errorText;
890     }
891     .qnbutton.partiallycorrect .trafficlight {
892         background-image: url([[pix:theme|mod/quiz/whitecircle]]);
893         background-color: @orange;
894     }
895     .qnbutton.complete .trafficlight,
896     .qnbutton.answersaved .trafficlight,
897     .qnbutton.requiresgrading .trafficlight {
898         background-color: @grayLight;
899     }
902 // Scorm.
903 .path-mod-scorm .scorm-center {
904     text-align: center;
907 .path-mod-scorm.forcejavascript .scorm-center {
908     display: none;
911 .path-mod-scorm.jsenabled .scorm-center {
912     display: block;
915 .path-mod-scorm #region-main #intro {
916     width: auto;