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>
This commit is contained in:
kate522andClaude Fable 5 committed
1 parent
aa692f3c9f
commit
18951b01d6
29 files changed
+2503
-1593
No files matched your search
@@ -0,0 +1,49 @@
|
||||
/*
|
||||
* 邀请码管理（users.php?page=aksrt_invite_codes）页面专属样式。
|
||||
*
|
||||
* 共享外壳/卡片/表格/徽标由 native-ui.css 承载；这里只留列表排序箭头、
|
||||
* 添加/导出表单的行布局与按钮组切换、复制提示 toast 等本页独有交互样式。
|
||||
* 仅在 users_page_aksrt_invite_codes 入队，规则限定在 .aksrt-inv-page 下。
|
||||
*/
|
||||
|
||||
/* 排序箭头：默认弱化，悬停加强。 */
|
||||
.aksrt-inv-page .orderby-but { position: relative; display: inline-block; margin-left: 4px; }
|
||||
.aksrt-inv-page .orderby-but > a { opacity: .4; position: absolute; transform: translateY(-3px); transition: .3s; }
|
||||
.aksrt-inv-page .orderby-but > a + a { transform: translateY(6px); }
|
||||
.aksrt-inv-page .orderby-but:hover a { opacity: .6; }
|
||||
.aksrt-inv-page .orderby-but > a:hover { opacity: 1; }
|
||||
|
||||
/* 复制邀请码：指针反馈。 */
|
||||
.aksrt-inv-page .aksrt-inv-code { cursor: pointer; }
|
||||
|
||||
/* 三视图切换链接（列表 / 添加 / 导出）：贴合页头下方。 */
|
||||
.aksrt-inv-page .aksrt-inv-switch-views { margin: -8px 0 12px; display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.aksrt-inv-page .aksrt-inv-switch-views .page-title-action { display: inline-flex; align-items: center; gap: 4px; }
|
||||
|
||||
/* 选项字段布局：左标题右控件，行间分隔线。 */
|
||||
.aksrt-inv-page .aksrt-inv-field { display: flex; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--an-border-soft); }
|
||||
.aksrt-inv-page .aksrt-inv-field:last-child { border-bottom: 0; }
|
||||
.aksrt-inv-page .aksrt-inv-field > label { flex: 0 0 170px; color: var(--an-text); font-weight: 600; padding-top: 4px; }
|
||||
.aksrt-inv-page .aksrt-inv-field > .aksrt-inv-control { flex: 1; min-width: 0; }
|
||||
.aksrt-inv-page .aksrt-inv-field .description { display: block; margin-top: 4px; }
|
||||
|
||||
/* 添加方式按钮组（二选一）。 */
|
||||
.aksrt-inv-page .aksrt-inv-btnset label { display: inline-block; margin-right: -1px; padding: 4px 14px; color: var(--an-text-2); background: #fff; border: 1px solid var(--an-border); cursor: pointer; }
|
||||
.aksrt-inv-page .aksrt-inv-btnset label:first-child { border-radius: var(--an-radius-sm) 0 0 var(--an-radius-sm); }
|
||||
.aksrt-inv-page .aksrt-inv-btnset label:last-child { border-radius: 0 var(--an-radius-sm) var(--an-radius-sm) 0; }
|
||||
.aksrt-inv-page .aksrt-inv-btnset input { display: none; }
|
||||
.aksrt-inv-page .aksrt-inv-btnset label.on { color: #fff; background: var(--an-primary); border-color: var(--an-primary); }
|
||||
|
||||
/* 开关式复选 / 奖励字段行 / 单位后缀。 */
|
||||
.aksrt-inv-page .aksrt-inv-switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
|
||||
.aksrt-inv-page .aksrt-inv-switch input { margin: 0; }
|
||||
.aksrt-inv-page .aksrt-inv-rewards { display: flex; flex-wrap: wrap; gap: 12px; }
|
||||
.aksrt-inv-page .aksrt-inv-radios { margin-top: 8px; }
|
||||
.aksrt-inv-page .aksrt-inv-radios label + label { margin-left: 12px; font-weight: 400; }
|
||||
.aksrt-inv-page .aksrt-inv-viptime { margin-top: 8px; }
|
||||
.aksrt-inv-page .aksrt-inv-mini { width: 80px; }
|
||||
.aksrt-inv-page .aksrt-inv-unit { margin-left: 4px; color: var(--an-muted); }
|
||||
.aksrt-inv-page .aksrt-inv-textarea { resize: both; }
|
||||
|
||||
/* 复制成功悬浮提示。 */
|
||||
.aksrt-inv-toast { position: fixed; top: 42px; left: 50%; transform: translateX(-50%); display: none; padding: 8px 22px; color: #fff; font-size: 13px; background: rgba(0, 0, 0, .75); border-radius: 4px; z-index: 100100; }
|
||||
+24
-133
@@ -1,118 +1,21 @@
|
||||
/* 消息管理（users.php?page=aksrt_messages）——仅在本页入队 */
|
||||
/* 消息管理（users.php?page=aksrt_messages）——仅本页入队。
|
||||
* 页面外壳 / 概览 / 折叠卡 / 表单栅格 / 筛选条 / 空状态均走 native-ui.css 的共享类，
|
||||
* 本文件只保留消息列表专属样式：收件人模式切换、类型徽章、读取状态、用户单元格、列宽。 */
|
||||
|
||||
.aksrt-messages-admin {
|
||||
--aksrt-msg-border: #dcdcde;
|
||||
--aksrt-msg-muted: #646970;
|
||||
--aksrt-msg-soft: #f6f7f7;
|
||||
--aksrt-msg-accent: #2271b1;
|
||||
}
|
||||
|
||||
.aksrt-messages-admin__muted { color: var(--aksrt-msg-muted); }
|
||||
.aksrt-messages-admin__sub { margin-top: 3px; color: var(--aksrt-msg-muted); font-size: 12px; }
|
||||
.aksrt-messages-admin__sub code { padding: 0 4px; font-size: 12px; background: var(--aksrt-msg-soft); }
|
||||
|
||||
/* ---- 概览 ---- */
|
||||
.aksrt-messages-admin__stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
margin: 16px 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.aksrt-messages-admin__stat {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 0;
|
||||
padding: 14px 16px;
|
||||
background: #fff;
|
||||
border: 1px solid var(--aksrt-msg-border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.aksrt-messages-admin__stat > .dashicons {
|
||||
flex: none;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: 20px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
color: var(--aksrt-msg-tone, var(--aksrt-msg-accent));
|
||||
background: color-mix(in srgb, var(--aksrt-msg-tone, var(--aksrt-msg-accent)) 12%, #fff);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.aksrt-messages-admin__stat div { display: flex; flex-direction: column; min-width: 0; }
|
||||
.aksrt-messages-admin__stat strong { font-size: 20px; line-height: 1.3; }
|
||||
.aksrt-messages-admin__stat div span { color: var(--aksrt-msg-muted); }
|
||||
.aksrt-messages-admin__stat.is-unread { --aksrt-msg-tone: #d63638; }
|
||||
.aksrt-messages-admin__stat.is-today { --aksrt-msg-tone: #00a32a; }
|
||||
.aksrt-messages-admin__stat.is-recipients { --aksrt-msg-tone: #8c5bd0; }
|
||||
|
||||
/* ---- 代发 ---- */
|
||||
.aksrt-messages-admin__compose {
|
||||
margin: 16px 0 8px;
|
||||
background: #fff;
|
||||
border: 1px solid var(--aksrt-msg-border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.aksrt-messages-admin__compose > summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 10px 14px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
color: var(--aksrt-msg-accent);
|
||||
list-style: none;
|
||||
}
|
||||
.aksrt-messages-admin__compose > summary::-webkit-details-marker { display: none; }
|
||||
.aksrt-messages-admin__compose[open] > summary { border-bottom: 1px solid var(--aksrt-msg-border); }
|
||||
.aksrt-messages-admin__compose-form { margin: 0; padding: 14px; }
|
||||
.aksrt-messages-admin__muted { color: var(--an-muted); }
|
||||
.aksrt-messages-admin__sub { margin-top: 3px; color: var(--an-muted); font-size: 12px; }
|
||||
.aksrt-messages-admin__sub code { padding: 0 4px; font-size: 12px; background: var(--an-bg-soft); }
|
||||
|
||||
/* ---- 代发：收件人模式切换（纯 CSS，无 JS 时按所选模式显隐字段） ---- */
|
||||
.aksrt-messages-admin__modes { display: flex; gap: 16px; margin: 0 0 12px; padding: 0; border: 0; }
|
||||
.aksrt-messages-admin__modes legend { float: left; margin-right: 8px; font-weight: 600; }
|
||||
|
||||
.aksrt-messages-admin__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px 16px;
|
||||
}
|
||||
.aksrt-messages-admin__grid label { display: flex; flex-direction: column; gap: 4px; }
|
||||
.aksrt-messages-admin__grid label > span { font-weight: 600; }
|
||||
.aksrt-messages-admin__grid label > small { color: var(--aksrt-msg-muted); }
|
||||
.aksrt-messages-admin__grid .is-wide { grid-column: 1 / -1; }
|
||||
.aksrt-messages-admin__grid input,
|
||||
.aksrt-messages-admin__grid select,
|
||||
.aksrt-messages-admin__grid textarea { width: 100%; max-width: none; }
|
||||
|
||||
/* 收件人模式切换：纯 CSS，无 JS 时两组字段都可见、按所选模式生效。 */
|
||||
.aksrt-messages-admin__compose-form:has(input[name="recipient_mode"][value="users"]:checked) .is-role,
|
||||
.aksrt-messages-admin__compose-form:has(input[name="recipient_mode"][value="role"]:checked) .is-users { display: none; }
|
||||
|
||||
.aksrt-messages-admin__compose-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin: 12px 0 0;
|
||||
}
|
||||
|
||||
/* ---- 筛选 ---- */
|
||||
.aksrt-messages-admin__filters {
|
||||
clear: both;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 0 0;
|
||||
}
|
||||
.aksrt-messages-admin__filters input[type="text"],
|
||||
.aksrt-messages-admin__filters input[type="search"] { min-width: 200px; }
|
||||
.aksrt-messages-admin__compose form:has(input[name="recipient_mode"][value="users"]:checked) .is-role,
|
||||
.aksrt-messages-admin__compose form:has(input[name="recipient_mode"][value="role"]:checked) .is-users { display: none; }
|
||||
|
||||
/* ---- 列表 ---- */
|
||||
.aksrt-messages-admin__danger.button { color: #b32d2e; border-color: #b32d2e; }
|
||||
.aksrt-messages-admin__danger.button { color: var(--an-danger); border-color: var(--an-danger); }
|
||||
.aksrt-messages-admin__danger.button:hover,
|
||||
.aksrt-messages-admin__danger.button:focus { color: #fff; background: #b32d2e; border-color: #b32d2e; }
|
||||
.aksrt-messages-admin__danger.button:focus { color: #fff; background: var(--an-danger); border-color: var(--an-danger); }
|
||||
|
||||
.aksrt-messages-admin__table .column-title { width: 40%; }
|
||||
.aksrt-messages-admin__table .column-type { width: 12%; }
|
||||
@@ -122,19 +25,10 @@
|
||||
.aksrt-messages-admin__table td { vertical-align: middle; }
|
||||
.aksrt-messages-admin__table .row-title { word-break: break-word; }
|
||||
.aksrt-messages-admin__table tr.is-unread .row-title { font-weight: 700; }
|
||||
.aksrt-messages-admin__table tr.is-unread > th:first-child { box-shadow: inset 3px 0 0 var(--aksrt-msg-accent); }
|
||||
.aksrt-messages-admin__desc { margin-top: 3px; color: #3c434a; word-break: break-word; }
|
||||
|
||||
.aksrt-messages-admin__empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 32px 0;
|
||||
color: var(--aksrt-msg-muted);
|
||||
}
|
||||
.aksrt-messages-admin__empty .dashicons { width: 32px; height: 32px; font-size: 32px; opacity: .5; }
|
||||
.aksrt-messages-admin__table tr.is-unread > th:first-child { box-shadow: inset 3px 0 0 var(--an-primary); }
|
||||
.aksrt-messages-admin__desc { margin-top: 3px; color: var(--an-text-2); word-break: break-word; }
|
||||
|
||||
/* 类型徽章（可点击筛选，按类型着色） */
|
||||
.aksrt-msg-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -144,32 +38,29 @@
|
||||
line-height: 18px;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
color: var(--aksrt-msg-tone, #646970);
|
||||
background: color-mix(in srgb, var(--aksrt-msg-tone, #646970) 12%, #fff);
|
||||
border: 1px solid color-mix(in srgb, var(--aksrt-msg-tone, #646970) 30%, #fff);
|
||||
color: var(--aksrt-msg-tone, var(--an-muted));
|
||||
background: color-mix(in srgb, var(--aksrt-msg-tone, var(--an-muted)) 12%, #fff);
|
||||
border: 1px solid color-mix(in srgb, var(--aksrt-msg-tone, var(--an-muted)) 30%, #fff);
|
||||
}
|
||||
.aksrt-msg-badge:hover,
|
||||
.aksrt-msg-badge:focus { color: var(--aksrt-msg-tone, #646970); border-color: var(--aksrt-msg-tone, #646970); }
|
||||
.aksrt-msg-badge.is-info { --aksrt-msg-tone: #2271b1; }
|
||||
.aksrt-msg-badge:focus { color: var(--aksrt-msg-tone, var(--an-muted)); border-color: var(--aksrt-msg-tone, var(--an-muted)); }
|
||||
.aksrt-msg-badge.is-info { --aksrt-msg-tone: var(--an-info); }
|
||||
.aksrt-msg-badge.is-success { --aksrt-msg-tone: #00a32a; }
|
||||
.aksrt-msg-badge.is-danger { --aksrt-msg-tone: #d63638; }
|
||||
.aksrt-msg-badge.is-danger { --aksrt-msg-tone: var(--an-danger); }
|
||||
.aksrt-msg-badge.is-social { --aksrt-msg-tone: #8c5bd0; }
|
||||
|
||||
/* 读取状态（带阅读时间 title 提示） */
|
||||
.aksrt-msg-state { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; }
|
||||
.aksrt-msg-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
|
||||
.aksrt-msg-state.is-unread { color: var(--aksrt-msg-accent); font-weight: 600; }
|
||||
.aksrt-msg-state.is-read { color: var(--aksrt-msg-muted); }
|
||||
.aksrt-msg-state.is-unread { color: var(--an-primary); font-weight: 600; }
|
||||
.aksrt-msg-state.is-read { color: var(--an-muted); }
|
||||
|
||||
/* 用户单元格（点击按该用户筛选） */
|
||||
.aksrt-msg-user { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; text-decoration: none; }
|
||||
.aksrt-msg-user img { flex: none; border-radius: 50%; }
|
||||
.aksrt-msg-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.aksrt-messages-admin__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
@media (max-width: 782px) {
|
||||
.aksrt-messages-admin__grid { grid-template-columns: minmax(0, 1fr); }
|
||||
.aksrt-messages-admin__compose-foot { flex-direction: column; align-items: flex-start; }
|
||||
.aksrt-messages-admin__table .column-type,
|
||||
.aksrt-messages-admin__table .column-read { display: none; }
|
||||
}
|
||||
@@ -0,0 +1,573 @@
|
||||
/*
|
||||
* 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%; }
|
||||
}
|
||||
+75
-133
@@ -1,77 +1,14 @@
|
||||
/* 工单管理（users.php?page=aksrt_tickets）——仅在本页入队 */
|
||||
|
||||
.aksrt-tickets-admin {
|
||||
--aksrt-tk-border: #dcdcde;
|
||||
--aksrt-tk-muted: #646970;
|
||||
--aksrt-tk-soft: #f6f7f7;
|
||||
--aksrt-tk-accent: #2271b1;
|
||||
}
|
||||
|
||||
.aksrt-tickets-admin__muted { color: var(--aksrt-tk-muted); font-weight: 400; }
|
||||
|
||||
/* ---- 代客提交 ---- */
|
||||
.aksrt-tickets-admin__create {
|
||||
margin: 16px 0 8px;
|
||||
background: #fff;
|
||||
border: 1px solid var(--aksrt-tk-border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.aksrt-tickets-admin__create > summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 10px 14px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
color: var(--aksrt-tk-accent);
|
||||
list-style: none;
|
||||
}
|
||||
.aksrt-tickets-admin__create > summary::-webkit-details-marker { display: none; }
|
||||
.aksrt-tickets-admin__create[open] > summary { border-bottom: 1px solid var(--aksrt-tk-border); }
|
||||
.aksrt-tickets-admin__create-form,
|
||||
.aksrt-tickets-admin__create-empty { padding: 14px; margin: 0; }
|
||||
.aksrt-tickets-admin__create-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px 16px;
|
||||
}
|
||||
.aksrt-tickets-admin__create-grid label { display: flex; flex-direction: column; gap: 4px; }
|
||||
.aksrt-tickets-admin__create-grid label > span { font-weight: 600; }
|
||||
.aksrt-tickets-admin__create-grid .is-wide { grid-column: 1 / -1; }
|
||||
.aksrt-tickets-admin__create-grid input,
|
||||
.aksrt-tickets-admin__create-grid select,
|
||||
.aksrt-tickets-admin__create-grid textarea { width: 100%; max-width: none; }
|
||||
.aksrt-tickets-admin__create-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin: 12px 0 0;
|
||||
}
|
||||
|
||||
/* ---- 视图与筛选 ---- */
|
||||
.aksrt-tickets-admin__views { margin-bottom: 4px; }
|
||||
.aksrt-ticket-dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 4px;
|
||||
border-radius: 50%;
|
||||
background: var(--aksrt-ticket-color, #8c8f94);
|
||||
vertical-align: 1px;
|
||||
}
|
||||
.aksrt-tickets-admin__filters {
|
||||
clear: both;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.aksrt-tickets-admin__filters input[type="search"] { min-width: 220px; }
|
||||
/*
|
||||
* 工单管理（users.php?page=aksrt_tickets）——仅在本页入队。
|
||||
*
|
||||
* 页面外壳 / 页头 / 卡片 / 折叠创建卡 / 筛选栏 / 表格 / 空态 / 分页 / 徽标基形
|
||||
* 由 native-ui.css（.aksrt-native）统一承载；本文件只保留工单专属部分：
|
||||
* 列表行状态、按状态上色的徽标与小圆点（--aksrt-ticket-color）、催单徽标、
|
||||
* 行内展开的详情面板（对话气泡 / 引用 / 附件 / 信息卡 / 处理表单 / 内部备注）。
|
||||
* 颜色与圆角继承 .aksrt-native 的 --an-* 令牌。
|
||||
*/
|
||||
|
||||
/* ---- 列表 ---- */
|
||||
.aksrt-tickets-admin__table-wrap { overflow-x: auto; }
|
||||
.aksrt-tickets-admin__table { min-width: 860px; table-layout: fixed; }
|
||||
.aksrt-tickets-admin__table .column-title { width: 34%; }
|
||||
.aksrt-tickets-admin__table .column-status { width: 10%; }
|
||||
@@ -79,34 +16,36 @@
|
||||
.aksrt-tickets-admin__table .column-admin { width: 11%; }
|
||||
.aksrt-tickets-admin__table .column-user { width: 15%; }
|
||||
.aksrt-tickets-admin__table .column-time { width: 19%; }
|
||||
.aksrt-tickets-admin__table td { vertical-align: middle; }
|
||||
.aksrt-tickets-admin__table .row-title { word-break: break-word; }
|
||||
.aksrt-tickets-admin__sub { margin-top: 3px; color: var(--aksrt-tk-muted); font-size: 12px; }
|
||||
.aksrt-tickets-admin__sub code { padding: 0 4px; font-size: 12px; background: var(--aksrt-tk-soft); }
|
||||
.aksrt-tickets-admin__row.is-awaiting td:first-child { box-shadow: inset 3px 0 0 #d63638; }
|
||||
.aksrt-tickets-admin__row.is-open td { background: #f0f6fc; }
|
||||
.aksrt-tickets-admin__detail-row > td { padding: 0 !important; background: var(--aksrt-tk-soft) !important; }
|
||||
.aksrt-tickets-admin__empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 32px 0;
|
||||
color: var(--aksrt-tk-muted);
|
||||
.aksrt-tickets-admin__sub { margin-top: 3px; color: var(--an-muted); font-size: 12px; }
|
||||
.aksrt-tickets-admin__sub code { padding: 0 4px; font-size: 12px; }
|
||||
.aksrt-native .aksrt-tickets-admin__row.is-awaiting td:first-child { box-shadow: inset 3px 0 0 var(--an-danger); }
|
||||
.aksrt-native .aksrt-tickets-admin__row.is-open td { background: var(--an-primary-soft); }
|
||||
.aksrt-native .aksrt-tickets-admin__detail-row > td { padding: 0 !important; background: var(--an-bg-soft) !important; }
|
||||
|
||||
/* 状态小圆点（状态视图链接前缀） */
|
||||
.aksrt-ticket-dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 4px;
|
||||
border-radius: 50%;
|
||||
background: var(--aksrt-ticket-color, var(--an-muted));
|
||||
vertical-align: 1px;
|
||||
}
|
||||
|
||||
/* 按状态上色的徽标（--aksrt-ticket-color 由状态配置驱动，不走 NativeUi 色调） */
|
||||
.aksrt-ticket-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 2px 8px;
|
||||
padding: 1px 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
line-height: 20px;
|
||||
white-space: nowrap;
|
||||
color: var(--aksrt-ticket-color, #646970);
|
||||
background: color-mix(in srgb, var(--aksrt-ticket-color, #646970) 12%, #fff);
|
||||
border: 1px solid color-mix(in srgb, var(--aksrt-ticket-color, #646970) 30%, #fff);
|
||||
color: var(--aksrt-ticket-color, var(--an-muted));
|
||||
background: color-mix(in srgb, var(--aksrt-ticket-color, var(--an-muted)) 10%, #fff);
|
||||
}
|
||||
.aksrt-ticket-badge::before {
|
||||
content: "";
|
||||
@@ -116,45 +55,60 @@
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.aksrt-ticket-user { display: inline-flex; align-items: center; gap: 6px; min-width: 0; text-decoration: none; }
|
||||
/* 催单徽标：列表标题旁 + 详情信息卡。 */
|
||||
.aksrt-ticket-urge {
|
||||
display: inline-block;
|
||||
padding: 0 6px;
|
||||
color: var(--an-danger);
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
background: #fdf0f2;
|
||||
border: 1px solid color-mix(in srgb, var(--an-danger) 30%, #fff);
|
||||
border-radius: 9px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* 用户 chip（列表行） */
|
||||
.aksrt-ticket-user { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--an-text); text-decoration: none; }
|
||||
.aksrt-ticket-user img { flex: none; border-radius: 50%; }
|
||||
.aksrt-ticket-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
/* ---- 详情 ---- */
|
||||
/* ---- 详情面板（行内展开） ---- */
|
||||
.aksrt-ticket-detail {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 300px;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
border-top: 1px solid var(--aksrt-tk-border);
|
||||
border-bottom: 1px solid var(--aksrt-tk-border);
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid var(--an-border);
|
||||
border-bottom: 1px solid var(--an-border);
|
||||
}
|
||||
.aksrt-ticket-detail__main,
|
||||
.aksrt-ticket-detail__side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
|
||||
.aksrt-ticket-detail__heading { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 600; }
|
||||
.aksrt-ticket-detail__empty { margin: 0; color: var(--aksrt-tk-muted); }
|
||||
.aksrt-ticket-detail__heading { display: block; margin: 0 0 8px; color: var(--an-text); font-size: 13px; font-weight: 600; }
|
||||
.aksrt-ticket-detail__empty { margin: 0; color: var(--an-muted); }
|
||||
|
||||
.aksrt-ticket-detail__origin,
|
||||
.aksrt-ticket-detail__reply,
|
||||
.aksrt-ticket-detail__card,
|
||||
.aksrt-ticket-detail__reply-form {
|
||||
padding: 12px 14px;
|
||||
background: #fff;
|
||||
border: 1px solid var(--aksrt-tk-border);
|
||||
border-radius: 4px;
|
||||
background: var(--an-card);
|
||||
border: 1px solid var(--an-border);
|
||||
border-radius: var(--an-radius-sm);
|
||||
}
|
||||
.aksrt-ticket-detail__origin { border-left: 3px solid var(--aksrt-tk-accent); }
|
||||
.aksrt-ticket-detail__origin { border-left: 3px solid var(--an-primary); }
|
||||
|
||||
.aksrt-ticket-detail__msg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
|
||||
.aksrt-ticket-detail__msg-head img { border-radius: 50%; }
|
||||
.aksrt-ticket-detail__msg-head time { margin-left: auto; color: var(--aksrt-tk-muted); font-size: 12px; }
|
||||
.aksrt-ticket-detail__msg-head strong { color: var(--an-text); }
|
||||
.aksrt-ticket-detail__msg-head time { margin-left: auto; color: var(--an-muted); font-size: 12px; }
|
||||
.aksrt-ticket-detail__body { word-break: break-word; }
|
||||
.aksrt-ticket-detail__body > p:first-child { margin-top: 0; }
|
||||
.aksrt-ticket-detail__body > p:last-child { margin-bottom: 0; }
|
||||
|
||||
.aksrt-ticket-detail__replies { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
|
||||
.aksrt-ticket-detail__reply { margin: 0; }
|
||||
.aksrt-ticket-detail__reply.is-admin { margin-left: 32px; background: #f0f6fc; border-color: #c5d9ed; }
|
||||
.aksrt-ticket-detail__reply.is-admin { margin-left: 32px; background: var(--an-primary-soft); border-color: color-mix(in srgb, var(--an-primary) 24%, #fff); }
|
||||
.aksrt-ticket-detail__reply.is-user { margin-right: 32px; }
|
||||
/* 系统记录（催单等）：居中细条，与对话气泡区分。 */
|
||||
.aksrt-ticket-detail__system {
|
||||
@@ -162,28 +116,16 @@
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin: 0;
|
||||
color: var(--aksrt-tk-muted);
|
||||
color: var(--an-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
.aksrt-ticket-detail__system span { color: #b32d2e; }
|
||||
/* 催单徽标：列表标题旁 + 详情信息卡。 */
|
||||
.aksrt-ticket-urge {
|
||||
display: inline-block;
|
||||
padding: 0 6px;
|
||||
color: #b32d2e;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
background: #fcf0f1;
|
||||
border: 1px solid #f0c3c5;
|
||||
border-radius: 9px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.aksrt-ticket-detail__system span { color: var(--an-danger); }
|
||||
.aksrt-ticket-detail__quote {
|
||||
margin: 0 0 8px;
|
||||
padding: 6px 10px;
|
||||
color: var(--aksrt-tk-muted);
|
||||
background: var(--aksrt-tk-soft);
|
||||
border-left: 3px solid var(--aksrt-tk-border);
|
||||
color: var(--an-muted);
|
||||
background: var(--an-bg-soft);
|
||||
border-left: 3px solid var(--an-border);
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
@@ -194,25 +136,25 @@
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
object-fit: cover;
|
||||
border: 1px solid var(--aksrt-tk-border);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--an-border);
|
||||
border-radius: var(--an-radius-sm);
|
||||
}
|
||||
|
||||
.aksrt-ticket-detail__reply-form textarea { width: 100%; }
|
||||
.aksrt-ticket-detail__reply-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
|
||||
.aksrt-ticket-detail__reply-foot select { max-width: 240px; }
|
||||
.aksrt-ticket-detail__counter { margin-left: auto; color: var(--aksrt-tk-muted); font-size: 12px; }
|
||||
.aksrt-ticket-detail__counter.is-over { color: #d63638; }
|
||||
.aksrt-ticket-detail__counter { margin-left: auto; color: var(--an-muted); font-size: 12px; }
|
||||
.aksrt-ticket-detail__counter.is-over { color: var(--an-danger); }
|
||||
.aksrt-ticket-detail__closed {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin: 0;
|
||||
padding: 10px 14px;
|
||||
color: var(--aksrt-tk-muted);
|
||||
background: #fff;
|
||||
border: 1px dashed var(--aksrt-tk-border);
|
||||
border-radius: 4px;
|
||||
color: var(--an-muted);
|
||||
background: var(--an-card);
|
||||
border: 1px dashed var(--an-border);
|
||||
border-radius: var(--an-radius-sm);
|
||||
}
|
||||
|
||||
.aksrt-ticket-detail__info {
|
||||
@@ -221,8 +163,8 @@
|
||||
gap: 8px 12px;
|
||||
margin: 0;
|
||||
}
|
||||
.aksrt-ticket-detail__info dt { color: var(--aksrt-tk-muted); }
|
||||
.aksrt-ticket-detail__info dd { margin: 0; word-break: break-all; }
|
||||
.aksrt-ticket-detail__info dt { color: var(--an-muted); }
|
||||
.aksrt-ticket-detail__info dd { margin: 0; color: var(--an-text); word-break: break-all; }
|
||||
|
||||
.aksrt-ticket-detail__status-form { display: flex; flex-direction: column; gap: 8px; }
|
||||
.aksrt-ticket-detail__status-form label { display: flex; flex-direction: column; gap: 3px; }
|
||||
@@ -230,9 +172,10 @@
|
||||
.aksrt-ticket-detail__status-form .button { align-self: flex-start; }
|
||||
|
||||
.aksrt-ticket-detail__notes { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }
|
||||
.aksrt-ticket-detail__notes li { margin: 0; padding: 8px 10px; background: #fcf9e8; border-left: 3px solid #dba617; word-break: break-word; }
|
||||
.aksrt-ticket-detail__notes li { margin: 0; padding: 8px 10px; background: #fffbe8; border-left: 3px solid var(--an-warning); word-break: break-word; }
|
||||
.aksrt-ticket-detail__note-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: 12px; }
|
||||
.aksrt-ticket-detail__note-head time { color: var(--aksrt-tk-muted); }
|
||||
.aksrt-ticket-detail__note-head strong { color: var(--an-text); }
|
||||
.aksrt-ticket-detail__note-head time { color: var(--an-muted); }
|
||||
.aksrt-ticket-detail__note-form { display: flex; flex-direction: column; gap: 6px; }
|
||||
.aksrt-ticket-detail__note-form textarea { width: 100%; }
|
||||
.aksrt-ticket-detail__note-form .button { align-self: flex-start; }
|
||||
@@ -241,7 +184,6 @@
|
||||
.aksrt-ticket-detail { grid-template-columns: minmax(0, 1fr); }
|
||||
}
|
||||
@media (max-width: 782px) {
|
||||
.aksrt-tickets-admin__create-grid { grid-template-columns: minmax(0, 1fr); }
|
||||
.aksrt-ticket-detail__reply.is-admin,
|
||||
.aksrt-ticket-detail__reply.is-user { margin-left: 0; margin-right: 0; }
|
||||
}
|
||||
Reference in new issue
Block a user