Mercurial > libervia-web
comparison src/browser/public/libervia.css @ 679:a90cc8fc9605
merged branch frontends_multi_profiles
author | Goffi <goffi@goffi.org> |
---|---|
date | Wed, 18 Mar 2015 16:15:18 +0100 |
parents | 6a1fea10ae8c e489218886d7 |
children | e876f493dccc |
comparison
equal
deleted
inserted
replaced
590:1bffc4c244c3 | 679:a90cc8fc9605 |
---|---|
135 } | 135 } |
136 | 136 |
137 .header { | 137 .header { |
138 background-color: #eee; | 138 background-color: #eee; |
139 border-bottom: 1px solid #ddd; | 139 border-bottom: 1px solid #ddd; |
140 } | 140 width: 100%; |
141 | 141 height: 64px; |
142 .menuContainer { | 142 } |
143 margin: 0 32px 0 20px; | 143 |
144 .mainPanel { | |
145 width: 100%; | |
146 height: 100%; | |
144 } | 147 } |
145 | 148 |
146 .mainMenuBar { | 149 .mainMenuBar { |
147 background-color: #222; | 150 background-color: #222; |
148 background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#222222)); | 151 background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#222222)); |
149 background: -webkit-linear-gradient(top, #444444, #222222); | 152 background: -webkit-linear-gradient(top, #444444, #222222); |
150 background: linear-gradient(to bottom, #444444, #222222); | 153 background: linear-gradient(to bottom, #444444, #222222); |
151 width: 100%; | |
152 height: 28px; | 154 height: 28px; |
153 padding: 5px 5px 0 5px; | 155 padding: 5px 5px 0 5px; |
154 border: 1px solid #ddd; | 156 border: 1px solid #ddd; |
155 border-radius: 0 0 1em 1em; | 157 border-radius: 0 0 1em 1em; |
156 line-height: 100%; | 158 line-height: 100%; |
157 -webkit-box-shadow: 0px 1px 4px #000; | 159 -webkit-box-shadow: 0px 1px 4px #000; |
158 box-shadow: 0px 1px 4px #000; | 160 box-shadow: 0px 1px 4px #000; |
159 display: inline-block; | 161 display: inline-block; |
162 position: absolute; | |
163 left: 20px; | |
164 right: 20px; | |
165 width: auto; | |
160 } | 166 } |
161 | 167 |
162 .mainMenuBar .gwt-MenuItem { | 168 .mainMenuBar .gwt-MenuItem { |
163 padding: 3px 15px; | 169 padding: 3px 15px; |
164 text-decoration: none; | 170 text-decoration: none; |
340 background: -webkit-linear-gradient(top, #444, #222); | 346 background: -webkit-linear-gradient(top, #444, #222); |
341 background: linear-gradient(to bottom, #444, #222); | 347 background: linear-gradient(to bottom, #444, #222); |
342 text-shadow: 1px 1px 1px rgba(0,0,0,0.2); | 348 text-shadow: 1px 1px 1px rgba(0,0,0,0.2); |
343 padding: 3px 5px 3px 5px; | 349 padding: 3px 5px 3px 5px; |
344 margin: 10px 5px 10px 5px; | 350 margin: 10px 5px 10px 5px; |
345 color: #fff; | |
346 font-weight: bold; | 351 font-weight: bold; |
347 font-size: 1em; | 352 font-size: 1em; |
348 border: none; | 353 border: none; |
349 -webkit-transition: color 0.2s linear; | 354 -webkit-transition: color 0.2s linear; |
350 transition: color 0.2s linear; | 355 transition: color 0.2s linear; |
351 } | 356 } |
352 | 357 |
353 .gwt-DialogBox .gwt-button:hover { | 358 .gwt-DialogBox .gwt-button:enabled { |
359 cursor: pointer; | |
360 color: #fff; | |
361 } | |
362 | |
363 .gwt-DialogBox .gwt-button:enabled:hover { | |
354 background-color: #cf2828; | 364 background-color: #cf2828; |
355 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)); | 365 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)); |
356 background: -webkit-linear-gradient(top, #cf2828, #981a1a); | 366 background: -webkit-linear-gradient(top, #cf2828, #981a1a); |
357 background: linear-gradient(to bottom, #cf2828, #981a1a); | 367 background: linear-gradient(to bottom, #cf2828, #981a1a); |
358 color: #fff; | 368 color: #fff; |
418 width: 100%; | 428 width: 100%; |
419 height: 100% | 429 height: 100% |
420 } | 430 } |
421 /* Contact List */ | 431 /* Contact List */ |
422 | 432 |
423 div.contactPanel { | 433 div.contactList { |
424 width: 100%; | 434 width: 100%; |
425 /* We want the contact panel to not use all the available height when displayed | 435 margin-top: 9px; |
426 in the unibox panel (grey part), because the dialogs panels (white part) should | |
427 still be visible. The setting max-height: fit-content would be appropriate here | |
428 but it doesn't work with firefox 24.0. TODO: check if the current setting works | |
429 with other browsers... the panel should of course not be displayed on 100px | |
430 but exactly fit the contacts box. | |
431 */ | |
432 max-height: 100px; | |
433 } | 436 } |
434 | 437 |
435 .contactTitle { | 438 .contactTitle { |
436 color: #cf2828; | 439 color: #cf2828; |
437 font-size: 1.7em; | 440 font-size: 1.7em; |
445 /* Button used to switch contacts panel */ | 448 /* Button used to switch contacts panel */ |
446 background: none; | 449 background: none; |
447 border: 0; | 450 border: 0; |
448 padding: 0; | 451 padding: 0; |
449 font-size: large; | 452 font-size: large; |
450 } | 453 margin-top: 9px; |
451 | 454 } |
452 .groupList { | 455 |
456 .groupPanel { | |
453 width: 100%; | 457 width: 100%; |
454 } | 458 } |
455 | 459 |
456 .groupList tr:first-child td { | 460 .groupPanel tr:first-child td { |
457 padding-top: 10px; | 461 padding-top: 10px; |
458 } | 462 } |
459 | 463 |
460 .group { | 464 .group { |
461 padding: 2px 15px; | 465 padding: 2px 15px; |
493 margin: 5px; | 497 margin: 5px; |
494 border-radius: 5px; | 498 border-radius: 5px; |
495 background: #EDEDED; | 499 background: #EDEDED; |
496 } | 500 } |
497 | 501 |
498 .contactBox img { | 502 .contactBox img, .muc_contact img { |
499 width: 32px; | 503 width: 32px; |
500 height: 32px; | 504 height: 32px; |
501 border-radius: 5px; | 505 border-radius: 5px; |
502 margin: 5px 5px 0px 10px; | 506 margin: 5px 5px 0px 10px; |
503 } | 507 } |
537 padding: 3px 10px 3px 10px; | 541 padding: 3px 10px 3px 10px; |
538 border-radius: 5px; | 542 border-radius: 5px; |
539 background-color: rgb(175, 175, 175); | 543 background-color: rgb(175, 175, 175); |
540 } | 544 } |
541 | 545 |
546 /* Contacts in MUC */ | |
547 | |
548 .muc_contact { | |
549 border-radius: 5px; | |
550 background: #EDEDED; | |
551 margin: 2px; | |
552 } | |
553 | |
542 /* START - contact presence status */ | 554 /* START - contact presence status */ |
543 .contactLabel-connected { | 555 .contactLabel-connected { |
544 color: #3c7e0c; | 556 color: #3c7e0c; |
545 font-weight: bold; | 557 font-weight: bold; |
546 } | 558 } |
608 .uniBoxButton { | 620 .uniBoxButton { |
609 width:30px; | 621 width:30px; |
610 height:45px; | 622 height:45px; |
611 } | 623 } |
612 | 624 |
613 .statusPanel { | 625 .presenceStatusPanel { |
614 margin: auto; | 626 margin: auto; |
615 text-align: center; | 627 text-align: center; |
616 width: 100%; | |
617 padding: 5px 0px; | 628 padding: 5px 0px; |
618 text-shadow: 0 -1px 1px rgba(255,255,255,0.25); | 629 text-shadow: 0 -1px 1px rgba(255,255,255,0.25); |
619 font-size: 1.2em; | 630 font-size: 1.2em; |
620 background-color: #eee; | 631 background-color: #eee; |
621 font-style: italic; | 632 font-style: italic; |
811 box-shadow:inset 0px 0 1px #444; | 822 box-shadow:inset 0px 0 1px #444; |
812 } | 823 } |
813 | 824 |
814 /* BorderWidgets */ | 825 /* BorderWidgets */ |
815 | 826 |
827 .borderWidgetOnDrag { | |
828 background-color: lightgray; | |
829 border: 1px dashed #000; | |
830 border-radius: 1em; | |
831 } | |
832 | |
816 .bottomBorderWidget { | 833 .bottomBorderWidget { |
817 height: 10px !important; | 834 height: 10px !important; |
818 } | 835 } |
819 | 836 |
820 .leftBorderWidget, .rightBorderWidget { | 837 .leftBorderWidget, .rightBorderWidget { |
821 width: 10px !important; | 838 width: 10px !important; |
839 } | |
840 | |
841 .leftBorderWidget { | |
842 float: right; | |
843 } | |
844 | |
845 .rightBorderWidget { | |
846 float: left; | |
822 } | 847 } |
823 | 848 |
824 /* Microblog */ | 849 /* Microblog */ |
825 | 850 |
826 .microblogPanel { | 851 .microblogPanel { |
1038 background-color: #eee; | 1063 background-color: #eee; |
1039 border: 1px solid #ddd; | 1064 border: 1px solid #ddd; |
1040 white-space: nowrap; | 1065 white-space: nowrap; |
1041 } | 1066 } |
1042 | 1067 |
1043 .occupantsList { | 1068 .occupantsPanelCell { |
1044 border-right: 2px dotted #ddd; | 1069 border-right: 2px dotted #ddd; |
1045 margin-left: 5px; | 1070 padding-left: 5px; |
1046 margin-right: 10px; | |
1047 height: 100%; | 1071 height: 100%; |
1048 } | 1072 } |
1049 | 1073 |
1050 /* Games */ | 1074 /* Games */ |
1051 | 1075 |
1146 background-color: #fff; | 1170 background-color: #fff; |
1147 } | 1171 } |
1148 | 1172 |
1149 /* Tab panel */ | 1173 /* Tab panel */ |
1150 | 1174 |
1151 .liberviaTabPanel { | |
1152 } | |
1153 | |
1154 .gwt-TabPanel { | 1175 .gwt-TabPanel { |
1155 } | 1176 } |
1156 | 1177 |
1157 .gwt-TabPanelBottom { | 1178 .gwt-TabPanelBottom { |
1158 height: 100%; | 1179 height: 100%; |
1162 font-weight: bold; | 1183 font-weight: bold; |
1163 text-decoration: none; | 1184 text-decoration: none; |
1164 border-bottom: 3px solid #a01c1c; | 1185 border-bottom: 3px solid #a01c1c; |
1165 } | 1186 } |
1166 | 1187 |
1167 .mainTabPanel .gwt-TabBar { | |
1168 z-index: 10; | |
1169 position: fixed; | |
1170 bottom: 0; | |
1171 left: 0; | |
1172 } | |
1173 | |
1174 .gwt-TabBar .gwt-TabBarFirst { | 1188 .gwt-TabBar .gwt-TabBarFirst { |
1175 height: 100%; | 1189 height: 100%; |
1176 } | 1190 } |
1177 | 1191 |
1178 .gwt-TabBar .gwt-TabBarRest { | 1192 .gwt-TabBar .gwt-TabBarRest { |
1179 } | 1193 } |
1180 | 1194 |
1181 .liberviaTabPanel .gwt-TabBar {; | 1195 .mainPanel .gwt-TabBar { |
1182 } | 1196 z-index: 10; |
1183 | 1197 } |
1184 .liberviaTabPanel .gwt-TabBar .gwt-TabBarItem { | 1198 |
1185 cursor: pointer; | 1199 .mainPanel .gwt-TabBar-oneTab { |
1186 margin-right: 5px; | 1200 position: fixed; |
1201 left: 0px; | |
1202 bottom: 0px; | |
1203 border: none; | |
1204 } | |
1205 | |
1206 .mainPanel .gwt-TabBar-oneTab .gwt-TabBarItem-wrapper { | |
1207 display: none; | |
1208 } | |
1209 | |
1210 .mainPanel .gwt-TabBar-oneTab .gwt-TabBarItem-wrapper:nth-child(3) { | |
1211 display: block; | |
1212 } | |
1213 | |
1214 .liberviaTabPanel { | |
1215 width: 100%; | |
1216 height: 100%; | |
1187 } | 1217 } |
1188 | 1218 |
1189 .liberviaTabPanel .gwt-TabBarItem div { | 1219 .liberviaTabPanel .gwt-TabBarItem div { |
1190 color: #fff; | 1220 color: #fff; |
1191 } | 1221 } |
1199 -webkit-box-shadow: 0px 1px 4px #000; | 1229 -webkit-box-shadow: 0px 1px 4px #000; |
1200 box-shadow: 0px 1px 4px #000; | 1230 box-shadow: 0px 1px 4px #000; |
1201 padding: 4px 15px 4px 15px; | 1231 padding: 4px 15px 4px 15px; |
1202 border-radius: 1em 1em 0 0; | 1232 border-radius: 1em 1em 0 0; |
1203 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); | 1233 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); |
1234 cursor: pointer; | |
1235 margin-right: 5px; | |
1204 } | 1236 } |
1205 | 1237 |
1206 .liberviaTabPanel .gwt-TabBarItem-selected { | 1238 .liberviaTabPanel .gwt-TabBarItem-selected { |
1207 color: #fff; | 1239 color: #fff; |
1208 background-color: #cf2828; | 1240 background-color: #cf2828; |
1212 -webkit-box-shadow: 0px 1px 4px #000; | 1244 -webkit-box-shadow: 0px 1px 4px #000; |
1213 box-shadow: 0px 1px 4px #000; | 1245 box-shadow: 0px 1px 4px #000; |
1214 padding: 4px 15px 4px 15px; | 1246 padding: 4px 15px 4px 15px; |
1215 border-radius: 1em 1em 0 0; | 1247 border-radius: 1em 1em 0 0; |
1216 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); | 1248 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); |
1249 cursor: default; | |
1217 } | 1250 } |
1218 | 1251 |
1219 .liberviaTabPanel div.gwt-TabBarItem:hover { | 1252 .liberviaTabPanel div.gwt-TabBarItem:hover { |
1220 color: #fff; | 1253 color: #fff; |
1221 background-color: #cf2828; | 1254 background-color: #cf2828; |
1227 padding: 4px 15px 4px 15px; | 1260 padding: 4px 15px 4px 15px; |
1228 border-radius: 1em 1em 0 0; | 1261 border-radius: 1em 1em 0 0; |
1229 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); | 1262 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); |
1230 } | 1263 } |
1231 | 1264 |
1232 .liberviaTabPanel .gwt-TabBar .gwt-TabBarItem-selected { | |
1233 cursor: default; | |
1234 } | |
1235 | |
1236 .globalLeftArea { | 1265 .globalLeftArea { |
1237 margin-top: 9px; | 1266 margin-top: 9px; |
1238 } | 1267 } |
1239 | 1268 |
1240 | 1269 |
1355 vertical-align: middle; | 1384 vertical-align: middle; |
1356 } | 1385 } |
1357 | 1386 |
1358 /* Recipients panel */ | 1387 /* Recipients panel */ |
1359 | 1388 |
1360 .recipientButtonCell { | 1389 .itemButtonCell { |
1361 width:55px; | 1390 width:55px; |
1362 } | 1391 } |
1363 | 1392 |
1364 .recipientTypeMenu { | 1393 .itemKeyMenu { |
1365 } | 1394 } |
1366 | 1395 |
1367 .recipientTypeItem { | 1396 .itemKey { |
1368 cursor: pointer; | 1397 cursor: pointer; |
1369 border-radius: 5px; | 1398 border-radius: 5px; |
1370 width: 50px; | 1399 width: 50px; |
1371 } | 1400 } |
1372 | 1401 |
1373 .recipientPanel { | 1402 .itemPanel { |
1374 } | 1403 } |
1375 | 1404 |
1376 .recipientTextBox { | 1405 .itemTextBox { |
1377 cursor: pointer; | 1406 cursor: pointer; |
1378 width: auto; | 1407 width: auto; |
1379 border-radius: 5px 5px 5px 5px; | 1408 border-radius: 5px 5px 5px 5px; |
1380 -webkit-box-shadow: inset 0px 1px 4px rgba(135, 179, 255, 0.6); | 1409 -webkit-box-shadow: inset 0px 1px 4px rgba(135, 179, 255, 0.6); |
1381 box-shadow: inset 0px 1px 4px rgba(135, 179, 255, 0.6); | 1410 box-shadow: inset 0px 1px 4px rgba(135, 179, 255, 0.6); |
1383 margin: 0px; | 1412 margin: 0px; |
1384 color: #444; | 1413 color: #444; |
1385 font-size: 1em; | 1414 font-size: 1em; |
1386 } | 1415 } |
1387 | 1416 |
1388 .recipientTextBox-invalid { | 1417 .itemTextBox-invalid { |
1389 -webkit-box-shadow: inset 0px 1px 4px rgba(255, 0, 0, 0.6); | 1418 -webkit-box-shadow: inset 0px 1px 4px rgba(255, 0, 0, 0.6); |
1390 box-shadow: inset 0px 1px 4px rgba(255, 0, 0, 0.6); | 1419 box-shadow: inset 0px 1px 4px rgba(255, 0, 0, 0.6); |
1391 border: 1px solid rgb(255, 0, 0); | 1420 border: 1px solid rgb(255, 0, 0); |
1392 } | 1421 } |
1393 | 1422 |
1394 .recipientRemoveButton { | 1423 .itemRemoveButton { |
1395 margin: 0px 10px 0px 0px; | 1424 margin: 0px 10px 0px 0px; |
1396 padding: 0px; | 1425 padding: 0px; |
1397 border: 1px dashed red; | 1426 border: 1px dashed red; |
1398 border-radius: 5px 5px 5px 5px; | 1427 border-radius: 5px 5px 5px 5px; |
1399 } | 1428 } |
1400 | 1429 |
1401 .recipientRemoveIcon { | 1430 .itemRemoveIcon { |
1402 color: red; | 1431 color: red; |
1403 width:15px; | 1432 width:15px; |
1404 height:15px; | 1433 height:15px; |
1405 vertical-align: baseline; | 1434 vertical-align: baseline; |
1406 } | |
1407 | |
1408 .dragover-recipientPanel { | |
1409 border-radius: 5px; | |
1410 background: none repeat scroll 0% 0% rgb(135, 179, 255); | |
1411 border: 1px dashed rgb(35,79,255); | |
1412 } | 1435 } |
1413 | 1436 |
1414 .recipientSpacer { | 1437 .recipientSpacer { |
1415 height: 15px; | 1438 height: 15px; |
1416 } | 1439 } |
1444 | 1467 |
1445 } | 1468 } |
1446 | 1469 |
1447 .contactGroupPanel { | 1470 .contactGroupPanel { |
1448 vertical-align:middle; | 1471 vertical-align:middle; |
1472 } | |
1473 | |
1474 .contactGroupPanel.dragover { | |
1475 border-radius: 5px !important; | |
1476 background: none repeat scroll 0% 0% rgb(135, 179, 255) !important; | |
1477 border: 1px dashed rgb(35,79,255) !important; | |
1449 } | 1478 } |
1450 | 1479 |
1451 .toggleAssignedContacts { | 1480 .toggleAssignedContacts { |
1452 white-space: nowrap; | 1481 white-space: nowrap; |
1453 } | 1482 } |