Funding changes.
[wolnelektury.git] / src / wolnelektury / static / 2022 / more.scss
1 body.is-open {
2     height: 100%;
3     overflow-y: hidden;
4 }
5
6 .l-change-pop {
7     margin-top: 18px;
8 }
9 .is-open .l-change-pop {
10     height: auto;
11     margin-top: 18px;
12     padding: 10px 50px;
13 }
14
15 .l-navigation__logo {
16     height: 44px;
17 }
18
19 .l-navigation__menu {
20     .scrollable {
21         height: 100%;
22         overflow-y: scroll;
23         padding-bottom: 30px;
24     }
25 }
26
27 .l-navigation__menu__book__header {
28     display: flex;
29     align-items: center;
30     justify-content: space-between;
31
32     p {
33         margin: 0;
34
35         &.korona {
36             &:before {
37                 content: url('images/korona.svg');
38                 width: 21px;
39                 margin-right: -21px;
40                 position: relative;
41                 top: -10px;
42                 left: -3px;
43             }
44         }
45     }
46 }
47 .l-navigation__menu__book {
48     .button {
49         display: inline-block;
50         font-size: 16px;
51         font-weight: 700;
52         padding: 0 20px;
53         min-width: 212px;
54         line-height: 38px;
55         text-align: center;
56
57         /* green 700 */
58         background: #92BD39;
59         color: #083F4D;
60         border-radius: 6px;
61
62         transition: background-color 150ms;
63
64         &:hover {
65             background-color: #FBC40F;
66         }
67     }
68 }
69 .l-navigation__menu__book__info {
70     img {
71         width: 42px;
72         height: 60px;
73     }
74 }
75 .l-navigation__menu__links ul li a em {
76     font-style: normal;
77     color: #FFA500;
78     font-weight: 600;
79 }
80 .l-navigation__login {
81     color: #74BDC2;
82     margin-right: 20px;
83     
84     a {
85         color: white;
86     }
87 }
88 .l-navigation__actions {
89     position: relative;
90     height: 44px;
91
92     .user {
93         margin-right: 25px;
94     }
95 }
96
97
98 .l-books {
99     margin-right: -17px;
100 }
101 .l-books__grid {
102     margin-right: -17px;
103 }
104
105 .l-books__item {
106     width: 212px;
107
108     margin-right: 17px !important; // reverse the 5n+5 rule.
109
110     transition: opacity .1s, all cubic-bezier(0.25, 1, 0.5, 1) 350ms;
111 }
112
113
114 .by-popularity {
115     .l-books__item {
116         order: attr(data-pop);
117     }
118 }
119
120
121
122 .toggle-input {
123     left: calc(50% - 77px/2);
124     opacity: 0;
125     position: absolute;
126     //top: 0;
127     height: 26px;
128     width: 77px;
129     z-index: 2;
130
131     &:checked {
132         z-index: 0;
133     }
134 }
135
136 .l-checkout__box {
137     position: relative;
138 }
139
140 .l-checkout__payments {
141     display: none;
142 }
143 .toggle-input{
144     &#switch-once:checked {
145         ~.l-switch__wrapper {
146             label {
147                 &:nth-of-type(1) { color: #003C3C; }
148                 &:nth-of-type(2) { color: #74BDC2; }
149             }
150             .toggle {
151                 left: 5px;
152             }
153         }
154         ~.payments-once {
155             display: flex;
156         }
157     }
158     &#switch-monthly:checked {
159         ~.l-switch__wrapper {
160             label {
161                 &:nth-of-type(1) { color: #74BDC2; }
162                 &:nth-of-type(2) { color: #003C3C; }
163             }
164             .toggle {
165                 left: 39px;
166             }
167         }
168         ~.payments-recurring {
169             display: flex;
170         }
171     }
172 }
173
174 .l-checkout__footer__content__item > div ul {
175   font-weight: normal;
176   font-size: 15px;
177   line-height: 150%;
178   color: #808080;
179 }
180
181
182 .l-checkout__form__row {
183     .iframe {
184         margin-bottom: 16px;
185     }
186 }
187
188
189
190 .l-books__item__content {
191     width: 100%;
192    
193     .fragment-text {
194         max-width: 390px;
195         margin-top: 20px;
196         font-weight: 400;
197         font-size: 18px;
198         font-size: 1.125rem;
199         line-height: 150%;
200         color: #474747;
201         
202         h1, h2, h3, h4 {
203             font-size: 1em;
204         }
205     }
206 }
207
208
209
210 #user-menu {
211     //display: none;
212
213     position:absolute;
214     top: 60px;
215     z-index: 1;
216
217     position: absolute;
218     width: 186px;
219     top: 48px;
220     right: 45px;
221
222     /* yellow 900 */
223     background: #F7BA00;
224     box-shadow: 0px 0px 20px rgba(1, 129, 137, 0.2);
225     border-radius: 10px;
226     overflow: hidden;
227
228     opacity:0;
229     pointer-events: none;
230     transition: 200ms opacity;
231     
232     &.is-open {
233         //display: block;
234         pointer-events: all;
235         opacity: 100%;
236     }
237
238     ul {
239         margin: 0;
240         padding: 0;
241         list-style: none;
242
243         li {
244             a {
245                 color: #474747;
246                 display: block;
247                 line-height: 27px;
248                 padding: 8px 21px;
249                 &:hover {
250                     color: #474747;
251                     background: #EDAA00;
252                 }
253
254                 strong {
255                     font-weight: 600;
256                 }
257             }
258         }
259     }
260 }
261
262
263 form {
264     label.required:before {
265         content: "* ";
266         color: #FF4C54;
267     }
268     .helptext {
269         color: #808080;
270         font-size: 15px;
271         line-height: 150%;
272         margin-bottom: 30px;
273     }
274
275 }
276
277 .socialaccount_providers {
278     list-style: none;
279     padding: 0;
280
281     li {
282         display: inline-block;
283         margin-right: 10px;
284     }
285 }
286
287
288
289 .page-simple {
290     margin-bottom: 70px;
291     padding-bottom: 30px;
292     border-radius: 10px;
293     background: #E1F1F2;
294     display: flex;
295     flex-direction: column;
296     align-items: center;
297
298     .white-box {
299         // for legacy templates
300         width: 100%;
301         display: flex;
302         flex-direction: column;
303         align-items: center;
304     }
305     
306     h1 {
307         width: 100%;
308         margin: 0 0 50px 0;
309         padding: 32px 45px;
310         border-radius: 10px 10px 0 0;
311
312         font-style: italic;
313         font-weight: 300;
314         font-size: 48px;
315         line-height: 55px;
316         letter-spacing: -0.02em;
317         background: #083F4D;
318         color: #92BD39;
319     }
320
321     > p, form, > .normal-text {
322         min-width: 300px;
323         margin-left: 50px;
324         margin-right: 50px;
325         width: auto;
326     }
327
328     .wlfund {
329         margin: 0;
330         width: 90%;
331         border-collapse: separate;
332
333         tr {
334             td {
335                 padding: .625rem .3125rem .625rem;
336                 border-top: .625rem solid rgba(255,255,255,0);
337                 border-bottom: 1px solid #083F4D;
338                 text-align: center;
339             }
340         }
341     }
342 }
343
344 .page-simple, .nice-controls {
345     button, input[type=submit] {
346         margin: 24px 0;
347         height: 56px;
348         background: #083F4D;
349         border: none;
350         border-radius: 3px;
351         font-weight: 600;
352         font-size: 20px;
353         line-height: 25px;
354         display: flex;
355         align-items: center;
356         justify-content: center;
357         text-align: center;
358         color: #FFFFFF;
359         width: 340px;
360
361         &.active {
362             outline: 2px solid #083F4D;
363             outline-offset: 3px;
364         }
365         
366         &:disabled {
367             opacity: .8;
368         }
369     }
370
371     label {
372         font-style: normal;
373         font-weight: 600;
374         font-size: 15px;
375         line-height: 160%;
376         color: #083F4D;
377         margin-top: 24px;
378     }
379
380     input, textarea, select {
381         display: block;
382         width: 100%;
383         background: #FFFFFF;
384         color: black;
385         border: 1px solid #D5ECED;
386         border-radius: 3px;
387         transition: all cubic-bezier(0, 0, 0.2, 1) 250ms;
388         padding: 10px;
389         outline: 0;
390     }
391     input, select {
392         height: 56px;
393     }
394     input[type=checkbox], input[type=radio] {
395         display: inline;
396         float: left;
397         width: 1.2em;
398         height: 1.2em;
399         vertical-align: middle;
400         margin-right: 1em;
401     }
402 }
403
404
405 .experiment {
406     display: flex;
407     align-items: center;
408 }
409
410
411
412 .page-simple {
413     .form-info {
414         h2 {
415             font-size: 1.5em;
416             margin-top: 0;
417         }
418     }
419 }
420
421
422 .funding-promo-bar {
423     margin: 18px auto;
424
425     .l-checkout__support {
426         margin: 0;
427         a {
428             display: flex;
429             align-items: start;
430
431             .buttonlike {
432                 margin-right: 10px;
433                 background: #FFA500;
434                 //color: #083F4D;
435                 color: black;
436                 border-radius: 5px;
437                 font-size: 1.125rem;
438                 line-height: 50px;
439                 letter-spacing: -0.01em;
440                 padding: 0 20px;
441                 font-weight: 600;
442                 transition: all cubic-bezier(0.25, 1, 0.5, 1) 350ms;
443                 &:hover {
444                     background: #92BD39;
445                 }
446             }
447             .funding-bar-container {
448                 flex-grow: 1;
449             }
450         }
451     }
452 }
453
454
455 .l-change-pop {
456     margin-bottom: 18px;
457 }
458
459
460 .page-simple button.button-orange {
461     background: #FFA500;
462     color: black;
463     transition: all cubic-bezier(0.25, 1, 0.5, 1) 350ms;
464     &:hover {
465         background: #92BD39;
466     }
467 }