Mercurial > libervia-web

comparison public/libervia.css @ 75:4b4c0b9e2533

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
browser side: CSS: redesigned dialog boxes, and contacts
author Adrien Vigneron <adrienvigneron@mailoo.org>
date Sat, 18 Jun 2011 15:13:19 +0200
parents 3df602cf700a
children 8f097c1551f3
comparison
equal deleted inserted replaced
74:3df602cf700a 75:4b4c0b9e2533
112 height: 28px; 112 height: 28px;
113 margin: 0; 113 margin: 0;
114 font: normal 0.8em/1.4em Arial, Helvetica, sans-serif; 114 font: normal 0.8em/1.4em Arial, Helvetica, sans-serif;
115 padding: 5px 5px 0 5px; 115 padding: 5px 5px 0 5px;
116 line-height: 100%; 116 line-height: 100%;
117 box-shadow:0px 1px 4px #000 117 box-shadow: 0px 1px 4px #000;
118 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); 118 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
119 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); 119 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
120 border: 1px solid #ddd; 120 border: 1px solid #ddd;
121 border-radius: 0 0 1em 1em; 121 border-radius: 0 0 1em 1em;
122 -webkit-border-radius: 0 0 1em 1em; 122 -webkit-border-radius: 0 0 1em 1em;
133 font-weight: bold; 133 font-weight: bold;
134 height: 100%; 134 height: 100%;
135 color: #e7e5e5; 135 color: #e7e5e5;
136 padding: 3px 15px; 136 padding: 3px 15px;
137 /*display: block;*/ 137 /*display: block;*/
138 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
139 border-radius: 1em; 138 border-radius: 1em;
140 -webkit-border-radius: 1em; 139 -webkit-border-radius: 1em;
141 -moz-border-radius: 1em; 140 -moz-border-radius: 1em;
141 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
142 -webkit-transition: color 0.2s linear; 142 -webkit-transition: color 0.2s linear;
143 -moz-transition: color 0.2s linear; 143 -moz-transition: color 0.2s linear;
144 -o-transition: color 0.2s linear; 144 -o-transition: color 0.2s linear;
145 } 145 }
146
147 146
148 .gwt-MenuBar-horizontal .gwt-MenuItem-selected { 147 .gwt-MenuBar-horizontal .gwt-MenuItem-selected {
149 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eee’, endColorstr=’#aaa′); 148 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eee’, endColorstr=’#aaa′);
150 background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa)); 149 background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa));
151 background: -moz-linear-gradient(top, #eee, #aaa); 150 background: -moz-linear-gradient(top, #eee, #aaa);
213 -o-transition: color 0.2s linear; 212 -o-transition: color 0.2s linear;
214 cursor: pointer; 213 cursor: pointer;
215 } 214 }
216 215
217 .gwt-MenuBar tr:last-child td { 216 .gwt-MenuBar tr:last-child td {
218 border-radius: 0 0 9px 9px; 217 border-radius: 0 0 9px 9px !important;
219 -webkit-border-radius: 0 0 9px 9px; 218 -webkit-border-radius: 0 0 9px 9px !important;
220 -moz-border-radius: 0 0 9px 9px; 219 -moz-border-radius: 0 0 9px 9px !important;
221 } 220 }
222 221
223 .menuLastPopup div tr:first-child td{ 222 .menuLastPopup div tr:first-child td{
224 border-radius: 0 9px 0 0 !important; 223 border-radius: 0 9px 0 0 !important;
225 -webkit-border-radius: 0 9px 0 0 !important; 224 -webkit-border-radius: 0 9px 0 0 !important;
236 width: 80%; 235 width: 80%;
237 border: 1px solid #87B3FF; 236 border: 1px solid #87B3FF;
238 margin-top: 20px; 237 margin-top: 20px;
239 } 238 }
240 .gwt-DialogBox { 239 .gwt-DialogBox {
241 border: 2px outset; 240 padding: 10px;
242 background-color: white; 241 font: normal 0.8em/1.4em Arial, Helvetica, sans-serif;
242 border: 1px solid #aaa;
243 background-color: #fff;
244 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff’, endColorstr=’#ccc’);
245 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
246 background: -moz-linear-gradient(top, #fff, #ccc);
247 background-image: -o-linear-gradient(#fff,#ccc);
248 border-radius: 9px;
249 -webkit-border-radius: 9px;
250 -moz-border-radius: 9px;
251 box-shadow: 0px 1px 4px #000;
252 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
253 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
243 } 254 }
244 255
245 .gwt-DialogBox .Caption { 256 .gwt-DialogBox .Caption {
246 background-color: #C3D9FF; 257 height: 20px;
258 font-size: 1.3em !important;
259 background-color: #cf2828;
260 background: #cf2828 !important;
261 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828’, endColorstr=’#b01e1e’);
262 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#b01e1e)) !important;
263 background: -moz-linear-gradient(top, #cf2828, #b01e1e) !important;
264 background-image: -o-linear-gradient(#cf2828,#b01e1e);
265 color: #fff;
247 padding: 3px; 266 padding: 3px;
248 margin: 2px; 267 margin: -10px;
268 margin-bottom: 5px;
249 font-weight: bold; 269 font-weight: bold;
250 cursor: default; 270 cursor: default;
251 text-align: center; 271 text-align: center;
272 border-radius: 7px 7px 0 0;
273 -webkit-border-radius: 7px 7px 0 0;
274 -moz-border-radius: 7px 7px 0 0;
252 } 275 }
253 276
254 .gwt-ListBox { 277 .gwt-ListBox {
255 width: 100%; 278 width: 100%;
279 background-color: #fff;
280 padding: 3px;
281 margin: 5px 0 5px 0;
282 border: 1px solid #aaa;
283
256 } 284 }
257 285
258 /* Custom Dialogs */ 286 /* Custom Dialogs */
259 287
260 .formWarning { /* used when a form is not valid and must be corrected before submission */ 288 .formWarning { /* used when a form is not valid and must be corrected before submission */
281 font-weight: bold; 309 font-weight: bold;
282 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); 310 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
283 font: normal 1.2em/1.4em Arial, Helvetica, sans-serif; 311 font: normal 1.2em/1.4em Arial, Helvetica, sans-serif;
284 text-indent: 15px; 312 text-indent: 15px;
285 width: 200px; 313 width: 200px;
286 height: 30px; 314 height: 30px;
287 border-right: 1px solid #ddd; 315 border-radius: 10px 10px 0 0;
288 border-radius: 10px 0 0 0; 316 -webkit-border-radius: 10px 10px 0 0;
289 -webkit-border-radius: 10px 0 0 0; 317 -moz-border-radius: 10px 10px 0 0;
290 -moz-border-radius: 10px 0 0 0;
291 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828&#888;, endColorstr=’#b01e1e’); 318 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828&#888;, endColorstr=’#b01e1e’);
292 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#b01e1e)); 319 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#b01e1e));
293 background: -moz-linear-gradient(top, #cf2828, #b01e1e) !important; 320 background: -moz-linear-gradient(top, #cf2828, #b01e1e) !important;
294 background-image: -o-linear-gradient(#cf2828,#b01e1e); 321 background-image: -o-linear-gradient(#cf2828,#b01e1e);
295 } 322 }
300 border: 1px solid #fff; 327 border: 1px solid #fff;
301 background-color: #fff; 328 background-color: #fff;
302 } 329 }
303 330
304 .group { 331 .group {
305 padding: 2px 20px; 332 padding: 2px 15px;
306 margin: 0.2em 0 0.2em 1em; 333 margin: 0.2em 0 0.2em 5px;
307 display: inline-block; 334 display: inline-block;
308 text-decoration: none; 335 text-decoration: none;
309 font-weight: bold; 336 font-weight: bold;
310 color: #e7e5e5; 337 color: #e7e5e5;
311 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); 338 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
312 -webkit-transition: color 0.2s linear;
313 -moz-transition: color 0.2s linear;
314 -o-transition: color 0.2s linear;
315 border-radius: 1em; 339 border-radius: 1em;
316 -webkit-border-radius: 1em; 340 -webkit-border-radius: 1em;
317 -moz-border-radius: 1em; 341 -moz-border-radius: 1em;
318 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eee’, endColorstr=’#aaa&#888;); 342 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eee’, endColorstr=’#aaa&#888;);
319 background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa)); 343 background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa));
320 background: -moz-linear-gradient(top, #eee, #aaa); 344 background: -moz-linear-gradient(top, #eee, #aaa);
321 background-image: -o-linear-gradient(#eee,#aaa); 345 background-image: -o-linear-gradient(#eee,#aaa);
322 color: #444; 346 color: #444;
323 border-top: solid 1px #fff;
324
325 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); 347 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
326 } 348 }
327 349
328 div.group:hover { 350 div.group:hover {
329 color: #fff; 351 color: #fff;
330 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); 352 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
331 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828&#888;, endColorstr=’#981a1a’); 353 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828&#888;, endColorstr=’#981a1a’);
332 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)); 354 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a));
333 background: -moz-linear-gradient(top, #cf2828, #981a1a); 355 background: -moz-linear-gradient(top, #cf2828, #981a1a);
334 background-image: -o-linear-gradient(#cf2828,#981a1a); 356 background-image: -o-linear-gradient(#cf2828,#981a1a);
357 -webkit-transition: color 0.1s linear;
358 -moz-transition: color 0.1s linear;
359 -o-transition: color 0.1s linear;
335 } 360 }
336 .contact { 361 .contact {
337 font-size: small; 362 font-family: Arial, Helvetica, sans-serif;
363 font-size: 0.8em;
364 margin-top: 3px;
365 padding: 3px 10px 3px 10px;
338 } 366 }
339 367
340 .contactConnected { 368 .contactConnected {
341 color: blue; 369 color: #3c7e0c;
370 font-weight: bold;
342 } 371 }
343 372
344 .selected { 373 .selected {
345 background-color: yellow; 374 color: #fff;
375 background-color: #cf2828;
376 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828&#888;, endColorstr=’#981a1a’);
377 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a));
378 background: -moz-linear-gradient(top, #cf2828, #981a1a);
379 background-image: -o-linear-gradient(#cf2828,#981a1a);
380 border-radius: 1em;
381 -webkit-border-radius: 1em;
382 -moz-border-radius: 1em;
346 } 383 }
347 384
348 /* UniBox & Status */ 385 /* UniBox & Status */
349 386
350 .uniBoxPanel { 387 .uniBoxPanel {
579 } 616 }
580 617
581 /* Drag and drop */ 618 /* Drag and drop */
582 619
583 .dragover { 620 .dragover {
584 background: #8f8; 621 background: #cf2828;
622 border-radius: 1em;
623 -webkit-border-radius: 1em;
624 -moz-border-radius: 1em;
585 } 625 }
586 626
587 /* Warning message */ 627 /* Warning message */
588 628
589 .warningPopup { 629 .warningPopup {