style(admin): 管理台全局样式升级——卡片高光、表格统一润色
- .card 圆角 xl→2xl,顶部加内高光(亮色 sheen/暗色 rim-light) - 卡片内表格:thead 统一紫罗兰渐变底色,tbody 行 hover 统一紫光 洗色 + 首列内描边,不再依赖各页散落的 hover:bg-white 工具类 - AdminLayout:顶栏 Admin 标签改紫→青渐变胶囊,侧栏 logo 副标 改渐变文字 Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
@@ -55,7 +55,7 @@ watch(() => route.path, () => {
|
||||
<Logo v-else :size="32" />
|
||||
<div class="leading-tight min-w-0">
|
||||
<div class="text-sm font-extrabold truncate tracking-tight text-[color:var(--fg)]">{{ site.title }}</div>
|
||||
<div class="text-[11px] font-bold uppercase tracking-widest text-[color:var(--m-orange)] truncate">Admin</div>
|
||||
<div class="admin-tag text-[11px] font-bold uppercase tracking-widest truncate">Admin</div>
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
@@ -118,7 +118,7 @@ watch(() => route.path, () => {
|
||||
</div>
|
||||
|
||||
<header class="relative z-10 h-14 shrink-0 border-b border-b-[color:var(--ink-soft)] bg-[var(--app-bg)]/60 backdrop-blur-xl flex items-center px-8">
|
||||
<div class="text-[10px] uppercase tracking-[0.25em] text-[color:var(--m-orange)] font-extrabold mr-3">Admin</div>
|
||||
<div class="admin-badge text-[10px] uppercase tracking-[0.25em] font-extrabold mr-3 px-2.5 py-1 rounded-lg text-white select-none">Admin</div>
|
||||
<div class="text-[color:var(--fg-faint)] mr-3">/</div>
|
||||
<h1 class="text-sm font-semibold tracking-tight text-[color:var(--fg)]">{{ currentLabel }}</h1>
|
||||
</header>
|
||||
@@ -137,6 +137,16 @@ watch(() => route.path, () => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.admin-tag {
|
||||
background: linear-gradient(120deg, #7c5cfc, #22d3ee);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
.admin-badge {
|
||||
background: linear-gradient(120deg, #7c5cfc, #5f6cf8 60%, #22d3ee 140%);
|
||||
box-shadow: 0 4px 14px var(--accent-glow);
|
||||
}
|
||||
.admin-link {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
+30
-6
@@ -327,6 +327,28 @@ button:not(:disabled), [role="button"]:not([aria-disabled="true"]) { cursor: poi
|
||||
own utility so vertical clipping / rounded corners are preserved. */
|
||||
.card:has(> table) { overflow-x: auto; }
|
||||
|
||||
/* ===== Admin table polish =====
|
||||
Every data table lives in a `.card` and views hand-roll their own
|
||||
th/td utilities — these rules unify the reading of all of them:
|
||||
a faint violet band on the header row and a violet wash on row hover.
|
||||
Scoped to `.theme-text` (the admin main wrapper) so public pages with
|
||||
over-media tables are untouched; specificity outranks the per-view
|
||||
Tailwind hover utilities and the light-mode white rescue. */
|
||||
.theme-text .card table thead {
|
||||
background: linear-gradient(180deg, rgb(124 92 252 / 0.07), rgb(124 92 252 / 0.025));
|
||||
}
|
||||
html.dark .theme-text .card table thead {
|
||||
background: linear-gradient(180deg, rgb(139 92 246 / 0.13), rgb(139 92 246 / 0.05));
|
||||
}
|
||||
.theme-text .card table tbody tr { transition: background-color 0.15s ease; }
|
||||
.theme-text .card table tbody tr:hover { background-color: rgb(124 92 252 / 0.08); }
|
||||
html.dark .theme-text .card table tbody tr:hover { background-color: rgb(139 92 246 / 0.11); }
|
||||
/* Checkbox column + first data column get a hair more air against the
|
||||
card edge so dense tables don't feel cramped. */
|
||||
.theme-text .card table tbody tr:hover :is(td, th):first-child {
|
||||
box-shadow: inset 2px 0 0 rgb(124 92 252 / 0.55);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar { width: 9px; height: 9px; }
|
||||
::-webkit-scrollbar-thumb { background: rgb(24 21 36 / 0.2); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
|
||||
::-webkit-scrollbar-thumb:hover { background: rgb(24 21 36 / 0.38); background-clip: content-box; }
|
||||
@@ -545,7 +567,7 @@ html.dark .memphis-dots {
|
||||
background: rgb(255 255 255 / 0.04);
|
||||
border-color: rgb(255 255 255 / 0.1);
|
||||
color: rgb(255 255 255 / 0.92);
|
||||
box-shadow: var(--glass-shadow);
|
||||
box-shadow: var(--glass-shadow), inset 0 1px 0 rgb(255 255 255 / 0.07);
|
||||
}
|
||||
.public-dark .field {
|
||||
background: rgb(255 255 255 / 0.04);
|
||||
@@ -626,14 +648,16 @@ html.dark .memphis-dots {
|
||||
.public-dark .hover\:bg-slate-100:hover { background: rgb(255 255 255 / 0.06); }
|
||||
|
||||
@layer components {
|
||||
/* surfaces — frosted card with a hairline glass edge + soft shadow */
|
||||
/* surfaces — frosted card with a hairline glass edge + soft shadow.
|
||||
The inset top line is the light's "sheen" on the glass — barely
|
||||
visible on white, reads as a subtle rim-light in dark mode. */
|
||||
.card {
|
||||
@apply rounded-xl;
|
||||
@apply rounded-2xl;
|
||||
background: var(--surface);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: var(--glass-shadow);
|
||||
box-shadow: var(--glass-shadow), inset 0 1px 0 rgb(255 255 255 / 0.55);
|
||||
}
|
||||
|
||||
/* buttons — each variant is self-contained (Tailwind v4 can't @apply a custom class) */
|
||||
|
||||
Reference in New Issue
Block a user