mixtape/sass/chordpro.scss

79 lines
1.0 KiB
SCSS
Raw Normal View History

2024-02-09 09:52:59 +01:00
@import "fonts";
2024-02-06 18:04:50 +01:00
$col-white: #fff;
2024-02-08 21:39:40 +01:00
$col-black: #2e3440;
2024-02-06 18:04:50 +01:00
2024-01-08 11:46:43 +01:00
body {
margin: 0;
2024-02-08 21:39:40 +01:00
background-color: $col-black;
color: $col-white;
2024-02-09 09:52:59 +01:00
font-family: "Noto Sans", Tahoma, Geneva, Verdana, sans-serif;
text-rendering: geometricPrecision;
2024-02-06 18:04:50 +01:00
}
table {
white-space: nowrap;
2024-01-08 11:46:43 +01:00
}
.song {
2024-02-08 21:39:40 +01:00
padding: 1em 0 0 1em;
2024-01-08 11:46:43 +01:00
}
.title {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 1em;
}
.chords {
font-style: italic;
}
.chorus, .verse, .tab {
margin: 1em 0;
}
.chorus {
position: relative;
2024-02-06 18:04:50 +01:00
&:before {
content: "";
position: absolute;
left: -1em;
display: block;
height: 100%;
width: 2px;
2024-02-08 21:39:40 +01:00
background-color: $col-white;
2024-02-06 18:04:50 +01:00
}
2024-01-08 11:46:43 +01:00
}
.tab {
white-space: pre;
font-family: monospace;
font-size: 1.25em;
}
.comment {
display: inline-block;
padding: .25em .5em;
2024-02-08 21:39:40 +01:00
background-color: #4c566a;
color: $col-white;
2024-01-08 11:46:43 +01:00
}
2024-02-08 21:39:40 +01:00
@media (prefers-color-scheme: light) {
2024-01-08 11:46:43 +01:00
body {
2024-02-08 21:39:40 +01:00
background-color: $col-white;
color: $col-black;
2024-01-08 11:46:43 +01:00
}
.chorus:before {
2024-02-08 21:39:40 +01:00
background-color: $col-black;
2024-01-08 11:46:43 +01:00
}
.comment {
2024-02-08 21:39:40 +01:00
background-color: #d8dee9;
color: $col-black;
2024-01-08 11:46:43 +01:00
}
}