Files
wordpress-theme-aksrt/assets/css/admin/native-ui.css
T
kate522andClaude Fable 5 18951b01d6 feat(admin): unify native admin pages on a shared modern UI
Add NativeUi helper + native-ui.css (tokens mirror the SPA Naive UI theme)
and move the pay center, orders, products, coupons, charge cards, income,
withdrawals, tickets, invite codes, VIP, verify, messages and report/ban
pages onto shared header, stat cards, cards, filters, badges and empty
states. Remove inline styles and dead helpers; split PayChargeCards into
sibling traits to stay under the file size limit.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-10-30 15:05:38 +08:00

574 lines
20 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/*
* AKSRT 原生后台运营页共享 UI(支付中心 / 用户子菜单)。
*
* 只在 NativeUi::SLUGS 列出的页面入队,全部规则限定在 .aksrt-native 下,
* 不影响 WP 其它后台页。色板与圆角对齐 SPA 的 Naive UI 主题(App.vue)。
* 标记由 src/Admin/Native/NativeUi.php 输出。
*/
.aksrt-native {
--an-primary: #18a058;
--an-primary-hover: #36ad6a;
--an-primary-soft: #e8f6ee;
--an-info: #2080f0;
--an-warning: #f0a020;
--an-danger: #d03050;
--an-text: #1f2329;
--an-text-2: #4e5969;
--an-muted: #86909c;
--an-border: #e5e6eb;
--an-border-soft: #f0f1f4;
--an-bg-soft: #f7f8fa;
--an-card: #fff;
--an-radius: 12px;
--an-radius-sm: 8px;
--an-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .04);
--an-shadow-hover: 0 2px 4px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .08);
margin-right: 20px;
color: var(--an-text-2);
font-size: 13px;
}
/* ---------- 页头 ---------- */
.aksrt-native-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 16px;
margin: 18px 0 16px;
}
.aksrt-native-header__main { min-width: 0; }
.aksrt-native .aksrt-native-header__title {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
padding: 0;
color: var(--an-text);
font-size: 22px;
font-weight: 600;
line-height: 1.3;
}
.aksrt-native-header__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
color: var(--an-primary);
background: var(--an-primary-soft);
border-radius: 10px;
}
.aksrt-native-header__icon.dashicons:before { font-size: 20px; line-height: 36px; }
.aksrt-native-header__icon.dashicons { width: 36px; height: 36px; }
.aksrt-native-header__desc { margin: 6px 0 0; color: var(--an-muted); }
.aksrt-native-header__actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* WP 把 .notice 挪到首个 h1/h2 后;保持与卡片同宽同圆角。 */
.aksrt-native .notice { margin: 0 0 16px; border-radius: var(--an-radius-sm); box-shadow: var(--an-shadow); }
/* ---------- 标签导航(.subsubsub / .nav-tab-wrapper / .aksrt-native-tabs) ---------- */
.aksrt-native .subsubsub,
.aksrt-native-tabs {
display: inline-flex;
flex-wrap: wrap;
float: none;
gap: 4px;
margin: 0 0 16px;
padding: 4px;
color: var(--an-muted);
background: var(--an-card);
border-radius: 10px;
box-shadow: var(--an-shadow);
font-size: 13px;
}
.aksrt-native .subsubsub li { margin: 0; font-size: 0; }
.aksrt-native .subsubsub li > * { font-size: 13px; }
.aksrt-native .subsubsub a,
.aksrt-native-tabs a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
color: var(--an-text-2);
border-radius: 7px;
text-decoration: none;
line-height: 1.4;
transition: background .15s, color .15s;
}
.aksrt-native .subsubsub a:hover,
.aksrt-native-tabs a:hover { color: var(--an-primary); background: var(--an-bg-soft); }
.aksrt-native .subsubsub a.current,
.aksrt-native-tabs a.is-active,
.aksrt-native-tabs a[aria-current="page"] {
color: var(--an-primary);
background: var(--an-primary-soft);
font-weight: 600;
}
.aksrt-native .subsubsub a .count,
.aksrt-native-tabs .count {
padding: 0 6px;
color: inherit;
font-size: 12px;
font-weight: 400;
background: rgba(0, 0, 0, .05);
border-radius: 999px;
}
.aksrt-native .nav-tab-wrapper {
display: flex;
gap: 4px;
margin: 0 0 16px;
padding: 0;
border-bottom: 1px solid var(--an-border);
}
.aksrt-native .nav-tab {
margin: 0 0 -1px;
padding: 8px 14px;
color: var(--an-text-2);
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
font-weight: 500;
}
.aksrt-native .nav-tab:hover { color: var(--an-primary); background: transparent; }
.aksrt-native .nav-tab-active,
.aksrt-native .nav-tab-active:hover { color: var(--an-primary); border-bottom-color: var(--an-primary); background: transparent; }
.aksrt-native-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.aksrt-native-toolbar > .subsubsub,
.aksrt-native-toolbar > .aksrt-native-tabs { margin-bottom: 0; }
/* ---------- 统计卡 ---------- */
.aksrt-native-stats {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
margin: 0 0 16px;
}
.aksrt-native-stat {
--an-tone: var(--an-primary);
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
padding: 16px 18px;
color: var(--an-text-2);
background: var(--an-card);
border-radius: var(--an-radius);
box-shadow: var(--an-shadow);
text-decoration: none;
overflow: hidden;
transition: box-shadow .2s, transform .2s;
}
.aksrt-native-stat::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 72px;
height: 72px;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--an-tone) 16%, transparent), transparent 70%);
pointer-events: none;
}
a.aksrt-native-stat:hover,
a.aksrt-native-stat:focus { color: var(--an-text-2); box-shadow: var(--an-shadow-hover); transform: translateY(-1px); }
a.aksrt-native-stat:focus { outline: 2px solid color-mix(in srgb, var(--an-tone) 40%, transparent); outline-offset: 1px; }
.aksrt-native-stat__label { display: flex; align-items: center; gap: 6px; color: var(--an-muted); font-size: 13px; }
.aksrt-native-stat__label .dashicons { width: 16px; height: 16px; color: var(--an-tone); font-size: 16px; }
.aksrt-native-stat__value {
color: var(--an-text);
font-size: 26px;
font-weight: 600;
line-height: 1.2;
font-variant-numeric: tabular-nums;
word-break: break-all;
}
.aksrt-native-stat__unit { margin-right: 2px; color: var(--an-muted); font-size: 14px; font-weight: 400; }
.aksrt-native-stat__hint { color: var(--an-muted); font-size: 12px; }
.aksrt-native-stat--success { --an-tone: var(--an-primary); }
.aksrt-native-stat--info { --an-tone: var(--an-info); }
.aksrt-native-stat--warning { --an-tone: var(--an-warning); }
.aksrt-native-stat--danger { --an-tone: var(--an-danger); }
.aksrt-native-stat--neutral { --an-tone: var(--an-muted); }
.aksrt-native-stat--warning .aksrt-native-stat__value { color: #c27c0e; }
.aksrt-native-stat--danger .aksrt-native-stat__value { color: var(--an-danger); }
/* ---------- 卡片 ---------- */
.aksrt-native-card {
margin: 0 0 16px;
background: var(--an-card);
border-radius: var(--an-radius);
box-shadow: var(--an-shadow);
}
.aksrt-native-card__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 12px;
padding: 14px 20px;
border-bottom: 1px solid var(--an-border-soft);
}
.aksrt-native .aksrt-native-card__title {
position: relative;
margin: 0;
padding: 0 0 0 12px;
color: var(--an-text);
font-size: 15px;
font-weight: 600;
line-height: 1.4;
}
.aksrt-native-card__title::before {
content: "";
position: absolute;
top: 3px;
bottom: 3px;
left: 0;
width: 4px;
background: var(--an-primary);
border-radius: 4px;
}
.aksrt-native-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aksrt-native-card__body { padding: 16px 20px; }
.aksrt-native-card__body > :first-child { margin-top: 0; }
.aksrt-native-card__body > :last-child { margin-bottom: 0; }
.aksrt-native-card--flush > .aksrt-native-card__body { padding: 0; }
.aksrt-native-card__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px 20px;
border-top: 1px solid var(--an-border-soft);
}
/* 折叠卡片:<details class="aksrt-native-card aksrt-native-collapse"><summary>… */
.aksrt-native-collapse > summary {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 20px;
color: var(--an-text);
font-size: 14px;
font-weight: 600;
cursor: pointer;
list-style: none;
}
.aksrt-native-collapse > summary::-webkit-details-marker { display: none; }
.aksrt-native-collapse > summary::after {
content: "\f347";
margin-left: auto;
color: var(--an-muted);
font: normal 16px/1 dashicons;
transition: transform .2s;
}
.aksrt-native-collapse[open] > summary { border-bottom: 1px solid var(--an-border-soft); }
.aksrt-native-collapse[open] > summary::after { transform: rotate(180deg); }
.aksrt-native-collapse > summary .dashicons { color: var(--an-primary); }
/* ---------- 筛选栏 ---------- */
.aksrt-native-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0;
}
.aksrt-native-filters label { display: inline-flex; align-items: center; gap: 6px; color: var(--an-muted); }
.aksrt-native-filters input[type="search"] { min-width: 220px; }
.aksrt-native-filters__spacer { flex: 1 1 auto; }
.aksrt-native-card__body > .aksrt-native-filters + .aksrt-native-filters { margin-top: 10px; }
/* ---------- 表单 ---------- */
.aksrt-native input[type="text"],
.aksrt-native input[type="search"],
.aksrt-native input[type="number"],
.aksrt-native input[type="date"],
.aksrt-native input[type="datetime-local"],
.aksrt-native input[type="email"],
.aksrt-native input[type="url"],
.aksrt-native input[type="password"],
.aksrt-native select,
.aksrt-native textarea {
min-height: 32px;
border-color: var(--an-border);
border-radius: var(--an-radius-sm);
box-shadow: none;
}
.aksrt-native select { padding-right: 28px; }
.aksrt-native input:focus,
.aksrt-native select:focus,
.aksrt-native textarea:focus {
border-color: var(--an-primary);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--an-primary) 20%, transparent);
outline: 0;
}
.aksrt-native-form-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px 16px;
}
.aksrt-native-form-grid .is-wide { grid-column: 1 / -1; }
.aksrt-native-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.aksrt-native-field__label { color: var(--an-text); font-weight: 500; }
.aksrt-native-field__hint { color: var(--an-muted); font-size: 12px; }
.aksrt-native-field input,
.aksrt-native-field select,
.aksrt-native-field textarea { width: 100%; max-width: none; }
.aksrt-native-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.aksrt-native .form-table th { color: var(--an-text); font-weight: 500; }
.aksrt-native .form-table td,
.aksrt-native .form-table th { padding-top: 12px; padding-bottom: 12px; }
/* ---------- 按钮 ---------- */
.aksrt-native .button,
.aksrt-native .page-title-action {
min-height: 32px;
padding: 0 14px;
color: var(--an-text-2);
line-height: 30px;
background: #fff;
border-color: var(--an-border);
border-radius: var(--an-radius-sm);
transition: border-color .15s, color .15s, background .15s;
}
.aksrt-native .page-title-action { top: 0; display: inline-flex; align-items: center; }
.aksrt-native .button:hover,
.aksrt-native .button:focus,
.aksrt-native .page-title-action:hover {
color: var(--an-primary);
background: #fff;
border-color: var(--an-primary);
box-shadow: none;
}
.aksrt-native .button-primary,
.aksrt-native .button.button-primary {
color: #fff;
background: var(--an-primary);
border-color: var(--an-primary);
}
.aksrt-native .button-primary:hover,
.aksrt-native .button-primary:focus,
.aksrt-native .button.button-primary:hover {
color: #fff;
background: var(--an-primary-hover);
border-color: var(--an-primary-hover);
}
.aksrt-native .button-small,
.aksrt-native .button.button-small { min-height: 26px; padding: 0 10px; font-size: 12px; line-height: 24px; }
.aksrt-native .button-link-delete,
.aksrt-native .button.is-danger { color: var(--an-danger); }
.aksrt-native .button.is-danger:hover { color: #fff; background: var(--an-danger); border-color: var(--an-danger); }
.aksrt-native .button .dashicons { width: 16px; height: 16px; margin: 0 4px 0 -2px; font-size: 16px; line-height: inherit; vertical-align: -1px; }
.aksrt-native .submit { margin: 0; padding: 0; }
/* ---------- 表格 ---------- */
.aksrt-native-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.aksrt-native .widefat,
.aksrt-native .wp-list-table {
border: 0;
border-radius: 0;
box-shadow: none;
}
.aksrt-native .aksrt-native-card .widefat { background: transparent; }
.aksrt-native .widefat thead th,
.aksrt-native .widefat thead td,
.aksrt-native .widefat tfoot th,
.aksrt-native .widefat tfoot td {
padding: 10px 12px;
color: var(--an-muted);
font-size: 12px;
font-weight: 500;
background: var(--an-bg-soft);
border-bottom: 1px solid var(--an-border-soft);
}
.aksrt-native .widefat thead th a { color: var(--an-muted); }
.aksrt-native .widefat td,
.aksrt-native .widefat tbody th {
padding: 12px;
color: var(--an-text-2);
vertical-align: middle;
border-bottom: 1px solid var(--an-border-soft);
}
.aksrt-native .widefat tbody tr:last-child > td,
.aksrt-native .widefat tbody tr:last-child > th { border-bottom: 0; }
.aksrt-native .striped > tbody > :nth-child(odd) { background: transparent; }
.aksrt-native .widefat tbody tr { transition: background .15s; }
.aksrt-native .widefat tbody tr:hover { background: #fafbfc; }
.aksrt-native .widefat .check-column { width: 2.4em; padding: 12px 0 12px 12px; vertical-align: middle; }
.aksrt-native .widefat thead .check-column { padding-top: 10px; padding-bottom: 10px; }
.aksrt-native .widefat .check-column input { margin: 0; }
.aksrt-native .widefat code,
.aksrt-native-mono {
padding: 1px 6px;
color: var(--an-text);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12px;
background: var(--an-bg-soft);
border-radius: 4px;
}
.aksrt-native .row-actions { color: var(--an-muted); }
.aksrt-native .row-title,
.aksrt-native .widefat strong { color: var(--an-text); }
.aksrt-native-card > .aksrt-native-card__body > .widefat:first-child thead th:first-child,
.aksrt-native-card--flush .widefat thead > tr > :first-child { padding-left: 20px; }
.aksrt-native-card--flush .widefat tbody > tr > :first-child { padding-left: 20px; }
.aksrt-native-card--flush .widefat thead > tr > :last-child,
.aksrt-native-card--flush .widefat tbody > tr > :last-child { padding-right: 20px; }
.aksrt-native-card--flush .widefat thead th:first-child,
.aksrt-native-card--flush .widefat thead td:first-child { border-top-left-radius: 0; }
/* 行内操作表单:单元格里的一组小控件 */
.aksrt-native-inline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 0;
}
.aksrt-native-inline + .aksrt-native-inline { margin-top: 6px; }
.aksrt-native-inline input[type="text"] { min-width: 0; width: 140px; }
/* 用户单元格:头像 + 名称 + 次要信息 */
.aksrt-native-user { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--an-text); text-decoration: none; }
.aksrt-native-user img { flex: none; border-radius: 50%; }
.aksrt-native-user__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aksrt-native-user__meta { display: block; color: var(--an-muted); font-size: 12px; }
/* ---------- 徽标 ---------- */
.aksrt-native-badge {
--an-tone: var(--an-muted);
display: inline-flex;
align-items: center;
gap: 5px;
padding: 1px 8px;
color: var(--an-tone);
font-size: 12px;
font-weight: 500;
line-height: 20px;
white-space: nowrap;
background: color-mix(in srgb, var(--an-tone) 10%, #fff);
border-radius: 999px;
}
.aksrt-native-badge.has-dot::before {
content: "";
width: 6px;
height: 6px;
background: currentColor;
border-radius: 50%;
}
.aksrt-native-badge--success { --an-tone: var(--an-primary); }
.aksrt-native-badge--info { --an-tone: var(--an-info); }
.aksrt-native-badge--warning { --an-tone: #c27c0e; }
.aksrt-native-badge--danger { --an-tone: var(--an-danger); }
.aksrt-native-badge--neutral { --an-tone: #6b7785; }
.aksrt-native-badge--primary { --an-tone: #7c4dff; }
/* ---------- 空状态 / 提示 ---------- */
.aksrt-native-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 40px 16px;
color: var(--an-muted);
text-align: center;
}
.aksrt-native-empty .dashicons { width: 40px; height: 40px; color: #c9cdd4; font-size: 40px; }
.aksrt-native-empty__title { color: var(--an-text-2); font-size: 14px; font-weight: 500; }
.aksrt-native .widefat td.aksrt-native-empty-cell { padding: 0; }
.aksrt-native-muted,
.aksrt-native .description { color: var(--an-muted); }
.aksrt-native-text--success { color: var(--an-primary); }
.aksrt-native-text--info { color: var(--an-info); }
.aksrt-native-text--warning { color: #c27c0e; }
.aksrt-native-text--danger { color: var(--an-danger); }
.aksrt-native-clamp { max-height: 40px; overflow: hidden; }
/* 举报&禁封申诉页:宽表 + 排序箭头 */
.aksrt-native-ban .aksrt-native-table-wrap > table { min-width: 1000px; }
.aksrt-native-ban .orderby-but { position: relative; display: inline-block; width: 0; height: 0; margin-left: 4px; }
.aksrt-native-ban .orderby-but > a { position: absolute; left: 0; bottom: .725em; padding-right: 1em; opacity: .4; transform: translateY(50%); transition: opacity .3s; }
.aksrt-native-ban .orderby-but > a + a { bottom: .075em; }
.aksrt-native-ban .orderby-but > a:hover { opacity: 1; }
.aksrt-native-ban .aksrt-native-toolbar + .subsubsub { float: none; margin: 10px 0 0; }
.aksrt-native-ban textarea { width: 95%; max-width: 500px; }
.aksrt-native-amount { color: var(--an-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.aksrt-native-amount.is-positive { color: var(--an-primary); }
.aksrt-native-amount.is-negative { color: var(--an-danger); }
.aksrt-native-callout {
margin: 0 0 16px;
padding: 12px 16px;
color: var(--an-text-2);
background: var(--an-bg-soft);
border-left: 3px solid var(--an-info);
border-radius: var(--an-radius-sm);
}
.aksrt-native-callout.is-warning { background: #fff8eb; border-left-color: var(--an-warning); }
.aksrt-native-callout.is-danger { background: #fdf0f2; border-left-color: var(--an-danger); }
/* 快捷入口网格 */
.aksrt-native-links {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.aksrt-native-links li { margin: 0; }
.aksrt-native-links a {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
color: var(--an-text);
background: var(--an-bg-soft);
border-radius: var(--an-radius-sm);
text-decoration: none;
transition: background .15s, color .15s;
}
.aksrt-native-links a:hover { color: var(--an-primary); background: var(--an-primary-soft); }
.aksrt-native-links a::after { content: "\f345"; margin-left: auto; color: var(--an-muted); font: normal 14px/1 dashicons; }
.aksrt-native-links .dashicons { color: var(--an-primary); }
/* ---------- 分页条(AdminListPagination / paginate_links) ---------- */
.aksrt-native .tablenav { height: auto; margin: 0; padding: 12px 20px; }
.aksrt-native .aksrt-native-card .tablenav.bottom { border-top: 1px solid var(--an-border-soft); }
.aksrt-native .tablenav-pages { float: right; margin: 0; color: var(--an-muted); }
.aksrt-native .tablenav-pages .button,
.aksrt-native .tablenav-pages .page-numbers {
min-width: 30px;
min-height: 30px;
padding: 0 8px;
line-height: 28px;
text-align: center;
}
.aksrt-native .tablenav-pages .page-numbers {
display: inline-block;
color: var(--an-text-2);
border: 1px solid var(--an-border);
border-radius: var(--an-radius-sm);
text-decoration: none;
}
.aksrt-native .tablenav-pages .page-numbers.current { color: #fff; background: var(--an-primary); border-color: var(--an-primary); }
.aksrt-native .tablenav-pages .page-numbers.dots { border-color: transparent; }
.aksrt-native .tablenav-pages .button.disabled { color: #c9cdd4 !important; background: var(--an-bg-soft) !important; border-color: var(--an-border-soft) !important; }
.aksrt-native .tablenav .actions { padding: 0; }
.aksrt-native .tablenav::after { content: ""; display: table; clear: both; }
@media (max-width: 782px) {
.aksrt-native { margin-right: 10px; }
.aksrt-native-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.aksrt-native-stat { padding: 12px 14px; }
.aksrt-native-stat__value { font-size: 20px; }
.aksrt-native-card__head,
.aksrt-native-card__body,
.aksrt-native-collapse > summary { padding-left: 14px; padding-right: 14px; }
.aksrt-native .tablenav { padding: 10px 14px; }
.aksrt-native .tablenav-pages { float: none; }
.aksrt-native-filters input[type="search"] { min-width: 0; flex: 1 1 100%; }
}