MDL-56292 message: move notifications page into popup plugin
[moodle.git] / theme / boost / scss / moodle / message.scss
CommitLineData
536f0460
DW
1/** Message **/
2.message-discussion-noframes h1 {
3 font-size: 1em;
4}
f4143537 5
536f0460
DW
6.message-discussion-noframes #userinfo .commands,
7.message .noframesjslink,
8.message .link {
9 font-size: $font-size-sm;
10}
f4143537 11
536f0460
DW
12.message .heading {
13 font-size: 1em;
14 font-weight: bold;
15 clear: both;
16 word-wrap: break-word;
17}
f4143537 18
536f0460
DW
19.message .author {
20 font-weight: bold;
21}
f4143537 22
536f0460
DW
23.message .time {
24 font-style: italic;
25}
f4143537 26
536f0460
DW
27#page-message-user .commands span {
28 font-size: 0.7em;
29}
f4143537 30
536f0460
DW
31#page-message-user .name {
32 font-weight: bold;
33 font-size: 1.1em;
34}
f4143537 35
536f0460
DW
36.message .time {
37 @extend .text-muted;
38}
f4143537 39
536f0460
DW
40#page-message-messages {
41 padding: 10px;
42}
f4143537 43
536f0460
DW
44#page-message-send .notifysuccess {
45 padding: 1px;
46}
f4143537 47
536f0460
DW
48#page-message-send td.fixeditor {
49 text-align: center;
50}
f4143537 51
536f0460
DW
52.message {
53 overflow: hidden;
54}
f4143537 55
536f0460
DW
56.message .note {
57 padding: 10px;
58}
f4143537 59
536f0460
DW
60table.message .searchresults td {
61 padding: 5px;
62}
f4143537 63
536f0460
DW
64.message .contactselector {
65 $maxwidth: 240px;
536f0460
DW
66 max-width: 380px;
67 margin: 0 auto;
68
69 @media screen and (min-width: 1000px) {
70 float: left;
71 padding: 0 8px 0 0;
72 }
73 width: auto;
f4143537 74
536f0460
DW
75 .singleselect {
76 width: $maxwidth;
77 }
f4143537 78
536f0460
DW
79 .paging {
80 z-index: 1;
81 position: relative;
82 }
83
84 #message_participants {
85 max-width: $maxwidth;
86 }
87
88 .message-contacts {
89 list-style-type: none;
90 margin: 0;
91
92 li {
93 clear: both;
94 position: relative;
95 min-height: 23px;
96 padding: 2px;
f4143537 97
536f0460
DW
98 &:nth-child(odd) {
99 background: rgba(120, 120, 255, 0.1);
100 }
f4143537 101
536f0460
DW
102 > div {
103 display: block;
104 height: 100%;
f4143537 105
536f0460
DW
106 > * {
107 vertical-align: middle;
108 display: inline-block;
109 }
110
111 &.pix {
112 position: relative;
113 float: left;
114 }
f4143537 115
536f0460
DW
116 &.link {
117 white-space: nowrap;
118 width: 60px;
119 position: relative;
120 float: right;
121 text-align: right;
122 }
f4143537 123
536f0460
DW
124 &.contact {
125 position: relative;
126 word-break: break-all;
f4143537 127
536f0460
DW
128 a {
129 line-height: 22px;
130 }
131 }
132 }
133 }
134 }
135}
f4143537 136
536f0460
DW
137.message .message-contacts li {
138 text-align: left;
f4143537 139
536f0460
DW
140 > div {
141 &.pix {
142 float: left;
143 }
f4143537 144
536f0460
DW
145 &.link {
146 float: right;
147 text-align: right;
148 }
f4143537 149
536f0460
DW
150 &.contact {
151 margin: 0 60px 0 24px;
f4143537 152
536f0460
DW
153 &.nolinks {
154 margin: 0 0 0 24px;
155 }
156 }
157 }
158}
159
f4143537 160.message .messagearea {
536f0460
DW
161 @media screen and (min-width: 1000px) {
162 border-left: 1px solid $table-border-color;
163 padding: 0 8px;
164 }
f4143537 165
536f0460
DW
166 @media screen and (max-width: 1000px) {
167 width: 100%;
168 }
169 float: none;
170 overflow: hidden;
171 min-height: 200px;
172 min-width: 300px;
173}
174
175#message_user_pictures {
176 text-align: center;
177}
178
536f0460
DW
179.message .messagearea .messagehistorytype {
180 clear: both;
181 padding-bottom: 20px;
182}
f4143537 183
536f0460
DW
184.message .messagearea .messagehistory .user {
185 vertical-align: top;
186 width: 45%;
187 min-width: 100px;
188 display: inline-block;
189}
f4143537 190
536f0460
DW
191.message .messagearea .messagehistory .user > div {
192 text-align: center;
193}
f4143537 194
536f0460
DW
195.message .messagearea .messagehistory .between {
196 display: inline-block;
197 width: 16px;
198 margin: 0 1%;
199 padding-top: 40px;
200}
201
202@media screen and (max-width: 320px) {
536f0460
DW
203 .message .messagearea {
204 min-width: 0;
205 }
206
207 .message .messagearea .messagehistory .user {
208 max-width: 70px;
209 min-width: 0;
210 }
211
212 .message .messagearea .messagehistory .user .userpicture {
213 width: 50px;
214 height: auto;
215 }
216}
217
218@media screen and (min-width: 800px) {
219 .message .messagearea .messagehistory .between {
220 margin: 0 3%;
221 }
f4143537 222
536f0460 223 .message .messagearea .messagehistory .user {
f4143537 224 width: 32%;
536f0460
DW
225 }
226}
f4143537 227
536f0460
DW
228@media screen and (min-width: 1200px) {
229 .message .messagearea .messagehistory .user {
f4143537 230 width: 25%;
536f0460
DW
231 }
232}
f4143537 233
536f0460
DW
234.message .messagearea .messagehistory .heading {
235 width: 100%;
236 clear: both;
237}
f4143537 238
536f0460
DW
239.message .messagearea .messagehistory .left {
240 margin-bottom: 10px;
241 width: 50%;
242 float: left;
243 position: relative;
244 clear: both;
245}
f4143537 246
536f0460
DW
247.message .messagearea .messagehistory .right {
248 margin-bottom: 10px;
249 width: 50%;
250 float: right;
251 position: relative;
252 clear: both;
253}
f4143537 254
536f0460
DW
255.message .messagearea .messagehistory .notification {
256 @extend .card;
257 margin-bottom: 0;
258 margin-top: 5px;
259}
f4143537 260
536f0460
DW
261.message .messagearea .messagehistory .right .message {
262 margin-left: 20px;
263}
f4143537 264
536f0460 265.message .messagearea .messagehistory .messageactive {
9cb41231 266 background-color: $table-bg-hover;
536f0460 267}
f4143537 268
536f0460
DW
269.message .messagearea .messagesend {
270 padding-top: 20px;
271 clear: both;
272}
f4143537 273
536f0460
DW
274.message .messagearea .messagesend .messagesendbox {
275 width: 100%;
276 box-sizing: border-box;
277}
f4143537 278
536f0460
DW
279.message .messagearea .messagesend fieldset {
280 padding: 0;
281 margin: 0;
282}
283// Bring the message send button closer to the message box.
284.message .messagearea .messagerecent {
285 text-align: left;
286 width: 100%;
287}
f4143537 288
536f0460
DW
289.message .messagearea .messagerecent .singlemessage {
290 border-bottom: 1px solid $table-border-color;
291 padding: 10px;
292}
f4143537 293
536f0460
DW
294.message .messagearea .messagerecent .singlemessage .otheruser span {
295 padding: 5px;
296}
f4143537 297
536f0460
DW
298.message .messagearea .messagerecent .singlemessage .messagedate {
299 float: right;
300}
f4143537
DP
301
302.message .hiddenelement {
536f0460
DW
303 display: none;
304}
305// not just using hidden as mform adds that class to its fieldset */
306.message .visible {
307 display: inline;
308}
f4143537
DP
309
310.message #usergroupselector.fieldset,
311.message #viewing {
536f0460
DW
312 width: 100%;
313}
f4143537 314
536f0460
DW
315.messagesearchresults {
316 margin-bottom: 40px;
317}
f4143537 318
536f0460
DW
319.messagesearchresults td {
320 padding: 0 10px 0 20px;
321}
f4143537 322
536f0460
DW
323.messagesearchresults td span {
324 white-space: nowrap;
325}
f4143537 326
536f0460
DW
327.messagesearchresults td img.userpicture {
328 padding-right: .45em;
329 vertical-align: text-bottom;
330}
f4143537 331
536f0460
DW
332.messagesearchresults td span img {
333 padding: 0 0 0 .45em;
334 vertical-align: text-bottom;
335}
f4143537 336
536f0460
DW
337#newmessageoverlay {
338 @extend .card;
339 margin: 0 1em;
340 position: fixed;
341 bottom: 0;
342 right: 0;
343}
f4143537 344
536f0460
DW
345#newmessageoverlay #usermessage {
346 padding: 10px;
347}
348/* Widen the plain text editor on the bulk message screen */
349#page-user-action_redir #edit-messagebody {
f4143537 350 width: auto;
536f0460
DW
351}
352
353/** Messenger send message dialog */
354.core_message-messenger-sendmessage-hidden {
f4143537 355 display: none;
536f0460 356}
f4143537 357
536f0460
DW
358.core_message-messenger-sendmessage {
359 .message-actions {
360 position: relative;
361 }
f4143537 362
536f0460
DW
363 .message-area {
364 height: 240px;
365 max-height: 100%;
366 position: relative;
367 margin-bottom: 10px;
368 }
f4143537 369
536f0460
DW
370 .message-input {
371 width: 100%;
372 height: 100%;
9cb41231 373 // @include box-sizing(border-box);
536f0460 374 }
f4143537 375
536f0460
DW
376 .message-send {
377 margin: 0;
378 float: right;
379 }
f4143537 380
536f0460
DW
381 .message-notice-area {
382 display: table;
383 position: absolute;
384 top: 0;
385 bottom: 0;
386 left: 0;
387 right: 0;
388 width: 100%;
389 height: 100%;
390 }
f4143537 391
536f0460
DW
392 .message-notice {
393 display: table-cell;
394 vertical-align: middle;
395 text-align: center;
f4143537 396
536f0460
DW
397 > div {
398 background: #eee;
399 padding: 5px;
400 font-size: 12px;
401 }
402 }
f4143537 403
536f0460
DW
404 .message-footer {
405 margin-top: 3px;
406 line-height: 20px;
407 }
f4143537 408
536f0460
DW
409 .message-history {
410 position: absolute;
411 bottom: 0;
412 }
413}