Added light friendly calendar

This commit is contained in:
Alexis
2024-09-01 11:23:06 +02:00
parent e71a810acd
commit 6782b9bd41
9 changed files with 61 additions and 53 deletions

View File

@@ -73,10 +73,10 @@ const eventsNotDisplayed: ComputedRef<number> = computed<number>(() => eventsFo
<template>
<div
ref="calendarTile"
class="tile relative text-xs p-2 border-slate-700"
class="tile relative text-xs p-2 border-slate-400 dark:border-slate-700 dark:bg-black transition-colors"
:class="{
'text-slate-500': props.faded,
'text-slate-300': !props.faded
'text-slate-300 dark:text-slate-500': props.faded,
'text-slate-500 dark:text-slate-300': !props.faded
}"
>
<button
@@ -85,10 +85,10 @@ const eventsNotDisplayed: ComputedRef<number> = computed<number>(() => eventsFo
>
<ClientOnly>
<span
class="inline-flex w-8 h-8 aspect-square items-center justify-center rounded-full border-2 border-transparent font-bold transition-colors group-hover:border-slate-800"
class="inline-flex w-8 h-8 aspect-square items-center justify-center rounded-full border-2 border-transparent font-bold transition-colors group-hover:border-indigo-300 dark:group-hover:border-indigo-700"
:class="{
'bg-slate-800': isDefaultDate && !isSelectedDate,
'text-white bg-blue-500': isSelectedDate
'text-white bg-slate-600 dark:bg-slate-800': isDefaultDate && !isSelectedDate,
'text-white bg-indigo-500 dark:bg-indigo-400': isSelectedDate
}"
>
{{ date.day }}