Joururi/leim-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed event details colors

Browse Source
This commit is contained in:
Alexis
2024-06-10 22:46:59 +02:00
parent 9127346131
commit 87a73e7f43
3 changed files with 77 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
assets/main.css
View File

@@ -136,6 +136,75 @@
@apply text-slate-900 bg-white hover:bg-yellow-200
}
.event-details-red {
--base-color: var(--color-red-800);
}
.event-details-orange {
--base-color: var(--color-orange-800);
}
.event-details-amber {
--base-color: var(--color-amber-800);
}
.event-details-yellow {
--base-color: var(--color-yellow-800);
}
.event-details-lime {
--base-color: var(--color-lime-800);
}
.event-details-green {
--base-color: var(--color-green-800);
}
.event-details-emerald {
--base-color: var(--color-emerald-800);
}
.event-details-teal {
--base-color: var(--color-teal-800);
}
.event-details-cyan {
--base-color: var(--color-cyan-800);
}
.event-details-sky {
--base-color: var(--color-sky-800);
}
.event-details-blue {
--base-color: var(--color-blue-800);
}
.event-details-indigo {
--base-color: var(--color-indigo-800);
}
.event-details-violet {
--base-color: var(--color-violet-800);
}
.event-details-purple {
--base-color: var(--color-purple-800);
}
.event-details-fuchsia {
--base-color: var(--color-fuchsia-800);
}
.event-details-pink {
--base-color: var(--color-pink-800);
}
.event-details-rose {
--base-color: var(--color-rose-800);
}
.event-details-black {
--base-color: var(--color-stone-800);
}
.event-details-white {
--base-color: var(--color-white);
}
.event-details {
--bg-color: color-mix(in srgb, var(--base-color), var(--color-slate-950) 80%);
--border-color: color-mix(in srgb, var(--base-color), var(--color-slate-800) 50%);
background-color: var(--bg-color);
border-color: var(--border-color);
hr {
border-color: var(--border-color);
}
}
.fade-enter-active,
.fade-leave-active {
transition: all .5s ease;

99
components/calendar/CalendarEventDetails.vue
View File

@@ -1,4 +1,5 @@
<script lang="ts" setup>
import { cn } from '@/lib/utils'
import type { RPGDate } from '@/models/Date'
import type { CalendarEvent } from '@/models/CalendarEvent'
import { useCalendar } from '@/stores/CalendarStore'
@@ -62,33 +63,18 @@ function deployDeleteModal() {
<template>
<UiPopoverContent
class="event-details w-96 bg-slate-900"
class=" w-96 bg-slate-900 border-slate-800"
:align="'center'"
:align-offset="50"
:side="'left'"
:collision-padding="60"
:hide-when-detached="true"
:class="{
'border-slate-800': !event.category,
'border-lime-800': event.category?.name === 'naissance',
'border-stone-600': event.category?.name === 'mort',
'border-orange-800': event.category?.name === 'catastrophe',
'border-pink-800': event.category?.name === 'catastrophe naturelle',
'border-sky-800': event.category?.name === 'législation',
'border-purple-800': event.category?.name === 'religion',
'border-emerald-800': event.category?.name === 'joueurs',
'border-amber-800': event.category?.name === 'inauguration',
'border-green-800': event.category?.name === 'invention',
'border-cyan-800': event.category?.name === 'science',
'border-slate-600': event.category?.name === 'bénédiction',
'border-purple-700': event.category?.name === 'découverte',
'border-indigo-700': event.category?.name === 'exploration',
'border-amber-700': event.category?.name === 'construction',
'border-violet-700': event.category?.name === 'arcanologie',
'border-rose-800': event.category?.name === 'criminalité',
'border-stone-700': event.category?.name === 'scandale',
'border-yellow-600': event.category?.name === 'commerce'
}"
:class="cn(
event.category ? `event-details-${event.category.color}` : '',
{
'event-details': event.category
}
)"
>
<div ref="eventDetails" class="grid gap-1">
<header class="pr-12">
@@ -205,72 +191,3 @@ function deployDeleteModal() {
</UiTooltipProvider>
</UiPopoverContent>
</template>
<style lang="scss">
.border-slate-800 {
--base-color: var(--color-slate-800);
}
.border-lime-800 {
--base-color: var(--color-lime-800);
}
.border-stone-600 {
--base-color: var(--color-stone-600);
}
.border-orange-800 {
--base-color: var(--color-orange-800);
}
.border-pink-800 {
--base-color: var(--color-pink-800);
}
.border-sky-800 {
--base-color: var(--color-sky-800);
}
.border-purple-800 {
--base-color: var(--color-purple-800);
}
.border-emerald-800 {
--base-color: var(--color-emerald-800);
}
.border-amber-800 {
--base-color: var(--color-amber-800);
}
.border-green-800 {
--base-color: var(--color-green-800);
}
.border-cyan-800 {
--base-color: var(--color-cyan-800);
}
.border-slate-600 {
--base-color: var(--color-slate-600);
}
.border-purple-700 {
--base-color: var(--color-purple-700);
}
.border-indigo-700 {
--base-color: var(--color-indigo-700);
}
.border-amber-700 {
--base-color: var(--color-amber-700);
}
.border-violet-700 {
--base-color: var(--color-violet-700);
}
.border-rose-800 {
--base-color: var(--color-rose-800);
}
.border-stone-700 {
--base-color: var(--color-stone-700);
}
.border-yellow-600 {
--base-color: var(--color-yellow-600);
}
.event-details {
--bg-color: color-mix(in srgb, var(--base-color), var(--color-slate-950) 85%);
background-color: var(--bg-color);
hr {
border-color: var(--base-color);
}
}
</style>

1
server/api/calendars/events/[id].patch.ts
View File

@@ -64,7 +64,6 @@ export default defineEventHandler(async (event) => {
return data
} catch (err) {
console.log(err)
throw createError({
cause: 'Serveur',
status: 500,