This commit is contained in:
@@ -229,3 +229,42 @@ mark { color: #ddecff; background: rgba(121,167,255,.16); border-radius: 3px; pa
|
||||
.answer-head, .source-line, .article-foot { align-items: flex-start; flex-direction: column; }
|
||||
.article-foot { gap: 4px; }
|
||||
}
|
||||
|
||||
/* Optional Ollama fallback / staging viewer */
|
||||
.ai-fallback {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0 0 16px;
|
||||
padding: 22px;
|
||||
border: 1px solid rgba(121,167,255,.27);
|
||||
border-radius: var(--radius);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(121,167,255,.10), rgba(143,124,255,.055) 48%, rgba(13,23,41,.86)),
|
||||
rgba(13,23,41,.9);
|
||||
box-shadow: 0 16px 50px rgba(0,0,0,.14), inset 0 1px rgba(255,255,255,.035);
|
||||
}
|
||||
.ai-fallback.ai-success { border-color: rgba(100,217,173,.30); background: linear-gradient(135deg, rgba(100,217,173,.08), rgba(121,167,255,.045), rgba(13,23,41,.9)); }
|
||||
.ai-fallback.ai-error { border-color: rgba(255,132,144,.28); background: linear-gradient(135deg, rgba(255,132,144,.07), rgba(13,23,41,.9)); }
|
||||
.ai-glow { position: absolute; width: 240px; height: 240px; border-radius: 50%; right: -100px; top: -150px; background: radial-gradient(circle, rgba(121,167,255,.2), transparent 67%); pointer-events: none; }
|
||||
.ai-head { position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 13px; align-items: center; }
|
||||
.ai-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; border: 1px solid rgba(121,167,255,.32); background: linear-gradient(135deg, rgba(121,167,255,.2), rgba(143,124,255,.16)); color: #d9e6ff; font-size: 11px; font-weight: 850; letter-spacing: .08em; }
|
||||
.ai-head h2 { margin: 5px 0 0; font-size: 16px; letter-spacing: -.015em; }
|
||||
.ai-timer { color: #8da8d4; font: 650 10px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 6px 8px; border-radius: 999px; border: 1px solid var(--line); background: rgba(4,10,20,.25); white-space: nowrap; }
|
||||
.ai-fallback > p { position: relative; margin: 15px 0 14px 55px; color: #a9bad2; font-size: 12px; line-height: 1.65; max-width: 760px; }
|
||||
.ai-progress { position: relative; height: 3px; margin: 0 0 17px 55px; border-radius: 999px; background: rgba(121,167,255,.09); overflow: hidden; }
|
||||
.ai-progress span { position: absolute; inset: 0 auto 0 -38%; width: 38%; border-radius: inherit; background: linear-gradient(90deg, transparent, #79a7ff, #8f7cff, transparent); animation: ai-sweep 1.65s infinite ease-in-out; }
|
||||
@keyframes ai-sweep { 0% { transform: translateX(0); } 100% { transform: translateX(365%); } }
|
||||
.ai-actions { position: relative; margin-left: 55px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
|
||||
.ai-actions > span { color: var(--faint); font-size: 10px; line-height: 1.5; }
|
||||
.ai-actions button { flex: 0 0 auto; }
|
||||
.article-eyebrow-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
|
||||
.staging-badge { color: #ffd99a; border: 1px solid rgba(255,197,100,.24); background: rgba(255,197,100,.07); border-radius: 999px; padding: 4px 7px; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.ai-fallback { padding: 18px; }
|
||||
.ai-head { grid-template-columns: 38px minmax(0,1fr); }
|
||||
.ai-mark { width: 38px; height: 38px; }
|
||||
.ai-timer { grid-column: 2; justify-self: start; }
|
||||
.ai-fallback > p, .ai-progress, .ai-actions { margin-left: 0; }
|
||||
.ai-actions { align-items: flex-start; flex-direction: column; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user