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