feat: reskin admin pages to zine design system
Migrate the entire admin section from the dark guild-* Tailwind theme to the zine design system (dashed borders, CSS custom properties, Brygada 1918 + Commit Mono, cream/dark mode palette). - Replace admin top-nav layout with sidebar matching default layout - Reskin dashboard, members, events, series management pages - Reskin events/create and series/create form pages - Add dev-only test login endpoint (GET /api/dev/test-login) - Redirect duplicate admin/dashboard.vue to /admin - Update CLAUDE.md design system docs
This commit is contained in:
parent
f16f9ada64
commit
fcd6f4cdf4
23 changed files with 3845 additions and 3827 deletions
|
|
@ -1,312 +1,98 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="bg-guild-900 border-b border-guild-700">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="py-6">
|
||||
<h1 class="text-display font-bold text-guild-100">Admin Dashboard</h1>
|
||||
<p class="text-guild-400">
|
||||
Manage Ghost Guild members, events, and community operations
|
||||
</p>
|
||||
<div class="admin-dash">
|
||||
<!-- Page Header -->
|
||||
<div class="page-header">
|
||||
<h1>Admin Dashboard</h1>
|
||||
<p>Members, events, and community operations</p>
|
||||
</div>
|
||||
|
||||
<!-- Stats + Quick Actions row -->
|
||||
<div class="content-row">
|
||||
<div class="content-block">
|
||||
<div class="section-label">Overview</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-key">Total Members</span>
|
||||
<span class="stat-val">{{ stats.totalMembers || 0 }}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-key">Active Events</span>
|
||||
<span class="stat-val">{{ stats.activeEvents || 0 }}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-key">Monthly Revenue</span>
|
||||
<span class="stat-val">${{ stats.monthlyRevenue || 0 }}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-key">Pending Slack Invites</span>
|
||||
<span class="stat-val">{{ stats.pendingSlackInvites || 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-block">
|
||||
<div class="section-label">Quick Actions</div>
|
||||
<NuxtLink to="/admin/members" class="action-link">
|
||||
Manage Members<span class="arrow">→</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/admin/events" class="action-link">
|
||||
Manage Events<span class="arrow">→</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/admin/events/create" class="action-link">
|
||||
Create Event<span class="arrow">→</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/admin/series/create" class="action-link">
|
||||
Create Series<span class="arrow">→</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<!-- Quick Stats -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
||||
<div class="bg-guild-900 rounded-lg shadow p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-guild-400">Total Members</p>
|
||||
<p class="text-2xl font-bold text-candlelight-400 text-ui-mono">
|
||||
{{ stats.totalMembers || 0 }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="w-12 h-12 bg-candlelight-900/20 rounded-xl flex items-center justify-center"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 text-candlelight-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-.5a4 4 0 110 5.292M4 19.5a4 4 0 010-5.292"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Recent Activity row -->
|
||||
<div class="content-row">
|
||||
<div class="content-block">
|
||||
<div class="section-label">Recent Members</div>
|
||||
|
||||
<div v-if="pending" class="loading-inline">
|
||||
<div class="spinner spinner-sm" />
|
||||
</div>
|
||||
|
||||
<div class="bg-guild-900 rounded-lg shadow p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div v-else-if="recentMembers.length" class="item-list">
|
||||
<div v-for="member in recentMembers" :key="member._id" class="item-row">
|
||||
<div>
|
||||
<p class="text-sm text-guild-400">Active Events</p>
|
||||
<p class="text-2xl font-bold text-candlelight-400 text-ui-mono">
|
||||
{{ stats.activeEvents || 0 }}
|
||||
</p>
|
||||
<span class="item-name">{{ member.name }}</span>
|
||||
<span class="item-sub">{{ member.email }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="w-12 h-12 bg-candlelight-900/20 rounded-xl flex items-center justify-center"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 text-candlelight-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||
></path>
|
||||
</svg>
|
||||
<div class="item-meta">
|
||||
<span class="badge" :class="member.circle">{{ member.circle }}</span>
|
||||
<span class="item-date">{{ formatDate(member.createdAt) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="empty-state">No recent members</div>
|
||||
|
||||
<div class="bg-guild-900 rounded-lg shadow p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-guild-400">Monthly Revenue</p>
|
||||
<p class="text-2xl font-bold text-candlelight-400 text-ui-mono">
|
||||
${{ stats.monthlyRevenue || 0 }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="w-12 h-12 bg-candlelight-900/20 rounded-xl flex items-center justify-center"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 text-candlelight-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-guild-900 rounded-lg shadow p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-guild-400">Pending Slack Invites</p>
|
||||
<p class="text-2xl font-bold text-candlelight-400 text-ui-mono">
|
||||
{{ stats.pendingSlackInvites || 0 }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="w-12 h-12 bg-candlelight-900/20 rounded-xl flex items-center justify-center"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 text-candlelight-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NuxtLink to="/admin/members" class="section-link">View all members →</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
||||
<div class="bg-guild-900 rounded-lg shadow p-6">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 bg-candlelight-900/20 rounded-2xl flex items-center justify-center mx-auto mb-4"
|
||||
>
|
||||
<svg
|
||||
class="w-8 h-8 text-candlelight-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-display-sm font-semibold mb-2 text-guild-100">
|
||||
Add New Member
|
||||
</h3>
|
||||
<p class="text-guild-400 text-sm mb-4">
|
||||
Add a new member to the Ghost Guild community
|
||||
</p>
|
||||
<button
|
||||
@click="navigateTo('/admin/members')"
|
||||
class="w-full bg-candlelight-600 text-white py-2 px-4 rounded-lg hover:bg-candlelight-700 focus:ring-2 focus:ring-candlelight-500 focus:ring-offset-2"
|
||||
>
|
||||
Manage Members
|
||||
</button>
|
||||
</div>
|
||||
<div class="content-block">
|
||||
<div class="section-label">Upcoming Events</div>
|
||||
|
||||
<div v-if="pending" class="loading-inline">
|
||||
<div class="spinner spinner-sm" />
|
||||
</div>
|
||||
|
||||
<div class="bg-guild-900 rounded-lg shadow p-6">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 bg-candlelight-900/20 rounded-2xl flex items-center justify-center mx-auto mb-4"
|
||||
>
|
||||
<svg
|
||||
class="w-8 h-8 text-candlelight-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
|
||||
></path>
|
||||
</svg>
|
||||
<div v-else-if="upcomingEvents.length" class="item-list">
|
||||
<div v-for="event in upcomingEvents" :key="event._id" class="item-row">
|
||||
<div>
|
||||
<span class="item-name">{{ event.title }}</span>
|
||||
<span class="item-sub">{{ formatDateTime(event.startDate) }}</span>
|
||||
</div>
|
||||
<h3 class="text-display-sm font-semibold mb-2 text-guild-100">
|
||||
Create Event
|
||||
</h3>
|
||||
<p class="text-guild-400 text-sm mb-4">
|
||||
Schedule a new community event or workshop
|
||||
</p>
|
||||
<button
|
||||
@click="navigateTo('/admin/events')"
|
||||
class="w-full bg-candlelight-600 text-white py-2 px-4 rounded-lg hover:bg-candlelight-700 focus:ring-2 focus:ring-candlelight-500 focus:ring-offset-2"
|
||||
>
|
||||
Manage Events
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Activity -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div class="bg-guild-900 rounded-lg shadow">
|
||||
<div class="px-6 py-4 border-b border-guild-700">
|
||||
<div class="flex justify-between items-center">
|
||||
<h3 class="text-display-sm font-semibold text-guild-100">
|
||||
Recent Members
|
||||
</h3>
|
||||
<button
|
||||
@click="navigateTo('/admin/members')"
|
||||
class="text-sm text-candlelight-400 hover:text-candlelight-300"
|
||||
>
|
||||
View All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6">
|
||||
<div v-if="pending" class="text-center py-4">
|
||||
<div
|
||||
class="animate-spin rounded-full h-6 w-6 border-b-2 border-candlelight-500 mx-auto"
|
||||
></div>
|
||||
</div>
|
||||
<div v-else-if="recentMembers.length" class="space-y-3">
|
||||
<div
|
||||
v-for="member in recentMembers"
|
||||
:key="member._id"
|
||||
class="flex items-center justify-between p-3 rounded-lg border border-guild-700"
|
||||
>
|
||||
<div>
|
||||
<p class="font-medium text-guild-100">
|
||||
{{ member.name }}
|
||||
</p>
|
||||
<p class="text-sm text-guild-400">
|
||||
{{ member.email }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span
|
||||
:class="getCircleBadgeClasses(member.circle)"
|
||||
class="inline-flex px-2 py-1 text-xs font-semibold rounded-full mb-1"
|
||||
>
|
||||
{{ member.circle }}
|
||||
</span>
|
||||
<p class="text-xs text-guild-500 text-ui-mono">
|
||||
{{ formatDate(member.createdAt) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-center py-6 text-guild-500">
|
||||
No recent members
|
||||
<div class="item-meta">
|
||||
<span class="badge" :class="event.eventType">{{ event.eventType }}</span>
|
||||
<span class="item-date">{{ event.location || 'Online' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="empty-state">No upcoming events</div>
|
||||
|
||||
<div class="bg-guild-900 rounded-lg shadow">
|
||||
<div class="px-6 py-4 border-b border-guild-700">
|
||||
<div class="flex justify-between items-center">
|
||||
<h3 class="text-display-sm font-semibold text-guild-100">
|
||||
Upcoming Events
|
||||
</h3>
|
||||
<button
|
||||
@click="navigateTo('/admin/events')"
|
||||
class="text-sm text-candlelight-400 hover:text-candlelight-300"
|
||||
>
|
||||
View All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6">
|
||||
<div v-if="pending" class="text-center py-4">
|
||||
<div
|
||||
class="animate-spin rounded-full h-6 w-6 border-b-2 border-candlelight-500 mx-auto"
|
||||
></div>
|
||||
</div>
|
||||
<div v-else-if="upcomingEvents.length" class="space-y-3">
|
||||
<div
|
||||
v-for="event in upcomingEvents"
|
||||
:key="event._id"
|
||||
class="flex items-center justify-between p-3 rounded-lg border border-guild-700"
|
||||
>
|
||||
<div>
|
||||
<p class="font-medium text-guild-100">
|
||||
{{ event.title }}
|
||||
</p>
|
||||
<p class="text-sm text-guild-400">
|
||||
{{ formatDateTime(event.startDate) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span
|
||||
:class="getEventTypeBadgeClasses(event.eventType)"
|
||||
class="inline-flex px-2 py-1 text-xs font-semibold rounded-full mb-1"
|
||||
>
|
||||
{{ event.eventType }}
|
||||
</span>
|
||||
<p class="text-xs text-guild-500">
|
||||
{{ event.location || "Online" }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-center py-6 text-guild-500">
|
||||
No upcoming events
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NuxtLink to="/admin/events" class="section-link">View all events →</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -314,46 +100,233 @@
|
|||
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
layout: 'admin',
|
||||
middleware: 'admin',
|
||||
})
|
||||
|
||||
const { data: dashboardData, pending } = await useFetch("/api/admin/dashboard");
|
||||
const { data: dashboardData, pending } = await useFetch('/api/admin/dashboard')
|
||||
|
||||
const stats = computed(() => dashboardData.value?.stats || {});
|
||||
const recentMembers = computed(() => dashboardData.value?.recentMembers || []);
|
||||
const upcomingEvents = computed(
|
||||
() => dashboardData.value?.upcomingEvents || [],
|
||||
);
|
||||
|
||||
const getCircleBadgeClasses = (circle) => {
|
||||
const classes = {
|
||||
community: "bg-candlelight-900/20 text-candlelight-400",
|
||||
founder: "bg-earth-900/20 text-earth-400",
|
||||
practitioner: "bg-candlelight-900/20 text-candlelight-400",
|
||||
};
|
||||
return classes[circle] || "bg-guild-800 text-guild-300";
|
||||
};
|
||||
|
||||
const getEventTypeBadgeClasses = (type) => {
|
||||
const classes = {
|
||||
community: "bg-candlelight-900/20 text-candlelight-400",
|
||||
workshop: "bg-candlelight-900/20 text-candlelight-400",
|
||||
social: "bg-earth-900/20 text-earth-400",
|
||||
showcase: "bg-ember-900/20 text-ember-400",
|
||||
};
|
||||
return classes[type] || "bg-guild-800 text-guild-300";
|
||||
};
|
||||
const stats = computed(() => dashboardData.value?.stats || {})
|
||||
const recentMembers = computed(() => dashboardData.value?.recentMembers || [])
|
||||
const upcomingEvents = computed(() => dashboardData.value?.upcomingEvents || [])
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
return new Date(dateString).toLocaleDateString();
|
||||
};
|
||||
return new Date(dateString).toLocaleDateString()
|
||||
}
|
||||
|
||||
const formatDateTime = (dateString) => {
|
||||
return new Date(dateString).toLocaleDateString(undefined, {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
});
|
||||
};
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-dash {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ---- PAGE HEADER ---- */
|
||||
.page-header {
|
||||
padding: 28px 28px 20px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-family: 'Brygada 1918', serif;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
color: var(--text-bright);
|
||||
line-height: 1.2;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* ---- CONTENT GRID ---- */
|
||||
.content-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
border-bottom: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
.content-block {
|
||||
padding: 24px 28px;
|
||||
border-right: 1px dashed var(--border);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.content-block:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/* ---- STATS ---- */
|
||||
.stat-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.stat-row:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.stat-key {
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
.stat-val {
|
||||
color: var(--text-bright);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ---- QUICK ACTIONS ---- */
|
||||
.action-link {
|
||||
border: 1px dashed var(--border);
|
||||
padding: 14px 20px;
|
||||
margin-bottom: 8px;
|
||||
transition: border-color 0.2s;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.action-link:hover {
|
||||
border-color: var(--candle-faint);
|
||||
color: var(--candle);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.action-link .arrow {
|
||||
color: var(--text-faint);
|
||||
margin-left: 8px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.action-link:hover .arrow {
|
||||
color: var(--candle-faint);
|
||||
}
|
||||
|
||||
/* ---- ITEM LIST (members / events) ---- */
|
||||
.item-list {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.item-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.item-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
display: block;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.item-sub {
|
||||
display: block;
|
||||
color: var(--text-faint);
|
||||
font-size: 11px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.item-meta {
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.item-date {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: var(--text-faint);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* ---- SECTION LINK ---- */
|
||||
.section-link {
|
||||
display: inline-block;
|
||||
margin-top: 16px;
|
||||
font-size: 12px;
|
||||
color: var(--candle);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.section-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ---- STATES ---- */
|
||||
.loading-inline {
|
||||
padding: 24px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 2px dashed var(--candle);
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.spinner-sm {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 24px 0;
|
||||
color: var(--text-faint);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ---- RESPONSIVE ---- */
|
||||
@media (max-width: 768px) {
|
||||
.content-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.content-block {
|
||||
border-right: none;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
.content-block:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 24px 20px 16px;
|
||||
}
|
||||
|
||||
.content-block {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue