blob: 435b652cd149bc9d902627def14f635715754bb4 [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;
15 position: fixed;
16 top: 0;
17 width: calc(100% - 16px);
18 padding: 8px 8px;
19 background-color: #f3f3f3;
20 box-shadow: black 0 -1px 4px;
21}
22
23.header .header-logo {
24 height: 42px;
25}
26
27.app-content {
28 max-width: min(calc(100% - 32px), 800px);
29 margin: 74px auto 16px auto;
30}
31
32.message {
33 text-align: center;
34}
35
36.message-icon {
37 display: inline-block;
38 width: 64px;
39 fill: #0277BD;
40}
41
42.message.message--error .message-icon {
43 fill: #D50000;
44}
45
46.message-title {
47 margin: 4px 0;
48}
49
50.message-text {
51 margin: 8px 0;
52}
53
54.booklet-header {
55 text-align: center;
56 margin-bottom: 18px;
57}
58
59.booklet-header .booklet-header-title {
60 margin: 0;
61 font-size: 30px;
62}
63
64.booklet-header .booklet-header-subtitle {
65 margin: 0;
66 font-size: 18px;
67}
68
69.song {
70 border: solid 1px gray;
71 border-radius: 3px;
72 padding: 12px;
73 margin-bottom: 18px;
74 box-shadow: #bdbdbd 0 1px 3px;
75}
76
77.song .song-title {
78 margin-top: 0;
79 margin-bottom: 4px;
80 font-size: 20px;
81}
82
83.song .song-author {
84 font-style: italic;
85 margin-bottom: 8px;
86}
87
88.song .performers .performers-item {
89 margin-bottom: 2px;
90}
91
92.song .performers .instrument {
93 font-weight: 600;
94 text-decoration: underline;
95}
96
avm9996320fdf2a2020-12-20 13:08:16 +010097.update-available {
98 position: fixed;
99 bottom: 0;
100 left: 0;
101 right: 0;
102 padding: 16px;
103 background: black;
104 color: white;
105}
106
avm999631ca663e2020-12-17 19:34:22 +0100107/* DARK THEME */
108@media screen {
109 .dark-theme {
110 background-color: #111;
111 color: white;
112 }
113
114 .dark-theme .header {
115 color: white;
116 background-color: #0c0c0c;
117 box-shadow: white 0 -1px 4px;
118 }
119
120 .dark-theme .header-logo {
121 filter: invert(1);
122 }
123
124 .dark-theme .song {
125 box-shadow: none;
126 }
avm9996320fdf2a2020-12-20 13:08:16 +0100127
128 .dark-theme .update-available {
129 background: white;
130 color: black;
131 }
avm999631ca663e2020-12-17 19:34:22 +0100132}
133
134@media print {
135 .header {
136 position: absolute;
137 box-shadow: none;
138 border-bottom: solid 1px gray;
139 }
140
141 .song {
142 break-inside: avoid-page;
143 box-shadow: none;
144 }
145}