@keyframes modal-pop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* 魔法对比工具样式 */ .magic-container { position: relative; width: 100%; height: 350px; overflow: hidden; border-radius: 16px; background: #000; border: 1px solid rgba(255,255,255,0.1); } .magic-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; background: #1a1c29; } .magic-handle { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; cursor: ew-resize; z-index: 30; left: 50%; box-shadow: 0 0 15px rgba(0,0,0,0.8); } .magic-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #000; pointer-events: none; box-shadow: 0 4px 10px rgba(0,0,0,0.3); } .magic-upload-zone { position: absolute; top: 0; width: 50%; height: 100%; z-index: 40; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; background: rgba(0,0,0,0.7); cursor: pointer; } .magic-upload-zone:hover { opacity: 1; } .page-title { font-family: 'Noto Sans SC', sans-serif; font-weight: 900; letter-spacing: -1px; } /* 选中态样式 */ .gallery-card.selected { border-color: var(--sr-accent-blue); box-shadow: 0 0 20px rgba(98, 210, 216, 0.3); } .gallery-card.selected::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 10px; left: 10px; width: 24px; height: 24px; background: var(--sr-accent-blue); color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; z-index: 30; box-shadow: 0 2px 10px rgba(0,0,0,0.5); } /* 底部操作栏 */ #action-bar { position: fixed; bottom: 90px; /* Above Dock */ left: 50%; transform: translateX(-50%) translateY(100px); background: rgba(11, 12, 21, 0.9); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.1); padding: 12px 24px; border-radius: 20px; display: flex; align-items: center; gap: 16px; z-index: 9000; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); opacity: 0; pointer-events: none; box-shadow: 0 10px 40px rgba(0,0,0,0.5); } #action-bar.active { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
SYSTEM INITIALIZING...