1467 lines
39 KiB
CSS
1467 lines
39 KiB
CSS
.u-truncate {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
基础 Item / Meta
|
||
========================================================================== */
|
||
.mac-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 5px 10px;
|
||
color: var(--mac-text-muted);
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: all 0.1s ease;
|
||
user-select: none;
|
||
}
|
||
|
||
.mac-item:hover {
|
||
background-color: var(--mac-bg-active);
|
||
}
|
||
|
||
.mac-meta-title {
|
||
color: var(--mac-text-muted);
|
||
font-size: 10px;
|
||
padding-left: 7px;
|
||
margin: 10px 0 4px 0;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.6px;
|
||
}
|
||
|
||
.to-right {
|
||
margin-left: auto;
|
||
}
|
||
/* ==========================================================================
|
||
卡片与网格 (Cards & Grid)
|
||
========================================================================== */
|
||
.mac-card,
|
||
.mac-card-small {
|
||
background-color: var(--mac-bg-card);
|
||
border: 1px solid var(--mac-border-card);
|
||
border-radius: 4px;
|
||
padding: 14px;
|
||
margin-bottom: 16px;
|
||
box-shadow: var(--mac-shadow-card);
|
||
backdrop-filter: blur(20px);
|
||
width: 100%;
|
||
gap:8px;
|
||
}
|
||
|
||
.mac-card-small {
|
||
padding: 6px 8px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.flex-column-g1 {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
gap: 4px !important;
|
||
}
|
||
|
||
.mac-dashboard-grid {
|
||
display: flex;
|
||
gap: 12px;
|
||
width: 100%;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.mac-dashboard-grid .mac-card {
|
||
flex: 1;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.mac-card-header {
|
||
border-bottom: 1px solid var(--mac-border);
|
||
padding-bottom: 8px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.mac-card-header.justify-between {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.card-meta {
|
||
color: var(--mac-text-muted);
|
||
font-size: 10px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.6px;
|
||
}
|
||
|
||
.card-value {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.mac-bar-container {
|
||
margin-bottom: 10px;
|
||
}
|
||
.mac-bar {
|
||
gap: 8px;
|
||
width: 100%;
|
||
}
|
||
|
||
.divider {
|
||
border-left: 1px solid var(--mac-border);
|
||
height: 12px;
|
||
margin: 0 4px;
|
||
}
|
||
/* ==========================================================================
|
||
数据表格 (Tables)
|
||
========================================================================== */
|
||
.mac-table-container {
|
||
width: 100%;
|
||
border: 1px solid var(--mac-border-card);
|
||
border-radius: 3px;
|
||
overflow-x: auto; /* 💎 核心：水平方向超出时自动出现滚动条 */
|
||
overflow-y: hidden; /* 隐藏垂直方向多余的溢出 */
|
||
-webkit-overflow-scrolling: touch;
|
||
background-color: var(--mac-bg-card);
|
||
}
|
||
|
||
.mac-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
text-align: left;
|
||
font-size: 12px;
|
||
table-layout: auto;
|
||
}
|
||
|
||
.mac-table th {
|
||
background-color: var(--mac-bg-th);
|
||
padding: 8px 12px;
|
||
font-weight: 500;
|
||
border-bottom: 1px solid var(--mac-border);
|
||
color: var(--mac-text-secondary);
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.mac-table td {
|
||
padding: 8px 12px;
|
||
border-bottom: 1px solid var(--mac-border);
|
||
color: var(--mac-text-secondary);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.mac-table tr:last-child td {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.mac-table td:last-child {
|
||
text-align: right;
|
||
}
|
||
|
||
.mac-table th:last-child {
|
||
text-align: right;
|
||
}
|
||
|
||
.mac-table-operation-btn {
|
||
margin-right: 10px;
|
||
}
|
||
.mac-table-operation-btn:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.article-area {
|
||
/* resize: none;*/
|
||
/* overflow-y: hidden;*/
|
||
height: 800px;
|
||
width: 1000px;
|
||
line-height: 1.5;
|
||
/* transition: height 0.1s ease;*/
|
||
}
|
||
|
||
/*.mac-table tr:hover td {*/
|
||
/* background-color: var(--mac-bg-active);*/
|
||
/*}*/
|
||
|
||
/* ==========================================================================
|
||
表单元素 (Forms)
|
||
========================================================================== */
|
||
.mac-form-group {
|
||
margin-bottom: 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
width: 100%;
|
||
}
|
||
|
||
.mac-label {
|
||
color: var(--mac-text-primary);
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
input[type="text"],
|
||
input[type="password"],
|
||
input[type="number"],
|
||
textarea {
|
||
display: block;
|
||
width: 100%;
|
||
background-color: var(--mac-bg-popover);
|
||
/* color: #ffffff;*/
|
||
border: 1px solid var(--mac-border-card);
|
||
padding: 6px 10px;
|
||
font-size: 12px;
|
||
font-family: inherit;
|
||
line-height: 1.4;
|
||
border-radius: 4px;
|
||
outline: none;
|
||
height: auto;
|
||
transition: border-color 0.15s ease;
|
||
}
|
||
|
||
textarea {
|
||
padding: 6px 10px !important;
|
||
resize: vertical;
|
||
}
|
||
|
||
input[type="number"]::-webkit-outer-spin-button,
|
||
input[type="number"]::-webkit-inner-spin-button {
|
||
-webkit-appearance: none !important;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
/* 针对 Firefox 内核的拦截机制 */
|
||
input[type="number"] {
|
||
-moz-appearance: textfield !important;
|
||
}
|
||
|
||
input[type="text"]:focus,
|
||
textarea:focus {
|
||
/* border-color: var(--mac-text-muted);*/
|
||
}
|
||
|
||
select {
|
||
display: block !important;
|
||
width: auto;
|
||
height: 30px !important;
|
||
appearance: none !important;
|
||
background-color: var(--mac-bg-popover) !important;
|
||
color: var(--mac-text-secondary) !important;
|
||
border: 1px solid var(--mac-border-card) !important;
|
||
padding-left: 10px !important;
|
||
padding-right: 22px !important;
|
||
font-size: 12px !important;
|
||
font-family: inherit !important;
|
||
border-radius: 4px !important;
|
||
outline: none !important;
|
||
cursor: pointer !important;
|
||
line-height: 28px !important;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 10 10'%3E%3Cpath fill='%23ffffff' opacity='0.6' d='M5 2l3 3H2zM5 8L2 5h6z'/%3E%3C/svg%3E") !important;
|
||
background-repeat: no-repeat !important;
|
||
background-position: right 8px center !important;
|
||
background-size: 8px !important;
|
||
}
|
||
|
||
/*textarea {*/
|
||
/* resize: vertical;*/
|
||
/*}*/
|
||
|
||
.form-row {
|
||
display: flex;
|
||
gap: 12px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.form-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
按钮组件 (Buttons)
|
||
========================================================================== */
|
||
/*.mac-btn-primary {*/
|
||
/* background: var(--mac-gradient-vitepress);*/
|
||
/* color: var(--mac-text-on-accent);*/
|
||
/* border: none;*/
|
||
/* padding: 6px 14px;*/
|
||
/* font-size: 12px;*/
|
||
/* font-weight: 600;*/
|
||
/* border-radius: 4px;*/
|
||
/* cursor: pointer;*/
|
||
/* box-shadow: 0 2px 8px rgba(168, 85, 247, 0.15);*/
|
||
/*}*/
|
||
|
||
/*.mac-btn-primary:hover {*/
|
||
/* opacity: 0.9;*/
|
||
/* box-shadow: 0 3px 12px rgba(168, 85, 247, 0.35);*/
|
||
/*}*/
|
||
|
||
.mac-btn-primary {
|
||
position: relative;
|
||
background: var(--mac-gradient-vitepress);
|
||
color: var(--mac-text-on-accent);
|
||
border: none;
|
||
padding: 6px 14px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
box-shadow: none !important;
|
||
z-index: 1;
|
||
|
||
/* 🛡️ 物理抗震锁 */
|
||
transform: translateZ(0);
|
||
backface-visibility: hidden;
|
||
perspective: 1000px;
|
||
|
||
/* 🚀 按钮本体提亮的灵气引线：让亮度过渡极其丝滑 */
|
||
transition: filter 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||
}
|
||
|
||
/* 🎯 战线一：鼠标经过时，按钮本体高规格提亮 */
|
||
.mac-btn-primary:hover {
|
||
/* 🍏 降维打击：1.12 倍全局亮度微调！这比去手写复杂的 Hover 颜色高级十倍！
|
||
它会让你的 Vitepress 渐变色中所有亮部像素瞬间通电发光，视觉质感直接拉满！ */
|
||
filter: brightness(1.12);
|
||
}
|
||
|
||
/* 🪐 阴影代理人：默认状态保持精致 */
|
||
.mac-btn-primary::before {
|
||
content: "";
|
||
position: absolute;
|
||
/* 💡 精致内敛控表：上下左右各往里缩进 3px，让初始光源极度紧凑 */
|
||
top: 3px; left: 3px; right: 3px; bottom: 3px;
|
||
|
||
background: inherit;
|
||
border-radius: inherit;
|
||
|
||
/* 🛡️ 克制的物理参数：8px 的小范围柔和模糊，0.35 的朦胧亮度 */
|
||
filter: blur(8px);
|
||
opacity: 0.35;
|
||
z-index: -1;
|
||
|
||
/* 🛡️ 硬件加速抗震 */
|
||
transform: translate3d(0, 0, 0);
|
||
backface-visibility: hidden;
|
||
|
||
/* 🚀 阴影自己的动态曲线：只过渡透明度，绝不过渡面积 */
|
||
transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||
}
|
||
|
||
/* 🎯 战线二：鼠标经过时，阴影的处理（遵循圣旨：绝对克制） */
|
||
.mac-btn-primary:hover::before {
|
||
/* ❌ 彻底斩断原先的 transform: scale3d(1.08, 1.08, 1) 的膨胀逻辑！
|
||
阴影的物理面积在 hover 时绝对不放大哪怕 1 像素！ */
|
||
|
||
/* 🍏 顺从提亮：因为按钮本体亮了，背后的光晕只需要极其克制地配合加深一点点（从 0.35 变 0.45）
|
||
用来烘托本体的悬浮感，整体画面稳如泰山，绝无一丝轻浮的晃动或溢出！ */
|
||
opacity: 0.45;
|
||
}
|
||
|
||
.mac-btn-secondary {
|
||
background-color: var(--mac-bg-panel);
|
||
color: var(--mac-text-primary);
|
||
border: 1px solid var(--mac-border);
|
||
padding: 6px 14px;
|
||
font-size: 12px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.mac-btn-secondary:hover {
|
||
background-color: var(--mac-bg-active);
|
||
}
|
||
|
||
.mac-input-small {
|
||
height: var(--mac-input-small) !important;
|
||
padding: 0px 6px !important;
|
||
font-size:12px;
|
||
border-radius: 2px !important;
|
||
}
|
||
|
||
.mac-input-medium {
|
||
height: var(--mac-input-medium) !important;
|
||
padding: 0px !important 10px !important;
|
||
font-size:12px;
|
||
border-radius: 4px !important;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
导航辅助 (Breadcrumbs & Headers)
|
||
========================================================================== */
|
||
.mac-breadcrumbs {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
margin-bottom: 12px;
|
||
list-style: none;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.mac-breadcrumb-item {
|
||
color: var(--mac-text-muted);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.mac-breadcrumbs .mac-breadcrumb-item:not(:last-child)::after {
|
||
content: "/";
|
||
color: var(--mac-text-muted);
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.mac-breadcrumb-item:last-child {
|
||
color: #ffffff;
|
||
}
|
||
|
||
.mac-page-header {
|
||
margin-bottom: 16px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.mac-page-header p {
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
状态指示灯
|
||
========================================================================== */
|
||
.status-dot {
|
||
display: inline-block;
|
||
width: 5px;
|
||
height: 5px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.status-dot.secure {
|
||
background-color: var(--mac-system-green) !important;
|
||
box-shadow: 0 0 6px rgba(0, 245, 155, 0.6) !important;
|
||
}
|
||
|
||
.status-dot.warning {
|
||
background-color: var(--mac-system-warning) !important;
|
||
box-shadow: 0 0 6px rgba(255, 184, 0, 0.6) !important;
|
||
}
|
||
|
||
.status-dot.danger {
|
||
background-color: var(--mac-system-danger) !important;
|
||
box-shadow: 0 0 6px rgba(255, 59, 48, 0.7) !important;
|
||
}
|
||
|
||
.code-text {
|
||
font-family: 'SF Mono', Monaco, monospace !important;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* ==========================================================================\
|
||
追加核心高标准组件样式
|
||
========================================================================== */
|
||
|
||
/* 1. 标签与徽章系统 (Badges & Tags) */
|
||
.mac-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 2px 6px;
|
||
border-radius: 3px;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
line-height: 1;
|
||
white-space: nowrap;
|
||
background-color: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid var(--mac-border);
|
||
color: var(--mac-text-secondary);
|
||
}
|
||
.mac-badge.badge-theme { background-color: rgba(168, 85, 247, 0.15); border-color: rgba(168, 85, 247, 0.3); color: #c084fc; }
|
||
.mac-badge.badge-success { background-color: rgba(0, 245, 155, 0.1); border-color: rgba(0, 245, 155, 0.2); color: #00f59b; }
|
||
.mac-badge.badge-warning { background-color: rgba(255, 184, 0, 0.1); border-color: rgba(255, 184, 0, 0.2); color: #ffb800; }
|
||
.mac-badge.badge-danger { background-color: rgba(255, 59, 48, 0.1); border-color: rgba(255, 59, 48, 0.2); color: #ff6b8b; }
|
||
|
||
/* 2. 按钮状态矩阵扩充 */
|
||
/*.mac-btn-primary:disabled, .mac-btn-secondary:disabled {*/
|
||
/* opacity: 0.4 !important;*/
|
||
/* cursor: not-allowed !important;*/
|
||
/* box-shadow: none !important;*/
|
||
/*}*/
|
||
/*.mac-btn-danger {*/
|
||
/* background: linear-gradient(180px, #ff453a 0%, #ff3b30 100%) !important;*/
|
||
/* border: 1px solid #ff3b30 !important;*/
|
||
/* color: #ffffff !important;*/
|
||
/* text-shadow: 0 1px 2px rgba(0,0,0,0.3);*/
|
||
/*}*/
|
||
/*.mac-btn-danger:hover { filter: brightness(1.1); }*/
|
||
|
||
/* 3. 复杂输入框组合 (Input Groups) */
|
||
.mac-input-group {
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
.mac-input-group .group-prefix {
|
||
position: absolute;
|
||
left: 8px;
|
||
color: var(--mac-text-muted);
|
||
font-size: 11px;
|
||
user-select: none;
|
||
}
|
||
.mac-input-group.has-prefix input {
|
||
padding-left: 28px !important;
|
||
}
|
||
|
||
/* 4. 进度条与性能计量条 (Progress & Metric Bars) */
|
||
.mac-progress-track {
|
||
width: 100%;
|
||
height: 4px;
|
||
background-color: rgba(255, 255, 255, 0.04);
|
||
border-radius: 2px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
.mac-progress-bar {
|
||
height: 100%;
|
||
background-color: var(--mac-system-theme);
|
||
box-shadow: 0 0 8px var(--mac-gradient-vitepress);
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
/* 5. 空状态与骨架防断流 (Empty State) */
|
||
.mac-empty-placeholder {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 40px 20px;
|
||
text-align: center;
|
||
border: 1px dashed rgba(255, 255, 255, 0.05);
|
||
border-radius: 4px;
|
||
}
|
||
.mac-empty-icon {
|
||
font-size: 24px;
|
||
margin-bottom: 8px;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
/* 6. 高级上下文分流控制 (Context Menus / Dropdown Panel) */
|
||
.mac-dropdown-menu {
|
||
background-color: var(--mac-bg-subnav);
|
||
border: 1px solid var(--mac-border);
|
||
border-radius: 6px;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
|
||
padding: 4px;
|
||
min-width: 160px;
|
||
}
|
||
.mac-dropdown-item {
|
||
padding: 6px 10px;
|
||
font-size: 11px;
|
||
color: var(--mac-text-secondary);
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.mac-dropdown-item:hover {
|
||
background-color: var(--mac-bg-active);
|
||
color: #ffffff;
|
||
}
|
||
|
||
/* ==========================================================================\
|
||
🚀 终极硬核扩展组件库 (Ultimate Heavy-Duty Extension)
|
||
========================================================================== */
|
||
|
||
/* 1. 分段控制器 (Segmented Controls) - macOS 灵魂组件 */
|
||
.mac-segmented-control {
|
||
display: inline-flex;
|
||
background-color: rgba(0, 0, 0, 0.2);
|
||
border: 1px solid var(--mac-border);
|
||
border-radius: 6px;
|
||
padding: 2px;
|
||
user-select: none;
|
||
}
|
||
.mac-segment-item {
|
||
padding: 4px 12px;
|
||
font-size: 11px;
|
||
color: var(--mac-text-muted);
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-weight: 500;
|
||
transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
.mac-segment-item:hover { color: var(--mac-text-secondary); }
|
||
.mac-segment-item.active {
|
||
background-color: var(--mac-bg-panel);
|
||
color: #ffffff;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
|
||
}
|
||
|
||
/* 2. 原生微型开关 (macOS Toggle Switch) */
|
||
.mac-switch-label {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
color: var(--mac-text-secondary);
|
||
}
|
||
.mac-switch-input { display: none; }
|
||
.mac-switch-slider {
|
||
width: 28px;
|
||
height: 16px;
|
||
background-color: rgba(255, 255, 255, 0.1);
|
||
border-radius: 8px;
|
||
position: relative;
|
||
border: 1px solid var(--mac-border);
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
.mac-switch-slider::after {
|
||
content: "";
|
||
position: absolute;
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
background-color: #ffffff;
|
||
top: 1px;
|
||
left: 1px;
|
||
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
|
||
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
.mac-switch-input:checked + .mac-switch-slider {
|
||
background-color: var(--mac-system-theme);
|
||
border-color: rgba(168, 85, 247, 0.5);
|
||
}
|
||
.mac-switch-input:checked + .mac-switch-slider::after {
|
||
transform: translateX(12px);
|
||
}
|
||
|
||
/* 3. 未读计数胶囊与徽章 (Counters) */
|
||
.mac-counter {
|
||
font-size: 10px;
|
||
background-color: rgba(255, 255, 255, 0.06);
|
||
color: var(--mac-text-muted);
|
||
padding: 1px 5px;
|
||
border-radius: 10px;
|
||
font-weight: 600;
|
||
margin-left: auto;
|
||
}
|
||
.mac-item:hover .mac-counter, .mac-item.active .mac-counter {
|
||
color: #ffffff;
|
||
background-color: rgba(168, 85, 247, 0.3);
|
||
}
|
||
|
||
/* 4. 复杂过滤器检索条 (Filter Toolbars) */
|
||
.mac-filter-toolbar {
|
||
background-color: var(--mac-bg-subnav);
|
||
border: 1px solid var(--mac-border);
|
||
border-radius: 4px;
|
||
padding: 8px 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
margin-bottom: 16px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* 5. 极简暗黑时间轴 (Timeline / Audit Trails) */
|
||
.mac-timeline {
|
||
position: relative;
|
||
padding-left: 16px;
|
||
list-style: none;
|
||
margin: 0;
|
||
}
|
||
.mac-timeline::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 4px;
|
||
top: 4px;
|
||
bottom: 4px;
|
||
width: 1px;
|
||
background-color: var(--mac-border);
|
||
}
|
||
.mac-timeline-item {
|
||
position: relative;
|
||
padding-bottom: 12px;
|
||
font-size: 11px;
|
||
}
|
||
.mac-timeline-item::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: -15px;
|
||
top: 4px;
|
||
width: 7px;
|
||
height: 7px;
|
||
border-radius: 50%;
|
||
background-color: var(--mac-border);
|
||
border: 2px solid var(--mac-bg-panel);
|
||
}
|
||
.mac-timeline-item.success::after { background-color: var(--mac-system-green); }
|
||
.mac-timeline-item.warning::after { background-color: var(--mac-system-warning); }
|
||
.mac-timeline-item.danger::after { background-color: var(--mac-system-danger); }
|
||
.mac-timeline-meta { color: var(--mac-text-muted); margin-bottom: 2px; display: flex; gap: 8px; }
|
||
|
||
/* 6. 模态窗刚性静态定位层（沙盒验证用） */
|
||
.mac-modal-backdrop-mock {
|
||
background-color: rgba(0, 0, 0, 0.4);
|
||
border: 1px solid var(--mac-border);
|
||
border-radius: 6px;
|
||
backdrop-filter: blur(4px);
|
||
padding: 16px;
|
||
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
|
||
}
|
||
|
||
/* ==========================================================================\
|
||
🔥 终极重载硬核扩展组件库 (Ultimate Heavy-Duty Extension System)
|
||
========================================================================== */
|
||
|
||
/* 1. 极致高密度属性审查器 (Property Inspector) */
|
||
.mac-property-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||
gap: 8px;
|
||
background: rgba(0, 0, 0, 0.15);
|
||
padding: 10px;
|
||
border-radius: 4px;
|
||
border: 1px solid var(--mac-border);
|
||
}
|
||
.mac-property-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
.mac-property-label {
|
||
font-size: 10px;
|
||
color: var(--mac-text-muted);
|
||
text-transform: uppercase;
|
||
}
|
||
.mac-property-value {
|
||
font-size: 12px;
|
||
color: var(--mac-text-secondary);
|
||
}
|
||
|
||
/* 2. macOS Finder 风格嵌套树 (Hierarchy Component Tree) */
|
||
.mac-tree {
|
||
list-style: none;
|
||
padding-left: 0;
|
||
margin: 0;
|
||
}
|
||
.mac-tree-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 4px 6px;
|
||
border-radius: 3px;
|
||
cursor: pointer;
|
||
font-size: 11px;
|
||
}
|
||
.mac-tree-item:hover {
|
||
background-color: var(--mac-bg-active);
|
||
}
|
||
.mac-tree-item.selected {
|
||
background-color: rgba(168, 85, 247, 0.2);
|
||
color: #ffffff;
|
||
border: 1px solid rgba(168, 85, 247, 0.4);
|
||
}
|
||
.mac-tree-indent {
|
||
width: 14px;
|
||
height: 14px;
|
||
display: inline-block;
|
||
position: relative;
|
||
}
|
||
.mac-tree-indent::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 6px;
|
||
top: -4px;
|
||
bottom: 6px;
|
||
width: 1px;
|
||
background-color: rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
/* 3. 伪代码编辑器视窗 (Mock Code Editor Component) */
|
||
.mac-editor-window {
|
||
background-color: #121011;
|
||
border: 1px solid var(--mac-border);
|
||
border-radius: 4px;
|
||
font-family: var(--mac-font-mono, monospace);
|
||
display: flex;
|
||
overflow: hidden;
|
||
}
|
||
.mac-editor-gutter {
|
||
background-color: rgba(255, 255, 255, 0.02);
|
||
border-right: 1px solid var(--mac-border);
|
||
padding: 10px 6px;
|
||
text-align: right;
|
||
color: rgba(255, 255, 255, 0.15);
|
||
user-select: none;
|
||
font-size: 11px;
|
||
line-height: 1.5;
|
||
}
|
||
.mac-editor-content {
|
||
padding: 10px;
|
||
overflow-x: auto;
|
||
flex: 1;
|
||
font-size: 11px;
|
||
line-height: 1.5;
|
||
color: var(--mac-text-secondary);
|
||
white-space: pre;
|
||
}
|
||
|
||
/* 4. 暗黑极光骨架屏脉冲动画 (Skeleton Pulse) */
|
||
.mac-skeleton {
|
||
background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
|
||
background-size: 200% 100%;
|
||
animation: mac-pulse 1.5s infinite;
|
||
border-radius: 3px;
|
||
display: inline-block;
|
||
}
|
||
@keyframes mac-pulse {
|
||
0% { background-position: 200% 0; }
|
||
100% { background-position: -200% 0; }
|
||
}
|
||
|
||
/* 5. 悬浮级通知弹窗中心 (System Toast Stack) */
|
||
.mac-toast-container {
|
||
position: fixed;
|
||
top: 36px;
|
||
right: 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
z-index: 10000;
|
||
width: 280px;
|
||
}
|
||
.mac-toast {
|
||
background: rgba(30, 26, 27, 0.85);
|
||
border: 1px solid var(--mac-border);
|
||
backdrop-filter: blur(12px);
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
||
border-radius: 6px;
|
||
padding: 10px 12px;
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: flex-start;
|
||
}
|
||
.mac-toast.toast-error { border-left: 3px solid var(--mac-system-danger); }
|
||
.mac-toast.toast-success { border-left: 3px solid var(--mac-system-green); }
|
||
|
||
/* 6. 大数值高光看板 (Statistic Hero Banner) */
|
||
.mac-stat-hero-container {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||
gap: 16px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.mac-stat-hero-card {
|
||
background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.00) 100%);
|
||
border: 1px solid var(--mac-border-card);
|
||
border-radius: 6px;
|
||
padding: 16px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.mac-stat-hero-card::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0; left: 0; width: 100%; height: 2px;
|
||
background: linear-gradient(90deg, transparent, var(--mac-system-theme), transparent);
|
||
opacity: 0.3;
|
||
}
|
||
|
||
/* ==========================================================================\
|
||
🚀 全场景丰富度扩充组件（专门应对不同核心页面的布局特征）
|
||
========================================================================== */
|
||
|
||
/* 场景 A：数据看板 —— 监控大盘专属极光状态条 */
|
||
.mac-signal-strip {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
background: linear-gradient(90deg, rgba(168, 85, 247, 0.05) 0%, transparent 100%);
|
||
padding: 10px 14px;
|
||
border-radius: 4px;
|
||
border-left: 3px solid var(--mac-system-theme);
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
/* 场景 B：拓扑与配置 —— 属性对齐名片 */
|
||
.mac-meta-card {
|
||
background: rgba(0, 0, 0, 0.12);
|
||
border: 1px solid var(--mac-border);
|
||
border-radius: 4px;
|
||
padding: 12px;
|
||
}
|
||
.mac-meta-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 6px 0;
|
||
font-size: 11px;
|
||
border-bottom: 1px dashed rgba(255, 255, 255, 0.03);
|
||
}
|
||
.mac-meta-row:last-child { border-bottom: none; }
|
||
|
||
/* 场景 C：流水账单/审计 —— 财务级右对齐紧凑表格修饰 */
|
||
.mac-table-numeric {
|
||
font-family: var(--mac-font-mono, monospace);
|
||
text-align: right;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 场景 D：工单与用户管理 —— 紧凑型用户矩阵头像胶囊 */
|
||
.mac-avatar-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
background: rgba(255, 255, 255, 0.04);
|
||
padding: 2px 8px 2px 4px;
|
||
border-radius: 12px;
|
||
border: 1px solid var(--mac-border);
|
||
}
|
||
|
||
.mac-avatar-badge * {
|
||
transition: color 0.3s ease, filter 0.3s ease;
|
||
}
|
||
.mac-avatar-badge:hover * {
|
||
color:var(--mac-text-primary) !important;
|
||
/* filter: brightness(2.15);*/
|
||
cursor:pointer;
|
||
}
|
||
|
||
.mac-avatar-circle {
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 50%;
|
||
background: var(--mac-system-theme);
|
||
color: #fff;
|
||
font-size: 9px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
🚀 扩展工业级高密阶梯布局与重度交互防护
|
||
========================================================================== */
|
||
|
||
/* 1. 刚性全屏阻塞防错沙盒（Modal/Layer Guard） */
|
||
.mac-modal-backdrop {
|
||
position: fixed;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background: rgba(15, 11, 12, 0.7);
|
||
backdrop-filter: blur(8px);
|
||
z-index: 9999;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.mac-modal-window {
|
||
background: var(--mac-bg-panel);
|
||
border: 1px solid var(--mac-gradient-vitepress);
|
||
box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 12px rgba(168, 85, 247, 0.2);
|
||
border-radius: 6px; width: 480px; max-width: 90vw;
|
||
overflow: hidden; display: flex; flex-direction: column;
|
||
}
|
||
|
||
/* 2. 双向联动视窗分流器（Split Deck） */
|
||
.mac-split-deck {
|
||
display: flex; gap: 1px;
|
||
background: var(--mac-border);
|
||
border: 1px solid var(--mac-border-card);
|
||
border-radius: 4px; overflow: hidden;
|
||
}
|
||
.mac-deck-pane {
|
||
flex: 1; background: var(--mac-bg-main);
|
||
padding: 12px; min-width: 0;
|
||
}
|
||
.mac-deck-pane.pane-aside {
|
||
flex: 0 0 240px; background: rgba(0,0,0,0.1);
|
||
}
|
||
|
||
/* 3. 极低水位警告核心状态块（Incident Block） */
|
||
.mac-incident-block {
|
||
background: linear-gradient(135deg, rgba(255, 59, 48, 0.08) 0%, transparent 100%);
|
||
border: 1px solid rgba(255, 59, 48, 0.3);
|
||
border-left: 4px solid var(--mac-system-danger);
|
||
padding: 12px; border-radius: 4px; margin-bottom: 16px;
|
||
}
|
||
|
||
/* 4. 键值排编名片组（High-Density Definition Key-Value） */
|
||
.mac-kv-group {
|
||
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px;
|
||
}
|
||
.mac-kv-item {
|
||
background: rgba(255,255,255,0.02); border: 1px solid var(--mac-border);
|
||
padding: 6px 10px; border-radius: 3px;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
✨ 终极毛玻璃通知栈系统 (The Ultimate Translucent Toast Glass)
|
||
========================================================================== */
|
||
.mac-toast-container {
|
||
position: fixed;
|
||
top: 34px; /* 完美避开 22px 状态栏并留出 12px 刚性空隙 */
|
||
right: 16px;
|
||
z-index: 99999;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
width: 320px;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.mac-toast-glass {
|
||
pointer-events: auto;
|
||
background: rgba(30, 26, 27, 0.55) !important; /* 深度结合 --mac-bg-main 调配的 55% 半透微醺底色 */
|
||
backdrop-filter: blur(24px) saturate(190%) !important; /* 强力高斯模糊与色彩饱和度双向泵入 */
|
||
-webkit-backdrop-filter: blur(24px) saturate(190%) !important;
|
||
border: 1px solid rgba(255, 255, 255, 0.09) !important; /* 原生级高光上边框/内衬线 */
|
||
border-radius: 6px !important;
|
||
padding: 12px 14px !important;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35),
|
||
0 1px 2px rgba(0, 0, 0, 0.2),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; /* 刚性内外双重阴影防塌陷 */
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
||
animation: toast-slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||
}
|
||
|
||
/* 状态左缘刚性微分流偏置 */
|
||
.mac-toast-glass.success { border-left: 3px solid var(--mac-system-green) !important; }
|
||
.mac-toast-glass.error { border-left: 3px solid var(--mac-system-danger) !important; }
|
||
.mac-toast-glass.warning { border-left: 3px solid var(--mac-system-warning) !important; }
|
||
|
||
/* 刚性滑入动画 */
|
||
@keyframes toast-slide-in {
|
||
from { transform: translateX(30px); opacity: 0; }
|
||
to { transform: translateX(0); opacity: 1; }
|
||
}
|
||
|
||
/* ==========================================================================
|
||
🌌 基础设施级物理拓扑与冷热流道控制系统
|
||
========================================================================== */
|
||
|
||
/* 1. 刚性节点物理阵列骨架（Grid Core Matrix） */
|
||
.mac-node-matrix {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
|
||
gap: 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.mac-node-unit {
|
||
background: rgba(255, 255, 255, 0.02);
|
||
border: 1px solid var(--mac-border-card);
|
||
border-radius: 6px;
|
||
padding: 10px;
|
||
position: relative;
|
||
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
||
}
|
||
.mac-node-unit.active {
|
||
border-color: rgba(168, 85, 247, 0.4);
|
||
background: linear-gradient(180deg, rgba(168, 85, 247, 0.03) 0%, transparent 100%);
|
||
box-shadow: 0 4px 12px rgba(168, 85, 247, 0.1);
|
||
}
|
||
.mac-node-unit.standby {
|
||
border-color: rgba(255, 255, 255, 0.05);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
/* 2. 物理连线连接段（Topological Pipeline Cable） */
|
||
.mac-topo-cable {
|
||
height: 1px;
|
||
background: linear-gradient(90deg, var(--mac-system-theme) 0%, transparent 100%);
|
||
position: relative;
|
||
margin: 8px 0;
|
||
}
|
||
.mac-topo-cable::after {
|
||
content: "";
|
||
position: absolute;
|
||
width: 4px; height: 4px;
|
||
background: #ffffff;
|
||
border-radius: 50%;
|
||
top: -1.5px; left: 0;
|
||
box-shadow: 0 0 6px #ffffff;
|
||
animation: cable-flow 2s linear infinite;
|
||
}
|
||
@keyframes cable-flow {
|
||
0% { left: 0; opacity: 1; }
|
||
80% { opacity: 1; }
|
||
100% { left: 100%; opacity: 0; }
|
||
}
|
||
|
||
/* 3. 灰度冷热分流重型手柄域 (Heavy Switch Bay) */
|
||
.mac-shifter-bay {
|
||
display: flex;
|
||
background: rgba(0, 0, 0, 0.2);
|
||
border: 1px solid var(--mac-border);
|
||
border-radius: 6px;
|
||
padding: 4px;
|
||
gap: 4px;
|
||
}
|
||
.mac-shifter-lever {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 8px 0;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
color: var(--mac-text-muted);
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
transition: all 0.15s ease;
|
||
}
|
||
.mac-shifter-lever.active-hot {
|
||
background: var(--mac-system-danger);
|
||
color: #ffffff;
|
||
font-weight: 600;
|
||
box-shadow: 0 2px 8px rgba(255, 59, 48, 0.4);
|
||
}
|
||
.mac-shifter-lever.active-cold {
|
||
background: var(--mac-system-theme);
|
||
color: #ffffff;
|
||
font-weight: 600;
|
||
box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
|
||
}
|
||
|
||
/* 4. 微缩阶梯波形图（Micro Step Volume Bar） */
|
||
.mac-wave-steps {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
gap: 2px;
|
||
height: 16px;
|
||
}
|
||
.mac-wave-bar {
|
||
width: 3px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 1px;
|
||
}
|
||
.mac-wave-bar.fill { background: var(--mac-system-green); }
|
||
.mac-wave-bar.warn { background: var(--mac-system-warning); }
|
||
|
||
/* ==========================================================================
|
||
🧱 工业级机械核心弹窗舱系统 (Nuclear Industrial Modal Bays)
|
||
========================================================================== */
|
||
.width-full {
|
||
width:100%;
|
||
}
|
||
|
||
.text-to-right {
|
||
text-align:right;
|
||
}
|
||
|
||
/* =============================
|
||
tom alert
|
||
==============================*/
|
||
|
||
/* type调色 */
|
||
/*.tom-alert > .tom-alert-inner {*/
|
||
/* border-color: var(--mac-color-danger) !important;*/
|
||
/*}*/
|
||
/*.tom-alert-danger .mac-btn-primary {*/
|
||
/* background-color: var(--mac-color-danger) !important;*/
|
||
/*}*/
|
||
|
||
.tom-alert-icon {
|
||
font-size: 56px !important;
|
||
}
|
||
|
||
.tom-alert {
|
||
position: fixed;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background: rgba(15, 11, 12, 0.65) !important;
|
||
backdrop-filter: blur(16px) saturate(180%) !important;
|
||
-webkit-backdrop-filter: blur(16px) saturate(180%) !important;
|
||
z-index: 100000;
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 40px 20px; /* 🍏 适当加大上下 padding，给 2000px 长图留出高规格的头尾呼吸感 */
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 0.3s ease;
|
||
overflow-y: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
outline: none;
|
||
}
|
||
|
||
.tom-alert-inner {
|
||
background: var(--mac-bg-panel);
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6),
|
||
0 0 1px rgba(255, 255, 255, 0.1) inset;
|
||
border-radius: 6px !important;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin: auto 0;
|
||
margin-bottom: 50vh;
|
||
flex-shrink: 0;
|
||
min-width:200px;
|
||
max-width: 80%;
|
||
}
|
||
|
||
.tom-alert.is-active {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.tom-alert-header {
|
||
background: rgba(0,0,0,0.15);
|
||
padding: 10px 14px;
|
||
border-bottom: 1px solid var(--mac-border);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.tom-alert-body {
|
||
width: 100%;
|
||
padding: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
/* gap:6px;*/
|
||
}
|
||
|
||
.tom-alert-msg {
|
||
margin: 8px 8px 8px 8px;
|
||
}
|
||
|
||
.tom-alert-footer {
|
||
background: rgba(0,0,0,0.1);
|
||
padding: 10px 14px;
|
||
border-top: 1px solid var(--mac-border);
|
||
display: flex;
|
||
gap: 10px;
|
||
justify-content: center;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.tom-alert-footer > button {
|
||
flex: 1;
|
||
width: 0;
|
||
}
|
||
|
||
/*.tom-alert-footer > button {*/
|
||
/* flex: 1 1 300px;*/
|
||
/* max-width: 300px;*/
|
||
/* width: 100%;*/
|
||
/*}*/
|
||
|
||
.tom-modal {
|
||
position: fixed;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background: rgba(15, 11, 12, 0.65) !important;
|
||
backdrop-filter: blur(16px) saturate(180%) !important;
|
||
-webkit-backdrop-filter: blur(16px) saturate(180%) !important;
|
||
z-index: 10000;
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 40px 20px;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 0.3s ease;
|
||
overflow-y: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
outline: none;
|
||
}
|
||
|
||
.tom-modal-inner {
|
||
/* height: 100vh;*/
|
||
background: var(--mac-bg-panel) !important;
|
||
border: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6),
|
||
0 0 1px rgba(255, 255, 255, 0.1) inset !important;
|
||
border-radius: 6px !important;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin: auto 0;
|
||
flex-shrink: 0;
|
||
min-width: 200px;
|
||
}
|
||
|
||
.tom-modal.is-active {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.tom-modal-header {
|
||
background: rgba(0,0,0,0.15);
|
||
padding: 10px 14px;
|
||
border-bottom: 1px solid var(--mac-border);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.tom-modal-header > a {
|
||
display: inline-block;
|
||
padding: 12px 15px;
|
||
margin: -12px -15px;
|
||
/* cursor: pointer;*/
|
||
/* text-decoration: none;*/
|
||
}
|
||
|
||
.tom-modal-body-flex {
|
||
padding: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap:6px;
|
||
/* display: grid;*/
|
||
/* grid-template-columns: max-content 1fr;*/
|
||
/* gap: 6px 0px;*/
|
||
/* align-items: center;*/
|
||
}
|
||
|
||
.tom-modal-body {
|
||
padding: 10px;
|
||
/* display: flex;*/
|
||
/* flex-direction: column;*/
|
||
/* gap:6px;*/
|
||
display: grid;
|
||
/* grid-template-columns: max-content 1fr;*/
|
||
grid-template-columns: max-content 1fr max-content;
|
||
gap: 6px 8px;
|
||
align-items: center;
|
||
}
|
||
|
||
.fr1-max {
|
||
grid-template-columns: max-content 1fr max-content !important;
|
||
}
|
||
|
||
.fr1 {
|
||
grid-template-columns: max-content 1fr !important;
|
||
}
|
||
|
||
.tom-modal-footer {
|
||
background: rgba(0,0,0,0.1);
|
||
padding: 10px 14px;
|
||
border-top: 1px solid var(--mac-border);
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
/* 3. 刻度调节器滑道（Vaccum Pipe Slider） */
|
||
.mac-pipe-range {
|
||
-webkit-appearance: none;
|
||
width: 100%; height: 4px;
|
||
background: rgba(0, 0, 0, 0.4);
|
||
border-radius: 2px; outline: none;
|
||
margin: 12px 0;
|
||
}
|
||
.mac-pipe-range::-webkit-slider-thumb {
|
||
-webkit-appearance: none;
|
||
width: 10px; height: 14px;
|
||
background: var(--mac-system-theme) !important;
|
||
border-radius: 2px; cursor: pointer;
|
||
box-shadow: 0 0 8px var(--mac-system-theme);
|
||
border: 1px solid rgba(255,255,255,0.2);
|
||
}
|
||
|
||
/* 4. 机械咬合插槽组（Interlock Slot Matrix） */
|
||
.mac-slot-bin {
|
||
display: flex; gap: 6px; margin: 12px 0;
|
||
}
|
||
.mac-slot-pin {
|
||
flex: 1; height: 28px;
|
||
background: rgba(0, 0, 0, 0.2);
|
||
border: 1px solid var(--mac-border);
|
||
border-radius: 4px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-family: monospace; font-size: 11px; color: var(--mac-text-muted);
|
||
cursor: pointer; transition: all 0.15s ease;
|
||
}
|
||
.mac-slot-pin.locked {
|
||
border-color: rgba(0, 245, 155, 0.4);
|
||
color: var(--mac-system-green);
|
||
background: linear-gradient(180deg, rgba(0, 245, 155, 0.04) 0%, transparent 100%);
|
||
text-shadow: 0 0 6px rgba(0, 245, 155, 0.3);
|
||
}
|
||
|
||
/* ==========================================================================
|
||
💾 高密数据切片控制总线与无缝交互弹窗
|
||
========================================================================== */
|
||
|
||
/* 1. 列表头部多维筛查舱 (Filter Bay) */
|
||
.mac-filter-deck {
|
||
background: rgba(0, 0, 0, 0.15);
|
||
border: 1px solid var(--mac-border);
|
||
border-radius: 4px;
|
||
padding: 10px 14px;
|
||
margin-bottom: 14px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 2. 刚性高阶密集数据表修饰 (Industrial High-Density Row) */
|
||
.mac-table tbody tr {
|
||
/* cursor: pointer;*/
|
||
transition: background-color 0.1s ease;
|
||
}
|
||
.mac-table tbody tr:hover {
|
||
background-color: var(--mac-bg-active) !important;
|
||
}
|
||
|
||
/* 3. 刚性翻页控制器胶囊 (Decoupled Pagination Capsule) */
|
||
.mac-pager-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 14px;
|
||
padding: 0 4px;
|
||
gap: 8px;
|
||
}
|
||
.mac-pager-group {
|
||
display: flex;
|
||
gap: 4px;
|
||
}
|
||
.mac-pager-btn {
|
||
min-width: 24px; height: 22px;
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border: 1px solid var(--mac-border);
|
||
border-radius: 3px;
|
||
color: var(--mac-text-muted);
|
||
font-family: monospace;
|
||
font-size: 11px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
cursor: pointer; transition: all 0.1s ease;
|
||
}
|
||
.mac-pager-btn:hover:not(.disabled) {
|
||
border-color: rgba(168, 85, 247, 0.4);
|
||
color: #fff;
|
||
}
|
||
.mac-pager-btn.active {
|
||
background: var(--mac-system-theme) !important;
|
||
border-color: var(--mac-system-theme) !important;
|
||
color: #fff !important;
|
||
font-weight: 600;
|
||
box-shadow: 0 2px 6px rgba(168, 85, 247, 0.3);
|
||
}
|
||
.mac-pager-btn.disabled {
|
||
opacity: 0.3;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* 4. 排序箭头的刚性微分形态 */
|
||
.mac-sort-link {
|
||
color: inherit !important;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
.mac-sort-arrow {
|
||
font-size: 9px;
|
||
color: var(--mac-text-muted);
|
||
transition: color 0.15s ease;
|
||
}
|
||
.mac-sort-link.active .mac-sort-arrow {
|
||
color: var(--mac-system-theme);
|
||
}
|