blob: d34ec101e0692cb73f212134bc04b605df519367 [file] [log] [blame]
avm999631ca663e2020-12-17 19:34:22 +01001@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');
2
3body {
4 margin: 0;
5 font-family: 'Open Sans', 'Arial', sans-serif;
6}
7
8[hidden] {
9 display: none;
10}
11
12.header {
13 display: flex;
14 justify-content: flex-start;
avm9996304c97542020-12-20 19:11:16 +010015 align-items: center;
avm999631ca663e2020-12-17 19:34:22 +010016 position: fixed;
17 top: 0;
18 width: calc(100% - 16px);
19 padding: 8px 8px;
20 background-color: #f3f3f3;
21 box-shadow: black 0 -1px 4px;
avm99963b2a3fa92020-12-21 16:07:29 +010022 z-index: 100;
avm999631ca663e2020-12-17 19:34:22 +010023}
24
25.header .header-logo {
avm9996304c97542020-12-20 19:11:16 +010026 display: flex;
27 flex: 1;
28}
29
30.header .header-logo img {
avm999631ca663e2020-12-17 19:34:22 +010031 height: 42px;
32}
33
avm9996304c97542020-12-20 19:11:16 +010034.header button {
35 margin-left: 8px;
36}
37
avm999631ca663e2020-12-17 19:34:22 +010038.app-content {
39 max-width: min(calc(100% - 32px), 800px);
40 margin: 74px auto 16px auto;
41}
42
avm99963b2a3fa92020-12-21 16:07:29 +010043.hero-message {
44 background: orange;
45 color: black;
46 border-radius: 4px;
47 padding: 16px;
48 margin-bottom: 16px;
49}
50
avm999631ca663e2020-12-17 19:34:22 +010051.message {
52 text-align: center;
53}
54
55.message-icon {
56 display: inline-block;
57 width: 64px;
58 fill: #0277BD;
59}
60
61.message.message--error .message-icon {
62 fill: #D50000;
63}
64
65.message-title {
66 margin: 4px 0;
67}
68
69.message-text {
70 margin: 8px 0;
71}
72
73.booklet-header {
74 text-align: center;
75 margin-bottom: 18px;
76}
77
78.booklet-header .booklet-header-title {
79 margin: 0;
80 font-size: 30px;
81}
82
83.booklet-header .booklet-header-subtitle {
84 margin: 0;
85 font-size: 18px;
86}
87
88.song {
avm99963b2a3fa92020-12-21 16:07:29 +010089 position: relative;
avm999631ca663e2020-12-17 19:34:22 +010090 border: solid 1px gray;
91 border-radius: 3px;
92 padding: 12px;
93 margin-bottom: 18px;
94 box-shadow: #bdbdbd 0 1px 3px;
95}
96
avm99963b2a3fa92020-12-21 16:07:29 +010097.song .song-time {
98 position: absolute;
99 top: 12px;
100 right: 12px;
101}
102
avm999631ca663e2020-12-17 19:34:22 +0100103.song .song-title {
104 margin-top: 0;
105 margin-bottom: 4px;
106 font-size: 20px;
107}
108
109.song .song-author {
110 font-style: italic;
111 margin-bottom: 8px;
112}
113
114.song .performers .performers-item {
115 margin-bottom: 2px;
116}
117
118.song .performers .instrument {
119 font-weight: 600;
120 text-decoration: underline;
121}
122
avm9996320fdf2a2020-12-20 13:08:16 +0100123.update-available {
124 position: fixed;
125 bottom: 0;
126 left: 0;
127 right: 0;
128 padding: 16px;
129 background: black;
130 color: white;
131}
132
avm9996304c97542020-12-20 19:11:16 +0100133button.primary-btn {
134 font-family: inherit;
135 font-size: 100%;
136 line-height: 1.15;
137 margin: 0;
138 text-transform: none;
139 -webkit-appearance: button;
140 border: 0;
141 border-radius: 4px;
142 padding: 8px;
143 color: white;
144 background-color: #0277BD;
145 cursor: pointer;
146}
147
148button.primary-btn:hover {
149 background-color: #1591DC;
150}
151
152button.primary-btn:active {
153 background-color: #22A3F1;
154}
155
156/* Section adapted from
157 * https://chromium.googlesource.com/infra/infra/+/master/appengine/monorail/static_src/elements/projects/mr-projects-page/mr-projects-page.js
158 * Copyright 2019 The Chromium Authors. All rights reserved.
159 * License: https://chromium.googlesource.com/infra/infra/+/master/LICENSE
160 **/
161.concerts-list {
162 display: flex;
163 align-items: stretch;
164 flex-wrap: wrap;
165 width: 100%;
166 padding: 0.5em 0;
167 margin-bottom: 3em;
168}
169
170.concert {
171 text-align: left;
172 width: 200px;
173 margin-left: 16px;
174 margin-right: 16px;
175 margin-bottom: 32px;
176 display: flex;
177 flex-direction: column;
178 align-items: flex-start;
179 justify-content: flex-start;
180 border-radius: 4px;
181 border: 1px solid #aaa;
182 padding: 16px;
183 font-weight: normal;
184 line-height: 16px;
185 transition: all 0.1s ease-in-out;
186}
187
188.concert:hover {
189 text-decoration: none;
190 cursor: pointer;
191 box-shadow: 0 2px 6px hsla(0,0%,0%,0.12),
192 0 1px 3px hsla(0,0%,0%,0.24);
193}
194
195.concert-title {
196 font-size: 16px;
197 line-height: 24px;
198 margin: 0;
199 margin-bottom: 16px;
200 padding-top: 0.1em;
201 padding-bottom: 16px;
202 letter-spacing: 0.1px;
203 font-weight: 600;
204 width: 100%;
205 border-bottom: 1px solid #aaa;
206}
207
208.concert-subtitle {
209 margin: 0 0 32px;
210 flex-grow: 1;
211}
212
213.linkify {
214 display: inline;
215 padding: 0px;
216 margin: 0px;
217 border: 0px;
218 background: 0px center;
219 cursor: pointer;
220 color: #0277BD;
221}
222
223.concert-btn {
224 text-transform: uppercase;
225 margin: 0px;
226 font-weight: 600;
227 flex-grow: 0;
228}
229/* End of section */
230
avm999631ca663e2020-12-17 19:34:22 +0100231/* DARK THEME */
232@media screen {
233 .dark-theme {
234 background-color: #111;
235 color: white;
236 }
237
238 .dark-theme .header {
239 color: white;
240 background-color: #0c0c0c;
241 box-shadow: white 0 -1px 4px;
242 }
243
244 .dark-theme .header-logo {
245 filter: invert(1);
246 }
247
248 .dark-theme .song {
249 box-shadow: none;
250 }
avm9996320fdf2a2020-12-20 13:08:16 +0100251
252 .dark-theme .update-available {
253 background: white;
254 color: black;
255 }
avm9996304c97542020-12-20 19:11:16 +0100256
257 .dark-theme .concert:hover {
258 box-shadow: 0 2px 6px hsla(0,0%,100%,0.12),
259 0 1px 3px hsla(0,0%,100%,0.24);
260 }
261
262 .dark-theme .linkify {
263 color: #4cb9fb;
264 }
avm999631ca663e2020-12-17 19:34:22 +0100265}
266
267@media print {
268 .header {
269 position: absolute;
270 box-shadow: none;
271 border-bottom: solid 1px gray;
272 }
273
274 .song {
275 break-inside: avoid-page;
276 box-shadow: none;
avm99963572d9bb2020-12-20 20:01:54 +0100277 margin-bottom: 12px;
278 padding: 6px 12px;
279 }
280
281 .song .song-title {
282 margin-bottom: 3px;
283 }
284
285 .song .song-author {
286 margin-bottom: 6px;
287 }
288
289 .song .performers .performers-item {
290 margin-bottom: 1.5px;
291 }
292
293 #previous-concerts-btn {
294 display: none;
avm999631ca663e2020-12-17 19:34:22 +0100295 }
296}