fix(frontend): expand empty-state watermark to full cell and tint monochrome project icons by project color — #351 (QA verte)
Cause: the empty-state watermark filled only 92% of a centered box and kept residual palette colors from host emoji fonts, non-compliant with the monochrome-first project icon rule (#351 user capture). Fix: illustration spans the cell with 6px/4px insets and an unclipped glyph at min(88cqw, 88cqh); emoji painted as monochrome silhouettes via transparent fill + zero-offset text-shadow tint (--project-illustration-tint) derived from accessibleProjectAccent when a project color exists, neutral muted fallback otherwise; empty label anchored bottom-center and hidden first on constrained containers (@container 280px width / 240px height); overlay priorities, composer and z-layering untouched. QA verte reconfirmée par Git: npm test -- CustomAgentChatView.test.tsx 80/80, git diff --check; QA: ProjectSettingsPanel 12/12, typecheck, build OK (warning Vite chunk >500 kB préexistant). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@ -103,6 +103,51 @@
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.custom-agent-chat-view {
|
||||
container-type: size;
|
||||
}
|
||||
|
||||
.project-cell-illustration {
|
||||
inset: 6px 4px;
|
||||
color: transparent;
|
||||
opacity: 0.045;
|
||||
}
|
||||
|
||||
.project-cell-illustration[data-color-mode="project"] {
|
||||
opacity: 0.065;
|
||||
}
|
||||
|
||||
/* Emoji fonts may ignore the text-variation selector and retain their own
|
||||
palette. Painting a zero-offset text shadow through the glyph alpha mask
|
||||
guarantees one semantic project tint without depending on the host font. */
|
||||
.project-cell-illustration__glyph {
|
||||
color: transparent;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-shadow: 0 0 0 var(--project-illustration-tint, var(--color-muted));
|
||||
}
|
||||
|
||||
.project-cell-empty-label {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: min(34rem, 88%);
|
||||
margin: auto auto 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Preserve the illustration when a split cell becomes constrained; the
|
||||
explanatory copy is the first element to yield. */
|
||||
@container (max-width: 280px) {
|
||||
.project-cell-empty-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@container (max-height: 240px) {
|
||||
.project-cell-empty-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.stopped-agent-cell {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
Reference in New Issue
Block a user