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