/* 拖文件即问:Warm Paper 拖放蒙层 + 温和说明条(颜色走 theme.css 令牌) */ /* 全屏蒙层:半透明暖纸底,覆盖主窗口内容区之上 */ .dropzone { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: none; /* WebKit 透明窗口坑:不要用 backdrop-filter(坑位实测记录 #1) */ animation: dropzone-in 150ms var(--ease); } @keyframes dropzone-in { from { opacity: 0; } to { opacity: 1; } } .dropzone-card { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px 64px; border: 1px dashed var(--border); border-radius: var(--radius-float); background: var(--glass); box-shadow: var(--shadow-float); text-align: center; } .dropzone-icon { color: var(--accent); } .dropzone-title { margin: 0; font-family: var(--font-serif); font-size: 30px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--text); } .dropzone-sub { margin: 0; max-width: 360px; font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); } /* 不支持文件时的温和说明条(底部浮出) */ .dropzone-notice { position: fixed; left: 50%; bottom: 28px; z-index: 70; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; max-width: 560px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-elevated); box-shadow: var(--shadow-float); animation: dropzone-in 150ms var(--ease); } .dropzone-notice-text { font-size: 13px; line-height: 1.6; color: var(--text-secondary); } .dropzone-notice-close { flex-shrink: 0; height: 28px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-control); background: transparent; color: var(--text-secondary); font-family: inherit; font-size: 12.5px; cursor: pointer; transition: background-color var(--dur) var(--ease); } .dropzone-notice-close:hover { background: var(--bg-sunken); color: var(--text); }