diff --git a/web/static/css/main.css b/web/static/css/main.css index 9f9abbb..ca9f41e 100644 --- a/web/static/css/main.css +++ b/web/static/css/main.css @@ -1,3 +1,8 @@ +:root { + --font-color: #aaa; + --background-color: #232323; +} + @font-face { font-family: "CyrBit"; src: url("CyrBit.ttf"); @@ -6,14 +11,14 @@ body { display: flex; flex-wrap: wrap; - background-color: #232323; - color: #aaa; + background-color: var(--background-color); + color: var(--font-color); font-family: "CyrBit"; font-size: 20pt; } a { - color: #aaa; + color: var(--font-color); text-decoration: none; } @@ -60,7 +65,7 @@ table td, table th { } #libreto, #playlist, #onion, #ipfs, #todo { - border: 1px solid #aaa; + border: 1px solid var(--font-color); border-radius: 0.5em; text-align: center; } @@ -103,6 +108,13 @@ video { line-height: 1.2em; } +.lyrics button { + border: 1px solid; + background: transparent; + color: var(--font-color); + border-radius: 0.6em; +} + #song-playlist #video-playlist { width: 100%; } diff --git a/web/templates/song.html b/web/templates/song.html index 27b81f0..9e2aa79 100644 --- a/web/templates/song.html +++ b/web/templates/song.html @@ -22,6 +22,23 @@ {% endif %} + {% if parsed_srt %} +

+ {% for line in parsed_srt %} + + {{ line.content }}
+ {% endfor %} +

+ {% endif %} + + {% if song.files %} + + {% endif %} + - - {% if parsed_srt %} -

- {% for line in parsed_srt %} - {{ line.content }}
- {% endfor %} -

- {% endif %} - - {% if song.files %} - - {% endif %} {% endblock %}