update styles

This commit is contained in:
matthias@matsewe.de
2024-05-21 14:38:42 +02:00
parent 88a6c4ada9
commit 32d2170a1b
2 changed files with 14 additions and 6 deletions

View File

@@ -23,7 +23,7 @@
.text { .text {
padding: 0.3em; padding: 0.3em;
margin-bottom: 0.5em; margin-bottom: 0.7em;
display: inline-block; display: inline-block;
} }
@@ -225,10 +225,18 @@ h1 {
padding-left: 0.2em; padding-left: 0.2em;
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: 1.5em; font-size: 1.5em;
background-color: hsl(calc(var(--hue) * 360), 100%, 70%); /*color-mix(in srgb, var(--main-color) 60%, transparent);*/ }
#songs h1 {
background-color: color-mix(in srgb, hsl(calc(var(--hue) * 360), 100%, 40%) 50%, transparent);
border-bottom: 0.3rem solid hsl(calc(var(--hue) * 360), 100%, 40%); border-bottom: 0.3rem solid hsl(calc(var(--hue) * 360), 100%, 40%);
} }
body > h1 {
background-color: color-mix(in srgb, hsl(0, 0%, 40%) 50%, transparent);
border-bottom: 0.3rem solid hsl(0, 0%, 40%);
}
#yt-player, #yt-player,
#spotify-player { #spotify-player {
position: fixed; position: fixed;

View File

@@ -79,7 +79,7 @@
} }
function vote(song_id, vote) { function vote(song_id, vote) {
var session_id = "{{ session_id }}"; const session_id = "{{ session_id }}";
no_button = $("#song-" + song_id).find(".button-no") no_button = $("#song-" + song_id).find(".button-no")
yes_button = $("#song-" + song_id).find(".button-yes") yes_button = $("#song-" + song_id).find(".button-yes")
@@ -111,7 +111,7 @@
</head> </head>
<body> <body>
<h1 style="--main-color: #888888; ">Hallo :)</h1> <h1>Hallo :)</h1>
<div class="text">Du kannst die Liederwahl jederzeit unterbrechen und zu einem späteren Zeitpunkt weitermachen. <div class="text">Du kannst die Liederwahl jederzeit unterbrechen und zu einem späteren Zeitpunkt weitermachen.
</div> </div>
<div id="songs"> <div id="songs">
@@ -131,7 +131,8 @@
song.aca_artist != song.og_artist %} / {{ song.aca_artist song.aca_artist != song.og_artist %} / {{ song.aca_artist
}}{% endif %}{% else %}{{ song.aca_artist }}{% endif %}</div> }}{% endif %}{% else %}{{ song.aca_artist }}{% endif %}</div>
<div class="categories" id="container">{% for category_name, is_in_category in song.categories.items() %}{% <div class="categories" id="container">{% for category_name, is_in_category in song.categories.items() %}{%
if is_in_category %}<span style="--hue: {{ all_categories[category_name] / all_categories|length }};">{{ category_name }}</span>{% if is_in_category %}<span style="--hue: {{ all_categories[category_name] / all_categories|length }};">{{
category_name }}</span>{%
endif %}{% endfor %}<span style="--main-color: transparent;">&nbsp;</span> endif %}{% endfor %}<span style="--main-color: transparent;">&nbsp;</span>
</div> </div>
<div class="vote-buttons"> <div class="vote-buttons">
@@ -151,7 +152,6 @@
</div> </div>
{% endfor %} {% endfor %}
{% endfor %} {% endfor %}
</div> </div>
<div id="spotify-player"> <div id="spotify-player">
<div id="spotify-embed"></div> <div id="spotify-embed"></div>