MDL-42434 mod_chat: styles for chat themes to view help-icon properly
[moodle.git] / mod / chat / gui_ajax / theme / bubble / chat.css
1 .yui-skin-sam .yui-layout .yui-layout-hd {
2     border: 0;
3 }
5 .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd-nohd {
6     border: 0;
7 }
9 .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
10     border: 0;
11 }
13 .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-unit-right {
14     background: white;
15 }
17 .yui-skin-sam .yui-layout-unit-bottom {
18     background: #f2f2f2;
19 }
21 .yui-skin-sam .yui-layout-unit-right {
22     background: #eef2f8;
23 }
25 .yui-skin-sam .yui-layout-unit-center {
26     background: white;
27 }
29 .yui-skin-sam .yui-layout-unit-top {
30     background: #ffe39d;
31 }
33 .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
34     background: transparent;
35 }
37 #chat-messages {
38     padding-top: 15px;
39 }
41 #input-message {
42     background: #fff url(input.png) repeat-x scroll 0 0;
43     padding: 0 9px;
44     border: 1px solid #999;
45     border-radius: 9px;
46     -moz-border-radius: 9px;
47 }
49 .mdl-chat-entry,
50 .mdl-chat-my-entry {
51     clear: both;
52 }
54 .mdl-chat-entry .chat-event {
55     padding-bottom: 15px;
56 }
58 .chat-message .chat-message-meta {
59     padding-top: 15px;
60     padding-bottom: 15px;
61 }
63 .chat-message .chat-message-meta .user {
64     white-space: nowrap;
65 }
67 .chat-message .picture {
68     vertical-align: middle;
69 }
71 .chat-message .right {
72     text-align: right;
73 }
75 .chat-message .left {
76     text-align: left;
77 }
78 /*rtl:ignore*/
79 .chat-message .right,
80 .chat-message .left {
81     direction: ltr;
82 }
84 #chat-input-area,
85 #chat-input-area table.generaltable,
86 #chat-input-area table.generaltable td.cell {
87     background: #92b3e8;
88     border: 0;
89     height: 100%;
90 }
92 #chat-userlist {
93     background: #e3e8f0;
94     height: 100%;
95 }
97 /**
98  * The following CSS is a cut down version of PURE CSS SPEECH BUBBLES.
99  * Moodle only uses a small subset of the original.
100  * The original version is available at http://nicolasgallagher.com/pure-css-speech-bubbles/
101  */
103 /* ------------------------------------------
104 PURE CSS SPEECH BUBBLES
105 by Nicolas Gallagher
106 - http://nicolasgallagher.com/pure-css-speech-bubbles/
108 http://nicolasgallagher.com
109 http://twitter.com/necolas
111 Created: 02 March 2010
112 Version: 1.2 (03 March 2011)
114 Dual licensed under MIT and GNU GPLv2 © Nicolas Gallagher
115 ------------------------------------------ */
117 .triangle-border {
118     position: relative;
119     padding: 10px;
120     margin: 1em 0 3em;
121     border: 2px solid #5a8f00;
122     color: #333;
123     background: #fff;
124     /* css3 */
125     -webkit-border-radius: 10px;
126     -moz-border-radius: 10px;
127     border-radius: 10px;
129     /* moodle specific */
130     margin-top: 0;
131     /* end moodle specific */
134 /* moodle specific */
136 @media all and (max-device-width: 320px) {
137     .triangle-border {
138         width: 50%;
139     }
142 @media all and (min-device-width: 321px) and (max-device-width: 640px) {
143     .triangle-border {
144         width: 60%;
145     }
148 @media all and (min-device-width: 641px) {
149     .triangle-border {
150         width: 65%;
151     }
153 /* end moodle specific */
155 /* Variant : for left positioned triangle
156 ------------------------------------------ */
158 .triangle-border.left {
159     margin-left: 30px;
160     /* moodle specific */
161     float: right;
162     /* end moodle specific */
165 /* Variant : for right positioned triangle
166 ------------------------------------------ */
168 .triangle-border.right {
169     margin-right: 30px;
170     /* moodle specific */
171     float: left;
172     /* end moodle specific */
175 .triangle-border:before {
176     content: "";
177     position: absolute;
178     bottom: -20px; /* value = - border-top-width - border-bottom-width */
179     left: 40px; /* controls horizontal position */
180     border-width: 20px 20px 0;
181     border-style: solid;
182     border-color: #5a8f00 transparent;
183     /* reduce the damage in FF3.0 */
184     display: block;
185     width: 0;
188 /* creates the smaller  triangle */
189 .triangle-border:after {
190     content: "";
191     position: absolute;
192     bottom: -13px; /* value = - border-top-width - border-bottom-width */
193     left: 47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
194     border-width: 13px 13px 0;
195     border-style: solid;
196     border-color: #fff transparent;
197     /* reduce the damage in FF3.0 */
198     display: block;
199     width: 0;
202 /* Variant : left
203 ------------------------------------------ */
205 /* creates the larger triangle */
206 .triangle-border.left:before {
207     top: 7px; /* controls vertical position */
208     bottom: auto;
209     left: -24px; /* value = - border-left-width - border-right-width */
210     border-width: 10px 24px 10px 0;
211     border-color: transparent #5a8f00;
214 /* creates the smaller  triangle */
215 .triangle-border.left:after {
216     top: 8px; /* value = (:before top) + (:before border-top) - (:after border-top) */
217     bottom: auto;
218     left: -21px; /* value = - border-left-width - border-right-width */
219     border-width: 9px 21px 9px 0;
220     border-color: transparent #fff;
223 /* Variant : right
224 ------------------------------------------ */
226 /* creates the larger triangle */
227 .triangle-border.right:before {
228     top: 7px; /* controls vertical position */
229     bottom: auto;
230     left: auto;
231     right: -24px; /* value = - border-left-width - border-right-width */
232     border-width: 10px 0 10px 24px;
233     border-color: transparent #5a8f00;
236 /* creates the smaller  triangle */
237 .triangle-border.right:after {
238     top: 8px; /* value = (:before top) + (:before border-top) - (:after border-top) */
239     bottom: auto;
240     left: auto;
241     right: -21px; /* value = - border-left-width - border-right-width */
242     border-width: 9px 0 9px 21px;
243     border-color: transparent #fff;
246 #button-send + a > i.text-info {
247     color: black !important;