kate522andClaude Fable 5
fe3ef82718
Add message details, per-row actions, selection-aware bulk controls and confirmation dialogs. Merge filters into the list card and link overview statistics to the matching views with site-timezone today filtering. Improve the compose dialog with Unicode character counters, recipient mode segments, role counts and explicit broadcast confirmation verified against the resolved role and recipient count on submission. Split rendering into focused sibling traits and cover rendering, handlers and UI interactions. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
134 lines
8.7 KiB
CSS
134 lines
8.7 KiB
CSS
/* 消息管理原生页。共享卡片 / 表单 / 筛选沿用 native-ui.css 的 --an-* 令牌。 */
|
|
.aksrt-messages-admin [hidden] { display: none; }
|
|
.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); }
|
|
.aksrt-messages-admin .aksrt-native-header__actions .button { display: inline-flex; align-items: center; gap: 4px; }
|
|
.aksrt-messages-admin .aksrt-native-header__actions .button .dashicons { margin: 0; line-height: 1; vertical-align: middle; }
|
|
.aksrt-messages-admin .aksrt-native-stat:focus-visible { outline: 2px solid var(--an-primary); outline-offset: 2px; }
|
|
|
|
/* ---- 列表内的筛选与批量工具栏 ---- */
|
|
.aksrt-messages-admin__toolbar { padding: 14px 20px; border-bottom: 1px solid var(--an-border-soft); }
|
|
.aksrt-messages-admin__toolbar .subsubsub { margin: 0 0 12px; }
|
|
.aksrt-messages-admin__toolbar .aksrt-native-filters { margin: 0; }
|
|
.aksrt-messages-admin__bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px; }
|
|
.aksrt-messages-admin__selection { margin-right: auto; color: var(--an-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
|
|
.aksrt-messages-admin .button:disabled,
|
|
.aksrt-messages-admin .button:disabled:hover { color: var(--an-muted) !important; background: var(--an-bg-soft) !important; border-color: var(--an-border-soft) !important; cursor: not-allowed; }
|
|
.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: var(--an-danger); border-color: var(--an-danger); }
|
|
|
|
.aksrt-messages-admin__table .column-title { width: 40%; }
|
|
.aksrt-messages-admin__table .column-type { width: 12%; }
|
|
.aksrt-messages-admin__table .column-user { width: 18%; }
|
|
.aksrt-messages-admin__table .column-read { width: 8%; }
|
|
.aksrt-messages-admin__table .column-time { width: 14%; }
|
|
.aksrt-messages-admin__table td { vertical-align: middle; }
|
|
.aksrt-messages-admin__table .row-title { display: inline; padding: 0; font-weight: 600; text-align: left; word-break: break-word; line-height: 1.5; }
|
|
.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(--an-primary); }
|
|
.aksrt-messages-admin__table tr.is-selected > td,
|
|
.aksrt-messages-admin__table tr.is-selected > th { background: var(--an-primary-soft); }
|
|
.aksrt-messages-admin__desc { margin-top: 3px; color: var(--an-text-2); word-break: break-word; }
|
|
.aksrt-msg-row-actions { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; }
|
|
.aksrt-msg-row-actions button { padding: 0; font-size: 12px; text-decoration: none; }
|
|
|
|
/* 类型徽章（可点击筛选） */
|
|
.aksrt-msg-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
white-space: nowrap;
|
|
text-decoration: none;
|
|
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, 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: var(--an-danger); }
|
|
.aksrt-msg-badge.is-social { --aksrt-msg-tone: #8c5bd0; }
|
|
.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(--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; }
|
|
|
|
/* ---- 发送 / 详情 / 二次确认共用弹窗 ---- */
|
|
html.aksrt-msg-modal-open { overflow: hidden; }
|
|
.aksrt-msg-dialog {
|
|
width: min(640px, calc(100vw - 32px));
|
|
max-height: calc(100vh - 64px);
|
|
padding: 0;
|
|
overflow: hidden;
|
|
color: var(--an-text-2);
|
|
background: var(--an-card);
|
|
border: 0;
|
|
border-radius: var(--an-radius);
|
|
box-shadow: 0 12px 48px rgba(15, 23, 42, .18);
|
|
}
|
|
.aksrt-msg-dialog::backdrop { background: rgba(15, 23, 42, .45); }
|
|
.aksrt-msg-dialog--confirm { width: min(440px, calc(100vw - 32px)); }
|
|
.aksrt-msg-dialog__frame { display: flex; flex-direction: column; max-height: inherit; margin: 0; }
|
|
.aksrt-msg-dialog__head {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid var(--an-border-soft);
|
|
}
|
|
.aksrt-msg-dialog .aksrt-msg-dialog__title { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--an-text); font-size: 16px; font-weight: 600; line-height: 1.4; }
|
|
.aksrt-msg-dialog__title .dashicons { flex-shrink: 0; color: var(--an-primary); }
|
|
.aksrt-msg-dialog__close { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; color: var(--an-muted); background: transparent; border: 0; border-radius: var(--an-radius-sm); cursor: pointer; }
|
|
.aksrt-msg-dialog__close:hover,
|
|
.aksrt-msg-dialog__close:focus-visible { color: var(--an-text); background: var(--an-bg-soft); }
|
|
.aksrt-msg-dialog__body { min-height: 0; padding: 18px 20px; overflow-y: auto; overscroll-behavior: contain; }
|
|
.aksrt-msg-dialog__note { margin: 14px 0 0; font-size: 12px; }
|
|
.aksrt-msg-dialog__foot { display: flex; flex-shrink: 0; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--an-border-soft); }
|
|
.aksrt-msg-dialog .aksrt-native-form-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
|
|
.aksrt-msg-dialog--confirm .aksrt-msg-dialog__body p { margin: 0; line-height: 1.8; }
|
|
|
|
/* 分段单选：保留键盘语义，隐藏 WP 默认勾选标记。 */
|
|
.aksrt-msg-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; padding: 0; border: 0; }
|
|
.aksrt-msg-modes legend { margin-bottom: 8px; padding: 0; }
|
|
.aksrt-msg-mode { position: relative; cursor: pointer; }
|
|
.aksrt-msg-mode input[type="radio"] { position: absolute; width: 1px; height: 1px; min-width: 0; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; opacity: 0; appearance: none; }
|
|
.aksrt-msg-mode > span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; color: var(--an-text-2); border: 1px solid var(--an-border); border-radius: var(--an-radius-sm); }
|
|
.aksrt-msg-mode input:checked + span { color: var(--an-primary); background: var(--an-primary-soft); border-color: var(--an-primary); font-weight: 600; }
|
|
.aksrt-msg-mode:hover > span { border-color: var(--an-primary); }
|
|
.aksrt-msg-mode input:focus-visible + span { outline: 2px solid var(--an-primary); outline-offset: 2px; }
|
|
.aksrt-msg-counter { align-self: flex-end; color: var(--an-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
|
|
.aksrt-msg-counter.is-over { color: var(--an-danger); font-weight: 600; }
|
|
|
|
/* 详情原样展示纯文本，保留换行，不插入消息中的 HTML。 */
|
|
.aksrt-msg-detail__title { margin: 0 0 16px; color: var(--an-text); font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
|
|
.aksrt-msg-detail__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 14px; background: var(--an-bg-soft); border-radius: var(--an-radius-sm); }
|
|
.aksrt-msg-detail__meta dt { color: var(--an-muted); font-size: 12px; }
|
|
.aksrt-msg-detail__meta dd { margin: 4px 0 0; overflow-wrap: anywhere; }
|
|
.aksrt-msg-detail__content { line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
.aksrt-msg-detail__link { display: block; margin-top: 16px; overflow-wrap: anywhere; }
|
|
|
|
@media (max-width: 782px) {
|
|
.aksrt-messages-admin__toolbar,
|
|
.aksrt-messages-admin__bulk { padding: 12px 14px; }
|
|
.aksrt-messages-admin__table .column-type,
|
|
.aksrt-messages-admin__table .column-read { display: none; }
|
|
}
|
|
@media (max-width: 480px) {
|
|
.aksrt-msg-dialog { max-height: calc(100dvh - 32px); }
|
|
.aksrt-msg-dialog__head,
|
|
.aksrt-msg-dialog__body,
|
|
.aksrt-msg-dialog__foot { padding-left: 14px; padding-right: 14px; }
|
|
.aksrt-msg-detail__meta { grid-template-columns: 1fr; }
|
|
}
|