mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 19:41:09 +02:00
fix(ui): replace hardcoded colors with theme variables
- InputBar: use --color-primary, --color-surface, --color-border for focus ring, backgrounds, and syntax highlighting - PillToolbarButton: active state uses --color-primary - PillViewSwitcher: sliding indicator and active text use theme colors - PillTimeRangeSelector: all glass effects and active states themed - CalendarToolbar: FAB active state uses theme colors - CalendarToolbarContent: removed hardcoded primaryColor prop - DateStrip: replaced all #3b82f6 with theme variables All UI components now automatically adapt to the selected theme (Ocean, Sunset, Forest, etc.) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Till-JS
parent
a1c3eafee6
commit
88c91e22b0
7 changed files with 140 additions and 247 deletions
|
|
@ -146,11 +146,11 @@
|
|||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
background: hsl(var(--color-surface) / 0.92);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
box-shadow: 0 -2px 16px hsl(var(--color-foreground) / 0.08);
|
||||
border-radius: 1rem;
|
||||
white-space: nowrap;
|
||||
max-width: calc(100vw - 2rem);
|
||||
|
|
@ -164,26 +164,16 @@
|
|||
display: none; /* Chrome/Safari */
|
||||
}
|
||||
|
||||
:global(.dark) .toolbar-content {
|
||||
background: rgba(30, 30, 30, 0.92);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
/* Glass styling */
|
||||
.glass-pill {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
background: hsl(var(--color-surface) / 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
box-shadow: 0 2px 8px hsl(var(--color-foreground) / 0.08);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
:global(.dark) .glass-pill {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glass-panel {
|
||||
background: transparent;
|
||||
}
|
||||
|
|
@ -203,19 +193,15 @@
|
|||
|
||||
.toolbar-fab:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 4px 12px hsl(var(--color-foreground) / 0.15);
|
||||
}
|
||||
|
||||
.toolbar-fab.active {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
:global(.dark) .toolbar-fab.active {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: hsl(var(--color-muted));
|
||||
}
|
||||
|
||||
.toolbar-fab.active .fab-icon {
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.fab-icon {
|
||||
|
|
@ -232,14 +218,10 @@
|
|||
.toolbar-divider {
|
||||
width: 1px;
|
||||
height: 1.5rem;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
background: hsl(var(--color-border));
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
:global(.dark) .toolbar-divider {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
/* Layout toggle button */
|
||||
.layout-btn {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -101,7 +101,6 @@
|
|||
options={viewOptions}
|
||||
value={viewStore.viewType}
|
||||
onChange={handleViewChange}
|
||||
primaryColor="#3b82f6"
|
||||
embedded={true}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -155,21 +154,12 @@
|
|||
}
|
||||
|
||||
.toolbar-content.vertical :global(.pill-view-switcher .switcher-btn:hover) {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
:global(.dark) .toolbar-content.vertical :global(.pill-view-switcher .switcher-btn:hover) {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: hsl(var(--color-foreground) / 0.05);
|
||||
}
|
||||
|
||||
.toolbar-content.vertical :global(.pill-view-switcher .switcher-btn.active) {
|
||||
background: color-mix(in srgb, #3b82f6 15%, transparent 85%);
|
||||
border-color: color-mix(in srgb, #3b82f6 25%, transparent 75%);
|
||||
}
|
||||
|
||||
:global(.dark) .toolbar-content.vertical :global(.pill-view-switcher .switcher-btn.active) {
|
||||
background: color-mix(in srgb, #3b82f6 25%, transparent 75%);
|
||||
border-color: color-mix(in srgb, #3b82f6 35%, transparent 65%);
|
||||
background: hsl(var(--color-primary) / 0.15);
|
||||
border-color: hsl(var(--color-primary) / 0.25);
|
||||
}
|
||||
|
||||
/* PillTimeRangeSelector in vertical mode */
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<script lang="ts">
|
||||
import { viewStore } from '$lib/stores/view.svelte';
|
||||
import { eventsStore } from '$lib/stores/events.svelte';
|
||||
import { settingsStore } from '$lib/stores/settings.svelte';
|
||||
import DateStripContextMenu from './DateStripContextMenu.svelte';
|
||||
import {
|
||||
format,
|
||||
isToday,
|
||||
|
|
@ -14,6 +16,14 @@
|
|||
import { onMount, tick } from 'svelte';
|
||||
import SunCalc from 'suncalc';
|
||||
|
||||
// Context menu reference
|
||||
let contextMenu: DateStripContextMenu;
|
||||
|
||||
function handleContextMenu(e: MouseEvent) {
|
||||
e.preventDefault();
|
||||
contextMenu?.show(e.clientX, e.clientY);
|
||||
}
|
||||
|
||||
interface Props {
|
||||
isSidebarMode?: boolean;
|
||||
isToolbarExpanded?: boolean;
|
||||
|
|
@ -223,8 +233,10 @@
|
|||
class="date-strip-wrapper"
|
||||
class:sidebar-mode={isSidebarMode}
|
||||
class:toolbar-expanded={isToolbarExpanded}
|
||||
class:compact={settingsStore.dateStripCompact}
|
||||
>
|
||||
<div class="date-strip-container">
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="date-strip-container" oncontextmenu={handleContextMenu}>
|
||||
<!-- Month label -->
|
||||
<div class="month-header">
|
||||
<span class="month-label">
|
||||
|
|
@ -250,12 +262,12 @@
|
|||
{@const isFirstOfMonth = day.getDate() === 1}
|
||||
{@const moonPhase = isSignificantMoonPhase(day)}
|
||||
{@const eventCount = getEventCount(day)}
|
||||
{#if isFirstOfMonth}
|
||||
{#if isFirstOfMonth && settingsStore.dateStripShowMonthDividers}
|
||||
<div class="month-divider"></div>
|
||||
{/if}
|
||||
<button
|
||||
class="day-item"
|
||||
class:weekend={dayIsWeekend}
|
||||
class:weekend={dayIsWeekend && settingsStore.dateStripHighlightWeekends}
|
||||
class:selected={dayIsSelected && !dayIsToday}
|
||||
class:in-range={dayInRange && !dayIsToday}
|
||||
class:range-start={dayIsRangeStart && !dayIsToday}
|
||||
|
|
@ -263,23 +275,17 @@
|
|||
data-date={format(day, 'yyyy-MM-dd')}
|
||||
data-is-today={dayIsToday}
|
||||
onclick={() => handleDayClick(day)}
|
||||
style={dayIsToday
|
||||
? 'background: #3b82f6; color: white; border-radius: 10px; font-weight: 700; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);'
|
||||
: ''}
|
||||
class:is-today={dayIsToday}
|
||||
>
|
||||
{#if moonPhase.significant}
|
||||
<span class="moon-indicator">{moonPhase.emoji}</span>
|
||||
{/if}
|
||||
<span class="day-weekday" style={dayIsToday ? 'opacity: 1; color: white;' : ''}
|
||||
>{format(day, 'EE', { locale: de })}</span
|
||||
>
|
||||
<span class="day-number" style={dayIsToday ? 'color: white;' : ''}
|
||||
>{format(day, 'd')}</span
|
||||
>
|
||||
<span class="day-weekday">{format(day, 'EE', { locale: de })}</span>
|
||||
<span class="day-number">{format(day, 'd')}</span>
|
||||
{#if eventCount > 0}
|
||||
<div class="event-dots" style={dayIsToday ? 'opacity: 0.9;' : ''}>
|
||||
<div class="event-dots">
|
||||
{#each Array(eventCount) as _, i}
|
||||
<span class="event-dot" style={dayIsToday ? 'background: white;' : ''}></span>
|
||||
<span class="event-dot"></span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -327,21 +333,21 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0.375rem 0.875rem;
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||
background: hsl(var(--color-primary) / 0.1);
|
||||
border: 1px solid hsl(var(--color-primary) / 0.3);
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
color: #3b82f6;
|
||||
color: hsl(var(--color-primary));
|
||||
pointer-events: auto;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.today-button:hover {
|
||||
background: #3b82f6;
|
||||
border-color: #3b82f6;
|
||||
color: white;
|
||||
background: hsl(var(--color-primary));
|
||||
border-color: hsl(var(--color-primary));
|
||||
color: hsl(var(--color-primary-foreground, 0 0% 100%));
|
||||
transform: translateY(-50%) scale(1.02);
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
||||
box-shadow: 0 4px 12px hsl(var(--color-primary) / 0.3);
|
||||
}
|
||||
|
||||
.today-button:hover .today-date {
|
||||
|
|
@ -358,7 +364,7 @@
|
|||
.today-date {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: #60a5fa;
|
||||
color: hsl(var(--color-primary) / 0.8);
|
||||
}
|
||||
|
||||
.date-strip-container {
|
||||
|
|
@ -464,7 +470,7 @@
|
|||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: #3b82f6;
|
||||
background: hsl(var(--color-primary));
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
|
|
@ -478,13 +484,13 @@
|
|||
|
||||
.day-item.selected {
|
||||
background: var(--color-muted, #f3f4f6);
|
||||
color: #3b82f6;
|
||||
color: hsl(var(--color-primary));
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* View range highlighting */
|
||||
.day-item.in-range {
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
background: hsl(var(--color-primary) / 0.15);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
|
|
@ -501,7 +507,33 @@
|
|||
}
|
||||
|
||||
.day-item.in-range:hover {
|
||||
background: rgba(59, 130, 246, 0.25);
|
||||
background: hsl(var(--color-primary) / 0.25);
|
||||
}
|
||||
|
||||
/* Today styling */
|
||||
.day-item.is-today {
|
||||
background: hsl(var(--color-primary));
|
||||
color: hsl(var(--color-primary-foreground, 0 0% 100%));
|
||||
border-radius: 10px;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 2px 8px hsl(var(--color-primary) / 0.4);
|
||||
}
|
||||
|
||||
.day-item.is-today .day-weekday {
|
||||
opacity: 1;
|
||||
color: hsl(var(--color-primary-foreground, 0 0% 100%));
|
||||
}
|
||||
|
||||
.day-item.is-today .day-number {
|
||||
color: hsl(var(--color-primary-foreground, 0 0% 100%));
|
||||
}
|
||||
|
||||
.day-item.is-today .event-dots {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.day-item.is-today .event-dot {
|
||||
background: hsl(var(--color-primary-foreground, 0 0% 100%));
|
||||
}
|
||||
|
||||
.day-weekday {
|
||||
|
|
|
|||
|
|
@ -268,34 +268,22 @@
|
|||
}
|
||||
|
||||
.glass-pill {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
background: hsl(var(--color-surface) / 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
:global(.dark) .glass-pill {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
color: #f3f4f6;
|
||||
0 4px 6px -1px hsl(var(--color-foreground) / 0.1),
|
||||
0 2px 4px -1px hsl(var(--color-foreground) / 0.06);
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.glass-pill:hover {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-color: rgba(0, 0, 0, 0.15);
|
||||
background: hsl(var(--color-surface) / 0.95);
|
||||
transform: translateY(-1px);
|
||||
box-shadow:
|
||||
0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
||||
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
:global(.dark) .glass-pill:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.25);
|
||||
0 10px 15px -3px hsl(var(--color-foreground) / 0.1),
|
||||
0 4px 6px -2px hsl(var(--color-foreground) / 0.05);
|
||||
}
|
||||
|
||||
.pill-icon {
|
||||
|
|
@ -322,42 +310,23 @@
|
|||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
background: transparent;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
:global(.dark) .embedded-btn {
|
||||
color: #f3f4f6;
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.embedded-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
:global(.dark) .embedded-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: hsl(var(--color-foreground) / 0.05);
|
||||
}
|
||||
|
||||
/* Active state for toggle mode */
|
||||
.embedded-btn.active {
|
||||
background: color-mix(in srgb, var(--color-primary-500, #3b82f6) 15%, transparent 85%);
|
||||
color: var(--color-primary-500, #3b82f6);
|
||||
}
|
||||
|
||||
:global(.dark) .embedded-btn.active {
|
||||
background: color-mix(in srgb, var(--color-primary-500, #3b82f6) 25%, transparent 75%);
|
||||
color: var(--color-primary-400, #60a5fa);
|
||||
background: hsl(var(--color-primary) / 0.15);
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.glass-pill.active {
|
||||
background: color-mix(in srgb, var(--color-primary-500, #3b82f6) 15%, white 85%);
|
||||
border-color: var(--color-primary-500, #3b82f6);
|
||||
color: var(--color-primary-500, #3b82f6);
|
||||
}
|
||||
|
||||
:global(.dark) .glass-pill.active {
|
||||
background: color-mix(in srgb, var(--color-primary-500, #3b82f6) 30%, transparent 70%);
|
||||
border-color: var(--color-primary-400, #60a5fa);
|
||||
color: var(--color-primary-400, #60a5fa);
|
||||
background: hsl(var(--color-primary) / 0.15);
|
||||
border-color: hsl(var(--color-primary));
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.chevron-icon {
|
||||
|
|
@ -420,18 +389,13 @@
|
|||
}
|
||||
|
||||
.glass-dropdown {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
background: hsl(var(--color-surface) / 0.95);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
box-shadow:
|
||||
0 20px 25px -5px rgba(0, 0, 0, 0.1),
|
||||
0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
:global(.dark) .glass-dropdown {
|
||||
background: rgba(30, 30, 30, 0.95);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
0 20px 25px -5px hsl(var(--color-foreground) / 0.1),
|
||||
0 10px 10px -5px hsl(var(--color-foreground) / 0.04);
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
|
|
@ -440,13 +404,8 @@
|
|||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #6b7280;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
:global(.dark) .dropdown-header {
|
||||
color: #9ca3af;
|
||||
border-bottom-color: rgba(255, 255, 255, 0.1);
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
border-bottom: 1px solid hsl(var(--color-border));
|
||||
}
|
||||
|
||||
.time-selectors {
|
||||
|
|
@ -467,14 +426,10 @@
|
|||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #6b7280;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
:global(.dark) .column-label {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.hour-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -509,32 +464,19 @@
|
|||
border-radius: 0.5rem;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
:global(.dark) .hour-option {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.hour-option:hover:not(.disabled) {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
:global(.dark) .hour-option:hover:not(.disabled) {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: hsl(var(--color-foreground) / 0.05);
|
||||
}
|
||||
|
||||
.hour-option.active {
|
||||
background: color-mix(in srgb, var(--color-primary-500, #3b82f6) 20%, white 80%);
|
||||
color: var(--color-primary-500, #3b82f6);
|
||||
}
|
||||
|
||||
:global(.dark) .hour-option.active {
|
||||
background: color-mix(in srgb, var(--color-primary-500, #3b82f6) 30%, transparent 70%);
|
||||
color: var(--color-primary-500, #3b82f6);
|
||||
background: hsl(var(--color-primary) / 0.2);
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.hour-option.disabled {
|
||||
|
|
@ -544,27 +486,19 @@
|
|||
|
||||
.time-divider {
|
||||
width: 1px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
background: hsl(var(--color-border));
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
:global(.dark) .time-divider {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.dropdown-footer {
|
||||
padding: 0.5rem 1rem;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-top: 1px solid hsl(var(--color-border));
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:global(.dark) .dropdown-footer {
|
||||
border-top-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.current-range {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-primary-500, #3b82f6);
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -49,28 +49,20 @@
|
|||
border: none;
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
color: #374151;
|
||||
color: hsl(var(--color-foreground));
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
:global(.dark) .toolbar-btn {
|
||||
color: #f3f4f6;
|
||||
}
|
||||
|
||||
.toolbar-btn:hover:not(:disabled) {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
:global(.dark) .toolbar-btn:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: hsl(var(--color-foreground) / 0.05);
|
||||
}
|
||||
|
||||
.toolbar-btn.active {
|
||||
background: color-mix(in srgb, #3b82f6 15%, transparent 85%);
|
||||
color: #3b82f6;
|
||||
background: hsl(var(--color-primary) / 0.15);
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.toolbar-btn.icon-only {
|
||||
|
|
|
|||
|
|
@ -21,13 +21,11 @@
|
|||
value: string;
|
||||
/** Called when view changes */
|
||||
onChange: (id: string) => void;
|
||||
/** Primary color for active state */
|
||||
primaryColor?: string;
|
||||
/** Embedded mode - no background/border, for use inside a parent bar */
|
||||
embedded?: boolean;
|
||||
}
|
||||
|
||||
let { options, value, onChange, primaryColor = '#3b82f6', embedded = false }: Props = $props();
|
||||
let { options, value, onChange, embedded = false }: Props = $props();
|
||||
|
||||
let containerRef = $state<HTMLDivElement | null>(null);
|
||||
let indicatorStyle = $state('');
|
||||
|
|
@ -84,7 +82,6 @@
|
|||
class="pill-view-switcher"
|
||||
class:glass-pill={!embedded}
|
||||
class:embedded-switcher={embedded}
|
||||
style="--switcher-primary-color: {primaryColor}"
|
||||
bind:this={containerRef}
|
||||
>
|
||||
<!-- Sliding indicator -->
|
||||
|
|
@ -127,18 +124,13 @@
|
|||
}
|
||||
|
||||
.glass-pill {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
background: hsl(var(--color-surface) / 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
:global(.dark) .glass-pill {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
0 4px 6px -1px hsl(var(--color-foreground) / 0.1),
|
||||
0 2px 4px -1px hsl(var(--color-foreground) / 0.06);
|
||||
}
|
||||
|
||||
/* Embedded mode - no background/border */
|
||||
|
|
@ -156,17 +148,12 @@
|
|||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius: 9999px;
|
||||
background: color-mix(in srgb, var(--switcher-primary-color) 15%, white 85%);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
background: hsl(var(--color-primary) / 0.15);
|
||||
box-shadow: 0 1px 3px hsl(var(--color-foreground) / 0.1);
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
:global(.dark) .sliding-indicator {
|
||||
background: color-mix(in srgb, var(--switcher-primary-color) 25%, transparent 75%);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.switcher-btn {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
|
@ -179,31 +166,19 @@
|
|||
border: none;
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
color: #6b7280;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
:global(.dark) .switcher-btn {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.switcher-btn:hover:not(.disabled) {
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
:global(.dark) .switcher-btn:hover:not(.disabled) {
|
||||
color: #e5e7eb;
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.switcher-btn.active {
|
||||
color: var(--switcher-primary-color);
|
||||
}
|
||||
|
||||
:global(.dark) .switcher-btn.active {
|
||||
color: var(--switcher-primary-color);
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.switcher-btn.disabled {
|
||||
|
|
|
|||
|
|
@ -55,7 +55,6 @@
|
|||
searchingText?: string;
|
||||
createText?: string;
|
||||
appIcon?: string;
|
||||
primaryColor?: string;
|
||||
autoFocus?: boolean;
|
||||
/** Bottom offset from viewport bottom (default: '70px') */
|
||||
bottomOffset?: string;
|
||||
|
|
@ -74,7 +73,6 @@
|
|||
searchingText = 'Suche...',
|
||||
createText = 'Erstellen',
|
||||
appIcon = 'search',
|
||||
primaryColor = '#8b5cf6',
|
||||
autoFocus = true,
|
||||
bottomOffset = '70px',
|
||||
hasFabRight = false,
|
||||
|
|
@ -248,7 +246,7 @@
|
|||
<div
|
||||
class="quick-input-bar"
|
||||
class:has-fab-right={hasFabRight}
|
||||
style="--primary-color: {primaryColor}; --bottom-offset: {bottomOffset}"
|
||||
style="--bottom-offset: {bottomOffset}"
|
||||
>
|
||||
<!-- Results Panel (above input) -->
|
||||
{#if showPanel}
|
||||
|
|
@ -451,32 +449,27 @@
|
|||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1.25rem;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
background: hsl(var(--color-surface) / 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
border-radius: 9999px;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
0 4px 6px -1px hsl(var(--color-foreground) / 0.1),
|
||||
0 2px 4px -1px hsl(var(--color-foreground) / 0.06);
|
||||
transition: all 0.2s ease;
|
||||
/* Fixed height to prevent size changes */
|
||||
height: 54px;
|
||||
}
|
||||
|
||||
:global(.dark) .input-container {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.input-container:focus-within {
|
||||
border-color: var(--primary-color);
|
||||
border-color: hsl(var(--color-primary));
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06),
|
||||
0 0 0 2px color-mix(in srgb, var(--primary-color) 25%, transparent);
|
||||
0 4px 6px -1px hsl(var(--color-foreground) / 0.1),
|
||||
0 2px 4px -1px hsl(var(--color-foreground) / 0.06),
|
||||
0 0 0 2px hsl(var(--color-primary) / 0.25);
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
|
|
@ -530,29 +523,29 @@
|
|||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
/* Syntax highlighting colors */
|
||||
/* Syntax highlighting colors - using theme-aware semantic colors */
|
||||
.input-highlight-backdrop :global(.hl-priority-urgent) {
|
||||
color: #ef4444;
|
||||
color: hsl(var(--color-error, 0 84% 60%));
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.input-highlight-backdrop :global(.hl-priority-high) {
|
||||
color: #f97316;
|
||||
color: hsl(var(--color-warning, 25 95% 53%));
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.input-highlight-backdrop :global(.hl-priority-medium) {
|
||||
color: #eab308;
|
||||
color: hsl(var(--color-warning, 48 96% 53%));
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.input-highlight-backdrop :global(.hl-priority-low) {
|
||||
color: #22c55e;
|
||||
color: hsl(var(--color-success, 142 71% 45%));
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.input-highlight-backdrop :global(.hl-tag) {
|
||||
color: var(--primary-color);
|
||||
color: hsl(var(--color-primary));
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
|
@ -562,12 +555,12 @@
|
|||
}
|
||||
|
||||
.input-highlight-backdrop :global(.hl-date) {
|
||||
color: hsl(262 83% 58%);
|
||||
color: hsl(var(--color-accent, 262 83% 58%));
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.input-highlight-backdrop :global(.hl-time) {
|
||||
color: hsl(262 83% 58%);
|
||||
color: hsl(var(--color-accent, 262 83% 58%));
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
|
@ -575,8 +568,8 @@
|
|||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 9999px;
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
background: hsl(var(--color-primary));
|
||||
color: hsl(var(--color-primary-foreground, 0 0% 100%));
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
|
|
@ -612,19 +605,14 @@
|
|||
margin: 0 auto 0.5rem;
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
background: hsl(var(--color-surface) / 0.95);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-radius: 1rem;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
:global(.dark) .results-panel {
|
||||
background: rgba(30, 30, 30, 0.95);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
0 4px 6px -1px hsl(var(--color-foreground) / 0.1),
|
||||
0 2px 4px -1px hsl(var(--color-foreground) / 0.06);
|
||||
}
|
||||
|
||||
/* Result Items */
|
||||
|
|
@ -661,8 +649,8 @@
|
|||
height: 36px;
|
||||
min-width: 36px;
|
||||
border-radius: 9999px;
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
background: hsl(var(--color-primary));
|
||||
color: hsl(var(--color-primary-foreground, 0 0% 100%));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -750,7 +738,7 @@
|
|||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border: 2px solid hsl(var(--color-border));
|
||||
border-top-color: var(--primary-color);
|
||||
border-top-color: hsl(var(--color-primary));
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue