Commit | Line | Data |
---|---|---|
696a66f8 | 1 | html, body { height:100%; } |
8af29f2b | 2 | * { margin:0; padding:0; } |
696a66f8 D |
3 | |
4 | ||
5 | ||
8af29f2b | 6 | /* Few resets for within the kiwi container */ |
696a66f8 | 7 | #kiwi { |
b05d0022 | 8 | overflow:hidden; position:relative; |
696a66f8 | 9 | height:100%; |
5998fd56 | 10 | } |
8af29f2b D |
11 | #kiwi * { margin:0px; padding:0px; } |
12 | #kiwi p { margin:0.5em 0; } | |
13 | #kiwi a { color:#36C; text-decoration:none; cursor:pointer; } | |
14 | #kiwi a img { border:none; } | |
9d8f8dfe | 15 | #kiwi .format_span a { color: inherit; background-color: inherit; text-decoration: inherit; font-style: inherit; font-weight: inherit;} |
5998fd56 | 16 | |
72db27e4 D |
17 | #kiwi h1, |
18 | #kiwi h2, | |
19 | #kiwi h3 { | |
20 | margin-top: 22px; | |
21 | margin-bottom: 11px; | |
22 | } | |
23 | #kiwi h4, | |
24 | #kiwi h5, | |
25 | #kiwi h6 { | |
26 | margin-top: 11px; | |
27 | margin-bottom: 11px; | |
28 | } | |
29 | #kiwi h1 { font-size: 46px; } | |
30 | #kiwi h2 { font-size: 40px; } | |
31 | #kiwi h3 { font-size: 34px; } | |
32 | #kiwi h4 { font-size: 28px; } | |
33 | #kiwi h5 { font-size: 22px; } | |
34 | #kiwi h6 { font-size: 16px; } | |
35 | ||
696a66f8 | 36 | |
696a66f8 D |
37 | /** |
38 | * Main layout blocks | |
39 | */ | |
4f99a29b | 40 | #kiwi .toolbar { position:absolute; top:0px; width:100%; display:none; } |
30f9f42a | 41 | #kiwi .panels { position:absolute; left:0px; right:200px; bottom:100px; top:100px; } |
06d56c90 D |
42 | #kiwi .right_bar { position:absolute; right:0px; width:200px; bottom:100px; top:100px; overflow:visible; } |
43 | #kiwi .right-bar-content { overflow-y:auto; position:relative; height:100% ;} | |
1e85105e | 44 | #kiwi .controlbox { position: absolute; bottom:0px; width:100%; display:none; } |
30f9f42a | 45 | #kiwi .memberlists_resize_handle { |
696a66f8 | 46 | position: absolute; width:10px; z-index:1; cursor:w-resize; |
696a66f8 D |
47 | } |
48 | ||
49 | ||
de214968 | 50 | #kiwi .toolbar .tabs { margin-right: 200px; } |
4f99a29b | 51 | #kiwi .toolbar .panellist { |
696a66f8 | 52 | overflow: hidden; |
696a66f8 | 53 | display:block; |
696a66f8 | 54 | } |
4f99a29b | 55 | #kiwi .toolbar .panellist li { |
696a66f8 D |
56 | float: left; list-style: inline; |
57 | display:inline; position:relative; | |
58 | padding:5px; margin:3px; | |
696a66f8 | 59 | cursor: pointer; |
8af29f2b | 60 | } |
696a66f8 | 61 | |
4f99a29b D |
62 | #kiwi .toolbar .panellist .active { padding-right:23px; } |
63 | #kiwi .toolbar .panellist .alert_highlight { font-weight: bold; } | |
64 | #kiwi .toolbar .panellist .alert_activity { font-weight: bold; } | |
65 | #kiwi .toolbar .panellist .alert_action { font-weight: bold; } | |
696a66f8 | 66 | |
4f99a29b D |
67 | #kiwi .toolbar .panellist li { width: auto; text-align: left; } |
68 | #kiwi .toolbar .panellist li .part { position: absolute; top: 5px; right: 5px; } | |
69 | #kiwi .toolbar .panellist li .part:before { content:"[x]"; } | |
70 | #kiwi .toolbar .panellist li .part:hover { color: #900; } | |
71 | #kiwi .toolbar .panellist li img.icon { left:5px; top:2px; height:auto; width:auto; } | |
8af29f2b | 72 | |
4f99a29b D |
73 | #kiwi .toolbar .connections { overflow:hidden; } |
74 | #kiwi .toolbar .connections .connection { float:left; } | |
944d9579 | 75 | #kiwi.chanlist_treeview .toolbar .connections .connection { float:none; } |
4f99a29b D |
76 | #kiwi .toolbar .connections .panellist { display:inline; } |
77 | #kiwi .toolbar .connections .panellist:after { content:""; } | |
8af29f2b | 78 | |
707593d2 | 79 | #kiwi .status_message { |
8af29f2b | 80 | background: #FFF; |
696a66f8 | 81 | border-bottom: 1px solid; |
8af29f2b | 82 | text-align: center; |
696a66f8 | 83 | } |
696a66f8 | 84 | |
9936359c D |
85 | #kiwi .channel_tools { |
86 | } | |
87 | #kiwi .channel_tools i { | |
06d56c90 | 88 | width: 32%; |
9936359c D |
89 | display: inline-block; |
90 | text-align: center; | |
91 | cursor: pointer; | |
92 | } | |
696a66f8 | 93 | |
8af29f2b | 94 | #kiwi .panel_container { overflow-y:auto; height:100%; } |
c794b877 | 95 | #kiwi .panel { |
696a66f8 D |
96 | overflow-x:wrap; |
97 | border:none; display: none; | |
696a66f8 | 98 | } |
c794b877 | 99 | |
8af29f2b D |
100 | #kiwi .messages a {} |
101 | #kiwi .messages.active { display:block; } | |
696a66f8 | 102 | |
8af29f2b D |
103 | #kiwi .messages .msg {} |
104 | #kiwi .messages .msg .time { display:inline; } | |
105 | #kiwi .messages .msg .nick { display:inline; } | |
106 | #kiwi .messages .msg .text { display:inline; } | |
bf3bd4e5 | 107 | |
8af29f2b D |
108 | #kiwi .messages .msg.action .nick { display:none; } |
109 | #kiwi .messages .msg.action .text { } | |
110 | #kiwi .messages .msg.action.join { } | |
111 | #kiwi .messages .msg.action.part .text { } | |
112 | #kiwi .messages .msg.action.quit .text { } | |
113 | #kiwi .messages .msg.action.kick .text { } | |
114 | #kiwi .messages .msg.status .nick { display:none; } | |
115 | #kiwi .messages .msg.status .text { } | |
116 | #kiwi .messages .msg.topic .nick { display:none; } | |
117 | #kiwi .messages .msg.topic .text { } | |
118 | #kiwi .messages .msg.motd { } | |
119 | #kiwi .messages .msg.motd .nick { } | |
120 | #kiwi .messages .msg.motd .text { } | |
121 | #kiwi .messages .msg.whois .nick { } | |
122 | #kiwi .messages .msg.whois .text { } | |
123 | #kiwi .messages .msg.error .text { } | |
0197b21c | 124 | |
8af29f2b D |
125 | #kiwi .messages .msg.global_nick_highlight { } |
126 | #kiwi .messages .msg.highlight { } | |
696a66f8 | 127 | |
5b01f32b | 128 | #kiwi .messages .msg .media .media_content { white-space: normal; } |
696a66f8 | 129 | |
696a66f8 | 130 | |
9936359c | 131 | #kiwi .right_bar { border-left: 1px solid #8A8A8A; } |
06d56c90 D |
132 | #kiwi .right_bar.disabled { width:0; } |
133 | #kiwi .right_bar.disabled .channel_tools, | |
134 | #kiwi .right_bar.disabled .memberlists { display:none; } | |
135 | ||
136 | #kiwi .right-bar-toggle { | |
137 | position: absolute; | |
138 | top: 10px; | |
139 | left: -2.3em; | |
140 | width: 1.3em; | |
141 | font-size: 25px; | |
142 | font-weight: bold; | |
143 | text-align: center; | |
144 | line-height: 1.3em; | |
145 | background: #e3e3e3; | |
146 | border: 1px solid; | |
147 | border-radius: 50%; | |
148 | cursor: pointer; | |
149 | } | |
696a66f8 | 150 | |
8af29f2b | 151 | /* The active channels nicklist */ |
06d56c90 | 152 | #kiwi .memberlists ul { display:none; } |
30f9f42a D |
153 | #kiwi .memberlists ul.active { display:block; } |
154 | #kiwi .memberlists ul li { overflow-y:auto; overflow-x:hidden; cursor:pointer; } | |
155 | #kiwi .memberlists ul li a.nick { } | |
696a66f8 | 156 | |
8af29f2b | 157 | /* The userbox shown when clicking a nick */ |
96910370 | 158 | #kiwi .userbox { position:relative; width:100px; } |
e1fb4c61 | 159 | #kiwi .userbox a { } |
96910370 | 160 | #kiwi .userbox a i { width:1em; text-align:center; } |
8af29f2b D |
161 | |
162 | ||
2766b08a | 163 | /* Emoticons */ |
e62f5be1 D |
164 | #kiwi .emoticon { |
165 | display: inline-block; | |
166 | height: 15px; width: 17px; | |
167 | overflow: hidden; | |
168 | font-size: 0; | |
169 | background: url(../img/emoticons.png) no-repeat; | |
170 | } | |
171 | #kiwi .emoticon.smile { background-position:0px 0; } | |
172 | #kiwi .emoticon.sad { background-position:-25px 0; } | |
173 | #kiwi .emoticon.lion { background-position:-50px 0; } | |
174 | #kiwi .emoticon.winky_lion { background-position:-75px 0; } | |
175 | #kiwi .emoticon.confused { background-position:-100px 0; } | |
176 | #kiwi .emoticon.cry { background-position:-125px 0; } | |
177 | #kiwi .emoticon.wink { background-position:-150px 0; } | |
178 | #kiwi .emoticon.wink_happy { background-position:-175px 0; } | |
179 | #kiwi .emoticon.tongue { background-position:-200px 0; } | |
180 | #kiwi .emoticon.cringe_tongue { background-position:-225px 0; } | |
181 | #kiwi .emoticon.shocked { background-position:-250px 0; } | |
182 | #kiwi .emoticon.happy { background-position:-275px 0; } | |
183 | #kiwi .emoticon.eyebrows { background-position:-300px 0; } | |
184 | #kiwi .emoticon.heart { background-position:-325px 0; } | |
185 | #kiwi .emoticon.doh { background-position:-373px 0; } | |
186 | #kiwi .emoticon.big_grin { background-position:-398px 0; } | |
187 | #kiwi .emoticon.wide_eye_right { background-position:-423px 0; } | |
188 | #kiwi .emoticon.wide_eye_left { background-position:-448px 0; } | |
189 | #kiwi .emoticon.unsure { background-position:-473px 0; } | |
2766b08a | 190 | |
8af29f2b D |
191 | |
192 | /** | |
193 | * Control box | |
194 | */ | |
1e85105e | 195 | #kiwi .controlbox .input { |
fb989cb2 | 196 | height:1.7em; position:relative; |
696a66f8 | 197 | } |
696a66f8 | 198 | |
8af29f2b | 199 | /* The nick label */ |
1e85105e D |
200 | #kiwi .controlbox .input .nick { cursor: pointer; } |
201 | #kiwi .controlbox .input .nick a { } | |
8af29f2b D |
202 | |
203 | /* Wrapper div around the text area input */ | |
1e85105e | 204 | #kiwi .controlbox .input .input_wrap { display:inline; } |
8af29f2b D |
205 | |
206 | /* The textarea input */ | |
1e85105e | 207 | #kiwi .controlbox .input .inp { white-space: nowrap; } |
8af29f2b D |
208 | |
209 | ||
210 | /* Nick change dialog showed when clicking the nick label */ | |
1e85105e | 211 | #kiwi .controlbox .nickchange { |
696a66f8 | 212 | position: absolute; |
8af29f2b | 213 | background: #FFF; |
696a66f8 | 214 | } |
1e85105e D |
215 | #kiwi .controlbox .nickchange input { } |
216 | #kiwi .controlbox .nickchange button { } | |
696a66f8 | 217 | |
fb989cb2 | 218 | /* Plugin tools */ |
1e85105e D |
219 | #kiwi .controlbox .input_tools { float:right; } |
220 | #kiwi .controlbox .input_tools .tool { margin:0 1em; display:inline; } | |
fb989cb2 | 221 | |
696a66f8 D |
222 | |
223 | ||
8af29f2b D |
224 | /** |
225 | * Topic bar | |
226 | */ | |
de214968 D |
227 | #kiwi .toolbar .topic { position:relative; height:2em; } |
228 | #kiwi .toolbar .topic div { | |
696a66f8 | 229 | position:absolute; |
8af29f2b | 230 | top:0; bottom:0; left:0; right:0; |
f5035603 | 231 | overflow: hidden; |
696a66f8 D |
232 | } |
233 | ||
234 | ||
235 | ||
236 | ||
237 | ||
8af29f2b D |
238 | /** |
239 | * Server selection dialog | |
240 | */ | |
5aa89af2 | 241 | #kiwi .server_select { position:relative; width:320px; margin:0 auto; overflow:hidden; } |
3735e390 | 242 | #kiwi .server_select.initial { margin-top: 3em; } |
8af29f2b D |
243 | #kiwi .server_select .more { display: none; } |
244 | #kiwi .server_select button { } | |
245 | #kiwi .server_select input { } | |
bac3c32e | 246 | #kiwi .server_select label { } |
8af29f2b D |
247 | #kiwi .server_select br { clear:both; } |
248 | #kiwi .server_select .basic input { } | |
249 | #kiwi .server_select .basic label { } | |
250 | #kiwi .server_select .basic { border-bottom: 1px solid gray; margin-bottom:1em; } | |
251 | #kiwi .server_select .basic .show_more { } | |
fdce9047 | 252 | #kiwi .server_select .basic tr.pass { display:none; } |
9f67f0f2 | 253 | #kiwi .server_select .basic tr.key { display:none; } |
8af29f2b D |
254 | #kiwi .server_select.single_server .basic { border:none; } |
255 | #kiwi .server_select .status { } | |
696a66f8 | 256 | |
6a296cf0 D |
257 | /* Channel key icon */ |
258 | #kiwi .server_select .basic tr.channel td { position: relative; } | |
259 | #kiwi .server_select .basic tr.channel .icon-key { | |
260 | position: absolute; | |
700ef8ba D |
261 | top: 0.4em; |
262 | right: 0.6em; | |
6a296cf0 D |
263 | font-size: 1.3em; |
264 | cursor: pointer; | |
265 | } | |
266 | #kiwi .server_select .basic tr.have_key { display:none; } | |
267 | ||
8af29f2b D |
268 | /* When connected to an IRC server, .ok is set on the status div */ |
269 | #kiwi .server_select .status.ok { } | |
696a66f8 | 270 | |
8af29f2b D |
271 | /* IRC server connection error, .error is set on the status div */ |
272 | #kiwi .server_select .status.error { } | |
696a66f8 D |
273 | |
274 | ||
275 | ||
8af29f2b D |
276 | /* Logo and title in the server selection dialog */ |
277 | #kiwi .server_select .kiwi_logo { text-align: center; display:block; } | |
278 | #kiwi .server_select .kiwi_logo h1 { } | |
279 | #kiwi .server_select .kiwi_logo img { } | |
696a66f8 D |
280 | |
281 | ||
282 | ||
8af29f2b | 283 | /* Icons in the top right corner */ |
4f99a29b D |
284 | #kiwi .toolbar .app_tools { float:right; } |
285 | #kiwi .toolbar .app_tools ul li { | |
8af29f2b | 286 | display:inline; cursor:pointer; |
7de3dd03 | 287 | } |
4f99a29b | 288 | #kiwi .toolbar .app_tools img { height:25px; width:25px; margin: 6px 0.7em 0 0; } |
696a66f8 D |
289 | |
290 | ||
291 | ||
8af29f2b | 292 | /* Settings applet */ |
5720c80a VC |
293 | |
294 | /* Some of these styles will move to global styling later */ | |
1b48d21e VC |
295 | #kiwi .settings_container { |
296 | padding: 50px; | |
297 | } | |
298 | ||
299 | #kiwi .settings_container .thumbnails:before { | |
300 | content: ' '; | |
301 | display: table; | |
302 | } | |
303 | #kiwi .settings_container .thumbnails:after { | |
304 | content: ' '; | |
305 | display: table; | |
306 | clear: both; | |
307 | } | |
308 | ||
309 | #kiwi .settings_container .thumbnails { | |
310 | list-style-type: none; | |
311 | margin: 0; | |
312 | padding: 0; | |
313 | } | |
314 | ||
315 | #kiwi .settings_container .thumbnails > li { | |
316 | display: inline-block; | |
317 | } | |
318 | ||
1b48d21e VC |
319 | #kiwi .settings_container label { |
320 | cursor: pointer; | |
321 | } | |
322 | ||
72db27e4 D |
323 | #kiwi_ form label { display: block; } |
324 | #kiwi form input, | |
325 | #kiwi form select, | |
326 | #kiwi form textarea { | |
327 | /*width: 100%; | |
328 | box-sizing: border-box;*/ | |
1b48d21e VC |
329 | } |
330 | ||
72db27e4 D |
331 | #kiwi form input[size], |
332 | #kiwi form select[size], | |
333 | #kiwi form textarea[size] { | |
1b48d21e VC |
334 | width: auto; |
335 | } | |
336 | ||
72db27e4 D |
337 | #kiwi form input[type="file"], |
338 | #kiwi form input[type="image"], | |
339 | #kiwi form input[type="submit"], | |
340 | #kiwi form input[type="reset"], | |
341 | #kiwi form input[type="button"] { | |
1b48d21e VC |
342 | width: auto; |
343 | } | |
344 | ||
72db27e4 | 345 | #kiwi form input[type="radio"] { |
1b48d21e VC |
346 | width: auto; |
347 | cursor: pointer; | |
348 | margin-top: 2px; | |
349 | } | |
350 | ||
72db27e4 | 351 | #kiwi form input[type="checkbox"] { |
1b48d21e VC |
352 | width: auto; |
353 | cursor: pointer; | |
354 | margin-top: 3px; | |
355 | } | |
356 | ||
72db27e4 D |
357 | #kiwi form .radio, |
358 | #kiwi form .checkbox { | |
1b48d21e VC |
359 | margin-bottom: 10px; |
360 | padding-left: 20px; | |
361 | } | |
362 | ||
72db27e4 D |
363 | #kiwi form .radio:last-child, |
364 | #kiwi form .checkbox:last-child { | |
1b48d21e VC |
365 | margin-bottom: 0; |
366 | } | |
367 | ||
72db27e4 D |
368 | #kiwi form .radio input[type="radio"], |
369 | #kiwi form .checkbox input[type="checkbox"] { | |
1b48d21e VC |
370 | float: left; |
371 | margin-left: -20px; | |
372 | } | |
373 | ||
72db27e4 D |
374 | #kiwi form .radio+.radio, |
375 | #kiwi form .checkbox+.checkbox { | |
1b48d21e VC |
376 | margin-top: -7px; |
377 | } | |
378 | ||
379 | #kiwi .settings_container .thumbnail { | |
380 | float: left; | |
381 | margin-right: 15px; | |
382 | text-align: center; | |
383 | } | |
5720c80a | 384 | |
1b48d21e VC |
385 | #kiwi .settings_container .thumbnail > .thumbnail_wrapper { |
386 | border-radius: 3px; | |
387 | padding: 3px; | |
388 | } | |
389 | ||
390 | #kiwi .settings_container .thumbnail > img { | |
391 | border-radius: 2px; | |
392 | } | |
393 | ||
394 | #kiwi .settings_container .thumbnail.active > .thumbnail_wrapper { | |
395 | background-color: #a6c42c; | |
396 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a6c42c), color-stop(100%, #76bd2b)); | |
397 | background-image: -webkit-linear-gradient(#a6c42c, #76bd2b); | |
398 | background-image: linear-gradient(#a6c42c, #76bd2b); | |
399 | } | |
400 | ||
401 | #kiwi .settings_container section { | |
402 | padding-bottom: 20px; | |
403 | } | |
404 | ||
405 | #kiwi .settings_container .theme_color { | |
406 | border-radius: 2px; | |
407 | height: 75px; | |
408 | width: 75px; | |
409 | } | |
410 | ||
72db27e4 | 411 | #kiwi .control-group { |
1b48d21e VC |
412 | margin: 0 0 20px 20px; |
413 | } | |
414 | ||
72db27e4 | 415 | #kiwi .control-group:last-child { |
1b48d21e VC |
416 | margin-bottom: 0; |
417 | } | |
418 | ||
b54ef9a3 D |
419 | #kiwi .settings_container section.language select { width:300px; } |
420 | ||
1b48d21e VC |
421 | @media screen and (max-width: 768px) { |
422 | #kiwi .settings_container { | |
423 | padding: 25px; | |
424 | } | |
425 | } | |
34edea2e VC |
426 | |
427 | ||
72db27e4 D |
428 | #kiwi .channel_info label { display: block; } |
429 | #kiwi .channel_info .channel_url { | |
430 | display: none; | |
431 | } | |
63a887cd | 432 | #kiwi .channel_info .channel-banlist table { display: none; } |
72db27e4 D |
433 | #kiwi .channel_info .remove-ban { cursor: pointer; } |
434 | ||
435 | ||
34edea2e | 436 | |
93fa049c D |
437 | |
438 | ||
439 | ||
696a66f8 D |
440 | |
441 | /** | |
442 | * Reusable componants | |
443 | */ | |
444 | ||
8af29f2b | 445 | #kiwi .divider-verticle { |
696a66f8 D |
446 | border-left: 1px solid #CFCFCF; |
447 | border-right: 1px solid #FFFFFF; | |
448 | position: absolute; | |
449 | top:25px; bottom:25px; | |
450 | right:0; | |
451 | width:0; | |
452 | } | |
453 | ||
8af29f2b | 454 | #kiwi .divider-horizontal { |
696a66f8 D |
455 | border-top: 1px solid #CFCFCF; |
456 | border-bottom: 1px solid #FFFFFF; | |
457 | position: absolute; | |
458 | left:25px; right:25px; | |
459 | bottom:0; | |
460 | height:0; | |
461 | } | |
462 | ||
463 | ||
464 | ||
567a2f79 D |
465 | #kiwi .loader { |
466 | background:url(../img/loader.gif) no-repeat; | |
467 | width:43px; height:11px; | |
468 | display:inline-block; | |
469 | } | |
470 | ||
471 | ||
472 | ||
696a66f8 | 473 | |
e1fb4c61 D |
474 | #kiwi .ui_menu { |
475 | padding: 0; | |
476 | z-index:10; | |
477 | position: absolute; | |
478 | top: 100px; left: 100px; | |
479 | background: #fff; | |
480 | border: 1px solid #bbb; | |
481 | background-clip: padding-box; | |
482 | } | |
483 | #kiwi .ui_menu .ui_menu_title { | |
484 | padding: 5px 10px 5px 10px; font-weight: bold; overflow:hidden; background:#ddd; | |
485 | } | |
486 | #kiwi .ui_menu .ui_menu_content { padding: 5px 10px 5px 10px; border-top:1px solid #e9e9e9; overflow:hidden; position:relative; } | |
487 | #kiwi .ui_menu .ui_menu_content > a { display: block; } | |
488 | #kiwi .ui_menu .ui_menu_content > a[class^="icon-"]:before, | |
489 | #kiwi .ui_menu .ui_menu_content > a[class*=" icon-"]:before { margin-right: 5px; color:#666; } | |
490 | #kiwi .ui_menu .ui_menu_foot { | |
491 | padding: 5px; border-top:1px solid #e9e9e9; background:#ddd; overflow:hidden; | |
492 | } | |
493 | #kiwi .ui_menu .ui_menu_foot .close { } | |
905e5773 | 494 | |
42ff337a | 495 | #kiwi .applet .applet_chanlist .icon-sort-down:before, #kiwi .applet .applet_chanlist .icon-sort-up:before { |
905e5773 CC |
496 | padding-left: 1em; |
497 | } | |
42ff337a | 498 | #kiwi .applet .applet_chanlist td { |
905e5773 | 499 | min-width: 120px; |
ac915057 | 500 | } |