blob: 2d517d943d80ab1ba15aabac57fb30847e2db4a8 [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;
avm999636e345952021-03-01 23:11:39 +0100211 line-height: initial;
avm9996304c97542020-12-20 19:11:16 +0100212}
213
214.linkify {
215 display: inline;
216 padding: 0px;
217 margin: 0px;
218 border: 0px;
219 background: 0px center;
220 cursor: pointer;
221 color: #0277BD;
222}
223
224.concert-btn {
225 text-transform: uppercase;
226 margin: 0px;
227 font-weight: 600;
228 flex-grow: 0;
229}
230/* End of section */
231
avm999631ca663e2020-12-17 19:34:22 +0100232/* DARK THEME */
233@media screen {
234 .dark-theme {
235 background-color: #111;
236 color: white;
237 }
238
239 .dark-theme .header {
240 color: white;
241 background-color: #0c0c0c;
242 box-shadow: white 0 -1px 4px;
243 }
244
245 .dark-theme .header-logo {
246 filter: invert(1);
247 }
248
249 .dark-theme .song {
250 box-shadow: none;
251 }
avm9996320fdf2a2020-12-20 13:08:16 +0100252
253 .dark-theme .update-available {
254 background: white;
255 color: black;
256 }
avm9996304c97542020-12-20 19:11:16 +0100257
258 .dark-theme .concert:hover {
259 box-shadow: 0 2px 6px hsla(0,0%,100%,0.12),
260 0 1px 3px hsla(0,0%,100%,0.24);
261 }
262
263 .dark-theme .linkify {
264 color: #4cb9fb;
265 }
avm999631ca663e2020-12-17 19:34:22 +0100266}
267
268@media print {
269 .header {
270 position: absolute;
271 box-shadow: none;
272 border-bottom: solid 1px gray;
273 }
274
275 .song {
276 break-inside: avoid-page;
277 box-shadow: none;
avm99963572d9bb2020-12-20 20:01:54 +0100278 margin-bottom: 12px;
279 padding: 6px 12px;
280 }
281
282 .song .song-title {
283 margin-bottom: 3px;
284 }
285
286 .song .song-author {
287 margin-bottom: 6px;
288 }
289
290 .song .performers .performers-item {
291 margin-bottom: 1.5px;
292 }
293
294 #previous-concerts-btn {
295 display: none;
avm999631ca663e2020-12-17 19:34:22 +0100296 }
297}