blob: d9bf93274bd387e5929e0240ea893790971a87e3 [file] [log] [blame]
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');
body {
margin: 0;
font-family: 'Open Sans', 'Arial', sans-serif;
}
[hidden] {
display: none;
}
.header {
display: flex;
justify-content: flex-start;
position: fixed;
top: 0;
width: calc(100% - 16px);
padding: 8px 8px;
background-color: #f3f3f3;
box-shadow: black 0 -1px 4px;
}
.header .header-logo {
height: 42px;
}
.app-content {
max-width: min(calc(100% - 32px), 800px);
margin: 74px auto 16px auto;
}
.message {
text-align: center;
}
.message-icon {
display: inline-block;
width: 64px;
fill: #0277BD;
}
.message.message--error .message-icon {
fill: #D50000;
}
.message-title {
margin: 4px 0;
}
.message-text {
margin: 8px 0;
}
.booklet-header {
text-align: center;
margin-bottom: 18px;
}
.booklet-header .booklet-header-title {
margin: 0;
font-size: 30px;
}
.booklet-header .booklet-header-subtitle {
margin: 0;
font-size: 18px;
}
.song {
border: solid 1px gray;
border-radius: 3px;
padding: 12px;
margin-bottom: 18px;
box-shadow: #bdbdbd 0 1px 3px;
}
.song .song-title {
margin-top: 0;
margin-bottom: 4px;
font-size: 20px;
}
.song .song-author {
font-style: italic;
margin-bottom: 8px;
}
.song .performers .performers-item {
margin-bottom: 2px;
}
.song .performers .instrument {
font-weight: 600;
text-decoration: underline;
}
/* DARK THEME */
@media screen {
.dark-theme {
background-color: #111;
color: white;
}
.dark-theme .header {
color: white;
background-color: #0c0c0c;
box-shadow: white 0 -1px 4px;
}
.dark-theme .header-logo {
filter: invert(1);
}
.dark-theme .song {
box-shadow: none;
}
}
@media print {
.header {
position: absolute;
box-shadow: none;
border-bottom: solid 1px gray;
}
.song {
break-inside: avoid-page;
box-shadow: none;
}
}