blob: 530397fd923753a8b845b96725a2bfbb1ddb8a5d [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;
22}
23
24.header .header-logo {
avm9996304c97542020-12-20 19:11:16 +010025 display: flex;
26 flex: 1;
27}
28
29.header .header-logo img {
avm999631ca663e2020-12-17 19:34:22 +010030 height: 42px;
31}
32
avm9996304c97542020-12-20 19:11:16 +010033.header button {
34 margin-left: 8px;
35}
36
avm999631ca663e2020-12-17 19:34:22 +010037.app-content {
38 max-width: min(calc(100% - 32px), 800px);
39 margin: 74px auto 16px auto;
40}
41
42.message {
43 text-align: center;
44}
45
46.message-icon {
47 display: inline-block;
48 width: 64px;
49 fill: #0277BD;
50}
51
52.message.message--error .message-icon {
53 fill: #D50000;
54}
55
56.message-title {
57 margin: 4px 0;
58}
59
60.message-text {
61 margin: 8px 0;
62}
63
64.booklet-header {
65 text-align: center;
66 margin-bottom: 18px;
67}
68
69.booklet-header .booklet-header-title {
70 margin: 0;
71 font-size: 30px;
72}
73
74.booklet-header .booklet-header-subtitle {
75 margin: 0;
76 font-size: 18px;
77}
78
79.song {
80 border: solid 1px gray;
81 border-radius: 3px;
82 padding: 12px;
83 margin-bottom: 18px;
84 box-shadow: #bdbdbd 0 1px 3px;
85}
86
87.song .song-title {
88 margin-top: 0;
89 margin-bottom: 4px;
90 font-size: 20px;
91}
92
93.song .song-author {
94 font-style: italic;
95 margin-bottom: 8px;
96}
97
98.song .performers .performers-item {
99 margin-bottom: 2px;
100}
101
102.song .performers .instrument {
103 font-weight: 600;
104 text-decoration: underline;
105}
106
avm9996320fdf2a2020-12-20 13:08:16 +0100107.update-available {
108 position: fixed;
109 bottom: 0;
110 left: 0;
111 right: 0;
112 padding: 16px;
113 background: black;
114 color: white;
115}
116
avm9996304c97542020-12-20 19:11:16 +0100117button.primary-btn {
118 font-family: inherit;
119 font-size: 100%;
120 line-height: 1.15;
121 margin: 0;
122 text-transform: none;
123 -webkit-appearance: button;
124 border: 0;
125 border-radius: 4px;
126 padding: 8px;
127 color: white;
128 background-color: #0277BD;
129 cursor: pointer;
130}
131
132button.primary-btn:hover {
133 background-color: #1591DC;
134}
135
136button.primary-btn:active {
137 background-color: #22A3F1;
138}
139
140/* Section adapted from
141 * https://chromium.googlesource.com/infra/infra/+/master/appengine/monorail/static_src/elements/projects/mr-projects-page/mr-projects-page.js
142 * Copyright 2019 The Chromium Authors. All rights reserved.
143 * License: https://chromium.googlesource.com/infra/infra/+/master/LICENSE
144 **/
145.concerts-list {
146 display: flex;
147 align-items: stretch;
148 flex-wrap: wrap;
149 width: 100%;
150 padding: 0.5em 0;
151 margin-bottom: 3em;
152}
153
154.concert {
155 text-align: left;
156 width: 200px;
157 margin-left: 16px;
158 margin-right: 16px;
159 margin-bottom: 32px;
160 display: flex;
161 flex-direction: column;
162 align-items: flex-start;
163 justify-content: flex-start;
164 border-radius: 4px;
165 border: 1px solid #aaa;
166 padding: 16px;
167 font-weight: normal;
168 line-height: 16px;
169 transition: all 0.1s ease-in-out;
170}
171
172.concert:hover {
173 text-decoration: none;
174 cursor: pointer;
175 box-shadow: 0 2px 6px hsla(0,0%,0%,0.12),
176 0 1px 3px hsla(0,0%,0%,0.24);
177}
178
179.concert-title {
180 font-size: 16px;
181 line-height: 24px;
182 margin: 0;
183 margin-bottom: 16px;
184 padding-top: 0.1em;
185 padding-bottom: 16px;
186 letter-spacing: 0.1px;
187 font-weight: 600;
188 width: 100%;
189 border-bottom: 1px solid #aaa;
190}
191
192.concert-subtitle {
193 margin: 0 0 32px;
194 flex-grow: 1;
195}
196
197.linkify {
198 display: inline;
199 padding: 0px;
200 margin: 0px;
201 border: 0px;
202 background: 0px center;
203 cursor: pointer;
204 color: #0277BD;
205}
206
207.concert-btn {
208 text-transform: uppercase;
209 margin: 0px;
210 font-weight: 600;
211 flex-grow: 0;
212}
213/* End of section */
214
avm999631ca663e2020-12-17 19:34:22 +0100215/* DARK THEME */
216@media screen {
217 .dark-theme {
218 background-color: #111;
219 color: white;
220 }
221
222 .dark-theme .header {
223 color: white;
224 background-color: #0c0c0c;
225 box-shadow: white 0 -1px 4px;
226 }
227
228 .dark-theme .header-logo {
229 filter: invert(1);
230 }
231
232 .dark-theme .song {
233 box-shadow: none;
234 }
avm9996320fdf2a2020-12-20 13:08:16 +0100235
236 .dark-theme .update-available {
237 background: white;
238 color: black;
239 }
avm9996304c97542020-12-20 19:11:16 +0100240
241 .dark-theme .concert:hover {
242 box-shadow: 0 2px 6px hsla(0,0%,100%,0.12),
243 0 1px 3px hsla(0,0%,100%,0.24);
244 }
245
246 .dark-theme .linkify {
247 color: #4cb9fb;
248 }
avm999631ca663e2020-12-17 19:34:22 +0100249}
250
251@media print {
252 .header {
253 position: absolute;
254 box-shadow: none;
255 border-bottom: solid 1px gray;
256 }
257
258 .song {
259 break-inside: avoid-page;
260 box-shadow: none;
261 }
262}