/*! * md-components.css — SHARED Material UI component styles (acg-faka). * Extracted from the admin material.css so BOTH the admin AND the buyer/merchant frontend can load * the SAME styling for the shared JS components in assets/common/js/ (component.js popup/drawer, * form.js fields, table.js bootstrap-table, search.js toolbar, format.js badges) + generic primitives * (alerts, tooltips, toasts, select2, layui buttons, .text-* utilities). * • Load AFTER md-tokens.css (this file references the --md-* design tokens). * • All rules are scoped :root[data-theme] — the host page must set . * (Admin-shell styles — sidebar/header/layout/stat-cards/config — stay in assets/admin/css/material.css.) */ /* ============================================================= * * 7. UNIFIED CHIPS — one Material tonal-chip style for every badge * system: .a-badge*, .badge-light-*, .acg-badge, .table-item*. * Clickable action pills (.a-badge-glass) → MUI Outlined 按钮 (further down). * ============================================================= */ /* --- base chip shape --- */ :root[data-theme] .a-badge, :root[data-theme] .acg-badge, :root[data-theme] .table-item { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 3px 10px; font-size: 12px; font-weight: 500; line-height: 1.6; border-radius: var(--md-radius); white-space: nowrap; vertical-align: middle; box-shadow: none !important; text-shadow: none !important; transition: background-color var(--md-dur-fast) var(--md-ease), border-color var(--md-dur-fast) var(--md-ease); } /* status/state badges → OUTLINED (thin semantic border + faint tint + semantic text); entity chips (.table-item*: 会员等级/分类/用户 — carry an icon) stay FILLED tonal */ :root[data-theme] .a-badge, :root[data-theme] .acg-badge { border: 1px solid var(--md-outline); background-color: transparent; color: var(--md-on-surface-med); } :root[data-theme] .table-item { border: none; background-color: var(--md-hover-overlay); color: var(--md-on-surface-med); } /* user: 状态 badge 不要单独加图标 — hide font-icons inside status badges (.table-item uses , untouched) */ :root[data-theme] .a-badge > i, :root[data-theme] .acg-badge > i { display: none !important; } :root[data-theme] .table-item i { font-size: 12px; } :root[data-theme] .table-item .table-item-name { color: inherit !important; text-shadow: none !important; font-size: 12px; } /* --- semantic variants: OUTLINED for status badges (.a-badge .badge-light), FILLED for entity chips (.table-item*) --- */ :root[data-theme] .a-badge-primary, :root[data-theme] .badge-light-primary { background-color: rgba(var(--md-primary-rgb), .10) !important; border: 1px solid rgba(var(--md-primary-rgb), .45) !important; color: var(--md-primary) !important; } :root[data-theme] .table-item-cate { background-color: rgba(var(--md-primary-rgb), .12) !important; color: var(--md-primary) !important; } :root[data-theme] .a-badge-success, :root[data-theme] .badge-light-success { background-color: rgba(var(--md-success-rgb), .10) !important; border: 1px solid rgba(var(--md-success-rgb), .45) !important; color: var(--md-success) !important; } :root[data-theme] .table-item-user { background-color: rgba(var(--md-success-rgb), .14) !important; color: var(--md-success) !important; } :root[data-theme] .a-badge-danger, :root[data-theme] .badge-light-danger { background-color: rgba(var(--md-error-rgb), .10) !important; border: 1px solid rgba(var(--md-error-rgb), .45) !important; color: var(--md-error) !important; } :root[data-theme] .a-badge-warning, :root[data-theme] .badge-light-warning { background-color: rgba(var(--md-warning-rgb), .12) !important; border: 1px solid rgba(var(--md-warning-rgb), .50) !important; color: var(--md-warning) !important; } :root[data-theme] .a-badge-info, :root[data-theme] .badge-light-info { background-color: rgba(var(--md-info-rgb), .10) !important; border: 1px solid rgba(var(--md-info-rgb), .45) !important; color: var(--md-info) !important; } :root[data-theme] .badge-light-cambridgeBlue { background-color: rgba(0, 137, 123, .10) !important; border: 1px solid rgba(0, 137, 123, .45) !important; color: #00897B !important; } /* neutral / dark variants → outlined neutral */ :root[data-theme] .a-badge-secondary, :root[data-theme] .a-badge-dark, :root[data-theme] .a-badge-light, :root[data-theme] .a-badge-muted, :root[data-theme] .badge-light-dark { background-color: transparent !important; border: 1px solid var(--md-outline) !important; color: var(--md-on-surface-med) !important; } /* previously-undefined classes → sensible mappings (no longer "lost") */ :root[data-theme] .a-badge-blue, :root[data-theme] .a-badge-link { background-color: rgba(var(--md-primary-rgb), .10) !important; border: 1px solid rgba(var(--md-primary-rgb), .45) !important; color: var(--md-primary) !important; } :root[data-theme] .a-badge-check { background-color: rgba(var(--md-success-rgb), .10) !important; border: 1px solid rgba(var(--md-success-rgb), .45) !important; color: var(--md-success) !important; } :root[data-theme] .a-badge-dollar { background-color: rgba(var(--md-warning-rgb), .12) !important; border: 1px solid rgba(var(--md-warning-rgb), .50) !important; color: var(--md-warning) !important; } /* text-color helper spans inside chips shouldn't fight the chip color */ :root[data-theme] .a-badge .text-dark, :root[data-theme] .table-item .text-dark { color: inherit !important; } /* --- badge-group wrapper --- */ :root[data-theme] .a-badge-group, :root[data-theme] .badge-group { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; } /* --- Bootstrap solid .badge-{color} keep solid fills --- */ :root[data-theme] .badge { border-radius: var(--md-radius); font-weight: 500; } :root[data-theme] .badge.badge-primary { background-color: var(--md-primary) !important; color: var(--md-on-primary) !important; } :root[data-theme] .badge.badge-success { background-color: var(--md-success) !important; color: #fff !important; } :root[data-theme] .badge.badge-danger { background-color: var(--md-error) !important; color: #fff !important; } /* --- clickable action pills (.a-badge-glass) → MUI Outlined 按钮(通用,所有表格操作/控制列) --- 边框/文字都取按钮自身语义色(currentColor,由 .text-primary/.text-success/.text-danger… 决定), 静止态描边淡一档(~40%)、hover 描边转实 + 同色微染背景。color-mix 不支持的老浏览器回退到实色边+中性 hover。 */ :root[data-theme] .a-badge-glass { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: var(--md-radius) !important; border: 1px solid currentColor !important; border-color: color-mix(in srgb, currentColor 40%, transparent) !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; font-weight: 500; transition: background-color var(--md-dur-fast) var(--md-ease), border-color var(--md-dur-fast) var(--md-ease); } :root[data-theme] .a-badge-glass:hover, :root[data-theme] .table .action-col .a-badge-glass:hover { background-color: var(--md-hover-overlay) !important; background-color: color-mix(in srgb, currentColor 9%, transparent) !important; border-color: currentColor !important; } :root[data-theme] .table .action-col .a-badge-glass { background: transparent !important; } /* 纯图标按钮(无文字,.btn-title 为空):去掉 icon 与空 span 之间的 gap,否则右侧多留 5px、图标偏左 */ :root[data-theme] .a-badge-glass:has(.btn-title:empty) { gap: 0; } /* --- semantic text-color utilities → Material palette (this build hard-codes * Bootstrap defaults like #0d6efd on .text-*, ignoring --bs-* vars) --- */ :root[data-theme] .text-primary { color: var(--md-primary) !important; } :root[data-theme] .text-success { color: var(--md-success) !important; } :root[data-theme] .text-danger { color: var(--md-error) !important; } :root[data-theme] .text-warning { color: var(--md-warning) !important; } :root[data-theme] .text-info { color: var(--md-info) !important; } /* ============================================================= * * 9. Scrollbars / links / dark legibility * ============================================================= */ :root[data-theme] ::-webkit-scrollbar { width: 10px; height: 10px; } :root[data-theme] ::-webkit-scrollbar-track { background: transparent; } :root[data-theme] ::-webkit-scrollbar-thumb { background: var(--md-on-surface-dis); border-radius: var(--md-radius-pill); border: 2px solid transparent; background-clip: content-box; } :root[data-theme] ::-webkit-scrollbar-thumb:hover { background: var(--md-on-surface-med); background-clip: content-box; } :root[data-theme] body { scrollbar-color: var(--md-on-surface-dis) transparent; scrollbar-width: thin; } :root[data-theme] a { color: var(--md-primary); } :root[data-theme] .text-hover-primary:hover { color: var(--md-primary) !important; } /* ============================================================= * * PHASE 3 — Forms (Layui) + faithful MUI outlined floating labels * ============================================================= */ /* ---- Layer dialog shell (forms live here). Surface bg makes the * floating-label notch seamless; elevation comes from the shadow. ---- */ :root[data-theme] .layui-layer.layui-layer-page, :root[data-theme] .layui-layer.component-popup, :root[data-theme] .layui-layer-page { background: var(--md-surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: var(--md-radius-lg); box-shadow: var(--md-e24); border: none; } :root[data-theme="dark"] .layui-layer.layui-layer-page, :root[data-theme="dark"] .layui-layer.component-popup { border: 1px solid var(--md-divider); } :root[data-theme] .layui-layer-page .layui-layer-title { background: transparent; color: var(--md-on-surface); font-weight: 600; font-size: 16px; border-bottom: 1px solid var(--md-divider); /* component.css glass-skin gives the title a 25px radius + card shadow → its corners poke OUTSIDE the layer's 12px corners (the "double rounded corner"). Flatten it. */ border-radius: var(--md-radius-lg) var(--md-radius-lg) 0 0 !important; box-shadow: none !important; } :root[data-theme] .layui-layer-page .layui-layer-content, :root[data-theme] .component-popup .layui-card-body { background: var(--md-surface); color: var(--md-on-surface); } /* 收紧弹窗左右内边距(component.css 原为 35px,偏大 → 内容显得被挤在中间、右侧留白多); 24px 更紧凑,所有 tab 一致(覆写 component.css,免改打包文件) */ :root[data-theme] .component-popup .layui-card-body { padding-left: 24px !important; padding-right: 24px !important; } /* 无按钮栏的弹窗(如查看卡密):content 是最底部,它的方角会盖住 layer 的圆角 → 给 content 补底部圆角。有 .layui-layer-btn 的弹窗由按钮栏(上面)负责底部圆角,故排除。 */ :root[data-theme] .layui-layer-page:not(:has(.layui-layer-btn)) .layui-layer-content { border-radius: 0 0 var(--md-radius-lg) var(--md-radius-lg); } :root[data-theme] .layui-layer-page .layui-layer-btn { border-top: 1px solid var(--md-divider); padding: 12px 20px; box-shadow: none !important; border-radius: 0 0 var(--md-radius-lg) var(--md-radius-lg) !important; } :root[data-theme] .layui-layer-page .layui-layer-btn .layui-layer-btn0 { background: var(--md-primary) !important; border-color: var(--md-primary) !important; color: var(--md-on-primary) !important; border-radius: var(--md-radius); box-shadow: var(--md-e2); font-weight: 500; } :root[data-theme] .layui-layer-page .layui-layer-btn .layui-layer-btn0:hover { background: var(--md-primary-hover); box-shadow: var(--md-e4); } :root[data-theme] .layui-layer-page .layui-layer-btn .layui-layer-btn1 { background: transparent; border: 1px solid var(--md-outline); color: var(--md-on-surface-med) !important; border-radius: var(--md-radius); } /* popup button icons follow the button's OWN text colour — the defaults hardcode * `text-success` (green save) / `text-warning` (orange cancel) which never matched * the button or adapted to light/dark. `inherit` fixes every popup at once. */ :root[data-theme] .layui-layer-btn a i, :root[data-theme] .layui-layer-btn button i { color: inherit !important; } :root[data-theme] .layui-layer-page .layui-layer-setwin .layui-layer-close { color: var(--md-on-surface-med); } :root[data-theme] .layui-layer-shade { background-color: var(--md-scrim) !important; } /* dialog tabs = MUI Tabs — popup tabs are in .layui-layer-title (not

) */ :root[data-theme] .layui-layer-tab .layui-layer-title { background: var(--md-surface) !important; border-bottom: 1px solid var(--md-divider) !important; } :root[data-theme] .layui-layer-tab .layui-layer-title span { height: 42px !important; width: auto !important; /* layui 基础 CSS 给每个 tab 定死 width:80px → 短标签(控件)右侧空一块;改成按内容自适应 */ min-width: 0 !important; padding: 0 18px !important; color: var(--md-on-surface-med) !important; font-weight: 500; font-size: 14px; border: none !important; border-radius: 0 !important; background: transparent !important; position: relative; justify-content: center; transition: color var(--md-dur-fast) var(--md-ease), background-color var(--md-dur-fast) var(--md-ease); } :root[data-theme] .layui-layer-tab .layui-layer-title span:first-child { padding-left: 20px !important; } :root[data-theme] .layui-layer-tab .layui-layer-title span i { color: var(--md-on-surface-med) !important; } :root[data-theme] .layui-layer-tab .layui-layer-title span:hover { color: var(--md-on-surface) !important; background: var(--md-hover-overlay) !important; } :root[data-theme] .layui-layer-tab .layui-layer-title span.layui-this { color: var(--md-primary) !important; background: transparent !important; border-radius: 0 !important; } :root[data-theme] .layui-layer-tab .layui-layer-title span.layui-this i { color: var(--md-primary) !important; } :root[data-theme] .layui-layer-tab .layui-layer-title span.layui-this::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: var(--md-primary); border-radius: 2px 2px 0 0; } /* ===== Right-side drawer variant of the popup form (opt.drawer:true) — identical * component / tabs / submit as the modal; only the presentation differs. ===== */ :root[data-theme] .layui-layer.component-drawer { right: 0 !important; left: auto !important; top: 0 !important; /* flush to the right edge */ height: 100vh !important; border-radius: var(--md-radius-lg) 0 0 var(--md-radius-lg) !important; box-shadow: -12px 0 44px rgba(0,0,0,.32) !important; display: flex !important; flex-direction: column; max-height: 100vh; overflow: visible; animation: md-drawer-in var(--md-dur) var(--md-ease); } :root[data-theme="dark"] .layui-layer.component-drawer { border: 1px solid var(--md-divider); border-right: none; } /* title / tab-strip pinned top, content scrolls, footer pinned bottom */ :root[data-theme] .component-drawer .layui-layer-title { flex: 0 0 auto; } :root[data-theme] .component-drawer .layui-layer-content { flex: 1 1 auto !important; height: auto !important; max-height: none !important; overflow-y: auto !important; } :root[data-theme] .component-drawer .layui-layer-btn { flex: 0 0 auto; margin: 0 !important; } /* many-tab support: the narrower drawer can't fit 8 tabs on one row, so wrap the tab * strip to multiple rows (keeps EVERY tab visible instead of clipping the overflow). */ :root[data-theme] .component-drawer.layui-layer-tab .layui-layer-title { display: flex !important; flex-wrap: wrap; height: auto !important; min-height: 42px; align-content: flex-start; padding-right: 40px; /* keep row-1 tabs clear of the close button */ overflow: visible !important; } :root[data-theme] .component-drawer.layui-layer-tab .layui-layer-title span { float: none !important; } /* slide in / out from the right (layer's own anim disabled via anim:-1 in JS) */ @keyframes md-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes md-drawer-out { from { transform: translateX(0); } to { transform: translateX(100%); } } :root[data-theme] .layui-layer.component-drawer.layer-anim-close { animation: md-drawer-out var(--md-dur) var(--md-ease) forwards; } /* ---- Layui inputs / textarea — MUI outlined ---- */ :root[data-theme] .layui-input, :root[data-theme] .layui-textarea, :root[data-theme] .layui-select { background: transparent !important; /* defeat component.css glass !important */ border: 1px solid var(--md-outline) !important; border-radius: var(--md-radius) !important; color: var(--md-on-surface); transition: border-color var(--md-dur-fast) var(--md-ease), box-shadow var(--md-dur-fast) var(--md-ease); } :root[data-theme] .layui-input::placeholder, :root[data-theme] .layui-textarea::placeholder { color: var(--md-on-surface-dis); } :root[data-theme] .layui-input:hover, :root[data-theme] .layui-textarea:hover { border-color: var(--md-on-surface); } :root[data-theme] .layui-input:focus, :root[data-theme] .layui-textarea:focus, :root[data-theme] .layui-input.layui-input-focus { border-color: var(--md-primary); box-shadow: 0 0 0 1px var(--md-primary); outline: none; } :root[data-theme] .layui-input:-webkit-autofill { -webkit-text-fill-color: var(--md-on-surface); -webkit-box-shadow: 0 0 0 1000px var(--md-surface) inset; caret-color: var(--md-on-surface); } /* ===== Custom control (控件) builder — card-per-control, labeled fields ===== */ /* neutralise the legacy component.css inline layout (fixed pixel widths / dashed line) */ :root[data-theme] .widget-general { width: 100% !important; display: block; } :root[data-theme] .widget-w120, :root[data-theme] .widget-w140, :root[data-theme] .widget-w160, :root[data-theme] .widget-w180 { width: 100% !important; } /* card (the 1px solid border replaces the old dashed red separator) */ :root[data-theme] .widget-block { background: var(--md-surface-2); border: 1px solid var(--md-divider) !important; border-radius: var(--md-radius-lg); padding: 14px 16px 16px; margin-bottom: 12px !important; } /* header: title + delete icon-button */ :root[data-theme] .widget-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } :root[data-theme] .widget-title { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--md-on-surface-med); } :root[data-theme] .widget-title i { color: var(--md-primary); font-size: 15px; } :root[data-theme] .widget-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; color: var(--md-on-surface-med); transition: background-color var(--md-dur-fast) var(--md-ease), color var(--md-dur-fast) var(--md-ease); } :root[data-theme] .widget-del:hover { background: rgba(var(--md-error-rgb), .12); color: var(--md-error); } /* labeled fields grid */ :root[data-theme] .widget-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } /* labeled fields → MUI outlined "notched" floating label (matches the rest of the admin's inputs). .widget-data-field is excluded — it wraps the option editor, not one input. */ :root[data-theme] .widget-field:not(.widget-data-field) { position: relative; display: block; min-width: 0; } :root[data-theme] .widget-field:not(.widget-data-field) > label { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); transform-origin: left center; z-index: 1; margin: 0; padding: 0 4px; font-size: 14px; line-height: 1; font-weight: 400; color: var(--md-on-surface-med); pointer-events: none; background: transparent; max-width: calc(100% - 22px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: top var(--md-dur-fast) var(--md-ease), transform var(--md-dur-fast) var(--md-ease), color var(--md-dur-fast) var(--md-ease), background-color var(--md-dur-fast) var(--md-ease); } /* lift on focus, when filled (input showing a value), or for a