/** * Material Design 3 主题层（fastwebmanadmin 管理后台） * * 覆盖范围： * - MD3 设计 token（浅色/深色，主题色由 skins/theme-*.css 覆写） * - Bootstrap 3 组件 MD3 化：按钮/表单/下拉/分页/标签/表格/面板/警告框 * - 后台外壳：顶栏(多标签)/侧边导航/内容区/右侧控制栏（替代 AdminLTE 皮肤） * - bootstrap-table、layer 弹窗、toastr 通知、selectpage、日期选择器皮肤 * * 说明：本文件与 backend.css（AdminLTE 体系）互斥，由 meta.html 加载。 */ /* ========================================================================== 1. 设计 Token ========================================================================== */ :root { /* 主色（默认靛蓝，可被 skins/theme-*.css 覆写） */ --md-primary: #4356b8; --md-on-primary: #ffffff; --md-primary-container: #dee0ff; --md-on-primary-container: #00105c; /* 次级容器色（选中态导航、菜单等） */ --md-secondary-container: #e2e0f9; --md-on-secondary-container: #191b4d; /* 功能色 */ --md-error: #b3261e; --md-on-error: #ffffff; --md-error-container: #f9dedc; --md-on-error-container: #410e0b; --md-success: #1e6b3c; --md-success-container: #c8eed4; --md-on-success-container: #072711; --md-warning: #825500; --md-warning-container: #ffddb3; --md-on-warning-container: #291800; /* 表面层级 */ --md-surface: #ffffff; --md-canvas: #f6f7fb; --md-surface-container: #f1f2f8; --md-surface-container-high: #eaebf3; --md-surface-container-highest: #e3e5ee; /* 文字与描边 */ --md-on-surface: #1a1c20; --md-on-surface-variant: #44474e; --md-outline: #74777f; --md-outline-variant: #c6c8d0; /* 反色（Snackbar/通知） */ --md-inverse-surface: #2f3036; --md-inverse-on-surface: #f1f0f7; /* 状态层 */ --md-state-hover: rgba(26, 28, 32, .06); --md-state-pressed: rgba(26, 28, 32, .12); /* 阴影（MD3 柔化版） */ --md-elev-1: 0 1px 2px rgba(31, 35, 41, .06), 0 1px 3px rgba(31, 35, 41, .05); --md-elev-2: 0 2px 6px rgba(31, 35, 41, .08), 0 1px 2px rgba(31, 35, 41, .06); --md-elev-3: 0 6px 16px rgba(31, 35, 41, .10), 0 2px 6px rgba(31, 35, 41, .07); /* 圆角 */ --md-r-xs: 4px; --md-r-s: 8px; --md-r-m: 12px; --md-r-l: 16px; --md-r-xl: 24px; --md-r-full: 999px; /* 字体与尺寸 */ --md-font: "Segoe UI", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; --md-header-h: 64px; --md-sidebar-w: 248px; --md-sidebar-mini-w: 72px; } /* 深色主题：由 激活 */ html[data-theme="dark"] { --md-primary: #b9c2ff; --md-on-primary: #1a267d; --md-primary-container: #2e43b5; --md-on-primary-container: #dee0ff; --md-secondary-container: #454562; --md-on-secondary-container: #e2e0f9; --md-error: #f2b8b5; --md-on-error: #601410; --md-error-container: #8c1d18; --md-on-error-container: #f9dedc; --md-success: #8bd8a2; --md-success-container: #1c4e2c; --md-on-success-container: #c8eed4; --md-warning: #ffb868; --md-warning-container: #6b3f00; --md-on-warning-container: #ffddb3; --md-surface: #1a1b20; --md-canvas: #111217; --md-surface-container: #202127; --md-surface-container-high: #26272e; --md-surface-container-highest: #2c2d35; --md-on-surface: #e3e2e9; --md-on-surface-variant: #c5c6d0; --md-outline: #8f9099; --md-outline-variant: #484952; --md-inverse-surface: #e3e2e9; --md-inverse-on-surface: #303036; --md-state-hover: rgba(255, 255, 255, .07); --md-state-pressed: rgba(255, 255, 255, .12); --md-elev-1: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3); --md-elev-2: 0 2px 6px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .4); --md-elev-3: 0 6px 16px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .5); } /* ========================================================================== 2. 基础 ========================================================================== */ body { font-family: var(--md-font); font-size: 14px; color: var(--md-on-surface); background: var(--md-canvas); -webkit-font-smoothing: antialiased; } a { color: var(--md-primary); } a:hover, a:focus { color: var(--md-primary); } h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--md-on-surface); } ::selection { background: var(--md-primary-container); color: var(--md-on-primary-container); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--md-outline-variant); border-radius: var(--md-r-full); } ::-webkit-scrollbar-thumb:hover { background: var(--md-outline); } ::-webkit-scrollbar-track { background: transparent; } .text-muted { color: var(--md-on-surface-variant) !important; } .text-primary { color: var(--md-primary) !important; } .text-success { color: var(--md-success) !important; } .text-danger { color: var(--md-error) !important; } .text-warning { color: var(--md-warning) !important; } .text-info { color: var(--md-primary) !important; } /* 灰色工具类（对齐 FastAdmin admin.css）：表格开关按钮关闭状态同时挂 text-success 和 text-gray， 依赖同类名 !important 下后定义者生效，因此本条必须排在上方 text-success 之后 */ .text-gray { color: #d2d6de !important; } .bg-primary { background-color: var(--md-primary) !important; } .bg-success { background-color: var(--md-success) !important; } .bg-danger { background-color: var(--md-error) !important; } .bg-warning { background-color: var(--md-warning) !important; } .bg-info { background-color: var(--md-primary) !important; } code, pre { font-family: "Cascadia Mono", Consolas, "Courier New", monospace; color: var(--md-on-surface); } pre { background: var(--md-surface-container); border-radius: var(--md-r-m); border: none; padding: 14px 16px; font-size: 13px; } code { background: var(--md-surface-container-high); color: var(--md-on-surface); padding: 1px 6px; border-radius: var(--md-r-xs); } hr { border-top: 1px solid var(--md-outline-variant); } /* ========================================================================== 3. 按钮（BS3 → MD3） ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--md-r-full); font-size: 14px; font-weight: 500; letter-spacing: .2px; line-height: 1; vertical-align: middle; box-shadow: none; text-shadow: none; transition: box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease; } .btn:focus, .btn.active:focus, .btn:active:focus { outline: none; } .btn:focus-visible { box-shadow: 0 0 0 2px var(--md-surface), 0 0 0 4px var(--md-primary); } .btn .fa { font-size: 14px; } .btn-primary { background-color: var(--md-primary); color: var(--md-on-primary); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { background-color: var(--md-primary); color: var(--md-on-primary); background-image: linear-gradient(0deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)); } .btn-primary:active { background-image: linear-gradient(0deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .12)); } .btn-success { background-color: var(--md-success); color: var(--md-on-success-container) ; } .btn-success, .btn-success:hover { color: #fff; } html[data-theme="dark"] .btn-success { color: #07210f; } .btn-success:hover, .btn-success:focus, .btn-success:active { background-color: var(--md-success); background-image: linear-gradient(0deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)); } .btn-danger, .btn-danger:hover { background-color: var(--md-error); color: var(--md-on-error); } .btn-danger:hover, .btn-danger:focus, .btn-danger:active { background-image: linear-gradient(0deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)); } /* info / warning → MD3 tonal button */ .btn-info { background-color: var(--md-primary-container); color: var(--md-on-primary-container); } .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active { background-color: var(--md-primary-container); color: var(--md-on-primary-container); } .btn-warning { background-color: var(--md-warning-container); color: var(--md-on-warning-container); } .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active { background-color: var(--md-warning-container); color: var(--md-on-warning-container); } /* default → outlined */ .btn-default { background-color: transparent; border-color: var(--md-outline); color: var(--md-on-surface); } .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active { background-color: var(--md-state-hover); border-color: var(--md-outline); color: var(--md-on-surface); } /* text button */ .btn-link, .btn-flat { background: transparent; color: var(--md-primary); padding: 0 12px; } .btn-link:hover, .btn-link:focus, .btn-flat:hover, .btn-flat:focus { color: var(--md-primary); background: var(--md-state-hover); } .btn.disabled, .btn[disabled], fieldset[disabled] .btn { opacity: .38; box-shadow: none; pointer-events: none; } .btn-lg, .btn-group-lg > .btn { height: 48px; padding: 0 28px; font-size: 15px; } .btn-sm, .btn-group-sm > .btn { height: 32px; padding: 0 14px; font-size: 13px; } /* 表格操作列 / 工具栏小按钮 → tonal small */ .btn-xs, .btn-group-xs > .btn { height: 28px; padding: 0 12px; font-size: 12px; gap: 4px; } .btn-xs .fa { font-size: 12px; } .btn-xs.btn-primary, .btn-xs.btn-success, .btn-xs.btn-info { background-color: var(--md-primary-container); color: var(--md-on-primary-container); } .btn-xs.btn-primary:hover, .btn-xs.btn-success:hover, .btn-xs.btn-info:hover, .btn-xs.btn-primary:focus, .btn-xs.btn-success:focus, .btn-xs.btn-info:focus { background-color: var(--md-primary-container); color: var(--md-on-primary-container); background-image: linear-gradient(0deg, var(--md-state-pressed), var(--md-state-pressed)); } .btn-xs.btn-danger { background-color: var(--md-error-container); color: var(--md-on-error-container); } .btn-xs.btn-danger:hover, .btn-xs.btn-danger:focus { background-color: var(--md-error-container); color: var(--md-on-error-container); background-image: linear-gradient(0deg, var(--md-state-pressed), var(--md-state-pressed)); } .btn-xs.btn-default { border-color: transparent; background: transparent; color: var(--md-on-surface-variant); } .btn-xs.btn-default:hover { background: var(--md-state-hover); } /* 按钮组 */ .btn-group > .btn:first-child:not(:last-child) { border-radius: var(--md-r-full) 0 0 var(--md-r-full); } .btn-group > .btn:last-child:not(:first-child) { border-radius: 0 var(--md-r-full) var(--md-r-full) 0; } .btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0; } .btn-group > .btn + .btn { margin-left: -1px; } /* ========================================================================== 4. 表单（BS3 → MD3 outlined field） ========================================================================== */ .form-control { height: 38px; padding: 6px 14px; font-size: 14px; color: var(--md-on-surface); background-color: transparent; background-image: none; border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-s); box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; } .form-control::-webkit-input-placeholder { color: var(--md-outline); } .form-control:focus { border-color: var(--md-primary); box-shadow: inset 0 0 0 1px var(--md-primary); outline: none; } .form-control[disabled], .form-control[readonly] { background-color: var(--md-surface-container); color: var(--md-on-surface-variant); opacity: 1; } textarea.form-control { height: auto; min-height: 88px; padding: 10px 14px; } select.form-control { appearance: none; -webkit-appearance: none; background-image: none; padding-right: 14px; } .input-group .form-control:first-child { border-radius: var(--md-r-s) 0 0 var(--md-r-s); } .input-group .form-control:last-child { border-radius: 0 var(--md-r-s) var(--md-r-s) 0; } /* 输入框组内直接子按钮（上传/选择按钮）：高度随 flex stretch 拉伸至与输入框一致，药丸圆角改为方角 */ .input-group > .btn { height: auto; /* 覆盖 .btn 固定 36px 高度，使按钮与 form-control 等高对齐 */ min-height: 36px; /* 保底高度，避免独立使用时塌陷 */ border-radius: 0; /* 组内按钮去掉独立药丸圆角 */ padding: 0 14px; /* 组内按钮水平内边距收窄 */ } /* 组内最后一个按钮：仅右侧保留小圆角，与输入框组收尾一致 */ .input-group > .btn:last-of-type { border-radius: 0 var(--md-r-s) var(--md-r-s) 0; } .input-group-addon { background-color: var(--md-surface-container); border: 1px solid var(--md-outline-variant); color: var(--md-on-surface-variant); border-radius: 0 var(--md-r-s) var(--md-r-s) 0; font-size: 13px; min-width: 40px; } .input-group-addon:first-child { border-radius: var(--md-r-s) 0 0 var(--md-r-s); } .input-group .form-control:first-child + .input-group-addon { border-left: 0; } .form-group { margin-bottom: 18px; } .control-label { color: var(--md-on-surface-variant); font-weight: 500; font-size: 13px; } .help-block { color: var(--md-outline); font-size: 12px; } input[type="checkbox"], input[type="radio"] { accent-color: var(--md-primary); } .checkbox label, .radio label { padding-left: 24px; font-weight: 400; color: var(--md-on-surface); } .checkbox-inline input[type="checkbox"], .radio-inline input[type="radio"] { margin-left: -20px; margin-right: 6px; } /* 校验（nice-validator） */ .msg-box { display: block; margin-top: 4px; } .msg-box .msg-error, .msg-box .msg-icon { color: var(--md-error); font-size: 12px; } .n-invalid, .n-invalid:focus { border-color: var(--md-error) !important; box-shadow: inset 0 0 0 1px var(--md-error); } .has-error .form-control { border-color: var(--md-error); } .has-error .control-label { color: var(--md-error); } /* 开关占位（checkbox 变体） */ .form-control.input-inline { display: inline-block; width: auto; } /* ========================================================================== 5. 标签 / 徽标（label → assist chip） ========================================================================== */ .label { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: var(--md-r-s); font-size: 12px; font-weight: 500; letter-spacing: .2px; line-height: 1; background-color: var(--md-surface-container-high); color: var(--md-on-surface-variant); } .label-primary { background-color: var(--md-primary-container); color: var(--md-on-primary-container); } .label-success { background-color: var(--md-success-container); color: var(--md-on-success-container); } .label-danger { background-color: var(--md-error-container); color: var(--md-on-error-container); } .label-warning { background-color: var(--md-warning-container); color: var(--md-on-warning-container); } .label-info { background-color: var(--md-primary-container); color: var(--md-on-primary-container); } .label-default { background-color: var(--md-surface-container-high); color: var(--md-on-surface-variant); } .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; border-radius: var(--md-r-full); background-color: var(--md-error); color: var(--md-on-error); font-size: 11px; font-weight: 600; line-height: 1; } /* ========================================================================== 6. 下拉菜单 / 分页 / 警告框 / 面包屑 ========================================================================== */ .dropdown-menu { min-width: 180px; padding: 8px; background-color: var(--md-surface); border: none; border-radius: var(--md-r-m); box-shadow: var(--md-elev-2); } .dropdown-menu > li > a { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-radius: var(--md-r-s); color: var(--md-on-surface); font-size: 14px; white-space: nowrap; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background-color: var(--md-state-hover); color: var(--md-on-surface); } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { background-color: var(--md-secondary-container); color: var(--md-on-secondary-container); } .dropdown-menu .divider { height: 1px; margin: 6px 8px; background-color: var(--md-outline-variant); } .dropdown-header { color: var(--md-outline); font-size: 12px; padding: 8px 14px 4px; } /* bootstrap-select（selectpicker）适配： md3 的 .btn 清零了上下 padding，原生靠 padding 居中的文字会贴顶； 该库 css 由 require-css 动态注入（晚于本文件），故加 body 前缀提高特异性 */ body .bootstrap-select .dropdown-toggle .filter-option-inner { display: flex; align-items: center; height: 100%; } /* 选中项勾选图标：原生 top:5px 基于 ~26px 行高，40px 行高下改为垂直居中 */ body .bootstrap-select.show-tick .dropdown-menu .selected span.check-mark { top: 50%; transform: translateY(-50%); } .pagination > li > a, .pagination > li > span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; margin: 0 2px; padding: 0 10px; border: none; border-radius: var(--md-r-full); color: var(--md-on-surface-variant); font-size: 14px; background: transparent; } .pagination > li > a:hover, .pagination > li > span:hover { background-color: var(--md-state-hover); color: var(--md-on-surface); } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > a:focus { background-color: var(--md-primary-container); color: var(--md-on-primary-container); } .pagination > .disabled > a, .pagination > .disabled > a:hover { color: var(--md-outline-variant); background: transparent; } .alert { border: none; border-radius: var(--md-r-m); padding: 14px 18px; font-size: 14px; box-shadow: none; } .alert-success { background-color: var(--md-success-container); color: var(--md-on-success-container); } .alert-danger { background-color: var(--md-error-container); color: var(--md-on-error-container); } .alert-warning { background-color: var(--md-warning-container); color: var(--md-on-warning-container); } .alert-info { background-color: var(--md-primary-container); color: var(--md-on-primary-container); } .alert .close { opacity: .6; text-shadow: none; color: inherit; } .alert-danger-light { background-color: var(--md-error-container); color: var(--md-on-error-container); border: none; } .breadcrumb { background: transparent; padding: 0; margin: 0; font-size: 13px; } .breadcrumb > li + li::before { content: "/"; color: var(--md-outline); padding: 0 8px; } .breadcrumb > li a { color: var(--md-on-surface-variant); } .breadcrumb > .active { color: var(--md-on-surface); } /* 提示与气泡 */ .tooltip-inner { background-color: var(--md-inverse-surface); color: var(--md-inverse-on-surface); border-radius: var(--md-r-s); font-size: 12px; padding: 6px 10px; } .tooltip.top .tooltip-arrow { border-top-color: var(--md-inverse-surface); } .tooltip.bottom .tooltip-arrow { border-bottom-color: var(--md-inverse-surface); } .tooltip.left .tooltip-arrow { border-left-color: var(--md-inverse-surface); } .tooltip.right .tooltip-arrow { border-right-color: var(--md-inverse-surface); } .popover { border: none; border-radius: var(--md-r-m); box-shadow: var(--md-elev-2); background: var(--md-surface); } .popover-title { background: transparent; border-bottom: 1px solid var(--md-outline-variant); } /* ========================================================================== 7. 导航标签（nav-tabs → MD3 tabs） ========================================================================== */ .nav-tabs { border-bottom: 1px solid var(--md-outline-variant); } .nav-tabs > li { float: left; margin-bottom: -1px; } .nav-tabs > li > a { display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 16px; margin-right: 4px; border: none; border-radius: var(--md-r-m) var(--md-r-m) 0 0; color: var(--md-on-surface-variant); font-size: 14px; font-weight: 500; background: transparent; } .nav-tabs > li > a:hover { background-color: var(--md-state-hover); border-color: transparent; color: var(--md-on-surface); } /* BS5 规范激活态在 a 上（a.active），同时兼容旧模式 li.active（如表格筛选 tab） */ .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus, .nav-tabs > li > a.active, .nav-tabs > li > a.active:hover, .nav-tabs > li > a.active:focus { background: transparent; border: none; border-bottom: 3px solid var(--md-primary); color: var(--md-primary); } .nav-tabs.nav-justified > li { display: table-cell; float: none; } /* ========================================================================== 8. 表格（BS3 table → MD3 data table） ========================================================================== */ .table { color: var(--md-on-surface); margin-bottom: 0; } .table > thead > tr > th { background-color: transparent; color: var(--md-on-surface-variant); font-size: 12px; font-weight: 600; letter-spacing: .3px; border-bottom: 1px solid var(--md-outline-variant) !important; padding: 12px 12px; white-space: nowrap; vertical-align: middle; } .table > tbody > tr > td { padding: 12px; border-top: none; border-bottom: 1px solid var(--md-outline-variant); color: var(--md-on-surface); vertical-align: middle; } .table > tbody > tr:last-child > td { border-bottom: none; } .table-striped > tbody > tr:nth-of-type(odd) { background-color: transparent; } .table-hover > tbody > tr:hover { background-color: var(--md-state-hover); } .table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td { border: none; border-bottom: 1px solid var(--md-outline-variant); } .table > thead > tr > th.bs-checkbox { text-align: center; } /* 选中行 */ .table > tbody > tr.selected > td { background-color: var(--md-primary-container); } /* ========================================================================== 9. 面板（panel → MD3 卡片） ========================================================================== */ .panel { background-color: var(--md-surface); border: none; border-radius: var(--md-r-l); box-shadow: var(--md-elev-1); margin-bottom: 20px; } .panel-default > .panel-heading { background-color: transparent; border-bottom: 1px solid var(--md-outline-variant); border-radius: var(--md-r-l) var(--md-r-l) 0 0; color: var(--md-on-surface); padding: 14px 20px; } .panel-title { font-size: 16px; font-weight: 600; color: var(--md-on-surface); } .panel-body { padding: 20px; } .panel-footer { background-color: var(--md-surface-container); border-top: 1px solid var(--md-outline-variant); border-radius: 0 0 var(--md-r-l) var(--md-r-l); } /* 页面引导说明（build_heading 输出） */ .panel-lead { font-size: 13px; color: var(--md-on-surface-variant); padding: 14px 0 12px; } .panel-lead em { font-style: normal; font-weight: 600; font-size: 14px; color: var(--md-on-surface); margin-right: 10px; } /* 列表页：面板体去掉内边距，由工具栏/表格自带；标题保留水平内边距 */ .panel-intro > .panel-heading { padding: 0 20px; } .panel-intro > .panel-body { padding: 0; } .panel-intro .panel-heading .nav-tabs { padding: 0; margin-top: 10px; } .widget-body.no-padding { padding: 0; } /* well / list-group */ .well { background-color: var(--md-surface-container); border: none; border-radius: var(--md-r-m); box-shadow: none; color: var(--md-on-surface); } .list-group-item { border-color: var(--md-outline-variant); background: transparent; color: var(--md-on-surface); } a.list-group-item:hover { background-color: var(--md-state-hover); } /* 模态框 */ .modal-content { border: none; border-radius: var(--md-r-xl); background: var(--md-surface); box-shadow: var(--md-elev-3); } .modal-header { border-bottom: 1px solid var(--md-outline-variant); } .modal-footer { border-top: 1px solid var(--md-outline-variant); } .modal-backdrop.in { opacity: .32; } /* ========================================================================== 10. bootstrap-table 皮肤 ========================================================================== */ .bootstrap-table { color: var(--md-on-surface); } .fixed-table-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 16px 16px 10px; } .fixed-table-toolbar:after { content: none; } .fixed-table-toolbar .columns, .fixed-table-toolbar .search, .fixed-table-toolbar .export { display: flex; margin: 0; } /* float 布局：toolbar 左，search 居中右，columns 最右 */ .fixed-table-toolbar .search { order: 2; margin-left: auto; } .fixed-table-toolbar .columns { order: 3; } .fixed-table-toolbar .export { order: 1; } .fixed-table-toolbar .search .form-control { height: 32px; width: 200px; border-radius: var(--md-r-full); padding: 0 16px; font-size: 13px; } .fixed-table-toolbar .columns .btn, .fixed-table-toolbar .export .btn, .fixed-table-toolbar .search .btn, /* common-search 按钮被包在 .columns-{align} 内，统一高度 */ .fixed-table-toolbar [class*="columns-"] .btn { height: 32px; padding: 0 12px; font-size: 13px; /* tonal 容器背景 + 清晰图标色，与主题协调 */ background: var(--md-surface-container); border: 1px solid transparent; color: var(--md-on-surface-variant); border-radius: var(--md-r-full); transition: background .15s, color .15s; } .fixed-table-toolbar .columns .btn:hover, .fixed-table-toolbar .export .btn:hover, .fixed-table-toolbar [class*="columns-"] .btn:hover { background: var(--md-state-hover); color: var(--md-on-surface); } /* 工具栏按钮图标用主色 */ .fixed-table-toolbar .columns .btn .fa, .fixed-table-toolbar .columns .btn .bi, .fixed-table-toolbar .export .btn .fa, .fixed-table-toolbar .export .btn .bi, .fixed-table-toolbar [class*="columns-"] .btn .fa, .fixed-table-toolbar [class*="columns-"] .btn .bi { color: var(--md-primary); font-size: 14px; } .fixed-table-toolbar .btn-commonsearch > span { margin: 0; } .fixed-table-toolbar [class*="columns-"] { display: flex; margin: 0; } .fixed-table-toolbar .toolbar { display: flex; flex-wrap: wrap; gap: 8px; } .fixed-table-toolbar .toolbar .btn { height: 32px; padding: 0 14px; font-size: 13px; } /* 工具栏（模板 #toolbar，含刷新/新增/删除等） */ #toolbar.toolbar { padding: 0; } .fixed-table-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px 16px 14px; } .fixed-table-pagination:after { content: none; } .fixed-table-pagination .pagination-detail { color: var(--md-on-surface-variant); font-size: 13px; display: flex; align-items: center; gap: 6px; } .fixed-table-pagination .page-list .btn-group .btn { height: 32px; font-size: 13px; border-radius: var(--md-r-full); } .fixed-table-pagination .pagination-info { color: var(--md-on-surface-variant); } .fixed-table-pagination .page-list .btn-group .dropdown-menu { min-width: 80px; } .fixed-table-pagination .pagination > li > a, .fixed-table-pagination .pagination > li > span { min-width: 32px; height: 32px; font-size: 13px; } /* 分页跳转扩展 */ .pagination-jumpto input { height: 32px; width: 56px; border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-full); padding: 0 12px; font-size: 13px; text-align: center; background: transparent; color: var(--md-on-surface); } .fixed-table-body { overflow: auto; } .fixed-table-loading { background: var(--md-surface) !important; color: var(--md-on-surface-variant); } .fixed-table-loading.table-dark, th, td { border-color: var(--md-outline-variant); } /* 表格加载遮罩内容（require-table.js 自定义 loadingTemplate）： 去掉文字提示，改为表格区域正中间的旋转 spinner（Material 3 主色） */ .fixed-table-loading .md3-table-loading { display: flex; align-items: center; justify-content: center; } .fixed-table-loading .md3-table-loading .spinner-border { width: 2rem; height: 2rem; color: var(--md-primary); } /* 列宽控制：table-nowrap 单元格内容不换行（迁移自旧 backend.css，FastAdmin 原版行为）。 bootstrap-table 为 table-layout:auto，不换行时列宽按内容自动分配， 缺失该规则会导致窄内容列（ID/状态/开关/时间等）被长内容列挤压换行、列宽过小 */ table.table-nowrap tbody > tr > td, table.table-nowrap thead > tr > th { white-space: nowrap; } /* 排序图标 */ .bootstrap-table .table > thead > th.sortable, .fixed-table-container thead th.sortable { padding-right: 26px; cursor: pointer; } .fixed-table-container thead th.both:after, .fixed-table-container thead th.asc:after, .fixed-table-container thead th.desc:after { font-family: FontAwesome; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--md-outline); } .fixed-table-container { position: relative; } .fixed-table-container thead th { position: relative; } .fixed-table-container thead th.both:after { content: "\f0dc"; } .fixed-table-container thead th.asc:after { content: "\f0de"; color: var(--md-primary); } .fixed-table-container thead th.desc:after { content: "\f0dd"; color: var(--md-primary); } /* 固定列扩展 */ .fixed-table-container .fixed-table-body .fixed-columns, .fixed-table-container .fixed-table-body .fixed-columns-right { border-color: var(--md-outline-variant); } /* 通用搜索面板 */ .bootstrap-table .form-commonsearch { padding: 16px; } .bootstrap-table .form-commonsearch .row > .form-group { margin: 0 0 12px; } .bootstrap-table .form-commonsearch .row > .form-group > .control-label { text-align: right; padding-top: 8px; font-size: 13px; color: var(--md-on-surface-variant); } .commonsearch-table .form-control { height: 32px; font-size: 13px; } /* 表格内图片：单图/多图组件尺寸控制（对齐 FastAdmin fastadmin.css 的 img-sm/md/lg 规格） formatter 默认 classname 为 img-sm img-center，列配置可通过 classname:'img-md'/'img-lg' 调整 */ img.img-sm { width: 30px; height: 30px; object-fit: cover; } img.img-md { width: 60px; height: 60px; object-fit: cover; } img.img-lg { width: 100px; height: 100px; object-fit: cover; } .table img.img-sm { border-radius: var(--md-r-s); } .table img.img-md, .table img.img-lg { border-radius: var(--md-r-s); } /* ========================================================================== 11. 后台外壳（index 主框架，替代 AdminLTE） ========================================================================== */ body#tabs, body.hold-transition { background: var(--md-canvas); } body#tabs.fixed .wrapper { padding-top: 0; } .wrapper { background: var(--md-canvas); min-height: 100vh; } /* ---- 顶栏 ---- */ .main-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--md-header-h); background: var(--md-surface); border-bottom: 1px solid var(--md-outline-variant); box-shadow: none; display: flex; align-items: stretch; } body.fixed .main-header { position: fixed; } /* Logo */ .main-header .logo { display: flex; align-items: center; justify-content: center; width: var(--md-sidebar-w); height: var(--md-header-h); background: transparent; color: var(--md-primary); font-size: 19px; font-weight: 700; letter-spacing: .5px; padding: 0 16px; overflow: hidden; white-space: nowrap; transition: width .2s ease; flex-shrink: 0; } .main-header .logo:hover { background: var(--md-state-hover); color: var(--md-primary); } .logo-mini { display: none; font-size: 16px; } .main-header > .navbar { flex: 1; min-width: 0; margin: 0; border: none; background: transparent; display: flex; flex-direction: column; align-items: stretch; } body.multiplenav .main-header { height: auto; } #firstnav { flex: 1; min-width: 0; display: flex; align-items: stretch; height: var(--md-header-h); } /* 侧栏开合按钮（icon button） */ .sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: auto 4px; border-radius: var(--md-r-full); color: var(--md-on-surface-variant); font-size: 16px; background: transparent; flex-shrink: 0; } .sidebar-toggle:hover, .sidebar-toggle:focus { background: var(--md-state-hover); color: var(--md-on-surface); text-decoration: none; } /* ---- 多标签栏（MD3 primary tabs） ---- */ ul.nav-addtabs { display: flex; align-items: stretch; flex: 1; min-width: 0; margin: 0 8px; padding: 0 4px; border: none; overflow: visible; list-style: none; } ul.nav-addtabs > li[role="presentation"] { position: relative; display: inline-flex; align-items: stretch; max-width: 220px; flex-shrink: 0; } ul.nav-addtabs > li[role="presentation"] > a { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: none; border-radius: 0; background: transparent; color: var(--md-on-surface-variant); font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: var(--md-header-h); text-decoration: none; } ul.nav-addtabs > li[role="presentation"] > a:hover { color: var(--md-on-surface); background: var(--md-state-hover); text-decoration: none; border-color: transparent; } ul.nav-addtabs > li[role="presentation"] > a > i.fa { font-size: 14px; } ul.nav-addtabs > li[role="presentation"].active > a { color: var(--md-primary); } ul.nav-addtabs > li[role="presentation"].active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--md-primary); } /* 关闭按钮 */ ul.nav-addtabs .close-tab { align-self: center; margin-left: 2px; margin-right: 6px; font-size: 12px; color: var(--md-outline); cursor: pointer; font-style: normal; } ul.nav-addtabs .close-tab:hover { color: var(--md-error); } /* 溢出下拉 */ ul.nav-addtabs .tabdrop { flex-shrink: 0; display: inline-flex; align-items: center; } ul.nav-addtabs .tabdrop > a { color: var(--md-on-surface-variant); padding: 0 12px; line-height: var(--md-header-h); } ul.nav-addtabs .tabdrop .dropdown-menu li > a { max-width: 260px; overflow: hidden; text-overflow: ellipsis; } ul.nav-addtabs .pull-right-container { display: inline-flex; } /* multipletab 关闭时不显示标签栏（multiplenav 模式下 firstnav 承载一级菜单，不隐藏） */ body#tabs:not(.multipletab):not(.multiplenav) #firstnav .nav-addtabs { display: none; } /* ---- 顶栏右侧动作区 ---- */ .navbar-custom-menu { display: flex; align-items: stretch; flex-shrink: 0; margin-left: auto; } .navbar-custom-menu > .nav { display: flex; align-items: center; margin: 0; padding: 0 8px; list-style: none; } .navbar-custom-menu > .nav > li { height: var(--md-header-h); display: inline-flex; align-items: center; } .navbar-custom-menu > .nav > li > a { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border-radius: var(--md-r-full); color: var(--md-on-surface-variant); font-size: 13px; background: transparent; } .navbar-custom-menu > .nav > li > a:hover, .navbar-custom-menu > .nav > li > a:focus, .navbar-custom-menu > .nav > li.open > a { background: var(--md-state-hover); color: var(--md-on-surface); } .navbar-custom-menu .user-image { width: 28px; height: 28px; border-radius: var(--md-r-full); } /* 用户下拉 */ .dropdown-menu > li.user-header { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 20px 14px; } .dropdown-menu > li.user-header > .img-circle { width: 64px; height: 64px; border-radius: var(--md-r-full); border: 2px solid var(--md-primary-container); } .dropdown-menu > li.user-header p { font-size: 15px; font-weight: 600; color: var(--md-on-surface); margin: 0; } .dropdown-menu > li.user-header small { color: var(--md-on-surface-variant); font-size: 12px; } .dropdown-menu > li.user-body { padding: 0; } .dropdown-menu > li.user-footer { display: flex; justify-content: space-between; gap: 8px; padding: 10px 8px 8px; } .dropdown-menu > li.user-footer .btn { height: 32px; padding: 0 14px; font-size: 13px; } /* 第二级导航（multiplenav） */ #secondnav { display: none; height: 48px; background: var(--md-surface); border-bottom: 1px solid var(--md-outline-variant); padding: 0 12px; } body.multiplenav #secondnav { display: block; } #secondnav .nav-addtabs > li[role="presentation"] > a { line-height: 48px; } #secondnav .nav-addtabs > li[role="presentation"].active::after { bottom: 0; } /* ---- 侧边导航 ---- */ .main-sidebar { position: fixed; top: var(--md-header-h); bottom: 0; left: 0; z-index: 900; width: var(--md-sidebar-w); background: var(--md-surface); border-right: 1px solid var(--md-outline-variant); transition: width .2s ease, transform .2s ease; overflow: visible; } body.multiplenav .main-sidebar { top: calc(var(--md-header-h) + 48px); } .sidebar { height: 100%; padding: 12px; overflow-y: auto; overflow-x: hidden; } /* 管理员信息 */ .sidebar .user-panel { display: flex; align-items: center; gap: 12px; padding: 12px 8px 16px; white-space: nowrap; } .sidebar .user-panel .image img { width: 40px; height: 40px; border-radius: var(--md-r-full); } .sidebar .user-panel .info p { margin: 0 0 2px; font-size: 14px; font-weight: 600; color: var(--md-on-surface); } .sidebar .user-panel .info { overflow: hidden; } .sidebar .user-panel .info .fa-circle { font-size: 8px; color: var(--md-success); margin-right: 4px; } .sidebar .user-panel .info, .sidebar .user-panel .info * { color: var(--md-on-surface-variant); font-size: 12px; } /* 菜单搜索 */ .sidebar-form { margin: 0 4px 12px; position: relative; } .sidebar-form .input-group { display: flex; width: 100%; position: relative; } .sidebar-form .form-control { height: 40px; border-radius: var(--md-r-full); border: none; background: var(--md-surface-container); padding-left: 18px; padding-right: 40px; box-shadow: none; font-size: 13px; } .sidebar-form .sidebar-search-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--md-on-surface-variant); pointer-events: none; font-size: 14px; z-index: 2; } .sidebar-form .menuresult { position: absolute; top: 46px; left: 0; right: 0; z-index: 100; background: var(--md-surface); border-radius: var(--md-r-m); box-shadow: var(--md-elev-2); padding: 8px; max-height: 320px; overflow-y: auto; } .sidebar-form .menuresult a { display: block; padding: 10px 12px; border-radius: var(--md-r-s); color: var(--md-on-surface); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-form .menuresult a:hover { background: var(--md-state-hover); } /* 菜单列表 */ ul.sidebar-menu { list-style: none; margin: 0; padding: 0; } ul.sidebar-menu li { position: relative; margin: 2px 0; } ul.sidebar-menu li a { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px; border-radius: var(--md-r-full); color: var(--md-on-surface-variant); font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; } ul.sidebar-menu li a > i.fa:first-child { width: 22px; text-align: center; font-size: 16px; flex-shrink: 0; } ul.sidebar-menu li a > span:first-of-type { overflow: hidden; text-overflow: ellipsis; } ul.sidebar-menu li a:hover { background: var(--md-state-hover); color: var(--md-on-surface); text-decoration: none; } /* 菜单项 a 为相对定位，作为左侧高亮条的定位基准 */ ul.sidebar-menu li a { position: relative; } /* active 背景色：用更高特异性确保覆盖子菜单尺寸规则 */ ul.sidebar-menu li.active > a, ul.sidebar-menu ul.treeview-menu li.active > a { background: var(--md-primary-container); color: var(--md-on-primary-container); } ul.sidebar-menu li.active > a:hover, ul.sidebar-menu ul.treeview-menu li.active > a:hover { background: var(--md-primary-container); } /* 规格：active 状态左侧 4px 高亮条，用主色提高对比度 */ /* 用更高特异性确保覆盖子菜单的 ::before content:none */ ul.sidebar-menu > li.active > a::before, ul.sidebar-menu ul.treeview-menu > li.active > a::before { content: "" !important; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 70%; border-radius: var(--md-r-full); background: var(--md-primary); } /* 右侧容器（箭头/角标） */ ul.sidebar-menu li a .pull-right-container { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; } ul.sidebar-menu li a .pull-right-container .fa { color: var(--md-on-surface-variant); font-size: 13px; } ul.sidebar-menu li a .pull-right-container .label, ul.sidebar-menu li a .pull-right-container .badge { height: 18px; padding: 0 7px; font-size: 11px; } /* 展开箭头旋转 */ ul.sidebar-menu li a .pull-right-container .fa-angle-left { transition: transform .15s ease; } ul.sidebar-menu li.treeview-open > a .pull-right-container .fa-angle-left { transform: rotate(-90deg); } /* 子菜单 */ ul.sidebar-menu ul.treeview-menu { list-style: none; margin: 2px 0 6px; padding: 0 0 0 26px; display: none; } ul.sidebar-menu ul.treeview-menu.menu-open { display: block; } ul.sidebar-menu ul.treeview-menu li a { height: 38px; font-size: 13px; font-weight: 400; padding: 0 14px; } ul.sidebar-menu ul.treeview-menu li a > i.fa:first-child { font-size: 13px; width: 18px; } ul.sidebar-menu ul.treeview-menu li a::before { content: none; } /* show-submenu 模式下子菜单常驻 */ ul.sidebar-menu.show-submenu ul.treeview-menu { display: block; } /* ---- 折叠态（sidebar-collapse）：完全收起 aside（覆盖 AdminLTE 4 默认 4.6rem） ---- */ /* HTML 中 aside 使用 AdminLTE 4 的 .app-sidebar 类（非旧 .main-sidebar），需正确指向 */ body.sidebar-collapse .app-sidebar { width: 0 !important; min-width: 0 !important; /* 覆盖 AdminLTE 4 的 min-width: 4.6rem */ max-width: 0 !important; /* 覆盖 AdminLTE 4 的 max-width: 4.6rem */ border-right: 0 !important; /* 折叠后移除右侧分隔线，避免出现空白边 */ overflow: hidden !important; /* 防止内部残留内容溢出占据空间 */ } /* 兼容旧 .main-sidebar 选择器（如有页面仍使用 AdminLTE 3 结构） */ body.sidebar-collapse .main-sidebar { width: 0 !important; min-width: 0 !important; } body.sidebar-collapse .main-header .logo { width: 0 !important; } body.sidebar-collapse .content-wrapper { margin-left: 0 !important; } /* 折叠态隐藏整个 sidebar-wrapper 内容（logo、管理员信息、搜索、菜单） */ body.sidebar-collapse .sidebar-wrapper { display: none !important; } /* ---- 内容区 ---- */ .content-wrapper { margin-left: var(--md-sidebar-w); margin-top: var(--md-header-h); min-height: calc(100vh - var(--md-header-h)); background: var(--md-canvas); transition: margin-left .2s ease; } body.multiplenav .content-wrapper { margin-top: calc(var(--md-header-h) + 48px); } .content-wrapper.tab-addtabs { position: relative; } .content-wrapper.tab-addtabs > .tab-pane { display: none; height: calc(100vh - var(--md-header-h)); } body.multiplenav .content-wrapper.tab-addtabs > .tab-pane { height: calc(100vh - var(--md-header-h) - 48px); } .content-wrapper.tab-addtabs > .tab-pane.active { display: block; } .content-wrapper.tab-addtabs > .tab-pane > iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--md-canvas); } /* 移动端一级菜单 */ .sidebar .mobilenav { display: none; } body.multiplenav .sidebar .mobilenav { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 4px; } .sidebar .mobilenav a.btn-app { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--md-r-full); background: var(--md-surface-container); color: var(--md-on-surface); font-size: 13px; text-align: center; } .sidebar .mobilenav a.btn-app.active { background: var(--md-secondary-container); color: var(--md-on-secondary-container); } /* ---- 右侧控制栏 ---- */ .control-sidebar { position: fixed; top: var(--md-header-h); bottom: 0; right: 0; z-index: 1001; width: 320px; background: var(--md-surface-container-low, var(--md-surface-container)); background: var(--md-surface); border-left: 1px solid var(--md-outline-variant); padding: 20px; transform: translateX(100%); transition: transform .2s ease; overflow-y: auto; } .control-sidebar.control-sidebar-open { transform: translateX(0); box-shadow: var(--md-elev-3); } .control-sidebar-bg { display: none; } .control-sidebar-dark, .control-sidebar-light { color: var(--md-on-surface); } .control-sidebar .nav-tabs { margin-bottom: 16px; } .control-sidebar-heading { font-size: 13px; font-weight: 700; color: var(--md-on-surface); letter-spacing: .5px; margin: 20px 0 10px; } .control-sidebar-subheading { font-size: 14px; font-weight: 500; color: var(--md-on-surface); } .control-sidebar .form-group p { font-size: 12px; color: var(--md-on-surface-variant); margin: 4px 0 0; } .control-sidebar .control-sidebar-tabs li a { height: 40px; } /* ---- 响应式 ---- */ @media (max-width: 991px) { .main-sidebar { transform: translateX(-100%); box-shadow: none; } body.sidebar-open .main-sidebar { transform: translateX(0); box-shadow: var(--md-elev-3); z-index: 1002; } .content-wrapper { margin-left: 0; } body.sidebar-collapse .main-sidebar { width: var(--md-sidebar-w); } body.sidebar-collapse .content-wrapper { margin-left: 0; } /* 移动端折叠态显示完整内容（sidebar-open 时） */ body.sidebar-collapse .sidebar-wrapper { display: block !important; } body.sidebar-collapse ul.sidebar-menu > li:hover > ul.treeview-menu { display: none !important; } body.sidebar-collapse ul.sidebar-menu.show-submenu ul.treeview-menu { display: block; } .main-header .logo { width: 72px; } .logo-lg { display: none; } .logo-mini { display: inline; } ul.nav-addtabs { overflow-x: auto; overflow-y: hidden; } .navbar-custom-menu > .nav > li > a span.hidden-xs { display: none; } } /* ========================================================================== 12. 内容页（iframe 内页面） ========================================================================== */ body.inside-header, body.inside-aside { background: var(--md-canvas); } #main .content { padding: 20px; } /* ---- BS3/4 遗留类兼容（FastAdmin 大量使用，BS5 已移除，此处补齐避免功能/样式失效） ---- */ /* .hide / .hidden：FastAdmin 大量用于权限隐藏（如 {:$auth->check()?'':'hide'}）、fieldlist textarea 隐藏、 字段类型切换显隐（如 backend/general/config.js 的 addClass("hidden")）、layer-footer 初始隐藏、 dropzone 触发按钮隐藏等。BS5 已移除这两个类，必须补齐，否则上述功能全部失效 */ .hide, .hidden { display: none !important; } /* .btn-xs：BS5 移除的按钮尺寸类，表格操作栏大量使用，此处恢复小尺寸样式 */ .btn-xs { padding: 0.125rem 0.3125rem; font-size: 0.75rem; line-height: 1.4; border-radius: var(--md-r-xs); } /* .caret：BS3 下拉箭头类，BS5 由 dropdown-toggle::after 自带，此处恢复空箭头避免残留 span 占位 */ .caret { display: none; } /* 面包屑（ribbon） */ #ribbon { display: flex; justify-content: space-between; align-items: center; padding: 0 0 14px; font-size: 13px; } #ribbon .breadcrumb { background: transparent; } /* 弹窗页（is-dialog） */ body.is-dialog .content { padding: 20px; } /* 弹窗页底部按钮：弹窗内由 fast.js 抽取到 .layui-layer-footer，仅弹窗上下文隐藏 */ body.is-dialog .layer-footer { display: none; } /* 表单页（add/edit）布局微调 */ .form-horizontal .control-label { padding-top: 8px; } .form-horizontal .form-control-static { padding-top: 8px; } /* city-picker 城市选择器的定位容器：下拉面板为 absolute top:100%， 依赖此容器作为定位参照（FastAdmin 原版样式，移植时遗漏导致面板弹出位置错乱） */ .control-relative { position: relative; } /* city-picker 占位符与 BS5 的 .placeholder 工具类（骨架屏）类名冲突： BS5 会给该类加 background-color: currentcolor / min-height / opacity 等， 导致"请选择省/市/区"提示文字被灰色色块盖住。限定范围还原为纯文字提示 */ .city-picker-span > .placeholder { background: none; opacity: 1; min-height: 0; vertical-align: baseline; cursor: pointer; color: #9aa0a6; } /* city-picker 清空按钮：由 require-form.js 在 .city-picker-span 内动态注入， 有选中值时显示，点击调用插件 reset() 清空选择 */ .city-picker-span .city-picker-clear { display: none; position: absolute; top: 50%; right: 24px; width: 18px; height: 18px; line-height: 16px; margin-top: -9px; text-align: center; font-size: 15px; color: var(--md-on-surface-variant); background: var(--md-surface-variant); border-radius: 50%; z-index: 2; } .city-picker-span .city-picker-clear:hover { color: var(--md-on-surface); } /* eonasdan bootstrap-datetimepicker 4.x（BS3 组件）BS5 兼容： 初始模板用 BS3 的 .in 标记展开面板，BS5 已将 .in 改名为 .show， 导致面板初始 display:none 高度塌陷为 0，点击后看不到日期时间选择界面。 注意：本环境存在 BS5 collapse 插件，库的日期/时间模式切换会走 collapse('show'/'hide') （用 .show 类标记展开态）。因此 .in 兜底仅在 BS5 尚未接管（widget 内无任何 .show）时生效， 否则 .in 残留会使日期面板在切换到时间模式后无法收起 */ .bootstrap-datetimepicker-widget:not(:has(.collapse.show)) .collapse.in { display: block; } /* eonasdan bootstrap-datetimepicker 4.x（BS3 组件）BS5 兼容： 组件 JS 渲染的图标使用 BS3 的 .glyphicon 图标类（时钟/日历/上下左右箭头等）， BS5 已彻底移除 glyphicon 字体，页面实际加载的是 FontAwesome 4， 不做映射则月份切换箭头、日历/时钟切换图标全部空白 */ .bootstrap-datetimepicker-widget .glyphicon { font-family: 'FontAwesome'; /* 复用已加载的 FontAwesome 字体渲染图标 */ font-style: normal; font-weight: 400; line-height: 1; display: inline-block; -webkit-font-smoothing: antialiased; } .bootstrap-datetimepicker-widget .glyphicon-time:before { content: "\f017"; } /* fa-clock-o 时钟（时间模式切换） */ .bootstrap-datetimepicker-widget .glyphicon-calendar:before { content: "\f073"; } /* fa-calendar 日历（日期模式切换） */ .bootstrap-datetimepicker-widget .glyphicon-chevron-up:before { content: "\f077"; } /* fa-chevron-up 增加数值 */ .bootstrap-datetimepicker-widget .glyphicon-chevron-down:before { content: "\f078"; } /* fa-chevron-down 减少数值 */ .bootstrap-datetimepicker-widget .glyphicon-chevron-left:before { content: "\f053"; } /* fa-chevron-left 上一月/上一小时 */ .bootstrap-datetimepicker-widget .glyphicon-chevron-right:before { content: "\f054"; } /* fa-chevron-right 下一月/下一小时 */ .bootstrap-datetimepicker-widget .glyphicon-screenshot:before { content: "\f05b"; } /* fa-crosshairs 「今日」按钮 */ .bootstrap-datetimepicker-widget .glyphicon-trash:before { content: "\f1f8"; } /* fa-trash 「清空」按钮 */ .bootstrap-datetimepicker-widget .glyphicon-remove:before { content: "\f00d"; } /* fa-times 「关闭」按钮 */ /* addtabs 标签溢出下拉按钮（.tabdrop，标签过多时出现在 nav-addtabs 中） 同样使用 BS3 的 glyphicon 图标类，BS5 无 glyphicon 字体，映射到 FontAwesome */ ul.nav-addtabs .tabdrop .glyphicon { font-family: 'FontAwesome'; /* 复用已加载的 FontAwesome 字体渲染图标 */ font-style: normal; font-weight: 400; line-height: 1; display: inline-block; } ul.nav-addtabs .tabdrop .glyphicon-align-justify:before { content: "\f039"; } /* fa-align-justify 溢出标签列表按钮 */ /* 键值对组件（fieldlist）：用 flex 布局替代 BS3 已废弃的 form-inline，使 dd 内元素水平排列 */ .fieldlist dd { display: flex; /* dd 内所有子元素水平排列 */ align-items: center; /* 垂直居中对齐 */ gap: 8px; /* 元素间距 */ margin: 8px 0; position: relative; /* 作为操作按钮列绝对定位的参照 */ padding-right: 96px; /* 行尾为操作按钮列（删除+拖拽）预留空间，使输入列均分剩余宽度 */ } .fieldlist dd:has(> .btn-append) { /* 「追加」按钮所在行没有输入列，无需预留按钮空间 */ padding-right: 0; } .fieldlist dd input.form-control { width: 100%; /* 输入框填满所属 ins 列（flex 已控制列宽） */ min-width: 0; /* 允许在 flex 中收缩，防止溢出 */ } .fieldlist dd ins { display: inline-flex; /* ins 内部（输入框/文字标签）水平排列 */ align-items: center; gap: 4px; text-decoration: none; flex: 1 1 0; /* 各输入列/表头列均分宽度，保证表头与数据列对齐 */ min-width: 0; } .fieldlist dd ins:last-child:has(> .btn-remove) { /* 操作按钮列（删除/拖拽）：绝对定位到行尾，不参与输入列均分 */ position: absolute; right: 0; top: 50%; transform: translateY(-50%); flex: 0 0 auto; width: auto; } .fieldlist dd .btn { flex-shrink: 0; /* 按钮不被压缩，保持固定尺寸 */ } /* 上传组件 */ .dropzone { border: 2px dashed var(--md-outline-variant) !important; border-radius: var(--md-r-l) !important; background: var(--md-surface-container) !important; color: var(--md-on-surface-variant); } .dropzone .dz-message { color: var(--md-on-surface-variant); } /* tagsinput */ .bootstrap-tagsinput { background: transparent; border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-s); box-shadow: none; color: var(--md-on-surface); padding: 6px 10px; width: 100%; } .bootstrap-tagsinput .tag { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-radius: var(--md-r-s); padding: 2px 8px; font-size: 12px; } .bootstrap-tagsinput input { border: none; box-shadow: none; background: transparent; color: var(--md-on-surface); } /* tagsinput 测量文本宽度的辅助 span（tagsinput.js getInputTextWidth 写入当前输入值测宽），必须隐藏否则输入内容重复显示 */ .bootstrap-tagsinput .tagsinput-text { display: inline-block; overflow: auto; visibility: hidden; height: 1px; position: absolute; bottom: -1px; left: 0; } /* selectpage 下拉 */ .sp_container .sp_element_box { border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-s); background: transparent; } .sp_container .sp_element_box input { border: none; box-shadow: none; background: transparent; color: var(--md-on-surface); } .sp_result_area { background: var(--md-surface); border-radius: var(--md-r-m); border: none; box-shadow: var(--md-elev-2); overflow: hidden; } .sp_result_area .sp_result_list li { padding: 10px 14px; color: var(--md-on-surface); font-size: 13px; border-bottom: 1px solid var(--md-outline-variant); } .sp_result_area .sp_result_list li:hover, .sp_result_area .sp_result_list li.sp_over { background: var(--md-state-hover); } .sp_result_area .sp_result_list li.sp_active { color: var(--md-primary); } /* ========================================================================== 日期时间选择器（eonasdan bootstrap-datetimepicker 4.x）— MD3 皮肤 组件原版 CSS 未随 JS 加载（结构样式由下方规则提供），视觉遵循 MD3 规范： 日格为正圆、年份/月份视图为胶囊形、选中态使用主色填充、翻页与工具按钮 均为圆形幽灵图标按钮（MD3 icon button），悬停统一使用 state layer ========================================================================== */ /* 弹出容器：surface 底 + 大圆角 + 二级阴影； min-width 与日历视图宽度（7 列日格 252px + 容器内边距）一致， 保证时间视图单独显示时不收缩、视图切换时面板宽度不跳动 */ .bootstrap-datetimepicker-widget.dropdown-menu { min-width: 276px; background: var(--md-surface); border: none; border-radius: var(--md-r-l); box-shadow: var(--md-elev-2); padding: 12px; color: var(--md-on-surface); font-family: var(--md-font); } /* BS5 reboot 给 ul 保留了 margin-bottom，导致容器底部留白偏大，归零 */ .bootstrap-datetimepicker-widget ul { margin-bottom: 0; } /* 单元格基础：清除边框与内边距，居中对齐（尺寸由各行具体规则提供） */ .bootstrap-datetimepicker-widget table { width: 100%; } .bootstrap-datetimepicker-widget table td, .bootstrap-datetimepicker-widget table th { border: none; padding: 0; text-align: center; color: var(--md-on-surface); border-radius: var(--md-r-full); } /* 头部年月标题（可点击展开月份/年份/年代视图）：MD3 标题行用主色 + 中等字重 */ .bootstrap-datetimepicker-widget thead th.picker-switch { color: var(--md-primary); font-size: 14px; font-weight: 600; height: 36px; line-height: 36px; cursor: pointer; transition: background .15s; } .bootstrap-datetimepicker-widget thead th.picker-switch:hover { background: var(--md-state-hover); } /* 前后翻页箭头：36px 圆形幽灵图标按钮（MD3 icon button 规格） */ .bootstrap-datetimepicker-widget thead th.prev, .bootstrap-datetimepicker-widget thead th.next { width: 36px; height: 36px; line-height: 36px; cursor: pointer; transition: background .15s; } .bootstrap-datetimepicker-widget thead th.prev:hover, .bootstrap-datetimepicker-widget thead th.next:hover { background: var(--md-state-hover); } .bootstrap-datetimepicker-widget thead th.prev .glyphicon, .bootstrap-datetimepicker-widget thead th.next .glyphicon, .bootstrap-datetimepicker-widget thead th.prev .fa, .bootstrap-datetimepicker-widget thead th.next .fa { font-size: 14px; color: var(--md-on-surface-variant); } /* 星期表头（日/一/二…）：辅助文字色 + 小号字 */ .bootstrap-datetimepicker-widget thead th.dow { color: var(--md-on-surface-variant); font-size: 11px; font-weight: 500; height: 28px; line-height: 28px; } /* 日期格子：36px 正圆（MD3 日期选择器日格为正圆），悬停 state layer */ .bootstrap-datetimepicker-widget table td.day { width: 36px; height: 36px; line-height: 36px; font-size: 13px; cursor: pointer; transition: background .15s; } .bootstrap-datetimepicker-widget table td.day:hover, .bootstrap-datetimepicker-widget table td.hour:hover, .bootstrap-datetimepicker-widget table td.minute:hover, .bootstrap-datetimepicker-widget table td span:hover { background: var(--md-state-hover); } /* 选中日期：主色填充圆形（覆盖 text-shadow 避免 BS3 时代阴影残留） */ .bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td span.active { background: var(--md-primary); color: var(--md-on-primary); text-shadow: none; } /* 今日：未选中时用主色描边圆环标记（MD3 「今天」规范），选中时以填充态为准 */ .bootstrap-datetimepicker-widget table td.today:not(.active) { box-shadow: inset 0 0 0 1px var(--md-primary); } /* 非当前月日期：弱化为轮廓色 */ .bootstrap-datetimepicker-widget table td.new, .bootstrap-datetimepicker-widget table td.old { color: var(--md-outline); } /* 月份/年份/年代视图格子（eonasdan 4.x 用 table td span 渲染，class 分别为 month/year/decade）： 原版 CSS 未随 JS 加载，缺失时年份全部挤成一行（display:inline 无格子），此处补齐并按 MD3 年份选择器规范做胶囊形 */ .bootstrap-datetimepicker-widget table td span.month, .bootstrap-datetimepicker-widget table td span.year, .bootstrap-datetimepicker-widget table td span.decade { display: inline-block; width: 56px; height: 36px; line-height: 36px; margin: 2px; cursor: pointer; border-radius: var(--md-r-full); font-size: 13px; font-weight: 500; text-align: center; transition: background .15s; } /* 时间面板时/分选择视图格子：本构建将时/分渲染为 td.hour / td.minute（非 span）， 按 MD3 时间选择器规范做圆形数字格 */ .bootstrap-datetimepicker-widget .timepicker-hours table td.hour, .bootstrap-datetimepicker-widget .timepicker-minutes table td.minute { width: 48px; height: 48px; line-height: 48px; font-size: 14px; cursor: pointer; transition: background .15s; } /* 兼容其他以 span 渲染时/分格子的构建版本 */ .bootstrap-datetimepicker-widget .timepicker-hours table td span, .bootstrap-datetimepicker-widget .timepicker-minutes table td span { display: inline-block; width: 48px; height: 48px; line-height: 48px; margin: 2px; cursor: pointer; border-radius: var(--md-r-full); font-size: 14px; text-align: center; transition: background .15s; } /* 时间选择主面板：MD3 大字排版。 时/分/秒各列按 25% 均分面板宽度（奇数列），冒号列占 12.5%， 保证增减按钮与数字上下对齐且整体居中不偏侧 */ .bootstrap-datetimepicker-widget .timepicker-picker table td { padding: 3px 0; } .bootstrap-datetimepicker-widget .timepicker-picker table td:nth-child(odd) { width: 25%; } .bootstrap-datetimepicker-widget .timepicker-picker table td.separator { width: 12.5%; } .bootstrap-datetimepicker-widget .timepicker-hour, .bootstrap-datetimepicker-widget .timepicker-minute, .bootstrap-datetimepicker-widget .timepicker-second { display: inline-block; width: 56px; font-size: 32px; font-weight: 500; color: var(--md-on-surface); cursor: pointer; border-radius: var(--md-r-full); transition: background .15s; } .bootstrap-datetimepicker-widget .timepicker-hour:hover, .bootstrap-datetimepicker-widget .timepicker-minute:hover, .bootstrap-datetimepicker-widget .timepicker-second:hover { background: var(--md-state-hover); color: var(--md-primary); } /* 时/分/秒之间的冒号分隔符：垂直居中于数字行 */ .bootstrap-datetimepicker-widget table td.separator { color: var(--md-on-surface-variant); font-size: 24px; font-weight: 400; vertical-align: middle; } /* 时分秒增减按钮（data-action 以 increment/decrement 开头的 a.btn）：36px 圆形幽灵图标按钮， 覆盖 BS5 .btn 的默认内边距/边框 */ .bootstrap-datetimepicker-widget table td a.btn[data-action^="increment"], .bootstrap-datetimepicker-widget table td a.btn[data-action^="decrement"] { width: 36px; height: 36px; line-height: 34px; padding: 0; margin: 4px auto; display: inline-block; border-radius: var(--md-r-full); border: none; box-shadow: none; background: transparent; color: var(--md-on-surface-variant); transition: background .15s; } .bootstrap-datetimepicker-widget table td a.btn[data-action^="increment"]:hover, .bootstrap-datetimepicker-widget table td a.btn[data-action^="decrement"]:hover { background: var(--md-state-hover); color: var(--md-on-surface); } /* 底部工具栏（今日/清空/关闭）：与翻页箭头一致的圆形幽灵图标按钮。 注意本构建的工具栏链接不带 .btn 类，需按 data-action 匹配 */ .bootstrap-datetimepicker-widget li.picker-switch.accordion-toggle a[data-action] { width: 36px; height: 36px; line-height: 34px; padding: 0; display: inline-block; border-radius: var(--md-r-full); border: none; box-shadow: none; background: transparent; color: var(--md-on-surface-variant); transition: background .15s; } .bootstrap-datetimepicker-widget li.picker-switch.accordion-toggle a[data-action]:hover { background: var(--md-state-hover); color: var(--md-on-surface); } /* ========================================================================== 日期时间范围选择器（daterangepicker）— 列表搜索范围字段使用 ========================================================================== */ .daterangepicker { background: var(--md-surface); border: none; border-radius: var(--md-r-l); box-shadow: var(--md-elev-3); color: var(--md-on-surface); font-family: var(--md-font); } .daterangepicker .calendar-table { background: var(--md-surface); border-radius: var(--md-r-m); } /* 日格做圆形（MD3 日期选择器日格为正圆），悬停叠加 state layer */ .daterangepicker td.available { border-radius: 50%; } .daterangepicker td.available:hover, .daterangepicker th.available:hover { background: var(--md-state-hover); border-radius: 50%; } /* 起止之间的区间：主色容器色弱化显示 */ .daterangepicker td.in-range, .daterangepicker td.in-range:hover { background: var(--md-primary-container); color: var(--md-on-primary-container); } .daterangepicker td.active, .daterangepicker td.active:hover { background: var(--md-primary); color: var(--md-on-primary); } .daterangepicker .drp-buttons { border-top: 1px solid var(--md-outline-variant); color: var(--md-on-surface); } .daterangepicker .drp-selected { color: var(--md-primary); } .daterangepicker .applyBtn { background: var(--md-primary); color: var(--md-on-primary); border: none; border-radius: var(--md-r-full); } .daterangepicker .cancelBtn { background: transparent; color: var(--md-on-surface-variant); border: none; border-radius: var(--md-r-full); } .daterangepicker:after, .daterangepicker:before { display: none; } /* ========================================================================== 13. layer 弹窗皮肤（高优先级覆写运行时注入的 layer.css） ========================================================================== */ body .layui-layer { border-radius: var(--md-r-l) !important; background: var(--md-surface) !important; box-shadow: var(--md-elev-3) !important; overflow: hidden; } body .layui-layer-title { height: 56px !important; line-height: 56px !important; padding: 0 24px !important; border-bottom: 1px solid var(--md-outline-variant) !important; background: transparent !important; color: var(--md-on-surface) !important; font-size: 16px !important; font-weight: 600 !important; font-family: var(--md-font) !important; border-radius: var(--md-r-l) var(--md-r-l) 0 0 !important; } body .layui-layer-setwin { right: 12px !important; top: 10px !important; } body .layui-layer-setwin a { width: 36px !important; height: 36px !important; border-radius: var(--md-r-full); background: transparent !important; position: relative; } body .layui-layer-setwin .layui-layer-close::after, body .layui-layer-setwin .layui-layer-min::after, body .layui-layer-setwin .layui-layer-max::after { content: "\f00d"; font-family: FontAwesome; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--md-on-surface-variant); font-size: 14px; background: none; } body .layui-layer-setwin a:hover { background: var(--md-state-hover) !important; } body .layui-layer-setwin .layui-layer-min::after { content: "\f068"; font-size: 10px; } body .layui-layer-setwin .layui-layer-max::after { content: "\f065"; font-size: 11px; } /* 隐藏 layui 原生最小化横条（cite 元素）：MD3 用上方 ::after 的 FA 图标替代，避免双重渲染 */ body .layui-layer-setwin .layui-layer-min cite { display: none !important; } /* 弹窗按钮区（含 fast.js 注入的 layer-footer） */ body .layui-layer-btn { padding: 12px 20px 16px !important; text-align: right !important; border-top: 1px solid var(--md-outline-variant) !important; background: var(--md-surface) !important; pointer-events: auto; } body .layui-layer-btn a { display: inline-flex !important; align-items: center; justify-content: center; height: 36px !important; padding: 0 20px !important; margin: 0 0 0 8px !important; border: none !important; border-radius: var(--md-r-full) !important; font-size: 14px !important; font-weight: 500 !important; font-family: var(--md-font) !important; background: transparent !important; color: var(--md-primary) !important; } body .layui-layer-btn a:hover { background: var(--md-state-hover) !important; } body .layui-layer-btn .layui-layer-btn0 { background: var(--md-primary) !important; color: var(--md-on-primary) !important; } body .layui-layer-btn .layui-layer-btn0:hover { background: var(--md-primary) !important; } body .layui-layer-btn .layui-layer-btn1 { color: var(--md-on-surface-variant) !important; } body .layui-layer-footer { text-align: right; } body .layui-layer-footer .btn { margin-left: 8px; } body .layui-layer-footer .row { margin: 0; } body .layui-layer-content { color: var(--md-on-surface); } /* 消息提示（成功/失败/信息 toast）→ MD3 反色 Snackbar。 fast.js 执行 Layer.config({skin:'layui-layer-fast'})， msg 皮肤类实际为 layui-layer-fast-msg（非标准 layui-layer-msg），需一并命中。 */ body .layui-layer.layui-layer-msg, body .layui-layer.layui-layer-fast-msg, body .layui-layer.layui-layer-hui { border: none !important; border-radius: var(--md-r-s) !important; background: var(--md-inverse-surface) !important; color: var(--md-inverse-on-surface) !important; box-shadow: var(--md-elev-3) !important; padding: 0 20px !important; font-family: var(--md-font) !important; } body .layui-layer.layui-layer-msg .layui-layer-content, body .layui-layer.layui-layer-fast-msg .layui-layer-content, body .layui-layer.layui-layer-hui .layui-layer-content { color: var(--md-inverse-on-surface) !important; } body .layui-layer-dialog .layui-layer-content { padding: 20px 24px !important; font-size: 14px; } /* 弹窗图标（dialog 与 msg 共用 layui-layer-ico，用 FontAwesome 语义化图标） 注意：必须限定在 .layui-layer-content 内——标题栏的最大化/关闭按钮也带 layui-layer-ico class， 若用 .layui-layer 通配会导致标题栏按钮被强制 position:static/24px，图标定位错乱 */ body .layui-layer-dialog .layui-layer-ico, body .layui-layer-msg .layui-layer-ico, body .layui-layer-fast-msg .layui-layer-ico, body .layui-layer-hui .layui-layer-ico, body .layui-layer-content .layui-layer-ico { background: none !important; background-image: none !important; background-repeat: no-repeat !important; background-position: 0 0 !important; width: 24px !important; height: 24px !important; display: inline-flex !important; align-items: center; justify-content: center; vertical-align: middle; margin-right: 8px; position: static !important; } body .layui-layer-dialog .layui-layer-ico::before, body .layui-layer-msg .layui-layer-ico::before, body .layui-layer-fast-msg .layui-layer-ico::before, body .layui-layer-hui .layui-layer-ico::before, body .layui-layer-content .layui-layer-ico::before { font-family: FontAwesome; font-size: 20px; line-height: 1; } /* 约定：icon:1=成功、icon:2=失败、icon:3=信息、icon:4=警告 */ body .layui-layer-dialog .layui-layer-ico1::before, body .layui-layer-msg .layui-layer-ico1::before, body .layui-layer-fast-msg .layui-layer-ico1::before, body .layui-layer-hui .layui-layer-ico1::before, body .layui-layer .layui-layer-ico1::before { content: "\f058"; color: #4caf50; } body .layui-layer-dialog .layui-layer-ico2::before, body .layui-layer-msg .layui-layer-ico2::before, body .layui-layer-fast-msg .layui-layer-ico2::before, body .layui-layer-hui .layui-layer-ico2::before, body .layui-layer .layui-layer-ico2::before { content: "\f057"; color: #f44336; } body .layui-layer-dialog .layui-layer-ico3::before, body .layui-layer-msg .layui-layer-ico3::before, body .layui-layer-fast-msg .layui-layer-ico3::before, body .layui-layer-hui .layui-layer-ico3::before, body .layui-layer .layui-layer-ico3::before { content: "\f059"; color: var(--md-primary); } body .layui-layer-dialog .layui-layer-ico4::before, body .layui-layer-msg .layui-layer-ico4::before, body .layui-layer-fast-msg .layui-layer-ico4::before, body .layui-layer-hui .layui-layer-ico4::before, body .layui-layer .layui-layer-ico4::before { content: "\f071"; color: #ff9800; } /* msg 弹框：强制水平+垂直居中 */ body .layui-layer.layui-layer-msg, body .layui-layer.layui-layer-fast-msg, body .layui-layer.layui-layer-hui { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); } /* msg 弹框内容：居中对齐、图标与文字垂直居中 */ body .layui-layer-msg .layui-layer-content, body .layui-layer-fast-msg .layui-layer-content, body .layui-layer-hui .layui-layer-content { text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 24px !important; line-height: 1.6; } /* dialog 弹框图标：恢复绝对定位（仅 dialog 使用绝对定位） */ body .layui-layer-dialog .layui-layer-content .layui-layer-ico { position: absolute !important; top: 16px !important; left: 15px !important; } /* 遮罩 */ body .layui-layer-shade { background-color: rgba(0, 0, 0, .32) !important; } /* ========================================================================== 14. toastr → MD3 Snackbar ========================================================================== */ #toast-container { pointer-events: none; position: fixed; z-index: 999999; } /* 位置类必须在此定义（原 toastr.css/backend.css 提供，重建时遗漏会导致 fixed 容器 top/right 均为 auto，容器按文档流落到 body 末尾视口之外，提示永远不可见）。 toast-top-right-index 为主框架页（controllername=index）专用，top 需避开顶部导航栏 */ #toast-container.toast-top-center { top: 0; right: 0; width: 100%; } #toast-container.toast-top-center > .toast { margin-left: auto; margin-right: auto; } #toast-container.toast-top-right { top: 12px; right: 24px; } #toast-container.toast-top-right-index { top: 62px; right: 12px; } #toast-container.toast-bottom-right { bottom: 12px; right: 24px; } #toast-container.toast-bottom-left { bottom: 12px; left: 24px; } #toast-container > .toast { pointer-events: auto; position: relative; display: block; overflow: hidden; margin: 8px 0; padding: 14px 18px 14px 20px; width: auto; min-width: 260px; max-width: 420px; border-radius: var(--md-r-s); background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); box-shadow: var(--md-elev-3); opacity: 1; font-size: 14px; font-family: var(--md-font); } #toast-container > .toast:hover { box-shadow: var(--md-elev-3); opacity: 1; } #toast-container > .toast .toast-message { color: var(--md-inverse-on-surface); } #toast-container > .toast .toast-close-button { position: relative; right: -6px; top: -2px; color: var(--md-inverse-on-surface); opacity: .7; text-shadow: none; font-size: 18px; } #toast-container > .toast .toast-progress { background: rgba(255, 255, 255, .24); height: 3px; } #toast-container > .toast:before { font-family: FontAwesome; float: left; margin: 0 12px 0 0; font-size: 16px; line-height: 20px; } #toast-container > .toast-success:before { content: "\f058"; color: #8bd8a2; } #toast-container > .toast-error:before { content: "\f057"; color: #f2b8b5; } #toast-container > .toast-warning:before { content: "\f071"; color: #ffb868; } #toast-container > .toast-info:before { content: "\f05a"; color: #b9c2ff; } .toast-title { font-weight: 600; color: var(--md-inverse-on-surface); } .toast-top-full-width, .toast-bottom-full-width { width: auto; } #toast-container.toast-top-full-width > .toast, #toast-container.toast-bottom-full-width > .toast { width: auto; max-width: 640px; } /* ========================================================================== 15. 登录页 ========================================================================== */ body.login-page { background: radial-gradient(1200px 600px at 85% -10%, var(--md-primary-container), transparent 60%), radial-gradient(900px 500px at -10% 110%, var(--md-secondary-container), transparent 55%), var(--md-canvas); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 16px; } .login-wrapper { width: 100%; max-width: 420px; } .login-card { position: relative; background: var(--md-surface); border-radius: var(--md-r-xl); box-shadow: var(--md-elev-2); padding: 44px 40px 40px; } .login-logo { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 28px; } .login-logo .logo-mark { width: 56px; height: 56px; border-radius: 18px; background: var(--md-primary); color: var(--md-on-primary); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; letter-spacing: 1px; } .login-logo .logo-name { font-size: 20px; font-weight: 700; color: var(--md-on-surface); } .login-logo .logo-sub { font-size: 13px; color: var(--md-on-surface-variant); } .login-form .input-group { margin-bottom: 16px; } .login-form .input-group-addon { border: 1px solid var(--md-outline-variant); border-right: none; border-radius: var(--md-r-s) 0 0 var(--md-r-s); background: var(--md-surface-container); color: var(--md-on-surface-variant); min-width: 44px; } .login-form .input-group .form-control { height: 44px; border-radius: 0 var(--md-r-s) var(--md-r-s) 0; font-size: 14px; } .login-form .input-group .form-control:focus { box-shadow: inset 0 0 0 1px var(--md-primary); } .login-form #login-form .btn-lg { width: 100%; height: 46px; font-size: 15px; border-radius: var(--md-r-full); } .login-form .login-keep { display: flex; align-items: center; gap: 8px; margin: 4px 0 18px; color: var(--md-on-surface-variant); font-size: 13px; } .login-captcha-addon { padding: 3px !important; display: flex; } .login-captcha-addon img { border-radius: var(--md-r-xs); height: 36px; width: 108px; cursor: pointer; } #errtips { margin-bottom: 12px; } .login-footnote { text-align: center; margin-top: 20px; font-size: 12px; color: var(--md-outline); } /* ========================================================================== 16. 杂项 ========================================================================== */ /* 关闭按钮 */ .close { color: var(--md-on-surface-variant); text-shadow: none; opacity: .7; } .close:hover { color: var(--md-on-surface); opacity: 1; } /* 进度条 */ .progress { height: 8px; border-radius: var(--md-r-full); background: var(--md-surface-container-high); box-shadow: none; } .progress-bar { background: var(--md-primary); box-shadow: none; } /* 全屏态 */ body.full-screen { overflow: hidden; } /* iframe 里的分页小屏适配 */ @media (max-width: 768px) { .fixed-table-toolbar { padding: 12px 12px 8px; } .fixed-table-toolbar .search .form-control { width: 150px; } #main .content { padding: 12px; } .panel-body { padding: 14px; } .table > thead > tr > th, .table > tbody > tr > td { padding: 10px 8px; } } /* 打印 */ @media print { .main-sidebar, .main-header, .control-sidebar { display: none !important; } .content-wrapper { margin: 0 !important; } } /* 上传裁剪弹窗（data-width/data-height 触发的 Cropper 裁剪框）： 内容区铺满弹窗供 Cropper 作画布，图片在容器内等比缩放居中 */ .upload-crop-wrapper { width: 100%; height: 100%; overflow: hidden; } .upload-crop-wrapper img { display: block; max-width: 100%; max-height: 100%; margin: 0 auto; } /* Card labels must wrap independently from their values on narrow screens. */ .bootstrap-table .fixed-table-container table.table tbody tr .card-view { display: grid !important; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: .5rem; align-items: start; } .bootstrap-table .fixed-table-container table.table tbody tr .card-view .card-view-title, .bootstrap-table .fixed-table-container table.table tbody tr .card-view .card-view-value { width: auto !important; min-width: 0 !important; max-width: none !important; white-space: normal !important; overflow-wrap: anywhere; text-align: left !important; } .bootstrap-table th[data-reorderable] { cursor: grab; } .bootstrap-table th[data-reorderable]:focus-visible { outline: 2px solid var(--md-primary); }