mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-15 03:01:09 +02:00
refactor(mana/web): migrate module DetailViews + sub-views to theme tokens (P5)
15 files across 11 modules — the consumer-specific style overrides on top of DetailViewShell, plus a few module-internal sub-views and pages (SymbolDetailView, SymbolsView, ContactPage, PageEditBar, TodoPage, CycleCalendar, SymptomManager). All :global(.dark) duplicates removed (theme system handles light/dark via .dark class on <html>) and the hand-rolled #374151/#9ca3af palette + indigo/violet/red/green brand accents replaced with hsl(var(--color-X)). Brand colors that should NOT track theme primary stay literal: - cycles brand pink (#ec4899) — menstrual cycle tracker accent - dreams indigo accents and skilltree violet star colors → color-primary (these were arbitrary indigo brand accents, now they follow the variant) - semantic income/success green → color-success - semantic error/danger red → color-error - favorite/star amber/gold → color-warning Final P5 batch closing out the visual track consolidation. Combined with earlier P5 commits (foundation shells, page-shell, picker, list views), mana-web now has a single coherent theme-token convention across the workbench surface. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS
parent
e52b6e29fe
commit
7b25f3abfb
15 changed files with 176 additions and 471 deletions
|
|
@ -225,7 +225,7 @@
|
|||
.prop-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
flex-shrink: 0;
|
||||
width: 1rem;
|
||||
}
|
||||
|
|
@ -241,7 +241,7 @@
|
|||
gap: 0.25rem;
|
||||
}
|
||||
.time-sep {
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.allday-label {
|
||||
|
|
@ -249,7 +249,7 @@
|
|||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
font-size: 0.75rem;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
cursor: pointer;
|
||||
}
|
||||
:global(.detail-view .prop-input.wide) {
|
||||
|
|
@ -272,7 +272,7 @@
|
|||
background: color-mix(in srgb, var(--tag-color) 12%, transparent);
|
||||
border: none;
|
||||
font-size: 0.6875rem;
|
||||
color: #6b7280;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
|
@ -284,11 +284,8 @@
|
|||
height: 6px;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
:global(.dark) .tag-pill {
|
||||
color: #9ca3af;
|
||||
}
|
||||
.recurrence {
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -371,16 +371,11 @@
|
|||
.contact-count {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: #9ca3af;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
background: hsl(var(--color-surface-hover));
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
:global(.dark) .contact-count {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
|
@ -392,7 +387,7 @@
|
|||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
min-height: 200px;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
|
|
@ -404,17 +399,13 @@
|
|||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
padding: 0.25rem 0.5rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #fffef5;
|
||||
background: hsl(var(--color-card));
|
||||
z-index: 1;
|
||||
}
|
||||
:global(.dark) .letter-header {
|
||||
background: #252220;
|
||||
}
|
||||
|
||||
.contact-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -425,12 +416,8 @@
|
|||
transition: background 0.15s;
|
||||
}
|
||||
.contact-row:hover {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
background: hsl(var(--color-surface-hover));
|
||||
}
|
||||
:global(.dark) .contact-row:hover {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
|
|
@ -463,21 +450,18 @@
|
|||
.contact-name {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
:global(.dark) .contact-name {
|
||||
color: #f3f4f6;
|
||||
}
|
||||
:global(.favorite-star) {
|
||||
color: #f59e0b;
|
||||
color: hsl(var(--color-warning));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.contact-subtitle {
|
||||
font-size: 0.6875rem;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -531,10 +515,7 @@
|
|||
transition: background 0.15s;
|
||||
}
|
||||
.profile-card:hover {
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
:global(.dark) .profile-card:hover {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
background: hsl(var(--color-surface-hover));
|
||||
}
|
||||
.profile-avatar {
|
||||
width: 4.5rem;
|
||||
|
|
@ -558,26 +539,20 @@
|
|||
.profile-name {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
:global(.dark) .profile-name {
|
||||
color: #f3f4f6;
|
||||
}
|
||||
.profile-detail {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.8125rem;
|
||||
color: #6b7280;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
:global(.dark) .profile-detail {
|
||||
color: #9ca3af;
|
||||
}
|
||||
.profile-hint {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.6875rem;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -307,8 +307,8 @@
|
|||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 9999px;
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
color: #6b7280;
|
||||
background: hsl(var(--color-muted));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -316,10 +316,6 @@
|
|||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
:global(.dark) .avatar-large {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #9ca3af;
|
||||
}
|
||||
.name-fields {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
|
@ -333,23 +329,15 @@
|
|||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
padding: 0.125rem 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.name-input:hover,
|
||||
.name-input:focus {
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
border-color: hsl(var(--color-border));
|
||||
}
|
||||
:global(.dark) .name-input {
|
||||
color: #f3f4f6;
|
||||
}
|
||||
:global(.dark) .name-input:hover,
|
||||
:global(.dark) .name-input:focus {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -362,7 +350,7 @@
|
|||
}
|
||||
.field-icon {
|
||||
flex-shrink: 0;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 0.375rem;
|
||||
|
|
@ -376,20 +364,13 @@
|
|||
border-radius: 0.25rem;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.field-input:hover,
|
||||
.field-input:focus {
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
:global(.dark) .field-input {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
:global(.dark) .field-input:hover,
|
||||
:global(.dark) .field-input:focus {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
border-color: hsl(var(--color-border));
|
||||
}
|
||||
.field-input.small {
|
||||
max-width: 5rem;
|
||||
|
|
@ -419,7 +400,7 @@
|
|||
background: color-mix(in srgb, var(--tag-color) 12%, transparent);
|
||||
border: none;
|
||||
font-size: 0.6875rem;
|
||||
color: #6b7280;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
cursor: pointer;
|
||||
}
|
||||
.tag-pill:hover {
|
||||
|
|
@ -430,7 +411,4 @@
|
|||
height: 6px;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
:global(.dark) .tag-pill {
|
||||
color: #9ca3af;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -193,7 +193,7 @@
|
|||
text-align: center;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0.25rem;
|
||||
|
|
@ -204,19 +204,16 @@
|
|||
.cal-title:hover {
|
||||
background: rgba(236, 72, 153, 0.08);
|
||||
}
|
||||
:global(.dark) .cal-title {
|
||||
color: #f3f4f6;
|
||||
}
|
||||
.cal-nav {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
border-radius: 0.375rem;
|
||||
background: transparent;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
|
|
@ -226,10 +223,6 @@
|
|||
color: #ec4899;
|
||||
border-color: #ec4899;
|
||||
}
|
||||
:global(.dark) .cal-nav {
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.cal-weekdays {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
|
|
@ -240,13 +233,9 @@
|
|||
font-size: 0.5625rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #c0bfba;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-weight: 600;
|
||||
}
|
||||
:global(.dark) .cal-weekday {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.cal-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
|
|
@ -262,7 +251,7 @@
|
|||
border: 1px solid transparent;
|
||||
border-radius: 0.375rem;
|
||||
background: color-mix(in srgb, var(--phase-color) 10%, transparent);
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
font-size: 0.6875rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
|
|
@ -272,9 +261,6 @@
|
|||
.cal-day:hover {
|
||||
background: color-mix(in srgb, var(--phase-color) 24%, transparent);
|
||||
}
|
||||
:global(.dark) .cal-day {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
.cal-day.out {
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -155,53 +155,38 @@
|
|||
gap: 0.375rem;
|
||||
align-items: center;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-bottom: 1px solid hsl(var(--color-border));
|
||||
}
|
||||
:global(.dark) .sm-create {
|
||||
border-bottom-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.sm-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 0.375rem 0.5rem;
|
||||
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: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
}
|
||||
.sm-input:focus {
|
||||
border-color: #ec4899;
|
||||
}
|
||||
:global(.dark) .sm-input {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
color: #f3f4f6;
|
||||
}
|
||||
|
||||
.sm-select {
|
||||
padding: 0.375rem 0.5rem;
|
||||
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.6875rem;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
}
|
||||
:global(.dark) .sm-select {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
color: #f3f4f6;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
.sm-add {
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 0.375rem;
|
||||
background: #ec4899;
|
||||
color: white;
|
||||
color: hsl(var(--color-primary-foreground));
|
||||
border: none;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 500;
|
||||
|
|
@ -231,10 +216,7 @@
|
|||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
padding: 0.5rem 0.25rem;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
:global(.dark) .sm-row {
|
||||
border-bottom-color: rgba(255, 255, 255, 0.04);
|
||||
border-bottom: 1px solid hsl(var(--color-border));
|
||||
}
|
||||
.sm-row.editing {
|
||||
background: rgba(236, 72, 153, 0.06);
|
||||
|
|
@ -257,15 +239,12 @@
|
|||
}
|
||||
.sm-name {
|
||||
font-size: 0.8125rem;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
font-weight: 500;
|
||||
}
|
||||
:global(.dark) .sm-name {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
.sm-cat {
|
||||
font-size: 0.625rem;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
|
|
@ -279,26 +258,19 @@
|
|||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.625rem;
|
||||
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));
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.sm-btn:hover {
|
||||
color: #374151;
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
:global(.dark) .sm-btn {
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
:global(.dark) .sm-btn:hover {
|
||||
color: #e5e7eb;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: hsl(var(--color-foreground));
|
||||
background: hsl(var(--color-surface-hover));
|
||||
}
|
||||
.sm-btn.primary {
|
||||
background: #ec4899;
|
||||
color: white;
|
||||
color: hsl(var(--color-primary-foreground));
|
||||
border-color: #ec4899;
|
||||
}
|
||||
.sm-btn.primary:hover {
|
||||
|
|
@ -306,15 +278,15 @@
|
|||
background: #ec4899;
|
||||
}
|
||||
.sm-btn.danger:hover {
|
||||
color: #ef4444;
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
border-color: rgba(239, 68, 68, 0.3);
|
||||
color: hsl(var(--color-error));
|
||||
background: hsl(var(--color-error) / 0.08);
|
||||
border-color: hsl(var(--color-error) / 0.3);
|
||||
}
|
||||
|
||||
.sm-empty {
|
||||
padding: 2rem 0;
|
||||
text-align: center;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -304,7 +304,7 @@
|
|||
.back-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #6366f1;
|
||||
color: hsl(var(--color-primary));
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem 0;
|
||||
|
|
@ -315,7 +315,7 @@
|
|||
|
||||
.saved-hint {
|
||||
font-size: 0.625rem;
|
||||
color: #22c55e;
|
||||
color: hsl(var(--color-success));
|
||||
font-weight: 500;
|
||||
animation: fade-in 0.2s ease-out;
|
||||
}
|
||||
|
|
@ -332,33 +332,28 @@
|
|||
|
||||
.meta-btn {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
color: #6b7280;
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-size: 0.6875rem;
|
||||
padding: 0.25rem 0.625rem;
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.meta-btn:hover {
|
||||
border-color: #6366f1;
|
||||
color: #6366f1;
|
||||
border-color: hsl(var(--color-primary));
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
:global(.dark) .meta-btn {
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.del-btn {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
color: #ef4444;
|
||||
border: 1px solid hsl(var(--color-error) / 0.3);
|
||||
color: hsl(var(--color-error));
|
||||
font-size: 0.6875rem;
|
||||
padding: 0.25rem 0.625rem;
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.del-btn:hover {
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
background: hsl(var(--color-error) / 0.08);
|
||||
}
|
||||
|
||||
/* Merge panel */
|
||||
|
|
@ -369,39 +364,34 @@
|
|||
flex-wrap: wrap;
|
||||
padding: 0.5rem 0.625rem;
|
||||
border-radius: 0.375rem;
|
||||
background: rgba(99, 102, 241, 0.05);
|
||||
border: 1px solid rgba(99, 102, 241, 0.2);
|
||||
background: hsl(var(--color-primary) / 0.05);
|
||||
border: 1px solid hsl(var(--color-primary) / 0.3);
|
||||
}
|
||||
.merge-label {
|
||||
font-size: 0.6875rem;
|
||||
color: #6b7280;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
.merge-select {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.1875rem 0.375rem;
|
||||
font-size: 0.6875rem;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
}
|
||||
:global(.dark) .merge-select {
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
color: #f3f4f6;
|
||||
color-scheme: dark;
|
||||
}
|
||||
.merge-confirm {
|
||||
padding: 0.1875rem 0.625rem;
|
||||
border-radius: 0.25rem;
|
||||
border: none;
|
||||
background: #6366f1;
|
||||
color: white;
|
||||
background: hsl(var(--color-primary));
|
||||
color: hsl(var(--color-primary-foreground));
|
||||
font-size: 0.6875rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.merge-confirm:disabled {
|
||||
background: rgba(99, 102, 241, 0.3);
|
||||
background: hsl(var(--color-primary) / 0.3);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.merge-cancel {
|
||||
|
|
@ -409,12 +399,12 @@
|
|||
border-radius: 0.25rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-size: 0.6875rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.merge-cancel:hover {
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.sym-header {
|
||||
|
|
@ -435,15 +425,11 @@
|
|||
|
||||
.count-badge {
|
||||
font-size: 0.625rem;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
background: hsl(var(--color-surface-hover));
|
||||
}
|
||||
:global(.dark) .count-badge {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.palette {
|
||||
display: flex;
|
||||
gap: 0.375rem;
|
||||
|
|
@ -458,13 +444,9 @@
|
|||
padding: 0;
|
||||
}
|
||||
.palette-swatch.active {
|
||||
border-color: #374151;
|
||||
border-color: hsl(var(--color-foreground));
|
||||
transform: scale(1.1);
|
||||
}
|
||||
:global(.dark) .palette-swatch.active {
|
||||
border-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -475,33 +457,24 @@
|
|||
font-size: 0.5625rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #c0bfba;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-weight: 600;
|
||||
}
|
||||
:global(.dark) .section-label {
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.meaning-input {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
border-radius: 0.375rem;
|
||||
padding: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
font-family: inherit;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.meaning-input:focus {
|
||||
border-color: #6366f1;
|
||||
border-color: hsl(var(--color-primary));
|
||||
}
|
||||
:global(.dark) .meaning-input {
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
color: #f3f4f6;
|
||||
}
|
||||
|
||||
/* Bars */
|
||||
.bars {
|
||||
display: flex;
|
||||
|
|
@ -519,14 +492,11 @@
|
|||
font-weight: 500;
|
||||
}
|
||||
.bar-track {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
background: hsl(var(--color-surface-hover));
|
||||
border-radius: 9999px;
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
:global(.dark) .bar-track {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
.bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 9999px;
|
||||
|
|
@ -534,7 +504,7 @@
|
|||
}
|
||||
.bar-count {
|
||||
font-size: 0.625rem;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
|
@ -547,8 +517,8 @@
|
|||
.cooc-chip {
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
background: rgba(99, 102, 241, 0.08);
|
||||
color: #6366f1;
|
||||
background: hsl(var(--color-primary) / 0.08);
|
||||
color: hsl(var(--color-primary));
|
||||
font-size: 0.6875rem;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
|
|
@ -556,8 +526,8 @@
|
|||
transition: all 0.15s;
|
||||
}
|
||||
.cooc-chip:hover {
|
||||
background: rgba(99, 102, 241, 0.18);
|
||||
border-color: #6366f1;
|
||||
background: hsl(var(--color-primary) / 0.18);
|
||||
border-color: hsl(var(--color-primary));
|
||||
}
|
||||
.cooc-count {
|
||||
font-size: 0.5625rem;
|
||||
|
|
@ -588,12 +558,8 @@
|
|||
cursor: default;
|
||||
}
|
||||
.dream-ref:not(:disabled):hover {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
background: hsl(var(--color-surface-hover));
|
||||
}
|
||||
:global(.dark) .dream-ref:not(:disabled):hover {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.ref-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
|
|
@ -601,12 +567,8 @@
|
|||
flex-shrink: 0;
|
||||
}
|
||||
.ref-dot.empty {
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
background: hsl(var(--color-border));
|
||||
}
|
||||
:global(.dark) .ref-dot.empty {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.ref-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -617,29 +579,21 @@
|
|||
|
||||
.ref-title {
|
||||
font-size: 0.75rem;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
:global(.dark) .ref-title {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.ref-date {
|
||||
font-size: 0.625rem;
|
||||
color: #c0bfba;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
flex-shrink: 0;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
:global(.dark) .ref-date {
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 2rem 0;
|
||||
text-align: center;
|
||||
font-size: 0.8125rem;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -164,20 +164,15 @@
|
|||
.search-input {
|
||||
padding: 0.3rem 0.5rem;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
background: transparent;
|
||||
font-size: 0.75rem;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
outline: none;
|
||||
}
|
||||
.search-input:focus {
|
||||
border-color: #6366f1;
|
||||
border-color: hsl(var(--color-primary));
|
||||
}
|
||||
:global(.dark) .search-input {
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
color: #f3f4f6;
|
||||
}
|
||||
|
||||
.sort-tabs {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
|
|
@ -186,25 +181,21 @@
|
|||
.sort-tab {
|
||||
padding: 0.1875rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
background: transparent;
|
||||
font-size: 0.625rem;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.sort-tab:hover {
|
||||
color: #6366f1;
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
.sort-tab.active {
|
||||
background: #6366f1;
|
||||
color: white;
|
||||
border-color: #6366f1;
|
||||
background: hsl(var(--color-primary));
|
||||
color: hsl(var(--color-primary-foreground));
|
||||
border-color: hsl(var(--color-primary));
|
||||
}
|
||||
:global(.dark) .sort-tab {
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.cloud {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -225,7 +216,7 @@
|
|||
gap: 0.375rem;
|
||||
padding: 0.25rem 0.625rem;
|
||||
border-radius: 9999px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
background: transparent;
|
||||
color: var(--sym-color);
|
||||
cursor: pointer;
|
||||
|
|
@ -248,10 +239,6 @@
|
|||
.sym-chip.no-meaning:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
:global(.dark) .sym-chip {
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.sym-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
|
|
@ -266,19 +253,15 @@
|
|||
|
||||
.sym-count {
|
||||
font-size: 0.625rem;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.sym-meta {
|
||||
font-size: 0.625rem;
|
||||
color: #c0bfba;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-weight: 400;
|
||||
}
|
||||
:global(.dark) .sym-meta {
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.sym-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -286,20 +269,16 @@
|
|||
width: 13px;
|
||||
height: 13px;
|
||||
border-radius: 9999px;
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
color: #9ca3af;
|
||||
background: hsl(var(--color-muted));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-size: 0.5625rem;
|
||||
font-weight: 700;
|
||||
margin-left: 0.125rem;
|
||||
}
|
||||
:global(.dark) .sym-badge {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 2rem 0;
|
||||
text-align: center;
|
||||
font-size: 0.8125rem;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -157,31 +157,27 @@
|
|||
background: transparent;
|
||||
cursor: pointer;
|
||||
padding: 0.125rem;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
flex-shrink: 0;
|
||||
transition:
|
||||
color 0.15s,
|
||||
transform 0.15s;
|
||||
}
|
||||
.pin-btn:hover {
|
||||
color: #6b7280;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
.pin-btn.pinned {
|
||||
color: #f59e0b;
|
||||
color: hsl(var(--color-warning));
|
||||
}
|
||||
.transcript {
|
||||
font-size: 0.8125rem;
|
||||
color: #6b7280;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
line-height: 1.5;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.375rem;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
background: hsl(var(--color-surface-hover));
|
||||
white-space: pre-wrap;
|
||||
max-height: 12rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
:global(.dark) .transcript {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: #9ca3af;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -282,17 +282,13 @@
|
|||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 9999px;
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
color: #6b7280;
|
||||
background: hsl(var(--color-muted));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
:global(.dark) .place-avatar {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #9ca3af;
|
||||
}
|
||||
.name-fields {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
|
@ -304,32 +300,20 @@
|
|||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
padding: 0.125rem 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.name-input:hover,
|
||||
.name-input:focus {
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
border-color: hsl(var(--color-border));
|
||||
}
|
||||
:global(.dark) .name-input {
|
||||
color: #f3f4f6;
|
||||
}
|
||||
:global(.dark) .name-input:hover,
|
||||
:global(.dark) .name-input:focus {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.map-container {
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
}
|
||||
:global(.dark) .map-container {
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -343,7 +327,7 @@
|
|||
}
|
||||
.field-label {
|
||||
font-size: 0.75rem;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
min-width: 5.5rem;
|
||||
padding-top: 0.375rem;
|
||||
}
|
||||
|
|
@ -356,7 +340,7 @@
|
|||
border-radius: 0.25rem;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
outline: none;
|
||||
text-align: right;
|
||||
transition: border-color 0.15s;
|
||||
|
|
@ -365,17 +349,7 @@
|
|||
.field-input:focus,
|
||||
.field-select:hover,
|
||||
.field-select:focus {
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
:global(.dark) .field-input,
|
||||
:global(.dark) .field-select {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
:global(.dark) .field-input:hover,
|
||||
:global(.dark) .field-input:focus,
|
||||
:global(.dark) .field-select:hover,
|
||||
:global(.dark) .field-select:focus {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
border-color: hsl(var(--color-border));
|
||||
}
|
||||
.field-input.small {
|
||||
max-width: 6rem;
|
||||
|
|
@ -401,7 +375,7 @@
|
|||
background: color-mix(in srgb, var(--tag-color) 12%, transparent);
|
||||
border: none;
|
||||
font-size: 0.6875rem;
|
||||
color: #6b7280;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
cursor: pointer;
|
||||
}
|
||||
.tag-pill:hover {
|
||||
|
|
@ -412,10 +386,6 @@
|
|||
height: 6px;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
:global(.dark) .tag-pill {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.log-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -425,9 +395,9 @@
|
|||
.log-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #6b7280;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
.log-accuracy {
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -190,11 +190,7 @@
|
|||
font-size: 0.6875rem;
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
color: #6b7280;
|
||||
}
|
||||
:global(.dark) .tag {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: #9ca3af;
|
||||
background: hsl(var(--color-surface-hover));
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -199,39 +199,33 @@
|
|||
.xp-level {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
}
|
||||
:global(.dark) .xp-level {
|
||||
color: #e5e7eb;
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
.xp-numbers {
|
||||
font-size: 0.75rem;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
.xp-bar {
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
background: hsl(var(--color-border));
|
||||
overflow: hidden;
|
||||
}
|
||||
:global(.dark) .xp-bar {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.xp-fill {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
background: #8b5cf6;
|
||||
background: hsl(var(--color-primary));
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.xp-total {
|
||||
font-size: 0.6875rem;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
.level-up {
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 0.375rem;
|
||||
background: #8b5cf6;
|
||||
color: white;
|
||||
background: hsl(var(--color-primary));
|
||||
color: hsl(var(--color-primary-foreground));
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
|
|
@ -246,29 +240,21 @@
|
|||
font-size: 0.8125rem;
|
||||
padding: 0.25rem 0.375rem;
|
||||
border-radius: 0.25rem;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
background: transparent;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
outline: none;
|
||||
}
|
||||
:global(.dark) .xp-input {
|
||||
color: #e5e7eb;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.xp-desc-input {
|
||||
flex: 1;
|
||||
font-size: 0.8125rem;
|
||||
padding: 0.25rem 0.375rem;
|
||||
border-radius: 0.25rem;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
background: transparent;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
outline: none;
|
||||
}
|
||||
:global(.dark) .xp-desc-input {
|
||||
color: #e5e7eb;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.xp-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -276,8 +262,8 @@
|
|||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
border: none;
|
||||
background: #8b5cf6;
|
||||
color: white;
|
||||
background: hsl(var(--color-primary));
|
||||
color: hsl(var(--color-primary-foreground));
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
|
|
@ -242,7 +242,7 @@
|
|||
<style>
|
||||
.time-range {
|
||||
font-size: 0.75rem;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
.duration-inputs {
|
||||
display: flex;
|
||||
|
|
@ -262,22 +262,15 @@
|
|||
border-radius: 0.25rem;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
outline: none;
|
||||
}
|
||||
.dur-input:hover,
|
||||
.dur-input:focus {
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
border-color: hsl(var(--color-border));
|
||||
}
|
||||
.dur-unit {
|
||||
font-size: 0.6875rem;
|
||||
color: #9ca3af;
|
||||
}
|
||||
:global(.dark) .dur-input {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
:global(.dark) .dur-input:hover,
|
||||
:global(.dark) .dur-input:focus {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -151,15 +151,12 @@
|
|||
<style>
|
||||
.edit-bar {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-bottom: 1px solid hsl(var(--color-border));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.375rem;
|
||||
animation: slideDown 0.2s ease-out;
|
||||
}
|
||||
:global(.dark) .edit-bar {
|
||||
border-bottom-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
|
|
@ -188,28 +185,17 @@
|
|||
border-radius: 0.25rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.icon-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
color: #374151;
|
||||
background: hsl(var(--color-muted));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
.icon-btn.active {
|
||||
background: var(--color-primary, #8b5cf6);
|
||||
color: white;
|
||||
}
|
||||
:global(.dark) .icon-btn {
|
||||
color: #6b7280;
|
||||
}
|
||||
:global(.dark) .icon-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #e5e7eb;
|
||||
}
|
||||
:global(.dark) .icon-btn.active {
|
||||
background: var(--color-primary, #8b5cf6);
|
||||
color: white;
|
||||
color: hsl(var(--color-primary-foreground));
|
||||
}
|
||||
.filter-toggle {
|
||||
display: flex;
|
||||
|
|
@ -218,7 +204,7 @@
|
|||
padding: 0.25rem 0.5rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
cursor: pointer;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 500;
|
||||
|
|
@ -227,10 +213,7 @@
|
|||
transition: color 0.15s;
|
||||
}
|
||||
.filter-toggle:hover {
|
||||
color: #374151;
|
||||
}
|
||||
:global(.dark) .filter-toggle:hover {
|
||||
color: #e5e7eb;
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
.filter-toggle-arrow {
|
||||
font-size: 0.625rem;
|
||||
|
|
@ -255,7 +238,7 @@
|
|||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
.filter-pills {
|
||||
display: flex;
|
||||
|
|
@ -265,42 +248,29 @@
|
|||
.filter-pill {
|
||||
padding: 0.1875rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
background: transparent;
|
||||
color: #6b7280;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.filter-pill:hover {
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
color: #374151;
|
||||
border-color: hsl(var(--color-border-strong));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
.filter-pill.active {
|
||||
background: var(--pill-color, var(--color-primary, #8b5cf6));
|
||||
border-color: var(--pill-color, var(--color-primary, #8b5cf6));
|
||||
color: white;
|
||||
}
|
||||
:global(.dark) .filter-pill {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
color: #9ca3af;
|
||||
}
|
||||
:global(.dark) .filter-pill:hover {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
color: #e5e7eb;
|
||||
}
|
||||
:global(.dark) .filter-pill.active {
|
||||
background: var(--pill-color, var(--color-primary, #8b5cf6));
|
||||
border-color: var(--pill-color, var(--color-primary, #8b5cf6));
|
||||
color: white;
|
||||
color: hsl(var(--color-primary-foreground));
|
||||
}
|
||||
.completed-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
font-size: 0.6875rem;
|
||||
color: #6b7280;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
cursor: pointer;
|
||||
}
|
||||
.completed-toggle input {
|
||||
|
|
@ -309,9 +279,6 @@
|
|||
accent-color: var(--color-primary, #8b5cf6);
|
||||
cursor: pointer;
|
||||
}
|
||||
:global(.dark) .completed-toggle {
|
||||
color: #9ca3af;
|
||||
}
|
||||
.actions-row {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
|
@ -324,24 +291,16 @@
|
|||
border-radius: 0.25rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.action-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
color: #374151;
|
||||
}
|
||||
:global(.dark) .action-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #e5e7eb;
|
||||
background: hsl(var(--color-muted));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
.delete-btn:hover {
|
||||
color: #ef4444;
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
}
|
||||
:global(.dark) .delete-btn:hover {
|
||||
color: #ef4444;
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
color: hsl(var(--color-error));
|
||||
background: hsl(var(--color-error) / 0.08);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -324,28 +324,21 @@
|
|||
.page-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
outline: none;
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
.page-title[contenteditable='true'] {
|
||||
cursor: text;
|
||||
}
|
||||
:global(.dark) .page-title {
|
||||
color: #f3f4f6;
|
||||
}
|
||||
.task-count {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: #9ca3af;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
background: hsl(var(--color-surface-hover));
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
:global(.dark) .task-count {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #6b7280;
|
||||
}
|
||||
.page-content {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
|
@ -361,15 +354,12 @@
|
|||
.completed-section {
|
||||
margin-top: 1rem;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
:global(.dark) .completed-section {
|
||||
border-top-color: rgba(255, 255, 255, 0.08);
|
||||
border-top: 1px solid hsl(var(--color-border));
|
||||
}
|
||||
.completed-label {
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 500;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
margin-bottom: 0.5rem;
|
||||
|
|
@ -384,28 +374,19 @@
|
|||
}
|
||||
.inline-create-icon {
|
||||
flex-shrink: 0;
|
||||
color: #d1d5db;
|
||||
color: hsl(var(--color-muted-foreground) / 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
:global(.dark) .inline-create-icon {
|
||||
color: #4b5563;
|
||||
}
|
||||
.inline-create-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 0.8125rem;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
outline: none;
|
||||
}
|
||||
.inline-create-input::placeholder {
|
||||
color: #c0bfba;
|
||||
}
|
||||
:global(.dark) .inline-create-input {
|
||||
color: #f3f4f6;
|
||||
}
|
||||
:global(.dark) .inline-create-input::placeholder {
|
||||
color: #4b5563;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -344,17 +344,14 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
color: hsl(var(--color-primary-foreground));
|
||||
transition:
|
||||
background 0.15s,
|
||||
border-color 0.15s;
|
||||
}
|
||||
:global(.dark) .checkbox {
|
||||
border-color: #4b5563;
|
||||
}
|
||||
.checkbox.checked {
|
||||
background: #22c55e;
|
||||
border-color: #22c55e;
|
||||
background: hsl(var(--color-success));
|
||||
border-color: hsl(var(--color-success));
|
||||
}
|
||||
.checkbox.small {
|
||||
width: 14px;
|
||||
|
|
@ -363,7 +360,7 @@
|
|||
}
|
||||
:global(.detail-view .title-input.completed) {
|
||||
text-decoration: line-through;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
.schedule-fields {
|
||||
|
|
@ -382,30 +379,26 @@
|
|||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
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;
|
||||
}
|
||||
.schedule-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
:global(.dark) .schedule-btn {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
color: #9ca3af;
|
||||
background: hsl(var(--color-surface-hover));
|
||||
}
|
||||
.unschedule-btn {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
padding: 0.125rem;
|
||||
color: #9ca3af;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.unschedule-btn:hover {
|
||||
color: #ef4444;
|
||||
color: hsl(var(--color-error));
|
||||
}
|
||||
|
||||
.tags-list {
|
||||
|
|
@ -422,7 +415,7 @@
|
|||
background: color-mix(in srgb, var(--tag-color) 12%, transparent);
|
||||
border: none;
|
||||
font-size: 0.6875rem;
|
||||
color: #6b7280;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
cursor: pointer;
|
||||
}
|
||||
.tag-pill:hover {
|
||||
|
|
@ -433,10 +426,6 @@
|
|||
height: 6px;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
:global(.dark) .tag-pill {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.subtask-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -455,20 +444,14 @@
|
|||
transition: background 0.15s;
|
||||
}
|
||||
.subtask-item:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
:global(.dark) .subtask-item:hover {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
background: hsl(var(--color-surface-hover));
|
||||
}
|
||||
.subtask-title {
|
||||
font-size: 0.8125rem;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
.subtask-title.completed {
|
||||
text-decoration: line-through;
|
||||
color: #9ca3af;
|
||||
}
|
||||
:global(.dark) .subtask-title {
|
||||
color: #e5e7eb;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue