Changed style of event callouts

This commit is contained in:
Alexis
2025-02-28 23:04:26 +01:00
parent 0cc6d0f1ee
commit d663253a05
3 changed files with 9 additions and 9 deletions

View File

@@ -149,19 +149,19 @@
} }
.event-red.is-hidden { .event-red.is-hidden {
@apply text-red-500 dark:hover:text-slate-900 border-red-500 hover:bg-red-600 dark:text-white @apply text-red-500 hover:text-white dark:hover:text-slate-900 border-red-500 hover:bg-red-600 dark:text-white
} }
.event-orange.is-hidden { .event-orange.is-hidden {
@apply text-orange-500 dark:hover:text-slate-900 border-orange-500 hover:bg-orange-600 dark:text-white @apply text-orange-500 hover:text-white dark:hover:text-slate-900 border-orange-500 hover:bg-orange-600 dark:text-white
} }
.event-amber.is-hidden { .event-amber.is-hidden {
@apply text-amber-500 dark:hover:text-slate-900 border-amber-500 hover:bg-amber-600 dark:text-white @apply text-amber-500 hover:text-white dark:hover:text-slate-900 border-amber-500 hover:bg-amber-600 dark:text-white
} }
.event-yellow.is-hidden { .event-yellow.is-hidden {
@apply text-yellow-600 dark:hover:text-slate-900 border-yellow-600 hover:bg-yellow-700 dark:text-white @apply text-yellow-600 hover:text-white dark:hover:text-slate-900 border-yellow-600 hover:bg-yellow-700 dark:text-white
} }
.event-lime.is-hidden { .event-lime.is-hidden {
@apply text-lime-500 dark:hover:text-slate-900 border-lime-500 hover:bg-lime-600 dark:text-white @apply text-lime-500 hover:text-white dark:hover:text-slate-900 border-lime-500 hover:bg-lime-600 dark:text-white
} }
.event-green.is-hidden { .event-green.is-hidden {
@apply text-green-600 hover:text-white border-green-600 hover:bg-green-700 dark:text-white @apply text-green-600 hover:text-white border-green-600 hover:bg-green-700 dark:text-white
@@ -203,7 +203,7 @@
@apply text-stone-700 hover:text-white border-stone-500 hover:bg-stone-700 dark:text-white @apply text-stone-700 hover:text-white border-stone-500 hover:bg-stone-700 dark:text-white
} }
.event-white.is-hidden { .event-white.is-hidden {
@apply text-slate-900 dark:hover:text-slate-900 border-white hover:bg-yellow-200 border-[1px] dark:text-white @apply text-slate-900 dark:hover:text-slate-900 border-neutral-400 hover:bg-yellow-200 dark:text-white
} }
.dark .event-details-red { .dark .event-details-red {

View File

@@ -21,11 +21,11 @@ const dateDuration = computed<string | null>(() => props.event.endDate ? getRela
<template> <template>
<button <button
class="relative block w-full text-left py-3 px-4 rounded-sm transition-colors" class="event relative block w-full text-left py-3 px-4 rounded-sm transition-colors"
:class="cn( :class="cn(
event.category ? `event-${event.category.color}` : '', event.category ? `event-${event.category.color}` : '',
{ {
'pt-4': event.hidden, 'pt-4 is-hidden': event.hidden,
})" })"
@click="$emit('query:date-jump', event.startDate)" @click="$emit('query:date-jump', event.startDate)"
> >

View File

@@ -60,7 +60,7 @@ const pagedResults = computed(() => sortedResults.value.slice(props.startAt, pro
</script> </script>
<template> <template>
<ul class="grid gap-4"> <ul class="grid gap-4 pl-8 pr-12">
<li v-for="r in pagedResults" :key="isCalendarEvent(r) ? r.title : r.name"> <li v-for="r in pagedResults" :key="isCalendarEvent(r) ? r.title : r.name">
<EventCallout v-if="isCalendarEvent(r)" :event="r" @query:date-jump="handleJumpToDate" /> <EventCallout v-if="isCalendarEvent(r)" :event="r" @query:date-jump="handleJumpToDate" />