Initial open-source release (MIT): image2api AI gateway
Full Go backend + Vue 3 frontend, OpenAI-compatible API, multi-provider account pools, billing/admin, Docker one-command deploy with auto HTTPS. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
@@ -0,0 +1,438 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { api } from '../api'
|
||||
import { fmtTs, fmtDate, fmtClock } from '../utils/format'
|
||||
import { generatedUrl } from '../api'
|
||||
import Icon from '../components/Icon.vue'
|
||||
import MediaLightbox from '../components/MediaLightbox.vue'
|
||||
|
||||
const items = ref([])
|
||||
const stats = ref({ total: 0, success: 0, failed: 0, pending: 0 })
|
||||
const loading = ref(false)
|
||||
const kindFilter = ref('') // '' | 'image' | 'video'
|
||||
const statusFilter = ref('') // '' | 'success' | 'failed' | 'pending'
|
||||
const sourceFilter = ref('') // '' | 'v1' | 'user' | 'admin'
|
||||
const search = ref('')
|
||||
const page = ref(1)
|
||||
const pageSize = ref(15)
|
||||
const total = ref(0)
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
const offset = (page.value - 1) * pageSize.value
|
||||
const qs = new URLSearchParams({ limit: String(pageSize.value), offset: String(offset) })
|
||||
// Admin 日志 page: request the full cross-user view. The backend only honors
|
||||
// scope=all for admins; without it /logs returns the caller's own records.
|
||||
qs.set('scope', 'all')
|
||||
if (kindFilter.value) qs.set('kind', kindFilter.value)
|
||||
if (statusFilter.value) qs.set('status', statusFilter.value)
|
||||
if (sourceFilter.value) qs.set('source', sourceFilter.value)
|
||||
const r = await api('/logs?' + qs.toString())
|
||||
items.value = r.data?.data || []
|
||||
total.value = Number(r.data?.total ?? items.value.length)
|
||||
stats.value = r.data?.stats || { total: 0, success: 0, failed: 0, pending: 0 }
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
|
||||
const pageStart = computed(() => total.value === 0 ? 0 : (page.value - 1) * pageSize.value + 1)
|
||||
const pageEnd = computed(() => Math.min(total.value, page.value * pageSize.value))
|
||||
|
||||
// Numbered pagination strip: always shows first + last + a window around
|
||||
// the current page; gaps collapse to `null` (rendered as "…").
|
||||
const pageNumbers = computed(() => {
|
||||
const n = totalPages.value
|
||||
const cur = page.value
|
||||
if (n <= 7) return Array.from({ length: n }, (_, i) => i + 1)
|
||||
const want = new Set([1, n, cur - 1, cur, cur + 1])
|
||||
// pad the second slot from each end so 1 2 … X … N-1 N feels balanced
|
||||
if (cur <= 3) { want.add(2); want.add(3); want.add(4) }
|
||||
if (cur >= n - 2) { want.add(n - 1); want.add(n - 2); want.add(n - 3) }
|
||||
const list = [...want].filter((x) => x >= 1 && x <= n).sort((a, b) => a - b)
|
||||
const out = []
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
if (i > 0 && list[i] - list[i - 1] > 1) out.push(null)
|
||||
out.push(list[i])
|
||||
}
|
||||
return out
|
||||
})
|
||||
|
||||
function goPage(n) {
|
||||
const target = Math.max(1, Math.min(totalPages.value, n))
|
||||
if (target === page.value) return
|
||||
page.value = target
|
||||
load()
|
||||
}
|
||||
|
||||
// Filters reset the cursor so a narrower view always starts on page 1.
|
||||
function setKind(v) { kindFilter.value = v; page.value = 1; load() }
|
||||
function setStatus(v) { statusFilter.value = v; page.value = 1; load() }
|
||||
function setSource(v) { sourceFilter.value = v; page.value = 1; load() }
|
||||
|
||||
const filtered = computed(() => {
|
||||
const q = search.value.trim().toLowerCase()
|
||||
if (!q) return items.value
|
||||
return items.value.filter((e) =>
|
||||
(e.model || '').toLowerCase().includes(q) ||
|
||||
(e.prompt || '').toLowerCase().includes(q) ||
|
||||
(e.error || '').toLowerCase().includes(q),
|
||||
)
|
||||
})
|
||||
|
||||
function fmtMs(ms) {
|
||||
if (!ms) return '—'
|
||||
if (ms < 1000) return ms + 'ms'
|
||||
return Math.round(ms / 1000) + 's'
|
||||
}
|
||||
|
||||
// One-line timestamp: within 3 days show a relative phrase ("12h 前"),
|
||||
// older entries collapse to a full Y-M-D H:M:S so the row stays compact.
|
||||
function fmtWhen(ts) {
|
||||
if (!ts) return '—'
|
||||
return fmtTs(ts)
|
||||
}
|
||||
|
||||
const previewing = ref(null) // entry whose generated file is open in the lightbox
|
||||
function openPreview(e) {
|
||||
// API (v1) outputs aren't persisted/served by us (image=b64 inline, video=an
|
||||
// upstream URL for /content) — no in-log preview, same as images. Skip them.
|
||||
if (e.status !== 'success' || !e.file || e.source === 'v1') return
|
||||
previewing.value = e
|
||||
}
|
||||
function closePreview() { previewing.value = null }
|
||||
function onKey(ev) { if (ev.key === 'Escape') closePreview() }
|
||||
|
||||
// 日志不支持手动清空(清空按钮已移除);仅由后台保留期策略自动清理。
|
||||
|
||||
// Auto-refresh removed: the admin can hit 刷新 / change a filter to reload.
|
||||
onMounted(() => {
|
||||
load()
|
||||
window.addEventListener('keydown', onKey)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('keydown', onKey)
|
||||
})
|
||||
|
||||
// ---- chip helpers ----
|
||||
const statusLabel = (s) => ({ success: '成功', failed: '失败', pending: '进行中' }[s] || s)
|
||||
const statusPill = (s) => ({
|
||||
success: 'bg-emerald-500/10 text-emerald-300 ring-emerald-400/30',
|
||||
failed: 'bg-rose-500/10 text-rose-300 ring-rose-400/30',
|
||||
pending: 'bg-amber-500/10 text-amber-300 ring-amber-400/30',
|
||||
}[s] || 'bg-white/[0.06] text-white/65 ring-white/15')
|
||||
const statusDot = (s) => ({
|
||||
success: 'bg-emerald-400',
|
||||
failed: 'bg-rose-400',
|
||||
pending: 'bg-amber-400',
|
||||
}[s] || 'bg-white/40')
|
||||
|
||||
// Source: backend stamps "v1" (API key), "user" (画图台), "admin" (后台测试模型).
|
||||
const sourceLabel = (s) => ({ v1: 'API', user: '画图台', admin: '测试' }[s] || '画图台')
|
||||
const sourcePill = (s) => ({
|
||||
v1: 'bg-violet-500/15 text-violet-300 ring-violet-400/30',
|
||||
admin: 'bg-amber-500/15 text-amber-300 ring-amber-400/30',
|
||||
user: 'bg-sky-500/15 text-sky-300 ring-sky-400/30',
|
||||
}[s] || 'bg-sky-500/15 text-sky-300 ring-sky-400/30')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="space-y-4">
|
||||
<!-- KPI strip — dense pills aligned with the dashboard tints -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
<div class="card p-4">
|
||||
<div class="text-[11px] uppercase tracking-wider text-white/45">总计</div>
|
||||
<div class="text-2xl font-semibold mt-1 tabular-nums">{{ stats.total }}</div>
|
||||
</div>
|
||||
<div class="card p-4">
|
||||
<div class="text-[11px] uppercase tracking-wider text-emerald-300/80">成功</div>
|
||||
<div class="text-2xl font-semibold mt-1 tabular-nums text-emerald-300">{{ stats.success }}</div>
|
||||
</div>
|
||||
<div class="card p-4">
|
||||
<div class="text-[11px] uppercase tracking-wider text-rose-300/80">失败</div>
|
||||
<div class="text-2xl font-semibold mt-1 tabular-nums text-rose-300">{{ stats.failed }}</div>
|
||||
</div>
|
||||
<div class="card p-4">
|
||||
<div class="text-[11px] uppercase tracking-wider text-amber-300/80">进行中</div>
|
||||
<div class="text-2xl font-semibold mt-1 tabular-nums text-amber-300">{{ stats.pending }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toolbar -->
|
||||
<div class="card p-3 flex items-center gap-3 flex-wrap">
|
||||
<div class="flex items-center gap-1">
|
||||
<button @click="setKind('')" class="fp" :class="kindFilter === '' && 'fp-on'">全部</button>
|
||||
<button @click="setKind('image')" class="fp" :class="kindFilter === 'image' && 'fp-on'">图像</button>
|
||||
<button @click="setKind('video')" class="fp" :class="kindFilter === 'video' && 'fp-on'">视频</button>
|
||||
</div>
|
||||
<div class="w-px h-5 bg-white/10"></div>
|
||||
<div class="flex items-center gap-1">
|
||||
<button @click="setStatus('')" class="fp" :class="statusFilter === '' && 'fp-on'">所有状态</button>
|
||||
<button @click="setStatus('success')" class="fp" :class="statusFilter === 'success' && 'fp-emerald'">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>成功
|
||||
</button>
|
||||
<button @click="setStatus('failed')" class="fp" :class="statusFilter === 'failed' && 'fp-rose'">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-rose-400"></span>失败
|
||||
</button>
|
||||
<button @click="setStatus('pending')" class="fp" :class="statusFilter === 'pending' && 'fp-amber'">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>进行中
|
||||
</button>
|
||||
</div>
|
||||
<div class="w-px h-5 bg-white/10"></div>
|
||||
<div class="flex items-center gap-1">
|
||||
<button @click="setSource('')" class="fp" :class="sourceFilter === '' && 'fp-on'">所有来源</button>
|
||||
<button @click="setSource('user')" class="fp" :class="sourceFilter === 'user' && 'fp-on'">画图台</button>
|
||||
<button @click="setSource('v1')" class="fp" :class="sourceFilter === 'v1' && 'fp-on'">API</button>
|
||||
<button @click="setSource('admin')" class="fp" :class="sourceFilter === 'admin' && 'fp-on'">测试</button>
|
||||
</div>
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<input v-model="search" class="field !py-1.5 text-xs" placeholder="搜索 模型 / 提示词 / 错误…" />
|
||||
</div>
|
||||
<button @click="load" class="btn-soft">
|
||||
<Icon name="refresh" class="w-3.5 h-3.5" /> 刷新
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="card overflow-hidden">
|
||||
<div v-if="loading && !items.length" class="text-center text-sm text-white/40 py-20">加载中…</div>
|
||||
<div v-else-if="!filtered.length" class="flex flex-col items-center gap-3 text-white/40 py-20">
|
||||
<span class="w-14 h-14 rounded-2xl bg-white/[0.04] grid place-items-center"><Icon name="files" class="w-6 h-6" /></span>
|
||||
<!-- Search is client-side over the CURRENT page only, so "no match" here
|
||||
doesn't mean the term is absent globally — say so to avoid confusion. -->
|
||||
<span class="text-sm">{{ search.trim() ? '当前页没有匹配的记录(搜索仅作用于本页)' : '还没有日志' }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Each row is a thumbnail + a stack of model/prompt + a meta line.
|
||||
Beats a 9-column table for scanability — the eye lands on the
|
||||
image first, then reads the model + intent, then params. -->
|
||||
<table v-else class="w-full text-sm table-fixed log-table">
|
||||
<colgroup>
|
||||
<col class="w-20" /> <!-- preview -->
|
||||
<col class="w-32" /> <!-- time -->
|
||||
<col class="w-24" /> <!-- status -->
|
||||
<col class="w-28" /> <!-- user -->
|
||||
<col class="w-40" /> <!-- model -->
|
||||
<col /> <!-- prompt + error -->
|
||||
<col class="w-48" /> <!-- params -->
|
||||
<col class="w-16" /> <!-- credits -->
|
||||
<col class="w-16" /> <!-- elapsed -->
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr class="text-[10px] uppercase tracking-[0.2em] text-white/40 border-b border-white/[0.06]">
|
||||
<th class="text-center px-4 py-3 font-medium">预览</th>
|
||||
<th class="text-left px-4 py-3 font-medium">时间</th>
|
||||
<th class="text-left px-3 py-3 font-medium">状态</th>
|
||||
<th class="text-left px-3 py-3 font-medium">用户</th>
|
||||
<th class="text-left px-3 py-3 font-medium">模型</th>
|
||||
<th class="text-left px-3 py-3 font-medium">提示词 / 错误</th>
|
||||
<th class="text-left px-3 py-3 font-medium">参数</th>
|
||||
<th class="text-right px-3 py-3 font-medium">积分</th>
|
||||
<th class="text-right px-4 py-3 font-medium">耗时</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="e in filtered" :key="e.id" class="log-row">
|
||||
<td class="px-4 py-3.5 align-middle text-center">
|
||||
<button v-if="e.status === 'success' && e.file && e.source !== 'v1'"
|
||||
@click="openPreview(e)"
|
||||
class="block w-12 h-12 mx-auto rounded-lg overflow-hidden ring-1 ring-white/10 hover:ring-fuchsia-400/60 transition-all">
|
||||
<img v-if="e.kind !== 'video'" :src="generatedUrl(e.file)" loading="lazy"
|
||||
class="w-full h-full object-cover" />
|
||||
<video v-else :src="generatedUrl(e.file)" muted loop preload="metadata" playsinline
|
||||
class="w-full h-full object-cover"
|
||||
@mouseenter="$event.target.play && $event.target.play()"
|
||||
@mouseleave="$event.target.pause && $event.target.pause()" />
|
||||
</button>
|
||||
<div v-else-if="e.status === 'pending'" class="w-12 h-12 mx-auto rounded-lg bg-amber-500/10 ring-1 ring-amber-400/30 grid place-items-center">
|
||||
<span class="w-2 h-2 rounded-full bg-amber-400 animate-pulse"></span>
|
||||
</div>
|
||||
<!-- failed (and any non-success/non-pending) rows: no thumbnail, just a dash.
|
||||
The 状态 column already flags the failure. -->
|
||||
<span v-else class="text-white/20">—</span>
|
||||
</td>
|
||||
<td class="px-4 py-3.5 align-middle text-xs whitespace-nowrap" :title="fmtTs(e.ts)">
|
||||
<div v-if="e.ts" class="leading-tight">
|
||||
<div class="text-white/80 tabular-nums">{{ fmtDate(e.ts) }}</div>
|
||||
<div class="text-white/45 tabular-nums">{{ fmtClock(e.ts) }}</div>
|
||||
</div>
|
||||
<span v-else class="text-white/25">—</span>
|
||||
</td>
|
||||
<td class="px-3 py-3.5 align-middle">
|
||||
<span class="chip ring-1" :class="statusPill(e.status)">
|
||||
<span class="w-1.5 h-1.5 rounded-full" :class="statusDot(e.status)"></span>
|
||||
{{ statusLabel(e.status) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-3 py-3.5 align-middle min-w-0">
|
||||
<div class="text-xs text-white/80 truncate" :title="e.user_name || '匿名'">{{ e.user_name || '匿名' }}</div>
|
||||
</td>
|
||||
<td class="px-3 py-3.5 align-middle min-w-0">
|
||||
<div class="font-mono text-xs text-white/90 truncate" :title="e.model">{{ e.model }}</div>
|
||||
<div class="mt-1 flex items-center gap-1.5 min-w-0">
|
||||
<span class="text-[10px] uppercase tracking-wider font-medium truncate min-w-0"
|
||||
:class="e.kind === 'video' ? 'text-fuchsia-300/80' : 'text-indigo-300/80'">
|
||||
{{ e.kind === 'video' ? '视频' : '图像' }}
|
||||
<span v-if="e.provider" class="text-white/30 ml-1">· {{ e.provider }}</span>
|
||||
</span>
|
||||
<span class="inline-flex items-center rounded px-1.5 py-px text-[10px] font-medium ring-1 whitespace-nowrap shrink-0"
|
||||
:class="sourcePill(e.source)">{{ sourceLabel(e.source) }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<!-- Prompt with error inline; the error reads as a follow-up rather
|
||||
than wasting a whole column when there's nothing to show. -->
|
||||
<td class="px-3 py-3.5 align-middle min-w-0">
|
||||
<div class="text-xs text-white/80 truncate" :title="e.prompt">{{ e.prompt || '—' }}</div>
|
||||
<div v-if="e.error" class="mt-1 text-[11px] text-rose-300/85 truncate flex items-center gap-1.5" :title="e.error">
|
||||
<Icon name="close" class="w-3 h-3 shrink-0" />
|
||||
{{ e.error }}
|
||||
</div>
|
||||
</td>
|
||||
<!-- Compact single-line params, dot-separated. -->
|
||||
<td class="px-3 py-3.5 align-middle text-[11px] text-white/55 font-mono whitespace-nowrap tabular-nums">
|
||||
<span>{{ e.ratio || '—' }}</span>
|
||||
<span class="text-white/25 mx-1.5">·</span>
|
||||
<span>{{ e.resolution || '—' }}</span>
|
||||
<template v-if="e.duration">
|
||||
<span class="text-white/25 mx-1.5">·</span>
|
||||
<span>{{ e.duration }}</span>
|
||||
</template>
|
||||
<template v-if="e.refs > 0">
|
||||
<span class="text-white/25 mx-1.5">·</span>
|
||||
<span class="text-white/40">参考 {{ e.refs }}</span>
|
||||
</template>
|
||||
</td>
|
||||
<td class="px-3 py-3.5 text-right text-xs tabular-nums align-middle whitespace-nowrap">
|
||||
<span v-if="e.cost > 0" class="text-amber-300 font-medium">{{ e.cost }}</span>
|
||||
<span v-else class="text-white/25">0</span>
|
||||
</td>
|
||||
<td class="px-4 py-3.5 text-right text-xs tabular-nums align-middle whitespace-nowrap text-white/85">
|
||||
{{ fmtMs(e.elapsed_ms) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- pagination — numbered with ellipsis, no prev/next buttons -->
|
||||
<div v-if="!loading && total > 0"
|
||||
class="flex items-center justify-between gap-3 border-t border-white/[0.06] px-5 py-3 text-xs text-white/55">
|
||||
<div>
|
||||
<span class="tabular-nums text-white/85">{{ pageStart }}–{{ pageEnd }}</span>
|
||||
<span class="ml-1">/ {{ total }} 条</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<template v-for="(n, i) in pageNumbers" :key="i">
|
||||
<span v-if="n === null" class="px-1 text-white/35">…</span>
|
||||
<button v-else @click="goPage(n)" class="pg" :class="page === n && 'pg-on'">{{ n }}</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lightbox (shared component) -->
|
||||
<MediaLightbox
|
||||
v-if="previewing"
|
||||
:src="generatedUrl(previewing.file)"
|
||||
:kind="previewing.kind"
|
||||
:prompt="previewing.prompt"
|
||||
:meta="[previewing.model, previewing.ratio, previewing.resolution, previewing.duration, fmtMs(previewing.elapsed_ms)].filter(Boolean).join(' · ')"
|
||||
:download-name="previewing.file"
|
||||
@close="closePreview" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* --- filter pills --- */
|
||||
.fp {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.35rem 0.7rem;
|
||||
font-size: 0.72rem;
|
||||
border-radius: 0.55rem;
|
||||
color: rgb(255 255 255 / 0.65);
|
||||
background: rgb(255 255 255 / 0.05);
|
||||
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
|
||||
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
.fp:hover { background: rgb(255 255 255 / 0.09); color: white; }
|
||||
.fp-on {
|
||||
background: rgb(255 255 255 / 0.92);
|
||||
color: rgb(15 23 42);
|
||||
box-shadow: none;
|
||||
}
|
||||
.fp-emerald {
|
||||
background: rgb(16 185 129 / 0.22);
|
||||
color: rgb(110 231 183);
|
||||
box-shadow: inset 0 0 0 1px rgb(110 231 183 / 0.45);
|
||||
}
|
||||
.fp-rose {
|
||||
background: rgb(244 63 94 / 0.22);
|
||||
color: rgb(253 164 175);
|
||||
box-shadow: inset 0 0 0 1px rgb(253 164 175 / 0.45);
|
||||
}
|
||||
.fp-amber {
|
||||
background: rgb(245 158 11 / 0.22);
|
||||
color: rgb(252 211 77);
|
||||
box-shadow: inset 0 0 0 1px rgb(252 211 77 / 0.45);
|
||||
}
|
||||
|
||||
/* --- type / status chip used inside table rows --- */
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
padding: 0.18rem 0.55rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
border-radius: 9999px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* --- "danger" variant for the 清空 button --- */
|
||||
.btn-soft.danger {
|
||||
color: rgb(253 164 175);
|
||||
background: rgb(244 63 94 / 0.12);
|
||||
box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.3);
|
||||
}
|
||||
.btn-soft.danger:hover {
|
||||
color: white;
|
||||
background: rgb(244 63 94 / 0.25);
|
||||
}
|
||||
|
||||
.fade-enter-active, .fade-leave-active { transition: opacity 0.15s ease; }
|
||||
.fade-enter-from, .fade-leave-to { opacity: 0; }
|
||||
|
||||
/* --- log table: subtle row separators + a barely-there hover tint that
|
||||
extends a soft violet accent on the left of the row (read as a
|
||||
focus indicator without being noisy). --- */
|
||||
.log-table { border-collapse: separate; border-spacing: 0; }
|
||||
.log-row td {
|
||||
border-bottom: 1px solid rgb(255 255 255 / 0.04);
|
||||
transition: background-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
.log-row:hover td { background: rgb(255 255 255 / 0.025); }
|
||||
.log-row:hover td:first-child {
|
||||
box-shadow: inset 2px 0 0 rgb(167 139 250 / 0.55);
|
||||
}
|
||||
.log-row:last-child td { border-bottom: none; }
|
||||
|
||||
/* --- pagination buttons --- */
|
||||
.pg {
|
||||
min-width: 1.75rem;
|
||||
padding: 0.3rem 0.55rem;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
border-radius: 0.45rem;
|
||||
color: rgb(255 255 255 / 0.7);
|
||||
background: rgb(255 255 255 / 0.04);
|
||||
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
|
||||
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
.pg:hover:not(.pg-on) { background: rgb(255 255 255 / 0.1); color: white; }
|
||||
.pg-on {
|
||||
background: rgb(255 255 255 / 0.92);
|
||||
color: rgb(15 23 42);
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user