/* UUID 生成器 — 仅工具特有样式 (基础样式见 yst-theme.css) */ /* UUID 主卡 */
.uuid-card .uuid-header { display: flex; align-items: center; justify-content: space-between; gap: var(--yst-space-3); flex-wrap: wrap; margin-bottom: var(--yst-space-4);
}
.uuid-card .uuid-actions { display: flex; gap: var(--yst-space-2); } .uuid-content { background: var(--yst-bg-input); border: 2px dashed var(--yst-border-strong); border-radius: var(--yst-radius-md); padding: var(--yst-space-6); margin-bottom: var(--yst-space-4); text-align: center; transition: all var(--yst-dur) var(--yst-ease);
}
.uuid-content:hover { border-color: var(--yst-brand); background: var(--yst-brand-soft); } .uuid-value { font-family: 'JetBrains Mono', var(--yst-font-mono); font-size: clamp(15px, 2.4vw, 22px); font-weight: 500; color: var(--yst-text); word-break: break-all; margin-bottom: var(--yst-space-3); cursor: pointer; user-select: all; padding: var(--yst-space-2) var(--yst-space-3); border-radius: var(--yst-radius); transition: background var(--yst-dur) var(--yst-ease);
}
.uuid-value:hover { background: var(--yst-bg-hover); }
.uuid-value:focus-visible { outline: 2px solid var(--yst-brand); outline-offset: 2px; }
.uuid-value.loading { color: var(--yst-text-muted); animation: pulse 1.4s ease-in-out infinite; }
.uuid-value.fade-in { animation: ystFadeIn 400ms var(--yst-ease); }
.uuid-value.pulse { animation: ystPulse 350ms var(--yst-ease); }
@keyframes pulse { 50% { opacity: 0.5; } }
@keyframes ystFadeIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes ystPulse { 0% { transform: scale(1); } 50% { transform: scale(1.01); background: var(--yst-success-bg); } 100% { transform: scale(1); } } .uuid-info { display: flex; align-items: center; justify-content: center; gap: var(--yst-space-3); flex-wrap: wrap; font-size: 13px;
} .uuid-controls { display: flex; gap: var(--yst-space-3); flex-wrap: wrap;
}
.uuid-controls .yst-btn { flex: 1; min-width: 180px; } /* 批量生成 */
.batch-section .batch-input-row { display: flex; gap: var(--yst-space-2); align-items: stretch; max-width: 400px;
}
.batch-section .batch-input-row .yst-input { max-width: 140px; } .batch-results { margin-top: var(--yst-space-5); } .loading-indicator { text-align: center; padding: var(--yst-space-6); color: var(--yst-text-muted); font-size: 14px;
} .batch-progress { background: var(--yst-bg-subtle); border-radius: var(--yst-radius); padding: var(--yst-space-4); text-align: center;
}
.progress-bar { height: 8px; background: var(--yst-bg); border-radius: 999px; overflow: hidden; margin-bottom: var(--yst-space-2);
}
.progress-fill { height: 100%; background: var(--yst-brand); border-radius: 4px; transition: width 200ms var(--yst-ease);
}
.progress-text { font-size: 13px; color: var(--yst-text-muted); } .batch-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--yst-space-3); margin-bottom: var(--yst-space-4);
}
.batch-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--yst-text); }
.batch-actions { display: flex; gap: var(--yst-space-2); }
.batch-actions .btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font: 500 13px/1 var(--yst-font); border: 1px solid var(--yst-border); border-radius: var(--yst-radius); background: var(--yst-bg-card); color: var(--yst-text-2); cursor: pointer; transition: all var(--yst-dur) var(--yst-ease);
}
.batch-actions .btn:hover { border-color: var(--yst-brand); color: var(--yst-brand); }
.batch-actions .btn i { font-style: normal; }
.batch-actions .btn .fa-copy::before { content: "📋"; }
.batch-actions .btn .fa-download::before { content: "⬇️"; } /* UUID 列表项 */
.uuid-list { display: flex; flex-direction: column; gap: 6px; }
.uuid-item { display: flex; align-items: center; gap: var(--yst-space-3); padding: 10px var(--yst-space-3); background: var(--yst-bg-subtle); border: 1px solid var(--yst-border); border-radius: var(--yst-radius); transition: all var(--yst-dur) var(--yst-ease);
}
.uuid-item:hover { background: var(--yst-bg-hover); border-color: var(--yst-brand); }
.uuid-item.fade-in { animation: ystFadeIn 240ms var(--yst-ease) backwards; } .uuid-index { flex-shrink: 0; min-width: 28px; display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 8px; background: var(--yst-brand-soft); color: var(--yst-brand); border-radius: var(--yst-radius-sm); font: 600 12px/1 var(--yst-font); letter-spacing: var(--yst-letter-spacing);
}
.uuid-text { flex: 1; min-width: 0; font: 500 14px/1.4 'JetBrains Mono', var(--yst-font-mono); color: var(--yst-text); word-break: break-all; cursor: pointer; user-select: all;
}
.uuid-text:hover { color: var(--yst-brand); }
.copy-uuid-btn { flex-shrink: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--yst-border); border-radius: var(--yst-radius); background: var(--yst-bg-card); color: var(--yst-text-muted); cursor: pointer; font-size: 14px; transition: all var(--yst-dur) var(--yst-ease);
}
.copy-uuid-btn:hover { border-color: var(--yst-brand); color: var(--yst-brand); }
.copy-uuid-btn .fa-copy::before { content: "📋"; } .error-message { padding: var(--yst-space-4); background: var(--yst-danger-bg); color: var(--yst-danger); border-radius: var(--yst-radius); text-align: center;
} /* 内容卡片 */
.content-section { display: flex; flex-direction: column; gap: var(--yst-space-4); margin-top: var(--yst-space-6); }
.content-card { padding: var(--yst-space-6); }
.content-card .yst-h2 { margin-bottom: var(--yst-space-3); }
.content-card .yst-h3 { margin-top: var(--yst-space-4); padding-left: 10px; border-left: 3px solid var(--yst-brand); line-height: 1.6;
}
.content-card p { color: var(--yst-text-2); line-height: 1.8; margin: 0 0 var(--yst-space-3); }
.content-card ul, .content-card ol { padding-left: var(--yst-space-5); margin: 0 0 var(--yst-space-3); color: var(--yst-text-2); line-height: 1.8; }
.content-card ul li, .content-card ol li { margin-bottom: 6px; }
.content-card strong { color: var(--yst-text); font-weight: 700; }
.content-card code { padding: 2px 6px; background: var(--yst-bg-subtle); color: var(--yst-brand); border-radius: 4px; font-family: 'JetBrains Mono', var(--yst-font-mono); font-size: 0.92em;
}
.code-block { margin: var(--yst-space-3) 0; padding: var(--yst-space-3); background: #fafafa; color: #2c3e50; border: 1px solid var(--yst-border); border-left: 3px solid var(--yst-brand); border-radius: var(--yst-radius); overflow-x: auto; font: 13px/1.7 'JetBrains Mono', var(--yst-font-mono); letter-spacing: 0; white-space: pre; tab-size: 2;
}
.code-block code { background: none; color: inherit; padding: 0; font-size: inherit; } /* 旧通知样式兼容 (隐藏旧通知,改用 YstShell.toast) */
.notification { position: fixed; bottom: 24px; right: 24px; z-index: 9001; padding: 10px 18px; border-radius: var(--yst-radius); background: var(--yst-text); color: var(--yst-bg); box-shadow: var(--yst-shadow-md); transform: translateY(20px); opacity: 0; transition: all 250ms var(--yst-ease); pointer-events: none;
}
.notification.show { transform: translateY(0); opacity: 1; }
.notification.error { background: var(--yst-danger); color: #fff; } /* 移动端响应式 */
@media (max-width: 720px) { .uuid-card .uuid-header { flex-direction: column; align-items: flex-start; } .uuid-controls .yst-btn { min-width: 0; } .batch-section .batch-input-row { flex-direction: column; align-items: stretch; } .batch-section .batch-input-row .yst-input { max-width: none; } .uuid-item { flex-wrap: wrap; }
}