e0e0f62d28af233a61a81115410a72b84e86fcca
[wolnelektury.git] / src / annoy / static / annoy / banner.scss
1 .annoy-banner {
2     background: orange;
3
4     p {
5         text-align: center;
6     }
7
8     a {
9         color: black;
10         display: block;
11         padding: 1em 2em;
12     }
13 }
14
15
16 .annoy-banner-off {
17     cursor: pointer;
18 }
19
20 .annoy-banner_top {
21     display: none;
22
23     .annoy-banner-inner {
24         @media screen and (min-width: 960px) {
25             width: 960px;
26             margin: auto;
27         }
28         display: flex;
29         flex-direction: column;
30
31         @media screen and (min-width: 400px) {
32             flex-direction: row;
33         }
34     }
35     
36     img {
37         margin: 0;
38         align-self: center;
39         max-height: 40px;
40         @media screen and (min-width: 400px) {
41             max-height: 60px;
42         }
43     }
44     .text {
45         flex: 1;
46         align-self: center;
47         padding: .5em 1em;
48     }
49     
50     p {
51         margin: 0;
52         font-size: 1.5em;
53
54         @media screen and (min-width: 400px) {
55             font-size: 2em;
56         }
57     }
58     
59     .annoy-banner-off {
60         padding: .5em 1em .5em;
61         width: 1em;
62         text-align:center;
63         font-family: Arial, sans-serif;
64         display: block;
65         
66         border-radius: 0 0 0 1em;
67         position: absolute;
68         top: 0;
69         right: 0;
70         color: black;
71         font-size: 13px;
72     }
73 }
74
75 .annoy-banner-on_top {
76     font-size: 13px;
77     line-height: 1.15em;
78
79     background: orange;
80     z-index: 99;
81     font-family: Arial, sans-serif;
82     display: block;
83     padding: .1em 1em;
84     text-align:center;
85     border-radius: 0 0 0 1em;
86     position: absolute;
87     top: 0;
88     right: 0;
89     color: black;
90 }
91
92
93 .annoy-banner_book-page {
94     margin-top: 30px;
95     font-size: 2em;
96
97     p {
98         margin: 0;
99     }
100 }
101
102
103 .annoy-banner_book-fragment-list {
104     margin-right: 2em;
105 }
106
107
108
109 .annoy-banner_blackout {
110     display: none;
111     
112     position: fixed;
113     z-index: 100000;
114     left: 0;
115     right: 0;
116     top: 0;
117     bottom: 0;
118     background: black;
119     color: white;
120     font-size: 16pt;
121     line-height: 26pt;
122     padding: 0;
123
124     .annoy-banner-inner {
125         padding: 0 40% 0 15%;
126         height: 100%;
127         overflow-y: scroll;
128         padding-top: 20vh;
129         padding-bottom: 2em;
130         width: 101vw;
131         box-sizing: border-box;
132     }
133
134     p {
135         text-align: left;
136     }
137     
138     a {
139         color: white;
140         position: absolute;
141         right: 10%;
142         width: 25%;
143         border-radius: 24px;
144         text-align: center;
145         box-sizing: border-box;
146         padding: 1em;
147
148         &.annoy-banner-off {
149             bottom: 20vh;
150             background: #666;
151             border-radius: auto 100%;
152             font-size: .75em;
153             padding: .5em;
154             width: 20%;
155             margin-right: 2.5%;
156         }
157
158         &.action {
159             bottom: 40vh;
160             background: #018189;
161             color: white;
162             border-radius: auto 100%;
163             padding: 1.5em 1em;
164         }
165     }    
166
167     @media screen and (max-height: 1000px) {
168         .annoy-banner-inner {
169             padding-top: 5vh;
170         }
171     }
172     
173     @media screen and (max-width: 1280px) {
174         .annoy-banner-inner {
175             padding-left: 5%;
176             padding-right: 50%;
177             padding-left: 5%;
178             padding-right: 50%;
179         }
180
181         a {
182             right: 5%;
183             width: 40%;
184
185             &.annoy-banner-off {
186                 width: 40%;
187                 margin-right: 0%;
188             }
189         }
190         
191     }
192     @media screen and (max-width: 1024px) {
193         font-size: 14pt;
194         line-height: 21pt;        
195     }
196     @media screen and (max-height: 820px) {
197         .annoy-banner-inner {
198             padding-top: 5vh;
199         }
200     }
201     @media screen and (max-width: 820px) and (max-height: 820px) {
202         a.action {
203             bottom: 20vh;
204         }
205         a.annoy-banner-off {
206             bottom: 5vh;
207         }
208     }
209     @media screen and (max-height: 400px) {
210         a.action {
211             bottom: 40vh;
212         }
213     }
214
215     
216 }
217 .annoy-banner-on_blackout {
218     position: fixed;
219     z-index: 9999;
220     bottom: 0;
221     right: 0;
222     background: black;
223     color: white;
224     border-radius: 1em 0 0 0;
225     padding: .1em 1em;
226 }
227
228
229
230 .dynamic-insert {
231     background: orange;
232     margin: 1em 0;
233
234     &.with-image {
235         min-height: 120px;
236     }
237
238     padding: 0;
239        
240     a {
241         color: black;
242         display: flex;
243         flex-direction: row;
244
245         .text {
246             padding: 2em;
247             flex: 1;
248             align-self: center;
249         }
250         img {
251             border-radius: 100%;
252             margin: 1em;
253             align-self: center;
254         }
255     }
256 }
257
258
259
260 .annoy-banner_book-text-intermission {
261     display: none;
262
263     .annoy-banner-inner {
264         display: flex;
265         flex-direction: column;
266
267         @media screen and (min-width: 400px) {
268             flex-direction: row;
269         }
270     }
271     
272     img {
273         margin: 0;
274         align-self: center;
275         max-height: 60px;
276         @media screen and (min-width: 400px) {
277             max-height: 100px;
278         }
279     }
280     .text {
281         flex: 1;
282         align-self: center;
283         padding: .5em 1em;
284     }
285     
286     p {
287         margin: 0;
288         font-size: 1.5em;
289
290         @media screen and (min-width: 400px) {
291             font-size: 2em;
292         }
293     }
294 }