MDL-50497 theme_bootstrapbase: Divider colours look wrong when inverted
[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
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, .replies, .lastpost {
57                 white-space: normal;
58             }
59             .discussionsubscription,
60             .replies {
61                 text-align: center;
62             }
63             .topic,
64             .discussionsubscription,
65             .topic.starter,
66             .picture,
67             .author,
68             .replies,
69             .lastpost {
70                 vertical-align: top;
71             }
72         }
73     }
74 }
76 .path-mod-feedback .feedback_bar_image {
77     height: 5px; // we should remove the bar height specification in core
78 }
80 .forumpost {
81     .well;
82     padding: 6px;
83     .header {
84         margin-bottom: 3px;
85     }
86     .picture img {
87         margin: 3px;
88         &.userpicture {
89             margin-left: 3px;
90             margin-right: 10px;
91         }
92     }
93     .content {
94         .posting.fullpost {
95             margin-top: 8px;
96         }
97     }
98     .row {
99         .topic,
100         .content-mask,
101         .options {
102             margin-left: 48px;
103         }
104         &.side {
105             clear: both;
106         }
107     }
110 .dir-rtl .forumpost {
111     .picture img {
112         &.userpicture {
113             margin-left: 10px;
114             margin-right: 3px;
115         }
116     }
117     .row {
118         .topic,
119         .content-mask,
120         .options {
121             margin-left: 0;
122             margin-right: 48px;
123         }
124     }
127 .forumpost .row .left {
128     width: 48px;
131 .forumpost .options .commands {
132     margin-left: 0;
135 .forumpost .subject {
136     font-weight: bold;
139 // Override hardcoded forum modules styling
140 .forumsearch input[type=text] {
141      margin-bottom: 0 !important;
144 #page-mod-forum-discuss .discussioncontrols {
145     width: auto;
146     margin: 0;
149 #page-footer {
150     margin-top: 1em;
151     padding: 1em 0;
152     border-top: 2px solid @tableBorder;
155 .maincalendar .calendarmonth td,.maincalendar .calendarmonth th {
156     border: 1px dotted @tableBorder;
159 .path-grade-report-grader h1 {
160     text-align: inherit;
163 #page-mod-chat-gui_basic input#message {
164     max-width: 100%;
167 #page-mod-data-view #singleimage {
168     width: auto;
171 .path-mod-data form {
172     margin-top: 10px;
175 .template_heading {
176     margin-top: 10px;
179 .breadcrumb-button {
180     float: right;
181     margin-top: 4px;
184 .breadcrumb-button .singlebutton {
185     float: left;
186     margin-left: 4px;
189 .dir-rtl {
190     .nav-tabs > li,
191     .nav-pills > li {
192         float: right;
193     }
195 .dir-rtl .navbar .brand {
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;
222 .ie .row-fluid .desktop-first-column {
223     margin-left: 0;
225 .langmenu form {
226     margin: 0;
228 .container-fluid {
229     max-width: 1680px;
230     margin: 0 auto;
232 // contributed by Paul Hibbitts, see http://msdn.microsoft.com/en-us/library/ie/jj583807(v=vs.85).aspx
233 canvas {
234     -ms-touch-action: auto;
237 div#dock {
238     display: none;
241 .path-mod-choice {
242     .horizontal  .choices {
243         margin: 0;
244         .option {
245             display: inline-block;
246             padding: 10px;
247         }
248     }
249     .results .data {
250         white-space: normal;
251     }
254 .path-mod-lesson .firstpageoptions {
255     margin: auto;
256     min-width: 280px;
257     width: 60%;
260 .path-mod-lesson .centerpadded {
261     padding: 5px;
262     text-align: center;
265 .path-mod-wiki .wiki_headingtitle,
266 .path-mod-wiki .midpad,
267 .path-mod-wiki .wiki_headingtime {
268     text-align: inherit;
271 .path-mod-wiki .wiki_contentbox {
272     width: 100%;
275 // Dropdown styling.
276 .dropdown-menu {
277     > li > a {
278         padding: 3px 20px 3px 8px;
279     }
281 .dir-rtl .dropdown-menu {
282     > li > a {
283         padding: 3px 8px 3px 20px;
284     }
286 .dir-rtl .dropdown-submenu > .dropdown-menu {
287   .border-radius(6px 0px 6px 6px);
291 // Survey module
293 .path-mod-survey {
294     .surveytable {
295       > tbody > tr:nth-of-type(odd) {background-color: @tableBackground;}
296       > tbody > tr:nth-of-type(even) {background-color: @tableBackgroundAccent;}
297         .rblock label {text-align: center;}
298     }
299     .resultgraph, .reportsummary, .studentreport, .reportbuttons, .centerpara {
300         text-align:center;
301     }
303 // rtl overrides
304 .dir-rtl {
305     &.path-mod-forum .forumheaderlist {
306         thead .header.lastpost {
307             text-align: left;
308         }
309         .discussion {
310             .lastpost {
311                 text-align: left;
312             }
313         }
314     }
317 .nav .caret {
318     margin-left: 4px;
320 .dir-rtl .nav .caret {
321     margin-right: 4px;
324 // Dividers
325 .nav {
326     .divider {
327         overflow: hidden;
328         width: 0;
329         height: @navbarHeight;
330         border-left: 1px solid @navbarBackground;
331         border-right: 1px solid @navbarBackgroundHighlight;
332     }
334 .navbar-inverse {
335     .nav {
336         .divider {
337             border-left-color: @navbarInverseBackground;
338             border-right-color: lighten(@navbarInverseBackground, 25%);
339         }
340     }
342 .dropdown-menu {
343     .divider {
344         width: auto;
345         height: 1px;
346         border-left: 0 none;
347         border-right: 0 none;
348     }
351 // Usermenu
352 .usermenu {
353     .login {
354         color: @navbarText;
355         line-height: 40px;
356         a {
357             color: @linkColor;
358             &:hover,
359             &:focus {
360                 color: @linkColorHover;
361                 text-decoration: underline;
362             }
363         }
364     }
365     .moodle-actionmenu {
367         .toggle-display {
368             display: block;
369             opacity: 1;
370             color: @navbarLinkColor;
371             line-height: 40px;
372             height: 40px;
373             &:hover {
374                 color: @navbarLinkColorHover;
375             }
377             .userbutton {
378                 height: 40px;
379                 line-height: 40px;
380                 .avatars{
381                     display: inline-block;
382                     height: 36px;
383                     width: 36px;
384                     vertical-align: middle;
385                     margin-right: 6px;
386                     margin-left: 6px;
388                     .avatar,
389                     img {
390                         display: block;
391                     }
392                 }
393                 .usertext {
394                     display: inline-block;
395                     vertical-align: middle;
396                     line-height: 1em;
397                     color: inherit;
398                     .meta,
399                     .role {
400                         display: block;
401                         font-size: 12px;
402                         .value {
403                             font-weight: bold;
404                         }
405                     }
406                     .role {
407                         font-weight: bold;
408                     }
409                 }
410             }
412             // Hide caret when JS is disabled.
413             .caret {
414                 display: none;
415             }
416         }
419         // A little bit of visual feedback for the action menu when Javascript is disabled.
420         .menu {
421             .menu-action.icon {
422                 img {
423                     border-radius: 0;
424                     background: transparent;
425                     box-shadow: none;
426                 }
427                 &:hover img {
428                     background: #fff;
429                     border-radius: 4px;
430                     box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.125);
431                 }
432             }
433         }
434         &[data-enhanced] .menu {
435             .menu-action.icon,
436             .menu-action.icon:hover {
437                 img {
438                     border-radius: 0;
439                     background: transparent;
440                     box-shadow: none;
441                 }
442             }
443         }
445     }
447 .navbar-inverse {
448     .usermenu {
449         .login {
450             color: @navbarInverseText;
451             a {
452                 color: @navbarInverseLinkColor;
453                 &:hover {
454                     color: @navbarInverseLinkColorHover;
455                 }
456             }
457         }
458         .moodle-actionmenu {
459             .toggle-display {
460                 color: @navbarInverseLinkColor;
461             }
462             .userbutton {
463                 .usertext {
464                     color: @navbarInverseLinkColor;
465                     .meta {
466                         color: @navbarInverseText;
467                         .value {
468                             color: @navbarInverseLinkColor;
469                         }
470                     }
471                 }
472             }
473             &:hover {
474                 .usertext {
475                     color: @navbarInverseLinkColorHover;
476                     .meta {
477                         color: @navbarInverseText;
478                         .value {
479                             color: @navbarInverseLinkColorHover;
480                         }
481                     }
482                 }
483             }
484             &[data-enhanced] .toggle-display.textmenu {
485                 .caret {
486                     border-top-color: @navbarInverseLinkColorHover;
487                 }
488             }
490             // A little bit of visual feedback for the action menu when Javascript is disabled.
491             .menu {
492                 .menu-action.icon {
493                     img {
494                         border-radius: 0;
495                         background: transparent;
496                         box-shadow: none;
497                     }
498                     &:hover img {
499                         background: #333;
500                         border-radius: 4px;
501                         box-shadow: 0px 0px 16px rgba(255, 255, 255, 1);
502                     }
503                 }
504             }
505             &[data-enhanced] .menu {
506                 .menu-action.icon,
507                 .menu-action.icon:hover {
508                     img {
509                         border-radius: 0;
510                         background: transparent;
511                         box-shadow: none;
512                     }
513                 }
514             }
515         }
516     }
519 .jsenabled {
520     .usermenu {
521         .moodle-actionmenu {
522             .toggle-display {
523                 display: block;
525                 &.textmenu {
526                     padding-left: 8px;
527                     padding-right: 8px;
528                 }
530                 // Show caret when JS is enabled.
531                 .caret {
532                     display: inline-block;
533                     position: relative;
534                     top: 9px;
535                 }
536             }
538             > .menubar {
539                 display: block;
540                 margin: 0px 0px 2px 0px;
541             }
542             > .menu {
543                 min-width: 160px;
544                 .filler {
545                     display: block;
546                     .nav-divider();
547                 }
548             }
550             &.show {
551                 background-color: @navbarLinkBackgroundActive;
552                 .menu {
553                     padding: 5px 0;
554                     margin: 2px 0 0;
555                     background-clip: padding-box;
556                     &:before {
557                         content: '';
558                         display: inline-block;
559                         border-left:   7px solid transparent;
560                         border-right:  7px solid transparent;
561                         border-bottom: 7px solid #ccc;
562                         border-bottom-color: @dropdownBorder;
563                         position: absolute;
564                         top: -7px;
565                     }
566                     &:after {
567                         content: '';
568                         display: inline-block;
569                         border-left:   6px solid transparent;
570                         border-right:  6px solid transparent;
571                         border-bottom: 6px solid @dropdownBackground;
572                         position: absolute;
573                         top: -6px;
574                     }
576                     a {
577                         border-radius: 0;
579                         &:focus {
580                             text-decoration: none;
581                         }
582                         &:hover {
583                             text-decoration: none;
584                             #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
585                         }
586                     }
587                     &.align-tr-br {
588                         margin-top: 2px;
589                     }
590                     .box-shadow (0 5px 10px rgba(0, 0, 0, 0.2));
591                 }
592                 &:hover .toggle-display {}
593             }
594         }
595     }
596     .navbar-inverse {
597         .usermenu {
598             .moodle-actionmenu {
600                 &.show {
601                     background-color: @navbarInverseLinkBackgroundActive;
602                 }
603             }
604         }
605     }
608 .dir-ltr {
609     .usermenu {
610         float: right;
611         > .moodle-actionmenu {
612             > .menu {
613                 &:before {
614                     right: 9px;
615                 }
616                 &:after {
617                     right: 10px;
618                 }
619             }
620             > .menubar li a {
621                 text-align: right;
622             }
623         }
624     }
625     &.userloggedinas .usermenu .userbutton .avatars {
626         .avatar {
627             &.current {
628                 left: 16px;
629             }
630         }
631     }
634 .dir-rtl {
635     .usermenu {
636         float: left;
637         > .moodle-actionmenu {
638             > .menu {
639                 margin-right: 0px;
640                 &:before {
641                     left: 9px;
642                 }
643                 &:after {
644                     left: 10px;
645                 }
646             }
647             > .menubar li a {
648                 text-align: left;
649             }
650         }
651     }
652     &.userloggedinas .usermenu .userbutton .avatars {
653         .avatar {
654             &.current {
655                 left: -14px;
656             }
657         }
658     }
662 .userloggedinas .usermenu .userbutton .avatars {
663     .avatar {
664         &.current {
665             position: relative;
666             top: 4px;
667             left: 4px;
668             width: 20px;
669             height: 20px;
670             margin-top: 11px;
671             margin-bottom: -34px;
672             border: 1px solid #fff;
673             border-radius: 50%;
674             box-shadow: -2px -2px 16px rgba(0,0,0,0.25);
675         }
676         img {
677             width: inherit;
678             height: inherit;
679         }
680         overflow: hidden;
681     }