Mercurial > libervia-web

comparison public/libervia.css @ 110:dfc02690deb4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
browser side: CSS: header, unibox, tabs + drag'n' drop reworked
author Adrien Vigneron <adrienvigneron@mailoo.org>
date Wed, 29 Jun 2011 23:52:00 +0200
parents c3fb3292f582
children 5749e3970778
comparison
equal deleted inserted replaced
109:5c363b638127 110:dfc02690deb4
38 outline: 0; 38 outline: 0;
39 font-size: 100%; 39 font-size: 100%;
40 vertical-align: baseline; 40 vertical-align: baseline;
41 background: transparent; 41 background: transparent;
42 color: #444; 42 color: #444;
43
44 } 43 }
45 44
46 ol, ul { list-style: none; } 45 ol, ul { list-style: none; }
47 blockquote, q { quotes: none; } 46 blockquote, q { quotes: none; }
48 47
49 blockquote:before, blockquote:after, 48 blockquote:before, blockquote:after,
50 q:before, q:after { 49 q:before, q:after {
51 content: ''; 50 content: '';
52 content: none; 51 content: none;
53
54 } 52 }
55 53
56 :focus { outline: 0; } 54 :focus { outline: 0; }
57 ins { text-decoration: none; } 55 ins { text-decoration: none; }
58 del { text-decoration: line-through; } 56 del { text-decoration: line-through; }
59 57
60 table { 58 table {
61 border-collapse: collapse; 59 border-collapse: collapse;
62 border-spacing: 0; 60 border-spacing: 0;
63
64 } 61 }
65 62
66 /* pyjamas iframe hide */ 63 /* pyjamas iframe hide */
67 iframe { position: absolute; } 64 iframe { position: absolute; }
68 65
97 html>body .iescrollpanelfix { position: static; } 94 html>body .iescrollpanelfix { position: static; }
98 95
99 /* CSS Reset END */ 96 /* CSS Reset END */
100 97
101 body { 98 body {
102 background: #fff url('media/libervia/worldmap_gray.jpg'); 99 background-color: #fff;
100 font: normal 0.8em/1.5em Arial, Helvetica, sans-serif;
101 }
102
103 .header {
104 background-color: #eee;
103 } 105 }
104 106
105 /* Misc Pyjamas stuff */ 107 /* Misc Pyjamas stuff */
106 108
107 .menuContainer { 109 .menuContainer {
108 margin: 0 32px 0 20px; 110 margin: 0 32px 0 20px;
109 } 111 }
110 112
111 .gwt-MenuBar,.gwt-MenuBar-horizontal { 113 .gwt-MenuBar,.gwt-MenuBar-horizontal {
112 /*background-color: #01FF78; 114 /*background-color: #01FF78;
113 border: 1px solid #87B3FF; 115 border: 1px solid #87B3FF;
114 cursor: default;*/ 116 cursor: default;*/
115 width: 100%; 117 width: 100%;
116 height: 28px; 118 height: 28px;
117 margin: 0; 119 margin: 0;
118 font: normal 0.8em/1.4em Arial, Helvetica, sans-serif;
119 padding: 5px 5px 0 5px; 120 padding: 5px 5px 0 5px;
120 line-height: 100%; 121 line-height: 100%;
121 box-shadow: 0px 1px 4px #000; 122 box-shadow: 0px 1px 4px #000;
122 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); 123 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
123 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); 124 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
206 } 207 }
207 208
208 209
209 .gwt-MenuBar .gwt-MenuItem-selected { 210 .gwt-MenuBar .gwt-MenuItem-selected {
210 background: #cf2828 !important; 211 background: #cf2828 !important;
211 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828’, endColorstr=’#b01e1e’) !important; 212 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828’, endColorstr=’#981a1a’) !important;
212 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#b01e1e)) !important; 213 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)) !important;
213 background: -moz-linear-gradient(top, #cf2828, #b01e1e) !important; 214 background: -moz-linear-gradient(top, #cf2828, #981a1a) !important;
214 background-image: -o-linear-gradient(#cf2828,#b01e1e) !important; 215 background-image: -o-linear-gradient(#cf2828,#981a1a) !important;
215 color: #fff !important; 216 color: #fff !important;
216 -webkit-border-radius: 0 0 0 0; 217 -webkit-border-radius: 0 0 0 0;
217 -moz-border-radius: 0 0 0 0; 218 -moz-border-radius: 0 0 0 0;
218 border-radius: 0 0 0 0; 219 border-radius: 0 0 0 0;
219 text-shadow: 0 1px 1px rgba(0, 0, 0, .1); 220 text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
247 border: 1px solid #87B3FF; 248 border: 1px solid #87B3FF;
248 margin-top: 20px; 249 margin-top: 20px;
249 } 250 }
250 .gwt-DialogBox { 251 .gwt-DialogBox {
251 padding: 10px; 252 padding: 10px;
252 font: normal 0.8em/1.4em Arial, Helvetica, sans-serif;
253 border: 1px solid #aaa; 253 border: 1px solid #aaa;
254 background-color: #fff; 254 background-color: #fff;
255 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff’, endColorstr=’#ccc’); 255 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff’, endColorstr=’#ccc’);
256 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc)); 256 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
257 background: -moz-linear-gradient(top, #fff, #ccc); 257 background: -moz-linear-gradient(top, #fff, #ccc);
267 .gwt-DialogBox .Caption { 267 .gwt-DialogBox .Caption {
268 height: 20px; 268 height: 20px;
269 font-size: 1.3em !important; 269 font-size: 1.3em !important;
270 background-color: #cf2828; 270 background-color: #cf2828;
271 background: #cf2828 !important; 271 background: #cf2828 !important;
272 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828’, endColorstr=’#b01e1e’); 272 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828’, endColorstr=’#981a1a’);
273 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#b01e1e)) !important; 273 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)) !important;
274 background: -moz-linear-gradient(top, #cf2828, #b01e1e) !important; 274 background: -moz-linear-gradient(top, #cf2828, #981a1a) !important;
275 background-image: -o-linear-gradient(#cf2828,#b01e1e); 275 background-image: -o-linear-gradient(#cf2828,#981a1a);
276 color: #fff; 276 color: #fff;
277 padding: 3px; 277 padding: 3px 3px 4px 3px;
278 margin: -10px; 278 margin: -10px;
279 margin-bottom: 5px; 279 margin-bottom: 5px;
280 font-weight: bold; 280 font-weight: bold;
281 cursor: default; 281 cursor: default;
282 text-align: center; 282 text-align: center;
302 text-shadow: 1px 1px 1px rgba(0,0,0,0.2); 302 text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
303 padding: 3px 5px 3px 5px; 303 padding: 3px 5px 3px 5px;
304 margin: 10px 5px 10px 5px; 304 margin: 10px 5px 10px 5px;
305 color: #fff; 305 color: #fff;
306 font-weight: bold; 306 font-weight: bold;
307 font: normal 1em/1.4em Arial, Helvetica, sans-serif; 307 font-size: 1em;
308 border: none; 308 border: none;
309 -webkit-transition: color 0.2s linear;
310 -moz-transition: color 0.2s linear;
311 -o-transition: color 0.2s linear;
309 } 312 }
310 313
311 .gwt-DialogBox .gwt-button:hover { 314 .gwt-DialogBox .gwt-button:hover {
312 background-color: #cf2828; 315 background-color: #cf2828;
313 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828&#888;, endColorstr=’#b01e1e’); 316 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828&#888;, endColorstr=’#981a1a’);
314 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#b01e1e)); 317 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a));
315 background: -moz-linear-gradient(top, #cf2828, #b01e1e); 318 background: -moz-linear-gradient(top, #cf2828, #981a1a);
316 background-image: -o-linear-gradient(#cf2828,#b01e1e); 319 background-image: -o-linear-gradient(#cf2828,#981a1a);
317 color: #fff; 320 color: #fff;
318 text-shadow: 1px 1px 1px rgba(0,0,0,0.25); 321 text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
319 } 322 }
320 323
321 .gwt-DialogBox .gwt-TextBox { 324 .gwt-DialogBox .gwt-TextBox {
326 box-shadow:inset 0px 1px 4px #000; 329 box-shadow:inset 0px 1px 4px #000;
327 -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.6); 330 -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.6);
328 -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.6); 331 -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.6);
329 padding: 3px 5px 3px 5px; 332 padding: 3px 5px 3px 5px;
330 margin: 10px 5px 10px 5px; 333 margin: 10px 5px 10px 5px;
331 color: #222; 334 color: #444;
332 font-weight: bold; 335 font-size: 1em;
333 font: normal 1em/1.4em Arial, Helvetica, sans-serif;
334 border: none; 336 border: none;
335 } 337 }
336 338
337 .gwt-DialogBox .gwt-ListBox { 339 .gwt-DialogBox .gwt-ListBox {
338 overflow: auto; 340 overflow: auto;
344 box-shadow:inset 0px 1px 4px #000; 346 box-shadow:inset 0px 1px 4px #000;
345 -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.6); 347 -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.6);
346 -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.6); 348 -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.6);
347 padding: 3px 5px 3px 5px; 349 padding: 3px 5px 3px 5px;
348 margin: 10px 5px 10px 5px; 350 margin: 10px 5px 10px 5px;
349 color: #222; 351 color: #444;
350 font-weight: bold; 352 font-size: 1em;
351 font: normal 1em/1.4em Arial, Helvetica, sans-serif;
352 border: none; 353 border: none;
353 } 354 }
354 355
355 .gwt-DialogBox .gwt-Label { 356 .gwt-DialogBox .gwt-Label {
356 margin-top: 13px; 357 margin-top: 13px;
373 } 374 }
374 /* Contact List */ 375 /* Contact List */
375 376
376 div.contactBox { 377 div.contactBox {
377 margin-left: 20px; 378 margin-left: 20px;
379 margin-top: 9px;
378 } 380 }
379 381
380 .contactTitle { 382 .contactTitle {
381 color: #cf2828; 383 color: #cf2828;
382 font-weight: bold; 384 font-size: 1.7em;
383 font: normal 1.2em/1.4em Arial, Helvetica, sans-serif;
384 text-indent: 5px; 385 text-indent: 5px;
385 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 386 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
386 width: 200px; 387 width: 200px;
387 height: 30px; 388 height: 30px;
388 } 389 }
389 .groupList { 390 .groupList {
390 font: normal 0.8em/1.4em Arial, Helvetica, sans-serif;
391 width: 100%; 391 width: 100%;
392 } 392 }
393 393
394 .groupList tr:first-child td { 394 .groupList tr:first-child td {
395 padding-top: 10px; 395 padding-top: 10px;
396 } 396 }
397 397
398 .group { 398 .group {
399 padding: 2px 15px; 399 padding: 2px 15px;
400 margin: 0.2em 0 0.2em 5px; 400 margin: 5px;
401 display: inline-block; 401 display: inline-block;
402 text-decoration: none; 402 text-decoration: none;
403 font-weight: bold; 403 font-weight: bold;
404 color: #e7e5e5; 404 color: #e7e5e5;
405 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); 405 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
406 border-radius: 1em 1em 1em 1em; 406 border-radius: 1em 1em 1em 1em;
411 background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa)); 411 background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa));
412 background: -moz-linear-gradient(top, #eee, #aaa); 412 background: -moz-linear-gradient(top, #eee, #aaa);
413 background-image: -o-linear-gradient(#eee,#aaa); 413 background-image: -o-linear-gradient(#eee,#aaa);
414 color: #444; 414 color: #444;
415 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); 415 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
416 box-shadow:inset 0px 1px 1px #000; 416 box-shadow: 0px 1px 1px #000;
417 -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.6); 417 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
418 -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.6); 418 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
419 } 419 }
420 420
421 div.group:hover { 421 div.group:hover {
422 color: #fff; 422 color: #fff;
423 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); 423 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
429 -webkit-transition: color 0.1s linear; 429 -webkit-transition: color 0.1s linear;
430 -moz-transition: color 0.1s linear; 430 -moz-transition: color 0.1s linear;
431 -o-transition: color 0.1s linear; 431 -o-transition: color 0.1s linear;
432 } 432 }
433 .contact { 433 .contact {
434 font-family: Arial, Helvetica, sans-serif; 434 font-size: 1em;
435 font-size: 0.8em;
436 margin-top: 3px; 435 margin-top: 3px;
437 padding: 3px 10px 3px 10px; 436 padding: 3px 10px 3px 10px;
438 } 437 }
439 438
440 .contactConnected { 439 .contactConnected {
449 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)); 448 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a));
450 background: -moz-linear-gradient(top, #cf2828, #981a1a); 449 background: -moz-linear-gradient(top, #cf2828, #981a1a);
451 background-image: -o-linear-gradient(#cf2828,#981a1a); 450 background-image: -o-linear-gradient(#cf2828,#981a1a);
452 border-radius: 1em 1em 1em 1em; 451 border-radius: 1em 1em 1em 1em;
453 -webkit-border-radius: 1em 1em 1em 1em; 452 -webkit-border-radius: 1em 1em 1em 1em;
454 -moz-border-radius: 1em 1em 1em 1em; 453 -moz-border-radius: 1em 1em 1em 1em;
454 -webkit-transition: color 0.2s linear;
455 -moz-transition: color 0.2s linear;
456 -o-transition: color 0.2s linear;
455 } 457 }
456 458
457 /* UniBox & Status */ 459 /* UniBox & Status */
458 460
459 .uniBoxPanel { 461 .uniBoxPanel {
460 margin: auto; 462 margin: 15px 22px 0 22px;
461 width: 80%;
462 } 463 }
463 464
464 .uniBox { 465 .uniBox {
465 margin-top: 1em; 466 height: 45px;
466 width: 100%;
467 height: 50px;
468 padding: 5px; 467 padding: 5px;
469 font-family: Arial, Helvetica, sans-serif;
470 border: 1px solid #bbb; 468 border: 1px solid #bbb;
471 color: #444; 469 color: #444;
472 background: #fff url('media/libervia/unibox.png') top right no-repeat; 470 background: #fff url('media/libervia/unibox_2.png') top right no-repeat;
473 border-radius: 9px 9px 9px 9px;
474 -webkit-border-radius: 9px 9px 9px 9px;
475 -moz-border-radius: 9px 9px 9px 9px;
476 box-shadow:inset 0 0 10px #ddd; 471 box-shadow:inset 0 0 10px #ddd;
477 -webkit-box-shadow:inset 0 0 10px #ddd; 472 -webkit-box-shadow:inset 0 0 10px #ddd;
478 -moz-box-shadow:inset 0 0 10px #ddd; 473 -moz-box-shadow:inset 0 0 10px #ddd;
479 } 474 }
480 475
481 .statusPanel { 476 .statusPanel {
482 margin: auto; 477 margin: auto;
483 text-align: center; 478 text-align: center;
484 width: 80%; 479 width: 100%;
485 padding-top: 10px; 480 padding-top: 5px;
486 min-height: 30px; 481 min-height: 30px;
487 text-shadow: 0 -1px 1px rgba(255,255,255,0.25); 482 text-shadow: 0 -1px 1px rgba(255,255,255,0.25);
483 font-size: 1.2em;
484 background-color: #eee;
485 border-bottom: 1px solid #ddd;
488 } 486 }
489 487
490 .status { 488 .status {
491 font-style: italic; 489 font-style: italic;
490 font-weight: bold;
491 color: #666;
492 } 492 }
493 493
494 /* RegisterBox */ 494 /* RegisterBox */
495 495
496 .registerPanel_main button { 496 .registerPanel_main button {
499 border: 0; 499 border: 0;
500 } 500 }
501 501
502 .registerPanel_main div, .registerPanel_main button { 502 .registerPanel_main div, .registerPanel_main button {
503 color: #fff; 503 color: #fff;
504 font-family: Verdana, sans-serif;
505 text-decoration: none; 504 text-decoration: none;
506 } 505 }
507 506
508 .registerPanel_main{ 507 .registerPanel_main{
509 height: 100%; 508 height: 100%;
509 border: 5px solid #222;
510 box-shadow: 0px 1px 4px #000;
511 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
512 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
510 } 513 }
511 514
512 .registerPanel_tabs .gwt-Label { 515 .registerPanel_tabs .gwt-Label {
513 margin-top: 20px; 516 margin-top: 20px;
514 margin-left: 15px; 517 margin-left: 15px;
536 margin-left: 50px; 539 margin-left: 50px;
537 margin-top: 30px; 540 margin-top: 30px;
538 } 541 }
539 542
540 .registerPanel_content div { 543 .registerPanel_content div {
541 font-size: 0.8em; 544 font-size: 1em;
542 margin-left: 10px; 545 margin-left: 10px;
543 margin-top: 15px; 546 margin-top: 15px;
544 font-style: bold; 547 font-style: bold;
545 color: #888; 548 color: #888;
546 } 549 }
548 .registerPanel_content input { 551 .registerPanel_content input {
549 height: 25px; 552 height: 25px;
550 line-height: 25px; 553 line-height: 25px;
551 width: 200px; 554 width: 200px;
552 text-indent: 11px; 555 text-indent: 11px;
553 text-align:-webkit-center; 556
554 background: #000; 557 background: #000;
555 color: #aaa; 558 color: #aaa;
556 border: 1px solid #222; 559 border: 1px solid #222;
557 border-radius: 15px 15px 15px 15px; 560 border-radius: 15px 15px 15px 15px;
558 -webkit-border-radius: 15px 15px 15px 15px; 561 -webkit-border-radius: 15px 15px 15px 15px;
583 border-radius: 6px 6px 6px 6px !important; 586 border-radius: 6px 6px 6px 6px !important;
584 } 587 }
585 588
586 .registerPanel_content .button:hover { background-color: #111; color: #fff; } 589 .registerPanel_content .button:hover { background-color: #111; color: #fff; }
587 .registerPanel_content .button:active { top: 1px; } 590 .registerPanel_content .button:active { top: 1px; }
588 .registerPanel_content .button, .registerPanel_content .button:visited { font-size: 14px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); padding: 7px 10px 8px; } 591 .registerPanel_content .button, .registerPanel_content .button:visited { font-size: 1em; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); padding: 7px 10px 8px; }
589 .registerPanel_content .red.button, .registerPanel_content .red.button:visited { background-color: #000; } 592 .registerPanel_content .red.button, .registerPanel_content .red.button:visited { background-color: #000; }
590 .registerPanel_content .red.button:hover { background-color: #bc0000; } 593 .registerPanel_content .red.button:hover { background-color: #bc0000; }
591 594
592 /* Widgets */ 595 /* Widgets */
593 596
600 border-spacing: 7px; 603 border-spacing: 7px;
601 } 604 }
602 605
603 .widgetHeader { 606 .widgetHeader {
604 margin: auto; 607 margin: auto;
605 height: 30px; 608 height: 25px;
606 /*border: 1px solid #ddd;*/ 609 /*border: 1px solid #ddd;*/
607 border-radius: 10px 10px 0 0; 610 border-radius: 10px 10px 0 0;
608 -webkit-border-radius: 10px 10px 0 0; 611 -webkit-border-radius: 10px 10px 0 0;
609 -moz-border-radius: 10px 10px 0 0; 612 -moz-border-radius: 10px 10px 0 0;
610 background-color: #222; 613 background-color: #222;
611 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#444&#888;, endColorstr=’#222’); 614 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#444&#888;, endColorstr=’#222’);
612 background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222)); 615 background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222));
613 background: -moz-linear-gradient(top, #444, #222); 616 background: -moz-linear-gradient(top, #444, #222);
614 background-image: -o-linear-gradient(#444,#222); 617 background-image: -o-linear-gradient(#444,#222);
615 } 618 }
616 619
617 .widgetHeader_title { 620 .widgetHeader_title {
618 color: #fff; 621 color: #fff;
619 text-align: center; 622 font-weight: bold;
620 margin-top: 5px; 623 text-align: left;
624 text-indent: 15px;
625 margin-top: 4px;
621 } 626 }
622 627
623 .widgetHeader_buttonsWrapper { 628 .widgetHeader_buttonsWrapper {
624 position: absolute; 629 position: absolute;
625 top: 0; 630 top: 0;
631 float: right; 636 float: right;
632 } 637 }
633 638
634 .widgetHeader_buttonGroup img { 639 .widgetHeader_buttonGroup img {
635 background-color: transparent; 640 background-color: transparent;
636 /*width: 25px;*/ 641 width: 25px;
637 height: 22px; 642 height: 20px;
638 padding: 0; 643 padding-top: 2px;
639 border-bottom: 1px solid #666; 644 padding-bottom: 3px;
640 border-left: 1px solid #666; 645 border-left: 1px solid #666;
641 border-top: 0; 646 border-top: 0;
642 border-right: 1px solid #666;
643 border-radius: 0 10px 0 0; 647 border-radius: 0 10px 0 0;
644 -webkit-border-radius: 0 10px 0 0; 648 -webkit-border-radius: 0 10px 0 0;
645 -moz-border-radius: 0 10px 0 0; 649 -moz-border-radius: 0 10px 0 0;
646 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#555&#888;, endColorstr=’#333’); 650 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#555&#888;, endColorstr=’#333’);
647 background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333)); 651 background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333));
654 -webkit-border-radius: 0 10px 0 0 !important; 658 -webkit-border-radius: 0 10px 0 0 !important;
655 -moz-border-radius: 0 10px 0 0 !important; 659 -moz-border-radius: 0 10px 0 0 !important;
656 } 660 }
657 661
658 .widgetHeader_settingButton { 662 .widgetHeader_settingButton {
659 border-radius: 0 0 0 10px !important; 663 border-radius: 0 0 0 0 !important;
660 -webkit-border-radius: 0 0 0 10px !important; 664 -webkit-border-radius: 0 0 0 0 !important;
661 -moz-border-radius: 0 0 0 10px !important; 665 -moz-border-radius: 0 0 0 0 !important;
662 } 666 }
663 667
664 .widgetHeader_buttonGroup img:hover { 668 .widgetHeader_buttonGroup img:hover {
665 background-color: #cf2828; 669 background-color: #cf2828;
666 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828&#888;, endColorstr=’#b01e1e’); 670 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828&#888;, endColorstr=’#981a1a’);
667 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#b01e1e)); 671 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a));
668 background: -moz-linear-gradient(top, #cf2828, #b01e1e); 672 background: -moz-linear-gradient(top, #cf2828, #981a1a);
669 background-image: -o-linear-gradient(#cf2828,#b01e1e); 673 background-image: -o-linear-gradient(#cf2828,#981a1a);
670 } 674 }
671 675
672 .widgetBody { 676 .widgetBody {
673 border-radius: 0 0 10px 10px; 677 border-radius: 0 0 10px 10px;
674 -webkit-border-radius: 0 0 10px 10px; 678 -webkit-border-radius: 0 0 10px 10px;
675 -moz-border-radius: 0 0 10px 10px; 679 -moz-border-radius: 0 0 10px 10px;
676 background-color: #fff; 680 background-color: #fff;
677 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff&#888;, endColorstr=’#ccc’);
678 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
679 background: -moz-linear-gradient(top, #fff, #ccc);
680 background-image: -o-linear-gradient(#fff,#ccc);
681 min-width: 200px; 681 min-width: 200px;
682 min-height: 150px; 682 min-height: 150px;
683 box-shadow:inset 0px 0 1px #444;
684 -webkit-box-shadow:inset 0 0 1px #444;
685 -moz-box-shadow:inset 0 0 1px #444;
683 } 686 }
684 687
685 /* BorderWidgets */ 688 /* BorderWidgets */
686 689
687 .bottomBorderWidget { 690 .bottomBorderWidget {
738 width: 100%; 741 width: 100%;
739 } 742 }
740 743
741 .chatContent { 744 .chatContent {
742 overflow: auto; 745 overflow: auto;
746 padding: 5px 15px 5px 15px;
743 } 747 }
744 748
745 .chatText { 749 .chatText {
746 /* font-size: smaller; */ 750 margin-top: 7px;
747 font: normal 0.8em/1.4em Arial, Helvetica, sans-serif;
748 margin-top: 5px;
749 } 751 }
750 752
751 .chatTextInfo { 753 .chatTextInfo {
752 font-weight: bold; 754 font-weight: bold;
753 } 755 }
768 -moz-border-radius: 15px 0 0 15px; 770 -moz-border-radius: 15px 0 0 15px;
769 -webkit-border-radius: 15px 0 0 15px; 771 -webkit-border-radius: 15px 0 0 15px;
770 border-radius: 15px 0 0 15px; 772 border-radius: 15px 0 0 15px;
771 background-color: #eee; 773 background-color: #eee;
772 color: #888; 774 color: #888;
775 border: 1px solid #ddd;
776 border-right: none;
773 } 777 }
774 778
775 .chat_text_nick { 779 .chat_text_nick {
776 font-weight: bold; 780 font-weight: bold;
777 padding: 1px 3px 1px 3px; 781 padding: 1px 3px 1px 3px;
778 -moz-border-radius: 0 15px 15px 0; 782 -moz-border-radius: 0 15px 15px 0;
779 -webkit-border-radius: 10 15px 15px 0; 783 -webkit-border-radius: 10 15px 15px 0;
780 border-radius: 0 15px 15px 0; 784 border-radius: 0 15px 15px 0;
781 background-color: #ddd; 785 background-color: #eee;
782 color: #555; 786 color: #b01e1e;
787 border: 1px solid #ddd;
788 border-left: none;
783 } 789 }
784 790
785 .chat_text_mymess { 791 .chat_text_mymess {
786 color: blue; 792 color: #006600;
787 } 793 }
788 794
789 .occupant { 795 .occupant {
790 padding-right: 15px; 796 margin-top: 10px;
797 margin-right: 4px;
798 min-width: 120px;
799 padding: 5px 15px 5px 15px;
800 font-weight: bold;
801 background-color: #eee;
802 border: 1px solid #ddd;
791 } 803 }
792 804
793 .occupantsList { 805 .occupantsList {
794 border-right: 1px solid lightGray; 806 border-right: 2px dotted #ddd;
795 margin-left: 5px; 807 margin-left: 5px;
796 margin-right: 10px; 808 margin-right: 10px;
797 height: 100%; 809 height: 100%;
798 } 810 }
799 811
809 } 821 }
810 822
811 /* Drag and drop */ 823 /* Drag and drop */
812 824
813 .dragover { 825 .dragover {
814 background: #cf2828 !important; 826 background: #ffb2b2;
815 border-radius: 1em 1em 1em 1em !important; 827 border-radius: 1em 1em 1em 1em;
816 -webkit-border-radius: 1em 1em 1em 1em !important; 828 -webkit-border-radius: 1em 1em 1em 1em;
817 -moz-border-radius: 1em 1em 1em 1em !important; 829 -moz-border-radius: 1em 1em 1em 1em;
830 border: 2px dotted #cf2828;
818 } 831 }
819 832
820 .dragover .widgetHeader, .dragover .widgetBody, .dragover .widgetBody span, .dragover .widgetHeader img { 833 .dragover .widgetHeader, .dragover .widgetBody, .dragover .widgetBody span, .dragover .widgetHeader img {
821 background: #cf2828 !important; 834 background: #eee;
822 } 835 border-radius: 0 0 0 0;
823 836 -webkit-border-radius: 0 0 0 0;
824 .dragover.widgetHeader { 837 -moz-border-radius: 0 0 0 0;
825 border-radius: 1em 1em 0 0 !important;
826 -webkit-border-radius: 1em 1em 0 0 !important;
827 -moz-border-radius: 1em 1em 0 0 !important;
828 }
829
830 .dragover.widgetBody {
831 border-radius: 0 0 1em 1em !important;
832 -webkit-border-radius: 0 0 1em 1em !important;
833 -moz-border-radius: 0 0 1em 1em !important;
834 } 838 }
835 839
836 /* Warning message */ 840 /* Warning message */
837 841
838 .warningPopup { 842 .warningPopup {
839 width: 100%; 843 font-size: 1em;
844 width: 100%;
845 height: 26px;
840 text-align: center; 846 text-align: center;
841 background-color: white; 847 padding: 5px 0;
842 padding: 4px 0; 848 border-bottom: 1px solid #444;
849 background-color: #fff;
850 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’fff′, endColorstr=’#ccc’);
851 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
852 background: -moz-linear-gradient(top, #fff, #ccc);
853 background-image: -o-linear-gradient(#fff,#ccc);
854
843 } 855 }
844 856
845 .warningTarget { 857 .warningTarget {
846 font-weight: bold; 858 font-weight: bold;
859
847 } 860 }
848 861
849 .targetPublic { 862 .targetPublic {
850 background-color: red; 863 color: #fff;
864 background-color: #cf2828;
865 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828′, endColorstr=’#981a1a’);
866 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a));
867 background: -moz-linear-gradient(top, #cf2828, #981a1a);
868 background-image: -o-linear-gradient(#cf2828,#981a1a);
851 } 869 }
852 870
853 .targetGroup { 871 .targetGroup {
854 background-color: #00FFFB; 872 color: #fff;
873 background-color: #68ba0f;
874 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’68ba0f′, endColorstr=’#40700d’);
875 background: -webkit-gradient(linear, left top, left bottom, from(#68ba0f), to(#40700d));
876 background: -moz-linear-gradient(top, #68ba0f, #40700d);
877 background-image: -o-linear-gradient(#68ba0f,#40700d);
855 } 878 }
856 879
857 .targetOne2One { 880 .targetOne2One {
858 background-color: #72FF06; 881 color: #fff;
882 background-color: #222;
883 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’444444′, endColorstr=’#222222’);
884 background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#222222));
885 background: -moz-linear-gradient(top, #444444, #222222);
886 background-image: -o-linear-gradient(#444444,#222222);
859 } 887 }
860 888
861 .targetStatus { 889 .targetStatus {
890 color: #666;
891 background-color: #fff;
892 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’fff′, endColorstr=’#ccc’);
893 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
894 background: -moz-linear-gradient(top, #fff, #ccc);
895 background-image: -o-linear-gradient(#fff,#ccc);
862 } 896 }
863 897
864 /* Tab panel */ 898 /* Tab panel */
865 899
866 .mainTabPanel { 900 .mainTabPanel {
875 909
876 .gwt-TabBar { 910 .gwt-TabBar {
877 position: fixed; 911 position: fixed;
878 z-index: 10; 912 z-index: 10;
879 bottom: 0; 913 bottom: 0;
880 font: normal 0.8em/1.4em Arial, Helvetica, sans-serif;
881 font-weight: bold; 914 font-weight: bold;
882 text-decoration: none; 915 text-decoration: none;
916 border-bottom: 3px solid #a01c1c;
883 } 917 }
884 918
885 .gwt-TabBar .gwt-TabBarFirst { 919 .gwt-TabBar .gwt-TabBarFirst {
886 height: 100%; 920 height: 100%;
887 } 921 }
888 922
889 .gwt-TabBar .gwt-TabBarRest { 923 .gwt-TabBar .gwt-TabBarRest {
890 } 924 }
891 925
892 .mainTabPanel .gwt-TabBar { 926 .mainTabPanel .gwt-TabBar {;
893 margin-left: 20px;
894 } 927 }
895 928
896 .mainTabPanel .gwt-TabBar .gwt-TabBarItem { 929 .mainTabPanel .gwt-TabBar .gwt-TabBarItem {
897 cursor: pointer; 930 cursor: pointer;
898 margin-right: 5px; 931 margin-right: 5px;
899
900 } 932 }
901 933
902 .mainTabPanel .gwt-TabBarItem div { 934 .mainTabPanel .gwt-TabBarItem div {
903 color: #fff; 935 color: #fff;
904 } 936 }
911 background: -moz-linear-gradient(top, #444, #222); 943 background: -moz-linear-gradient(top, #444, #222);
912 background-image: -o-linear-gradient(#444,#222); 944 background-image: -o-linear-gradient(#444,#222);
913 box-shadow: 0px 1px 4px #000; 945 box-shadow: 0px 1px 4px #000;
914 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); 946 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
915 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); 947 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
916 padding: 3px 15px 3px 15px; 948 padding: 4px 15px 4px 15px;
917 border-radius: 1em 1em 1em 1em; 949 border-radius: 1em 1em 0 0;
918 -webkit-border-radius: 1em 1em 1em 1em; 950 -webkit-border-radius: 1em 1em 0 0;
919 -moz-border-radius: 1em 1em 0 0; 951 -moz-border-radius: 1em 1em 0 0;
920 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); 952 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
921 } 953 }
922 954
923 .mainTabPanel .gwt-TabBarItem-selected { 955 .mainTabPanel .gwt-TabBarItem-selected {
924 color: #fff; 956 color: #fff;
925 background-color: #cf2828; 957 background-color: #cf2828;
926 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828′, endColorstr=’#b01e1e’); 958 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828′, endColorstr=’#981a1a’);
927 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#b01e1e)); 959 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a));
928 background: -moz-linear-gradient(top, #cf2828, #b01e1e); 960 background: -moz-linear-gradient(top, #cf2828, #981a1a);
929 background-image: -o-linear-gradient(#cf2828,#b01e1e); 961 background-image: -o-linear-gradient(#cf2828,#981a1a);
930 box-shadow: 0px 1px 4px #000; 962 box-shadow: 0px 1px 4px #000;
931 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); 963 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
932 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); 964 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
933 padding: 3px 15px 3px 15px; 965 padding: 4px 15px 4px 15px;
934 border-radius: 1em 1em 1em 1em; 966 border-radius: 1em 1em 0 0;
935 -webkit-border-radius: 1em 1em 1em 1em; 967 -webkit-border-radius: 1em 1em 0 0;
936 -moz-border-radius: 1em 1em 0 0; 968 -moz-border-radius: 1em 1em 0 0;
937 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 969 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
938 } 970 }
939 971
940 .mainTabPanel div.gwt-TabBarItem:hover { 972 .mainTabPanel div.gwt-TabBarItem:hover {
941 color: #fff; 973 color: #fff;
942 background-color: #cf2828; 974 background-color: #cf2828;
943 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828′, endColorstr=’#b01e1e’); 975 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828′, endColorstr=’#981a1a’);
944 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#b01e1e)); 976 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a));
945 background: -moz-linear-gradient(top, #cf2828, #b01e1e); 977 background: -moz-linear-gradient(top, #cf2828, #981a1a);
946 background-image: -o-linear-gradient(#cf2828,#b01e1e); 978 background-image: -o-linear-gradient(#cf2828,#981a1a);
947 box-shadow: 0px 1px 4px #000; 979 box-shadow: 0px 1px 4px #000;
948 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); 980 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
949 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); 981 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
950 padding: 3px 15px 3px 15px; 982 padding: 4px 15px 4px 15px;
951 border-radius: 1em 1em 1em 1em; 983 border-radius: 1em 1em 0 0;
952 -webkit-border-radius: 1em 1em 1em 1em; 984 -webkit-border-radius: 1em 1em 0 0;
953 -moz-border-radius: 1em 1em 0 0; 985 -moz-border-radius: 1em 1em 0 0;
954 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 986 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
955 } 987 }
956 988
957 .mainTabPanel .gwt-TabBar .gwt-TabBarItem-selected { 989 .mainTabPanel .gwt-TabBar .gwt-TabBarItem-selected {
958 cursor: default; 990 cursor: default;
959 } 991 }
964 .selected_widget .widgetHeader { 996 .selected_widget .widgetHeader {
965 /* this property is set when a widget is the current target of the uniBox 997 /* this property is set when a widget is the current target of the uniBox
966 * (messages entered in unibox will be sent to this widget) 998 * (messages entered in unibox will be sent to this widget)
967 */ 999 */
968 background-color: #cf2828; 1000 background-color: #cf2828;
969 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828&#888;, endColorstr=’#b01e1e’); 1001 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828&#888;, endColorstr=’#981a1a’);
970 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#b01e1e)); 1002 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a));
971 background: -moz-linear-gradient(top, #cf2828, #b01e1e); 1003 background: -moz-linear-gradient(top, #cf2828, #981a1a);
972 background-image: -o-linear-gradient(#cf2828,#b01e1e); 1004 background-image: -o-linear-gradient(#cf2828,#981a1a);
973 } 1005 }
974 1006
975 .infoFrame { 1007 .infoFrame {
976 position: relative; 1008 position: relative;
977 width: 100%; 1009 width: 100%;