jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Migrate design system from ethereal/cool to warm/craft/guild theme

Browse source 
Replace ghost/whisper/sparkle color palettes with guild/candlelight/parchment/ember/earth tokens.
Switch typography from NB Television Pro to Quietism serif. Update all 25 Vue components,
layouts, and pages to new design system. Add circle color tokens, typography scale, prose-guild
class, and warm texture effects. Clean up stale documentation files.
This commit is contained in:
Jennie Robinson Faber 2026-02-24 20:01:11 +00:00
parent d588c49946
commit a62e167876
39 changed files with 1300 additions and 2087 deletions
Download patch file Download diff file Expand all files Collapse all files

76
app/pages/events/[id].vue
View file

@ -1,23 +1,23 @@
<template>
<div
v-if="pending"
class="min-h-screen bg-ghost-900 flex items-center justify-center"
class="min-h-screen bg-guild-900 flex items-center justify-center"
>
<div class="text-center">
<div
class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"
></div>
<p class="text-ghost-200">Loading event details...</p>
<p class="text-guild-200">Loading event details...</p>
</div>
</div>
<div
v-else-if="error"
class="min-h-screen bg-ghost-900 flex items-center justify-center"
class="min-h-screen bg-guild-900 flex items-center justify-center"
>
<div class="text-center">
<h2 class="text-2xl font-bold text-ghost-100 mb-2">Event Not Found</h2>
<p class="text-ghost-300 mb-6">
<h2 class="text-2xl font-bold text-guild-100 mb-2">Event Not Found</h2>
<p class="text-guild-300 mb-6">
The event you're looking for doesn't exist.
</p>
<NuxtLink to="/events" class="text-blue-400 hover:underline">
@ -74,35 +74,35 @@
<PageHeader v-else :title="event.title" theme="blue" size="medium" />
<!-- Event Details Section -->
<section class="py-16 bg-ghost-900">
<section class="py-16 bg-guild-900">
<UContainer>
<div class="max-w-4xl mx-auto">
<!-- Event Meta Info -->
<div class="mb-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
<div>
<p class="text-sm text-ghost-400">Date</p>
<p class="font-semibold text-ghost-100">
<p class="text-sm text-guild-400">Date</p>
<p class="font-semibold text-guild-100">
{{ formatDate(event.startDate) }}
</p>
</div>
<div>
<p class="text-sm text-ghost-400">Time</p>
<p class="font-semibold text-ghost-100">
<p class="text-sm text-guild-400">Time</p>
<p class="font-semibold text-guild-100">
{{ formatTime(event.startDate, event.endDate) }}
</p>
</div>
<div>
<p class="text-sm text-ghost-400">Location</p>
<p class="font-semibold text-ghost-100">
<p class="text-sm text-guild-400">Location</p>
<p class="font-semibold text-guild-100">
{{ event.location }}
</p>
</div>
<div>
<p class="text-sm text-ghost-400">Calendar</p>
<p class="text-sm text-guild-400">Calendar</p>
<UButton
:href="`/api/events/${route.params.id}/calendar`"
download
@ -150,7 +150,7 @@
>
<div class="flex items-center space-x-2">
<span
class="text-sm font-medium text-gray-800 dark:text-ghost-200"
class="text-sm font-medium text-gray-800 dark:text-guild-200"
>Recommended for:</span
>
<div class="flex flex-wrap gap-2">
@ -167,31 +167,31 @@
<!-- Event Description -->
<div class="prose prose-lg dark:prose-invert max-w-none mb-12">
<h2 class="text-2xl font-bold text-ghost-100 mb-4">
<h2 class="text-2xl font-bold text-guild-100 mb-4">
About This Event
</h2>
<!-- Series Description -->
<div
v-if="event.series?.isSeriesEvent && event.series.description"
class="event-series-description mb-6 p-4 bg-ghost-800/30 dark:bg-ghost-700/20 rounded-lg border border-ghost-600 dark:border-ghost-600"
class="event-series-description mb-6 p-4 bg-guild-800/30 dark:bg-guild-700/20 rounded-lg border border-guild-600 dark:border-guild-600"
>
<h3
class="event-series-description__title text-lg font-semibold text-ghost-100 dark:text-ghost-100 mb-2"
class="event-series-description__title text-lg font-semibold text-guild-100 dark:text-guild-100 mb-2"
>
About the {{ event.series.title }} Series
</h3>
<p class="event-series-description__text text-ghost-200">
<p class="event-series-description__text text-guild-200">
{{ event.series.description }}
</p>
</div>
<p class="text-ghost-200">
<p class="text-guild-200">
{{ event.description }}
</p>
<div v-if="event.agenda && event.agenda.length > 0" class="mt-8">
<h3 class="text-xl font-semibold text-ghost-100 mb-4">
<h3 class="text-xl font-semibold text-guild-100 mb-4">
Event Agenda
</h3>
<ul class="space-y-3">
@ -205,7 +205,7 @@
>
{{ index + 1 }}
</span>
<span class="text-ghost-200">{{ item }}</span>
<span class="text-guild-200">{{ item }}</span>
</li>
</ul>
</div>
@ -214,7 +214,7 @@
v-if="event.speakers && event.speakers.length > 0"
class="mt-8"
>
<h3 class="text-xl font-semibold text-ghost-100 mb-4">
<h3 class="text-xl font-semibold text-guild-100 mb-4">
Speakers
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@ -224,13 +224,13 @@
class="flex items-start space-x-4"
>
<div>
<p class="font-semibold text-ghost-100">
<p class="font-semibold text-guild-100">
{{ speaker.name }}
</p>
<p class="text-sm text-ghost-300">
<p class="text-sm text-guild-300">
{{ speaker.role }}
</p>
<p class="text-sm text-ghost-400 mt-1">
<p class="text-sm text-guild-400 mt-1">
{{ speaker.bio }}
</p>
</div>
@ -367,7 +367,7 @@
v-else-if="memberData && (!event.membersOnly || isMember)"
class="text-center"
>
<p class="text-lg text-ghost-200 mb-6">
<p class="text-lg text-guild-200 mb-6">
You are logged in, {{ memberData.name }}.
</p>
<UButton
@ -383,14 +383,14 @@
<!-- Not Logged In - Show Registration Form -->
<div v-else>
<h3 class="text-xl font-bold text-ghost-100 mb-6">
<h3 class="text-xl font-bold text-guild-100 mb-6">
Register for This Event
</h3>
<form @submit.prevent="handleRegistration" class="space-y-4">
<div>
<label
for="name"
class="block text-sm font-medium text-ghost-200 mb-2"
class="block text-sm font-medium text-guild-200 mb-2"
>
Full Name
</label>
@ -406,7 +406,7 @@
<div>
<label
for="email"
class="block text-sm font-medium text-ghost-200 mb-2"
class="block text-sm font-medium text-guild-200 mb-2"
>
Email Address
</label>
@ -422,7 +422,7 @@
<div>
<label
for="membershipLevel"
class="block text-sm font-medium text-ghost-200 mb-2"
class="block text-sm font-medium text-guild-200 mb-2"
>
Membership Status
</label>
@ -452,17 +452,17 @@
<!-- Event Capacity -->
<div
v-if="event.maxAttendees"
class="mt-6 pt-6 border-t border-ghost-700"
class="mt-6 pt-6 border-t border-guild-700"
>
<div class="flex items-center justify-between">
<span class="text-sm text-ghost-300">Event Capacity</span>
<span class="text-sm text-guild-300">Event Capacity</span>
<div class="flex items-center space-x-2">
<span class="text-sm font-semibold text-ghost-100">
<span class="text-sm font-semibold text-guild-100">
{{ event.registeredCount || 0 }} /
{{ event.maxAttendees }}
</span>
<div
class="w-24 h-2 bg-ghost-700 rounded-full overflow-hidden"
class="w-24 h-2 bg-guild-700 rounded-full overflow-hidden"
>
<div
class="h-full bg-blue-500 rounded-full"
@ -476,7 +476,7 @@
<!-- Waitlist Section -->
<div
v-if="event.tickets?.waitlist?.enabled && isEventFull"
class="mt-6 pt-6 border-t border-ghost-700"
class="mt-6 pt-6 border-t border-guild-700"
>
<!-- Already on Waitlist -->
<div v-if="isOnWaitlist" class="text-center">
@ -534,9 +534,9 @@
</div>
<!-- Additional Information -->
<div class="mt-8 p-6 rounded-xl border border-ghost-700">
<h4 class="font-semibold text-ghost-100 mb-3">Questions?</h4>
<p class="text-sm text-ghost-200 mb-3">
<div class="mt-8 p-6 rounded-xl border border-guild-700">
<h4 class="font-semibold text-guild-100 mb-3">Questions?</h4>
<p class="text-sm text-guild-200 mb-3">
If you have any questions about this event please drop us a line.
</p>
<a

144
app/pages/events/index.vue
View file

@ -8,7 +8,7 @@
/>
<!-- Events Section with Tabs -->
<section class="bg-ghost-900 dark:bg-ghost-950">
<section class="bg-guild-900 dark:bg-guild-950">
<UContainer>
<UTabs
v-model="activeTab"
@ -51,7 +51,7 @@
<div
class="flex flex-col items-center md:items-start gap-2"
>
<label class="text-sm font-medium text-ghost-200">
<label class="text-sm font-medium text-guild-200">
Show past events?
</label>
<USwitch v-model="includePastEvents" />
@ -79,10 +79,10 @@
<template #panel="{ close }">
<div
class="bg-ghost-800 dark:bg-ghost-900 p-6 rounded-md shadow-lg w-80 space-y-4"
class="bg-guild-800 dark:bg-guild-900 p-6 rounded-md shadow-lg w-80 space-y-4"
>
<div class="space-y-2">
<label class="text-sm font-medium text-ghost-200">
<label class="text-sm font-medium text-guild-200">
Filter by category
</label>
<USelectMenu
@ -107,7 +107,7 @@
<!-- Search Status Message -->
<div v-if="isSearching" class="mt-6 text-center">
<p class="text-ghost-300 text-sm">
<p class="text-guild-300 text-sm">
{{
filteredEvents.length > 0
? `Found ${filteredEvents.length} event${
@ -129,10 +129,10 @@
class="group flex items-start gap-4 py-2 hover:opacity-80 transition-opacity"
>
<div class="flex-shrink-0 text-center">
<div class="text-2xl font-bold text-ghost-100">
<div class="text-2xl font-bold text-guild-100">
{{ event.start.getDate() }}
</div>
<div class="text-xs text-ghost-400 uppercase">
<div class="text-xs text-guild-400 uppercase">
{{
event.start.toLocaleDateString("en-US", {
month: "short",
@ -144,7 +144,7 @@
<div class="flex-1 min-w-0">
<div class="flex items-start gap-2 mb-1">
<h3
class="text-lg font-semibold text-ghost-100 group-hover:text-primary transition-colors"
class="text-lg font-semibold text-guild-100 group-hover:text-primary transition-colors"
>
{{ event.title }}
</h3>
@ -155,7 +155,7 @@
/>
</div>
<p class="text-sm text-ghost-300 mb-2 line-clamp-2">
<p class="text-sm text-guild-300 mb-2 line-clamp-2">
{{ event.content }}
</p>
@ -171,7 +171,7 @@
<Icon
name="heroicons:arrow-right"
class="w-5 h-5 text-ghost-400 group-hover:text-primary group-hover:translate-x-1 transition-all flex-shrink-0 mt-1"
class="w-5 h-5 text-guild-400 group-hover:text-primary group-hover:translate-x-1 transition-all flex-shrink-0 mt-1"
/>
</NuxtLink>
</div>
@ -183,13 +183,13 @@
<ClientOnly>
<div
v-if="pending"
class="min-h-[400px] bg-ghost-800 rounded-xl flex items-center justify-center"
class="min-h-[400px] bg-guild-800 rounded-xl flex items-center justify-center"
>
<div class="text-center">
<div
class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"
></div>
<p class="text-ghost-200">Loading calendar...</p>
<p class="text-guild-200">Loading calendar...</p>
</div>
</div>
<div v-else style="min-height: 600px">
@ -198,7 +198,7 @@
:events="calendarEvents"
:time="false"
active-view="month"
class="ghost-calendar"
class="guild-calendar"
:disable-views="['years', 'year']"
:hide-view-selector="false"
events-on-month-view="short"
@ -209,13 +209,13 @@
</div>
<template #fallback>
<div
class="min-h-[400px] bg-ghost-800 rounded-xl flex items-center justify-center"
class="min-h-[400px] bg-guild-800 rounded-xl flex items-center justify-center"
>
<div class="text-center">
<div
class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"
></div>
<p class="text-ghost-200">Loading calendar...</p>
<p class="text-guild-200">Loading calendar...</p>
</div>
</div>
</template>
@ -229,7 +229,7 @@
<!-- Event Series -->
<div v-if="activeSeries.length > 0" class="text-center my-12">
<h2 class="text-3xl font-bold text-ghost-100 mb-8">
<h2 class="text-3xl font-bold text-guild-100 mb-8">
Current Event Series
</h2>
</div>
@ -242,17 +242,17 @@
v-for="series in activeSeries.slice(0, 6)"
:key="series.id"
:to="`/series/${series.id}`"
class="series-list-item block bg-ghost-800/50 dark:bg-ghost-700/30 rounded-xl p-6 border border-ghost-600 dark:border-ghost-600 hover:border-ghost-500 hover:bg-ghost-800/70 dark:hover:bg-ghost-700/50 transition-all duration-300"
class="series-list-item block bg-guild-800/50 dark:bg-guild-700/30 rounded-xl p-6 border border-guild-600 dark:border-guild-600 hover:border-guild-500 hover:bg-guild-800/70 dark:hover:bg-guild-700/50 transition-all duration-300"
>
<div class="flex items-start justify-between mb-4">
<div class="flex items-center gap-2">
<span
class="series-list-item__label text-sm font-semibold text-ghost-300 dark:text-ghost-300"
class="series-list-item__label text-sm font-semibold text-guild-300 dark:text-guild-300"
>
Event Series
</span>
<span
class="series-list-item__count inline-flex items-center px-2 py-0.5 rounded-md bg-ghost-700/50 dark:bg-ghost-600/50 text-sm font-medium text-ghost-200 dark:text-ghost-200"
class="series-list-item__count inline-flex items-center px-2 py-0.5 rounded-md bg-guild-700/50 dark:bg-guild-600/50 text-sm font-medium text-guild-200 dark:text-guild-200"
>
{{ series.eventCount }} events
</span>
@ -272,13 +272,13 @@
</div>
<h3
class="series-list-item__title text-lg font-semibold text-ghost-100 dark:text-ghost-100 mb-2"
class="series-list-item__title text-lg font-semibold text-guild-100 dark:text-guild-100 mb-2"
>
{{ series.title }}
</h3>
<p
class="series-list-item__description text-sm text-ghost-300 dark:text-ghost-300 mb-4 line-clamp-2"
class="series-list-item__description text-sm text-guild-300 dark:text-guild-300 mb-4 line-clamp-2"
>
{{ series.description }}
</p>
@ -291,31 +291,31 @@
>
<div class="flex items-center gap-2">
<div
class="series-list-item__event-number w-6 h-6 bg-ghost-700/50 dark:bg-ghost-600/50 text-ghost-200 dark:text-ghost-200 rounded-full flex items-center justify-center text-xs font-medium border border-ghost-600 dark:border-ghost-500"
class="series-list-item__event-number w-6 h-6 bg-guild-700/50 dark:bg-guild-600/50 text-guild-200 dark:text-guild-200 rounded-full flex items-center justify-center text-xs font-medium border border-guild-600 dark:border-guild-500"
>
{{ event.series?.position || index + 1 }}
</div>
<span
class="series-list-item__event-title text-ghost-200 dark:text-ghost-200 truncate"
class="series-list-item__event-title text-guild-200 dark:text-guild-200 truncate"
>{{ event.title }}</span
>
</div>
<span
class="series-list-item__event-date text-ghost-300 dark:text-ghost-300"
class="series-list-item__event-date text-guild-300 dark:text-guild-300"
>
{{ formatEventDate(event.startDate) }}
</span>
</div>
<div
v-if="series.events.length > 3"
class="series-list-item__more-events text-xs text-ghost-300 dark:text-ghost-300 text-center pt-1"
class="series-list-item__more-events text-xs text-guild-300 dark:text-guild-300 text-center pt-1"
>
+{{ series.events.length - 3 }} more events
</div>
</div>
<div
class="series-list-item__date-range text-sm text-ghost-300 dark:text-ghost-300"
class="series-list-item__date-range text-sm text-guild-300 dark:text-guild-300"
>
{{ formatDateRange(series.startDate, series.endDate) }}
</div>
@ -323,27 +323,27 @@
</div>
<!-- Attend Our Events -->
<section class="py-20 bg-ghost-800 dark:bg-ghost-900">
<section class="py-20 bg-guild-800 dark:bg-guild-900">
<UContainer>
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-ghost-100 mb-8">
<h2 class="text-3xl font-bold text-guild-100 mb-8">
Attend Our Events
</h2>
</div>
<div class="max-w-4xl mx-auto">
<div
class="bg-ghost-900 rounded-2xl p-8 border border-ghost-700 mb-12"
class="bg-guild-900 rounded-2xl p-8 border border-guild-700 mb-12"
>
<div class="prose prose-lg dark:prose-invert max-w-none">
<p class="text-lg leading-relaxed text-ghost-200 mb-6">
<p class="text-lg leading-relaxed text-guild-200 mb-6">
Our events bring together game developers, founders, and practitioners
who are building more equitable workplaces. From hands-on workshops
about governance and finance to casual co-working sessions and game nights,
there's something for every stage of your journey.
</p>
<p class="text-lg leading-relaxed text-ghost-200 mb-6">
<p class="text-lg leading-relaxed text-guild-200 mb-6">
All events are designed to be accessible, with most offered free to members
and sliding-scale pricing for non-members. Can't make it live?
Many sessions are recorded and shared in our resource library.
@ -353,31 +353,31 @@
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center">
<h3 class="text-lg font-semibold text-ghost-100 mb-2">
<h3 class="text-lg font-semibold text-guild-100 mb-2">
Monthly Meetups
</h3>
<p class="text-sm text-ghost-300">
<p class="text-sm text-guild-300">
Casual knowledge sharing sessions
</p>
</div>
<div class="text-center">
<h3 class="text-lg font-semibold text-ghost-100 mb-2">
<h3 class="text-lg font-semibold text-guild-100 mb-2">
Workshops
</h3>
<p class="text-sm text-ghost-300">
<p class="text-sm text-guild-300">
Hands-on learning about cooperative and worker-centric business
models
</p>
</div>
<div class="text-center">
<h3 class="text-lg font-semibold text-ghost-100 mb-2">
<h3 class="text-lg font-semibold text-guild-100 mb-2">
Social Events
</h3>
<p class="text-sm text-ghost-300">
<p class="text-sm text-guild-300">
Game nights, socials, and more
</p>
</div>
@ -638,47 +638,47 @@ const getSeriesTypeBadgeClass = (type) => {
}
/* Calendar styling based on tranzac design principles */
.ghost-calendar :deep(.vuecal__event) {
.guild-calendar :deep(.vuecal__event) {
border-radius: 0.5rem;
border: 2px solid #292524;
transform: translateZ(0);
transition: transform 300ms;
}
.ghost-calendar :deep(.vuecal__event:hover) {
.guild-calendar :deep(.vuecal__event:hover) {
transform: scale(1.05);
}
.ghost-calendar :deep(.vuecal__event-title) {
.guild-calendar :deep(.vuecal__event-title) {
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ghost-calendar :deep(.vuecal__event-time) {
.guild-calendar :deep(.vuecal__event-time) {
display: none;
}
.ghost-calendar :deep(.vuecal__event.event-community) {
.guild-calendar :deep(.vuecal__event.event-community) {
background-color: #2563eb;
color: #f5f5f4;
border-color: #1d4ed8;
}
.ghost-calendar :deep(.vuecal__event.event-workshop) {
.guild-calendar :deep(.vuecal__event.event-workshop) {
background-color: #059669;
color: #f5f5f4;
border-color: #047857;
}
.ghost-calendar :deep(.vuecal__event.event-social) {
.guild-calendar :deep(.vuecal__event.event-social) {
background-color: #7c3aed;
color: #f5f5f4;
border-color: #6d28d9;
}
.ghost-calendar :deep(.vuecal__event.event-showcase) {
.guild-calendar :deep(.vuecal__event.event-showcase) {
background-color: #d97706;
color: #f5f5f4;
border-color: #b45309;
@ -829,7 +829,7 @@ const getSeriesTypeBadgeClass = (type) => {
}
/* Ghost calendar theme */
.ghost-calendar {
.guild-calendar {
--vuecal-primary-color: #fff;
--vuecal-text-color: #e7e5e4;
--vuecal-border-color: #57534e;
@ -838,120 +838,120 @@ const getSeriesTypeBadgeClass = (type) => {
background-color: #292524;
}
.ghost-calendar :deep(.vuecal__bg) {
.guild-calendar :deep(.vuecal__bg) {
background-color: #292524;
}
.ghost-calendar :deep(.vuecal__header) {
.guild-calendar :deep(.vuecal__header) {
background-color: #1c1917;
border-bottom: 1px solid #57534e;
}
.ghost-calendar :deep(.vuecal__title-bar) {
.guild-calendar :deep(.vuecal__title-bar) {
background-color: #1c1917;
}
.ghost-calendar :deep(.vuecal__title) {
.guild-calendar :deep(.vuecal__title) {
color: #e7e5e4;
font-weight: 600;
}
.ghost-calendar :deep(.vuecal__weekdays-headings) {
.guild-calendar :deep(.vuecal__weekdays-headings) {
background-color: #1c1917;
border-bottom: 1px solid #57534e;
}
.ghost-calendar :deep(.vuecal__heading) {
.guild-calendar :deep(.vuecal__heading) {
color: #a8a29e;
font-weight: 500;
}
.ghost-calendar :deep(.vuecal__cell) {
.guild-calendar :deep(.vuecal__cell) {
background-color: #292524;
border-color: #57534e;
color: #e7e5e4;
}
.ghost-calendar :deep(.vuecal__cell:hover) {
.guild-calendar :deep(.vuecal__cell:hover) {
background-color: #44403c;
border-color: #78716c;
}
.ghost-calendar :deep(.vuecal__cell-content) {
.guild-calendar :deep(.vuecal__cell-content) {
color: #e7e5e4;
}
.ghost-calendar :deep(.vuecal__cell--today) {
.guild-calendar :deep(.vuecal__cell--today) {
background-color: rgba(59, 130, 246, 0.1);
border: 2px solid #3b82f6;
}
.ghost-calendar :deep(.vuecal__cell--out-of-scope) {
.guild-calendar :deep(.vuecal__cell--out-of-scope) {
background-color: #1c1917;
color: #78716c;
}
.ghost-calendar :deep(.vuecal__arrow) {
.guild-calendar :deep(.vuecal__arrow) {
color: #a8a29e;
}
.ghost-calendar :deep(.vuecal__arrow:hover) {
.guild-calendar :deep(.vuecal__arrow:hover) {
background-color: #44403c;
}
.ghost-calendar :deep(.vuecal__today-btn) {
.guild-calendar :deep(.vuecal__today-btn) {
background-color: #44403c;
color: #fff;
border: 1px solid #78716c;
font-weight: 600;
}
.ghost-calendar :deep(.vuecal__today-btn:hover) {
.guild-calendar :deep(.vuecal__today-btn:hover) {
background-color: #57534e;
border-color: #a8a29e;
}
.ghost-calendar :deep(.vuecal__view-btn),
.ghost-calendar :deep(button[class*="view"]) {
.guild-calendar :deep(.vuecal__view-btn),
.guild-calendar :deep(button[class*="view"]) {
background-color: #44403c !important;
color: #ffffff !important;
border: 1px solid #78716c !important;
font-weight: 600 !important;
}
.ghost-calendar :deep(.vuecal__view-btn:hover),
.ghost-calendar :deep(button[class*="view"]:hover) {
.guild-calendar :deep(.vuecal__view-btn:hover),
.guild-calendar :deep(button[class*="view"]:hover) {
background-color: #57534e !important;
border-color: #a8a29e !important;
color: #ffffff !important;
}
.ghost-calendar :deep(.vuecal__view-btn--active),
.ghost-calendar :deep(button[class*="view"][class*="active"]) {
.guild-calendar :deep(.vuecal__view-btn--active),
.guild-calendar :deep(button[class*="view"][class*="active"]) {
background-color: #0c0a09 !important;
color: #ffffff !important;
border-color: #a8a29e !important;
}
.ghost-calendar :deep(.vuecal__view-btn--active:hover),
.ghost-calendar :deep(button[class*="view"][class*="active"]:hover) {
.guild-calendar :deep(.vuecal__view-btn--active:hover),
.guild-calendar :deep(button[class*="view"][class*="active"]:hover) {
background-color: #1c1917 !important;
border-color: #d6d3d1 !important;
color: #ffffff !important;
}
.ghost-calendar :deep(.vuecal__title-bar button) {
.guild-calendar :deep(.vuecal__title-bar button) {
color: #ffffff !important;
font-weight: 600 !important;
}
.ghost-calendar :deep(.vuecal__title-bar .default-view-btn) {
.guild-calendar :deep(.vuecal__title-bar .default-view-btn) {
background-color: #44403c !important;
color: #ffffff !important;
border: 1px solid #78716c !important;
}
.ghost-calendar :deep(.vuecal__title-bar .default-view-btn.active) {
.guild-calendar :deep(.vuecal__title-bar .default-view-btn.active) {
background-color: #0c0a09 !important;
border-color: #a8a29e !important;
}