comparison public/libervia.css @ 106:edce682df120

browser side: CSS: black & red tabs + dialogs fixes
author Adrien Vigneron <adrienvigneron@mailoo.org>
date Wed, 29 Jun 2011 01:32:45 +0200
parents d870258b5e79
children c3fb3292f582
comparison
equal deleted inserted replaced
105:d870258b5e79 106:edce682df120
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 */ 288 /*DIALOG: button, listbox, textbox, label */
289 289
290 .gwt-button { 290 .gwt-DialogBox .gwt-button {
291 background-color: #ccc; 291 background-color: #ccc;
292 border-radius: 5px 5px 5px 5px; 292 border-radius: 5px 5px 5px 5px;
293 -webkit-border-radius: 5px 5px 5px 5px; 293 -webkit-border-radius: 5px 5px 5px 5px;
294 -moz-border-radius: 5px 5px 5px 5px; 294 -moz-border-radius: 5px 5px 5px 5px;
295 box-shadow: 0px 1px 4px #000; 295 box-shadow: 0px 1px 4px #000;
296 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); 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); 297 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
298 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff&#888;, endColorstr=’#ccc’); 298 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#444&#888;, endColorstr=’#222’);
299 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc)); 299 background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222));
300 background: -moz-linear-gradient(top, #fff, #ccc); 300 background: -moz-linear-gradient(top, #444, #222);
301 background-image: -o-linear-gradient(#fff,#ccc); 301 background-image: -o-linear-gradient(#444,#222);
302 text-shadow: 0 -1px 1px rgba(255,255,255,0.25); 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 5px 5px; 304 margin: 10px 5px 10px 5px;
305 color: #222; 305 color: #fff;
306 font-weight: bold; 306 font-weight: bold;
307 font: normal 1em/1.4em Arial, Helvetica, sans-serif; 307 font: normal 1em/1.4em Arial, Helvetica, sans-serif;
308 border: none; 308 border: none;
309 } 309 }
310 310
311 .gwt-button:hover { 311 .gwt-DialogBox .gwt-button:hover {
312 background-color: #cf2828; 312 background-color: #cf2828;
313 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828&#888;, endColorstr=’#b01e1e’); 313 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828&#888;, endColorstr=’#b01e1e’);
314 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#b01e1e)); 314 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#b01e1e));
315 background: -moz-linear-gradient(top, #cf2828, #b01e1e); 315 background: -moz-linear-gradient(top, #cf2828, #b01e1e);
316 background-image: -o-linear-gradient(#cf2828,#b01e1e); 316 background-image: -o-linear-gradient(#cf2828,#b01e1e);
317 color: #fff; 317 color: #fff;
318 text-shadow: 0 -1px 1px rgba(0,0,0,0.25); 318 text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
319 } 319 }
320 320
321 .gwt-TextBox, .gwt-ListBox { 321 .gwt-DialogBox .gwt-TextBox {
322 background-color: #fff; 322 background-color: #fff;
323 border-radius: 5px 5px 5px 5px; 323 border-radius: 5px 5px 5px 5px;
324 -webkit-border-radius: 5px 5px 5px 5px; 324 -webkit-border-radius: 5px 5px 5px 5px;
325 -moz-border-radius: 5px 5px 5px 5px; 325 -moz-border-radius: 5px 5px 5px 5px;
326 box-shadow:inset 0px 1px 4px #000; 326 box-shadow:inset 0px 1px 4px #000;
327 -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.6); 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); 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; 329 padding: 3px 5px 3px 5px;
330 margin: 10px 5px 10px 5px;
335 color: #222; 331 color: #222;
336 font-weight: bold; 332 font-weight: bold;
337 font: normal 1em/1.4em Arial, Helvetica, sans-serif; 333 font: normal 1em/1.4em Arial, Helvetica, sans-serif;
338 border: none; 334 border: none;
339 } 335 }
340 336
341 .gwt-ListBox { 337 .gwt-DialogBox .gwt-ListBox {
342 overflow: auto; 338 overflow: auto;
343 width: 100%; 339 width: 100%;
340 background-color: #fff;
341 border-radius: 5px 5px 5px 5px;
342 -webkit-border-radius: 5px 5px 5px 5px;
343 -moz-border-radius: 5px 5px 5px 5px;
344 box-shadow:inset 0px 1px 4px #000;
345 -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);
347 padding: 3px 5px 3px 5px;
348 margin: 10px 5px 10px 5px;
349 color: #222;
350 font-weight: bold;
351 font: normal 1em/1.4em Arial, Helvetica, sans-serif;
352 border: none;
353 }
354
355 .gwt-DialogBox .gwt-Label {
356 margin-top: 13px;
344 } 357 }
345 358
346 /* Custom Dialogs */ 359 /* Custom Dialogs */
347 360
348 .formWarning { /* used when a form is not valid and must be corrected before submission */ 361 .formWarning { /* used when a form is not valid and must be corrected before submission */
768 background-color: #ddd; 781 background-color: #ddd;
769 color: #555; 782 color: #555;
770 } 783 }
771 784
772 .chat_text_mymess { 785 .chat_text_mymess {
773 color: #5e0000; 786 color: blue;
774 } 787 }
775 788
776 .occupant { 789 .occupant {
777 padding-right: 15px; 790 padding-right: 15px;
778 } 791 }
865 z-index: 10; 878 z-index: 10;
866 bottom: 0; 879 bottom: 0;
867 font: normal 0.8em/1.4em Arial, Helvetica, sans-serif; 880 font: normal 0.8em/1.4em Arial, Helvetica, sans-serif;
868 font-weight: bold; 881 font-weight: bold;
869 text-decoration: none; 882 text-decoration: none;
870 height: 32px;
871 box-shadow: 0px 1px 4px #000;
872 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
873 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
874 border-top: 1px solid #ddd;
875 border-bottom: 1px solid #ddd;
876 background-color: #222;
877 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’444444′, endColorstr=’#222222’);
878 background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#222222));
879 background: -moz-linear-gradient(top, #444444, #222222);
880 background-image: -o-linear-gradient(#444444,#222222);
881 } 883 }
882 884
883 .gwt-TabBar .gwt-TabBarFirst { 885 .gwt-TabBar .gwt-TabBarFirst {
884 height: 100%; 886 height: 100%;
885 } 887 }
887 .gwt-TabBar .gwt-TabBarRest { 889 .gwt-TabBar .gwt-TabBarRest {
888 } 890 }
889 891
890 .mainTabPanel .gwt-TabBar .gwt-TabBarItem { 892 .mainTabPanel .gwt-TabBar .gwt-TabBarItem {
891 cursor: pointer; 893 cursor: pointer;
894 margin-left: 20px;
895
896 }
897
898 .mainTabPanel .gwt-TabBarItem div {
899 color: #fff;
900 }
901
902 .mainTabPanel .gwt-TabBarItem {
903 color: #444 !important;
904 background-color: #222;
905 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#444′, endColorstr=’#222’);
906 background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222));
907 background: -moz-linear-gradient(top, #444, #222);
908 background-image: -o-linear-gradient(#444,#222);
909 box-shadow: 0px 1px 4px #000;
910 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
911 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
892 padding: 3px 15px 3px 15px; 912 padding: 3px 15px 3px 15px;
893 margin-left: 10px;
894 }
895
896 .mainTabPanel .gwt-TabBarItem div {
897 color: #e7e5e5;
898 }
899
900 .mainTabPanel .gwt-TabBarItem-selected *, .mainTabPanel div.gwt-TabBarItem:hover *{
901 color: #444 !important;
902 background-color: #fff;
903 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff′, endColorstr=’#ccc’);
904 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
905 background: -moz-linear-gradient(top, #fff, #ccc);
906 background-image: -o-linear-gradient(#fff,#ccc);
907 box-shadow: 0px 1px 4px #000;
908 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
909 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
910 padding: 3px 15px;
911 border-top: 1px solid #fff;
912 border-radius: 1em 1em 1em 1em; 913 border-radius: 1em 1em 1em 1em;
913 -webkit-border-radius: 1em 1em 1em 1em; 914 -webkit-border-radius: 1em 1em 1em 1em;
914 -moz-border-radius: 1em 1em 0 0; 915 -moz-border-radius: 1em 1em 0 0;
915 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); 916 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
917 }
918
919 .mainTabPanel .gwt-TabBarItem-selected {
920 color: #fff;
921 background-color: #cf2828;
922 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828′, endColorstr=’#b01e1e’);
923 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#b01e1e));
924 background: -moz-linear-gradient(top, #cf2828, #b01e1e);
925 background-image: -o-linear-gradient(#cf2828,#b01e1e);
926 box-shadow: 0px 1px 4px #000;
927 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
928 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
929 padding: 3px 15px 3px 15px;
930 border-radius: 1em 1em 1em 1em;
931 -webkit-border-radius: 1em 1em 1em 1em;
932 -moz-border-radius: 1em 1em 0 0;
933 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
916 } 934 }
917 935
918 .mainTabPanel div.gwt-TabBarItem:hover { 936 .mainTabPanel div.gwt-TabBarItem:hover {
937 color: #fff;
938 background-color: #cf2828;
939 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828′, endColorstr=’#b01e1e’);
940 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#b01e1e));
941 background: -moz-linear-gradient(top, #cf2828, #b01e1e);
942 background-image: -o-linear-gradient(#cf2828,#b01e1e);
943 box-shadow: 0px 1px 4px #000;
944 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
945 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
946 padding: 3px 15px 3px 15px;
947 border-radius: 1em 1em 1em 1em;
948 -webkit-border-radius: 1em 1em 1em 1em;
949 -moz-border-radius: 1em 1em 0 0;
950 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
919 } 951 }
920 952
921 .mainTabPanel .gwt-TabBar .gwt-TabBarItem-selected { 953 .mainTabPanel .gwt-TabBar .gwt-TabBarItem-selected {
922 cursor: default; 954 cursor: default;
923 } 955 }