MDL-55793 theme_noname: Use fixed width container
[moodle.git] / theme / bootstrapbase / less / moodle / modules.less
CommitLineData
8903b17b
BB
1/* modules.less */
2
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
7
8select {
9 width: auto;
10}
11
de2fec2e 12// Forum module
8bf57320 13
bfaee803
SH
14.path-mod-forum .forumsearch {
15 input,
16 .helptooltip {
17 margin: 0 3px;
18 }
19}
20
8903b17b
BB
21.path-mod-forum .forumheaderlist,
22.path-mod-forum .forumheaderlist td {
23 border: none;
24}
25
ebfb73db
AN
26.path-mod-forum {
27 .forumheaderlist {
28 thead .header,
29 tbody .discussion td {
8bf57320 30 white-space: normal;
ebfb73db
AN
31 vertical-align: top;
32 padding-left: 0.5em;
33 padding-right: 0.5em;
8bf57320 34 }
ebfb73db
AN
35
36 thead .header {
37 white-space: normal;
38 vertical-align: top;
39 }
40
41 thead .header.replies {
8bf57320
DM
42 text-align: center;
43 }
ebfb73db
AN
44 thead .header.lastpost {
45 text-align: right;
46 }
47 thead .header th,
0e878352 48 tbody .discussion td {
ebfb73db
AN
49 &.discussionsubscription {
50 width: 16px;
51 padding-left: 0.5em;
52 padding-right: 0.5em;
53 }
54 }
55 .discussion {
0e878352
DP
56 .author,
57 .replies,
58 .lastpost {
ebfb73db
AN
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 }
8bf57320
DM
74 }
75 }
76}
77
8903b17b
BB
78.forumpost {
79 .well;
80 padding: 6px;
73c4e333
AB
81 .header {
82 margin-bottom: 3px;
83 }
cee8be63
JC
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 }
106}
107
8903b17b 108.forumpost .row .left {
cee8be63 109 width: 48px;
8903b17b
BB
110}
111
112.forumpost .options .commands {
113 margin-left: 0;
114}
115
116.forumpost .subject {
117 font-weight: bold;
118}
119
120// Override hardcoded forum modules styling
121.forumsearch input[type=text] {
eb695207 122 margin-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
8903b17b
BB
123}
124
35620f63
SH
125#page-mod-forum-discuss .discussioncontrols {
126 width: auto;
127 margin: 0;
8903b17b
BB
128}
129
130#page-footer {
131 margin-top: 1em;
132 padding: 1em 0;
e514c722 133 border-top: 2px solid @tableBorder;
8903b17b
BB
134}
135
0e878352
DP
136.maincalendar .calendarmonth td,
137.maincalendar .calendarmonth th {
e514c722 138 border: 1px dotted @tableBorder;
8903b17b
BB
139}
140
141.path-grade-report-grader h1 {
142 text-align: inherit;
143}
144
145#page-mod-chat-gui_basic input#message {
146 max-width: 100%;
147}
148
149#page-mod-data-view #singleimage {
150 width: auto;
151}
152
153.path-mod-data form {
154 margin-top: 10px;
155}
156
157.template_heading {
158 margin-top: 10px;
159}
160
161.breadcrumb-button {
162 float: right;
3355b72e 163 margin-top: 4px;
8903b17b 164}
eef85081 165
41dcfbf1
MA
166.breadcrumb-button .singlebutton {
167 float: left;
168 margin-left: 4px;
169}
170
af9c2dcf
GB
171.navbar-inverse .logininfo a {
172 color: @navbarInverseLinkColor;
173}
174.navbar-inverse .logininfo a:hover {
175 background-color: @navbarInverseLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
176 color: @navbarInverseLinkColorHover;
8903b17b
BB
177}
178
179.navbar-fixed-top,
180.navbar-fixed-bottom {
58183f9b 181 z-index: 4030;
8903b17b
BB
182}
183
8903b17b 184.ie .row-fluid .desktop-first-column {
58183f9b 185 margin-left: 0;
8903b17b
BB
186}
187.langmenu form {
188 margin: 0;
189}
190.container-fluid {
191 max-width: 1680px;
192 margin: 0 auto;
193}
194// contributed by Paul Hibbitts, see http://msdn.microsoft.com/en-us/library/ie/jj583807(v=vs.85).aspx
195canvas {
196 -ms-touch-action: auto;
197}
198
199div#dock {
200 display: none;
201}
202
de2fec2e
TH
203// Choice module
204
9184a2f7
AB
205.path-mod-choice {
206 .horizontal .choices {
207 margin: 0;
208 .option {
209 display: inline-block;
210 padding: 10px;
211 }
212 }
213 .results .data {
214 white-space: normal;
8903b17b
BB
215 }
216}
217
de2fec2e
TH
218// Lesson module
219
8903b17b
BB
220.path-mod-lesson .firstpageoptions {
221 margin: auto;
222 min-width: 280px;
223 width: 60%;
224}
01a96461
RW
225
226.path-mod-lesson .centerpadded {
227 padding: 5px;
228 text-align: center;
229}
876c0ac3 230
14cdc257
RW
231.path-mod-wiki .wiki_headingtitle,
232.path-mod-wiki .midpad,
233.path-mod-wiki .wiki_headingtime {
234 text-align: inherit;
876c0ac3 235}
14cdc257
RW
236
237.path-mod-wiki .wiki_contentbox {
238 width: 100%;
eef85081 239}
1765866f 240
a36f97f7
JC
241// Dropdown styling.
242.dropdown-menu {
243 > li > a {
244 padding: 3px 20px 3px 8px;
245 }
246}
a36f97f7 247
1765866f
DM
248// Survey module
249
250.path-mod-survey {
251 .surveytable {
75b68df3
DP
252 > tbody > tr:nth-of-type(odd) {
253 background-color: @tableBackground;
254 }
255 > tbody > tr:nth-of-type(even) {
256 background-color: @tableBackgroundAccent;
257 }
258 .rblock label {
259 text-align: center;
260 }
1765866f 261 }
0e878352
DP
262 .resultgraph,
263 .reportsummary,
264 .studentreport,
265 .reportbuttons,
266 .centerpara {
418b9328 267 text-align: center;
1765866f
DM
268 }
269}
a36f97f7
JC
270
271.nav .caret {
272 margin-left: 4px;
273}
d9640a99 274
328ef3df
JC
275// Dividers
276.nav {
277 .divider {
278 overflow: hidden;
279 width: 0;
d8d65e76
ME
280 height: @navbarHeight;
281 border-left: 1px solid @navbarBackground;
282 border-right: 1px solid @navbarBackgroundHighlight;
283 }
284}
285.navbar-inverse {
286 .nav {
287 .divider {
288 border-left-color: @navbarInverseBackground;
289 border-right-color: lighten(@navbarInverseBackground, 25%);
290 }
328ef3df
JC
291 }
292}
328ef3df
JC
293.dropdown-menu {
294 .divider {
295 width: auto;
296 height: 1px;
d8d65e76
ME
297 border-left: 0 none;
298 border-right: 0 none;
328ef3df 299 }
d9640a99 300}
6da0e4cf
JC
301
302// Usermenu
303.usermenu {
854a647e
JC
304 .login {
305 color: @navbarText;
306 line-height: 40px;
307 a {
f89a85f8
JC
308 color: @linkColor;
309 &:hover,
310 &:focus {
311 color: @linkColorHover;
312 text-decoration: underline;
313 }
854a647e
JC
314 }
315 }
f89a85f8
JC
316 .moodle-actionmenu {
317
318 .toggle-display {
6da0e4cf 319 display: block;
f89a85f8
JC
320 opacity: 1;
321 color: @navbarLinkColor;
322 line-height: 40px;
323 height: 40px;
324 &:hover {
325 color: @navbarLinkColorHover;
326 }
327
328 .userbutton {
329 height: 40px;
6da0e4cf 330 line-height: 40px;
0e878352 331 .avatars {
f89a85f8
JC
332 display: inline-block;
333 height: 36px;
334 width: 36px;
335 vertical-align: middle;
336 margin-right: 6px;
337 margin-left: 6px;
338
339 .avatar,
340 img {
341 display: block;
342 }
343 }
344 .usertext {
345 display: inline-block;
346 vertical-align: middle;
347 line-height: 1em;
348 color: inherit;
349 .meta,
350 .role {
351 display: block;
352 font-size: 12px;
353 .value {
354 font-weight: bold;
355 }
356 }
357 .role {
358 font-weight: bold;
359 }
360 }
6da0e4cf 361 }
6da0e4cf 362
f89a85f8
JC
363 // Hide caret when JS is disabled.
364 .caret {
365 display: none;
6da0e4cf
JC
366 }
367 }
f89a85f8
JC
368
369
370 // A little bit of visual feedback for the action menu when Javascript is disabled.
371 .menu {
372 .menu-action.icon {
373 img {
374 border-radius: 0;
375 background: transparent;
376 box-shadow: none;
377 }
378 &:hover img {
379 background: #fff;
380 border-radius: 4px;
381 box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.125);
6da0e4cf
JC
382 }
383 }
6da0e4cf 384 }
f89a85f8
JC
385 &[data-enhanced] .menu {
386 .menu-action.icon,
387 .menu-action.icon:hover {
388 img {
389 border-radius: 0;
390 background: transparent;
391 box-shadow: none;
392 }
393 }
6da0e4cf 394 }
f89a85f8 395
6da0e4cf
JC
396 }
397}
f89a85f8 398.navbar-inverse {
854a647e
JC
399 .usermenu {
400 .login {
401 color: @navbarInverseText;
402 a {
403 color: @navbarInverseLinkColor;
404 &:hover {
405 color: @navbarInverseLinkColorHover;
406 }
407 }
408 }
f89a85f8
JC
409 .moodle-actionmenu {
410 .toggle-display {
411 color: @navbarInverseLinkColor;
412 }
413 .userbutton {
414 .usertext {
854a647e 415 color: @navbarInverseLinkColor;
f89a85f8
JC
416 .meta {
417 color: @navbarInverseText;
418 .value {
419 color: @navbarInverseLinkColor;
420 }
421 }
6da0e4cf
JC
422 }
423 }
f89a85f8
JC
424 &:hover {
425 .usertext {
426 color: @navbarInverseLinkColorHover;
427 .meta {
428 color: @navbarInverseText;
429 .value {
430 color: @navbarInverseLinkColorHover;
431 }
854a647e
JC
432 }
433 }
434 }
f89a85f8 435 &[data-enhanced] .toggle-display.textmenu {
854a647e
JC
436 .caret {
437 border-top-color: @navbarInverseLinkColorHover;
438 }
6da0e4cf 439 }
f89a85f8
JC
440
441 // A little bit of visual feedback for the action menu when Javascript is disabled.
442 .menu {
443 .menu-action.icon {
444 img {
445 border-radius: 0;
446 background: transparent;
447 box-shadow: none;
448 }
449 &:hover img {
450 background: #333;
451 border-radius: 4px;
452 box-shadow: 0px 0px 16px rgba(255, 255, 255, 1);
453 }
454 }
455 }
456 &[data-enhanced] .menu {
457 .menu-action.icon,
458 .menu-action.icon:hover {
459 img {
460 border-radius: 0;
461 background: transparent;
462 box-shadow: none;
463 }
464 }
465 }
6da0e4cf
JC
466 }
467 }
468}
f89a85f8
JC
469
470.jsenabled {
6da0e4cf 471 .usermenu {
f89a85f8
JC
472 .moodle-actionmenu {
473 .toggle-display {
474 display: block;
475
476 &.textmenu {
477 padding-left: 8px;
478 padding-right: 8px;
479 }
480
481 // Show caret when JS is enabled.
482 .caret {
483 display: inline-block;
484 position: relative;
485 top: 9px;
486 }
487 }
488
489 > .menubar {
490 display: block;
677650c3 491 margin: 0px;
f89a85f8
JC
492 }
493 > .menu {
494 min-width: 160px;
495 .filler {
496 display: block;
497 .nav-divider();
498 }
499 }
500
501 &.show {
502 background-color: @navbarLinkBackgroundActive;
503 .menu {
504 padding: 5px 0;
505 margin: 2px 0 0;
506 background-clip: padding-box;
507 &:before {
508 content: '';
509 display: inline-block;
418b9328
DP
510 border-left: 7px solid transparent;
511 border-right: 7px solid transparent;
f89a85f8
JC
512 border-bottom: 7px solid #ccc;
513 border-bottom-color: @dropdownBorder;
514 position: absolute;
515 top: -7px;
516 }
517 &:after {
518 content: '';
519 display: inline-block;
418b9328
DP
520 border-left: 6px solid transparent;
521 border-right: 6px solid transparent;
f89a85f8
JC
522 border-bottom: 6px solid @dropdownBackground;
523 position: absolute;
524 top: -6px;
525 }
526
527 a {
f89a85f8
JC
528 border-radius: 0;
529
8ef43cfd
JC
530 &:focus {
531 text-decoration: none;
532 }
f89a85f8 533 &:hover {
8ef43cfd 534 text-decoration: none;
f89a85f8
JC
535 #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
536 }
537 }
538 &.align-tr-br {
539 margin-top: 2px;
540 }
541 .box-shadow (0 5px 10px rgba(0, 0, 0, 0.2));
542 }
f89a85f8 543 }
6da0e4cf 544 }
f89a85f8
JC
545 }
546 .navbar-inverse {
547 .usermenu {
548 .moodle-actionmenu {
549
550 &.show {
551 background-color: @navbarInverseLinkBackgroundActive;
552 }
6da0e4cf
JC
553 }
554 }
f89a85f8
JC
555 }
556}
557
d99949ab
FM
558
559.usermenu {
560 float: right;
561 > .moodle-actionmenu {
562 > .menu {
563 &:before {
564 right: 9px;
f89a85f8 565 }
d99949ab
FM
566 &:after {
567 right: 10px;
f89a85f8 568 }
6da0e4cf 569 }
d99949ab
FM
570 > .menubar li a {
571 text-align: right;
6da0e4cf
JC
572 }
573 }
574}
d99949ab
FM
575&.userloggedinas .usermenu .userbutton .avatars {
576 .avatar {
577 &.current {
578 left: 16px;
6da0e4cf
JC
579 }
580 }
581}
f89a85f8 582
f89a85f8
JC
583.userloggedinas .usermenu .userbutton .avatars {
584 .avatar {
585 &.current {
586 position: relative;
587 top: 4px;
588 left: 4px;
589 width: 20px;
590 height: 20px;
591 margin-top: 11px;
592 margin-bottom: -34px;
593 border: 1px solid #fff;
594 border-radius: 50%;
418b9328 595 box-shadow: -2px -2px 16px rgba(0, 0, 0, 0.25);
f89a85f8
JC
596 }
597 img {
598 width: inherit;
599 height: inherit;
600 }
601 overflow: hidden;
602 }
603}
de2fec2e
TH
604
605// Quiz module
606
607// Question navigation block.
608.path-mod-quiz #mod_quiz_navblock {
609 .qnbutton {
610 text-decoration: none;
611 font-size: 14px;
612 line-height: 20px;
613 font-weight: normal;
614 background-color: @white;
615 background-image: none;
616 height: 40px;
617 width: 30px;
618 border-radius: 3px;
619 border: 0;
620 overflow: visible;
621 margin: 0 6px 6px 0;
622 }
623 span.qnbutton {
624 cursor: default;
625 background-color: @inputDisabledBackground;
626 color: @gray;
627 }
628 a.qnbutton:hover,
629 a.qnbutton:active,
630 a.qnbutton:focus {
631 text-decoration: underline;
632 }
633
634 .qnbutton .thispageholder {
635 border: 1px solid;
636 border-radius: 3px;
637 z-index: 1;
638 }
639 .qnbutton.thispage .thispageholder {
640 border-width: 3px;
641 }
642 .allquestionsononepage .qnbutton.thispage .thispageholder {
643 border-width: 1px;
644 }
645
646 .qnbutton.flagged .thispageholder {
647 background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0px no-repeat;
648 }
649
650 .qnbutton .trafficlight {
651 border: 0;
652 background: @white none center/10px no-repeat scroll;
653 height: 20px;
654 margin-top: 20px;
655 border-radius: 0 0 3px 3px;
656 }
657
658 .qnbutton.notyetanswered .trafficlight,
659 .qnbutton.invalidanswer .trafficlight {
660 background-color: @white;
661 }
662 .qnbutton.invalidanswer .trafficlight {
663 background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
664 }
665 .qnbutton.correct .trafficlight {
666 background-image: url([[pix:theme|mod/quiz/checkmark]]);
667 background-color: @successText;
668 }
669 .qnbutton.blocked .trafficlight {
670 background-image: url([[pix:core|t/locked]]);
671 background-color: @inputDisabledBackground;
672 }
673 .qnbutton.notanswered .trafficlight,
674 .qnbutton.incorrect .trafficlight {
675 background-color: @errorText;
676 }
677 .qnbutton.partiallycorrect .trafficlight {
678 background-image: url([[pix:theme|mod/quiz/whitecircle]]);
679 background-color: @orange;
680 }
681 .qnbutton.complete .trafficlight,
682 .qnbutton.answersaved .trafficlight,
05690639 683 .qnbutton.requiresgrading .trafficlight {
de2fec2e
TH
684 background-color: @grayLight;
685 }
686}