1dea8ca0383f363dd97753cdd11a715fbe66dbe7
[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / local.scss
1 $teal: #007880;
2
3
4 .l-change-pop {
5     transition: 350ms all;
6     
7     p {
8         a {
9             color: $teal;
10         }
11     }
12 }
13
14
15 .is-open .l-change-pop {
16     height: 0;
17     margin-top: 0;
18     margin-bottom: 0;
19     padding-top: 0;
20     padding-bottom: 0;
21 }
22
23
24 .ui-autocomplete a {
25     display: block;
26     transition: none;
27 }
28
29
30 .jp-state-playing .icon-play {
31   &:before {
32     content: $icon-pause;
33   }
34 }
35 .jp-state-muted .icon-volume {
36   &:before {
37     content: $icon-mute;
38   }
39 }
40
41
42 .sponsors-page {
43     display: flex;
44     justify-content: space-between;
45     margin-top: 48px;
46
47     @include rwd(tablet) {
48         flex-wrap: wrap;
49     }
50
51     .sponsors-column {
52         margin: 1em 40px;
53         display: flex;
54         flex-direction: column;
55         align-items: center;
56         font-size: 0;
57         .sponsors-column-name {
58             font-weight: $regular;
59             @include font-size(18px);
60             line-height: 150%;
61             text-align: center;
62             color: #474747;
63         }
64         .sponsor-logos {
65             height: 120px;
66             overflow: hidden;
67             a {
68                 margin-top: 20px;
69                 display: block;
70                 width: 120px;
71                 height: 120px;
72             }
73         }
74     }
75 }
76
77
78
79
80 .l-checkout__support__bar span.little-progress::after {
81     white-space: nowrap;
82     justify-content: left;
83     width: 200px;
84     right: -210px;
85     color: #083F4D;
86 }
87 .funding-details {
88     h2 {
89         margin-top: 0;
90         margin-bottom: 1.5rem;
91     }
92     .funding-description {
93         h2 {
94             font-size: 1.25rem;
95             line-height: 1.35;
96         }
97     }
98 }
99
100
101
102
103 .book-container {
104     position: relative;
105
106     .set-tools {
107         display: none;
108         font-size: 12px;
109         position: absolute;
110         bottom: 0px;
111         right: 0;
112         left: 0;
113         background: black;
114         background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%);
115         color: white;
116         padding: 30px 10px 10px;
117
118         .sets {
119             span {
120                 padding: 3px 18px 3px 3px;
121                 background: white;
122                 color: black;
123                 margin-right: 5px;
124                 margin-bottom: 5px;
125                 display: inline-block;
126                 border-radius: 3px;
127                 position: relative;
128
129                 .close {
130                     margin-left: 5px;
131                     position: absolute;
132                     top: 0;
133                     right: 0;
134                     font-family: wl;
135                     font-size: 10px;
136                     color: #FF4C54;
137                     padding: 4px;
138                     
139                     &:hover {
140                         text-decoration: none;
141                         color: black;
142                         cursor: pointer;
143                     }
144                 }
145             }
146         }
147         .add-set-tag {
148             input {
149                 width: 100%;
150             }
151             button {
152                 font-family: wl;
153                 position: absolute;
154                 right: 12px;
155                 color: #FF4C54;
156                 bottom: 10px;
157                 font-size: 12px;
158                 border: 0;
159                 background: none;
160                 padding: 3px;
161             }
162         }
163     }
164 }
165
166
167 .book-container-activator {
168     &:hover, &.hover, &.ac-hover {
169         .book-container {
170             &.book-liked {
171                 .icon-liked {
172                     font-size: 2em;
173                 }
174
175                 .set-tools {
176                     display: block;
177                 }
178             }
179         }
180     }
181 }
182
183
184 .filter-container {
185     position: absolute;
186     top: 15px;
187     bottom: 25px;
188
189     display: flex;
190     align-items: center;
191
192     .filter {
193         background: #FBC40F;
194         padding: 5px 10px;
195         margin-left: 5px;
196         border-radius: 15px;
197     }
198 }
199
200 .with-filter {
201     padding: 20px 0 0;
202     position: relative;
203
204     h2 {
205         margin-bottom: 0;
206     }
207 }
208 .with-filter .row div.filter-container {
209     background: white;
210     top: 0;
211     bottom: 100%;
212     opacity: 0;
213     overflow: hidden;
214
215     transition: opacity .2s, all .3s;
216     
217 }
218 .with-filter.filters-enabled {
219     .row div.filter-container{
220         top: 15px;
221         bottom: 5px;
222         opacity: 1;
223     }
224 }
225
226 .l-books__input .filter-container {
227     top: 0;
228     bottom: 0;
229     right: 10px;
230     padding: 10px 0;
231
232 }