MDL-55607 theme_noname: Remove icon styles - We only need .icon everywhere.
[moodle.git] / theme / noname / scss / moodle / message.scss
1 /** Message **/
2 .message-discussion-noframes h1 {
3     font-size: 1em;
4 }
5 .message-discussion-noframes #userinfo .commands,
6 .message .noframesjslink,
7 .message .link {
8     font-size: $font-size-sm;
9 }
10 .message .heading {
11     font-size: 1em;
12     font-weight: bold;
13     clear: both;
14     word-wrap: break-word;
15 }
16 .message .author {
17     font-weight: bold;
18 }
19 .message .time {
20     font-style: italic;
21 }
22 #page-message-user .commands span {
23     font-size: 0.7em;
24 }
25 #page-message-user .name {
26     font-weight: bold;
27     font-size: 1.1em;
28 }
29 .message .time {
30     @extend .text-muted;
31 }
32 #page-message-messages {
33     padding: 10px;
34 }
35 #page-message-send .notifysuccess {
36     padding: 1px;
37 }
38 #page-message-send td.fixeditor {
39     text-align: center;
40 }
41 .message {
42     overflow: hidden;
43 }
44 .message .note {
45     padding: 10px;
46 }
47 table.message .searchresults td {
48     padding: 5px;
49 }
50 .message .contactselector {
51     $maxwidth: 240px;
53     max-width: 380px;
54     margin: 0 auto;
56     @media screen and (min-width: 1000px) {
57         float: left;
58         padding: 0 8px 0 0;
59     }
60     width: auto;
61     .singleselect {
62         width: $maxwidth;
63     }
64     .paging {
65         z-index: 1;
66         position: relative;
67     }
69     #message_participants {
70         max-width: $maxwidth;
71     }
73     .message-contacts {
74         list-style-type: none;
75         margin: 0;
77         li {
78             clear: both;
79             position: relative;
80             min-height: 23px;
81             padding: 2px;
82             &:nth-child(odd) {
83                 background: rgba(120, 120, 255, 0.1);
84             }
85             > div {
86                 display: block;
87                 height: 100%;
88                 > * {
89                     vertical-align: middle;
90                     display: inline-block;
91                 }
93                 &.pix {
94                     position: relative;
95                     float: left;
96                 }
97                 &.link {
98                     white-space: nowrap;
99                     width: 60px;
100                     position: relative;
101                     float: right;
102                     text-align: right;
103                 }
104                 &.contact {
105                     position: relative;
106                     word-break: break-all;
107                     a {
108                         line-height: 22px;
109                     }
110                 }
111             }
112         }
113     }
115 .message .message-contacts li {
116     text-align: left;
117     > div {
118         &.pix {
119             float: left;
120         }
121         &.link {
122             float: right;
123             text-align: right;
124         }
125         &.contact {
126             margin: 0 60px 0 24px;
127             &.nolinks {
128                 margin: 0 0 0 24px;
129             }
130         }
131     }
135 .message .messagearea  {
136     @media screen and (min-width: 1000px) {
137         border-left: 1px solid $table-border-color;
138         padding: 0 8px;
139     }
140     @media screen and (max-width: 1000px) {
141         width: 100%;
142     }
143     float: none;
144     overflow: hidden;
145     min-height: 200px;
146     min-width: 300px;
149 #message_user_pictures {
150     text-align: center;
154 .message .messagearea .messagehistorytype {
155     clear: both;
156     padding-bottom: 20px;
158 .message .messagearea .messagehistory .user {
159     vertical-align: top;
160     width: 45%;
161     min-width: 100px;
162     display: inline-block;
164 .message .messagearea .messagehistory .user > div {
165     text-align: center;
167 .message .messagearea .messagehistory .between {
168     display: inline-block;
169     width: 16px;
170     margin: 0 1%;
171     padding-top: 40px;
174 @media screen and (max-width: 320px) {
176     .message .messagearea {
177         min-width: 0;
178     }
180     .message .messagearea .messagehistory .user {
181         max-width: 70px;
182         min-width: 0;
183     }
185     .message .messagearea .messagehistory .user .userpicture {
186         width: 50px;
187         height: auto;
188     }
191 @media screen and (min-width: 800px) {
192     .message .messagearea .messagehistory .between {
193         margin: 0 3%;
194     }
195     .message .messagearea .messagehistory .user {
196         width: 32%
197     }
199 @media screen and (min-width: 1200px) {
200     .message .messagearea .messagehistory .user {
201         width: 25%
202     }
204 .message .messagearea .messagehistory .heading {
205     width: 100%;
206     clear: both;
208 .message .messagearea .messagehistory .left {
209     margin-bottom: 10px;
210     width: 50%;
211     float: left;
212     position: relative;
213     clear: both;
215 .message .messagearea .messagehistory .right {
216     margin-bottom: 10px;
217     width: 50%;
218     float: right;
219     position: relative;
220     clear: both;
222 .message .messagearea .messagehistory .notification {
223     @extend .card;
224     margin-bottom: 0;
225     margin-top: 5px;
227 .message .messagearea .messagehistory .right .message {
228     margin-left: 20px;
230 .message .messagearea .messagehistory .messageactive {
231   background-color: $table-bg-hover;
233 .message .messagearea .messagesend {
234     padding-top: 20px;
235     clear: both;
237 .message .messagearea .messagesend .messagesendbox {
238     width: 100%;
239     box-sizing: border-box;
241 .message .messagearea .messagesend fieldset {
242     padding: 0;
243     margin: 0;
245 // Bring the message send button closer to the message box.
246 .message .messagearea .messagerecent {
247     text-align: left;
248     width: 100%;
250 .message .messagearea .messagerecent .singlemessage {
251     border-bottom: 1px solid $table-border-color;
252     padding: 10px;
254 .message .messagearea .messagerecent .singlemessage .otheruser span {
255     padding: 5px;
257 .message .messagearea .messagerecent .singlemessage .messagedate {
258     float: right;
260 .message .hiddenelement  {
261     display: none;
263 // not just using hidden as mform adds that class to its fieldset */
264 .message .visible {
265     display: inline;
267 .message #usergroupselector.fieldset, .message #viewing {
268     width: 100%;
270 .messagesearchresults {
271     margin-bottom: 40px;
273 .messagesearchresults td {
274     padding: 0 10px 0 20px;
276 .messagesearchresults td span {
277     white-space: nowrap;
279 .messagesearchresults td img.userpicture {
280     padding-right: .45em;
281     vertical-align: text-bottom;
283 .messagesearchresults td span img {
284     padding: 0 0 0 .45em;
285     vertical-align: text-bottom;
287 #newmessageoverlay {
288     @extend .card;
289     margin: 0 1em;
290     position: fixed;
291     bottom: 0;
292     right: 0;
294 #newmessageoverlay #usermessage {
295     padding: 10px;
297 /* Widen the plain text editor on the bulk message screen */
298 #page-user-action_redir #edit-messagebody {
299     width:auto;
302 /** Messenger send message dialog */
303 .core_message-messenger-sendmessage-hidden {
304     display:none;
306 .core_message-messenger-sendmessage {
307     .message-actions {
308         position: relative;
309     }
310     .message-area {
311         height: 240px;
312         max-height: 100%;
313         position: relative;
314         margin-bottom: 10px;
315     }
316     .message-input {
317         width: 100%;
318         height: 100%;
319     //    @include box-sizing(border-box);
320     }
321     .message-send {
322         margin: 0;
323         float: right;
324     }
325     .message-notice-area {
326         display: table;
327         position: absolute;
328         top: 0;
329         bottom: 0;
330         left: 0;
331         right: 0;
332         width: 100%;
333         height: 100%;
334     }
335     .message-notice {
336         display: table-cell;
337         vertical-align: middle;
338         text-align: center;
339         > div {
340             background: #eee;
341             padding: 5px;
342             font-size: 12px;
343         }
344     }
345     .message-footer {
346         margin-top: 3px;
347         line-height: 20px;
348     }
349     .message-history {
350         position: absolute;
351         bottom: 0;
352     }