MDL-62151 Theme boost: mod_chat styles
[moodle.git] / theme / boost / scss / moodle / chat.scss
1 // Chat (more!)
2 // -------------------------
3 .yui-skin-sam .yui-layout.path-mod-chat-gui_ajax {
4     background-color: $body-bg;
6     .yui-layout-unit div.yui-layout-bd-nohd,
7     .yui-layout-unit div.yui-layout-bd-noft,
8     .yui-layout-unit div.yui-layout-bd,
9     .yui-layout-unit-right,
10     .yui-layout-unit-bottom {
11         border: 0;
12     }
14     .yui-layout-unit-right,
15     .yui-layout-unit-bottom {
16         border-radius: 0;
17     }
19     .yui-layout-unit div.yui-layout-bd {
20         background-color: transparent;
21     }
22     .yui-layout-unit.yui-layout-unit-center div.yui-layout-bd {
23         background-color: $gray-100;
24     }
25     // Override the default padding added by function $OUTPUT->box();
26     #chat-input-area.py-3 {
27         @extend .p-0;
28     }
29     #chat-input-area table.generaltable,
30     #chat-input-area table.generaltable td.cell {
31         border: 0;
32         padding: 3px 15px;
33         white-space: nowrap;
34         margin-bottom: 0;
35     }
37     #chat-userlist {
38         padding: 10px 5px;
40         #users-list {
41             border-top: 1px solid $gray-300;
42             border-bottom: 1px solid $body-bg;
44             li {
45                 border-top: 1px solid $body-bg;
46                 border-bottom: 1px solid $gray-300;
47                 padding: 5px 10px;
48             }
50             img {
51                 margin-right: 8px;
52                 border: 1px solid #ccc;
53                 border-radius: 4px;
54                 max-width: none;
55             }
56         }
57     }
59     #chat-messages {
60         margin: 20px 25px;
62         .chat-event.course-theme {
63             text-align: center;
64             margin: 10px 0;
65             font-size: $font-size-sm;
66             color: $gray-700;
67         }
69         .chat-message.course-theme {
70             margin-bottom: $card-spacer-y;
71             @include border-radius($card-border-radius);
72             border: $card-border-width solid $card-border-color;
73             padding: $card-spacer-x;
75             .time {
76                 float: right;
77                 font-size: 11px;
78                 color: $gray-700;
79             }
80         }
82         .chat-message.course-theme {
83             background-color: $white;
85             .user {
86                 font-weight: bold;
87             }
88         }
89     }
90 }