author | Giulio Cesare Solaroli <giulio.cesare@clipperz.com> | 2013-05-13 13:52:10 (UTC) |
---|---|---|
committer | Giulio Cesare Solaroli <giulio.cesare@clipperz.com> | 2013-05-13 13:52:10 (UTC) |
commit | ff35024f8506d7f6a2caddc3e20f062a638216c6 (patch) (unidiff) | |
tree | 5025a4d6aca2d826c7b7876e3e233b192e5edb01 /frontend/gamma/css/web.css | |
parent | 77c90371a3055d0ad61d48f22207585948c591bf (diff) | |
download | clipperz-ff35024f8506d7f6a2caddc3e20f062a638216c6.zip clipperz-ff35024f8506d7f6a2caddc3e20f062a638216c6.tar.gz clipperz-ff35024f8506d7f6a2caddc3e20f062a638216c6.tar.bz2 |
Upated links to web site;
added stub for Account Info data.
Updated the links to the main website to match the new content/structure.
The new Account Info is now completely static; will become dynamic as soon as the backend infrastructure will be in place.
-rw-r--r-- | frontend/gamma/css/web.css | 56 |
1 files changed, 53 insertions, 3 deletions
diff --git a/frontend/gamma/css/web.css b/frontend/gamma/css/web.css index 011831a..7d1745b 100644 --- a/frontend/gamma/css/web.css +++ b/frontend/gamma/css/web.css | |||
@@ -797,277 +797,327 @@ div.activeFeatures div.keepTogether div { | |||
797 | display: inline-block; | 797 | display: inline-block; |
798 | padding-right: 15px; | 798 | padding-right: 15px; |
799 | } | 799 | } |
800 | div.activeFeatures div.keepTogether canvas { | 800 | div.activeFeatures div.keepTogether canvas { |
801 | width: 46px; | 801 | width: 46px; |
802 | height: 46px; | 802 | height: 46px; |
803 | vertical-align: bottom; | 803 | vertical-align: bottom; |
804 | } | 804 | } |
805 | div.activeFeatures div.createAccountLink { | 805 | div.activeFeatures div.createAccountLink { |
806 | display: inline-block; | 806 | display: inline-block; |
807 | width: 282; | 807 | width: 282; |
808 | height: 65px; | 808 | height: 65px; |
809 | background-image: url(./images/old/home/register.png); | 809 | background-image: url(./images/old/home/register.png); |
810 | margin-right: 20px; | 810 | margin-right: 20px; |
811 | } | 811 | } |
812 | div.activeFeatures div.createAccountLink a.createAccountLink { | 812 | div.activeFeatures div.createAccountLink a.createAccountLink { |
813 | position: relative; | 813 | position: relative; |
814 | top: -92px; | 814 | top: -92px; |
815 | left: 5px; | 815 | left: 5px; |
816 | } | 816 | } |
817 | div.activeFeatures div.createAccountLink a.createAccountLink span.payoff { | 817 | div.activeFeatures div.createAccountLink a.createAccountLink span.payoff { |
818 | margin-top: 23px; | 818 | margin-top: 23px; |
819 | margin-left: 40px; | 819 | margin-left: 40px; |
820 | font-size: 17pt; | 820 | font-size: 17pt; |
821 | color: #64626c; | 821 | color: #64626c; |
822 | } | 822 | } |
823 | div.activeFeatures div.createAccountLink a.createAccountLink span.link { | 823 | div.activeFeatures div.createAccountLink a.createAccountLink span.link { |
824 | padding-left: 40px; | 824 | padding-left: 40px; |
825 | padding-right: 50px; | 825 | padding-right: 50px; |
826 | padding-bottom: 10px; | 826 | padding-bottom: 10px; |
827 | font-size: 12pt; | 827 | font-size: 12pt; |
828 | } | 828 | } |
829 | div.activeFeatures div.createAccountLink:hover { | 829 | div.activeFeatures div.createAccountLink:hover { |
830 | background-image: url(./images/old/home/register_selected.png); | 830 | background-image: url(./images/old/home/register_selected.png); |
831 | } | 831 | } |
832 | div.activeFeatures div.createAccountLink:hover a.createAccountLink span.payoff { | 832 | div.activeFeatures div.createAccountLink:hover a.createAccountLink span.payoff { |
833 | color: #54535a; | 833 | color: #54535a; |
834 | } | 834 | } |
835 | div.activeFeatures div.createAccountLink:hover a.createAccountLink span.link { | 835 | div.activeFeatures div.createAccountLink:hover a.createAccountLink span.link { |
836 | color: white; | 836 | color: white; |
837 | } | 837 | } |
838 | div.activeFeatures div.createAccountLink canvas { | 838 | div.activeFeatures div.createAccountLink canvas { |
839 | width: 282px; | 839 | width: 282px; |
840 | height: 93px; | 840 | height: 93px; |
841 | } | 841 | } |
842 | /* | 842 | /* |
843 | 843 | ||
844 | Color list: | 844 | Color list: |
845 | - login box: | 845 | - login box: |
846 | light#ff9955 | 846 | light#ff9955 |
847 | dark#ff6622 | 847 | dark#ff6622 |
848 | - login button: | 848 | - login button: |
849 | regular#dd5500 | 849 | regular#dd5500 |
850 | hover#773311 | 850 | hover#773311 |
851 | - login translations: | 851 | - login translations: |
852 | box: #cc6622; | 852 | box: #cc6622; |
853 | not-selected: | 853 | not-selected: |
854 | color: #ddaa99 | 854 | color: #ddaa99 |
855 | background:#994422 | 855 | background:#994422 |
856 | selected: #772211; | 856 | selected: #772211; |
857 | */ | 857 | */ |
858 | html { | 858 | html { |
859 | height: 100%; | 859 | height: 100%; |
860 | } | 860 | } |
861 | body { | 861 | body { |
862 | font-family: Helvetica-Neue, Helvetica, Arial, Geneva, sans-serif; | 862 | font-family: Helvetica-Neue, Helvetica, Arial, Geneva, sans-serif; |
863 | margin: 0px; | 863 | margin: 0px; |
864 | } | 864 | } |
865 | div.modalDialogMask.userInfoBoxMask { | 865 | div.modalDialogMask.userInfoBoxMask { |
866 | -moz-opacity: 0.0; | 866 | -moz-opacity: 0.0; |
867 | opacity: .0; | 867 | opacity: .0; |
868 | filter: alpha(opacity=0); | 868 | filter: alpha(opacity=0); |
869 | z-index: 19000; | 869 | z-index: 19000; |
870 | } | 870 | } |
871 | .reset-margin { | 871 | .reset-margin { |
872 | margin: 0px; | 872 | margin: 0px; |
873 | padding: 0px; | 873 | padding: 0px; |
874 | border: 0px; | 874 | border: 0px; |
875 | } | 875 | } |
876 | .clear { | 876 | .clear { |
877 | clear: both; | 877 | clear: both; |
878 | } | 878 | } |
879 | .hidden_none { | 879 | .hidden_none { |
880 | display: none; | 880 | display: none; |
881 | visibility: hidden; | 881 | visibility: hidden; |
882 | } | 882 | } |
883 | .keepTogether { | 883 | .keepTogether { |
884 | display: inline-block; | 884 | display: inline-block; |
885 | white-space: nowrap; | 885 | white-space: nowrap; |
886 | } | 886 | } |
887 | #mainDiv { | 887 | #mainDiv { |
888 | margin: 0 auto; | 888 | margin: 0 auto; |
889 | } | 889 | } |
890 | div.userInfoBox { | 890 | div.userInfoBox { |
891 | position: absolute; | 891 | position: absolute; |
892 | width: 160px; | 892 | width: 160px; |
893 | height: 120px; | 893 | height: 200px; |
894 | top: 100px; | 894 | top: 100px; |
895 | left: 15px; | 895 | left: 15px; |
896 | color: white; | 896 | color: white; |
897 | background-color: #ff9955; | 897 | background-color: #ff9955; |
898 | 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)); |
899 | 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); | 900 | background: linear-gradient(0deg, #ff6723, #ff9a56); |
901 | border-radius: 10px; | 901 | border-radius: 10px; |
902 | -moz-border-radius: 10px; | 902 | -moz-border-radius: 10px; |
903 | -webkit-border-radius: 10px; | 903 | -webkit-border-radius: 10px; |
904 | -webkit-box-shadow: 2px 2px 9px #333333; | 904 | -webkit-box-shadow: 2px 2px 9px #333333; |
905 | -moz-box-shadow: 2px 2px 9px #333333; | 905 | -moz-box-shadow: 2px 2px 9px #333333; |
906 | box-shadow: 2px 2px 9px #333333; | 906 | box-shadow: 2px 2px 9px #333333; |
907 | } | 907 | } |
908 | div.userInfoBox.locked { | 908 | div.userInfoBox.locked { |
909 | z-index: 19001; | 909 | z-index: 19001; |
910 | } | 910 | } |
911 | div.userInfoBox.locked div.header a.lockButton { | 911 | div.userInfoBox.locked div.header a.lockButton { |
912 | background: url(./images/old/lock/locked.png) no-repeat -5px -2px; | 912 | background: url(./images/old/lock/locked.png) no-repeat -5px -2px; |
913 | } | 913 | } |
914 | div.userInfoBox.locked div.header a.lockButton:hover { | 914 | div.userInfoBox.locked div.header a.lockButton:hover { |
915 | background: url(./images/old/lock/locked_hover.png) no-repeat -5px -2px; | 915 | background: url(./images/old/lock/locked_hover.png) no-repeat -5px -2px; |
916 | } | 916 | } |
917 | div.userInfoBox.locked div.body a { | 917 | div.userInfoBox.locked div.body a { |
918 | display: none; | 918 | display: none; |
919 | } | 919 | } |
920 | div.userInfoBox div.header { | 920 | div.userInfoBox div.header { |
921 | height: 30px; | 921 | height: 30px; |
922 | } | 922 | } |
923 | div.userInfoBox div.header h1 { | 923 | div.userInfoBox div.header h1 { |
924 | font-size: 8pt; | 924 | font-size: 8pt; |
925 | font-weight: normal; | 925 | font-weight: normal; |
926 | margin: 0px; | 926 | margin: 0px; |
927 | padding-top: 12px; | 927 | padding-top: 12px; |
928 | padding-left: 12px; | 928 | padding-left: 12px; |
929 | } | 929 | } |
930 | div.userInfoBox div.header a.lockButton { | 930 | div.userInfoBox div.header a.lockButton { |
931 | position: absolute; | 931 | position: absolute; |
932 | top: 8px; | 932 | top: 8px; |
933 | right: 12px; | 933 | right: 12px; |
934 | display: block; | 934 | display: block; |
935 | width: 15px; | 935 | width: 15px; |
936 | height: 20px; | 936 | height: 20px; |
937 | text-decoration: none; | 937 | text-decoration: none; |
938 | background: url(./images/old/lock/unlocked.png) no-repeat -5px -2px; | 938 | background: url(./images/old/lock/unlocked.png) no-repeat -5px -2px; |
939 | } | 939 | } |
940 | div.userInfoBox div.header a.lockButton:hover { | 940 | div.userInfoBox div.header a.lockButton:hover { |
941 | background: url(./images/old/lock/unlocked_hover.png) no-repeat -5px -2px; | 941 | background: url(./images/old/lock/unlocked_hover.png) no-repeat -5px -2px; |
942 | } | 942 | } |
943 | div.userInfoBox div.body { | 943 | div.userInfoBox div.body { |
944 | padding: 0px 12px; | 944 | padding: 0px 12px; |
945 | } | 945 | } |
946 | div.userInfoBox div.body h3 { | 946 | div.userInfoBox div.body h3 { |
947 | font-size: 11pt; | 947 | font-size: 11pt; |
948 | font-weight: bold; | 948 | font-weight: bold; |
949 | margin: 0px; | 949 | margin: 0px; |
950 | } | 950 | } |
951 | div.userInfoBox div.body ul { | 951 | div.userInfoBox div.body ul { |
952 | font-size: 8pt; | 952 | font-size: 8pt; |
953 | padding: 0px; | 953 | padding: 0px; |
954 | margin: 4px 0px; | 954 | margin: 4px 0px; |
955 | list-style-position: inside; | 955 | list-style-position: inside; |
956 | } | 956 | } |
957 | div.userInfoBox div.body ul li span.number { | 957 | div.userInfoBox div.body ul li span.number { |
958 | font-weight: bold; | 958 | font-weight: bold; |
959 | padding-right: 3px; | 959 | padding-right: 3px; |
960 | } | 960 | } |
961 | div.userInfoBox div.body div.accountInfo { | ||
962 | margin-top: 6px; | ||
963 | border-top: 1px solid white; | ||
964 | border-color: #f4aa84; | ||
965 | } | ||
966 | div.userInfoBox div.body div.accountInfo h5 { | ||
967 | margin: 0px; | ||
968 | padding-top: 8px; | ||
969 | padding-bottom: 8px; | ||
970 | font-size: 8pt; | ||
971 | font-weight: normal; | ||
972 | } | ||
973 | div.userInfoBox div.body div.accountInfo span.label { | ||
974 | font-size: 9pt; | ||
975 | font-weight: normal; | ||
976 | padding-right: 4px; | ||
977 | display: inline-block; | ||
978 | width: 45px; | ||
979 | } | ||
980 | div.userInfoBox div.body div.accountInfo span.label:after { | ||
981 | content: ":"; | ||
982 | } | ||
983 | div.userInfoBox div.body div.accountInfo span.status { | ||
984 | font-size: 10pt; | ||
985 | } | ||
986 | div.userInfoBox div.body div.accountInfo span.expriation { | ||
987 | font-size: 9pt; | ||
988 | } | ||
989 | div.userInfoBox div.body div.accountInfo div.payButton { | ||
990 | float: right; | ||
991 | padding-top: 6px; | ||
992 | text-align: right; | ||
993 | } | ||
994 | div.userInfoBox div.body div.accountInfo div.payButton a { | ||
995 | border: 0px; | ||
996 | margin-top: 0px; | ||
997 | padding: 0px; | ||
998 | color: white; | ||
999 | display: inline-block; | ||
1000 | padding: 2px 5px 2px 5px; | ||
1001 | border-radius: 4px; | ||
1002 | -moz-border-radius: 4px; | ||
1003 | -webkit-border-radius: 4px; | ||
1004 | font-size: 9pt; | ||
1005 | font-weight: normal; | ||
1006 | background-color: #d15a22; | ||
1007 | } | ||
1008 | div.userInfoBox div.body div.accountInfo div.payButton a:hover { | ||
1009 | background-color: #8c3b15; | ||
1010 | } | ||
961 | div.userInfoBox div.body a { | 1011 | div.userInfoBox div.body a { |
962 | display: block; | 1012 | display: block; |
963 | margin-top: 8px; | 1013 | margin-top: 4px; |
964 | border-top: 1px solid white; | 1014 | border-top: 1px solid white; |
965 | padding-top: 6px; | 1015 | padding-top: 6px; |
966 | font-size: 10pt; | 1016 | font-size: 10pt; |
967 | font-weight: bold; | 1017 | font-weight: bold; |
968 | color: #d15a22; | 1018 | color: #d15a22; |
969 | border-color: #fe9a5f; | 1019 | border-color: #fe9a5f; |
970 | text-decoration: none; | 1020 | text-decoration: none; |
971 | } | 1021 | } |
972 | div.userInfoBox div.body a:hover { | 1022 | div.userInfoBox div.body a:hover { |
973 | color: #8c3b15; | 1023 | color: #8c3b15; |
974 | } | 1024 | } |
975 | div.sidePanels { | 1025 | div.sidePanels { |
976 | float: left; | 1026 | float: left; |
977 | margin-top: 106px; | 1027 | margin-top: 186px; |
978 | margin-left: 20px; | 1028 | margin-left: 20px; |
979 | width: 160px; | 1029 | width: 160px; |
980 | } | 1030 | } |
981 | div.sidePanels div.tabSidePanel { | 1031 | div.sidePanels div.tabSidePanel { |
982 | margin-right: -10px; | 1032 | margin-right: -10px; |
983 | } | 1033 | } |
984 | div.sidePanels div.tabSidePanel ul { | 1034 | div.sidePanels div.tabSidePanel ul { |
985 | margin: 0px; | 1035 | margin: 0px; |
986 | padding-left: 0px; | 1036 | padding-left: 0px; |
987 | list-style-type: none; | 1037 | list-style-type: none; |
988 | color: #f78b46; | 1038 | color: #f78b46; |
989 | } | 1039 | } |
990 | div.sidePanels div.tabSidePanel ul.mainTabs { | 1040 | div.sidePanels div.tabSidePanel ul.mainTabs { |
991 | margin: 0px; | 1041 | margin: 0px; |
992 | } | 1042 | } |
993 | div.sidePanels div.tabSidePanel ul.mainTabs li a { | 1043 | div.sidePanels div.tabSidePanel ul.mainTabs li a { |
994 | display: block; | 1044 | display: block; |
995 | line-height: 30px; | 1045 | line-height: 30px; |
996 | height: 43px; | 1046 | height: 43px; |
997 | padding-left: 40px; | 1047 | padding-left: 40px; |
998 | color: #ff6621; | 1048 | color: #ff6621; |
999 | margin: 0px; | 1049 | margin: 0px; |
1000 | font-weight: normal; | 1050 | font-weight: normal; |
1001 | font-size: 13pt; | 1051 | font-size: 13pt; |
1002 | text-decoration: none; | 1052 | text-decoration: none; |
1003 | } | 1053 | } |
1004 | div.sidePanels div.tabSidePanel ul.mainTabs li div.selectionHighlighter { | 1054 | div.sidePanels div.tabSidePanel ul.mainTabs li div.selectionHighlighter { |
1005 | display: none; | 1055 | display: none; |
1006 | } | 1056 | } |
1007 | div.sidePanels div.tabSidePanel ul.mainTabs li div.selectionHighlighter a.add { | 1057 | div.sidePanels div.tabSidePanel ul.mainTabs li div.selectionHighlighter a.add { |
1008 | font-size: 14pt; | 1058 | font-size: 14pt; |
1009 | font-weight: bold; | 1059 | font-weight: bold; |
1010 | position: relative; | 1060 | position: relative; |
1011 | top: -34px; | 1061 | top: -34px; |
1012 | right: 16px; | 1062 | right: 16px; |
1013 | background: none; | 1063 | background: none; |
1014 | color: #c0531b; | 1064 | color: #c0531b; |
1015 | padding-left: 15px; | 1065 | padding-left: 15px; |
1016 | } | 1066 | } |
1017 | div.sidePanels div.tabSidePanel ul.mainTabs li div.selectionHighlighter a.add:hover { | 1067 | div.sidePanels div.tabSidePanel ul.mainTabs li div.selectionHighlighter a.add:hover { |
1018 | color: white; | 1068 | color: white; |
1019 | } | 1069 | } |
1020 | div.sidePanels div.tabSidePanel ul.mainTabs li div.selectionHighlighter a.add span { | 1070 | div.sidePanels div.tabSidePanel ul.mainTabs li div.selectionHighlighter a.add span { |
1021 | font-size: 8pt; | 1071 | font-size: 8pt; |
1022 | vertical-align: middle; | 1072 | vertical-align: middle; |
1023 | } | 1073 | } |
1024 | div.sidePanels div.tabSidePanel ul.mainTabs li div.selectionHighlighter a.add h3 { | 1074 | div.sidePanels div.tabSidePanel ul.mainTabs li div.selectionHighlighter a.add h3 { |
1025 | display: inline; | 1075 | display: inline; |
1026 | padding-left: 5px; | 1076 | padding-left: 5px; |
1027 | } | 1077 | } |
1028 | div.sidePanels div.tabSidePanel ul.mainTabs li.selected div.selectionHighlighter { | 1078 | div.sidePanels div.tabSidePanel ul.mainTabs li.selected div.selectionHighlighter { |
1029 | display: block; | 1079 | display: block; |
1030 | position: absolute; | 1080 | position: absolute; |
1031 | left: 154px; | 1081 | left: 154px; |
1032 | margin-top: -43px; | 1082 | margin-top: -43px; |
1033 | } | 1083 | } |
1034 | div.sidePanels div.tabSidePanel ul.mainTabs li.cards a { | 1084 | div.sidePanels div.tabSidePanel ul.mainTabs li.cards a { |
1035 | background: url(./images/old/main/tabs/cardsBackground.png) -19px -63px; | 1085 | background: url(./images/old/main/tabs/cardsBackground.png) -19px -63px; |
1036 | } | 1086 | } |
1037 | div.sidePanels div.tabSidePanel ul.mainTabs li.cards a:hover { | 1087 | div.sidePanels div.tabSidePanel ul.mainTabs li.cards a:hover { |
1038 | background: url(./images/old/main/tabs/cardsBackground.png) -19px -110px; | 1088 | background: url(./images/old/main/tabs/cardsBackground.png) -19px -110px; |
1039 | } | 1089 | } |
1040 | div.sidePanels div.tabSidePanel ul.mainTabs li.cards.selected a { | 1090 | div.sidePanels div.tabSidePanel ul.mainTabs li.cards.selected a { |
1041 | margin-left: -10px; | 1091 | margin-left: -10px; |
1042 | padding-left: 50px; | 1092 | padding-left: 50px; |
1043 | color: white; | 1093 | color: white; |
1044 | background: url(./images/old/main/tabs/cardsBackground.png) -9px -14px; | 1094 | background: url(./images/old/main/tabs/cardsBackground.png) -9px -14px; |
1045 | } | 1095 | } |
1046 | div.sidePanels div.tabSidePanel ul.mainTabs li.directLogins.selected a { | 1096 | div.sidePanels div.tabSidePanel ul.mainTabs li.directLogins.selected a { |
1047 | margin-left: -10px; | 1097 | margin-left: -10px; |
1048 | padding-left: 50px; | 1098 | padding-left: 50px; |
1049 | color: white; | 1099 | color: white; |
1050 | } | 1100 | } |
1051 | div.sidePanels div.tabSidePanel ul.mainTabs li.directLogins.selected a:hover { | 1101 | div.sidePanels div.tabSidePanel ul.mainTabs li.directLogins.selected a:hover { |
1052 | color: white; | 1102 | color: white; |
1053 | } | 1103 | } |
1054 | div.sidePanels div.tabSidePanel ul.otherTabs { | 1104 | div.sidePanels div.tabSidePanel ul.otherTabs { |
1055 | margin: 10px 0px; | 1105 | margin: 10px 0px; |
1056 | } | 1106 | } |
1057 | div.sidePanels div.tabSidePanel ul.otherTabs li { | 1107 | div.sidePanels div.tabSidePanel ul.otherTabs li { |
1058 | margin-top: -4px; | 1108 | margin-top: -4px; |
1059 | } | 1109 | } |
1060 | div.sidePanels div.tabSidePanel ul.otherTabs li div.selectionHighlighter { | 1110 | div.sidePanels div.tabSidePanel ul.otherTabs li div.selectionHighlighter { |
1061 | display: none; | 1111 | display: none; |
1062 | } | 1112 | } |
1063 | div.sidePanels div.tabSidePanel ul.otherTabs li a { | 1113 | div.sidePanels div.tabSidePanel ul.otherTabs li a { |
1064 | display: block; | 1114 | display: block; |
1065 | line-height: 36px; | 1115 | line-height: 36px; |
1066 | height: 43px; | 1116 | height: 43px; |
1067 | padding-left: 40px; | 1117 | padding-left: 40px; |
1068 | color: #ff6621; | 1118 | color: #ff6621; |
1069 | text-decoration: none; | 1119 | text-decoration: none; |
1070 | } | 1120 | } |
1071 | div.sidePanels div.tabSidePanel ul.otherTabs li a:hover { | 1121 | div.sidePanels div.tabSidePanel ul.otherTabs li a:hover { |
1072 | background: url(./images/old/main/tabs/itemsBackground.png) -10px -49px; | 1122 | background: url(./images/old/main/tabs/itemsBackground.png) -10px -49px; |
1073 | } | 1123 | } |