improved display of event color-codes

This commit is contained in:
eclipse 2025-09-02 20:37:07 +02:00
parent 337b90e521
commit 8290a50c2e

View File

@ -387,9 +387,6 @@ article form {
50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } 50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
} }
.events .tr-muted {
color: var(--pico-muted-color);
}
#events-legend { #events-legend {
width: 100%; width: 100%;
@ -397,28 +394,46 @@ article form {
justify-content: center; justify-content: center;
} }
span.babelsberger-lesesalon, .babelsberger-lesesalon .event-info {
background-color: var(--tr-events-color-bls);
}
span.andere-welten, .andere-welten .event-info {
background-color: var(--tr-events-color-paw);
}
/* event list */ /* event list */
.event-info { .events {
vertical-align: top; .tr-muted {
max-width: 240px; color: var(--pico-muted-color);
}
tr {
background: linear-gradient(100deg, color-mix(in srgb, var(--pico-background-color) 90%, white), 25%, var(--pico-background-color));
td {
background: unset;
border-bottom: none;
}
}
tr.babelsberger-lesesalon {
background: linear-gradient(100deg, var(--tr-events-color-bls), 25%, var(--pico-background-color));
}
tr.andere-welten {
background: linear-gradient(100deg, var(--tr-events-color-paw), 25%, var(--pico-background-color));
}
.event-info {
vertical-align: top;
max-width: 240px;
}
} }
#content-body .event-detail { #content-body .event-detail {
height: 100%;
vertical-align: top; vertical-align: top;
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: stretch;
gap: var(--pico-block-spacing-horizontal); gap: var(--pico-block-spacing-horizontal);
img.event-flyer { img.event-flyer {
max-height: calc(var(--tr-card-height) * .666); max-height: calc(var(--tr-card-height) * .666);
max-width: calc(var(--tr-smallest-width) * .666); max-width: calc(var(--tr-smallest-width) * .666);
@ -426,6 +441,14 @@ span.andere-welten, .andere-welten .event-info {
} }
} }
span.babelsberger-lesesalon {
background: linear-gradient(100deg, color-mix(in srgb, var(--tr-events-color-bls) 75%, transparent), 75%, var(--pico-background-color));
}
span.andere-welten {
background: linear-gradient(100deg, color-mix(in srgb, var(--tr-events-color-paw) 75%, transparent), 75%, var(--pico-background-color));
}
/* flex settings for layout of cards */ /* flex settings for layout of cards */
.cards { .cards {