Mercurial > libervia-web
comparison src/browser/public/libervia.css @ 654:40c72f3b7638 frontends_multi_profiles
browser_side: MainPanel is now based on a DockPanel, which allows to use less tables and also to remove some "window resized" listeners
author | souliane <souliane@mailoo.org> |
---|---|
date | Fri, 27 Feb 2015 02:39:43 +0100 |
parents | c22b47d63fe2 |
children | 4dbd99de3aaa |
comparison
equal
deleted
inserted
replaced
653:e1d067378ad3 | 654:40c72f3b7638 |
---|---|
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; |
420 } | 426 } |
421 /* Contact List */ | 427 /* Contact List */ |
422 | 428 |
423 div.contactList { | 429 div.contactList { |
424 width: 100%; | 430 width: 100%; |
425 /* We want the contact panel to not use all the available height when displayed | 431 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 } | 432 } |
434 | 433 |
435 .contactTitle { | 434 .contactTitle { |
436 color: #cf2828; | 435 color: #cf2828; |
437 font-size: 1.7em; | 436 font-size: 1.7em; |
445 /* Button used to switch contacts panel */ | 444 /* Button used to switch contacts panel */ |
446 background: none; | 445 background: none; |
447 border: 0; | 446 border: 0; |
448 padding: 0; | 447 padding: 0; |
449 font-size: large; | 448 font-size: large; |
449 margin-top: 9px; | |
450 } | 450 } |
451 | 451 |
452 .groupPanel { | 452 .groupPanel { |
453 width: 100%; | 453 width: 100%; |
454 } | 454 } |
608 .uniBoxButton { | 608 .uniBoxButton { |
609 width:30px; | 609 width:30px; |
610 height:45px; | 610 height:45px; |
611 } | 611 } |
612 | 612 |
613 .statusPanel { | 613 .presenceStatusPanel { |
614 margin: auto; | 614 margin: auto; |
615 text-align: center; | 615 text-align: center; |
616 width: 100%; | |
617 padding: 5px 0px; | 616 padding: 5px 0px; |
618 text-shadow: 0 -1px 1px rgba(255,255,255,0.25); | 617 text-shadow: 0 -1px 1px rgba(255,255,255,0.25); |
619 font-size: 1.2em; | 618 font-size: 1.2em; |
620 background-color: #eee; | 619 background-color: #eee; |
621 font-style: italic; | 620 font-style: italic; |
1130 background-color: #fff; | 1129 background-color: #fff; |
1131 } | 1130 } |
1132 | 1131 |
1133 /* Tab panel */ | 1132 /* Tab panel */ |
1134 | 1133 |
1135 .liberviaTabPanel { | |
1136 } | |
1137 | |
1138 .gwt-TabPanel { | 1134 .gwt-TabPanel { |
1139 } | 1135 } |
1140 | 1136 |
1141 .gwt-TabPanelBottom { | 1137 .gwt-TabPanelBottom { |
1142 height: 100%; | 1138 height: 100%; |
1146 font-weight: bold; | 1142 font-weight: bold; |
1147 text-decoration: none; | 1143 text-decoration: none; |
1148 border-bottom: 3px solid #a01c1c; | 1144 border-bottom: 3px solid #a01c1c; |
1149 } | 1145 } |
1150 | 1146 |
1151 .mainTabPanel .gwt-TabBar { | |
1152 z-index: 10; | |
1153 position: fixed; | |
1154 bottom: 0; | |
1155 left: 0; | |
1156 } | |
1157 | |
1158 .gwt-TabBar .gwt-TabBarFirst { | 1147 .gwt-TabBar .gwt-TabBarFirst { |
1159 height: 100%; | 1148 height: 100%; |
1160 } | 1149 } |
1161 | 1150 |
1162 .gwt-TabBar .gwt-TabBarRest { | 1151 .gwt-TabBar .gwt-TabBarRest { |
1163 } | 1152 } |
1164 | 1153 |
1165 .liberviaTabPanel .gwt-TabBar {; | 1154 .mainPanel .gwt-TabBar { |
1166 } | 1155 z-index: 10; |
1167 | 1156 } |
1168 .liberviaTabPanel .gwt-TabBar .gwt-TabBarItem { | 1157 |
1169 cursor: pointer; | 1158 .liberviaTabPanel { |
1170 margin-right: 5px; | 1159 width: 100%; |
1160 height: 100%; | |
1171 } | 1161 } |
1172 | 1162 |
1173 .liberviaTabPanel .gwt-TabBarItem div { | 1163 .liberviaTabPanel .gwt-TabBarItem div { |
1174 color: #fff; | 1164 color: #fff; |
1175 } | 1165 } |
1183 -webkit-box-shadow: 0px 1px 4px #000; | 1173 -webkit-box-shadow: 0px 1px 4px #000; |
1184 box-shadow: 0px 1px 4px #000; | 1174 box-shadow: 0px 1px 4px #000; |
1185 padding: 4px 15px 4px 15px; | 1175 padding: 4px 15px 4px 15px; |
1186 border-radius: 1em 1em 0 0; | 1176 border-radius: 1em 1em 0 0; |
1187 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); | 1177 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); |
1178 cursor: pointer; | |
1179 margin-right: 5px; | |
1188 } | 1180 } |
1189 | 1181 |
1190 .liberviaTabPanel .gwt-TabBarItem-selected { | 1182 .liberviaTabPanel .gwt-TabBarItem-selected { |
1191 color: #fff; | 1183 color: #fff; |
1192 background-color: #cf2828; | 1184 background-color: #cf2828; |
1196 -webkit-box-shadow: 0px 1px 4px #000; | 1188 -webkit-box-shadow: 0px 1px 4px #000; |
1197 box-shadow: 0px 1px 4px #000; | 1189 box-shadow: 0px 1px 4px #000; |
1198 padding: 4px 15px 4px 15px; | 1190 padding: 4px 15px 4px 15px; |
1199 border-radius: 1em 1em 0 0; | 1191 border-radius: 1em 1em 0 0; |
1200 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); | 1192 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); |
1193 cursor: default; | |
1201 } | 1194 } |
1202 | 1195 |
1203 .liberviaTabPanel div.gwt-TabBarItem:hover { | 1196 .liberviaTabPanel div.gwt-TabBarItem:hover { |
1204 color: #fff; | 1197 color: #fff; |
1205 background-color: #cf2828; | 1198 background-color: #cf2828; |
1211 padding: 4px 15px 4px 15px; | 1204 padding: 4px 15px 4px 15px; |
1212 border-radius: 1em 1em 0 0; | 1205 border-radius: 1em 1em 0 0; |
1213 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); | 1206 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); |
1214 } | 1207 } |
1215 | 1208 |
1216 .liberviaTabPanel .gwt-TabBar .gwt-TabBarItem-selected { | |
1217 cursor: default; | |
1218 } | |
1219 | |
1220 .globalLeftArea { | 1209 .globalLeftArea { |
1221 margin-top: 9px; | 1210 margin-top: 9px; |
1222 } | 1211 } |
1223 | 1212 |
1224 | 1213 |