Mercurial > libervia-web

comparison public/libervia.css @ 102:eead497c87f7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
browser side: CSS update, tabs & dialogs
author Adrien Vigneron <adrienvigneron@mailoo.org>
date Tue, 28 Jun 2011 23:35:56 +0200
parents db435e82197d
children 35917ffd1df4
comparison
equal deleted inserted replaced
101:ad0696615768 102:eead497c87f7
97 html>body .iescrollpanelfix { position: static; } 97 html>body .iescrollpanelfix { position: static; }
98 98
99 /* CSS Reset END */ 99 /* CSS Reset END */
100 100
101 body { 101 body {
102 background: #fff url('media/libervia/worldmap_gray.jpg') repeat-x; 102 background: #fff url('media/libervia/bg.png');
103 } 103 }
104 104
105 /* Misc Pyjamas stuff */ 105 /* Misc Pyjamas stuff */
106 106
107 .menuContainer { 107 .menuContainer {
173 background: inherit; 173 background: inherit;
174 cursor: default; 174 cursor: default;
175 } 175 }
176 176
177 .gwt-MenuBar { 177 .gwt-MenuBar {
178 background-color: #fff; 178 background-color: #fff;
179 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff’, endColorstr=’#ccc’); 179 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff’, endColorstr=’#ccc’);
180 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc)); 180 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
181 background: -moz-linear-gradient(top, #fff, #ccc); 181 background: -moz-linear-gradient(top, #fff, #ccc);
182 background-image: -o-linear-gradient(#fff,#ccc); 182 background-image: -o-linear-gradient(#fff,#ccc);
183 /*display: none;*/ 183 /*display: none;*/
283 border-radius: 7px 7px 0 0; 283 border-radius: 7px 7px 0 0;
284 -webkit-border-radius: 7px 7px 0 0; 284 -webkit-border-radius: 7px 7px 0 0;
285 -moz-border-radius: 7px 7px 0 0; 285 -moz-border-radius: 7px 7px 0 0;
286 } 286 }
287 287
288 /* button, listbox, textbox */
289
290 .gwt-button {
291 background-color: #ccc;
292 border-radius: 5px 5px 5px 5px;
293 -webkit-border-radius: 5px 5px 5px 5px;
294 -moz-border-radius: 5px 5px 5px 5px;
295 box-shadow: 0px 1px 4px #000;
296 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
297 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
298 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff&#888;, endColorstr=’#ccc’);
299 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
300 background: -moz-linear-gradient(top, #fff, #ccc);
301 background-image: -o-linear-gradient(#fff,#ccc);
302 text-shadow: 0 -1px 1px rgba(255,255,255,0.25);
303 padding: 3px 5px 3px 5px;
304 margin: 10px 5px 5px 5px;
305 color: #222;
306 font-weight: bold;
307 font: normal 1em/1.4em Arial, Helvetica, sans-serif;
308 border: none;
309 }
310
311 .gwt-button:hover {
312 background-color: #cf2828;
313 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828&#888;, endColorstr=’#b01e1e’);
314 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#b01e1e));
315 background: -moz-linear-gradient(top, #cf2828, #b01e1e);
316 background-image: -o-linear-gradient(#cf2828,#b01e1e);
317 color: #fff;
318 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
319 }
320
321 .gwt-TextBox, .gwt-ListBox {
322 background-color: #fff;
323 border-radius: 5px 5px 5px 5px;
324 -webkit-border-radius: 5px 5px 5px 5px;
325 -moz-border-radius: 5px 5px 5px 5px;
326 box-shadow:inset 0px 1px 4px #000;
327 -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);
329 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ccc&#888;, endColorstr=’#eee’);
330 background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#eee));
331 background: -moz-linear-gradient(top, #ccc, #eee);
332 background-image: -o-linear-gradient(#ccc,#eee);
333 text-shadow: 0 -1px 1px rgba(255,255,255,0.25);
334 padding: 3px 5px 3px 5px;
335 color: #222;
336 font-weight: bold;
337 font: normal 1em/1.4em Arial, Helvetica, sans-serif;
338 border: none;
339 }
340
288 .gwt-ListBox { 341 .gwt-ListBox {
289 width: 100%; 342 overflow: auto;
290 background-color: #fff; 343 width: 100%;
291 padding: 3px;
292 margin: 5px 0 5px 0;
293 border: 1px solid #aaa;
294
295 } 344 }
296 345
297 /* Custom Dialogs */ 346 /* Custom Dialogs */
298 347
299 .formWarning { /* used when a form is not valid and must be corrected before submission */ 348 .formWarning { /* used when a form is not valid and must be corrected before submission */
314 div.contactBox { 363 div.contactBox {
315 margin-left: 20px; 364 margin-left: 20px;
316 } 365 }
317 366
318 .contactTitle { 367 .contactTitle {
319 color: #fff; 368 color: #cf2828;
320 font-weight: bold; 369 font-weight: bold;
321 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
322 font: normal 1.2em/1.4em Arial, Helvetica, sans-serif; 370 font: normal 1.2em/1.4em Arial, Helvetica, sans-serif;
323 text-indent: 15px; 371 text-indent: 5px;
372 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
324 width: 200px; 373 width: 200px;
325 height: 30px; 374 height: 30px;
326 border-radius: 10px 10px 0 0;
327 -webkit-border-radius: 10px 10px 0 0;
328 -moz-border-radius: 10px 10px 0 0;
329 background-color: #cf2828;
330 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828&#888;, endColorstr=’#b01e1e’);
331 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#b01e1e));
332 background: -moz-linear-gradient(top, #cf2828, #b01e1e) !important;
333 background-image: -o-linear-gradient(#cf2828,#b01e1e);
334 } 375 }
335 .groupList { 376 .groupList {
336 font: normal 0.8em/1.4em Arial, Helvetica, sans-serif; 377 font: normal 0.8em/1.4em Arial, Helvetica, sans-serif;
337 width: 100%; 378 width: 100%;
338 border: 1px solid #fff;
339 background-color: #fff;
340 } 379 }
341 380
342 .groupList tr:first-child td { 381 .groupList tr:first-child td {
343 padding-top: 10px; 382 padding-top: 10px;
344 } 383 }
358 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eee’, endColorstr=’#aaa&#888;); 397 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eee’, endColorstr=’#aaa&#888;);
359 background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa)); 398 background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa));
360 background: -moz-linear-gradient(top, #eee, #aaa); 399 background: -moz-linear-gradient(top, #eee, #aaa);
361 background-image: -o-linear-gradient(#eee,#aaa); 400 background-image: -o-linear-gradient(#eee,#aaa);
362 color: #444; 401 color: #444;
363 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); 402 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
403 box-shadow:inset 0px 1px 1px #000;
404 -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.6);
405 -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.6);
364 } 406 }
365 407
366 div.group:hover { 408 div.group:hover {
367 color: #fff; 409 color: #fff;
368 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); 410 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
374 -webkit-transition: color 0.1s linear; 416 -webkit-transition: color 0.1s linear;
375 -moz-transition: color 0.1s linear; 417 -moz-transition: color 0.1s linear;
376 -o-transition: color 0.1s linear; 418 -o-transition: color 0.1s linear;
377 } 419 }
378 .contact { 420 .contact {
379 font-family: Arial, Helvetica, sans-serif; 421 font-family: Arial, Helvetica, sans-serif;
380 font-size: 0.8em; 422 font-size: 0.8em;
381 margin-top: 3px; 423 margin-top: 3px;
382 padding: 3px 10px 3px 10px; 424 padding: 3px 10px 3px 10px;
383 } 425 }
384 426
387 font-weight: bold; 429 font-weight: bold;
388 } 430 }
389 431
390 .selected { 432 .selected {
391 color: #fff; 433 color: #fff;
392 background-color: #cf2828; 434 background-color: #cf2828;
393 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828&#888;, endColorstr=’#981a1a’); 435 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828&#888;, endColorstr=’#981a1a’);
394 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)); 436 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a));
395 background: -moz-linear-gradient(top, #cf2828, #981a1a); 437 background: -moz-linear-gradient(top, #cf2828, #981a1a);
396 background-image: -o-linear-gradient(#cf2828,#981a1a); 438 background-image: -o-linear-gradient(#cf2828,#981a1a);
397 border-radius: 1em 1em 1em 1em; 439 border-radius: 1em 1em 1em 1em;
398 -webkit-border-radius: 1em 1em 1em 1em; 440 -webkit-border-radius: 1em 1em 1em 1em;
425 467
426 .statusPanel { 468 .statusPanel {
427 margin: auto; 469 margin: auto;
428 text-align: center; 470 text-align: center;
429 width: 80%; 471 width: 80%;
472 padding-top: 10px;
473 min-height: 30px;
474 text-shadow: 0 -1px 1px rgba(255,255,255,0.25);
430 } 475 }
431 476
432 .status { 477 .status {
433 font-style: italic; 478 font-style: italic;
434 } 479 }
456 margin-left: 15px; 501 margin-left: 15px;
457 cursor: pointer; 502 cursor: pointer;
458 } 503 }
459 504
460 .registerPanel_tabs .gwt-TabBarItem div { 505 .registerPanel_tabs .gwt-TabBarItem div {
461 color: #444444; 506 color: #444;
462 } 507 }
463 508
464 .registerPanel_tabs .gwt-TabBarItem div:hover { 509 .registerPanel_tabs .gwt-TabBarItem div:hover {
465 color: #fff; 510 color: #fff;
466 } 511 }
521 } 566 }
522 567
523 /* Fix for Opera */ 568 /* Fix for Opera */
524 .button, .button:visited { 569 .button, .button:visited {
525 border-radius: 6px 6px 6px 6px !important; 570 border-radius: 6px 6px 6px 6px !important;
526 -moz-border-radius: 6px 6px 6px 6px !important;
527 -webkit-border-radius: 6px 6px 6px 6px !important;
528 } 571 }
529 572
530 .registerPanel_content .button:hover { background-color: #111; color: #fff; } 573 .registerPanel_content .button:hover { background-color: #111; color: #fff; }
531 .registerPanel_content .button:active { top: 1px; } 574 .registerPanel_content .button:active { top: 1px; }
532 .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; } 575 .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; }
581 height: 22px; 624 height: 22px;
582 padding: 0; 625 padding: 0;
583 border-bottom: 1px solid #666; 626 border-bottom: 1px solid #666;
584 border-left: 1px solid #666; 627 border-left: 1px solid #666;
585 border-top: 0; 628 border-top: 0;
586 border-right: 0; 629 border-right: 1px solid #666;
587 border-radius: 0 10px 0 0; 630 border-radius: 0 10px 0 0;
588 -webkit-border-radius: 0 10px 0 0; 631 -webkit-border-radius: 0 10px 0 0;
589 -moz-border-radius: 0 10px 0 0; 632 -moz-border-radius: 0 10px 0 0;
590 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#555&#888;, endColorstr=’#333’); 633 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#555&#888;, endColorstr=’#333’);
591 background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333)); 634 background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333));
612 background: -moz-linear-gradient(top, #cf2828, #b01e1e); 655 background: -moz-linear-gradient(top, #cf2828, #b01e1e);
613 background-image: -o-linear-gradient(#cf2828,#b01e1e); 656 background-image: -o-linear-gradient(#cf2828,#b01e1e);
614 } 657 }
615 658
616 .widgetBody { 659 .widgetBody {
617 border: 1px solid #ddd;
618 border-radius: 0 0 10px 10px; 660 border-radius: 0 0 10px 10px;
619 -webkit-border-radius: 0 0 10px 10px; 661 -webkit-border-radius: 0 0 10px 10px;
620 -moz-border-radius: 0 0 10px 10px; 662 -moz-border-radius: 0 0 10px 10px;
621 background-color: #fff; 663 background-color: #fff;
622 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff&#888;, endColorstr=’#ccc’); 664 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff&#888;, endColorstr=’#ccc’);
687 overflow: auto; 729 overflow: auto;
688 } 730 }
689 731
690 .chatText { 732 .chatText {
691 /* font-size: smaller; */ 733 /* font-size: smaller; */
734 font: normal 0.8em/1.4em Arial, Helvetica, sans-serif;
735 margin-top: 5px;
692 } 736 }
693 737
694 .chatTextInfo { 738 .chatTextInfo {
695 font-weight: bold; 739 font-weight: bold;
696 } 740 }
704 width:100%; 748 width:100%;
705 } 749 }
706 750
707 .chat_text_timestamp { 751 .chat_text_timestamp {
708 font-style: italic; 752 font-style: italic;
753 margin-right: -4px;
754 padding: 1px 3px 1px 3px;
755 -moz-border-radius: 15px 0 0 15px;
756 -webkit-border-radius: 15px 0 0 15px;
757 border-radius: 15px 0 0 15px;
758 background-color: #eee;
759 color: #888;
709 } 760 }
710 761
711 .chat_text_nick { 762 .chat_text_nick {
712 font-weight: bold; 763 font-weight: bold;
764 padding: 1px 3px 1px 3px;
765 -moz-border-radius: 0 15px 15px 0;
766 -webkit-border-radius: 10 15px 15px 0;
767 border-radius: 0 15px 15px 0;
768 background-color: #ddd;
769 color: #555;
713 } 770 }
714 771
715 .chat_text_mymess { 772 .chat_text_mymess {
716 color: blue; 773 color: #5e0000;
717 } 774 }
718 775
719 .occupant { 776 .occupant {
720 padding-right: 15px; 777 padding-right: 15px;
721 } 778 }
798 855
799 .gwt-TabPanel { 856 .gwt-TabPanel {
800 } 857 }
801 858
802 .gwt-TabPanelBottom { 859 .gwt-TabPanelBottom {
803 height: 100%; 860 height: 100%;
804 } 861 }
805 862
806 .gwt-TabBar { 863 .gwt-TabBar {
807 /*background-color: #C3D9FF;*/ 864 color: #fff;
808 position: fixed; 865 position: fixed;
809 z-index: 10; 866 z-index: 10;
810 bottom: 0; 867 bottom: 0;
811 font-size: small; 868 font: normal 0.8em/1.4em Arial, Helvetica, sans-serif;
869 font-weight: bold;
870 text-decoration: none;
871 height: 32px;
872 box-shadow: 0px 1px 4px #000;
873 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
874 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
875 border-top: 1px solid #ddd;
876 border-bottom: 1px solid #ddd;
877 background-color: #222;
878 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’444444′, endColorstr=’#222222’);
879 background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#222222));
880 background: -moz-linear-gradient(top, #444444, #222222);
881 background-image: -o-linear-gradient(#444444,#222222);
812 } 882 }
813 883
814 .gwt-TabBar .gwt-TabBarFirst { 884 .gwt-TabBar .gwt-TabBarFirst {
815 height: 100%; 885 height: 100%;
816 padding-left: 3px;
817 } 886 }
818 887
819 .gwt-TabBar .gwt-TabBarRest { 888 .gwt-TabBar .gwt-TabBarRest {
820 padding-right: 3px;
821 } 889 }
822 890
823 .mainTabPanel .gwt-TabBar .gwt-TabBarItem { 891 .mainTabPanel .gwt-TabBar .gwt-TabBarItem {
824 border-top: 1px solid #C3D9FF;
825 border-bottom: 1px solid #C3D9FF;
826 border-right: 1px solid #C3D9FF;
827 background: white;
828 padding: 2px;
829 cursor: pointer; 892 cursor: pointer;
893 padding: 3px 15px 3px 15px;
894 margin-left: 10px;
895 }
896
897 .gwt-TabBarItem-selected, div.gwt-TabBarItem:hover {
898 background-color: #fff;
899 color: #e7e5e5;
900 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff′, endColorstr=’#ccc’);
901 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
902 background: -moz-linear-gradient(top, #fff, #ccc);
903 background-image: -o-linear-gradient(#fff,#ccc);
904 box-shadow: 0px 1px 4px #000;
905 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
906 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
907 padding: 3px 15px;
908 border-top: 1px solid #fff;
909 border-radius: 1em 1em 1em 1em;
910 -webkit-border-radius: 1em 1em 1em 1em;
911 -moz-border-radius: 1em 1em 0 0;
912 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
830 } 913 }
831 914
832 .mainTabPanel div.gwt-TabBarItem:hover { 915 .mainTabPanel div.gwt-TabBarItem:hover {
833 background: yellow;
834 } 916 }
835 917
836 .mainTabPanel .gwt-TabBar .gwt-TabBarItem-selected { 918 .mainTabPanel .gwt-TabBar .gwt-TabBarItem-selected {
837 font-weight: bold;
838 background-color: #E8EEF7;
839 border-top: 1px solid #87B3FF;
840 border-left: 1px solid #87B3FF;
841 border-right: 1px solid #87B3FF;
842 border-bottom: 1px solid #E8EEF7;
843 padding: 2px;
844 cursor: default; 919 cursor: default;
845 } 920 }
846 921
847 922
848 /* Misc */ 923 /* Misc */
849 924
850 .selected_widget .widgetHeader { 925 .selected_widget .widgetHeader {
851 /* this property is set when a widget is the current target of the uniBox 926 /* this property is set when a widget is the current target of the uniBox
852 * (messages entered in unibox will be sent to this widget) 927 * (messages entered in unibox will be sent to this widget)
853 */ 928 */
854 background: #cf2828 !important; 929 background-color: #cf2828;
930 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828&#888;, endColorstr=’#b01e1e’);
931 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#b01e1e));
932 background: -moz-linear-gradient(top, #cf2828, #b01e1e);
933 background-image: -o-linear-gradient(#cf2828,#b01e1e);
855 } 934 }
856 935
857 .infoFrame { 936 .infoFrame {
858 position: relative; 937 position: relative;
859 width: 100%; 938 width: 100%;