Some layout experiments.
[wolnelektury.git] / apps / funding / static / funding / funding.scss
1 .funding {
2     background: orange;
3
4     a.call {
5         font-size: 1.5em;
6         height: 1.2em;
7         width: 13em;
8         position: relative;
9         padding: .35em .5em;
10         margin: .5em;
11         display: inline-block;
12         vertical-align: top;
13         box-shadow: 0.2em 0.2em 0.3em #888888;
14         text-align: center;
15         background: white;
16         color: #4E56C8;
17     }
18     a.call:hover {
19         box-shadow: none;
20         top: .1em;
21         left: .1em;
22     }
23     .description {
24         display: inline-block;
25         padding-left: .6em;
26     }
27     strong {
28         font-size: 1.5em;
29         padding: .2em .2em 0;
30         display: block;
31         a {
32             color: black;
33         }
34     }
35     .progress {
36         .piece {
37             font-size: 1.3em;
38             padding: .3em .5em;
39         }
40         width: 95.7em;
41         margin: .1em .3em .4em;
42         border-radius: 2em;
43         background-image: url(/static/img/progress-pixel.png);
44         background-repeat: repeat-y;
45         background-color: fade-out(#ec6d00, .5);
46         box-shadow: .1em .1em .1em #888;
47     }
48     .with-button .progress {
49         width: 73em;
50     }
51 }
52
53
54
55
56 .wlfund {
57     width: 100%;
58     border-collapse: collapse;
59
60     td {
61         padding: 0 0 1em 0;
62         text-align: center;
63     }
64
65     td:last-child {
66         text-align: right;
67     }
68
69     td div {
70         padding: 1em;
71         box-shadow: 0 2px 0 #DDDDDD;
72     }
73
74     .funding-plus td div {
75         background: fade-out(#0D7E85, .8);
76     }
77
78     .funding-minus td div {
79         background: white;
80     }
81 }
82
83
84
85 button.honking {
86     background: #018189;
87     font-size: 1.5em;
88     padding: .5em;
89     color: white;
90     border: 0;
91     box-shadow: 0.2em 0.2em 0.3em #888888;
92     position: relative;
93 }
94 button.honking:hover {
95     box-shadow: none;
96     top: .1em;
97     left: .1em;
98     
99 }