95 lines
6.9 KiB
CSS
95 lines
6.9 KiB
CSS
.vsw-card {
|
|
background: #ffffff;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 16px;
|
|
padding: 28px 28px 24px;
|
|
width: 100%;
|
|
max-width: 480px;
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
|
|
font-family: inherit;
|
|
color: #1e293b;
|
|
}
|
|
|
|
.vsw-header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
|
|
.vsw-logo { width: 36px; height: 36px; border-radius: 8px; background: linear-gradient(135deg,#3b82f6,#2563eb); display: flex; align-items: center; justify-content: center; font-size: 16px; }
|
|
.vsw-brand { font-weight: 700; font-size: 15px; letter-spacing: 0.03em; color: #1e293b; }
|
|
.vsw-brand span { color: #2563eb; }
|
|
.vsw-selected-badge { margin-left: auto; background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 100px; }
|
|
|
|
.vsw-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; color: #1e293b; }
|
|
.vsw-subtitle { font-size: 13px; color: #64748b; margin-bottom: 16px; }
|
|
|
|
.vsw-wo-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
|
|
.vsw-wo-tag { background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 6px; }
|
|
.vsw-wo-tag--more { background: #f1f5f9; border-color: #e2e8f0; color: #64748b; }
|
|
|
|
.vsw-status-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
|
|
.vsw-pill { display: flex; align-items: center; gap: 6px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 100px; padding: 6px 14px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s; color: #64748b; user-select: none; }
|
|
.vsw-pill:hover { border-color: #3b82f6; color: #1e293b; background: #eff6ff; }
|
|
.vsw-pill--active { color: #1e293b; }
|
|
.vsw-pill--completed { border-color: #22c55e; background: #f0fdf4; color: #15803d; }
|
|
.vsw-pill--in-progress { border-color: #f59e0b; background: #fffbeb; color: #b45309; }
|
|
.vsw-pill--not-started { border-color: #ef4444; background: #fef2f2; color: #dc2626; }
|
|
|
|
.vsw-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
|
|
.vsw-dot--completed { background: #22c55e; }
|
|
.vsw-dot--in-progress { background: #f59e0b; }
|
|
.vsw-dot--not-started { background: #ef4444; }
|
|
|
|
.vsw-action-area { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 20px; min-height: 80px; justify-content: center; }
|
|
|
|
.vsw-start-btn { width: 100%; padding: 14px; border-radius: 12px; border: none; background: linear-gradient(135deg,#3b82f6,#2563eb); color: #fff; font-size: 16px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.2s; }
|
|
.vsw-start-btn:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); }
|
|
.vsw-start-btn:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
|
|
.vsw-status-message { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; padding: 16px 20px; border-radius: 10px; width: 100%; }
|
|
.vsw-status-message--speaking { flex-direction: column; background: #eff6ff; border: 1px solid #bfdbfe; color: #2563eb; gap: 8px; }
|
|
.vsw-status-message--detected { background: #f0fdf4; border: 1px solid #bbf7d0; color: #16a34a; font-size: 16px; }
|
|
|
|
.vsw-speaking-icon { font-size: 28px; animation: vsw-bounce 0.6s ease-in-out infinite alternate; }
|
|
.vsw-speaking-text { font-size: 14px; font-weight: 600; color: #2563eb; }
|
|
.vsw-speaking-dots { display: flex; gap: 4px; }
|
|
.vsw-speaking-dots span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #3b82f6; animation: vsw-dot 1.2s ease-in-out infinite; }
|
|
.vsw-speaking-dots span:nth-child(2) { animation-delay: 0.2s; }
|
|
.vsw-speaking-dots span:nth-child(3) { animation-delay: 0.4s; }
|
|
|
|
.vsw-speak-btn { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid #bfdbfe; background: #eff6ff; color: #1d4ed8; font-family: inherit; cursor: pointer; display: flex; align-items: center; gap: 12px; transition: all 0.2s; animation: vsw-pulse 1.8s ease-in-out infinite; }
|
|
.vsw-speak-btn:hover { background: #dbeafe; transform: translateY(-1px); }
|
|
.vsw-speak-btn-icon { width: 40px; height: 40px; border-radius: 50%; background: #2563eb; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
|
|
.vsw-speak-btn-title { display: block; font-size: 15px; font-weight: 600; color: #1d4ed8; }
|
|
.vsw-speak-btn-hint { display: block; font-size: 11px; color: #3b82f6; margin-top: 2px; }
|
|
|
|
.vsw-listening-area { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
|
|
.vsw-mic-active { font-size: 36px; animation: vsw-bounce 1s ease-in-out infinite; }
|
|
.vsw-waveform { display: flex; align-items: center; gap: 3px; height: 24px; opacity: 0; transition: opacity 0.3s; }
|
|
.vsw-waveform--active { opacity: 1; }
|
|
.vsw-bar { width: 3px; border-radius: 2px; background: linear-gradient(to top,#3b82f6,#60a5fa); transition: height 0.08s ease; }
|
|
.vsw-mic-label { font-size: 13px; color: #64748b; font-weight: 500; }
|
|
.vsw-mic-label--listening { color: #ef4444; font-weight: 600; animation: vsw-fade 1s ease-in-out infinite; }
|
|
|
|
.vsw-transcript { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 16px; font-size: 14px; color: #94a3b8; font-style: italic; margin-bottom: 14px; line-height: 1.6; }
|
|
.vsw-transcript--filled { color: #1e293b; font-style: normal; border-color: #3b82f6; background: #eff6ff; }
|
|
|
|
.vsw-result { border-radius: 10px; padding: 12px 16px; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; margin-bottom: 14px; }
|
|
.vsw-result--completed { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
|
|
.vsw-result--in-progress { background: #fffbeb; border: 1px solid #fde68a; color: #b45309; }
|
|
.vsw-result--not-started { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; }
|
|
.vsw-result-icon { font-size: 18px; }
|
|
|
|
.vsw-divider { border: none; border-top: 1px solid #e2e8f0; margin: 14px 0; }
|
|
|
|
.vsw-actions { display: flex; gap: 10px; }
|
|
.vsw-btn { flex: 1; padding: 10px 18px; border-radius: 8px; border: none; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
|
|
.vsw-btn--primary { background: #2563eb; color: #fff; }
|
|
.vsw-btn--primary:hover:not(:disabled) { background: #1d4ed8; transform: translateY(-1px); }
|
|
.vsw-btn--primary:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
.vsw-btn--confirmed { background: #16a34a !important; }
|
|
.vsw-btn--ghost { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
|
|
.vsw-btn--ghost:hover { background: #e2e8f0; color: #1e293b; }
|
|
|
|
@keyframes vsw-bounce { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }
|
|
@keyframes vsw-dot { 0%,80%,100%{transform:translateY(0);opacity:0.4} 40%{transform:translateY(-5px);opacity:1} }
|
|
@keyframes vsw-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,0.3)} 50%{box-shadow:0 0 0 8px rgba(59,130,246,0)} }
|
|
@keyframes vsw-fade { 0%,100%{opacity:1} 50%{opacity:0.5} }
|
|
|
|
.vsw-status-message--notunderstood { background: #fffbeb; border: 1px solid #fde68a; color: #b45309; font-size: 13px; } |