Changed style of event callouts
This commit is contained in:
@@ -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 {
|
||||||
|
|||||||
@@ -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)"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -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" />
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user