mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 22:21:10 +02:00
refactor(mana/web): migrate foundation shells + workbench scenes to theme tokens (P5)
Sweep across the workbench-foundation components that wrap or chrome
every app surface in mana-web. All :global(.dark) duplicates removed
(theme system handles light/dark via .dark class on <html>) and the
hand-rolled #374151/#9ca3af palette + indigo/violet brand accents
replaced with hsl(var(--color-X)).
Files migrated:
- DetailViewShell — the inline-edit detail card my P2 introduced.
Had compound :global(.dark .detail-view .X) selectors duplicating
every input/border for dark mode. Now single source.
- PickerOverlay — the workbench app picker / page picker.
- page-carousel/PageCarousel — drop-target hover (was hardcoded violet)
becomes color-primary.
- workbench/AppPage — drop-target hover (was hardcoded green) becomes
color-success.
- workbench/scenes/{ConfirmDialog,SceneRenameDialog,SceneTabs} —
modal overlays. The black-50% backdrop stays literal (hsl(0 0% 0% / 0.5))
since it's a deliberate semi-transparent overlay, not theme-aware.
The .danger button background switches from #dc2626 to color-error.
- voice/VoiceCaptureBar — primary indigo accent + red error state
both follow theme tokens now.
- links/LinkedItems — text + border tokens.
These are foundational — every app rendered in the workbench inherits
its chrome and detail view from these files, so any visual tweak now
propagates everywhere consistently.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS
parent
b2bc28d582
commit
237516749a
9 changed files with 122 additions and 333 deletions
|
|
@ -91,7 +91,7 @@
|
|||
padding: 2rem 0;
|
||||
text-align: center;
|
||||
font-size: 0.8125rem;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
/* Title input — used by consumer body via :global */
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
padding: 0.125rem 0;
|
||||
border-radius: 0.25rem;
|
||||
transition: border-color 0.15s;
|
||||
|
|
@ -109,16 +109,8 @@
|
|||
}
|
||||
:global(.detail-view .title-input:hover),
|
||||
:global(.detail-view .title-input:focus) {
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
border-color: hsl(var(--color-border));
|
||||
}
|
||||
:global(.dark .detail-view .title-input) {
|
||||
color: #f3f4f6;
|
||||
}
|
||||
:global(.dark .detail-view .title-input:hover),
|
||||
:global(.dark .detail-view .title-input:focus) {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
:global(.detail-view .title-row) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -143,11 +135,11 @@
|
|||
}
|
||||
:global(.detail-view .prop-label) {
|
||||
font-size: 0.75rem;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
:global(.detail-view .prop-value) {
|
||||
font-size: 0.8125rem;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
max-width: 60%;
|
||||
text-align: right;
|
||||
overflow: hidden;
|
||||
|
|
@ -158,17 +150,13 @@
|
|||
font-family: monospace;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
:global(.dark .detail-view .prop-value) {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
:global(.detail-view .prop-input) {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
max-width: 60%;
|
||||
text-align: right;
|
||||
font-size: 0.8125rem;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
outline: none;
|
||||
|
|
@ -178,23 +166,15 @@
|
|||
}
|
||||
:global(.detail-view .prop-input:hover),
|
||||
:global(.detail-view .prop-input:focus) {
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
border-color: hsl(var(--color-border));
|
||||
}
|
||||
:global(.dark .detail-view .prop-input) {
|
||||
color: #f3f4f6;
|
||||
}
|
||||
:global(.dark .detail-view .prop-input:hover),
|
||||
:global(.dark .detail-view .prop-input:focus) {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
:global(.detail-view .prop-select) {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
max-width: 60%;
|
||||
text-align: right;
|
||||
font-size: 0.8125rem;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
outline: none;
|
||||
|
|
@ -204,16 +184,8 @@
|
|||
}
|
||||
:global(.detail-view .prop-select:hover),
|
||||
:global(.detail-view .prop-select:focus) {
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
border-color: hsl(var(--color-border));
|
||||
}
|
||||
:global(.dark .detail-view .prop-select) {
|
||||
color: #f3f4f6;
|
||||
}
|
||||
:global(.dark .detail-view .prop-select:hover),
|
||||
:global(.dark .detail-view .prop-select:focus) {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
:global(.detail-view .color-input) {
|
||||
width: 28px;
|
||||
height: 24px;
|
||||
|
|
@ -223,45 +195,36 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
:global(.detail-view .color-input:hover) {
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
border-color: hsl(var(--color-border));
|
||||
}
|
||||
:global(.dark .detail-view .color-input:hover) {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
:global(.detail-view .toggle-btn) {
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
:global(.detail-view .toggle-btn.active) {
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
color: #6366f1;
|
||||
border-color: rgba(99, 102, 241, 0.3);
|
||||
background: hsl(var(--color-primary) / 0.1);
|
||||
color: hsl(var(--color-primary));
|
||||
border-color: hsl(var(--color-primary) / 0.3);
|
||||
}
|
||||
:global(.dark .detail-view .toggle-btn) {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
:global(.detail-view .fav-btn) {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
padding: 0.125rem;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
:global(.detail-view .fav-btn:hover),
|
||||
:global(.detail-view .fav-btn.active) {
|
||||
color: #ef4444;
|
||||
color: hsl(var(--color-error));
|
||||
}
|
||||
|
||||
/* Sections (description, etc.) */
|
||||
|
|
@ -275,14 +238,14 @@
|
|||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
:global(.detail-view .description-input) {
|
||||
width: 100%;
|
||||
font-size: 0.8125rem;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
background: transparent;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
outline: none;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.375rem;
|
||||
|
|
@ -291,37 +254,25 @@
|
|||
transition: border-color 0.15s;
|
||||
}
|
||||
:global(.detail-view .description-input:focus) {
|
||||
border-color: rgba(0, 0, 0, 0.15);
|
||||
border-color: hsl(var(--color-border-strong));
|
||||
}
|
||||
:global(.dark .detail-view .description-input) {
|
||||
color: #f3f4f6;
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
:global(.dark .detail-view .description-input:focus) {
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
/* Meta footer */
|
||||
:global(.detail-view .meta) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.125rem;
|
||||
font-size: 0.6875rem;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-top: 1px solid hsl(var(--color-border));
|
||||
}
|
||||
:global(.dark .detail-view .meta) {
|
||||
border-color: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
/* Danger zone */
|
||||
.danger-zone {
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
.confirm-text {
|
||||
font-size: 0.8125rem;
|
||||
color: #ef4444;
|
||||
color: hsl(var(--color-error));
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
.confirm-actions {
|
||||
|
|
@ -331,37 +282,29 @@
|
|||
.action-btn {
|
||||
padding: 0.25rem 0.625rem;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
background: transparent;
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.action-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
color: #374151;
|
||||
background: hsl(var(--color-surface-hover));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
.action-btn.danger {
|
||||
background: #ef4444;
|
||||
border-color: #ef4444;
|
||||
background: hsl(var(--color-error));
|
||||
border-color: hsl(var(--color-error));
|
||||
color: white;
|
||||
}
|
||||
.action-btn.danger-subtle {
|
||||
color: #ef4444;
|
||||
color: hsl(var(--color-error));
|
||||
border-color: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
:global(.dark) .action-btn {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
color: #9ca3af;
|
||||
}
|
||||
:global(.dark) .action-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.detail-view {
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
width: min(var(--picker-width), 85vw);
|
||||
min-height: 60vh;
|
||||
max-height: 80vh;
|
||||
background: #fffef5;
|
||||
background: hsl(var(--color-card));
|
||||
border-radius: 0.375rem;
|
||||
box-shadow:
|
||||
0 2px 8px rgba(0, 0, 0, 0.08),
|
||||
|
|
@ -74,12 +74,6 @@
|
|||
flex-direction: column;
|
||||
animation: slideIn 0.25s ease-out;
|
||||
}
|
||||
:global(.dark) .picker {
|
||||
background-color: #252220;
|
||||
box-shadow:
|
||||
0 2px 8px rgba(0, 0, 0, 0.25),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
|
|
@ -101,12 +95,9 @@
|
|||
.picker-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
margin: 0;
|
||||
}
|
||||
:global(.dark) .picker-title {
|
||||
color: #f3f4f6;
|
||||
}
|
||||
.close-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -116,17 +107,13 @@
|
|||
border-radius: 0.375rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.close-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
color: #374151;
|
||||
}
|
||||
:global(.dark) .close-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #f3f4f6;
|
||||
background: hsl(var(--color-muted));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.picker-list {
|
||||
|
|
@ -138,13 +125,9 @@
|
|||
/* Divider between rows — used by both auto-render above and consumer snippets. */
|
||||
:global(.picker .divider) {
|
||||
height: 1px;
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
background: hsl(var(--color-muted));
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
:global(.dark .picker .divider) {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
/* Standard option button — consumers use these classes inside the item snippet. */
|
||||
:global(.picker .picker-option) {
|
||||
display: flex;
|
||||
|
|
@ -160,12 +143,8 @@
|
|||
text-align: left;
|
||||
}
|
||||
:global(.picker .picker-option:hover) {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
background: hsl(var(--color-surface-hover));
|
||||
}
|
||||
:global(.dark .picker .picker-option:hover) {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
:global(.picker .option-icon) {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
|
|
@ -186,25 +165,18 @@
|
|||
:global(.picker .option-title) {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
}
|
||||
:global(.dark .picker .option-title) {
|
||||
color: #f3f4f6;
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
:global(.picker .option-desc) {
|
||||
font-size: 0.75rem;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
:global(.dark .picker .option-desc) {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 2rem 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
.empty-state p {
|
||||
font-size: 0.8125rem;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
.links-list {
|
||||
display: flex;
|
||||
|
|
@ -71,21 +71,14 @@
|
|||
gap: 0.5rem;
|
||||
padding: 0.375rem 0.5rem;
|
||||
border-radius: 0.375rem;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
border: 1px solid rgba(0, 0, 0, 0.04);
|
||||
background: hsl(var(--color-surface-hover));
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.link-item:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
:global(.dark) .link-item {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border-color: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
:global(.dark) .link-item:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
background: hsl(var(--color-surface-hover));
|
||||
}
|
||||
.link-dot {
|
||||
width: 8px;
|
||||
|
|
@ -102,21 +95,18 @@
|
|||
}
|
||||
.link-title {
|
||||
font-size: 0.8125rem;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
:global(.dark) .link-title {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
.link-subtitle {
|
||||
font-size: 0.6875rem;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
.link-app {
|
||||
font-size: 0.625rem;
|
||||
color: #b0afa8;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -194,10 +194,10 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.75rem;
|
||||
border: 2px dashed rgba(0, 0, 0, 0.08);
|
||||
border: 2px dashed hsl(var(--color-border));
|
||||
border-radius: 0.375rem;
|
||||
background: transparent;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
|
@ -212,26 +212,13 @@
|
|||
.add-card.alone {
|
||||
width: 100%;
|
||||
min-height: 60vh;
|
||||
border-color: rgba(0, 0, 0, 0.12);
|
||||
border-color: hsl(var(--color-border-strong));
|
||||
}
|
||||
.add-card:hover {
|
||||
border-color: hsl(var(--color-primary));
|
||||
color: hsl(var(--color-primary));
|
||||
background: color-mix(in srgb, hsl(var(--color-primary)) 4%, transparent);
|
||||
}
|
||||
:global(.dark) .add-card {
|
||||
border-color: rgba(255, 255, 255, 0.06);
|
||||
color: #4b5563;
|
||||
}
|
||||
:global(.dark) .add-card.alone {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
color: #6b7280;
|
||||
}
|
||||
:global(.dark) .add-card:hover {
|
||||
border-color: hsl(var(--color-primary));
|
||||
color: hsl(var(--color-primary));
|
||||
background: color-mix(in srgb, hsl(var(--color-primary)) 8%, transparent);
|
||||
}
|
||||
.add-label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
|
|
@ -249,16 +236,11 @@
|
|||
gap: 0.25rem;
|
||||
padding: 0.375rem 0.5rem;
|
||||
border-radius: 0.75rem;
|
||||
background: #fffef5;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
background: hsl(var(--color-card));
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
animation: slideUp 0.25s ease-out;
|
||||
}
|
||||
:global(.dark) .minimized-tabs {
|
||||
background: #252220;
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
|
|
@ -278,10 +260,7 @@
|
|||
transition: background 0.15s;
|
||||
}
|
||||
.minimized-tab:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
:global(.dark) .minimized-tab:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
background: hsl(var(--color-surface-hover));
|
||||
}
|
||||
.tab-dot {
|
||||
width: 8px;
|
||||
|
|
@ -292,7 +271,7 @@
|
|||
.tab-title {
|
||||
border: none;
|
||||
background: none;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
|
|
@ -305,17 +284,11 @@
|
|||
.tab-title:hover {
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
:global(.dark) .tab-title {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
:global(.dark) .tab-title:hover {
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
.tab-maximize,
|
||||
.tab-close {
|
||||
border: none;
|
||||
background: none;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
cursor: pointer;
|
||||
padding: 0.125rem;
|
||||
border-radius: 0.25rem;
|
||||
|
|
@ -330,16 +303,16 @@
|
|||
}
|
||||
.tab-maximize:hover {
|
||||
color: hsl(var(--color-primary));
|
||||
background: rgba(139, 92, 246, 0.08);
|
||||
background: hsl(var(--color-primary) / 0.08);
|
||||
}
|
||||
.tab-close:hover {
|
||||
color: #ef4444;
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
color: hsl(var(--color-error));
|
||||
background: hsl(var(--color-error) / 0.08);
|
||||
}
|
||||
.tab-add {
|
||||
border: none;
|
||||
background: none;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
|
|
@ -350,6 +323,6 @@
|
|||
}
|
||||
.tab-add:hover {
|
||||
color: hsl(var(--color-primary));
|
||||
background: rgba(139, 92, 246, 0.08);
|
||||
background: hsl(var(--color-primary) / 0.08);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -147,26 +147,26 @@
|
|||
gap: 0.5rem;
|
||||
padding: 0.625rem 0.875rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid rgba(99, 102, 241, 0.2);
|
||||
background: rgba(99, 102, 241, 0.04);
|
||||
color: #6366f1;
|
||||
border: 1px solid hsl(var(--color-primary) / 0.2);
|
||||
background: hsl(var(--color-primary) / 0.04);
|
||||
color: hsl(var(--color-primary));
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.mic-btn:hover:not(:disabled) {
|
||||
background: rgba(99, 102, 241, 0.08);
|
||||
border-color: #6366f1;
|
||||
background: hsl(var(--color-primary) / 0.08);
|
||||
border-color: hsl(var(--color-primary));
|
||||
}
|
||||
.mic-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: wait;
|
||||
}
|
||||
.mic-btn.recording {
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
border-color: rgba(239, 68, 68, 0.4);
|
||||
color: #ef4444;
|
||||
background: hsl(var(--color-error) / 0.08);
|
||||
border-color: hsl(var(--color-error) / 0.4);
|
||||
color: hsl(var(--color-error));
|
||||
animation: rec-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
@keyframes rec-pulse {
|
||||
|
|
@ -197,19 +197,16 @@
|
|||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
background: transparent;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-size: 1.125rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mic-cancel:hover {
|
||||
color: #ef4444;
|
||||
border-color: #ef4444;
|
||||
}
|
||||
:global(.dark) .mic-cancel {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
color: hsl(var(--color-error));
|
||||
border-color: hsl(var(--color-error));
|
||||
}
|
||||
.rec-error {
|
||||
display: flex;
|
||||
|
|
@ -218,31 +215,28 @@
|
|||
padding: 0.625rem 0.75rem;
|
||||
margin-top: 0.5rem;
|
||||
border-radius: 0.375rem;
|
||||
background: rgba(239, 68, 68, 0.06);
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
background: hsl(var(--color-error) / 0.08);
|
||||
border: 1px solid hsl(var(--color-error) / 0.2);
|
||||
}
|
||||
.rec-error p {
|
||||
font-size: 0.6875rem;
|
||||
color: #b91c1c;
|
||||
color: hsl(var(--color-error));
|
||||
margin: 0;
|
||||
white-space: pre-line;
|
||||
line-height: 1.5;
|
||||
}
|
||||
:global(.dark) .rec-error p {
|
||||
color: #fca5a5;
|
||||
}
|
||||
.rec-retry {
|
||||
align-self: flex-start;
|
||||
padding: 0.25rem 0.625rem;
|
||||
border-radius: 0.25rem;
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
border: 1px solid hsl(var(--color-error) / 0.3);
|
||||
background: transparent;
|
||||
color: #ef4444;
|
||||
color: hsl(var(--color-error));
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
.rec-retry:hover {
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
background: hsl(var(--color-error) / 0.08);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -381,12 +381,12 @@
|
|||
position: relative;
|
||||
}
|
||||
:global(.app-page-wrapper.mana-drop-target-hover) :global(.page-shell) {
|
||||
outline: 2px solid rgba(139, 92, 246, 0.5);
|
||||
outline: 2px solid hsl(var(--color-primary) / 0.5);
|
||||
outline-offset: -2px;
|
||||
box-shadow: 0 0 20px rgba(139, 92, 246, 0.15);
|
||||
}
|
||||
:global(.app-page-wrapper.mana-drop-target-success) :global(.page-shell) {
|
||||
outline: 2px solid rgba(34, 197, 94, 0.5);
|
||||
outline: 2px solid hsl(var(--color-success) / 0.5);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
|
|
@ -396,7 +396,7 @@
|
|||
justify-content: center;
|
||||
height: 100%;
|
||||
min-height: 200px;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
.load-state :global(.spinner) {
|
||||
|
|
@ -439,7 +439,7 @@
|
|||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fffef5;
|
||||
background: hsl(var(--color-card));
|
||||
border-radius: 0.5rem;
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.15),
|
||||
|
|
@ -450,12 +450,6 @@
|
|||
.closing .overlay-card {
|
||||
animation: scaleOut 0.15s ease-in forwards;
|
||||
}
|
||||
:global(.dark) .overlay-card {
|
||||
background: #252220;
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.4),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
/* Nav arrows — inside the card, flush with edges */
|
||||
.nav-arrow {
|
||||
|
|
@ -466,25 +460,18 @@
|
|||
flex-shrink: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #b0afa8;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.nav-arrow:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
color: #374151;
|
||||
}
|
||||
:global(.dark) .nav-arrow {
|
||||
color: #4b5563;
|
||||
}
|
||||
:global(.dark) .nav-arrow:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: #f3f4f6;
|
||||
background: hsl(var(--color-surface-hover));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.nav-counter {
|
||||
font-size: 0.6875rem;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
|
|
@ -493,10 +480,7 @@
|
|||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.625rem 1rem;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
:global(.dark) .overlay-header {
|
||||
border-color: rgba(255, 255, 255, 0.06);
|
||||
border-bottom: 1px solid hsl(var(--color-border));
|
||||
}
|
||||
|
||||
.color-dot {
|
||||
|
|
@ -510,10 +494,7 @@
|
|||
flex: 1;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
}
|
||||
:global(.dark) .overlay-title {
|
||||
color: #f3f4f6;
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
|
|
@ -525,17 +506,13 @@
|
|||
border-radius: 0.25rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.back-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
color: #374151;
|
||||
}
|
||||
:global(.dark) .back-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #f3f4f6;
|
||||
background: hsl(var(--color-muted));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
|
|
@ -547,17 +524,13 @@
|
|||
border-radius: 0.25rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.close-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
color: #374151;
|
||||
}
|
||||
:global(.dark) .close-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #f3f4f6;
|
||||
background: hsl(var(--color-muted));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.overlay-body {
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@
|
|||
.cd-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
background: hsl(0 0% 0% / 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
padding: 1rem;
|
||||
}
|
||||
.cd-dialog {
|
||||
background: #fffef5;
|
||||
background: hsl(var(--color-card));
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
|
||||
max-width: 420px;
|
||||
|
|
@ -99,10 +99,6 @@
|
|||
padding: 1.5rem;
|
||||
animation: cd-pop 0.18s ease-out;
|
||||
}
|
||||
:global(.dark) .cd-dialog {
|
||||
background: #252220;
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
@keyframes cd-pop {
|
||||
from {
|
||||
opacity: 0;
|
||||
|
|
@ -116,21 +112,15 @@
|
|||
.cd-title {
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
color: hsl(var(--color-foreground));
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
:global(.dark) .cd-title {
|
||||
color: #f9fafb;
|
||||
}
|
||||
.cd-message {
|
||||
font-size: 0.875rem;
|
||||
color: #4b5563;
|
||||
color: hsl(var(--color-foreground));
|
||||
margin: 0 0 1.25rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
:global(.dark) .cd-message {
|
||||
color: #d1d5db;
|
||||
}
|
||||
.cd-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
|
@ -151,29 +141,23 @@
|
|||
}
|
||||
.cd-btn-cancel {
|
||||
background: transparent;
|
||||
color: #6b7280;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
.cd-btn-cancel:hover:not(:disabled) {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
:global(.dark) .cd-btn-cancel {
|
||||
color: #9ca3af;
|
||||
}
|
||||
:global(.dark) .cd-btn-cancel:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
background: hsl(var(--color-surface-hover));
|
||||
}
|
||||
.cd-btn-primary {
|
||||
background: hsl(var(--color-primary));
|
||||
color: white;
|
||||
color: hsl(var(--color-primary-foreground));
|
||||
}
|
||||
.cd-btn-primary:hover:not(:disabled) {
|
||||
filter: brightness(1.08);
|
||||
}
|
||||
.cd-btn-danger {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
background: hsl(var(--color-error));
|
||||
color: hsl(var(--color-primary-foreground));
|
||||
}
|
||||
.cd-btn-danger:hover:not(:disabled) {
|
||||
background: #dc2626;
|
||||
background: hsl(var(--color-error));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@
|
|||
.srd-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
background: hsl(0 0% 0% / 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -127,7 +127,7 @@
|
|||
padding: 1rem;
|
||||
}
|
||||
.srd-dialog {
|
||||
background: #fffef5;
|
||||
background: hsl(var(--color-card));
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
|
||||
max-width: 420px;
|
||||
|
|
@ -135,10 +135,6 @@
|
|||
padding: 1.5rem;
|
||||
animation: srd-pop 0.18s ease-out;
|
||||
}
|
||||
:global(.dark) .srd-dialog {
|
||||
background: #252220;
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
@keyframes srd-pop {
|
||||
from {
|
||||
opacity: 0;
|
||||
|
|
@ -152,12 +148,9 @@
|
|||
.srd-title {
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
color: hsl(var(--color-foreground));
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
:global(.dark) .srd-title {
|
||||
color: #f9fafb;
|
||||
}
|
||||
.srd-fields {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
|
|
@ -178,29 +171,21 @@
|
|||
.srd-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: #6b7280;
|
||||
}
|
||||
:global(.dark) .srd-label {
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
.srd-input {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
background: white;
|
||||
font-size: 0.875rem;
|
||||
color: #111827;
|
||||
color: hsl(var(--color-foreground));
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.srd-input:focus {
|
||||
border-color: hsl(var(--color-primary));
|
||||
}
|
||||
:global(.dark) .srd-input {
|
||||
background: #1f1c1a;
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
color: #f9fafb;
|
||||
}
|
||||
.srd-icon-input {
|
||||
text-align: center;
|
||||
font-size: 1.25rem;
|
||||
|
|
@ -225,20 +210,14 @@
|
|||
}
|
||||
.srd-btn-cancel {
|
||||
background: transparent;
|
||||
color: #6b7280;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
.srd-btn-cancel:hover:not(:disabled) {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
:global(.dark) .srd-btn-cancel {
|
||||
color: #9ca3af;
|
||||
}
|
||||
:global(.dark) .srd-btn-cancel:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
background: hsl(var(--color-surface-hover));
|
||||
}
|
||||
.srd-btn-primary {
|
||||
background: hsl(var(--color-primary));
|
||||
color: white;
|
||||
color: hsl(var(--color-primary-foreground));
|
||||
}
|
||||
.srd-btn-primary:hover:not(:disabled) {
|
||||
filter: brightness(1.08);
|
||||
|
|
|
|||
|
|
@ -149,14 +149,11 @@
|
|||
scrollbar-width: none;
|
||||
padding: 0.25rem;
|
||||
border-radius: 0.625rem;
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
background: hsl(var(--color-surface-hover));
|
||||
}
|
||||
.scene-tabs-scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
:global(.dark) .scene-tabs-scroll {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.scene-pill {
|
||||
display: inline-flex;
|
||||
|
|
@ -165,7 +162,7 @@
|
|||
flex: 0 0 auto;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #6b7280;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
padding: 0.375rem 0.75rem;
|
||||
|
|
@ -175,29 +172,17 @@
|
|||
max-width: 180px;
|
||||
}
|
||||
.scene-pill:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: #374151;
|
||||
background: hsl(var(--color-surface-hover));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
.scene-pill.active {
|
||||
background: #fffef5;
|
||||
color: #111827;
|
||||
background: hsl(var(--color-card));
|
||||
color: hsl(var(--color-foreground));
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.scene-pill.dragging {
|
||||
opacity: 0.4;
|
||||
}
|
||||
:global(.dark) .scene-pill {
|
||||
color: #9ca3af;
|
||||
}
|
||||
:global(.dark) .scene-pill:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: #f3f4f6;
|
||||
}
|
||||
:global(.dark) .scene-pill.active {
|
||||
background: #2f2b29;
|
||||
color: #f9fafb;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.scene-icon {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1;
|
||||
|
|
@ -215,18 +200,14 @@
|
|||
flex: 0 0 auto;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
padding: 0.375rem;
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.scene-add:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
:global(.dark) .scene-add:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
background: hsl(var(--color-surface-hover));
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue