chore: preserve frontend concept lab
This commit is contained in:
hailin
@@ -79,6 +79,197 @@
|
||||
background: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
font-family:
|
||||
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
"Geist Variable", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.concept-shell {
|
||||
--background: 210 29% 98%;
|
||||
--foreground: 222 38% 12%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222 38% 12%;
|
||||
--muted: 210 24% 94%;
|
||||
--muted-foreground: 216 13% 42%;
|
||||
--border: 214 22% 87%;
|
||||
--primary: 216 71% 29%;
|
||||
--primary-foreground: 195 100% 96%;
|
||||
--secondary: 201 38% 92%;
|
||||
--secondary-foreground: 216 65% 24%;
|
||||
--ring: 187 77% 38%;
|
||||
--radius: 0.75rem;
|
||||
background:
|
||||
linear-gradient(hsl(var(--border) / 0.28) 1px, transparent 1px),
|
||||
linear-gradient(90deg, hsl(var(--border) / 0.28) 1px, transparent 1px),
|
||||
hsl(var(--background));
|
||||
background-size: 32px 32px;
|
||||
}
|
||||
|
||||
.concept-title,
|
||||
.concept-score,
|
||||
.concept-stat {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.concept-hero {
|
||||
background:
|
||||
radial-gradient(circle at 86% 18%, hsl(187 77% 48% / 0.28), transparent 26%),
|
||||
linear-gradient(135deg, hsl(var(--primary)), hsl(222 62% 18%));
|
||||
}
|
||||
|
||||
.gallery-shell {
|
||||
--background: 216 28% 97%;
|
||||
--foreground: 222 34% 12%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222 34% 12%;
|
||||
--muted: 216 22% 93%;
|
||||
--muted-foreground: 216 12% 42%;
|
||||
--border: 214 20% 85%;
|
||||
--primary: 216 70% 31%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 202 38% 91%;
|
||||
--secondary-foreground: 216 58% 25%;
|
||||
--ring: 187 72% 38%;
|
||||
background: hsl(var(--background));
|
||||
}
|
||||
|
||||
.gallery-preview-signal { color: hsl(216 70% 31%); background: linear-gradient(145deg, hsl(210 35% 98%), hsl(202 35% 91%)); }
|
||||
.gallery-preview-command { color: hsl(195 90% 72%); background: radial-gradient(circle at 75% 20%, hsl(213 65% 30%), hsl(224 42% 9%) 58%); }
|
||||
.gallery-preview-collaboration { color: hsl(254 42% 42%); background: radial-gradient(circle at 78% 25%, hsl(167 55% 85%), transparent 28%), hsl(231 50% 96%); }
|
||||
|
||||
.command-shell {
|
||||
--background: 224 42% 7%;
|
||||
--foreground: 210 36% 96%;
|
||||
--card: 223 35% 11%;
|
||||
--card-foreground: 210 36% 96%;
|
||||
--muted: 222 28% 16%;
|
||||
--muted-foreground: 215 18% 65%;
|
||||
--border: 218 28% 21%;
|
||||
--primary: 193 84% 58%;
|
||||
--primary-foreground: 224 42% 7%;
|
||||
--secondary: 216 32% 18%;
|
||||
--secondary-foreground: 202 70% 85%;
|
||||
--destructive: 8 86% 62%;
|
||||
--ring: 193 84% 58%;
|
||||
color-scheme: dark;
|
||||
background:
|
||||
linear-gradient(hsl(var(--border) / 0.25) 1px, transparent 1px),
|
||||
linear-gradient(90deg, hsl(var(--border) / 0.25) 1px, transparent 1px),
|
||||
radial-gradient(circle at 50% -20%, hsl(214 76% 22%), hsl(var(--background)) 42%);
|
||||
background-size: 40px 40px, 40px 40px, auto;
|
||||
}
|
||||
|
||||
.command-mark { color: hsl(var(--primary)); background: hsl(var(--primary) / 0.12); box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.3), 0 0 24px hsl(var(--primary) / 0.12); }
|
||||
.command-pulse { box-shadow: 0 0 0 6px hsl(var(--destructive) / 0.12); animation: command-pulse 2s ease-out infinite; }
|
||||
.command-timer { border: 1px solid hsl(var(--destructive) / 0.45); background: conic-gradient(hsl(var(--destructive)) 0 38%, hsl(var(--muted)) 38% 100%); box-shadow: inset 0 0 0 7px hsl(var(--card)); }
|
||||
.command-ai { background: linear-gradient(145deg, hsl(var(--primary) / 0.08), hsl(var(--card)) 60%); }
|
||||
|
||||
.collab-shell {
|
||||
--background: 230 44% 97%;
|
||||
--foreground: 236 30% 16%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 236 30% 16%;
|
||||
--muted: 232 30% 92%;
|
||||
--muted-foreground: 232 13% 43%;
|
||||
--border: 230 24% 87%;
|
||||
--primary: 254 43% 43%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 166 40% 90%;
|
||||
--secondary-foreground: 175 45% 24%;
|
||||
--ring: 254 43% 43%;
|
||||
--radius: 1rem;
|
||||
background: radial-gradient(circle at 82% 4%, hsl(164 57% 87%), transparent 24%), hsl(var(--background));
|
||||
}
|
||||
|
||||
.collab-logo { color: hsl(var(--primary)); background: linear-gradient(145deg, hsl(254 72% 91%), hsl(165 58% 87%)); box-shadow: 0 8px 24px hsl(254 43% 43% / 0.12); }
|
||||
.collab-welcome { background: linear-gradient(120deg, hsl(0 0% 100%), hsl(232 62% 95%)); box-shadow: 0 18px 50px hsl(236 34% 28% / 0.08); }
|
||||
.collab-orbit { background: radial-gradient(circle, transparent 31%, hsl(var(--primary) / 0.1) 32%, transparent 33%, transparent 49%, hsl(var(--primary) / 0.08) 50%, transparent 51%); }
|
||||
.collab-avatar { color: hsl(var(--primary)); background: hsl(var(--primary) / 0.1); }
|
||||
|
||||
@keyframes command-pulse {
|
||||
0% { box-shadow: 0 0 0 0 hsl(var(--destructive) / 0.3); }
|
||||
70%, 100% { box-shadow: 0 0 0 8px hsl(var(--destructive) / 0); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.command-pulse { animation: none; }
|
||||
}
|
||||
|
||||
.support-gallery,
|
||||
.support-desk {
|
||||
--background: 214 28% 97%; --foreground: 222 32% 13%; --card: 0 0% 100%; --card-foreground: 222 32% 13%;
|
||||
--muted: 214 24% 93%; --muted-foreground: 215 13% 41%; --border: 214 20% 85%; --primary: 215 67% 34%;
|
||||
--primary-foreground: 0 0% 100%; --secondary: 204 42% 91%; --secondary-foreground: 215 55% 25%; --ring: 190 66% 38%;
|
||||
background: hsl(var(--background));
|
||||
}
|
||||
.support-preview-support { color: hsl(215 67% 34%); background: linear-gradient(145deg,hsl(211 45% 96%),hsl(201 42% 89%)); }
|
||||
.support-preview-case { color: hsl(174 52% 29%); background: linear-gradient(145deg,hsl(170 38% 95%),hsl(188 42% 88%)); }
|
||||
.support-preview-knowledge { color: hsl(252 48% 43%); background: linear-gradient(145deg,hsl(246 52% 96%),hsl(258 45% 90%)); }
|
||||
.support-focus-card { color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); background: linear-gradient(135deg,hsl(var(--primary)),hsl(207 65% 27%)); }
|
||||
.support-focus-card .text-muted-foreground { color: hsl(var(--primary-foreground) / .72); }
|
||||
.support-desk svg, .customer-case svg, .knowledge-assist svg { display: inline-block; vertical-align: -0.15em; }
|
||||
|
||||
.customer-case {
|
||||
--background: 172 25% 97%; --foreground: 191 28% 13%; --card: 0 0% 100%; --card-foreground: 191 28% 13%;
|
||||
--muted: 170 24% 93%; --muted-foreground: 183 12% 39%; --border: 174 19% 84%; --primary: 174 55% 28%;
|
||||
--primary-foreground: 0 0% 100%; --secondary: 169 42% 89%; --secondary-foreground: 174 48% 22%; --ring: 174 55% 35%;
|
||||
background: radial-gradient(circle at 100% 0,hsl(169 48% 88%),transparent 26%),hsl(var(--background));
|
||||
}
|
||||
.case-selected { background: hsl(var(--primary) / .08); box-shadow: inset 3px 0 hsl(var(--primary)); }
|
||||
.case-message { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: .75rem; }
|
||||
.case-avatar { display: flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: 999px; color: hsl(var(--primary)); background: hsl(var(--secondary)); }
|
||||
.case-avatar-system { color: hsl(var(--primary-foreground)); background: hsl(var(--primary)); }
|
||||
|
||||
.knowledge-assist {
|
||||
--background: 245 32% 97%; --foreground: 243 28% 14%; --card: 0 0% 100%; --card-foreground: 243 28% 14%;
|
||||
--muted: 244 28% 93%; --muted-foreground: 244 12% 42%; --border: 244 20% 86%; --primary: 252 48% 43%;
|
||||
--primary-foreground: 0 0% 100%; --secondary: 250 42% 91%; --secondary-foreground: 252 42% 30%; --ring: 252 48% 43%;
|
||||
background: radial-gradient(circle at 50% -12%,hsl(252 60% 89%),transparent 30%),hsl(var(--background));
|
||||
}
|
||||
.knowledge-query { border-color: hsl(var(--primary) / .22); background: linear-gradient(120deg,hsl(var(--primary) / .08),hsl(var(--card))); }
|
||||
.knowledge-answer { border-color: hsl(var(--primary) / .24); box-shadow: 0 18px 55px hsl(var(--primary) / .08); }
|
||||
|
||||
.ticket-screen {
|
||||
--background: 214 30% 97%; --foreground: 222 32% 13%; --card: 0 0% 100%; --card-foreground: 222 32% 13%;
|
||||
--muted: 214 23% 93%; --muted-foreground: 215 13% 40%; --border: 214 20% 85%; --primary: 215 67% 34%;
|
||||
--primary-foreground: 0 0% 100%; --secondary: 202 42% 91%; --secondary-foreground: 215 54% 24%; --ring: 190 66% 38%;
|
||||
background: radial-gradient(circle at 90% 0,hsl(201 48% 90%),transparent 24%),hsl(var(--background));
|
||||
}
|
||||
.ticket-step { display:flex; align-items:center; gap:.75rem; border-radius:.5rem; padding:.65rem; }
|
||||
.ticket-step-active { color:hsl(var(--primary)); background:hsl(var(--primary) / .08); }
|
||||
.ticket-step-icon { display:flex; width:1.75rem; height:1.75rem; align-items:center; justify-content:center; border-radius:999px; color:hsl(var(--muted-foreground)); background:hsl(var(--muted)); }
|
||||
.ticket-step-active .ticket-step-icon { color:hsl(var(--primary-foreground)); background:hsl(var(--primary)); }
|
||||
.ticket-section-no { display:inline-flex; width:1.75rem; height:1.75rem; align-items:center; justify-content:center; border-radius:.4rem; color:hsl(var(--primary)); background:hsl(var(--primary) / .1); font-size:.65rem; letter-spacing:.04em; }
|
||||
.ticket-current-section { border-color:hsl(var(--primary) / .3); box-shadow:0 12px 36px hsl(var(--primary) / .06); }
|
||||
.ticket-upload:hover { color:hsl(var(--primary)); border-color:hsl(var(--primary) / .5); background:hsl(var(--primary) / .03); }
|
||||
.ticket-summary-card { border-color:hsl(var(--primary) / .2); background:linear-gradient(145deg,hsl(var(--primary) / .08),hsl(var(--card))); }
|
||||
.ticket-status-dot { display:flex; width:1.75rem; height:1.75rem; flex:none; align-items:center; justify-content:center; border-radius:999px; color:hsl(var(--muted-foreground)); background:hsl(var(--muted)); font-size:.7rem; }
|
||||
.ticket-status-done { color:hsl(var(--primary-foreground)); background:hsl(var(--primary)); }
|
||||
.ticket-result { background:linear-gradient(120deg,hsl(var(--primary) / .07),hsl(var(--card))); }
|
||||
.ticket-timeline { position:relative; display:flex; flex-direction:column; gap:1.5rem; }
|
||||
.ticket-timeline::before { position:absolute; bottom:1rem; left:1rem; top:1rem; width:1px; content:""; background:hsl(var(--border)); }
|
||||
.ticket-event { position:relative; display:grid; grid-template-columns:2rem minmax(0,1fr); gap:.875rem; }
|
||||
.ticket-event-icon { display:flex; width:2rem; height:2rem; align-items:center; justify-content:center; border-radius:999px; color:hsl(var(--primary)); background:hsl(var(--secondary)); box-shadow:0 0 0 4px hsl(var(--card)); }
|
||||
.ticket-reply-card { border-color:hsl(var(--primary) / .25); background:hsl(var(--primary) / .035); }
|
||||
.ticket-solution-card { border-color:hsl(var(--primary) / .22); box-shadow:0 14px 42px hsl(var(--primary) / .07); }
|
||||
|
||||
.component-lab { transition: background-color .28s ease, color .28s ease; }
|
||||
.component-lab[data-style="precision"] { --background:214 28% 97%;--foreground:218 35% 16%;--card:0 0% 100%;--card-foreground:218 35% 16%;--muted:210 26% 92%;--muted-foreground:214 13% 39%;--border:212 20% 82%;--primary:210 68% 29%;--primary-foreground:0 0% 100%;--secondary:201 39% 90%;--secondary-foreground:210 52% 24%;--ring:190 65% 36%;--radius:.4rem;background:hsl(var(--background)); }
|
||||
.component-lab[data-style="care"] { --background:250 30% 97%;--foreground:254 18% 18%;--card:0 0% 100%;--card-foreground:254 18% 18%;--muted:250 26% 93%;--muted-foreground:254 10% 42%;--border:251 20% 86%;--primary:256 35% 48%;--primary-foreground:0 0% 100%;--secondary:157 37% 90%;--secondary-foreground:164 35% 24%;--ring:256 35% 48%;--radius:1rem;background:radial-gradient(circle at 90% 0,hsl(158 47% 88%),transparent 27%),hsl(var(--background)); }
|
||||
.component-lab[data-style="graphite"] { --background:222 30% 8%;--foreground:218 38% 96%;--card:222 26% 12%;--card-foreground:218 38% 96%;--muted:220 21% 18%;--muted-foreground:217 16% 68%;--border:219 20% 24%;--primary:221 100% 59%;--primary-foreground:0 0% 100%;--secondary:218 28% 20%;--secondary-foreground:216 34% 88%;--ring:221 100% 65%;--destructive:8 78% 59%;--radius:.55rem;color-scheme:dark;background:radial-gradient(circle at 50% -20%,hsl(221 55% 22%),transparent 42%),hsl(var(--background)); }
|
||||
.component-lab[data-style="crystal"] { --background:222 60% 96%;--foreground:225 36% 20%;--card:0 0% 100%;--card-foreground:225 36% 20%;--muted:219 42% 91%;--muted-foreground:224 14% 42%;--border:216 34% 82%;--primary:235 61% 56%;--primary-foreground:0 0% 100%;--secondary:190 54% 88%;--secondary-foreground:202 50% 24%;--ring:235 61% 56%;--radius:.9rem;background:radial-gradient(circle at 15% 0,hsl(190 65% 84%),transparent 28%),radial-gradient(circle at 92% 15%,hsl(246 65% 88%),transparent 30%),hsl(var(--background)); }
|
||||
.style-choice { width:100%; border:1px solid hsl(var(--border)); border-radius:calc(var(--radius) + .25rem); background:hsl(var(--card)); padding:1rem; color:hsl(var(--foreground)); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
|
||||
.style-choice:hover { transform:translateY(-2px); border-color:hsl(var(--primary) / .4); }
|
||||
.style-choice-active { border-color:hsl(var(--primary)); box-shadow:0 10px 28px hsl(var(--primary) / .12); }
|
||||
.style-hero { background:linear-gradient(130deg,hsl(var(--primary) / .1),hsl(var(--card)) 62%); }
|
||||
.style-avatar { display:flex; width:2rem;height:2rem;align-items:center;justify-content:center;border-radius:calc(var(--radius) + .15rem);color:hsl(var(--primary));background:hsl(var(--secondary)); }
|
||||
.style-ticket-row { transition:background-color .18s ease; }
|
||||
.style-ticket-row:hover { background:hsl(var(--muted) / .65); }
|
||||
.style-stat { display:flex;flex-direction:column;gap:.35rem;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--muted) / .55);padding:1rem;color:hsl(var(--muted-foreground));font-size:.75rem; }
|
||||
.style-stat strong { color:hsl(var(--foreground));font-size:1.75rem;line-height:1; }
|
||||
.component-lab[data-style="precision"] [data-slot="card"] { box-shadow:0 2px 8px hsl(215 35% 20% / .05); }
|
||||
.component-lab[data-style="care"] [data-slot="card"] { border-color:hsl(var(--border) / .7);box-shadow:0 14px 38px hsl(256 28% 32% / .08); }
|
||||
.component-lab[data-style="care"] [data-slot="button"] { border-radius:999px; }
|
||||
.component-lab[data-style="graphite"] [data-slot="card"] { box-shadow:inset 0 1px hsl(0 0% 100% / .04),0 18px 45px hsl(222 45% 3% / .3); }
|
||||
.component-lab[data-style="crystal"] [data-slot="card"],.component-lab[data-style="crystal"] .style-hero { border-color:hsl(0 0% 100% / .7);background:hsl(var(--card) / .72);box-shadow:0 18px 50px hsl(225 45% 32% / .1);backdrop-filter:blur(18px); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user