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