From 0165327bb62d0efcb21d7d3521cd2f709f693d18 Mon Sep 17 00:00:00 2001 From: Callum Alpass Date: Mon, 9 Jun 2025 13:01:19 +1000 Subject: [PATCH] feat: Remove legacy class names, cleanup legacy styles, and update code for BEM consistency MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit • Remove legacy CSS class names and fallbacks from NoteCard and TaskCard creation and update functions. Legacy selectors (e.g. “tasknotes-card”, “note-title”, “note-item”, “task-checkbox”, “status-dot”, “task-completed”) have been removed so that only the new BEM class names are applied and queried. • Update the updateTaskProperty function in helpers.ts to use “default field names” instead of legacy field naming comments and mappings. • Modify TaskListView.ts import statement to now include the Setting module from Obsidian. • Update styles/README.md to reflect the new file hierarchy and structure that separates core system files, BEM component files, view-specific files, and legacy files. • Remove multiple legacy CSS files – agenda.css, calendar.css, filters.css, kanban.css, modals.css, and tasks.css – that are now deprecated. Legacy styles in base.css have also been reduced, ensuring that only modern (BEM-based) styles remain in use. This commit cleans up our codebase by removing deprecated legacy code and CSS, enforcing a consistent BEM methodology for UI elements, and updates documentation for better future maintainability. --- src/ui/NoteCard.ts | 42 ++- src/ui/TaskCard.ts | 42 +-- src/utils/helpers.ts | 8 +- src/views/TaskListView.ts | 2 +- styles/README.md | 50 ++- styles/agenda.css | 481 ---------------------------- styles/base.css | 465 --------------------------- styles/calendar.css | 17 - styles/filters.css | 575 --------------------------------- styles/kanban.css | 647 -------------------------------------- styles/modals.css | 378 ---------------------- styles/tasks.css | 13 - 12 files changed, 75 insertions(+), 2645 deletions(-) delete mode 100644 styles/agenda.css delete mode 100644 styles/calendar.css delete mode 100644 styles/filters.css delete mode 100644 styles/kanban.css delete mode 100644 styles/modals.css delete mode 100644 styles/tasks.css diff --git a/src/ui/NoteCard.ts b/src/ui/NoteCard.ts index 4e64adc2..068a2693 100644 --- a/src/ui/NoteCard.ts +++ b/src/ui/NoteCard.ts @@ -35,9 +35,6 @@ export function createNoteCard(note: NoteInfo, plugin: TaskNotesPlugin, options: if (isDailyNote) cardClasses.push('note-card--daily-note'); cardClasses.push('note-card--compact', 'note-card--shadow-light'); - // Legacy support - keep old classes for backward compatibility during transition - cardClasses.push('tasknotes-card', 'tasknotes-card--compact', 'tasknotes-card--shadow-light', 'note-item'); - if (isDailyNote) cardClasses.push('daily-note-item'); item.className = cardClasses.join(' '); item.dataset.notePath = note.path; @@ -45,25 +42,25 @@ export function createNoteCard(note: NoteInfo, plugin: TaskNotesPlugin, options: // Daily note badge (if enabled and applicable) if (opts.showDailyNoteBadge && isDailyNote) { const dailyBadge = item.createSpan({ - cls: 'note-card__badge daily-note-badge', // BEM + legacy class + cls: 'note-card__badge', text: 'Daily', attr: { title: 'Daily Note' } }); } // Main content container - const contentContainer = item.createDiv({ cls: 'note-card__content note-content' }); // BEM + legacy class + const contentContainer = item.createDiv({ cls: 'note-card__content' }); // Title const title = contentContainer.createDiv({ - cls: 'note-card__title note-title', // BEM + legacy class + cls: 'note-card__title', text: note.title }); // Tags section (separate from other metadata) if (opts.showTags && note.tags && note.tags.length > 0) { // Divider line - const divider = contentContainer.createEl('div', { cls: 'note-card__divider note-divider' }); // BEM + legacy class + const divider = contentContainer.createEl('div', { cls: 'note-card__divider' }); // Tags line const tagsToShow = note.tags.slice(0, opts.maxTags); @@ -75,7 +72,7 @@ export function createNoteCard(note: NoteInfo, plugin: TaskNotesPlugin, options: } const tagsLine = contentContainer.createEl('div', { - cls: 'note-card__tags-text note-tags-line', // BEM + legacy class + cls: 'note-card__tags-text', text: tagsText }); } @@ -86,7 +83,7 @@ export function createNoteCard(note: NoteInfo, plugin: TaskNotesPlugin, options: ? format(new Date(note.createdDate), 'MMM d, yyyy h:mm a') : note.createdDate; const dateEl = contentContainer.createDiv({ - cls: 'note-card__metadata note-metadata-line', // BEM + legacy class + cls: 'note-card__metadata', text: `Created: ${dateStr}`, attr: { title: `Created: ${dateStr}` } }); @@ -94,7 +91,7 @@ export function createNoteCard(note: NoteInfo, plugin: TaskNotesPlugin, options: if (opts.showPath) { const pathEl = contentContainer.createDiv({ - cls: 'note-card__metadata note-metadata-line', // BEM + legacy class + cls: 'note-card__metadata', text: note.path, attr: { title: `Path: ${note.path}` } }); @@ -142,20 +139,17 @@ export function updateNoteCard(element: HTMLElement, note: NoteInfo, plugin: Tas if (isDailyNote) cardClasses.push('note-card--daily-note'); cardClasses.push('note-card--compact', 'note-card--shadow-light'); - // Legacy support - keep old classes for backward compatibility during transition - cardClasses.push('tasknotes-card', 'tasknotes-card--compact', 'tasknotes-card--shadow-light', 'note-item'); - if (isDailyNote) cardClasses.push('daily-note-item'); element.className = cardClasses.join(' '); - // Update title using both BEM and legacy selectors - const titleEl = element.querySelector('.note-card__title, .note-title, .note-item-title') as HTMLElement; + // Update title + const titleEl = element.querySelector('.note-card__title') as HTMLElement; if (titleEl) { titleEl.textContent = note.title; } - // Update created date using both BEM and legacy selectors - const dateEl = element.querySelector('.note-card__metadata, .note-metadata-line, .note-item-date') as HTMLElement; + // Update created date + const dateEl = element.querySelector('.note-card__metadata') as HTMLElement; if (dateEl && opts.showCreatedDate && note.createdDate) { const dateStr = note.createdDate.indexOf('T') > 0 ? format(new Date(note.createdDate), 'MMM d, yyyy h:mm a') @@ -163,14 +157,14 @@ export function updateNoteCard(element: HTMLElement, note: NoteInfo, plugin: Tas dateEl.textContent = `Created: ${dateStr}`; } - // Update path using both BEM and legacy selectors - const pathEl = element.querySelector('.note-card__metadata, .note-metadata-line, .note-item-path') as HTMLElement; + // Update path + const pathEl = element.querySelector('.note-card__metadata') as HTMLElement; if (pathEl && opts.showPath) { pathEl.textContent = note.path; } - // Update tags using both BEM and legacy selectors - const tagContainer = element.querySelector('.note-card__tags, .note-tags-line, .note-item-tags') as HTMLElement; + // Update tags + const tagContainer = element.querySelector('.note-card__tags-text') as HTMLElement; if (tagContainer && opts.showTags && note.tags && note.tags.length > 0) { // For the new BEM structure, update the text content directly const tagsToShow = note.tags.slice(0, opts.maxTags); @@ -183,9 +177,9 @@ export function updateNoteCard(element: HTMLElement, note: NoteInfo, plugin: Tas tagContainer.textContent = tagsText; } - // Add update animation with new BEM class - element.classList.add('note-card--updated', 'note-updated'); // BEM + legacy class + // Add update animation + element.classList.add('note-card--updated'); setTimeout(() => { - element.classList.remove('note-card--updated', 'note-updated'); + element.classList.remove('note-card--updated'); }, 1000); } \ No newline at end of file diff --git a/src/ui/TaskCard.ts b/src/ui/TaskCard.ts index 59fb1a3f..6be0984e 100644 --- a/src/ui/TaskCard.ts +++ b/src/ui/TaskCard.ts @@ -61,13 +61,6 @@ export function createTaskCard(task: TaskInfo, plugin: TaskNotesPlugin, options: cardClasses.push(`task-card--status-${effectiveStatus}`); } - // Legacy support - keep old classes for backward compatibility during transition - cardClasses.push('tasknotes-card', 'tasknotes-card--normal', 'tasknotes-card--flex'); - if (task.archived) cardClasses.push('archived'); - if (isActivelyTracked) cardClasses.push('actively-tracked'); - if (isCompleted) cardClasses.push('task-completed'); - if (isRecurring) cardClasses.push('task-recurring'); - cardClasses.push(effectiveStatus); card.className = cardClasses.join(' '); card.dataset.taskPath = task.path; @@ -89,7 +82,7 @@ export function createTaskCard(task: TaskInfo, plugin: TaskNotesPlugin, options: if (opts.showCheckbox) { const checkbox = card.createEl('input', { type: 'checkbox', - cls: 'task-card__checkbox task-checkbox' // BEM + legacy class + cls: 'task-card__checkbox' }); checkbox.checked = plugin.statusManager.isCompletedStatus(effectiveStatus); @@ -109,7 +102,7 @@ export function createTaskCard(task: TaskInfo, plugin: TaskNotesPlugin, options: } // Status indicator dot - const statusDot = card.createEl('span', { cls: 'task-card__status-dot status-dot' }); // BEM + legacy class + const statusDot = card.createEl('span', { cls: 'task-card__status-dot' }); if (statusConfig) { statusDot.style.backgroundColor = statusConfig.color; } @@ -117,7 +110,7 @@ export function createTaskCard(task: TaskInfo, plugin: TaskNotesPlugin, options: // Recurring task indicator if (task.recurrence) { const recurringIndicator = card.createEl('div', { - cls: 'task-card__recurring-indicator recurring-indicator', // BEM + legacy class + cls: 'task-card__recurring-indicator', attr: { 'aria-label': `Recurring: ${task.recurrence.frequency}` } }); @@ -126,11 +119,11 @@ export function createTaskCard(task: TaskInfo, plugin: TaskNotesPlugin, options: } // Main content container - const contentContainer = card.createEl('div', { cls: 'task-card__content task-content' }); // BEM + legacy class + const contentContainer = card.createEl('div', { cls: 'task-card__content' }); // Context menu icon (appears on hover) const contextIcon = card.createEl('div', { - cls: 'task-card__context-menu task-context-icon', // BEM + legacy class + cls: 'task-card__context-menu', attr: { 'aria-label': 'Task options', 'title': 'More options' @@ -148,7 +141,7 @@ export function createTaskCard(task: TaskInfo, plugin: TaskNotesPlugin, options: // First line: Task title const titleEl = contentContainer.createEl('div', { - cls: 'task-card__title task-title', // BEM + legacy class + cls: 'task-card__title', text: task.title }); if (plugin.statusManager.isCompletedStatus(effectiveStatus)) { @@ -156,7 +149,7 @@ export function createTaskCard(task: TaskInfo, plugin: TaskNotesPlugin, options: } // Second line: Metadata - const metadataLine = contentContainer.createEl('div', { cls: 'task-card__metadata task-metadata-line' }); // BEM + legacy class + const metadataLine = contentContainer.createEl('div', { cls: 'task-card__metadata' }); const metadataItems: string[] = []; // Recurrence info (if recurring) @@ -223,7 +216,7 @@ export function createTaskCard(task: TaskInfo, plugin: TaskNotesPlugin, options: // Add click handlers card.addEventListener('click', (e) => { - if (e.target === card.querySelector('.task-checkbox')) { + if (e.target === card.querySelector('.task-card__checkbox')) { return; // Let checkbox handle its own click } @@ -474,13 +467,6 @@ export function updateTaskCard(element: HTMLElement, task: TaskInfo, plugin: Tas cardClasses.push(`task-card--status-${effectiveStatus}`); } - // Legacy support - keep old classes for backward compatibility during transition - cardClasses.push('tasknotes-card', 'tasknotes-card--normal', 'tasknotes-card--flex'); - if (task.archived) cardClasses.push('archived'); - if (isActivelyTracked) cardClasses.push('actively-tracked'); - if (isCompleted) cardClasses.push('task-completed'); - if (isRecurring) cardClasses.push('task-recurring'); - cardClasses.push(effectiveStatus); element.className = cardClasses.join(' '); element.dataset.status = effectiveStatus; @@ -498,23 +484,23 @@ export function updateTaskCard(element: HTMLElement, task: TaskInfo, plugin: Tas } // Update checkbox if present - const checkbox = element.querySelector('.task-card__checkbox, .task-checkbox') as HTMLInputElement; + const checkbox = element.querySelector('.task-card__checkbox') as HTMLInputElement; if (checkbox) { checkbox.checked = plugin.statusManager.isCompletedStatus(effectiveStatus); } // Update status dot - const statusDot = element.querySelector('.task-card__status-dot, .status-dot') as HTMLElement; + const statusDot = element.querySelector('.task-card__status-dot') as HTMLElement; if (statusDot && statusConfig) { statusDot.style.backgroundColor = statusConfig.color; } // Update recurring indicator - const existingRecurringIndicator = element.querySelector('.task-card__recurring-indicator, .recurring-indicator'); + const existingRecurringIndicator = element.querySelector('.task-card__recurring-indicator'); if (task.recurrence && !existingRecurringIndicator) { // Add recurring indicator if task is now recurring but didn't have one const recurringIndicator = element.createEl('span', { - cls: 'task-card__recurring-indicator recurring-indicator', // BEM + legacy class + cls: 'task-card__recurring-indicator', attr: { 'aria-label': `Recurring: ${task.recurrence.frequency}` } }); statusDot?.insertAdjacentElement('afterend', recurringIndicator); @@ -527,14 +513,14 @@ export function updateTaskCard(element: HTMLElement, task: TaskInfo, plugin: Tas } // Update title - const titleEl = element.querySelector('.task-card__title, .task-title') as HTMLElement; + const titleEl = element.querySelector('.task-card__title') as HTMLElement; if (titleEl) { titleEl.textContent = task.title; titleEl.classList.toggle('completed', plugin.statusManager.isCompletedStatus(effectiveStatus)); } // Update metadata line - const metadataLine = element.querySelector('.task-card__metadata, .task-metadata-line') as HTMLElement; + const metadataLine = element.querySelector('.task-card__metadata') as HTMLElement; if (metadataLine) { const metadataItems: string[] = []; diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts index fff946bc..bd67d4f0 100644 --- a/src/utils/helpers.ts +++ b/src/utils/helpers.ts @@ -211,7 +211,7 @@ export function updateTaskProperty( const mappedFrontmatter = fieldMapper.mapToFrontmatter(propertyUpdates, taskTag); Object.assign(yamlObj, mappedFrontmatter); } else { - // Use legacy field names + // Use default field names Object.assign(yamlObj, propertyUpdates); } @@ -246,10 +246,10 @@ export function updateTaskProperty( const dateModifiedField = fieldMapper.toUserField('dateModified'); yamlObj[dateModifiedField] = format(new Date(), "yyyy-MM-dd'T'HH:mm:ss"); } else { - // Use legacy field names + // Use default field names Object.assign(yamlObj, propertyUpdates); - // Always update dateModified when properties change (legacy) + // Always update dateModified when properties change yamlObj.dateModified = format(new Date(), "yyyy-MM-dd'T'HH:mm:ss"); } @@ -431,7 +431,7 @@ export function extractTaskInfo( return taskInfo; } else { - // Fallback to default field mapping for backward compatibility + // Fallback to default field mapping const defaultMapper = new FieldMapper(DEFAULT_FIELD_MAPPING); const mappedTask = defaultMapper.mapFromFrontmatter(yaml, path); diff --git a/src/views/TaskListView.ts b/src/views/TaskListView.ts index f0419254..ce5eb53d 100644 --- a/src/views/TaskListView.ts +++ b/src/views/TaskListView.ts @@ -1,4 +1,4 @@ -import { Notice, TFile, ItemView, WorkspaceLeaf } from 'obsidian'; +import { Notice, TFile, ItemView, WorkspaceLeaf, Setting } from 'obsidian'; import TaskNotesPlugin from '../main'; import { TASK_LIST_VIEW_TYPE, diff --git a/styles/README.md b/styles/README.md index f1f716e1..9b7511a9 100644 --- a/styles/README.md +++ b/styles/README.md @@ -4,15 +4,38 @@ This directory contains the modular CSS source files for the TaskNotes plugin. T ## File Structure +### Core System Files - `variables.css` - CSS custom properties and design system variables +- `utilities.css` - Utility classes for layout, spacing, typography, and states - `base.css` - Basic styles, animations, card components, and layout -- `components.css` - Reusable UI components, utilities, and modals -- `calendar.css` - Calendar view specific styles -- `tasks.css` - Task list and task item specific styles -- `kanban.css` - Kanban board view specific styles -- `filters.css` - Unified filtering system styles +- `components.css` - Reusable UI components, utilities, and modals + +### BEM Component Files (NEW) +- `task-card-bem.css` - BEM TaskCard component with proper scoping +- `note-card-bem.css` - BEM NoteCard component with proper scoping +- `filter-bar-bem.css` - BEM FilterBar component with proper scoping +- `modal-bem.css` - BEM Modal components with proper scoping + +### View-Specific Files (NEW) +- `task-list-view.css` - BEM TaskListView component +- `calendar-view.css` - BEM CalendarView component +- `kanban-view.css` - BEM KanbanView component +- `agenda-view.css` - BEM AgendaView component +- `notes-view.css` - BEM NotesView component +- `pomodoro-view.css` - BEM PomodoroView component +- `pomodoro-stats-view.css` - BEM PomodoroStatsView component +- `settings-view.css` - BEM SettingsView component + +### Legacy Files (Remaining) +- `pomodoro.css` - Pomodoro view specific styles (to be deprecated) +- `settings.css` - Settings page styles (to be deprecated) +- `tasks-legacy.css` - Legacy task styles for backwards compatibility + +### Documentation Files - `index.css` - Documentation file (not included in build) - `README.md` - This documentation file +- `UTILITIES.md` - Utility class documentation +- `UTILITY-USAGE-GUIDE.md` - Guide for using utility classes ## Development Workflow @@ -29,13 +52,16 @@ This directory contains the modular CSS source files for the TaskNotes plugin. T ### File Loading Order The CSS files are concatenated in dependency order: -1. `variables.css` (loaded first so variables are available everywhere) -2. `base.css` (foundational styles) -3. `components.css` (reusable components) -4. `calendar.css` (view-specific styles) -5. `tasks.css` (view-specific styles) -6. `kanban.css` (view-specific styles) -7. `filters.css` (cross-view filtering system) +1. `variables.css` (CSS custom properties - loaded first) +2. `utilities.css` (utility classes) +3. `base.css` (foundational styles) +4. `task-card-bem.css` (BEM TaskCard component) +5. `note-card-bem.css` (BEM NoteCard component) +6. `filter-bar-bem.css` (BEM FilterBar component) +7. `modal-bem.css` (BEM Modal components) +8. View-specific BEM files (task-list-view, calendar-view, kanban-view, etc.) +9. `components.css` (general components) +10. Legacy files (`pomodoro.css`, `settings.css`) ## CI/CD Process diff --git a/styles/agenda.css b/styles/agenda.css deleted file mode 100644 index a31efa37..00000000 --- a/styles/agenda.css +++ /dev/null @@ -1,481 +0,0 @@ -/* Material Design 3 Enhanced Agenda View */ - -/* Main Container */ -.agenda-view-container { - padding: var(--cs-spacing-md); - display: flex; - flex-direction: column; - gap: var(--cs-spacing-md); - max-width: 100%; - background: var(--cs-surface-container-lowest); - border-radius: var(--cs-radius-lg); -} - -/* Header Structure */ -.agenda-header-section { - display: flex; - align-items: center; - justify-content: center; - padding: var(--cs-spacing-md) 0; - border-bottom: 1px solid color-mix(in srgb, var(--text-normal) 0.12, transparent); - margin-bottom: var(--cs-spacing-md); - position: relative; -} - -.agenda-header-content { - display: flex; - align-items: center; - gap: var(--cs-spacing-lg); -} - -/* Period Title - Material Design headline style */ -.agenda-period-title { - font-size: var(--cs-text-headline-small); - font-weight: 500; - color: var(--text-normal); - text-align: center; - min-width: 240px; - padding: var(--cs-spacing-sm) var(--cs-spacing-md); - letter-spacing: 0.01em; - line-height: 1.3; -} - -/* Navigation Arrows - Material Design icon buttons */ -.nav-arrow-button { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - width: var(--cs-touch-target); - height: var(--cs-touch-target); - padding: 0; - border: none; - border-radius: 50%; - background: transparent; - color: var(--text-normal); - font-size: 1.25rem; - font-weight: 500; - cursor: pointer; - user-select: none; - transition: all var(--cs-motion-duration-short2) var(--cs-motion-easing-standard); - overflow: hidden; -} - -.nav-arrow-button::before { - content: ''; - position: absolute; - inset: 0; - border-radius: inherit; - background: currentColor; - opacity: 0; - transition: opacity var(--cs-motion-duration-short2) var(--cs-motion-easing-standard); -} - -.nav-arrow-button:hover::before { - opacity: var(--cs-state-hover); -} - -.nav-arrow-button:focus-visible { - outline: 2px solid var(--interactive-accent); - outline-offset: 2px; -} - -.nav-arrow-button:active { - transform: scale(0.95); -} - -.nav-arrow-button:active::before { - opacity: var(--cs-state-pressed); -} - -/* Settings Section - Material Design surface container */ -.agenda-settings-section { - display: flex; - align-items: center; - justify-content: space-between; - padding: var(--cs-spacing-md); - background: var(--cs-surface-container); - border: 1px solid color-mix(in srgb, var(--text-normal) 0.12, transparent); - border-radius: var(--cs-radius-lg); - gap: var(--cs-spacing-md); - flex-wrap: wrap; - margin-bottom: var(--cs-spacing-md); - box-shadow: var(--cs-elevation-1); -} - -.agenda-left-controls { - display: flex; - align-items: center; - gap: var(--cs-spacing-sm); -} - -.agenda-right-controls { - display: flex; - align-items: center; - gap: var(--cs-spacing-md); -} - -/* Period Selector - Material Design select field */ -.agenda-period-select { - appearance: none; - padding: var(--cs-spacing-sm) var(--cs-spacing-lg) var(--cs-spacing-sm) var(--cs-spacing-md); - border: 1px solid color-mix(in srgb, var(--text-normal) 0.38, transparent); - border-radius: var(--cs-radius-sm); - background: var(--cs-surface-container-highest); - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); - background-position: right var(--cs-spacing-sm) center; - background-repeat: no-repeat; - background-size: 16px; - color: var(--text-normal); - font-family: inherit; - font-size: var(--cs-text-body-medium); - font-weight: 400; - min-width: 120px; - min-height: var(--cs-input-height-md); - cursor: pointer; - transition: all var(--cs-motion-duration-short2) var(--cs-motion-easing-standard); -} - -.agenda-period-select:hover { - border-color: var(--text-normal); - background-color: color-mix(in srgb, var(--text-normal) var(--cs-state-hover), var(--cs-surface-container-highest)); -} - -.agenda-period-select:focus { - outline: none; - border-color: var(--interactive-accent); - background-color: color-mix(in srgb, var(--interactive-accent) var(--cs-state-focus), var(--cs-surface-container-highest)); -} - -/* Today Button - Material Design filled tonal button */ -.agenda-today-button { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - gap: var(--cs-spacing-xs); - padding: 0 var(--cs-spacing-lg); - border: none; - border-radius: var(--cs-radius-lg); - background: var(--cs-surface-container-highest); - color: var(--text-normal); - font-family: inherit; - font-size: var(--cs-text-label-large); - font-weight: 500; - line-height: 1.25; - min-height: var(--cs-button-height-md); - cursor: pointer; - user-select: none; - text-decoration: none; - white-space: nowrap; - transition: all var(--cs-motion-duration-short2) var(--cs-motion-easing-standard); - overflow: hidden; -} - -.agenda-today-button:hover { - background: color-mix(in srgb, var(--text-normal) var(--cs-state-hover), var(--cs-surface-container-highest)); - box-shadow: var(--cs-elevation-1); -} - -.agenda-today-button:focus-visible { - outline: 2px solid var(--interactive-accent); - outline-offset: 2px; -} - -.agenda-today-button:active { - background: color-mix(in srgb, var(--text-normal) var(--cs-state-pressed), var(--cs-surface-container-highest)); - transform: scale(0.98); -} - -/* Simplified Toggle Controls - Let native checkboxes show */ -.agenda-toggle { - display: flex; - align-items: center; - gap: var(--cs-spacing-md); - cursor: pointer; - user-select: none; - font-size: var(--font-ui-medium); - color: var(--text-normal); - padding: var(--cs-spacing-sm); - border-radius: var(--radius-m); - transition: background-color 0.2s ease; -} - -.agenda-toggle:hover { - background: var(--background-modifier-hover); -} - -.agenda-toggle-checkbox { - margin: 0; - cursor: pointer; -} - -/* Content Area */ -.agenda-content { - display: flex; - flex-direction: column; - gap: var(--cs-spacing-sm); -} - -/* Day Headers - Material Design section headers */ -.agenda-day-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: var(--cs-spacing-md) 0 var(--cs-spacing-sm); - margin-bottom: var(--cs-spacing-sm); - border-bottom: 1px solid color-mix(in srgb, var(--text-normal) 0.12, transparent); - position: relative; -} - -.day-header-text { - display: flex; - align-items: center; - gap: var(--cs-spacing-sm); -} - -.day-name { - font-size: var(--cs-text-title-medium); - font-weight: 500; - color: var(--text-normal); - letter-spacing: 0.01em; - line-height: 1.4; -} - -/* Today Badge - Material Design filled badge */ -.day-name.today-badge { - background: var(--interactive-accent); - color: var(--text-on-accent); - padding: var(--cs-spacing-xs) var(--cs-spacing-md); - border-radius: var(--cs-radius-lg); - font-size: var(--cs-text-label-large); - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.1em; - line-height: 1.2; - display: inline-flex; - align-items: center; - justify-content: center; - min-width: 60px; - min-height: 28px; - box-shadow: var(--cs-elevation-1); -} - -.day-date { - font-size: var(--cs-text-body-medium); - color: var(--text-muted); - font-weight: 400; - letter-spacing: 0.01em; -} - -/* Item Count Badge - Material Design secondary badge */ -.item-count-badge { - background: var(--cs-surface-container-high); - color: var(--text-normal); - border: 1px solid color-mix(in srgb, var(--text-normal) 0.12, transparent); - border-radius: var(--cs-radius-lg); - padding: var(--cs-spacing-xs) var(--cs-spacing-sm); - font-size: var(--cs-text-label-small); - font-weight: 500; - line-height: 1.2; - display: inline-flex; - align-items: center; - justify-content: center; - min-width: 24px; - min-height: 24px; - text-align: center; -} - -/* Empty States - Material Design empty state card */ -.empty-agenda-message { - padding: var(--cs-spacing-xxl) var(--cs-spacing-lg); - text-align: center; - background: var(--cs-surface-container); - border: 1px solid color-mix(in srgb, var(--text-normal) 0.12, transparent); - border-radius: var(--cs-radius-xl); - margin: var(--cs-spacing-lg) 0; - box-shadow: var(--cs-elevation-1); -} - -.empty-agenda-message p { - margin: 0 0 var(--cs-spacing-md) 0; - color: var(--text-muted); - font-size: var(--cs-text-body-large); - line-height: 1.5; - font-weight: 400; -} - -.empty-agenda-message p:last-child { - margin-bottom: 0; -} - -.empty-tip { - font-style: italic; - font-size: var(--cs-text-body-medium) !important; - color: var(--text-muted); - margin-top: var(--cs-spacing-sm) !important; -} - -.empty-tip span { - font-weight: 500; - color: var(--text-normal); - font-style: normal; -} - -/* Flat List Layout */ -.agenda-item-list.flat-list { - display: flex; - flex-direction: column; - gap: var(--cs-spacing-xs); -} - -.agenda-item-list.flat-list .task-card, -.agenda-item-list.flat-list .note-card { - border-left: 3px solid var(--interactive-accent); - padding-left: var(--cs-spacing-sm); -} - -.agenda-item-list.flat-list .note-date { - display: inline-block; - margin-left: var(--cs-spacing-sm); - padding: var(--cs-spacing-xs) var(--cs-spacing-sm); - background: var(--background-secondary); - border-radius: var(--cs-radius-sm); - font-size: var(--cs-text-xs); - color: var(--text-muted); - font-weight: 500; -} - -/* Task and Note Cards in Agenda - tighter spacing */ -.agenda-content .tasknotes-card { - margin-bottom: 0; -} - -.agenda-content .tasks-container { - margin-bottom: 8px; -} - -/* Removed all view-specific card styling - cards should be theme-independent */ - -/* Loading States - Material Design loading card */ -.cache-loading-indicator { - display: flex; - align-items: center; - justify-content: center; - gap: var(--cs-spacing-sm); - padding: var(--cs-spacing-lg); - color: var(--text-muted); - font-size: var(--cs-text-body-medium); - font-style: italic; - font-weight: 400; - background: var(--cs-surface-container); - border: 1px solid color-mix(in srgb, var(--text-normal) 0.12, transparent); - border-radius: var(--cs-radius-lg); - margin-bottom: var(--cs-spacing-md); - box-shadow: var(--cs-elevation-1); -} - -.cache-loading-indicator::before { - content: ''; - width: 16px; - height: 16px; - border: 2px solid color-mix(in srgb, var(--text-muted) 0.3, transparent); - border-top: 2px solid var(--text-muted); - border-radius: 50%; - animation: spin 1s linear infinite; - flex-shrink: 0; -} - -/* Error States - Material Design error card */ -.error-message { - padding: var(--cs-spacing-lg); - text-align: center; - color: var(--text-error); - background: color-mix(in srgb, var(--text-error) 0.05, var(--cs-surface-container)); - border: 1px solid color-mix(in srgb, var(--text-error) 0.3, transparent); - border-radius: var(--cs-radius-lg); - font-size: var(--cs-text-body-medium); - font-weight: 500; - line-height: 1.5; - box-shadow: var(--cs-elevation-1); -} - -/* Responsive Design */ -@media (max-width: 768px) { - .agenda-view-container { - padding: var(--cs-spacing-sm); - } - - .agenda-header-content { - gap: var(--cs-spacing-sm); - } - - .agenda-period-title { - font-size: var(--cs-text-lg); - min-width: 150px; - } - - .nav-arrow-button { - min-width: 36px; - min-height: 36px; - font-size: 1.1rem; - } - - .agenda-settings-section { - flex-direction: column; - align-items: stretch; - gap: var(--cs-spacing-sm); - } - - .agenda-left-controls, - .agenda-right-controls { - justify-content: space-between; - width: 100%; - } - - .agenda-right-controls { - gap: var(--cs-spacing-sm); - } - - .agenda-day-header { - flex-direction: column; - align-items: flex-start; - gap: var(--cs-spacing-xs); - } - - .day-header-text { - width: 100%; - justify-content: space-between; - } - - .item-count-badge { - align-self: flex-end; - } -} - -@media (max-width: 480px) { - .agenda-header-content { - gap: var(--cs-spacing-xs); - } - - .agenda-period-title { - font-size: var(--cs-text-base); - min-width: 120px; - } - - .nav-arrow-button { - min-width: 32px; - min-height: 32px; - font-size: 1rem; - } - - .agenda-left-controls, - .agenda-right-controls { - flex-direction: column; - align-items: stretch; - } - - .agenda-toggle { - justify-content: space-between; - } -} \ No newline at end of file diff --git a/styles/base.css b/styles/base.css index 9644e7e6..f9490ffa 100644 --- a/styles/base.css +++ b/styles/base.css @@ -906,468 +906,3 @@ gap: var(--cs-spacing-sm); } -/* ================================================ - LEGACY COMPATIBILITY (Will be phased out) - ================================================ */ - -/* Base card class with common properties - DEPRECATED */ -.tasknotes-card { - border: 1px solid var(--background-modifier-border); - background: var(--background-primary); - cursor: pointer; - transition: all var(--cs-transition-fast); - border-radius: var(--cs-radius-sm); - font-size: var(--cs-text-base); - line-height: 1.4; -} - -.tasknotes-card:hover { - background: var(--background-modifier-hover); - border-color: var(--background-modifier-border-hover); -} - -/* Card modifiers for different sizes - DEPRECATED */ -.tasknotes-card--compact { - padding: var(--cs-spacing-sm); - border-radius: var(--cs-radius-sm); -} - -.tasknotes-card--normal { - padding: var(--cs-spacing-sm) var(--cs-spacing-md); - border-radius: var(--cs-radius-sm); -} - -.tasknotes-card--spacious { - padding: var(--cs-spacing-lg); - border-radius: var(--cs-radius-md); -} - -/* Card modifiers for different shadows */ -.tasknotes-card--shadow-light { - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); -} - -.tasknotes-card--shadow-medium { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1); -} - -/* Card modifiers for layout */ -.tasknotes-card--flex { - display: flex; - align-items: flex-start; - gap: var(--cs-spacing-sm); - margin-bottom: 0; - border-radius: 0; - border-bottom: 1px solid var(--background-modifier-border); -} - -.tasknotes-card--flex-column { - display: flex; - flex-direction: column; - gap: var(--cs-spacing-sm); -} - -/* Active time tracking indicator */ -.task-card.actively-tracked { - position: relative; -} - -.task-card.actively-tracked::before { - content: ''; - position: absolute; - top: -2px; - left: -2px; - right: -2px; - bottom: -2px; - background: linear-gradient(45deg, var(--interactive-accent), var(--interactive-accent-hover)); - border-radius: var(--radius-m); - z-index: -1; - animation: tracking-pulse 2s ease-in-out infinite; -} - -/* Visual feedback for updates */ -.task-updated { - border-left: 3px solid var(--interactive-accent); - transition: border-left 1500ms ease-out; -} - -/* Loading states optimization */ -.loading-indicator { - transition: opacity var(--cs-transition-fast); -} - -.loading-indicator.is-hidden { - opacity: 0; - pointer-events: none; -} - -/* Task Card Priority Indicators - Theme-aware styling */ -.task-card { - /* Ensure priority border is visible with proper sizing */ - border-left-width: 3px; - border-left-style: solid; - border-left-color: var(--priority-color, var(--background-modifier-border)); -} - -/* Priority-specific styling using theme colors */ -.task-card.priority-high, -.task-card[data-priority="high"] { - border-left-color: var(--priority-high-color, var(--text-error)); -} - -.task-card.priority-normal, -.task-card.priority-medium, -.task-card[data-priority="normal"], -.task-card[data-priority="medium"] { - border-left-color: var(--priority-normal-color, var(--interactive-accent)); -} - -.task-card.priority-low, -.task-card[data-priority="low"] { - border-left-color: var(--priority-low-color, var(--text-muted)); -} - -/* Performance-optimized DOM transitions */ -.tasknotes-card { - transition: transform var(--cs-transition-fast), box-shadow var(--cs-transition-fast); - will-change: transform, box-shadow; -} - -.tasknotes-card:hover { - transform: translateY(-1px); - box-shadow: var(--cs-elevation-2); -} - -/* Cache loading states */ -.cache-loading-indicator { - position: sticky; - top: 0; - background: var(--background-primary); - border: 1px solid var(--border-color); - border-radius: var(--cs-radius-sm); - padding: var(--cs-spacing-sm) var(--cs-spacing-md); - margin-bottom: var(--cs-spacing-md); - font-size: var(--cs-text-sm); - color: var(--text-muted); - z-index: 10; - animation: task-fade-in 300ms ease-out; -} - -/* ===== STANDARDIZED COMPONENT CLASSES ===== */ - -/* Button Component System */ -.cs-button { - display: inline-flex; - align-items: center; - justify-content: center; - gap: var(--cs-spacing-xs); - padding: var(--cs-spacing-xs) var(--cs-spacing-sm); - border: 1px solid var(--background-modifier-border); - border-radius: var(--cs-radius-sm); - background: var(--background-primary); - color: var(--text-normal); - font-size: var(--cs-text-sm); - font-weight: 500; - cursor: pointer; - transition: all var(--cs-transition-fast); - min-height: var(--cs-button-height-md); - white-space: nowrap; - user-select: none; -} - -.cs-button:hover { - background: var(--background-modifier-hover); - border-color: var(--background-modifier-border-hover); - transform: translateY(-1px); - box-shadow: var(--cs-shadow-sm); -} - -.cs-button:active { - transform: translateY(0); - box-shadow: none; -} - -.cs-button:focus { - outline: 2px solid var(--interactive-accent); - outline-offset: 2px; -} - -/* Button size modifiers */ -.cs-button--sm { - padding: var(--cs-spacing-xs); - font-size: var(--cs-text-xs); - min-height: var(--cs-button-height-sm); -} - -.cs-button--lg { - padding: var(--cs-spacing-sm) var(--cs-spacing-md); - font-size: var(--cs-text-base); - min-height: var(--cs-button-height-lg); -} - -/* Button style modifiers */ -.cs-button--primary { - background: var(--interactive-accent); - color: var(--text-on-accent); - border-color: var(--interactive-accent); -} - -.cs-button--primary:hover { - background: var(--interactive-accent-hover); - border-color: var(--interactive-accent-hover); -} - -.cs-button--secondary { - background: var(--background-secondary); - border-color: var(--background-modifier-border); -} - -.cs-button--ghost { - background: transparent; - border-color: transparent; -} - -.cs-button--ghost:hover { - background: var(--background-modifier-hover); -} - -.cs-button--icon { - padding: var(--cs-spacing-xs); - min-width: var(--cs-button-height-md); -} - -.cs-button--icon.cs-button--sm { - min-width: var(--cs-button-height-sm); -} - -.cs-button--icon.cs-button--lg { - min-width: var(--cs-button-height-lg); -} - -/* Input Component System */ -.cs-input { - padding: var(--cs-spacing-xs) var(--cs-spacing-sm); - border: 1px solid var(--background-modifier-border); - border-radius: var(--cs-radius-sm); - background: var(--background-primary); - color: var(--text-normal); - font-size: var(--cs-text-sm); - transition: all var(--cs-transition-fast); - min-height: var(--cs-input-height-md); - box-sizing: border-box; -} - -.cs-input:hover { - border-color: var(--background-modifier-border-hover); -} - -.cs-input:focus { - outline: none; - border-color: var(--interactive-accent); - box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2); -} - -.cs-input--sm { - font-size: var(--cs-text-xs); - min-height: var(--cs-input-height-sm); - padding: 2px var(--cs-spacing-xs); -} - -.cs-input--lg { - font-size: var(--cs-text-base); - min-height: var(--cs-input-height-lg); - padding: var(--cs-spacing-sm) var(--cs-spacing-md); -} - -/* Select Component System */ -.cs-select { - padding: var(--cs-spacing-xs) var(--cs-spacing-sm); - border: 1px solid var(--background-modifier-border); - border-radius: var(--cs-radius-sm); - background: var(--background-primary); - color: var(--text-normal); - font-size: var(--cs-text-sm); - cursor: pointer; - transition: all var(--cs-transition-fast); - min-height: var(--cs-input-height-md); - box-sizing: border-box; -} - -.cs-select:hover { - border-color: var(--background-modifier-border-hover); -} - -.cs-select:focus { - outline: none; - border-color: var(--interactive-accent); - box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2); -} - -.cs-select--sm { - font-size: var(--cs-text-xs); - min-height: var(--cs-input-height-sm); - padding: 2px var(--cs-spacing-xs); -} - -.cs-select--lg { - font-size: var(--cs-text-base); - min-height: var(--cs-input-height-lg); - padding: var(--cs-spacing-sm) var(--cs-spacing-md); -} - -/* Dropdown Component System */ -.cs-dropdown { - position: absolute; - background: var(--background-primary); - border: 1px solid var(--background-modifier-border); - border-radius: var(--cs-radius-sm); - box-shadow: var(--cs-shadow-lg); - z-index: var(--cs-z-dropdown); - max-height: 200px; - overflow-y: auto; - margin-top: 2px; -} - -.cs-dropdown__item { - padding: var(--cs-spacing-xs) var(--cs-spacing-sm); - cursor: pointer; - font-size: var(--cs-text-sm); - transition: background-color var(--cs-transition-fast); - border-bottom: 1px solid var(--background-modifier-border-hover); -} - -.cs-dropdown__item:last-child { - border-bottom: none; -} - -.cs-dropdown__item:hover { - background: var(--background-modifier-hover); -} - -.cs-dropdown__item--selected { - background: var(--background-modifier-form-field); -} - -/* Utility Classes for Component Spacing */ -.cs-gap-xs { gap: var(--cs-spacing-xs); } -.cs-gap-sm { gap: var(--cs-spacing-sm); } -.cs-gap-md { gap: var(--cs-spacing-md); } -.cs-gap-lg { gap: var(--cs-spacing-lg); } - -.cs-p-xs { padding: var(--cs-spacing-xs); } -.cs-p-sm { padding: var(--cs-spacing-sm); } -.cs-p-md { padding: var(--cs-spacing-md); } -.cs-p-lg { padding: var(--cs-spacing-lg); } - -.cs-m-xs { margin: var(--cs-spacing-xs); } -.cs-m-sm { margin: var(--cs-spacing-sm); } -.cs-m-md { margin: var(--cs-spacing-md); } -.cs-m-lg { margin: var(--cs-spacing-lg); } - -/* ===== RESPONSIVE DESIGN IMPROVEMENTS ===== */ - -/* Consistent breakpoints */ -@media (max-width: 768px) { - /* Increase touch targets on tablets and mobile */ - .cs-button, .cs-input, .cs-select { - min-height: var(--cs-touch-target-lg); - } - - /* Increase spacing for better touch interaction */ - .cs-gap-xs { gap: var(--cs-spacing-sm); } - .cs-gap-sm { gap: var(--cs-spacing-md); } - - /* Stack elements more aggressively */ - .cs-responsive-stack { - flex-direction: column !important; - align-items: stretch !important; - } -} - -@media (max-width: 480px) { - /* Even larger touch targets on phones */ - .cs-button, .cs-input, .cs-select { - min-height: var(--cs-touch-target-lg); - font-size: var(--cs-text-base); - } - - /* Larger spacing on mobile */ - :root { - --cs-spacing-xs: 4px; - --cs-spacing-sm: 8px; - --cs-spacing-md: 16px; - --cs-spacing-lg: 24px; - } -} - -/* ===== ACCESSIBILITY IMPROVEMENTS ===== */ - -/* Enhanced focus management */ -.cs-button:focus-visible, -.cs-input:focus-visible, -.cs-select:focus-visible { - outline: 2px solid var(--interactive-accent); - outline-offset: 2px; - box-shadow: 0 0 0 4px rgba(var(--interactive-accent-rgb), 0.2); -} - -/* High contrast mode support */ -@media (prefers-contrast: high) { - .cs-button, .cs-input, .cs-select { - border-width: 2px; - } - - .cs-button:focus-visible, - .cs-input:focus-visible, - .cs-select:focus-visible { - outline-width: 3px; - } -} - -/* Reduced motion support */ -@media (prefers-reduced-motion: reduce) { - .cs-button, .cs-input, .cs-select, - .cs-dropdown, .cs-dropdown__item { - transition: none; - } - - .cs-button:hover { - transform: none; - } -} - -/* Screen reader support */ -.cs-sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -/* Focus trap for modals */ -.cs-focus-trap:focus { - outline: none; -} - -/* Skip link for keyboard navigation */ -.cs-skip-link { - position: absolute; - top: -40px; - left: var(--cs-spacing-sm); - background: var(--interactive-accent); - color: var(--text-on-accent); - padding: var(--cs-spacing-sm) var(--cs-spacing-md); - border-radius: var(--cs-radius-sm); - text-decoration: none; - z-index: var(--cs-z-tooltip); - transition: top var(--cs-transition-normal); -} - -.cs-skip-link:focus { - top: var(--cs-spacing-sm); -} \ No newline at end of file diff --git a/styles/calendar.css b/styles/calendar.css deleted file mode 100644 index 59d597a4..00000000 --- a/styles/calendar.css +++ /dev/null @@ -1,17 +0,0 @@ -/* ================================================ - CALENDAR VIEW - LEGACY STYLES (DEPRECATED) - ================================================ - - This file contains legacy styles that are being replaced by the new BEM structure. - These styles should only be used as fallbacks and will be removed in future versions. - New code should use the styles in calendar-view.css - - ================================================ */ - -/* Legacy styles maintained for backwards compatibility only */ - -/* Spin animation for loading indicators */ -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} \ No newline at end of file diff --git a/styles/filters.css b/styles/filters.css deleted file mode 100644 index b1b5dac2..00000000 --- a/styles/filters.css +++ /dev/null @@ -1,575 +0,0 @@ -/* ===== UNIFIED FILTERING SYSTEM STYLES ===== */ - -/* FilterBar Container */ -.filter-bar-container, -.agenda-filter-bar-container, -.kanban-filter-bar-container { - margin-bottom: var(--cs-spacing-md); - padding: var(--cs-spacing-md); - background: var(--background-secondary); - border: 1px solid var(--background-modifier-border); - border-radius: var(--cs-radius-md); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); -} - -/* FilterBar Main Container */ -.filter-bar { - display: flex; - flex-direction: column; - gap: var(--cs-spacing-sm); -} - -/* FilterBar Main Row */ -.filter-bar-main { - display: flex; - align-items: center; - gap: var(--cs-spacing-md); - flex-wrap: wrap; -} - -/* Search Section */ -.filter-bar-search { - position: relative; - flex: 1; - min-width: 200px; -} - -.filter-bar-search-input { - width: 100%; - padding: var(--cs-spacing-xs) var(--cs-spacing-md); - border: 1px solid var(--background-modifier-border); - border-radius: var(--cs-radius-sm); - background: var(--background-primary); - color: var(--text-normal); - font-size: 14px; - transition: all 0.2s ease; -} - -.filter-bar-search-input:focus { - outline: none; - border-color: var(--interactive-accent); - box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2); -} - -.filter-bar-search-input::placeholder { - color: var(--text-muted); -} - -/* Controls Section */ -.filter-bar-controls { - display: flex; - align-items: center; - gap: var(--cs-spacing-md); - flex-wrap: wrap; -} - -/* Sort Controls */ -.filter-bar-sort { - display: flex; - align-items: center; - gap: var(--cs-spacing-xs); -} - -.filter-bar-label { - font-size: 13px; - color: var(--text-muted); - font-weight: 500; - white-space: nowrap; -} - -.filter-bar-select { - padding: 6px 10px; - border: 1px solid var(--background-modifier-border); - border-radius: var(--cs-radius-sm); - background: var(--background-primary); - color: var(--text-normal); - font-size: 13px; - min-width: 100px; - cursor: pointer; - transition: all 0.2s ease; -} - -.filter-bar-select:focus { - outline: none; - border-color: var(--interactive-accent); - box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2); -} - -.filter-bar-select:hover { - border-color: var(--background-modifier-border-hover); -} - -.filter-bar-sort-direction { - padding: 6px 8px; - border: 1px solid var(--background-modifier-border); - border-radius: var(--cs-radius-sm); - background: var(--background-primary); - color: var(--text-normal); - font-size: 14px; - cursor: pointer; - transition: all 0.2s ease; - min-width: 32px; - text-align: center; -} - -.filter-bar-sort-direction:hover { - background: var(--background-modifier-hover); -} - -.filter-bar-sort-direction:focus { - outline: none; - border-color: var(--interactive-accent); - box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2); -} - -/* Group Controls */ -.filter-bar-group { - display: flex; - align-items: center; - gap: var(--cs-spacing-xs); -} - -/* Toggle Controls */ -.filter-toggle { - display: flex; - align-items: center; - gap: var(--cs-spacing-xs); - cursor: pointer; - user-select: none; -} - -.filter-toggle-checkbox { - margin: 0; - cursor: pointer; -} - -.filter-toggle-label { - font-size: var(--cs-text-sm); - color: var(--text-muted); - cursor: pointer; - font-weight: 500; -} - -.filter-toggle:hover .filter-toggle-label { - color: var(--text-normal); -} - -/* Advanced Filters Toggle Button */ -.filter-bar-advanced-toggle { - padding: 6px 12px; - border: 1px solid var(--background-modifier-border); - border-radius: var(--cs-radius-sm); - background: var(--background-primary); - color: var(--text-muted); - font-size: 13px; - cursor: pointer; - transition: all 0.2s ease; - display: flex; - align-items: center; - gap: var(--cs-spacing-xs); - white-space: nowrap; -} - -.filter-bar-advanced-toggle:hover { - background: var(--background-modifier-hover); - color: var(--text-normal); -} - -.filter-bar-advanced-toggle.active { - background: var(--interactive-accent); - color: var(--text-on-accent); - border-color: var(--interactive-accent); -} - -.filter-bar-active-indicator { - background: var(--interactive-accent); - color: var(--text-on-accent); - border-radius: 50%; - padding: 1px 5px; - font-size: 10px; - font-weight: 500; - margin-left: 4px; - line-height: 1; - min-width: 14px; - text-align: center; -} - -/* Advanced Filters Panel */ -.filter-bar-advanced { - border-top: 1px solid var(--background-modifier-border); - padding-top: var(--cs-spacing-sm); - margin-top: var(--cs-spacing-sm); - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: var(--cs-spacing-md); -} - -.filter-bar-advanced-item { - display: flex; - flex-direction: column; - gap: var(--cs-spacing-xs); -} - -.filter-bar-advanced-item .filter-bar-label { - margin-bottom: 4px; -} - -.filter-bar-advanced-item .filter-bar-select { - min-width: auto; - width: 100%; -} - -.filter-bar-checkbox-label { - display: flex; - align-items: center; - gap: var(--cs-spacing-xs); - cursor: pointer; - font-size: 13px; - color: var(--text-normal); - user-select: none; -} - -.filter-bar-checkbox { - margin: 0; - cursor: pointer; -} - -/* Style radio buttons the same as checkboxes in filter groups */ -.filter-bar-checkbox-group input[type="radio"] { - margin: 0; - cursor: pointer; -} - -/* Checkbox Groups */ -.filter-bar-checkbox-group { - display: flex; - flex-direction: column; - gap: 2px; - max-height: 150px; - overflow-y: auto; - border: 1px solid var(--background-modifier-border); - border-radius: var(--cs-radius-sm); - padding: 6px; - background: var(--background-primary); -} - -.filter-bar-checkbox-wrapper { - display: flex; - align-items: center; -} - -.filter-bar-checkbox-group .filter-bar-checkbox-label { - padding: 4px 6px; - border-radius: var(--cs-radius-sm); - transition: background-color 0.1s ease; - width: 100%; - font-size: 13px; - display: flex; - align-items: center; - gap: 6px; -} - -.filter-bar-checkbox-group .filter-bar-checkbox-label:hover { - background: var(--background-modifier-hover); -} - -.filter-bar-checkbox-group .filter-bar-checkbox { - flex-shrink: 0; -} - -/* Empty state for checkbox groups */ -.filter-bar-checkbox-group:empty::after { - content: "No options available"; - color: var(--text-muted); - font-style: italic; - font-size: 12px; - padding: 8px; - text-align: center; -} - -/* Multi-select Dropdowns */ -.filter-multiselect { - position: relative; - display: inline-block; -} - -.filter-multiselect-button { - padding: var(--cs-spacing-xs) var(--cs-spacing-sm); - border: 1px solid var(--background-modifier-border); - border-radius: var(--cs-radius-sm); - background: var(--background-primary); - color: var(--text-normal); - font-size: var(--cs-text-sm); - min-width: 120px; - cursor: pointer; - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--cs-spacing-xs); - transition: all 0.2s ease; -} - -.filter-multiselect-button:hover { - border-color: var(--background-modifier-border-hover); -} - -.filter-multiselect-button.active { - border-color: var(--interactive-accent); - box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2); -} - -.filter-multiselect-dropdown { - position: absolute; - top: 100%; - left: 0; - right: 0; - z-index: 1000; - background: var(--background-primary); - border: 1px solid var(--background-modifier-border); - border-radius: var(--cs-radius-sm); - box-shadow: var(--shadow-l); - max-height: 200px; - overflow-y: auto; - margin-top: 2px; -} - -.filter-multiselect-option { - padding: var(--cs-spacing-xs) var(--cs-spacing-sm); - cursor: pointer; - display: flex; - align-items: center; - gap: var(--cs-spacing-xs); - font-size: var(--cs-text-sm); - transition: background-color 0.1s ease; -} - -.filter-multiselect-option:hover { - background: var(--background-modifier-hover); -} - -.filter-multiselect-option input[type="checkbox"] { - margin: 0; - cursor: pointer; -} - -/* Filter Chip/Badge Styles */ -.filter-chip { - display: inline-flex; - align-items: center; - gap: var(--cs-spacing-xs); - padding: 2px var(--cs-spacing-xs); - background: var(--interactive-accent); - color: var(--text-on-accent); - border-radius: var(--cs-radius-sm); - font-size: var(--cs-text-xs); - font-weight: 500; -} - -.filter-chip-remove { - background: none; - border: none; - color: inherit; - cursor: pointer; - padding: 0; - font-size: var(--cs-text-xs); - opacity: 0.8; - transition: opacity 0.2s ease; -} - -.filter-chip-remove:hover { - opacity: 1; -} - -/* Clear Filters Button */ -.filter-clear-button { - padding: var(--cs-spacing-xs) var(--cs-spacing-sm); - border: 1px solid var(--background-modifier-border); - border-radius: var(--cs-radius-sm); - background: var(--background-primary); - color: var(--text-muted); - font-size: var(--cs-text-sm); - cursor: pointer; - transition: all 0.2s ease; -} - -.filter-clear-button:hover { - background: var(--background-modifier-hover); - color: var(--text-normal); -} - -.filter-clear-button:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -/* Responsive Design */ -@media (max-width: 768px) { - .filter-bar-container, - .agenda-filter-bar-container, - .kanban-filter-bar-container { - padding: var(--cs-spacing-sm); - } - - .filter-bar-main { - flex-direction: column; - align-items: stretch; - gap: var(--cs-spacing-sm); - } - - .filter-bar-search { - min-width: auto; - width: 100%; - } - - .filter-bar-controls { - justify-content: space-between; - flex-wrap: wrap; - gap: var(--cs-spacing-sm); - } - - .filter-bar-sort, - .filter-bar-group { - flex: 1; - min-width: 0; - } - - .filter-bar-select { - min-width: auto; - width: 100%; - } - - .filter-bar-advanced { - grid-template-columns: 1fr; - gap: var(--cs-spacing-sm); - } -} - -@media (max-width: 480px) { - .filter-bar-controls { - flex-direction: column; - } - - .filter-bar-sort, - .filter-bar-group { - width: 100%; - } -} - -/* Integration with existing view styles */ -.agenda-view-container .filter-bar-container { - margin-bottom: var(--cs-spacing-sm); -} - -.kanban-view .filter-bar-container { - border-radius: var(--cs-radius-md) var(--cs-radius-md) 0 0; - border-bottom: none; -} - -.task-list-view-container .filter-bar-container { - margin-top: var(--cs-spacing-md); -} - -/* Dark mode adjustments */ -.theme-dark .filter-bar-container, -.theme-dark .agenda-filter-bar-container, -.theme-dark .kanban-filter-bar-container { - background: var(--background-primary-alt); -} - -.theme-dark .filter-multiselect-dropdown { - background: var(--background-primary-alt); - border-color: var(--background-modifier-border); -} - -.theme-dark .filter-advanced-toggle.active { - background: var(--interactive-accent); - border-color: var(--interactive-accent); -} - -/* High contrast mode support */ -@media (prefers-contrast: high) { - .filter-bar-container, - .agenda-filter-bar-container, - .kanban-filter-bar-container { - border-width: 2px; - } - - .filter-control select, - .filter-search-input, - .filter-multiselect-button { - border-width: 2px; - } -} - -/* Date Range Picker Styles */ -.filter-bar-date-inputs { - display: flex; - align-items: center; - gap: var(--cs-spacing-sm); - flex-wrap: wrap; - margin-top: var(--cs-spacing-xs); -} - -.filter-bar-date-input-container { - display: flex; - align-items: center; - gap: var(--cs-spacing-xs); -} - -.filter-bar-date-label { - font-size: var(--cs-text-sm); - color: var(--text-muted); - white-space: nowrap; -} - -.filter-bar-date-input { - padding: var(--cs-spacing-xs) var(--cs-spacing-sm); - border: 1px solid var(--background-modifier-border); - border-radius: var(--cs-radius-sm); - background-color: var(--background-primary); - color: var(--text-normal); - font-size: var(--cs-text-sm); - min-width: 120px; -} - -.filter-bar-date-input:focus { - outline: none; - border-color: var(--interactive-accent); - box-shadow: 0 0 0 1px var(--interactive-accent); -} - -.filter-bar-date-clear { - padding: var(--cs-spacing-xs) var(--cs-spacing-sm); - border: 1px solid var(--background-modifier-border); - border-radius: var(--cs-radius-sm); - background-color: var(--background-secondary); - color: var(--text-normal); - font-size: var(--cs-text-sm); - cursor: pointer; - transition: background-color var(--cs-transition-fast); -} - -.filter-bar-date-clear:hover { - background-color: var(--background-modifier-hover); -} - -.filter-bar-date-clear:active { - background-color: var(--background-modifier-active); -} - -/* Reduced motion support */ -@media (prefers-reduced-motion: reduce) { - .filter-control select, - .filter-search-input, - .filter-multiselect-button, - .filter-advanced-toggle, - .filter-clear-button, - .filter-bar-date-input, - .filter-bar-date-clear { - transition: none; - } - - .filter-advanced-toggle .collapse-icon { - transition: none; - } -} \ No newline at end of file diff --git a/styles/kanban.css b/styles/kanban.css deleted file mode 100644 index 69ea265b..00000000 --- a/styles/kanban.css +++ /dev/null @@ -1,647 +0,0 @@ -/* ================================================ - KANBAN VIEW LEGACY STYLES - ================================================ - - NOTE: This file contains legacy styles for backward compatibility. - New styles are in kanban-view.css with proper BEM structure. - - ================================================ */ - -/* Header top row - Board selector and actions */ -.kanban-header-top { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: var(--cs-spacing-md); -} - -.kanban-board-selector { - display: flex; - align-items: center; - gap: var(--cs-spacing-md); -} - -.kanban-board-info { - display: flex; - align-items: center; - gap: var(--cs-spacing-sm); -} - -.kanban-board-title { - font-size: var(--cs-text-lg); - font-weight: 600; - color: var(--text-normal); - margin: 0; -} - -.kanban-actions { - display: flex; - align-items: center; - gap: var(--cs-spacing-sm); -} - -/* Header bottom row - Filters */ -.kanban-filters { - display: flex; - align-items: center; - gap: var(--cs-spacing-lg); - flex-wrap: wrap; - padding: var(--cs-spacing-sm) var(--cs-spacing-md); - background: var(--background-secondary); - border-radius: var(--cs-radius-md); - border: 1px solid var(--background-modifier-border); -} - -.kanban-filter { - display: flex; - align-items: center; - gap: var(--cs-spacing-sm); -} - -.kanban-label { - font-size: var(--cs-text-sm); - color: var(--text-muted); - font-weight: 500; - white-space: nowrap; -} - -.kanban-select { - min-width: 120px; - padding: var(--cs-spacing-sm) var(--cs-spacing-md); - border: 1px solid var(--background-modifier-border); - border-radius: var(--cs-radius-sm); - background: var(--background-primary); - color: var(--text-normal); - font-size: var(--cs-text-sm); - transition: all var(--cs-transition-fast); -} - -.kanban-select:focus { - outline: none; - border-color: var(--interactive-accent); - box-shadow: 0 0 0 2px var(--interactive-accent-transparent); -} - -.kanban-select:hover { - border-color: var(--interactive-hover); -} - -/* Enhanced buttons */ -.kanban-config-button, -.kanban-refresh-button { - display: flex; - align-items: center; - gap: var(--cs-spacing-xs); - padding: var(--cs-spacing-sm) var(--cs-spacing-md); - border: 1px solid var(--background-modifier-border); - border-radius: var(--cs-radius-sm); - background: var(--background-primary); - color: var(--text-normal); - font-size: var(--cs-text-sm); - font-weight: 500; - cursor: pointer; - transition: all var(--cs-transition-fast); - white-space: nowrap; -} - -.kanban-button-icon { - font-size: 1em; - line-height: 1; -} - -.kanban-config-button:hover, -.kanban-refresh-button:hover { - background: var(--background-modifier-hover); - border-color: var(--interactive-hover); - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -} - -.kanban-config-button:active, -.kanban-refresh-button:active { - transform: translateY(0); - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -} - -/* Enhanced checkbox styling */ -.kanban-checkbox-label { - display: flex; - align-items: center; - gap: var(--cs-spacing-sm); - cursor: pointer; - font-size: var(--cs-text-sm); - color: var(--text-normal); - font-weight: 500; - padding: var(--cs-spacing-xs) var(--cs-spacing-sm); - border-radius: var(--cs-radius-sm); - transition: all var(--cs-transition-fast); -} - -.kanban-checkbox-label:hover { - background: var(--background-modifier-hover); -} - -.kanban-checkbox-label input[type="checkbox"] { - width: 16px; - height: 16px; - cursor: pointer; -} - -/* Board selector dropdown enhancement */ -.kanban-board-selector .kanban-select { - min-width: 200px; - font-weight: 500; - border-color: var(--interactive-accent); -} - -/* Filter section styling */ -.kanban-filters-section { - display: flex; - align-items: center; - gap: var(--cs-spacing-md); -} - -.kanban-filters-toggle { - font-size: var(--cs-text-xs); - color: var(--text-muted); - cursor: pointer; - padding: var(--cs-spacing-xs); - border-radius: var(--cs-radius-sm); - transition: all var(--cs-transition-fast); -} - -.kanban-filters-toggle:hover { - color: var(--text-normal); - background: var(--background-modifier-hover); -} - -.kanban-board-container { - flex: 1; - overflow: hidden; - background: var(--background-secondary); -} - -.kanban-board { - display: flex; - height: 100%; - overflow-x: auto; - padding: var(--cs-spacing-md); - gap: var(--cs-spacing-md); - min-height: 0; -} - -.kanban-column { - min-width: 280px; - max-width: 350px; - flex-shrink: 0; - background: var(--background-primary); - border: 1px solid var(--background-modifier-border); - border-radius: var(--cs-radius-md); - display: flex; - flex-direction: column; - height: fit-content; - max-height: calc(100vh - 200px); -} - -.kanban-column.is-dragover { - border-color: var(--interactive-accent); - box-shadow: 0 0 0 2px var(--interactive-accent-transparent); -} - -.kanban-column-header { - display: flex; - flex-direction: column; - gap: 4px; - padding: var(--cs-spacing-sm) var(--cs-spacing-md); - border-bottom: 1px solid var(--background-modifier-border); - background: var(--background-secondary); - border-radius: var(--cs-radius-md) var(--cs-radius-md) 0 0; - cursor: grab; - user-select: none; -} - -.kanban-column-title { - font-weight: 600; - font-size: var(--cs-text-md); - color: var(--text-normal); - line-height: 1.2; -} - -.kanban-column-count { - color: var(--text-muted); - font-size: var(--cs-text-xs); - line-height: 1.2; - font-weight: 500; -} - -.kanban-column-body { - padding: var(--cs-spacing-sm); - min-height: 100px; - max-height: calc(100vh - 300px); - overflow-y: auto; - flex: 1; -} - -.kanban-column-body.is-dragover { - background: var(--background-modifier-hover); -} - -/* Task card layout in Kanban - keep tight spacing for cards */ -.kanban-column-body .tasknotes-card { - margin-bottom: 8px; -} - -.kanban-column-body .tasknotes-card:last-child { - margin-bottom: 0; -} - -.kanban-column-body .task-card.is-dragging { - opacity: 0.5; - transform: rotate(5deg); - cursor: grabbing; - z-index: 1000; - pointer-events: none; -} - -/* Removed redundant animation - cards should handle their own transitions */ - -/* Better visual feedback for drop zones */ -.kanban-column-body.is-dragover::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: var(--interactive-accent-transparent); - border: 2px dashed var(--interactive-accent); - border-radius: var(--cs-radius-md); - pointer-events: none; -} - -/* Scrollbar styling for Kanban columns */ -.kanban-column-body::-webkit-scrollbar { - width: 6px; -} - -.kanban-column-body::-webkit-scrollbar-track { - background: var(--background-secondary); - border-radius: 3px; -} - -.kanban-column-body::-webkit-scrollbar-thumb { - background: var(--background-modifier-border); - border-radius: 3px; -} - -.kanban-column-body::-webkit-scrollbar-thumb:hover { - background: var(--text-muted); -} - -/* Horizontal scroll for board */ -.kanban-board::-webkit-scrollbar { - height: 8px; -} - -.kanban-board::-webkit-scrollbar-track { - background: var(--background-secondary); -} - -.kanban-board::-webkit-scrollbar-thumb { - background: var(--background-modifier-border); - border-radius: 4px; -} - -.kanban-board::-webkit-scrollbar-thumb:hover { - background: var(--text-muted); -} - -/* Responsive design for smaller screens */ -@media (max-width: 768px) { - .kanban-header { - padding: var(--cs-spacing-md) var(--cs-spacing-sm); - } - - .kanban-header-top { - flex-direction: column; - align-items: flex-start; - gap: var(--cs-spacing-sm); - } - - .kanban-actions { - width: 100%; - justify-content: flex-end; - } - - .kanban-filters { - flex-direction: column; - align-items: flex-start; - gap: var(--cs-spacing-sm); - padding: var(--cs-spacing-sm); - } - - .kanban-filter { - width: 100%; - } - - .kanban-select { - min-width: auto; - width: 100%; - max-width: 200px; - } - - .kanban-column { - min-width: 240px; - max-width: 280px; - } - - .kanban-board { - padding: var(--cs-spacing-sm); - gap: var(--cs-spacing-sm); - } - - .kanban-config-button, - .kanban-refresh-button { - padding: var(--cs-spacing-xs) var(--cs-spacing-sm); - font-size: var(--cs-text-xs); - } -} - -/* Enhanced Kanban Features */ -.kanban-empty-state { - text-align: center; - padding: 40px; - color: var(--text-muted); - font-style: italic; - background: var(--background-secondary); - border: 2px dashed var(--background-modifier-border); - border-radius: var(--radius-m); - margin: 20px 0; -} - -/* Board meta information */ -.kanban-board-meta { - margin-top: 8px; -} - -.board-meta-item { - font-size: 0.85em; - color: var(--text-muted); - background: var(--background-modifier-form-field); - padding: 4px 8px; - border-radius: var(--radius-s); -} - -/* Enhanced filters and stats */ -.kanban-filter-controls { - display: flex; - gap: 16px; - align-items: center; -} - -.kanban-stats { - margin-left: auto; -} - -.board-stats { - display: flex; - gap: 12px; - align-items: center; -} - -.stat-item { - font-size: 0.8em; - padding: 4px 8px; - border-radius: var(--radius-s); - background: var(--background-secondary); - color: var(--text-muted); -} - -.stat-item.total { - background: var(--interactive-accent); - color: var(--text-on-accent); - font-weight: 500; -} - -.stat-item.completed { - background: var(--color-green); - color: white; -} - -.stat-item.archived { - background: var(--background-modifier-border); -} - -.stat-item.percentage { - background: var(--color-blue); - color: white; - font-weight: 500; -} - -/* Enhanced column styling */ -.column-title-container { - flex: 1; -} - -.column-count-container { - display: flex; - gap: 8px; - margin-top: 4px; -} - -.kanban-column-count.total { - background: var(--interactive-accent); - color: var(--text-on-accent); - padding: 2px 6px; - border-radius: var(--radius-s); - font-size: 0.7em; - font-weight: 600; -} - -.kanban-column-count.completed { - background: var(--color-green); - color: white; - padding: 2px 6px; - border-radius: var(--radius-s); - font-size: 0.7em; -} - -/* Discovered column styling */ -.kanban-column.discovered-column { - border: 2px dashed var(--color-orange); - background: linear-gradient(135deg, var(--background-primary) 0%, var(--background-secondary) 100%); -} - -.kanban-column.discovered-column .kanban-column-header { - background: linear-gradient(135deg, rgba(255, 165, 0, 0.2) 0%, var(--background-modifier-hover) 100%); - color: var(--text-normal); -} - -.kanban-column.uncategorized-column { - opacity: 0.8; - border: 1px dashed var(--text-muted); -} - -.kanban-column.uncategorized-column .kanban-column-header { - background: var(--background-modifier-border); -} - -/* Column actions */ -.column-actions { - margin-left: auto; -} - -.column-action-btn { - width: 24px; - height: 24px; - border-radius: 50%; - border: 1px solid var(--background-modifier-border); - background: var(--interactive-accent); - color: var(--text-on-accent); - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - font-size: 0.8em; - font-weight: bold; - transition: all var(--cs-transition-fast); -} - -.column-action-btn:hover { - background: var(--interactive-accent-hover); - transform: scale(1.1); -} - -/* Empty column placeholder */ -.kanban-column-empty { - text-align: center; - color: var(--text-muted); - font-style: italic; - padding: 20px; - border: 2px dashed var(--background-modifier-border); - border-radius: var(--radius-m); - margin: 8px; - background: var(--background-secondary); - transition: all var(--cs-transition-fast); -} - -.kanban-column-empty:hover { - border-color: var(--interactive-accent); - background: var(--background-modifier-hover); -} - -/* Enhanced drag and drop */ -.kanban-column.is-dragover { - transform: scale(1.02); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); - border-color: var(--interactive-accent); -} - -.kanban-column.is-dragover .kanban-column-empty { - border-color: var(--interactive-accent); - background: var(--interactive-accent-hover); - color: var(--text-on-accent); -} - -/* New task button */ -.kanban-new-task-button { - display: flex; - align-items: center; - gap: 6px; - padding: 8px 12px; - font-size: 0.9em; -} - -/* Simple column count */ -.kanban-column-count-simple { - color: var(--text-muted); - font-size: 0.8em; - font-weight: normal; - margin-left: 4px; -} - -/* Column Drag and Drop */ -.kanban-column-header:active { - cursor: grabbing; -} - -.kanban-column-header.is-dragging-column { - opacity: 0.5; - transform: rotate(2deg); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); -} - -/* Column-level drop target styling for board reordering */ -.kanban-column.column-drop-target { - background: var(--background-modifier-hover); - border: 2px dashed var(--color-accent); - transform: scale(1.02); - transition: all 0.2s ease; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); - position: relative; -} - -.kanban-column.column-drop-target .kanban-column-header { - background: transparent; - border: none; - transform: none; -} - -.kanban-column.column-drop-target::before { - content: "Drop here to reorder column"; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background: var(--color-accent); - color: var(--text-on-accent); - padding: 6px 12px; - border-radius: 4px; - font-size: 0.8em; - font-weight: 500; - z-index: 1000; - pointer-events: none; - white-space: nowrap; -} - -/* Simplified Filter Controls */ -.kanban-filter-controls { - display: flex; - gap: 16px; - align-items: center; -} - -.kanban-search-input { - padding: 4px 8px; - border: 1px solid var(--background-modifier-border); - border-radius: 4px; - background: var(--background-primary); - color: var(--text-normal); - font-size: 0.85em; - width: 200px; - transition: border-color 0.2s ease; -} - -.kanban-search-input:focus { - outline: none; - border-color: var(--color-accent); -} - -.kanban-search-input::placeholder { - color: var(--text-muted); -} - -.kanban-checkbox-label { - display: flex; - align-items: center; - gap: 6px; - font-size: 0.85em; - color: var(--text-muted); - cursor: pointer; -} - -.board-stats-simple { - font-size: 0.8em; - color: var(--text-muted); - margin-left: auto; -} \ No newline at end of file diff --git a/styles/modals.css b/styles/modals.css deleted file mode 100644 index 5bd613f4..00000000 --- a/styles/modals.css +++ /dev/null @@ -1,378 +0,0 @@ -/* ChronoSync Modals - Clean and Simple Styling */ - -/* ===== MODAL CONTAINERS ===== */ -.task-creation-modal, -.task-edit-modal { - padding: var(--size-4-4); - max-width: 580px; - width: 100%; - background: var(--background-primary); -} - -/* ===== MODAL HEADERS ===== */ -.task-creation-modal .setting-item-heading, -.task-edit-modal .setting-item-heading { - font-size: var(--font-ui-large); - font-weight: 600; - color: var(--text-normal); - line-height: 1.3; - border-bottom: 1px solid var(--background-modifier-border); - margin-bottom: var(--size-4-2); - padding-bottom: var(--size-2-2); -} - -/* ===== FORM STRUCTURE ===== */ -.task-creation-modal .form-group, -.task-edit-modal .form-group { - margin-bottom: var(--size-4-2); -} - -.task-creation-modal .form-label, -.task-creation-modal .form-group label { - display: block; - font-size: var(--font-ui-medium); - font-weight: 500; - color: var(--text-normal); - margin-bottom: var(--size-2-1); -} - -.task-edit-modal .form-label, -.task-edit-modal .form-group label { - display: block; - font-size: var(--font-ui-smaller); - font-weight: 500; - color: var(--text-normal); - margin-bottom: var(--size-2-1); -} - -.task-creation-modal .form-input-container, -.task-edit-modal .form-input-container { - position: relative; -} - -/* ===== FORM INPUTS ===== */ -.task-creation-modal .form-input, -.task-creation-modal .form-select, -.task-creation-modal .title-input, -.task-creation-modal .time-estimate-input { - padding: var(--size-2-2) var(--size-2-3); - border: 1px solid var(--background-modifier-border); - border-radius: var(--radius-s); - background: var(--background-primary); - color: var(--text-normal); - font-family: inherit; - font-size: var(--font-ui-medium); - font-weight: 400; - line-height: 1.3; - transition: border-color 0.2s ease; - width: 100%; - box-sizing: border-box; - outline: none; -} - -.task-edit-modal .form-input, -.task-edit-modal .form-select, -.task-edit-modal .title-input, -.task-edit-modal .time-estimate-input { - padding: var(--size-2-2) var(--size-2-3); - border: 1px solid var(--background-modifier-border); - border-radius: var(--radius-s); - background: var(--background-primary); - color: var(--text-normal); - font-family: inherit; - font-size: var(--font-ui-smaller); - font-weight: 400; - line-height: 1.3; - transition: border-color 0.2s ease; - width: 100%; - box-sizing: border-box; - outline: none; -} - -.task-creation-modal .form-input:hover, -.task-edit-modal .form-input:hover, -.task-creation-modal .form-select:hover, -.task-edit-modal .form-select:hover, -.task-creation-modal .title-input:hover, -.task-edit-modal .title-input:hover, -.task-creation-modal .time-estimate-input:hover, -.task-edit-modal .time-estimate-input:hover { - border-color: var(--background-modifier-border-hover); -} - -.task-creation-modal .form-input:focus, -.task-edit-modal .form-input:focus, -.task-creation-modal .form-select:focus, -.task-edit-modal .form-select:focus, -.task-creation-modal .title-input:focus, -.task-edit-modal .title-input:focus, -.task-creation-modal .time-estimate-input:focus, -.task-edit-modal .time-estimate-input:focus { - border-color: var(--interactive-accent); - outline: none; -} - -/* ===== CHARACTER COUNTER ===== */ -.task-creation-modal .character-counter, -.task-edit-modal .character-counter, -.task-creation-modal .char-counter, -.task-edit-modal .char-counter { - position: absolute; - top: -1.4rem; - right: 0; - font-size: var(--font-ui-smaller); - color: var(--text-muted); - font-weight: 400; - line-height: 1.4; -} - -.task-creation-modal .character-counter.warning, -.task-edit-modal .character-counter.warning, -.task-creation-modal .char-counter.warning, -.task-edit-modal .char-counter.warning { - color: var(--text-error); - font-weight: 500; -} - -/* ===== AUTOCOMPLETE ===== */ -.task-creation-modal .autocomplete-suggestions, -.task-edit-modal .autocomplete-suggestions { - position: absolute; - top: calc(100% + 4px); - left: 0; - right: 0; - background: var(--background-primary); - border: 1px solid var(--background-modifier-border); - border-radius: var(--radius-s); - box-shadow: var(--shadow-s); - z-index: 1000; - max-height: 240px; - overflow-y: auto; - padding: var(--size-2-1) 0; -} - -.task-creation-modal .suggestion-item, -.task-edit-modal .suggestion-item { - padding: var(--size-2-1) var(--size-2-3); - cursor: pointer; - font-size: var(--font-ui-medium); - color: var(--text-normal); - line-height: 1.5; - transition: background-color 0.2s ease; -} - -.task-creation-modal .suggestion-item:hover, -.task-edit-modal .suggestion-item:hover, -.task-creation-modal .suggestion-item.selected, -.task-edit-modal .suggestion-item.selected { - background: var(--background-modifier-hover); -} - -/* ===== DAYS OF WEEK SELECTOR ===== */ -.task-creation-modal .days-of-week-container, -.task-edit-modal .days-of-week-container { - display: grid; - grid-template-columns: repeat(7, 1fr); - gap: var(--size-4-2); - margin-top: var(--size-2-3); - padding: var(--size-4-2); - background: var(--background-secondary); - border-radius: var(--radius-m); - border: 1px solid var(--background-modifier-border); -} - -.task-creation-modal .day-checkbox-container, -.task-edit-modal .day-checkbox-container { - display: flex; - flex-direction: column; - align-items: center; - gap: var(--size-2-1); -} - -.task-creation-modal .day-checkbox, -.task-edit-modal .day-checkbox { - margin: 0; - cursor: pointer; -} - -.task-creation-modal .day-label, -.task-edit-modal .day-label { - font-size: var(--font-ui-small); - font-weight: 500; - color: var(--text-normal); - text-transform: uppercase; - letter-spacing: 0.05em; - cursor: pointer; - user-select: none; -} - -/* ===== TIME ESTIMATE ===== */ -.task-creation-modal .time-estimate-container, -.task-edit-modal .time-estimate-container { - display: flex; - align-items: center; - gap: var(--size-2-2); -} - -.task-creation-modal .time-estimate-input, -.task-edit-modal .time-estimate-input { - width: 80px; - flex-shrink: 0; -} - -.task-creation-modal .time-estimate-label, -.task-edit-modal .time-estimate-label { - font-size: var(--font-ui-medium); - color: var(--text-muted); -} - -/* ===== FILENAME PREVIEW (Creation Modal Only) ===== */ -.task-creation-modal .filename-preview { - margin-top: var(--size-2-2); - padding: var(--size-2-2) var(--size-2-3); - background: var(--background-secondary); - border: 1px solid var(--background-modifier-border); - border-radius: var(--radius-s); - font-size: var(--font-ui-small); - font-family: var(--font-monospace); -} - -.task-creation-modal .filename-preview-valid { - color: var(--text-normal); -} - -.task-creation-modal .filename-preview-error { - color: var(--text-error); - background: var(--background-modifier-error); -} - -/* ===== TASK METADATA (Edit Modal Only) ===== */ -.task-edit-modal .task-metadata-footer { - margin-top: var(--size-4-3); - padding-top: var(--size-4-2); - border-top: 1px solid var(--background-modifier-border); -} - -.task-edit-modal .task-metadata { - display: flex; - flex-direction: column; - gap: var(--size-2-3); -} - -.task-edit-modal .metadata-item { - font-size: var(--font-ui-small); - color: var(--text-muted); - line-height: 1.4; - padding: var(--size-2-3) var(--size-4-2); - background: var(--background-secondary); - border: 1px solid var(--background-modifier-border); - border-radius: var(--radius-s); - font-weight: 400; -} - -/* ===== BUTTONS ===== */ -.task-creation-modal .button-container, -.task-edit-modal .button-container { - display: flex; - gap: var(--size-4-2); - justify-content: flex-end; - align-items: center; - margin-top: var(--size-4-3); - padding-top: var(--size-4-2); - border-top: 1px solid var(--background-modifier-border); -} - -/* Primary Action Buttons */ -.task-creation-modal .create-button, -.task-edit-modal .save-button { - display: inline-flex; - align-items: center; - justify-content: center; - gap: var(--size-2-1); - padding: var(--size-2-2) var(--size-4-2); - border: none; - border-radius: var(--radius-m); - background: var(--interactive-accent); - color: var(--text-on-accent); - font-family: inherit; - font-size: var(--font-ui-medium); - font-weight: 500; - cursor: pointer; - user-select: none; - transition: background-color 0.2s ease; -} - -.task-creation-modal .create-button:hover, -.task-edit-modal .save-button:hover { - background: var(--interactive-accent-hover); -} - -/* Secondary Action Buttons */ -.task-creation-modal .cancel-button, -.task-edit-modal .cancel-button { - display: inline-flex; - align-items: center; - justify-content: center; - gap: var(--size-2-1); - padding: var(--size-2-2) var(--size-4-2); - border: 1px solid var(--background-modifier-border); - border-radius: var(--radius-m); - background: transparent; - color: var(--text-normal); - font-family: inherit; - font-size: var(--font-ui-medium); - font-weight: 500; - cursor: pointer; - user-select: none; - transition: all 0.2s ease; -} - -.task-creation-modal .cancel-button:hover, -.task-edit-modal .cancel-button:hover { - background: var(--background-modifier-hover); - border-color: var(--background-modifier-border-hover); -} - -/* Open Note Button (Edit Modal Only) */ -.task-edit-modal .open-note-button { - display: inline-flex; - align-items: center; - justify-content: center; - gap: var(--size-2-1); - padding: var(--size-2-2) var(--size-4-2); - border: none; - border-radius: var(--radius-m); - background: transparent; - color: var(--interactive-accent); - font-family: inherit; - font-size: var(--font-ui-medium); - font-weight: 500; - cursor: pointer; - user-select: none; - transition: all 0.2s ease; -} - -.task-edit-modal .open-note-button:hover { - background: var(--background-modifier-hover); -} - -/* ===== RESPONSIVE DESIGN ===== */ -@media (max-width: 768px) { - .task-creation-modal, - .task-edit-modal { - padding: var(--size-4-2); - max-width: 92vw; - } - - .task-creation-modal .button-container, - .task-edit-modal .button-container { - flex-direction: column; - gap: var(--size-2-2); - } - - .task-creation-modal .days-of-week-container, - .task-edit-modal .days-of-week-container { - grid-template-columns: repeat(4, 1fr); - gap: var(--size-2-2); - } -} \ No newline at end of file diff --git a/styles/tasks.css b/styles/tasks.css deleted file mode 100644 index b6d215e1..00000000 --- a/styles/tasks.css +++ /dev/null @@ -1,13 +0,0 @@ -/* ================================================ - TASK STYLES - REDIRECTED TO NEW STRUCTURE - ================================================ - - Task-related styles have been moved to: - - task-list-view.css for TaskListView specific styles - - Other view-specific CSS files for their task components - - tasks-legacy.css for backwards compatibility - - This file is maintained for build compatibility. - ================================================ */ - -@import url('./tasks-legacy.css'); \ No newline at end of file