styling
All checks were successful
release-tag / release-image (push) Successful in 5m1s

This commit is contained in:
2024-07-12 11:13:10 +02:00
parent d4cf9a53dd
commit 5074455dac
2 changed files with 7 additions and 5 deletions

View File

@@ -105,7 +105,8 @@ header {
.song { .song {
background-color: var(--color-choriosity-red--light); background-color: var(--color-choriosity-red--light);
background-color: var(--color-white-100); background-color: var(--color-white-100);
border: 1px solid var(--color-choriosity-red); /*border: 1px solid var(--color-choriosity-red);*/
border: 1px solid hsl(calc(var(--hue) * 360), 100%, 40%);
box-shadow: 4px 4px 8px var(--color-white-90); box-shadow: 4px 4px 8px var(--color-white-90);
padding: 0.4em; padding: 0.4em;
border-radius: 0.5em; border-radius: 0.5em;
@@ -118,7 +119,7 @@ header {
.cover-container { .cover-container {
position: relative; position: relative;
width: 10.67em; width: 10.67em;
height: 6em; height: 6.7em;
float: left; float: left;
margin-right: 1em; margin-right: 1em;
text-align: center; text-align: center;
@@ -181,6 +182,7 @@ header {
.vote-buttons { .vote-buttons {
display: inline-block; display: inline-block;
margin-top: 0.7em;
} }
.button { .button {
@@ -274,12 +276,12 @@ header {
/*color-mix(in srgb, var(--main-color) 60%, transparent);*/ /*color-mix(in srgb, var(--main-color) 60%, transparent);*/
} }
.vote-buttons { /*.vote-buttons {
margin-top: 1em; margin-top: 1em;
width: 100%; width: 100%;
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
} }*/
.song-title, .song-title,
.song-artist { .song-artist {

View File

@@ -181,7 +181,7 @@
{% for main_category, songs in songs_by_category.items() %} {% for main_category, songs in songs_by_category.items() %}
<h2 style="--hue: {{ all_categories[main_category] / all_categories|length }};">{{ main_category }}</h2> <h2 style="--hue: {{ all_categories[main_category] / all_categories|length }};">{{ main_category }}</h2>
{% for song in songs -%} {% for song in songs -%}
<div class="song{% if (song.vote == -1) or (not song.vote and not song.singable) %} not_singable{% endif %}" <div style="--hue: {{ all_categories[main_category] / all_categories|length }};" class="song{% if (song.vote == -1) or (not song.vote and not song.singable) %} not_singable{% endif %}"
id="song-{{ song.id }}"> id="song-{{ song.id }}">
<div class="cover-container"> <div class="cover-container">
<img src="{{ song.thumbnail }}" class="cover"> <img src="{{ song.thumbnail }}" class="cover">