blob: d9bf93274bd387e5929e0240ea893790971a87e3 [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
97/* DARK THEME */
98@media screen {
99 .dark-theme {
100 background-color: #111;
101 color: white;
102 }
103
104 .dark-theme .header {
105 color: white;
106 background-color: #0c0c0c;
107 box-shadow: white 0 -1px 4px;
108 }
109
110 .dark-theme .header-logo {
111 filter: invert(1);
112 }
113
114 .dark-theme .song {
115 box-shadow: none;
116 }
117}
118
119@media print {
120 .header {
121 position: absolute;
122 box-shadow: none;
123 border-bottom: solid 1px gray;
124 }
125
126 .song {
127 break-inside: avoid-page;
128 box-shadow: none;
129 }
130}