You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
3.5 KiB
120 lines
3.5 KiB
/* DSH PRO - overlay.css : 页面右下角浮动面板样式 */ |
|
|
|
.dshmem-panel { |
|
position: fixed; |
|
right: 18px; |
|
bottom: 18px; |
|
width: 320px; |
|
max-height: 70vh; |
|
z-index: 2147483646; |
|
background: rgba(24, 26, 31, 0.92); |
|
color: #e8eaed; |
|
border: 1px solid rgba(255, 255, 255, 0.14); |
|
border-radius: 12px; |
|
font: 12px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif; |
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); |
|
backdrop-filter: blur(8px); |
|
display: flex; |
|
flex-direction: column; |
|
overflow: hidden; |
|
} |
|
.dshmem-panel.dshmem-min { max-height: none; } |
|
|
|
.dshmem-head { |
|
display: flex; |
|
align-items: center; |
|
gap: 8px; |
|
padding: 8px 12px; |
|
background: rgba(255, 255, 255, 0.06); |
|
cursor: pointer; |
|
user-select: none; |
|
} |
|
.dshmem-dot { |
|
width: 9px; height: 9px; border-radius: 50%; |
|
background: #666; flex: none; |
|
} |
|
.dshmem-dot.ok { background: #34c759; } |
|
.dshmem-dot.err { background: #ff5f57; } |
|
.dshmem-dot.busy { background: #ffcc00; animation: dshmem-blink 1s infinite; } .dshmem-dot.ok-busy { background: #34c759; animation: dshmem-blink 1s infinite; } |
|
@keyframes dshmem-blink { 50% { opacity: 0.35; } } |
|
|
|
.dshmem-title { font-weight: 600; letter-spacing: 0.4px; } |
|
.dshmem-phase { color: #9aa0a6; font-size: 11px; } |
|
.dshmem-toggle { margin-left: auto; color: #9aa0a6; cursor: pointer; } |
|
|
|
.dshmem-body { padding: 8px 12px 12px; overflow-y: auto; } |
|
.dshmem-min .dshmem-body { display: none; } |
|
|
|
.dshmem-row { display: flex; gap: 6px; margin-top: 8px; margin-bottom: 8px; flex-wrap: wrap; } |
|
.dshmem-btn { |
|
flex: 1 1 auto; |
|
padding: 5px 10px; |
|
border: 1px solid rgba(255,255,255,0.18); |
|
border-radius: 8px; |
|
background: rgba(255,255,255,0.08); |
|
color: inherit; |
|
cursor: pointer; |
|
font: inherit; |
|
white-space: nowrap; |
|
} |
|
.dshmem-btn:hover { background: rgba(255,255,255,0.16); } |
|
.dshmem-btn.primary { background: #2f81f7; border-color: #2f81f7; } |
|
.dshmem-btn.primary:hover { background: #4a93ff; } |
|
.dshmem-btn.danger { background: #b62324; border-color: #b62324; } |
|
.dshmem-btn.stg { background: #8fd694; border-color: #8fd694; color: #0a1a0c; } |
|
.dshmem-btn.stg:hover { background: #a8e2ac; } |
|
.dshmem-btn.stg.armed { background: #c9f0cc; animation: dshmem-blink 1s infinite; } |
|
.dshmem-btn:disabled { opacity: 0.45; cursor: not-allowed; } |
|
|
|
.dshmem-select, .dshmem-input { |
|
width: 100%; |
|
box-sizing: border-box; |
|
padding: 5px 8px; |
|
border-radius: 8px; |
|
border: 1px solid rgba(255,255,255,0.18); |
|
background: rgba(0,0,0,0.3); |
|
color: inherit; |
|
font: inherit; |
|
} |
|
|
|
.dshmem-log { |
|
margin-top: 8px; |
|
padding: 6px 8px; |
|
background: rgba(0,0,0,0.35); |
|
border-radius: 8px; |
|
max-height: 140px; |
|
overflow-y: auto; |
|
font: 11px/1.5 Consolas, monospace; |
|
color: #b9bbbe; |
|
white-space: pre-wrap; |
|
word-break: break-all; |
|
} |
|
|
|
.dshmem-preview { |
|
margin-top: 8px; |
|
padding: 6px 8px; |
|
background: rgba(255, 204, 0, 0.08); |
|
border: 1px dashed rgba(255, 204, 0, 0.5); |
|
border-radius: 8px; |
|
font: 11px/1.5 Consolas, monospace; |
|
max-height: 120px; |
|
overflow-y: auto; |
|
white-space: pre-wrap; |
|
word-break: break-all; |
|
} |
|
.dshmem-confirm-box { |
|
margin-top: 8px; |
|
padding: 8px; |
|
background: rgba(255, 95, 87, 0.12); |
|
border: 1px solid rgba(255, 95, 87, 0.5); |
|
border-radius: 8px; |
|
} |
|
.dshmem-confirm-title { font-weight: 600; color: #ff8780; } |
|
|
|
.dshmem-settings { margin-top: 8px; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 8px; } |
|
.dshmem-settings .dshmem-input { margin-top: 4px; } |
|
.dshmem-label { color: #9aa0a6; font-size: 11px; margin-top: 6px; } |
|
.dshmem-acc-ok { color: #34c759; } |
|
.dshmem-acc-warn { color: #ffcc00; } |
|
.dshmem-acc-err { color: #ff5f57; } |
|
.dshmem-acc-crit { color: #b62324; }
|
|
|