-rw-r--r-- | frontend/gamma/css/web.css | 33 |
1 files changed, 21 insertions, 12 deletions
diff --git a/frontend/gamma/css/web.css b/frontend/gamma/css/web.css index 5d8bc20..011831a 100644 --- a/frontend/gamma/css/web.css +++ b/frontend/gamma/css/web.css | |||
@@ -1,34 +1,32 @@ | |||
1 | /* | 1 | /* |
2 | 2 | ||
3 | Copyright 2008-2011 Clipperz Srl | 3 | Copyright 2008-2013 Clipperz Srl |
4 | 4 | ||
5 | This file is part of Clipperz Community Edition. | 5 | This file is part of Clipperz, the online password manager. |
6 | Clipperz Community Edition is an online password manager. | ||
7 | For further information about its features and functionalities please | 6 | For further information about its features and functionalities please |
8 | refer to http://www.clipperz.com. | 7 | refer to http://www.clipperz.com. |
9 | 8 | ||
10 | * Clipperz Community Edition is free software: you can redistribute | 9 | * Clipperz is free software: you can redistribute it and/or modify it |
11 | it and/or modify it under the terms of the GNU Affero General Public | 10 | under the terms of the GNU Affero General Public License as published |
12 | License as published by the Free Software Foundation, either version | 11 | by the Free Software Foundation, either version 3 of the License, or |
13 | 3 of the License, or (at your option) any later version. | 12 | (at your option) any later version. |
14 | 13 | ||
15 | * Clipperz Community Edition is distributed in the hope that it will | 14 | * Clipperz is distributed in the hope that it will be useful, but |
16 | be useful, but WITHOUT ANY WARRANTY; without even the implied | 15 | WITHOUT ANY WARRANTY; without even the implied warranty of |
17 | warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. | 16 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. |
18 | See the GNU Affero General Public License for more details. | 17 | See the GNU Affero General Public License for more details. |
19 | 18 | ||
20 | * You should have received a copy of the GNU Affero General Public | 19 | * You should have received a copy of the GNU Affero General Public |
21 | License along with Clipperz Community Edition. If not, see | 20 | License along with Clipperz. If not, see http://www.gnu.org/licenses/. |
22 | <http://www.gnu.org/licenses/>. | ||
23 | 21 | ||
24 | */ | 22 | */ |
25 | 23 | ||
26 | /* | 24 | /* |
27 | 25 | ||
28 | Color list: | 26 | Color list: |
29 | - login box: | 27 | - login box: |
30 | light#ff9955 | 28 | light#ff9955 |
31 | dark#ff6622 | 29 | dark#ff6622 |
32 | - login button: | 30 | - login button: |
33 | regular#dd5500 | 31 | regular#dd5500 |
34 | hover#773311 | 32 | hover#773311 |
@@ -205,24 +203,25 @@ div.modalDialogMask.userInfoBoxMask { | |||
205 | margin: 0 auto; | 203 | margin: 0 auto; |
206 | } | 204 | } |
207 | div.tooltip { | 205 | div.tooltip { |
208 | position: absolute; | 206 | position: absolute; |
209 | z-index: 30001; | 207 | z-index: 30001; |
210 | } | 208 | } |
211 | div.tooltip div.tooltip_body { | 209 | div.tooltip div.tooltip_body { |
212 | border-radius: 8px; | 210 | border-radius: 8px; |
213 | -moz-border-radius: 8px; | 211 | -moz-border-radius: 8px; |
214 | -webkit-border-radius: 8px; | 212 | -webkit-border-radius: 8px; |
215 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555)); | 213 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555)); |
216 | background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb); | 214 | background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb); |
215 | background: linear-gradient(0deg, #555555, #bbbbbb); | ||
217 | -webkit-box-shadow: 4px 4px 10px #333333; | 216 | -webkit-box-shadow: 4px 4px 10px #333333; |
218 | -moz-box-shadow: 4px 4px 10px #333333; | 217 | -moz-box-shadow: 4px 4px 10px #333333; |
219 | box-shadow: 4px 4px 10px #333333; | 218 | box-shadow: 4px 4px 10px #333333; |
220 | border-top: 1px solid #d4d4d4; | 219 | border-top: 1px solid #d4d4d4; |
221 | border-left: 1px solid #a2a2a2; | 220 | border-left: 1px solid #a2a2a2; |
222 | border-right: 1px solid #6f6f6f; | 221 | border-right: 1px solid #6f6f6f; |
223 | border-bottom: 1px solid #3c3c3c; | 222 | border-bottom: 1px solid #3c3c3c; |
224 | } | 223 | } |
225 | div.tooltip div.tooltip_body span { | 224 | div.tooltip div.tooltip_body span { |
226 | display: block; | 225 | display: block; |
227 | padding: 10px; | 226 | padding: 10px; |
228 | font-size: 10pt; | 227 | font-size: 10pt; |
@@ -260,64 +259,68 @@ div.tooltip.RIGHT div.tooltip_arrow { | |||
260 | top: 10px; | 259 | top: 10px; |
261 | border-right: 6px solid #9c9c9c; | 260 | border-right: 6px solid #9c9c9c; |
262 | } | 261 | } |
263 | div.tooltip.RIGHT div.tooltip_body div.tooltip_text { | 262 | div.tooltip.RIGHT div.tooltip_body div.tooltip_text { |
264 | min-height: 45px; | 263 | min-height: 45px; |
265 | } | 264 | } |
266 | .button.default { | 265 | .button.default { |
267 | display: inline-block; | 266 | display: inline-block; |
268 | height: 20px; | 267 | height: 20px; |
269 | cursor: pointer; | 268 | cursor: pointer; |
270 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffa76f), to(#ff6622)); | 269 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffa76f), to(#ff6622)); |
271 | background: -moz-linear-gradient(0% 100% 90deg, #ff6622, #ffa76f); | 270 | background: -moz-linear-gradient(0% 100% 90deg, #ff6622, #ffa76f); |
271 | background: linear-gradient(0deg, #ff6622, #ffa76f); | ||
272 | border-radius: 5; | 272 | border-radius: 5; |
273 | -moz-border-radius: 5; | 273 | -moz-border-radius: 5; |
274 | -webkit-border-radius: 5; | 274 | -webkit-border-radius: 5; |
275 | border: 1px solid #ff7f46; | 275 | border: 1px solid #ff7f46; |
276 | padding-top: 4px; | 276 | padding-top: 4px; |
277 | padding-left: 15px; | 277 | padding-left: 15px; |
278 | padding-right: 15px; | 278 | padding-right: 15px; |
279 | padding-bottom: 2px; | 279 | padding-bottom: 2px; |
280 | color: white; | 280 | color: white; |
281 | font-weight: lighter; | 281 | font-weight: lighter; |
282 | text-shadow: -1px -1px 1px #ff6622, 1px 1px 1px #ffa76f; | 282 | text-shadow: -1px -1px 1px #ff6622, 1px 1px 1px #ffa76f; |
283 | text-decoration: none; | 283 | text-decoration: none; |
284 | font-weight: normal; | 284 | font-weight: normal; |
285 | } | 285 | } |
286 | .button.default:hover { | 286 | .button.default:hover { |
287 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff8e46), to(#ff6622)); | 287 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff8e46), to(#ff6622)); |
288 | background: -moz-linear-gradient(0% 100% 90deg, #ff6622, #ff8e46); | 288 | background: -moz-linear-gradient(0% 100% 90deg, #ff6622, #ff8e46); |
289 | background: linear-gradient(0deg, #ff6622, #ff8e46); | ||
289 | } | 290 | } |
290 | .button { | 291 | .button { |
291 | display: inline-block; | 292 | display: inline-block; |
292 | height: 20px; | 293 | height: 20px; |
293 | cursor: pointer; | 294 | cursor: pointer; |
294 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bfbfbf), to(#999999)); | 295 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bfbfbf), to(#999999)); |
295 | background: -moz-linear-gradient(0% 100% 90deg, #999999, #bfbfbf); | 296 | background: -moz-linear-gradient(0% 100% 90deg, #999999, #bfbfbf); |
297 | background: linear-gradient(0deg, #999999, #bfbfbf); | ||
296 | border-radius: 5; | 298 | border-radius: 5; |
297 | -moz-border-radius: 5; | 299 | -moz-border-radius: 5; |
298 | -webkit-border-radius: 5; | 300 | -webkit-border-radius: 5; |
299 | border: 1px solid #ababab; | 301 | border: 1px solid #ababab; |
300 | padding-top: 4px; | 302 | padding-top: 4px; |
301 | padding-left: 15px; | 303 | padding-left: 15px; |
302 | padding-right: 15px; | 304 | padding-right: 15px; |
303 | padding-bottom: 2px; | 305 | padding-bottom: 2px; |
304 | color: white; | 306 | color: white; |
305 | font-weight: lighter; | 307 | font-weight: lighter; |
306 | text-shadow: -1px -1px 1px #999999, 1px 1px 1px #bfbfbf; | 308 | text-shadow: -1px -1px 1px #999999, 1px 1px 1px #bfbfbf; |
307 | text-decoration: none; | 309 | text-decoration: none; |
308 | } | 310 | } |
309 | .button:hover { | 311 | .button:hover { |
310 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ababab), to(#999999)); | 312 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ababab), to(#999999)); |
311 | background: -moz-linear-gradient(0% 100% 90deg, #999999, #ababab); | 313 | background: -moz-linear-gradient(0% 100% 90deg, #999999, #ababab); |
314 | background: linear-gradient(0deg, #999999, #ababab); | ||
312 | } | 315 | } |
313 | /* | 316 | /* |
314 | 317 | ||
315 | Color list: | 318 | Color list: |
316 | - login box: | 319 | - login box: |
317 | light#ff9955 | 320 | light#ff9955 |
318 | dark#ff6622 | 321 | dark#ff6622 |
319 | - login button: | 322 | - login button: |
320 | regular#dd5500 | 323 | regular#dd5500 |
321 | hover#773311 | 324 | hover#773311 |
322 | - login translations: | 325 | - login translations: |
323 | box: #cc6622; | 326 | box: #cc6622; |
@@ -440,24 +443,25 @@ div.pageHeaderAndBody div.pageHeader div#featureTabs table tr td img { | |||
440 | } | 443 | } |
441 | div.pageHeaderAndBody div.pageHeader div#featureTabs table tr td span { | 444 | div.pageHeaderAndBody div.pageHeader div#featureTabs table tr td span { |
442 | display: block; | 445 | display: block; |
443 | padding: 5 10 5 85; | 446 | padding: 5 10 5 85; |
444 | } | 447 | } |
445 | div.pageHeaderAndBody div.pageHeader div#featureTabs canvas.featureIcon { | 448 | div.pageHeaderAndBody div.pageHeader div#featureTabs canvas.featureIcon { |
446 | width: 76px; | 449 | width: 76px; |
447 | height: 76px; | 450 | height: 76px; |
448 | display: block; | 451 | display: block; |
449 | float: left; | 452 | float: left; |
450 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffad79), to(#ff6622)); | 453 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffad79), to(#ff6622)); |
451 | background: -moz-linear-gradient(0% 100% 90deg, #ff6622, #ffad79); | 454 | background: -moz-linear-gradient(0% 100% 90deg, #ff6622, #ffad79); |
455 | background: linear-gradient(0deg, #ff6622, #ffad79); | ||
452 | border-radius: 38px; | 456 | border-radius: 38px; |
453 | -moz-border-radius: 38px; | 457 | -moz-border-radius: 38px; |
454 | -webkit-border-radius: 38px; | 458 | -webkit-border-radius: 38px; |
455 | } | 459 | } |
456 | div.pageHeaderAndBody div.pageHeader div#news { | 460 | div.pageHeaderAndBody div.pageHeader div#news { |
457 | top: -82px; | 461 | top: -82px; |
458 | left: 240px; | 462 | left: 240px; |
459 | width: 310px; | 463 | width: 310px; |
460 | height: 90px; | 464 | height: 90px; |
461 | position: absolute; | 465 | position: absolute; |
462 | background-color: #616475; | 466 | background-color: #616475; |
463 | -webkit-border-bottom-left-radius: 8px; | 467 | -webkit-border-bottom-left-radius: 8px; |
@@ -606,24 +610,25 @@ div#loginBox div.header { | |||
606 | width: 273px; | 610 | width: 273px; |
607 | background-color: #ff9b5a; | 611 | background-color: #ff9b5a; |
608 | -webkit-border-top-left-radius: 20px; | 612 | -webkit-border-top-left-radius: 20px; |
609 | -moz-border-radius-topleft: 20px; | 613 | -moz-border-radius-topleft: 20px; |
610 | border-top-left-radius: 20px; | 614 | border-top-left-radius: 20px; |
611 | -webkit-border-top-right-radius: 20px; | 615 | -webkit-border-top-right-radius: 20px; |
612 | -moz-border-radius-topright: 20px; | 616 | -moz-border-radius-topright: 20px; |
613 | border-top-right-radius: 20px; | 617 | border-top-right-radius: 20px; |
614 | } | 618 | } |
615 | div#loginBox div.body { | 619 | div#loginBox div.body { |
616 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9b5a), to(#ff6622)); | 620 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9b5a), to(#ff6622)); |
617 | background: -moz-linear-gradient(0% 100% 90deg, #ff6622, #ff9b5a); | 621 | background: -moz-linear-gradient(0% 100% 90deg, #ff6622, #ff9b5a); |
622 | background: linear-gradient(0deg, #ff6622, #ff9b5a); | ||
618 | } | 623 | } |
619 | div#loginBox div.body h4 { | 624 | div#loginBox div.body h4 { |
620 | color: #ffffff; | 625 | color: #ffffff; |
621 | font-size: 16pt; | 626 | font-size: 16pt; |
622 | font-weight: normal; | 627 | font-weight: normal; |
623 | padding-left: 20px; | 628 | padding-left: 20px; |
624 | margin: 0px; | 629 | margin: 0px; |
625 | } | 630 | } |
626 | div#loginBox div.body form.loginForm { | 631 | div#loginBox div.body form.loginForm { |
627 | padding: 5px 20px 0px; | 632 | padding: 5px 20px 0px; |
628 | margin-bottom: 0px; | 633 | margin-bottom: 0px; |
629 | } | 634 | } |
@@ -883,24 +888,25 @@ div.modalDialogMask.userInfoBoxMask { | |||
883 | margin: 0 auto; | 888 | margin: 0 auto; |
884 | } | 889 | } |
885 | div.userInfoBox { | 890 | div.userInfoBox { |
886 | position: absolute; | 891 | position: absolute; |
887 | width: 160px; | 892 | width: 160px; |
888 | height: 120px; | 893 | height: 120px; |
889 | top: 100px; | 894 | top: 100px; |
890 | left: 15px; | 895 | left: 15px; |
891 | color: white; | 896 | color: white; |
892 | background-color: #ff9955; | 897 | background-color: #ff9955; |
893 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9a56), to(#ff6723)); | 898 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9a56), to(#ff6723)); |
894 | background: -moz-linear-gradient(0% 100% 90deg, #ff6723, #ff9a56); | 899 | background: -moz-linear-gradient(0% 100% 90deg, #ff6723, #ff9a56); |
900 | background: linear-gradient(0deg, #ff6723, #ff9a56); | ||
895 | border-radius: 10px; | 901 | border-radius: 10px; |
896 | -moz-border-radius: 10px; | 902 | -moz-border-radius: 10px; |
897 | -webkit-border-radius: 10px; | 903 | -webkit-border-radius: 10px; |
898 | -webkit-box-shadow: 2px 2px 9px #333333; | 904 | -webkit-box-shadow: 2px 2px 9px #333333; |
899 | -moz-box-shadow: 2px 2px 9px #333333; | 905 | -moz-box-shadow: 2px 2px 9px #333333; |
900 | box-shadow: 2px 2px 9px #333333; | 906 | box-shadow: 2px 2px 9px #333333; |
901 | } | 907 | } |
902 | div.userInfoBox.locked { | 908 | div.userInfoBox.locked { |
903 | z-index: 19001; | 909 | z-index: 19001; |
904 | } | 910 | } |
905 | div.userInfoBox.locked div.header a.lockButton { | 911 | div.userInfoBox.locked div.header a.lockButton { |
906 | background: url(./images/old/lock/locked.png) no-repeat -5px -2px; | 912 | background: url(./images/old/lock/locked.png) no-repeat -5px -2px; |
@@ -1264,40 +1270,42 @@ div.subPanelContent ul { | |||
1264 | div.subPanelContent ul li { | 1270 | div.subPanelContent ul li { |
1265 | display: none; | 1271 | display: none; |
1266 | } | 1272 | } |
1267 | div.subPanelContent ul li.selected { | 1273 | div.subPanelContent ul li.selected { |
1268 | display: block; | 1274 | display: block; |
1269 | } | 1275 | } |
1270 | .downloadOfflineCopy { | 1276 | .downloadOfflineCopy { |
1271 | display: inline-block; | 1277 | display: inline-block; |
1272 | height: 20px; | 1278 | height: 20px; |
1273 | cursor: pointer; | 1279 | cursor: pointer; |
1274 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#59bc4c), to(#448833)); | 1280 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#59bc4c), to(#448833)); |
1275 | background: -moz-linear-gradient(0% 100% 90deg, #448833, #59bc4c); | 1281 | background: -moz-linear-gradient(0% 100% 90deg, #448833, #59bc4c); |
1282 | background: linear-gradient(0deg, #448833, #59bc4c); | ||
1276 | border-radius: 5; | 1283 | border-radius: 5; |
1277 | -moz-border-radius: 5; | 1284 | -moz-border-radius: 5; |
1278 | -webkit-border-radius: 5; | 1285 | -webkit-border-radius: 5; |
1279 | border: 1px solid #51a23d; | 1286 | border: 1px solid #51a23d; |
1280 | padding-top: 4px; | 1287 | padding-top: 4px; |
1281 | padding-left: 15px; | 1288 | padding-left: 15px; |
1282 | padding-right: 15px; | 1289 | padding-right: 15px; |
1283 | padding-bottom: 2px; | 1290 | padding-bottom: 2px; |
1284 | color: white; | 1291 | color: white; |
1285 | font-weight: lighter; | 1292 | font-weight: lighter; |
1286 | text-shadow: -1px -1px 1px #448833, 1px 1px 1px #59bc4c; | 1293 | text-shadow: -1px -1px 1px #448833, 1px 1px 1px #59bc4c; |
1287 | text-decoration: none; | 1294 | text-decoration: none; |
1288 | } | 1295 | } |
1289 | .downloadOfflineCopy:hover { | 1296 | .downloadOfflineCopy:hover { |
1290 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#49a23d), to(#448833)); | 1297 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#49a23d), to(#448833)); |
1291 | background: -moz-linear-gradient(0% 100% 90deg, #448833, #49a23d); | 1298 | background: -moz-linear-gradient(0% 100% 90deg, #448833, #49a23d); |
1299 | background: linear-gradient(0deg, #448833, #49a23d); | ||
1292 | } | 1300 | } |
1293 | div.SimpleMessagePanel { | 1301 | div.SimpleMessagePanel { |
1294 | position: relative; | 1302 | position: relative; |
1295 | left: -225px; | 1303 | left: -225px; |
1296 | top: -70px; | 1304 | top: -70px; |
1297 | width: 450px; | 1305 | width: 450px; |
1298 | height: 140px; | 1306 | height: 140px; |
1299 | } | 1307 | } |
1300 | div.SimpleMessagePanel div.body { | 1308 | div.SimpleMessagePanel div.body { |
1301 | padding: 20px; | 1309 | padding: 20px; |
1302 | padding-bottom: 15px; | 1310 | padding-bottom: 15px; |
1303 | background-color: #f1f1ef; | 1311 | background-color: #f1f1ef; |
@@ -1313,24 +1321,25 @@ div.SimpleMessagePanel div.body h3 { | |||
1313 | font-weight: normal; | 1321 | font-weight: normal; |
1314 | margin: 0px; | 1322 | margin: 0px; |
1315 | padding-top: 4px; | 1323 | padding-top: 4px; |
1316 | color: #787872; | 1324 | color: #787872; |
1317 | } | 1325 | } |
1318 | div.SimpleMessagePanel div.body div.img { | 1326 | div.SimpleMessagePanel div.body div.img { |
1319 | width: 50px; | 1327 | width: 50px; |
1320 | height: 50px; | 1328 | height: 50px; |
1321 | float: left; | 1329 | float: left; |
1322 | margin-right: 15px; | 1330 | margin-right: 15px; |
1323 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9b5a), to(#ff6622)); | 1331 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9b5a), to(#ff6622)); |
1324 | background: -moz-linear-gradient(0% 100% 90deg, #ff6622, #ff9b5a); | 1332 | background: -moz-linear-gradient(0% 100% 90deg, #ff6622, #ff9b5a); |
1333 | background: linear-gradient(0deg, #ff6622, #ff9b5a); | ||
1325 | border-radius: 25px; | 1334 | border-radius: 25px; |
1326 | -moz-border-radius: 25px; | 1335 | -moz-border-radius: 25px; |
1327 | -webkit-border-radius: 25px; | 1336 | -webkit-border-radius: 25px; |
1328 | } | 1337 | } |
1329 | div.SimpleMessagePanel div.body div.img canvas { | 1338 | div.SimpleMessagePanel div.body div.img canvas { |
1330 | width: 50px; | 1339 | width: 50px; |
1331 | height: 50px; | 1340 | height: 50px; |
1332 | } | 1341 | } |
1333 | div.SimpleMessagePanel div.body p { | 1342 | div.SimpleMessagePanel div.body p { |
1334 | margin: 0; | 1343 | margin: 0; |
1335 | font-size: 10pt; | 1344 | font-size: 10pt; |
1336 | font-weight: normal; | 1345 | font-weight: normal; |