3b63e2037296c7d6c7ad768fcb3e260fadb46e7a
[wolnelektury.git] / apps / wolnelektury_core / static / scss / funding / funding.scss
1 .funding {
2     background: orange;
3     margin: auto;
4     @include size(padding, 5px 0);
5     position: relative;
6     .close {
7         @include mono;
8         @include size(font-size, 16px);
9         position: absolute;
10         top: 0px;
11         right: 0;
12         @include size(padding, 1px 5px 10px 10px);
13     }
14     .call-area {
15         float:left;
16         @include size(padding-right, 6px);
17     }
18     a.call {
19         @include size(height, 18px);
20
21         @include size(padding, 5.25px 7.5px);
22         @include size(margin, 7.5px);
23         display: inline-block;
24         vertical-align: middle;
25         text-align: center;
26
27         background: lighten(#018189, .05);
28         @include size(width, 135px);
29
30         @include min-screen(420px) {
31             vertical-align: top;
32         }
33     }
34     .learn-more {
35         text-align: center;
36         margin: auto;
37         @include size(font-size, 10px);
38         padding: .5em;
39         
40         @include min-screen(300px) {
41             display: inline;
42         }
43         @include min-screen(420px) {
44             padding: 0;
45             display: block;
46         }
47     }
48     .description {
49         @include size(padding-left, 6px);
50
51         a {
52             display: block;
53             color: black;
54             @include size(padding, 0 3px);
55         }
56     }
57     strong {
58         @include size(font-size, 15px);
59         @include size(padding, 3px 0 0);
60     }
61     .progress {
62         .piece {
63             @include size(font-size, 13px);
64             @include size(padding, 4px 6px);
65         }
66         @include size(margin, 3px 12px 4px 0);
67         @include size(border-radius, 20px);
68         background-image: url(/static/img/progress-pixel.png);
69         background-repeat: repeat-y;
70         background-color: #F68900;
71         @include box-shadow(1px 1px 1px #888);
72
73         .progress-collected {
74             float:left;
75             &:after {
76                 content: " / ";
77             }
78             @include min-screen(500px) {
79                 &:after {
80                     content: none;
81                 }
82             }
83         }
84         .progress-target {
85             float: left;
86             padding-left: 0;
87             @include min-screen(500px) {
88                 float: right;
89                 @include size(padding-left, 6px);
90             }
91         }
92         .progress-extralabel {
93             display: none;
94             @include min-screen(500px) {
95                 display: inline;
96             }
97         }
98         .progress-until {
99             display: inline-block;
100             margin-right: 0em;
101             text-align: right;
102             @include min-screen(500px) {
103                 text-align: center;
104             }
105         }
106     }
107     .with-button {
108         clear: left;
109         @include min-screen(420px) {
110             clear: none;
111             @include size(margin-left, 171px);
112         }
113     }
114
115     .funding-title {
116         @include size(font-size, 11px);
117         display: block;
118         @include min-screen(640px) {
119             display: inline;
120         }
121     }
122     .funding-title-strong {
123         @extend .funding-title;
124         font-weight: bold;
125         @include size(font-size, 15px);
126     }
127 }
128
129 .funding-top-header {
130     @extend .funding;
131
132     @include min-screen(1000px) {
133         @include size(width, 975px);
134     }
135 }
136
137
138 .wlfund {
139     width: 100%;
140     border-spacing:0;
141
142     td {
143         @include size(padding, 10px 5px 10px);
144         text-align: center;
145         @include size(border-top, 10px solid rgba(255, 255, 255, 0));
146         @include size(border-bottom, 2px solid #DDDDDD);
147
148         background-clip: padding-box;
149         -moz-background-clip: padding;
150         -webkit-background-clip: padding;
151     }
152     td.oneline {
153         white-space: nowrap;
154     }
155
156     td:last-child {
157         text-align: right;
158     }
159
160     .funding-plus td {
161         background-color: mix(#0D7E85, white, .2);
162     }
163
164     .funding-minus td {
165         background-color: white;
166     }
167 }
168
169
170
171 .honking {
172     background: #018189;
173     @include size(font-size, 15px);
174     @include size(padding, 7.5px);
175     color: white;
176     border: 0;
177     @include box-shadow(3px 3px 4.5px #888888);
178     position: relative;
179 }
180 .honking:hover {
181     @include box-shadow(none);
182     @include size(top, 1px);
183     @include size(left, 1px);
184 }
185
186
187
188 .share {
189     a {
190         @include size(margin-right, 15px);
191
192         img {
193             vertical-align: middle;
194         }
195     }
196 }
197
198 #funding-closeable {
199     display: none;
200 }
201 #funding-handle {
202     position: absolute;
203     top: 0;
204     right: 0;
205     z-index: 2;
206     background: orange;
207     cursor: pointer;
208     @include size(padding, 2.6px 13px);
209     @include size(border-radius, 0 0 0 10px);
210     @include size(font-size, 13px);
211 }
212
213 .funding-cover {
214     float: left;
215     @include size(margin-right, 10px);
216 }
217
218 .funding-details-intro {
219     @include size(padding-top, 10px);
220     
221     h3:first-of-type {
222         margin-top: 0;
223     }
224 }