Funding details view: Intro header
[wolnelektury.git] / apps / funding / static / funding / funding.scss
1 .funding {
2     background: orange;
3     margin: auto;
4     padding: 5px 0;
5     position: relative;
6     a.call {
7         height: 1.2em;
8         width: 9em;
9         padding: .35em .5em;
10         margin: .5em;
11         display: inline-block;
12         vertical-align: top;
13         text-align: center;
14
15         background: lighten(#018189, .05);
16     }
17     .description {
18         display: inline-block;
19         padding-left: .6em;
20         a {
21             display: block;
22             color: black;
23             padding: 0 3px;
24         }
25     }
26     strong {
27         font-size: 1.5em;
28         padding: .2em 0 0;
29         //display: block;
30     }
31     .progress {
32         .piece {
33             font-size: 1.3em;
34             padding: .3em .5em;
35         }
36         width: 95.7em;
37         margin: .3em 0 .4em;
38         border-radius: 2em;
39         background-image: url(/static/img/progress-pixel.png);
40         background-repeat: repeat-y;
41         background-color: fade-out(#ec6d00, .5);
42         box-shadow: .1em .1em .1em #888;
43     }
44     .with-button .progress {
45         width: 78em;
46     }
47     
48     .funding-title {
49         font-size: 1.1em;
50     }
51     .funding-title-strong {
52         @extend .funding-title;
53         font-weight: bold;
54         font-size: 1.5em;
55     }
56     .close {
57         position: absolute;
58         top: 0px;
59         right: 5px;
60     }
61 }
62
63 .funding-top-header {
64     @extend: .funding;
65     width: 97.5em;
66 }
67
68
69 .wlfund {
70     width: 100%;
71     border-collapse: collapse;
72
73     td {
74         padding: 0 0 1em 0;
75         text-align: center;
76     }
77
78     td:last-child {
79         text-align: right;
80     }
81
82     td div {
83         padding: 1em;
84         box-shadow: 0 2px 0 #DDDDDD;
85     }
86
87     .funding-plus td div {
88         background: fade-out(#0D7E85, .8);
89     }
90
91     .funding-minus td div {
92         background: white;
93     }
94 }
95
96
97
98 .honking {
99     background: #018189;
100     font-size: 1.5em;
101     padding: .5em;
102     color: white;
103     border: 0;
104     box-shadow: 0.2em 0.2em 0.3em #888888;
105     position: relative;
106 }
107 .honking:hover {
108     box-shadow: none;
109     top: .1em;
110     left: .1em;
111 }
112
113
114
115 .share {
116     a {
117         margin-right: 1.5em;
118
119         img {
120             vertical-align: middle;
121         }
122     }
123 }
124
125 .funding-handle {
126     position: absolute;
127     top: 0;
128     right: 0;
129     z-index:2;
130     background: orange;
131     cursor:pointer;
132     padding: .2em 1em;
133     border-radius: 0 0 0 1em;
134     font-size: 13px;
135 }
136
137 .funding-cover {
138     float:left;
139     margin-right: 10px;
140 }
141
142 .funding-details-intro {
143     padding-top: 1em;
144     
145     h3:first-of-type {
146         margin-top: 0;
147     }
148 }