MDL-55593 theme_noname: Post-prod on preset default styling
[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
63e4df60
DW
12// Feedback module
13.path-mod-feedback .mform.feedback_form .fitem .fitemtitle {
14 display: block;
15 margin-top: 4px;
16 margin-bottom: 4px;
17 text-align: left;
18 width: 100%;
19}
20
21.path-mod-feedback .mform.feedback_form .fitem .felement {
22 margin-left: 0;
23 width: 100%;
24 float: left;
25 padding-left: 0;
26 padding-right: 0;
27}
28
29.path-mod-feedback .mform.feedback_form .fitem .fstatic:empty {
30 display: none;
31}
32
33.path-mod-feedback .mform.feedback_form .fitem .fcheckbox > span,
34.path-mod-feedback .mform.feedback_form .fitem .fradio > span,
35.path-mod-feedback .mform.feedback_form .fitem .fgroup > span {
36 margin-top: 4px;
37}
38
39body.path-mod-feedback #region-main .mform.feedback_form .femptylabel .fitemtitle {
40 display: inline-block;
41 width: auto;
42 margin-right: 0;
43}
44
45.path-mod-feedback .mform.feedback_form .femptylabel .felement {
46 display: inline-block;
47 margin-top: 4px;
48 padding-top: 5px;
49 width: auto;
50}
51
52body.path-mod-feedback #region-main .mform.feedback_form .feedback-item-pagebreak .felement {
53 width: 100%;
54}
55
56.path-mod-feedback .mform.feedback_form .fitem_fcheckbox .fitemtitle,
57.path-mod-feedback .mform.feedback_form .fitem_fcheckbox .felement {
58 display: inline-block;
59 width: auto;
60}
61
62.path-mod-feedback .mform.feedback_form .fitem_fcheckbox .felement {
63 padding: 6px;
64}
65
66.path-mod-feedback .mform.feedback_form#feedback_viewresponse_form .fitem.feedback_hasvalue:not(.feedback-item-captcha) .felement {
67 background: #FBFBF1;
68 min-height: 1em;
69 box-sizing: border-box;
70 padding: 3px;
71 border: 1px solid #ddd
72}
73
74.path-mod-feedback .mform.feedback_form .fitem.feedback_hasvalue .fstatic:empty {
75 display: inherit;
76}
77
78.path-mod-feedback .mform.feedback_form#feedback_edit_form .fitem:hover {
79 background: #f5f5f5;
80}
81
82.path-mod-feedback .mform.feedback_form#feedback_edit_form .fitem .fitemtitle label {
83 width: 100%;
84}
85
86.path-mod-feedback .mform.feedback_form#feedback_edit_form .fitem .fitemtitle .itemtitle {
87 position: relative;
88 width: 100%;
89}
90
91.path-mod-feedback .mform.feedback_form#feedback_edit_form .fitem .fitemtitle .itemtitle .itemdd,
92.path-mod-feedback .mform.feedback_form#feedback_edit_form .fitem .fitemtitle .itemtitle .itemname {
93 float: left;
94}
95
96.path-mod-feedback .mform.feedback_form#feedback_edit_form .fitem .fitemtitle .itemtitle .itemactions {
97 float: right;
98}
99
de2fec2e 100// Forum module
8bf57320 101
bfaee803
SH
102.path-mod-forum .forumsearch {
103 input,
104 .helptooltip {
105 margin: 0 3px;
106 }
107}
108
8903b17b
BB
109.path-mod-forum .forumheaderlist,
110.path-mod-forum .forumheaderlist td {
111 border: none;
112}
113
ebfb73db
AN
114.path-mod-forum {
115 .forumheaderlist {
116 thead .header,
117 tbody .discussion td {
8bf57320 118 white-space: normal;
ebfb73db
AN
119 vertical-align: top;
120 padding-left: 0.5em;
121 padding-right: 0.5em;
8bf57320 122 }
ebfb73db
AN
123
124 thead .header {
125 white-space: normal;
126 vertical-align: top;
127 }
128
129 thead .header.replies {
8bf57320
DM
130 text-align: center;
131 }
ebfb73db
AN
132 thead .header.lastpost {
133 text-align: right;
134 }
135 thead .header th,
0e878352 136 tbody .discussion td {
ebfb73db
AN
137 &.discussionsubscription {
138 width: 16px;
139 padding-left: 0.5em;
140 padding-right: 0.5em;
141 }
142 }
143 .discussion {
0e878352
DP
144 .author,
145 .replies,
146 .lastpost {
ebfb73db
AN
147 white-space: normal;
148 }
149 .discussionsubscription,
150 .replies {
151 text-align: center;
152 }
153 .topic,
154 .discussionsubscription,
155 .topic.starter,
156 .picture,
157 .author,
158 .replies,
159 .lastpost {
160 vertical-align: top;
161 }
8bf57320
DM
162 }
163 }
164}
165
8903b17b
BB
166.forumpost {
167 .well;
168 padding: 6px;
73c4e333
AB
169 .header {
170 margin-bottom: 3px;
171 }
cee8be63
JC
172 .picture img {
173 margin: 3px;
174 &.userpicture {
175 margin-left: 3px;
176 margin-right: 10px;
177 }
178 }
179 .content {
180 .posting.fullpost {
181 margin-top: 8px;
182 }
183 }
184 .row {
185 .topic,
186 .content-mask,
187 .options {
188 margin-left: 48px;
189 }
190 &.side {
191 clear: both;
192 }
193 }
194}
195
8903b17b 196.forumpost .row .left {
cee8be63 197 width: 48px;
8903b17b
BB
198}
199
200.forumpost .options .commands {
201 margin-left: 0;
202}
203
204.forumpost .subject {
205 font-weight: bold;
206}
207
208// Override hardcoded forum modules styling
209.forumsearch input[type=text] {
eb695207 210 margin-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
8903b17b
BB
211}
212
35620f63
SH
213#page-mod-forum-discuss .discussioncontrols {
214 width: auto;
215 margin: 0;
8903b17b
BB
216}
217
218#page-footer {
219 margin-top: 1em;
220 padding: 1em 0;
e514c722 221 border-top: 2px solid @tableBorder;
8903b17b
BB
222}
223
0e878352
DP
224.maincalendar .calendarmonth td,
225.maincalendar .calendarmonth th {
e514c722 226 border: 1px dotted @tableBorder;
8903b17b
BB
227}
228
229.path-grade-report-grader h1 {
230 text-align: inherit;
231}
232
233#page-mod-chat-gui_basic input#message {
234 max-width: 100%;
235}
236
237#page-mod-data-view #singleimage {
238 width: auto;
239}
240
241.path-mod-data form {
242 margin-top: 10px;
243}
244
245.template_heading {
246 margin-top: 10px;
247}
248
249.breadcrumb-button {
250 float: right;
3355b72e 251 margin-top: 4px;
8903b17b 252}
eef85081 253
41dcfbf1
MA
254.breadcrumb-button .singlebutton {
255 float: left;
256 margin-left: 4px;
257}
258
af9c2dcf
GB
259.navbar-inverse .logininfo a {
260 color: @navbarInverseLinkColor;
261}
262.navbar-inverse .logininfo a:hover {
263 background-color: @navbarInverseLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
264 color: @navbarInverseLinkColorHover;
8903b17b
BB
265}
266
267.navbar-fixed-top,
268.navbar-fixed-bottom {
58183f9b 269 z-index: 4030;
8903b17b
BB
270}
271
8903b17b 272.ie .row-fluid .desktop-first-column {
58183f9b 273 margin-left: 0;
8903b17b
BB
274}
275.langmenu form {
276 margin: 0;
277}
278.container-fluid {
279 max-width: 1680px;
280 margin: 0 auto;
281}
282// contributed by Paul Hibbitts, see http://msdn.microsoft.com/en-us/library/ie/jj583807(v=vs.85).aspx
283canvas {
284 -ms-touch-action: auto;
285}
286
287div#dock {
288 display: none;
289}
290
de2fec2e
TH
291// Choice module
292
9184a2f7
AB
293.path-mod-choice {
294 .horizontal .choices {
295 margin: 0;
296 .option {
297 display: inline-block;
298 padding: 10px;
299 }
300 }
301 .results .data {
302 white-space: normal;
8903b17b
BB
303 }
304}
305
de2fec2e
TH
306// Lesson module
307
8903b17b
BB
308.path-mod-lesson .firstpageoptions {
309 margin: auto;
310 min-width: 280px;
311 width: 60%;
312}
01a96461
RW
313
314.path-mod-lesson .centerpadded {
315 padding: 5px;
316 text-align: center;
317}
876c0ac3 318
63e4df60
DW
319/** General styles (scope: all of lesson) **/
320.path-mod-lesson .contents,
321.path-mod-lesson .standardtable,
322.path-mod-lesson .mform .box.contents,
323.path-mod-lesson .invisiblefieldset.fieldsetfix tr {text-align: left;}
324.path-mod-lesson #layout-table {width: 100%;}
325.path-mod-lesson .edit_buttons form,
326.path-mod-lesson .edit_buttons input {display: inline;}
327.path-mod-lesson .userinfotable .cell,
328.path-mod-lesson .userinfotable .userpicture {vertical-align: middle;}
329.path-mod-lesson .invisiblefieldset.fieldsetfix {display: block;}
330.path-mod-lesson .slideshow {overflow: auto;padding: 15px;}
331.path-mod-lesson .menu .menuwrapper {max-height: 400px;overflow: auto;vertical-align: top;margin-bottom: 10px;}
332.path-mod-lesson .menu ul {list-style: none;padding: 5px 0px 0px 5px;margin: 0px;}
333.path-mod-lesson .menu ul li {padding-bottom: 5px;}
334.path-mod-lesson .skip {position: absolute;top: -1000em;width: 20em;}
335.path-mod-lesson .branchbuttoncontainer.horizontal div,
336.path-mod-lesson .branchbuttoncontainer.horizontal form {display: inline;}
337.path-mod-lesson .firstpageoptions {width:30%;margin-left:35%;margin-top:1em;}
338.path-mod-lesson .progress_bar_table,
339.path-mod-lesson .progress_bar_completed,
340.path-mod-lesson .progress_bar_todo {padding: 0;margin: 0;}
341.path-mod-lesson .progress_bar_token {height: 20px;width: 5px;padding: 0;margin: 0;}
342.path-mod-lesson .edit_pages_box .addlinks {margin:0;margin-bottom:1em;}
343.path-mod-lesson .progress_bar_completed {background-color:green; text-align:right; vertical-align:middle; color:#FFF;}
344
345.path-mod-lesson .resourcecontent {text-align: center;}
346
347.path-mod-lesson .answeroption .fcheckbox > span {
348 position: relative;
349 float: left;
350}
351
352.path-mod-lesson .answeroptiongroup .fgroup > span {
353 position: relative;
354 width: 100%;
355}
356
357.path-mod-lesson .answeroption .fcheckbox input,
358.path-mod-lesson .answeroptiongroup input {
359 position: absolute;
360 top: 2px;
361 margin-top: 0px;
362 left: 0;
363}
364
365.path-mod-lesson .answeroption .fcheckbox label,
366.path-mod-lesson .mform .fitem.answeroptiongroup fieldset.fgroup label {
367 padding-left: 20px;
368 float: left;
369}
370
371.path-mod-lesson .answeroption .felement label p:last-child,
372.path-mod-lesson .answeroptiongroup .felement label p:last-child {
373 margin-bottom: 0px;
374}
375
376/**
377 * Style for view.php
378 **/
379#page-mod-lesson-view .password-form .submitbutton {display: inline;}
380.path-mod-lesson .reviewessay {width:40%; border:1px solid #DDDDDD; background-color: #EEEEEE;}
381
382/* Countdown timer. */
383#lesson-timer {
384 text-align: center;
385}
386
387.path-mod-lesson .essayungraded {
388 background-color: #efcfcf;
389}
390
391.path-mod-lesson .essaygraded {
392 background-color: #efefcf;
393}
394
395.path-mod-lesson .essaysent {
396 background-color: #cfefcf;
397}
398
14cdc257
RW
399.path-mod-wiki .wiki_headingtitle,
400.path-mod-wiki .midpad,
401.path-mod-wiki .wiki_headingtime {
402 text-align: inherit;
876c0ac3 403}
14cdc257
RW
404
405.path-mod-wiki .wiki_contentbox {
406 width: 100%;
eef85081 407}
1765866f 408
a36f97f7
JC
409// Dropdown styling.
410.dropdown-menu {
411 > li > a {
412 padding: 3px 20px 3px 8px;
413 }
414}
a36f97f7 415
1765866f
DM
416// Survey module
417
418.path-mod-survey {
419 .surveytable {
75b68df3
DP
420 > tbody > tr:nth-of-type(odd) {
421 background-color: @tableBackground;
422 }
423 > tbody > tr:nth-of-type(even) {
424 background-color: @tableBackgroundAccent;
425 }
426 .rblock label {
427 text-align: center;
428 }
1765866f 429 }
0e878352
DP
430 .resultgraph,
431 .reportsummary,
432 .studentreport,
433 .reportbuttons,
434 .centerpara {
418b9328 435 text-align: center;
1765866f
DM
436 }
437}
a36f97f7
JC
438
439.nav .caret {
440 margin-left: 4px;
441}
d9640a99 442
328ef3df
JC
443// Dividers
444.nav {
445 .divider {
446 overflow: hidden;
447 width: 0;
d8d65e76
ME
448 height: @navbarHeight;
449 border-left: 1px solid @navbarBackground;
450 border-right: 1px solid @navbarBackgroundHighlight;
451 }
452}
453.navbar-inverse {
454 .nav {
455 .divider {
456 border-left-color: @navbarInverseBackground;
457 border-right-color: lighten(@navbarInverseBackground, 25%);
458 }
328ef3df
JC
459 }
460}
328ef3df
JC
461.dropdown-menu {
462 .divider {
463 width: auto;
464 height: 1px;
d8d65e76
ME
465 border-left: 0 none;
466 border-right: 0 none;
328ef3df 467 }
d9640a99 468}
6da0e4cf
JC
469
470// Usermenu
471.usermenu {
854a647e
JC
472 .login {
473 color: @navbarText;
474 line-height: 40px;
475 a {
f89a85f8
JC
476 color: @linkColor;
477 &:hover,
478 &:focus {
479 color: @linkColorHover;
480 text-decoration: underline;
481 }
854a647e
JC
482 }
483 }
f89a85f8
JC
484 .moodle-actionmenu {
485
486 .toggle-display {
6da0e4cf 487 display: block;
f89a85f8
JC
488 opacity: 1;
489 color: @navbarLinkColor;
490 line-height: 40px;
491 height: 40px;
492 &:hover {
493 color: @navbarLinkColorHover;
494 }
495
496 .userbutton {
497 height: 40px;
6da0e4cf 498 line-height: 40px;
0e878352 499 .avatars {
f89a85f8
JC
500 display: inline-block;
501 height: 36px;
502 width: 36px;
503 vertical-align: middle;
504 margin-right: 6px;
505 margin-left: 6px;
506
507 .avatar,
508 img {
509 display: block;
510 }
511 }
512 .usertext {
513 display: inline-block;
514 vertical-align: middle;
515 line-height: 1em;
516 color: inherit;
517 .meta,
518 .role {
519 display: block;
520 font-size: 12px;
521 .value {
522 font-weight: bold;
523 }
524 }
525 .role {
526 font-weight: bold;
527 }
528 }
6da0e4cf 529 }
6da0e4cf 530
f89a85f8
JC
531 // Hide caret when JS is disabled.
532 .caret {
533 display: none;
6da0e4cf
JC
534 }
535 }
f89a85f8
JC
536
537
538 // A little bit of visual feedback for the action menu when Javascript is disabled.
539 .menu {
540 .menu-action.icon {
541 img {
542 border-radius: 0;
543 background: transparent;
544 box-shadow: none;
545 }
546 &:hover img {
547 background: #fff;
548 border-radius: 4px;
549 box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.125);
6da0e4cf
JC
550 }
551 }
6da0e4cf 552 }
f89a85f8
JC
553 &[data-enhanced] .menu {
554 .menu-action.icon,
555 .menu-action.icon:hover {
556 img {
557 border-radius: 0;
558 background: transparent;
559 box-shadow: none;
560 }
561 }
6da0e4cf 562 }
f89a85f8 563
6da0e4cf
JC
564 }
565}
f89a85f8 566.navbar-inverse {
854a647e
JC
567 .usermenu {
568 .login {
569 color: @navbarInverseText;
570 a {
571 color: @navbarInverseLinkColor;
572 &:hover {
573 color: @navbarInverseLinkColorHover;
574 }
575 }
576 }
f89a85f8
JC
577 .moodle-actionmenu {
578 .toggle-display {
579 color: @navbarInverseLinkColor;
580 }
581 .userbutton {
582 .usertext {
854a647e 583 color: @navbarInverseLinkColor;
f89a85f8
JC
584 .meta {
585 color: @navbarInverseText;
586 .value {
587 color: @navbarInverseLinkColor;
588 }
589 }
6da0e4cf
JC
590 }
591 }
f89a85f8
JC
592 &:hover {
593 .usertext {
594 color: @navbarInverseLinkColorHover;
595 .meta {
596 color: @navbarInverseText;
597 .value {
598 color: @navbarInverseLinkColorHover;
599 }
854a647e
JC
600 }
601 }
602 }
f89a85f8 603 &[data-enhanced] .toggle-display.textmenu {
854a647e
JC
604 .caret {
605 border-top-color: @navbarInverseLinkColorHover;
606 }
6da0e4cf 607 }
f89a85f8
JC
608
609 // A little bit of visual feedback for the action menu when Javascript is disabled.
610 .menu {
611 .menu-action.icon {
612 img {
613 border-radius: 0;
614 background: transparent;
615 box-shadow: none;
616 }
617 &:hover img {
618 background: #333;
619 border-radius: 4px;
620 box-shadow: 0px 0px 16px rgba(255, 255, 255, 1);
621 }
622 }
623 }
624 &[data-enhanced] .menu {
625 .menu-action.icon,
626 .menu-action.icon:hover {
627 img {
628 border-radius: 0;
629 background: transparent;
630 box-shadow: none;
631 }
632 }
633 }
6da0e4cf
JC
634 }
635 }
636}
f89a85f8
JC
637
638.jsenabled {
6da0e4cf 639 .usermenu {
f89a85f8
JC
640 .moodle-actionmenu {
641 .toggle-display {
642 display: block;
643
644 &.textmenu {
645 padding-left: 8px;
646 padding-right: 8px;
647 }
648
649 // Show caret when JS is enabled.
650 .caret {
651 display: inline-block;
652 position: relative;
653 top: 9px;
654 }
655 }
656
657 > .menubar {
658 display: block;
677650c3 659 margin: 0px;
f89a85f8
JC
660 }
661 > .menu {
662 min-width: 160px;
663 .filler {
664 display: block;
665 .nav-divider();
666 }
667 }
668
669 &.show {
670 background-color: @navbarLinkBackgroundActive;
671 .menu {
672 padding: 5px 0;
673 margin: 2px 0 0;
674 background-clip: padding-box;
675 &:before {
676 content: '';
677 display: inline-block;
418b9328
DP
678 border-left: 7px solid transparent;
679 border-right: 7px solid transparent;
f89a85f8
JC
680 border-bottom: 7px solid #ccc;
681 border-bottom-color: @dropdownBorder;
682 position: absolute;
683 top: -7px;
684 }
685 &:after {
686 content: '';
687 display: inline-block;
418b9328
DP
688 border-left: 6px solid transparent;
689 border-right: 6px solid transparent;
f89a85f8
JC
690 border-bottom: 6px solid @dropdownBackground;
691 position: absolute;
692 top: -6px;
693 }
694
695 a {
f89a85f8
JC
696 border-radius: 0;
697
8ef43cfd
JC
698 &:focus {
699 text-decoration: none;
700 }
f89a85f8 701 &:hover {
8ef43cfd 702 text-decoration: none;
f89a85f8
JC
703 #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
704 }
705 }
706 &.align-tr-br {
707 margin-top: 2px;
708 }
709 .box-shadow (0 5px 10px rgba(0, 0, 0, 0.2));
710 }
f89a85f8 711 }
6da0e4cf 712 }
f89a85f8
JC
713 }
714 .navbar-inverse {
715 .usermenu {
716 .moodle-actionmenu {
717
718 &.show {
719 background-color: @navbarInverseLinkBackgroundActive;
720 }
6da0e4cf
JC
721 }
722 }
f89a85f8
JC
723 }
724}
725
d99949ab
FM
726
727.usermenu {
728 float: right;
729 > .moodle-actionmenu {
730 > .menu {
731 &:before {
732 right: 9px;
f89a85f8 733 }
d99949ab
FM
734 &:after {
735 right: 10px;
f89a85f8 736 }
6da0e4cf 737 }
d99949ab
FM
738 > .menubar li a {
739 text-align: right;
6da0e4cf
JC
740 }
741 }
742}
d99949ab
FM
743&.userloggedinas .usermenu .userbutton .avatars {
744 .avatar {
745 &.current {
746 left: 16px;
6da0e4cf
JC
747 }
748 }
749}
f89a85f8 750
f89a85f8
JC
751.userloggedinas .usermenu .userbutton .avatars {
752 .avatar {
753 &.current {
754 position: relative;
755 top: 4px;
756 left: 4px;
757 width: 20px;
758 height: 20px;
759 margin-top: 11px;
760 margin-bottom: -34px;
761 border: 1px solid #fff;
762 border-radius: 50%;
418b9328 763 box-shadow: -2px -2px 16px rgba(0, 0, 0, 0.25);
f89a85f8
JC
764 }
765 img {
766 width: inherit;
767 height: inherit;
768 }
769 overflow: hidden;
770 }
771}
de2fec2e
TH
772
773// Quiz module
774
775// Question navigation block.
776.path-mod-quiz #mod_quiz_navblock {
777 .qnbutton {
778 text-decoration: none;
779 font-size: 14px;
780 line-height: 20px;
781 font-weight: normal;
782 background-color: @white;
783 background-image: none;
784 height: 40px;
785 width: 30px;
786 border-radius: 3px;
787 border: 0;
788 overflow: visible;
789 margin: 0 6px 6px 0;
790 }
791 span.qnbutton {
792 cursor: default;
793 background-color: @inputDisabledBackground;
794 color: @gray;
795 }
796 a.qnbutton:hover,
797 a.qnbutton:active,
798 a.qnbutton:focus {
799 text-decoration: underline;
800 }
801
802 .qnbutton .thispageholder {
803 border: 1px solid;
804 border-radius: 3px;
805 z-index: 1;
806 }
807 .qnbutton.thispage .thispageholder {
808 border-width: 3px;
809 }
810 .allquestionsononepage .qnbutton.thispage .thispageholder {
811 border-width: 1px;
812 }
813
814 .qnbutton.flagged .thispageholder {
815 background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0px no-repeat;
816 }
817
818 .qnbutton .trafficlight {
819 border: 0;
820 background: @white none center/10px no-repeat scroll;
821 height: 20px;
822 margin-top: 20px;
823 border-radius: 0 0 3px 3px;
824 }
825
826 .qnbutton.notyetanswered .trafficlight,
827 .qnbutton.invalidanswer .trafficlight {
828 background-color: @white;
829 }
830 .qnbutton.invalidanswer .trafficlight {
831 background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
832 }
833 .qnbutton.correct .trafficlight {
834 background-image: url([[pix:theme|mod/quiz/checkmark]]);
835 background-color: @successText;
836 }
837 .qnbutton.blocked .trafficlight {
838 background-image: url([[pix:core|t/locked]]);
839 background-color: @inputDisabledBackground;
840 }
841 .qnbutton.notanswered .trafficlight,
842 .qnbutton.incorrect .trafficlight {
843 background-color: @errorText;
844 }
845 .qnbutton.partiallycorrect .trafficlight {
846 background-image: url([[pix:theme|mod/quiz/whitecircle]]);
847 background-color: @orange;
848 }
849 .qnbutton.complete .trafficlight,
850 .qnbutton.answersaved .trafficlight,
05690639 851 .qnbutton.requiresgrading .trafficlight {
de2fec2e
TH
852 background-color: @grayLight;
853 }
854}