feat(redesign): re-skin admin-ops/platform-admin/public views to DS (Phase D batch 4 — panel re-skin complete)
All checks were successful
Test Asgard Runner / test (push) Successful in 3s
All checks were successful
Test Asgard Runner / test (push) Successful in 3s
Final re-skin batch: admin ops (Console/FileManager[VueFinder preserved]/WipeCalendar/WipeHistory/Changelog/Migration), platform-admin (Dashboard/Licenses/Servers/Subscriptions/Users), public product pages (ServerInfo/StatusPage/StoreView) + PublicLayout, WarpEditor, ErrorBoundary. All logic/store/router/WebSocket/handlers preserved. Marketing views (Landing/Pricing/FAQ/HowItWorks/Roadmap/EarlyAccess + MarketingLayout) intentionally deferred to the dedicated marketing-site redesign. Build green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Vantz Stockwell
@@ -1,7 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, watch } from 'vue'
|
||||
import { useApi } from '@/composables/useApi'
|
||||
import { Key, Search, Download, Plus, X, ChevronLeft, ChevronRight } from 'lucide-vue-next'
|
||||
import Panel from '@/components/ds/data/Panel.vue'
|
||||
import Button from '@/components/ds/core/Button.vue'
|
||||
import IconButton from '@/components/ds/core/IconButton.vue'
|
||||
import Badge from '@/components/ds/core/Badge.vue'
|
||||
import Icon from '@/components/ds/core/Icon.vue'
|
||||
import Input from '@/components/ds/forms/Input.vue'
|
||||
import Select from '@/components/ds/forms/Select.vue'
|
||||
import EmptyState from '@/components/ds/feedback/EmptyState.vue'
|
||||
|
||||
const api = useApi()
|
||||
|
||||
@@ -60,11 +67,11 @@ const statusOptions = [
|
||||
{ value: 'revoked', label: 'Revoked' },
|
||||
]
|
||||
|
||||
const statusBadgeClass: Record<string, string> = {
|
||||
active: 'bg-green-500/10 text-green-400',
|
||||
suspended: 'bg-yellow-500/10 text-yellow-400',
|
||||
expired: 'bg-neutral-700/50 text-neutral-400',
|
||||
revoked: 'bg-red-500/10 text-red-400',
|
||||
const statusTone: Record<string, 'online' | 'warn' | 'neutral' | 'offline'> = {
|
||||
active: 'online',
|
||||
suspended: 'warn',
|
||||
expired: 'neutral',
|
||||
revoked: 'offline',
|
||||
}
|
||||
|
||||
function formatDate(iso: string | null | undefined): string {
|
||||
@@ -175,214 +182,234 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6 space-y-6 bg-neutral-950 min-h-screen">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<Key class="w-5 h-5 text-oxide-500" />
|
||||
<div class="pal">
|
||||
<!-- Page head -->
|
||||
<div class="pal__head">
|
||||
<div class="pal__head-id">
|
||||
<div class="pal__chip">
|
||||
<Icon name="key" :size="20" :stroke-width="2" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-neutral-100">License Management</h1>
|
||||
<p class="text-sm text-neutral-400 mt-0.5">{{ total }} licenses total</p>
|
||||
<div class="t-eyebrow">Platform admin</div>
|
||||
<h1 class="pal__title">License management</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button
|
||||
@click="exportCsv"
|
||||
class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 rounded-lg transition-colors"
|
||||
>
|
||||
<Download class="w-4 h-4" />
|
||||
Export CSV
|
||||
</button>
|
||||
<button
|
||||
@click="showGenerateForm = !showGenerateForm"
|
||||
class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-oxide-600 hover:bg-oxide-700 rounded-lg transition-colors"
|
||||
>
|
||||
<Plus class="w-4 h-4" />
|
||||
Generate License
|
||||
</button>
|
||||
<div class="pal__head-actions">
|
||||
<Button variant="secondary" icon="download" @click="exportCsv">Export CSV</Button>
|
||||
<Button icon="plus" @click="showGenerateForm = !showGenerateForm">Generate license</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Generate License Form -->
|
||||
<div
|
||||
v-if="showGenerateForm"
|
||||
class="bg-neutral-900 border border-oxide-500/30 rounded-lg p-4"
|
||||
>
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h3 class="text-sm font-semibold text-neutral-200">Generate New License</h3>
|
||||
<button @click="showGenerateForm = false" class="text-neutral-500 hover:text-neutral-300">
|
||||
<X class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<input
|
||||
<!-- Generate license form -->
|
||||
<Panel v-if="showGenerateForm" title="Generate new license">
|
||||
<template #actions>
|
||||
<IconButton icon="x" label="Close" @click="showGenerateForm = false" />
|
||||
</template>
|
||||
<div class="pal__gen-form">
|
||||
<Input
|
||||
v-model="generateEmail"
|
||||
type="email"
|
||||
placeholder="Owner email address..."
|
||||
class="flex-1 px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
placeholder="Owner email address"
|
||||
icon="mail"
|
||||
style="flex: 1"
|
||||
@keydown.enter="generateLicense"
|
||||
/>
|
||||
<button
|
||||
@click="generateLicense"
|
||||
<Button
|
||||
icon="key"
|
||||
:loading="isGenerating"
|
||||
:disabled="isGenerating || !generateEmail.trim()"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg transition-colors"
|
||||
>
|
||||
{{ isGenerating ? 'Generating...' : 'Generate' }}
|
||||
</button>
|
||||
@click="generateLicense"
|
||||
>{{ isGenerating ? 'Generating...' : 'Generate' }}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative flex-1 max-w-sm">
|
||||
<Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
placeholder="Search by key, email, or server name..."
|
||||
class="w-full pl-10 pr-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
<div class="pal__filters">
|
||||
<Input
|
||||
v-model="searchQuery"
|
||||
placeholder="Search by key, email, or server name"
|
||||
icon="search"
|
||||
style="flex: 1; max-width: 360px"
|
||||
/>
|
||||
<Select
|
||||
v-model="statusFilter"
|
||||
class="px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
>
|
||||
<option v-for="opt in statusOptions" :key="opt.value" :value="opt.value">
|
||||
{{ opt.label }}
|
||||
</option>
|
||||
</select>
|
||||
:options="statusOptions"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
|
||||
<table class="w-full">
|
||||
<Panel :flush-body="true" :subtitle="total + ' licenses total'">
|
||||
<table class="pal__table">
|
||||
<thead>
|
||||
<tr class="border-b border-neutral-800 text-left">
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">License Key</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Owner Email</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Server Name</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Status</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Created</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Expires</th>
|
||||
<tr class="pal__thead-row">
|
||||
<th class="pal__th">License key</th>
|
||||
<th class="pal__th">Owner email</th>
|
||||
<th class="pal__th">Server name</th>
|
||||
<th class="pal__th">Status</th>
|
||||
<th class="pal__th">Created</th>
|
||||
<th class="pal__th">Expires</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-800">
|
||||
<tr v-if="licenses.length === 0 && !isLoading">
|
||||
<td colspan="6" class="px-4 py-12 text-center text-neutral-500 text-sm">
|
||||
<template v-if="searchQuery || statusFilter !== 'all'">No licenses matching your filters.</template>
|
||||
<template v-else>No licenses found.</template>
|
||||
</td>
|
||||
</tr>
|
||||
<tbody>
|
||||
<tr v-if="isLoading">
|
||||
<td colspan="6" class="px-4 py-12 text-center text-neutral-500 text-sm">Loading licenses...</td>
|
||||
<td colspan="6" class="pal__td-empty">Loading licenses...</td>
|
||||
</tr>
|
||||
<tr v-else-if="licenses.length === 0">
|
||||
<td colspan="6" class="pal__td-es">
|
||||
<EmptyState
|
||||
icon="key"
|
||||
:title="(searchQuery || statusFilter !== 'all') ? 'No matching licenses' : 'No licenses found'"
|
||||
:description="(searchQuery || statusFilter !== 'all') ? 'Try adjusting your search or filter.' : 'Generate a license to get started.'"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
v-for="license in licenses"
|
||||
:key="license.id"
|
||||
class="pal__tr"
|
||||
:class="{ 'pal__tr--selected': selectedLicenseId === license.id }"
|
||||
@click="selectLicense(license.id)"
|
||||
class="hover:bg-neutral-800/50 transition-colors cursor-pointer"
|
||||
:class="{ 'bg-neutral-800/30': selectedLicenseId === license.id }"
|
||||
>
|
||||
<td class="px-4 py-3 text-sm text-neutral-100 font-mono">{{ license.license_key }}</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">{{ license.owner_email }}</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">{{ license.server_name }}</td>
|
||||
<td class="px-4 py-3">
|
||||
<span
|
||||
class="inline-flex text-xs font-medium px-2 py-0.5 rounded-full capitalize"
|
||||
:class="statusBadgeClass[license.status] || 'bg-neutral-700/50 text-neutral-400'"
|
||||
>
|
||||
{{ license.status }}
|
||||
</span>
|
||||
<td class="pal__td pal__td--mono">{{ license.license_key }}</td>
|
||||
<td class="pal__td pal__td--secondary">{{ license.owner_email }}</td>
|
||||
<td class="pal__td pal__td--secondary">{{ license.server_name ?? '—' }}</td>
|
||||
<td class="pal__td">
|
||||
<Badge :tone="statusTone[license.status] ?? 'neutral'">{{ license.status }}</Badge>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">{{ formatDate(license.created_at) }}</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">{{ formatDate(license.expires_at) }}</td>
|
||||
<td class="pal__td pal__td--secondary">{{ formatDate(license.created_at) }}</td>
|
||||
<td class="pal__td pal__td--secondary">{{ formatDate(license.expires_at) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
<!-- Detail Panel -->
|
||||
<div
|
||||
v-if="selectedLicenseId"
|
||||
class="bg-neutral-900 border border-neutral-800 rounded-lg p-5"
|
||||
>
|
||||
<div v-if="isDetailLoading" class="space-y-3">
|
||||
<div class="h-5 w-40 bg-neutral-800 rounded animate-pulse" />
|
||||
<div class="h-4 w-64 bg-neutral-800 rounded animate-pulse" />
|
||||
<div class="h-4 w-48 bg-neutral-800 rounded animate-pulse" />
|
||||
<!-- Detail panel -->
|
||||
<Panel v-if="selectedLicenseId" title="License details">
|
||||
<template #actions>
|
||||
<IconButton icon="x" label="Close" @click="selectedLicenseId = null; selectedDetail = null" />
|
||||
</template>
|
||||
<div v-if="isDetailLoading" class="pal__detail-skeleton">
|
||||
<div class="pal__skel" />
|
||||
<div class="pal__skel pal__skel--wide" />
|
||||
<div class="pal__skel" />
|
||||
</div>
|
||||
<div v-else-if="selectedDetail">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-lg font-semibold text-neutral-100">License Details</h3>
|
||||
<button @click="selectedLicenseId = null; selectedDetail = null" class="text-neutral-500 hover:text-neutral-300">
|
||||
<X class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 text-sm">
|
||||
<div>
|
||||
<span class="text-neutral-500">License Key</span>
|
||||
<p class="text-neutral-200 mt-0.5 font-mono text-xs">{{ selectedDetail.license_key }}</p>
|
||||
<div class="pal__detail-grid">
|
||||
<div class="pal__field">
|
||||
<div class="pal__field-label">License key</div>
|
||||
<div class="pal__field-val pal__field-val--mono">{{ selectedDetail.license_key }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-neutral-500">Owner</span>
|
||||
<p class="text-neutral-200 mt-0.5">{{ selectedDetail.owner_email }}</p>
|
||||
<div class="pal__field">
|
||||
<div class="pal__field-label">Owner</div>
|
||||
<div class="pal__field-val">{{ selectedDetail.owner_email }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-neutral-500">Team Members</span>
|
||||
<p class="text-neutral-200 mt-0.5">{{ selectedDetail.team_count }}</p>
|
||||
<div class="pal__field">
|
||||
<div class="pal__field-label">Team members</div>
|
||||
<div class="pal__field-val pal__field-val--mono">{{ selectedDetail.team_count }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-neutral-500">Wipe Count</span>
|
||||
<p class="text-neutral-200 mt-0.5">{{ selectedDetail.wipe_count }}</p>
|
||||
<div class="pal__field">
|
||||
<div class="pal__field-label">Wipe count</div>
|
||||
<div class="pal__field-val pal__field-val--mono">{{ selectedDetail.wipe_count }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="selectedDetail.server_connection" class="mt-4 pt-4 border-t border-neutral-800">
|
||||
<h4 class="text-sm font-medium text-neutral-300 mb-3">Server Connection</h4>
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 text-sm">
|
||||
<div>
|
||||
<span class="text-neutral-500">Connection Type</span>
|
||||
<p class="text-neutral-200 mt-0.5 capitalize">{{ selectedDetail.server_connection.connection_type }}</p>
|
||||
<div v-if="selectedDetail.server_connection" class="pal__conn">
|
||||
<div class="pal__conn-head">Server connection</div>
|
||||
<div class="pal__detail-grid">
|
||||
<div class="pal__field">
|
||||
<div class="pal__field-label">Connection type</div>
|
||||
<div class="pal__field-val pal__field-val--mono">{{ selectedDetail.server_connection.connection_type }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-neutral-500">Server IP</span>
|
||||
<p class="text-neutral-200 mt-0.5 font-mono">{{ selectedDetail.server_connection.server_ip }}</p>
|
||||
<div class="pal__field">
|
||||
<div class="pal__field-label">Server IP</div>
|
||||
<div class="pal__field-val pal__field-val--mono">{{ selectedDetail.server_connection.server_ip }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-neutral-500">Game Port</span>
|
||||
<p class="text-neutral-200 mt-0.5 font-mono">{{ selectedDetail.server_connection.game_port }}</p>
|
||||
<div class="pal__field">
|
||||
<div class="pal__field-label">Game port</div>
|
||||
<div class="pal__field-val pal__field-val--mono">{{ selectedDetail.server_connection.game_port }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-neutral-500">Status</span>
|
||||
<p class="text-neutral-200 mt-0.5 capitalize">{{ selectedDetail.server_connection.status }}</p>
|
||||
<div class="pal__field">
|
||||
<div class="pal__field-label">Status</div>
|
||||
<div class="pal__field-val">{{ selectedDetail.server_connection.status }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-sm text-neutral-500">
|
||||
Page {{ page }} of {{ totalPages }}
|
||||
</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
@click="prevPage"
|
||||
:disabled="page <= 1"
|
||||
class="flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 disabled:opacity-40 disabled:cursor-not-allowed rounded-lg transition-colors"
|
||||
>
|
||||
<ChevronLeft class="w-4 h-4" />
|
||||
Prev
|
||||
</button>
|
||||
<button
|
||||
@click="nextPage"
|
||||
:disabled="page >= totalPages"
|
||||
class="flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 disabled:opacity-40 disabled:cursor-not-allowed rounded-lg transition-colors"
|
||||
>
|
||||
Next
|
||||
<ChevronRight class="w-4 h-4" />
|
||||
</button>
|
||||
<div class="pal__pager">
|
||||
<span class="pal__pager-info">Page {{ page }} of {{ totalPages }}</span>
|
||||
<div class="pal__pager-btns">
|
||||
<Button variant="secondary" size="sm" icon="chevron-left" :disabled="page <= 1" @click="prevPage">Prev</Button>
|
||||
<Button variant="secondary" size="sm" icon-right="chevron-right" :disabled="page >= totalPages" @click="nextPage">Next</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.pal { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
|
||||
|
||||
/* Page head */
|
||||
.pal__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; row-gap: 10px; }
|
||||
.pal__head-id { display: flex; align-items: center; gap: 12px; }
|
||||
.pal__chip {
|
||||
width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: var(--accent); background: var(--accent-soft);
|
||||
box-shadow: inset 0 0 0 1px var(--accent-border);
|
||||
}
|
||||
.pal__title {
|
||||
font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
|
||||
color: var(--text-primary); margin-top: 3px;
|
||||
}
|
||||
.pal__head-actions { display: flex; align-items: center; gap: 8px; }
|
||||
|
||||
/* Generate form */
|
||||
.pal__gen-form { display: flex; align-items: flex-end; gap: 10px; }
|
||||
|
||||
/* Filters */
|
||||
.pal__filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
||||
|
||||
/* Table */
|
||||
.pal__table { width: 100%; border-collapse: collapse; }
|
||||
.pal__thead-row { border-bottom: 1px solid var(--border-subtle); }
|
||||
.pal__th {
|
||||
padding: 10px 16px; text-align: left;
|
||||
font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary);
|
||||
text-transform: uppercase; letter-spacing: var(--tracking-wider);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.pal__tr { border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: var(--transition-colors); }
|
||||
.pal__tr:last-child { border-bottom: 0; }
|
||||
.pal__tr:hover { background: var(--surface-hover); }
|
||||
.pal__tr--selected { background: var(--accent-soft); }
|
||||
.pal__td { padding: 11px 16px; font-size: var(--text-sm); color: var(--text-primary); }
|
||||
.pal__td--secondary { color: var(--text-secondary); }
|
||||
.pal__td--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-xs); }
|
||||
.pal__td-empty { padding: 12px 16px; text-align: center; font-size: var(--text-sm); color: var(--text-tertiary); }
|
||||
.pal__td-es { padding: 0; }
|
||||
|
||||
/* Detail panel */
|
||||
.pal__detail-skeleton { display: flex; flex-direction: column; gap: 10px; }
|
||||
.pal__skel { height: 16px; width: 160px; background: var(--surface-raised-2); border-radius: var(--radius-sm); animation: pal-pulse 1.4s ease-in-out infinite; }
|
||||
.pal__skel--wide { width: 260px; }
|
||||
@keyframes pal-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
|
||||
|
||||
.pal__detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
|
||||
.pal__field-label { font-size: var(--text-xs); color: var(--text-tertiary); margin-bottom: 4px; }
|
||||
.pal__field-val { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
|
||||
.pal__field-val--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-xs); }
|
||||
|
||||
.pal__conn { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-subtle); }
|
||||
.pal__conn-head { font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-bottom: 14px; }
|
||||
|
||||
/* Pagination */
|
||||
.pal__pager { display: flex; align-items: center; justify-content: space-between; }
|
||||
.pal__pager-info { font-size: var(--text-sm); color: var(--text-tertiary); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
|
||||
.pal__pager-btns { display: flex; align-items: center; gap: 8px; }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.pal__detail-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user